/* Custom Styles para RETO JAVA 2026 - Modern Geometric Design */

/* Animaciones personalizadas */
@keyframes pulse-slow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes slide-diagonal {
    0% {
        transform: translateX(-100px) translateY(-100px);
    }

    100% {
        transform: translateX(100px) translateY(100px);
    }
}

.animate-pulse {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Estilos para scroll suave */
html {
    scroll-behavior: smooth;
}

/* Patrones geométricos de fondo */
.pattern-dots {
    background-image: radial-gradient(circle, #2f01fc 1px, transparent 1px);
    background-size: 20px 20px;
}

.pattern-dots-white {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
}

.pattern-grid {
    background-image:
        linear-gradient(rgba(0, 0, 112, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 112, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Rayas diagonales */
.stripe-yellow {
    background: repeating-linear-gradient(45deg,
            #2f01fc,
            #2f01fc 20px,
            #2f01fc 20px,
            #2f01fc 40px);
}

.stripe-dark {
    background: repeating-linear-gradient(45deg,
            #1a1a1a,
            #1a1a1a 20px,
            #2a2a2a 20px,
            #2a2a2a 40px);
}

/* Formas geométricas decorativas */
.geometric-shape {
    position: absolute;
    pointer-events: none;
}

.triangle-yellow {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #2f01fc;
    opacity: 0.1;
}

/* Importar fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;600;700&display=swap');

/* Variables de color personalizadas */
:root {
    --java-dark: #1a1a2e;
    --java-blue: #2563EB;
    --java-blue-light: #3B82F6;
    --java-blue-hover: #1D4ED8;
    --java-blue-dark: #1E40AF;
}

/* Clases de utilidad para colores azules */
.bg-java-blue {
    background-color: var(--java-blue);
}

.text-java-blue {
    color: var(--java-blue);
}

.border-java-blue {
    border-color: var(--java-blue);
}

.hover\:bg-java-blue-hover:hover {
    background-color: var(--java-blue-hover);
}

.triangle-dark {
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 300px solid #1a1a1a;
    opacity: 0.3;
}

/* Efectos hover personalizados */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 112, 0.3);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Gradientes personalizados */
.gradient-java {
    background: linear-gradient(135deg, #1a1a1a 0%, #2f01fc 100%);
}

.gradient-java-radial {
    background: radial-gradient(circle at top right, #2f01fc 0%, #1a1a1a 70%);
}

/* Inputs con efecto focus mejorado */
input:focus,
textarea:focus {
    outline: none;
    border-color: #000070;
    box-shadow: 0 0 0 3px rgba(0, 0, 112, 0.15);
}

/* Botones con efecto ripple */
button {
    position: relative;
    overflow: hidden;
}

button:active {
    transform: scale(0.98);
}

/* Loading spinner */
.spinner {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #000070;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Cards de noticias con efecto hover mejorado */
.news-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 112, 0.2);
}

.news-card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(26, 26, 26, 0.95), transparent);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding: 1.5rem;
}

.news-card:hover .overlay {
    transform: translateY(0);
}

/* Decorative elements */
.dots-decoration {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(4, 10px);
    gap: 10px;
}

.dots-decoration span {
    width: 10px;
    height: 10px;
    background: #000070;
    border-radius: 50%;
    display: block;
}

/* Stripe decorations */
.stripe-decoration {
    position: absolute;
    width: 200px;
    height: 20px;
    background: repeating-linear-gradient(45deg,
            #000070,
            #000070 10px,
            transparent 10px,
            transparent 20px);
}

/* Image overlay effects */
.image-overlay-yellow {
    position: relative;
}

.image-overlay-yellow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 112, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

/* Responsive countdown */
@media (max-width: 768px) {
    #countdown {
        transform: scale(0.8);
    }
}

/* Text shadows para mejor legibilidad */
.text-shadow-strong {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8),
        4px 4px 20px rgba(0, 0, 0, 0.6);
}

.text-shadow-yellow {
    text-shadow: 2px 2px 8px rgba(0, 0, 112, 0.5);
}

/* Transiciones suaves universales */
* {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Scrollbar personalizado (webkit) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #2f01fc;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2f01fc;
}

/* Clip path shapes */
.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.clip-angle-right {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}

/* Diagonal Bands for Hero Corners */
.diagonal-band-top-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background: #2f01fc;
    transform: rotate(-45deg);
    transform-origin: top left;
    z-index: 5;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.diagonal-band-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: #2f01fc;
    transform: rotate(-45deg);
    transform-origin: bottom right;
    z-index: 5;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Responsive diagonal bands */
@media (max-width: 768px) {

    .diagonal-band-top-left,
    .diagonal-band-bottom-right {
        width: 250px;
        height: 250px;
    }
}