/* Si ves el fondo azul, el CSS está funcionando */
/* body { background: lightblue; } */
html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Usamos el nombre exacto que Adobe pide */
    font-family: "museo-sans", Helvetica, Arial, sans-serif !important;
}

h1 {
    font-weight: 900 !important;
    font-size: 80px;
}

p {
    font-weight: 500 !important;
    font-size: 24px;
}

.red {
    color: #E21F26;
}

:root {
    --barco-red: #E21F26;
    --barco-dark: #231F20;
    --white: #FFFFFF;
}

/* Header */
.main-header {
    background: var(--white);
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img { height: 32px; }

.nav-main { display: flex; align-items: center; gap: 40px; }

.nav-main ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

.nav-main a {
    text-decoration: none;
    color: var(--barco-dark);
    font-weight: 700;
    font-size: 14px;
}

.btn-contact {
    background: var(--barco-red);
    color: white !important;
    padding: 10px 22px;
    border-radius: 4px;
    transition: 0.3s;
}

/* Hero */
.hero {
    padding: 80px 0;
    background-color: #F8F9FA;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

h1 {
    font-size: 80px;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -3px;
    margin-bottom: 30px;
}

.red { color: var(--barco-red); }

p {
    font-size: 20px;
    font-weight: 500;
    color: #555;
    margin-bottom: 40px;
    max-width: 500px;
}

.btn-black {
    background: var(--barco-dark);
    color: white;
    text-decoration: none;
    padding: 18px 35px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    display: inline-block;
}

.link-arrow {
    margin-left: 30px;
    color: var(--barco-dark);
    text-decoration: none;
    font-weight: 700;
}

.arrow { color: var(--barco-red); font-size: 20px; }


/* =============================================
   SECCIÓN: PRESENTACIÓN CLICKSHARE HUB (Ajuste Final)
   ============================================= */

.hub-presentation {
    padding: 100px 0;
    background: linear-gradient(135deg, #d22c21 0%, #470f67 100%);
    /* Forzamos que todo lo que esté aquí adentro sea blanco */
    color: #FFFFFF !important; 
    overflow: hidden;
}

.hub-presentation .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px; /* Más margen a los lados para que no toque bordes */
}

.hub-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr; /* Texto protagonista, video acompañante */
    gap: 80px;
    align-items: center;
}

/* Forzar color blanco en todos los textos de la sección */
.hub-text-content h2, 
.hub-text-content p, 
.hub-text-content span,
.hub-text-content .eyebrow {
    color: #FFFFFF !important;
}

/* Título Principal */
.hub-text-content h2 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 25px;
}

/* Descripción */
.hub-text-content .description {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9; /* Un toque de transparencia para elegancia */
}

/* DETALLE DE ICONOS (Aquí es donde los reducimos) */
.event-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

/* Iconos pequeños y finos */
.detail-item .icon {
    width: 18px;  /* Tamaño pequeño y elegante */
    height: 18px;
    fill: #FFFFFF;
    flex-shrink: 0; /* Evita que se deformen */
}

/* Video pequeño y alineado */
.hub-video-content {
    display: flex;
    justify-content: flex-end;
}

