/* Fuentes */
@font-face {
    font-family: 'Adieu';
    src: url('fonts/Adieu.woff2') format('woff2'), 
         url('fonts/Adieu.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap; 
}
@font-face {
    font-family: 'Adieu';
    src: url('fonts/Adieu-Bold.woff2') format('woff2');
    font-weight: bold; font-style: normal; font-display: swap;
}

/* VARIABLES Y RESET */
:root {
    --text-color: #ffffff; /* ****** CAMBIO: Color de texto principal a blanco ****** */
    --counter-bg: rgba(25, 65, 130, 0.4); /* Fondo contador azul semi-transparente */
    --color-rojo: #e41513;        /* Rojo Electricón */
    --color-azul-oscuro: #194182; /* Azul Principal */
    --color-azul-claro: #42a5f5;   /* Link diseñador (temporal, se cambiará) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Barlow', sans-serif; 
    color: var(--text-color); /* Asegura que el texto por defecto sea blanco */
    background-color: #000; 
    overflow-x: hidden; 
    position: relative; 
    min-height: 100vh;
}

/* Capas de Fondo */
.background-base { /* Fondo sólido/video base */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -100;
}
.overlay { /* Degradado */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -99; 
    background: linear-gradient( to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 50%, rgba(25, 65, 130, 0.8) 100% );
    pointer-events: none;
}
.image-background-layer { /* Imagen JPG con transparencia */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('Sitio Web Electricón 2026/assets/fondo-electricon-2026.jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0.25; 
    mix-blend-mode: lighten; 
    z-index: -98; 
    pointer-events: none;
}

/* Capa de Olas (Waves) */
.waves-container {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    z-index: 5; /* Encima de fondos/overlay */
    pointer-events: none; 
}
.waves-canvas { display: block; width: 100%; height: 100%; }
.waves-container::before { /* Cursor opcional */
    content: ''; position: absolute;
    top: var(--y, 50%); left: var(--x, 50%);
    width: 0.5rem; height: 0.5rem;
    background: rgba(255, 255, 255, 0.5); border-radius: 50%;
    transform: translate3d(-50%, -50%, 0); will-change: transform;
    pointer-events: none; z-index: 6;
}

/* Contenido Principal (Encima de todo) */
.content-overlay {
    position: relative; 
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    padding: 20px;
    color: var(--text-color); /* ****** Asegura texto blanco para el contenido ****** */
}

/* Header y Logo */
.logo-header { text-align: center; padding-bottom: 20px; }
.logo-img { width: clamp(180px, 30vw, 250px); filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6)); }

/* Grupo Superior Derecho */
.top-right-group { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 15px; }

/* Countdown */
.countdown-container { background-color: var(--counter-bg); padding: 10px 15px; border-radius: 8px; backdrop-filter: blur(5px); }
.countdown { display: flex; gap: 15px; font-family: 'Adieu', sans-serif; font-weight: bold; }
.time-block { text-align: center; }
.time-block span { font-size: clamp(1.5rem, 4vw, 2rem); display: block; }
.time-block label { font-size: 0.7rem; font-family: 'Barlow', sans-serif; font-weight: 300; text-transform: uppercase; opacity: 0.8; }
.event-started { font-size: 1.2rem; font-weight: bold; color: var(--color-rojo); }

/* Botón CTA */
.cta-button-container { margin-top: 10px; }
.cta-button { display: inline-block; background-color: var(--color-rojo); color: #fff; padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: 600; font-size: 1rem; text-transform: uppercase; transition: background-color 0.3s, transform 0.2s; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.cta-button:hover { background-color: #c31210; transform: translateY(-2px); }

/* Información Principal */
.main-info {
    flex-grow: 1;
    display: flex; /* Habilitamos Flexbox */
    justify-content: space-between; /* Separa los elementos a los lados */
    align-items: center; /* Centra verticalmente */
    text-align: left; /* Alinea el texto a la izquierda por defecto */
    padding: 40px 0;
    position: relative;
    width: 100%; /* Asegura que ocupe el ancho */
    max-width: 1200px; /* Limita el ancho máximo para mejor control */
    margin-left: auto; /* Centra el contenedor .main-info */
    margin-right: auto;
}

/* Contenedor para el texto (izquierda) */
.main-info-text {
    flex-basis: 50%; /* Ocupa la mitad izquierda */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea items a la izquierda */
    position: relative; /* Para z-index */
    z-index: 12;
}

/* Texto Principal */
.future-text {
    font-family: 'Adieu', sans-serif;
    font-size: clamp(3rem, 8vw, 5rem); /* Ajustado tamaño */
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 20px; /* Reducido margen */
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    color: var(--text-color);
}

.location-date-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Reducido gap */
    font-size: 1.1rem; /* Ajustado tamaño */
    font-weight: 600;
    color: var(--text-color);
}
.location-date-group span {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.location-date-group .separator {
    font-size: 1.5rem; /* Ajustado tamaño */
    opacity: 0.5;
}
.location-date-group .location i {
    margin-right: 8px;
    color: var(--color-rojo);
}

/* Imagen Portada (Ingenieros - Derecha) */
.portada-ingenieros-img {
    position: relative; /* Ya no es absolute */
    flex-basis: 45%; /* Ocupa la parte derecha, un poco menos que el texto */
    max-width: 500px; /* Ajusta el tamaño máximo */
    width: auto; /* Permite que se ajuste */
    height: auto; /* Mantiene proporción */
    object-fit: contain; /* Asegura que se vea completa */
    z-index: 11;
    /* Quitamos bottom, left, transform */
    filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.4));
}


