:root {
      --navy: #0b2a53;
      --gold: #c8a045;
      --gold-light: #e6c273;
      --white: #ffffff;
      --bg: #f8fafc;
      --header-h: 130px; 
      --muted: #64748b;
      --line: rgba(11, 42, 83, 0.08);
      --radius-lg: 32px;
      --radius-md: 20px;
      --radius-pill: 999px;
      --shadow: 0 20px 40px -15px rgba(8, 31, 63, 0.1);
      --max: 1200px;
    }

    * { box-sizing: border-box; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    html { scroll-behavior: smooth; }
    
    body {
      padding-top: var(--header-h);
      margin: 0;
      font-family: 'Plus Jakarta Sans', sans-serif;
      color: #0f172a;
      background-color: var(--bg);
    }

    .container { width: min(var(--max), 92vw); margin: 0 auto; }

    /* ================= HEADER ================= */
    header { position: fixed; top: 15px; left: 0; right: 0; z-index: 1000; }
    .header-inner {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: var(--radius-md);
      padding: 15px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow);
    }
    .logo-img { height: 90px; width: auto; }
    
    nav a { padding: 10px 18px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
    nav a.cta { background: var(--navy); color: white; }

    /* ================= BANNER ================= */
    .main-banner {
      width: 100%;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
      margin-bottom: 20px;
      border: 1px solid var(--line);
    }
    .main-banner img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* ================= BENTO COMPONENTS ================= */
    .section-head { margin-bottom: 30px; margin-top: 40px; }
    .section-head h3 { font-size: 32px; font-weight: 800; color: var(--navy); margin: 0; }
    
    .bento-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      padding: 40px;
      box-shadow: var(--shadow);
    }

    .hero-grid { 
      display: grid; 
      grid-template-columns: 4fr 6fr; 
      gap: 20px; 
      margin-bottom: 20px; 
      align-items: stretch; 
    }
    
    .hero-main { background: linear-gradient(135deg, #0b2a53 0%, #081f3f 100%); color: white; }
    .badge { background: rgba(200, 160, 69, 0.2); color: var(--gold-light); padding: 6px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; text-transform: uppercase; }

    /* ================= GIRA Y FAQ ================= */
    .events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
    .event-card { background: white; padding: 25px; border-radius: var(--radius-lg); border: 1px solid var(--line); }
    .event-date-box { background: #fef9ec; border: 1px solid #fae8b8; border-radius: 16px; width: 60px; height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--navy); margin-bottom: 15px; }
    
    .faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; }
    .faq-card { background: white; border-radius: var(--radius-lg); padding: 30px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
    .faq-card h4 { margin: 0; font-size: 18px; color: var(--navy); font-weight: 800; line-height: 1.3; }
    .faq-card h4::before { content: "Q. "; color: var(--gold); }
    .faq-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }

    .downloads-container { background: #f1f5f9; border-radius: var(--radius-lg); padding: 40px; margin-top: 40px; }
    .item { background: white; padding: 20px; border-radius: var(--radius-md); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
    .pill-download { background: #eff6ff; color: #2563eb; padding: 8px 20px; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; font-size: 13px; }

    /* ================= PIE DE PÁGINA (DISEÑO ACTUALIZADO) ================= */
    .footer-main {
      margin-top: 80px;
      padding: 60px 0;
      border-top: 1px solid var(--line);
      background: var(--white);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr 1fr;
      gap: 40px;
      align-items: start;
    }
    .footer-brand-title {
      font-size: 28px;
      font-weight: 800;
      color: var(--navy);
      margin: 0 0 10px 0;
    }
    .footer-label-gold {
      display: block;
      color: var(--gold);
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 1px;
      margin-bottom: 15px;
    }
    .footer-text-small {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
      margin: 0;
    }
    .footer-email-box {
      display: inline-block;
      padding: 12px 20px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      color: var(--navy);
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
    }
    .footer-email-box:hover {
      background: var(--white);
      border-color: var(--gold);
      color: var(--gold);
      transform: translateY(-2px);
    }
    .footer-credits-box {
      display: inline-block;
      margin-top: 20px;
      padding: 8px 20px;
      border: 1px solid var(--gold);
      color: var(--gold);
      border-radius: var(--radius-pill);
      font-weight: 700;
      font-size: 12px;
    }
    
	/* ================= FORMULARIO DE REGISTRO MEJORADO ================= */

/* Contenedor principal del formulario en la sección de registro */
.auth-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    max-width: 800px;
    margin: 0 auto;
}

/* Título interno del formulario */
.auth-card h4 {
    color: var(--navy);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Grid para que los campos se vean 2 por fila */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Grupo de entrada (Etiqueta + Input) */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* Estilo de las etiquetas */
.input-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilo de los campos de texto y selects */
.input-group input, 
.input-group select {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 2px solid var(--line);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    background: var(--bg);
    transition: all 0.3s ease;
}

/* Efecto al hacer clic en un campo */
.input-group input:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(200, 160, 69, 0.1);
}

/* El botón de envío ocupará todo el ancho del grid */
.btn-submit-full {
    grid-column: span 2; /* Cruza las dos columnas */
    background: var(--navy);
    color: white;
    border: none;
    padding: 18px;
    border-radius: var(--radius-pill);
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.btn-submit-full:hover {
    background: var(--gold);
    color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(11, 42, 83, 0.2);
}

/* Responsivo: Si la pantalla es pequeña, una sola columna */
@media (max-width: 650px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .btn-submit-full {
        grid-column: span 1;
    }
}
	
    @media (max-width: 900px) { 
      .hero-grid { grid-template-columns: 1fr; } 
      .footer-grid { grid-template-columns: 1fr; text-align: center; }
      .footer-grid div { text-align: center !important; }
      .logo-img { height: 60px; } 
      nav { display: none; } 
    }
	
/* DISEÑO NOTICIAS V2 */
.news-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 5px 30px 5px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Oculta scroll en Firefox */
}

.news-wrapper::-webkit-scrollbar { display: none; } /* Oculta scroll en Chrome/Safari */

.news-card-v2 {
    flex: 0 0 calc(33.333% - 14px); /* 3 por fila */
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.news-card-v2:hover { transform: translateY(-5px); border-color: var(--gold); }

.news-img-box {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.news-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-body-v2 {
    padding: 20px;
}

.news-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.news-card-v2 h4 {
    color: var(--navy);
    margin: 10px 0;
    font-size: 18px;
    line-height: 1.3;
}

.news-card-v2 p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.news-date-v2 {
    font-size: 11px;
    color: #94a3b8;
}

/* FLECHAS */
.nav-arrows { display: flex; gap: 10px; }
.arrow-btn {
    background: var(--gold-light);
    border: 1px solid var(--line);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    color: var(--navy);
    transition: 0.3s;
}
.arrow-btn:hover { background: var(--navy); color: white; border-color: var(--navy); }

/* RESPONSIVO */
@media (max-width: 992px) {
    .news-card-v2 { flex: 0 0 calc(50% - 10px); } /* 2 por fila en tablets */
}

@media (max-width: 600px) {
    .news-card-v2 { flex: 0 0 85%; } /* Casi pantalla completa en móvil */
    .nav-arrows { display: none; } /* En móvil se usa el dedo para deslizar */
}
/* DISEÑO NOTICIAS V2 MEJORADO */
.news-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 5px 40px 5px;
    align-items: flex-start; /* Importante para que no todas crezcan al mismo tiempo */
}

.news-card-v2 {
    flex: 0 0 calc(33.333% - 14px);
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.news-text-container {
    max-height: 65px; /* Altura inicial del texto */
    overflow: hidden;
    transition: max-height 0.4s ease;
    margin: 10px 0;
}

.news-text {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* Botón al ancho del cuadro */
.btn-toggle-note {
    width: 100%;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--navy);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    margin-top: 15px;
    transition: 0.3s;
}

.btn-toggle-note:hover {
    background: var(--navy);
    color: white;
}

/* ESTADO ABIERTO */
.news-card-v2.open {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.news-card-v2.open .news-text-container {
    max-height: 3000px; /* Suficiente para mostrar todo el texto */
}

.news-card-v2.open .btn-toggle-note {
    background: var(--gold);
    color: white;
    border-color: var(--gold);
}

@media (max-width: 900px) {
    .news-card-v2 { flex: 0 0 85%; }
}

/* ESTILOS FAQ ACORDEÓN */
.faq-card {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 25px !important; /* Ajuste para que se vea balanceado */
    display: block !important;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.faq-card h4 {
    margin: 0;
    font-size: 16px;
    color: var(--navy);
}

.faq-icon {
    font-size: 20px;
    font-weight: 800;
    color: var(--gold);
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.faq-answer p {
    padding-top: 15px;
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}

/* ESTADO ABIERTO */
.faq-card.open {
    border-color: var(--gold);
    background-color: #fff;
    box-shadow: var(--shadow);
}

.faq-card.open .faq-answer {
    max-height: 500px; /* Suficiente para el texto */
    transition: max-height 0.4s ease-in-out;
}

.faq-card.open .faq-icon {
    transform: rotate(45deg); /* Convierte el + en x */
    color: var(--navy);
}

/* GALERIA */
/* --- NUEVA GALERÍA HORIZONTAL --- */
.galeria-wrapper {
    display: flex; /* En fila */
    gap: 20px;
    overflow-x: auto; /* Scroll lateral */
    padding: 20px 5px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Ocultar barra */
}
.galeria-wrapper::-webkit-scrollbar { display: none; }

.foto-card {
    flex: 0 0 350px; /* Ancho de cada foto */
    scroll-snap-align: start;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    transition: 0.3s;
}

.foto-img { width: 100%; height: 250px; overflow: hidden; }
.foto-img img { width: 100%; height: 100%; object-fit: cover; }

.foto-info { padding: 15px; display: flex; justify-content: center; }

/* Botón de Like */
.btn-like {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 8px 25px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}
.btn-like.liked { background: #fff1f2; border-color: #fda4af; pointer-events: none; }
.btn-like.liked .icon { color: #ef4444; }
.btn-like .count { font-weight: 800; color: var(--navy); }


* imagen de mensaje y banner para movil */

/* --- ESTILO PARA PC (imagen de bienvenida) --- */
.welcome-box {
    padding: 0 !important; 
    overflow: hidden; 
    height: 100%; 
    min-height: 450px;
}

.welcome-img {
    width: 100%; 
    height: 450px; /* Altura fija para mantener el diseño Bento en PC */
    object-fit: cover; 
    display: block;
}
/* --- ESTILOS DEL MENÚ --- */
.menu-toggle {
    display: none; /* Escondido en PC */
    background: none;
    border: none;
    font-size: 30px;
    color: var(--navy);
    cursor: pointer;
}

/* --- BARRA ----*/


/* --- BARRA PREMIUM CORREGIDA ----*/
.status-container {
    margin: 30px 0;
    width: 100%;
    display: block !important; /* Forzamos visibilidad */
}

.progress-wrapper-premium {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.percentage-display {
    color: var(--white);
    font-size: 24px;
    font-weight: 800;
    min-width: 60px;
}

.progress-track-premium {
    flex-grow: 1;
    height: 28px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(200, 160, 69, 0.4);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
}

.progress-fill-metallic {
    height: 100%;
    /* Degradado metálico premium */
    background: linear-gradient(90deg, #b88a2d 0%, #e5c06d 50%, #b88a2d 100%);
    background-size: 200% auto;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 20px rgba(184, 138, 45, 0.5);
    width: 0%; /* Empieza en 0 para la animación JS */
    transition: width 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    animation: metalShine 4s linear infinite;
}

.progress-meta-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-top: 12px;
    font-weight: 600;
    padding-left: 10px;
}

@keyframes metalShine {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}




/* Estilo para Etapa Realizada */
.etapa-completada .event-date-box {
    background-color: #ecfdf5 !important; /* Verde esmeralda muy claro */
    border: 1px solid #10b981 !important; /* Borde verde sólido */
    color: #065f46 !important; /* Texto verde oscuro para legibilidad */
    position: relative; /* Necesario para ubicar la palomita */
}

/* La palomita (Checkmark) */
.etapa-completada .event-date-box::after {
    content: "✓";
    position: absolute;
    top: -8px;
    right: -8px;
    background: #10b981;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Efecto opcional: un sutil borde verde a toda la tarjeta */
.etapa-completada {
    border-color: #10b981 !important;
}




/* Asegura que las tarjetas de eventos no se deformen en el scroll horizontal */
#etapas-wrapper .event-card {
    min-width: 300px; /* Ajusta el ancho según prefieras */
    flex: 0 0 auto;
}

/* Reutilizamos el estilo de ocultar barra de scroll que ya tienes */
#etapas-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

#etapas-wrapper::-webkit-scrollbar {
    display: none;
}
/* Contenedor corregido para que no estire las tarjetas */
.galeria-wrapper {
    display: flex !important; /* Forzamos flex en lugar de grid */
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 5px;
    -webkit-overflow-scrolling: touch;
}

/* Estilo específico para las tarjetas de ETAPAS */
#etapas-wrapper .event-card {
    min-width: 320px; /* Ancho fijo para que no se estiren */
    max-width: 320px;
    flex: 0 0 auto;   /* Evita que crezcan o se encojan */
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 25px;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    height: 100%; /* Para que todas midan lo mismo de alto */
}

/* Ocultar la barra de scroll visual pero mantener la funcionalidad */
.galeria-wrapper::-webkit-scrollbar {
    display: none;
}


/* --- AJUSTE EXCLUSIVO PARA MÓVIL (imagen de bienvenida) y menu --- */
@media (max-width: 768px) {
    .welcome-box {
        min-height: auto !important; /* Quitamos la altura forzada de 450px */
        height: auto !important;
    }

    .welcome-img {
        object-fit: contain !important; /* Muestra el texto COMPLETO sin cortes */
        height: auto !important;       /* La altura se ajusta a la forma de la imagen */
        min-height: 200px;
    }
    .menu-toggle {
        display: block; /* Aparece en móvil */
    }

    nav {
        display: none; /* Se esconde por defecto */
        position: absolute;
        top: 100%; /* Aparece justo debajo del header */
        left: 0;
        right: 0;
        background: #fdfaf2;
        flex-direction: column;
        padding: 20px;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: var(--shadow);
        border: 1px solid var(--line);
        gap: 10px;
    }

    nav.active {
        display: flex; /* Se muestra al hacer click en las rayitas */
    }

    nav a {
        width: 100%;
        text-align: center;
        padding: 15px;
        border-bottom: 1px solid var(--line);
    }

    nav a.cta {
        background: var(--navy);
        color: white;
        margin-top: 10px;
    }

    /* --- TU AJUSTE DE IMAGEN (No lo borres) --- */
    .welcome-box { min-height: auto !important; height: auto !important; }
    .welcome-img { 
        object-fit: contain !important; 
        height: auto !important; 
        min-height: 200px; 
    }

}



/* --- boton de acceso al repositorio--- */


.access-shortcut-card {
    margin-top: 20px;
    padding: 25px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(200, 160, 69, 0.3); /* Color Oro sutil */
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.shortcut-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.shortcut-text h5 {
    color: var(--gold);
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 800;
}

.shortcut-text p {
    color: white;
    margin: 0;
    font-size: 13px;
    opacity: 0.7;
}

.btn-premium-gold {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gold);
    color: var(--navy) !important;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
}

.btn-premium-gold svg {
    width: 18px;
    transition: transform 0.3s ease;
}

.btn-premium-gold:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(200, 160, 69, 0.4);
}

.btn-premium-gold:hover svg {
    transform: translateX(5px);
}

/* Efecto de Brillo Animado */
.shimmer-effect {
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg);
    animation: shimmer 6s infinite;
}

@keyframes shimmer {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

/* Responsivo para móviles */
@media (max-width: 600px) {
    .shortcut-content {
        flex-direction: column;
        text-align: center;
    }
    .btn-premium-gold {
        width: 100%;
        justify-content: center;
    }
}


/* GALERÍA DE VIDEOS */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
}

.video-card {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Relación 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-info {
    padding: 20px;
}

.video-info h4 {
    color: var(--navy);
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 800;
}

.video-info p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}
/* CONTENEDOR DEL SLIDER ACTUALIZADO */
.video-slider-wrapper {
    overflow-x: auto; /* Permite el scroll con el dedo */
    scroll-snap-type: x mandatory; /* Hace que el video se "pegue" al centro al soltar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Suavidad en iOS */
    padding: 10px 5px 30px 5px;
}

/* Ocultar la barra de scroll visualmente en todos los navegadores */
.video-slider-wrapper::-webkit-scrollbar {
    display: none;
}
.video-slider-wrapper {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.video-grid-slider {
    display: flex;
    gap: 25px;
    /* Quitamos el transform para usar el scroll nativo que es mejor para el dedo */
    transition: all 0.5s ease;
}

.video-grid-slider .video-card {
    width: 350px; 
    min-width: 350px;
    flex-shrink: 0;
    scroll-snap-align: start; /* El video se alinea al inicio al deslizar */
}

@media (max-width: 768px) {
    .video-grid-slider .video-card {
        width: 85vw;      /* En móvil, que ocupen casi todo el ancho de la pantalla */
        min-width: 85vw;
    }
}

/* BOTONES DE NAVEGACIÓN */
.video-controls {
    display: flex;
    gap: 10px;
}

.control-btn {
    background: white;
    border: 2px solid var(--gold);
    color: var(--navy);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: var(--shadow);
}

.control-btn:hover {
    background: var(--gold);
    color: white;
    transform: translateY(-3px);
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .video-grid-slider .video-card {
        min-width: 90%; /* En móvil muestra casi todo el video */
    }
}

/* sintilla para ir al articulo.php */
    .card-articulo-link {
        transition: transform 0.3s ease;
    }

    .card-articulo-link:hover {
        transform: translateY(-5px);
    }

    .card-articulo-link:hover > div {
        border-color: var(--gold-light) !important;
    }