.video-wrapper {
    width: 100%;
    max-width: 380px; /* Video más controlado */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

/* Ajuste móvil */
@media (max-width: 992px) {
    .hub-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hub-video-content {
        justify-content: center;
    }
    .event-details {
        align-items: center;
    }
}









/* Contenedor principal: asegura el centrado total */
.certification-section {
    width: 100%;
    padding: 100px 20px 40px 20px; /* Mucho margen arriba, poco abajo */
    display: flex;
    flex-direction: column;
    align-items: center;          /* Centra horizontalmente */
    justify-content: center;
    text-align: center;           /* Asegura que el texto se centre */
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Título: Grande y pegado al logo */
.certification-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 38px;             /* Tamaño imponente */
    font-weight: 800;
    color: #000000;
    margin: 0 0 5px 0;           /* Margen de solo 5px abajo para pegarlo al logo */
    line-height: 1.1;
    max-width: 850px;            /* Para que no se estire infinito en monitores 4K */
}

/* El Logo: Aquí es donde limitamos el tamaño para que no sea gigante */
.teams-logo {
    width: 380px;                /* Tamaño sugerido, ajústalo si lo quieres un poco más o menos */
    max-width: 90%;              /* No permite que sea más ancho que la pantalla en móvil */
    height: auto;                /* Mantiene la proporción */
    display: block;
    margin: 0 auto;              /* Refuerza el centrado */
}

/* Ajuste para que en móviles no se rompa nada */
@media (max-width: 768px) {
    .certification-section {
        padding-top: 60px;
    }
    .certification-title {
        font-size: 26px;
    }
    .teams-logo {
        width: 250px;            /* Logo más moderado en celulares */
    }
}







/* --- Sección Canales (Dos Columnas) --- */

.channels-section {
    width: 100%;
    background-color: #f4f4f4; /* El "grisesito" para diferenciar la sección */
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.channels-container {
    max-width: 1100px;
    width: 100%;
    display: flex;
    align-items: center; /* Centra verticalmente imagen y texto */
    gap: 50px;           /* Espacio entre la imagen y el texto */
}

/* Columna de Imagen */
.channels-image {
    flex: 1;             /* Toma el 50% del espacio */
    display: flex;
    justify-content: center;
}

.placeholder-img {
    width: 100%;
    min-height: 400px;   /* Altura de referencia mientras pones tu imagen */
    background-color: #e0e0e0; /* Un gris un poco más oscuro para el placeholder */
    border-radius: 8px;
}

/* Columna de Texto */
.channels-content {
    flex: 1;             /* Toma el otro 50% */
    text-align: left;    /* Texto alineado a la izquierda */
}

.channels-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.2;
}

.channels-intro {
    font-size: 18px;
    color: #333333;
    margin-bottom: 25px;
    line-height: 1.5;
}

.channels-list {
    list-style: none;    /* Quitamos los bullets por defecto */
    padding: 0;
}

.channels-list li {
    font-size: 16px;
    color: #444444;
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

/* Opcional: Un pequeño bullet personalizado */
.channels-list li::before {
    content: "•";
    color: #be1622;      /* Rojo de Barco/Cisco para resaltar */
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

.channels-list strong {
    font-size: 18px;
    color: #000000;
}

/* --- Responsive (Para móviles) --- */
@media (max-width: 768px) {
    .channels-container {
        flex-direction: column; /* En móvil, la imagen arriba y el texto abajo */
        gap: 30px;
    }

    .channels-title {
        font-size: 26px;
    }

    .placeholder-img {
        min-height: 250px;
    }
}




/* --- Sección Experiencia (Fondo de Imagen) --- */

.experience-section {
    width: 100%;
    /* Ruta corregida para subir un nivel y entrar a images */
    background-image: url('../images/IMAGEN_BARCO_01.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    padding: 120px 20px; /* Un poco más de aire arriba y abajo */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Capa oscura para que el texto resalte */
.experience-section::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Un poco más oscuro para mejor contraste */
    z-index: 1;
}

.experience-section .container {
    max-width: 900px; /* Un poco más estrecho ayuda a que el centrado luzca mejor */
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center; /* CENTRADO DE TEXTO */
}

/* TÍTULO: Blanco y más grande */
.section-title.white-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 50px;           /* Tamaño aumentado */
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 50px;       /* Espacio hacia la lista */
    line-height: 1.1;
    display: block;
}

/* LISTA: Centrada y sin bullets laterales */
.experience-list.white-text {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Para que el bloque se comporte bien al centrar */
    width: 100%;
}

.experience-list li {
    font-size: 24px;           /* Texto un poco más grande para legibilidad */
    color: #ffffff !important;
    line-height: 1.5;
    margin-bottom: 25px;
    padding-left: 0;           /* Quitamos el padding para que no se desplace */
}

/* --- Ajuste para celular --- */
@media (max-width: 768px) {
    .experience-section {
        padding: 80px 15px;
    }

    .section-title.white-text {
        font-size: 34px;
        margin-bottom: 35px;
    }

    .experience-list li {
        font-size: 18px;
    }
}







/* --- Sección Registro (Versión Limpia) --- */

.interest-section {
    width: 100%;
    background-color: #f4f4f4;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.interest-section .container {
    max-width: 800px; /* Un poco más angosto se ve más premium */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interest-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 50px;
    text-align: center;
}

.interest-form {
    width: 100%;
}

.form-group {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.form-group label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #444444;
    width: 30%;
    text-align: left;
}

.form-group label .required {
    color: #be1622;
}

.form-group input {
    width: 70%;
    padding: 12px 15px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #be1622;
    outline: none;
}

.consent-group {
    margin: 30px 0;
    display: flex;
    align-items: flex-start;
}

.consent-group input {
    margin-top: 4px;
    margin-right: 12px;
}

.consent-group label {
    font-size: 14px;
    color: #666666;
    line-height: 1.4;
}

.submit-button {
    background-color: #ED1C24;
    color: #ffffff;
    border: none;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
    display: block;
    margin: 0 auto;
}

.submit-button:hover {
    background-color: #a0121a;
}

.legal-text {
    font-size: 12px;
    color: #999999;
    text-align: center;
    margin-top: 25px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .form-group {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-group label, .form-group input {
        width: 100%;
    }
    .form-group label {
        margin-bottom: 8px;
    }
}






/* --- Header Principal --- */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.9); /* Blanco semi-transparente */
    backdrop-filter: blur(10px);               /* Desenfoque de fondo premium */
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
}

/* Contenedor que mantiene todo centrado respecto al contenido */
.header-flex {
    max-width: 1100px; /* Igual que tus otras secciones */
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Logo */
.logo img {
    height: 60px; /* Ajusta según tu archivo svg */
    width: auto;
    display: block;
}

/* Menú de Navegación */
.nav-main {
    display: flex;
    align-items: center;
}

.nav-main ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-main ul li {
    margin: 0 15px;
}

.nav-main ul li a {
    text-decoration: none;
    color: #333;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s;
}

.nav-main ul li a:hover {
    color: #be1622; /* Rojo Barco */
}

/* Botón Registro en Header */
.btn-register {
    background-color: #ED1C24;
    color: #ffffff !important;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    margin-left: 25px;
    transition: transform 0.2s, background 0.3s;
    display: inline-block;
}

.btn-register:hover {
    background-color: #a0121a;
    transform: translateY(-2px);
}

/* --- Lógica Menú Hamburguesa (Mobile) --- */

.nav-toggle {
    display: none; /* Escondemos el checkbox */
}

.nav-toggle-label {
    display: none; /* Solo se ve en móvil */
    cursor: pointer;
    padding: 10px;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background: #333;
    height: 2px;
    width: 25px;
    border-radius: 2px;
    position: relative;
    transition: all 0.3s;
}

.nav-toggle-label span::before { content: ""; top: -8px; }
.nav-toggle-label span::after { content: ""; top: 6px; }

/* --- RESPONSIVE --- */

@media (max-width: 992px) {
    .nav-toggle-label {
        display: block; /* Aparece la hamburguesa */
    }

    .nav-main {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        flex-direction: column;
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        display: none; /* Escondido por defecto */
    }

    .nav-main ul {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .nav-main ul li {
        margin: 15px 0;
    }

    .nav-actions {
        margin-top: 15px;
    }

    .btn-register {
        margin-left: 0;
    }

    /* Mostrar menú al activar checkbox */
    .nav-toggle:checked ~ .nav-main {
        display: flex;
    }

    /* Animación X de la hamburguesa */
    .nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }
    .nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
    .nav-toggle:checked ~ .nav-toggle-label span::after { transform: rotate(-45deg); top: -2px; }
}


/* --- Sección de Mapa --- */

.google-map-section {
    width: 100%;
    height: 500px; /* La altura que pediste */
    overflow: hidden;
    line-height: 0; /* Elimina un pequeño espacio en blanco que a veces queda abajo */
}

.google-map-section iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(10%) contrast(105%); /* Opcional: un toque sutil para que se vea más corporativo */
}

/* Ajuste para que en móviles no sea tan alto y no estorbe al hacer scroll */
@media (max-width: 768px) {
    .google-map-section {
        height: 350px;
    }
}

.google-map-section {
    width: 100%;
    height: 500px;
    overflow: hidden;
    line-height: 0;
}

.google-map-section iframe {
    width: 100%;
    height: 100%;
    border: 0;
}




/* 1. Quitamos el fondo gris del contenedor */
.placeholder-img {
    background-color: transparent !important; /* Quita el gris */
    border: none !important;                 /* Quita bordes si los hay */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Hacemos la imagen más pequeña */
.placeholder-img img {
    max-width: 350px; /* Ajusta este número (ej. 350px) hasta que te guste el tamaño */
    width: 100%;      /* Para que no se desborde en móvil */
    height: auto;     /* Mantiene la proporción */
    display: block;
}

/* 3. Ajuste de la columna (opcional) */
.channels-image {
    display: flex;
    justify-content: center;
    align-items: center;
}





/* --- Estilos para la lista con bullets rojos --- */

.experience-list {
    list-style: none; /* Quitamos el bullet negro por defecto */
    padding: 0;
    margin: 0;
}

.experience-list li {
    position: relative;
    padding-left: 30px;   /* Espacio para que quepa la bolita */
    margin-bottom: 20px;  /* Separación entre puntos */
    color: #ffffff;       /* Texto blanco */
    font-size: 22px;      /* Ajusta el tamaño según tu diseño */
    line-height: 1.4;
    text-align: left;     /* Alineación a la izquierda para que los bullets luzcan */
}

/* Creación de la bolita personalizada */
.experience-list li::before {
    content: "\2022";      /* Código del carácter de la bolita */
    color: #ED1C24;        /* El rojo exacto que pediste */
    font-weight: bold;
    display: inline-block; 
    width: 1em;           /* Tamaño del área de la bolita */
    margin-left: -1em;    /* La posiciona exactamente a la izquierda */
    font-size: 35px;      /* Tamaño de la bolita (un poco más grande que el texto) */
    vertical-align: middle;
    line-height: 1;
}









/* --- Resaltado de palabras en la sección Canales --- */

.channels-list li strong {
    color: #ED1C24;    /* El rojo que hemos estado usando */
    font-weight: 800;  /* Un poco más de peso para que resalte como Multimedia Designer */
    display: inline-block;
    margin-bottom: 5px; /* Espacio extra antes del salto de línea <br> */
}


/* --- Cierre de Página con Colores Institucionales --- */

.main-footer-gradient {
    width: 100%;
    height: 50px; /* Altura solicitada */
    
    /* Degradado con tus colores exactos: #d22c21 y #470f67 */
    background: linear-gradient(90deg, #d22c21 0%, #470f67 100%);
    
    border: none;
    margin-top: 0; /* Asegura que se pegue a la sección anterior */
    padding: 0;
    display: block;
}

/* Tip: Si queda un espacio blanco abajo, esto lo soluciona */
body {
    margin: 0;
    background-color: #ffffff; 
}




.eyebrow {
    color: #ffffff !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    display: block;
    
    /* --- EL AJUSTE DE MARGEN --- */
    margin-top: 60px;    /* Dale este espacio para que baje respecto al header */
    margin-bottom: 15px; /* Espacio con el título de abajo */
    
    line-height: 1.2;
}

/* Ajuste para móvil (opcional pero recomendado) */
@media (max-width: 768px) {
    .eyebrow {
        margin-top: 40px; 
        font-size: 22px;
    }
}






/* --- Sección Patrocinadores (Minimalista) --- */

.sponsors-section {
    background-color: #ffffff; /* Gris suave de la identidad */
    padding: 100px 20px;
    text-align: center;
}

.sponsors-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #333;
    margin-bottom: 80px; /* Más espacio al título principal */
    text-transform: uppercase;
}

.sponsor-tier {
    margin-bottom: 70px; /* Espacio entre los grupos de logos */
}

/* Contenedor de logos */
.logo-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px; /* Espacio entre logos de la misma línea */
}

/* Jerarquía por tamaños máximos */
.sponsor-tier.platinum img {
    max-width: 280px;
    height: auto;
}

.sponsor-tier.gold img {
    max-width: 420px;
    height: auto;
}

.sponsor-tier.silver img {
    max-width: 170px;
    height: auto;
}

/* Efectos visuales */
.logo-grid img {
    filter: grayscale(100%); /* Los hace monocromáticos para que no peleen entre sí */
    opacity: 0.7;
    transition: all 0.4s ease;
}

.logo-grid img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .sponsors-section {
        padding: 60px 15px;
    }
    
    .logo-grid {
        gap: 40px;
        flex-direction: column;
    }

    .sponsor-tier.platinum img { max-width: 220px; }
    .sponsor-tier.gold img { max-width: 180px; }
    .sponsor-tier.silver img { max-width: 140px; }
}


/* 1. Reducimos el espacio inferior de la sección completa */
.sponsors-section {
    padding-bottom: 40px !important; /* Bajamos de 100px a 40px */
}

/* 2. Quitamos el margen al último tier (Silver) para que no empuje el footer */
.sponsor-tier:last-child {
    margin-bottom: 0 !important;
}