/* --- Media Queries (Adaptación Responsiva) --- */
@media (max-width: 768px) {
    /* ... (Otros estilos responsivos) ... */

    .main-info {
        flex-direction: column; /* Apila elementos verticalmente */
        text-align: center; /* Centra todo el texto */
        padding: 20px 0;
    }

    .main-info-text {
        flex-basis: auto; /* Resetea la base */
        align-items: center; /* Centra el texto */
        order: 1; /* El texto va primero */
    }

    .future-text {
        font-size: clamp(2.5rem, 12vw, 4rem);
        margin-bottom: 15px;
    }

    .location-date-group {
        justify-content: center; /* Centra fecha y lugar */
        gap: 10px;
        font-size: 1rem;
        margin-bottom: 30px; /* Espacio antes de la imagen */
    }
    .location-date-group .separator { display: none; }

    .portada-ingenieros-img {
        position: relative; /* Mantenemos relative */
        flex-basis: auto; /* Resetea la base */
        order: 2; /* La imagen va después del texto */
        width: 80%; /* Ajusta ancho en móvil */
        max-width: 400px; /* Limita ancho en móvil */
        margin-top: 20px; /* Espacio sobre la imagen */
        /* Quitamos bottom, left, transform */
    }
}

.location-date-group { display: flex; align-items: center; gap: 20px; font-size: 1.2rem; font-weight: 600; position: relative; z-index: 12; /* Encima de la imagen */ color: var(--text-color); /* ****** Asegura texto blanco ****** */ }
.location-date-group span { text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.location-date-group .separator { font-size: 2rem; opacity: 0.5; }
.location-date-group .location i { margin-right: 8px; color: var(--color-rojo); }

/* Footer */
.footer-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); border-top: 1px solid rgba(255, 255, 255, 0.1); }

.sponsors { display: flex; align-items: center; gap: 20px; }
.sponsor-logo { height: 30px; opacity: 0.8; transition: opacity 0.3s; }
.sponsor-logo:hover { opacity: 1; }

.social-links { display: flex; align-items: center; gap: 15px; color: #fff; /* Asegura color blanco para texto y handle */ }
.social-links a { color: #fff; font-size: 1.3em; transition: color 0.3s; }
.social-links a i { /* Estilo directo al icono */ transition: transform 0.2s; }
.social-links a:hover i { color: var(--color-rojo); transform: scale(1.1); } /* Hover rojo y zoom al icono */
.social-links .handle { font-size: 0.9em; font-weight: 300; margin-left: 5px; }
.social-links span:last-child { font-size: 0.8em; opacity: 0.7; margin-left: 15px; }
/* ****** CAMBIO: Color blanco para el enlace del diseñador ****** */
.social-links span a.designer-link { 
    font-size: 1em; 
    color: #ffffff !important; /* Fuerza el color blanco */ 
    text-decoration: none; 
}
.social-links span a.designer-link:hover { text-decoration: underline; }

/* --- Media Queries --- */
@media (max-width: 768px) {
    .content-overlay { padding: 15px; }
    .top-right-group { position: static; align-items: center; margin-bottom: 20px; }
    .main-info { padding: 20px 0; }
    .future-text { font-size: clamp(2.5rem, 12vw, 4rem); }
    .location-date-group { flex-direction: column; gap: 10px; font-size: 1rem; }
    .location-date-group .separator { display: none; }
    .portada-ingenieros-img { bottom: -20px; max-width: 400px; } /* Ajuste imagen en móvil */
    .footer-bar { flex-direction: column; gap: 15px; padding: 15px; }
    .sponsors { justify-content: center; flex-wrap: wrap; gap: 15px; }
    .sponsor-logo { height: 25px; }
    .social-links { justify-content: center; }
}