/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    /* Colores */
    --color-menu-bg: #f5df30;
    --color-yellow: #F5D730;
    --color-green: #2CA62D;
    --color-dark-green: #264028;
    --color-black: #000000;
    
    /* Fuentes */
    --font-main: "ff-dax-pro", "Arial", sans-serif; 
    --font-hand: 'Mansalva', cursive;

    /* Layout */
    --max-width: 1280px;
}

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

body {
    font-family: var(--font-main);
    color: var(--color-black);
    width: 100%;
    overflow-x: hidden;
}

/* AJUSTE GLOBAL IMÁGENES Y VIDEO */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   2. ESTILOS BASE (MOBILE FIRST)
   ========================================= */

/* --- SECCIÓN 1: MENÚ --- */
.menu-section {
    width: 100%;
    height: 24px;
    background-color: var(--color-menu-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; 
    z-index: 100;
}

.menu-container {
    display: flex;
    flex-direction: row;
    gap: 21px;
    width: 100%;
    max-width: var(--max-width);
    justify-content: center;
    align-items: center;
    font-family: var(--font-main);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 7px;
}

/* --- SECCIÓN 2: HERO --- */
.hero-section {
    position: relative;
    width: 100%;
    height: 195px;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1;
}

.hero-title {
    position: absolute;
    z-index: 2;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-main);
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    font-size: 30px;
}

/* --- SECCIÓN 3: MARQUEE --- */
.marquee-section {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 19px;
    white-space: nowrap;
}

.marquee-track {
    display: flex;
    gap: 40px;
    padding-left: 40px;
    animation: scroll-left 20s linear infinite;
    width: max-content;
}

.marquee-section span {
    font-family: var(--font-main);
    font-weight: 400;
    color: var(--color-black);
    font-size: 11px;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- SECCIÓN 4: NARRATIVA --- */
.narrative-section {
    position: relative;
    width: 100%;
    background-color: var(--color-dark-green);
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 351px;
}

.narrative-text {
    width: 70%; 
    max-width: 800px;
    color: #ffffff;
    font-family: var(--font-main);
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
    z-index: 2; 
    font-size: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.narrative-icons img {
    position: absolute;
    z-index: 1;
    object-fit: contain;
}

/* Posiciones Base (Mobile) */
.icon-trompa { width: 51px; height: 41px; top: 8%; left: 0%; } 
.icon-botas { width: 35px; height: 35px; bottom: 25%; left: 2%; }
.icon-tie { width: 47px; height: 73px; top: 8%; right: 2%; }
.icon-paraguas { width: 57px; height: 57px; bottom: 25%; right: 2%; }

/* --- SECCIÓN 5: PERSONAJES --- */
.characters-section {
    width: 100%;
    height: 599px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.characters-scroll-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 40px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.characters-scroll-container::-webkit-scrollbar { display: none; }

.character-card {
    width: 300px;
    height: 489px;
    flex-shrink: 0;
    background-color: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: center;
}

.card-state {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    padding: 13px 26px;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.card-state.default {
    opacity: 1; z-index: 2; background-color: #fff;
    align-items: center;
}
.card-state.default img {
    width: 248px; height: 324.88px; object-fit: cover;
    margin-bottom: 29px; display: block;
}

.character-card h3 {
    font-family: var(--font-hand); color: var(--color-black);
    text-align: center; line-height: 1.2; 
    font-size: 30px; /* Fijo para todos */
    margin: 0;
}

.card-state.hover {
    opacity: 0; z-index: 1; background-color: #fff;
    justify-content: center;
}

.character-card p {
    font-family: var(--font-main); color: var(--color-black);
    text-align: left; line-height: 1.4; 
    font-size: 13px; /* Mobile */
}

.character-card:hover .card-state.default { opacity: 0; z-index: 1; }
.character-card:hover .card-state.hover { opacity: 1; z-index: 2; }


/* --- SECCIÓN 6: MOMENTOS (BASE MOBILE) --- */
.moments-section {
    background-color: var(--color-yellow);
    /* min-height permite crecer si el contenido lo empuja */
    min-height: 458px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.moments-container-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.moments-main-title {
    font-family: var(--font-main);
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    font-size: 18px; /* Mobile */
}

.moments-layout {
    display: flex;
    flex-direction: column; /* Vertical en mobile */
    width: 320px;
    height: 392px;
    gap: 11px;
    max-width: 100%;
}

.moments-player {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    width: 320px;
    height: 239px;
    flex-shrink: 0;
}

.player-content {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    gap: 12px;
    opacity: 1;
    transition: opacity 0.3s ease; /* Necesario para la animación JS */
}

.moments-player h3 {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 26px; /* Mobile */
    margin: 0;
    line-height: 1.1;
    text-align: center;
}

.video-wrapper {
    width: 255px; height: 144px; /* Mobile */
    background-color: #000;
    align-self: center;
    flex-shrink: 0;
}
.video-wrapper video { width: 100%; height: 100%; object-fit: cover; }

.moments-player p {
    font-family: var(--font-main);
    font-weight: 400;
    font-size: 8px; /* Mobile */
    margin: 0;
    text-align: center;
}

.moments-list {
    width: 300px; 
    height: 139px; /* Mobile */
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
    gap: 10px; align-self: center;
    scrollbar-width: thin;
}

.moment-card {
    background-color: #ffffff;
    width: 100%;
    display: flex; flex-direction: row;
    padding: 10px; gap: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    align-items: center;
}

.moment-card:hover, .moment-card.active { background-color: #f0f0f0; }

.card-video-thumb {
    width: 117.5px; height: 66.09px; /* Mobile */
    flex-shrink: 0; background-color: #000;
}
.card-video-thumb video {
    width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}

.card-info {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; overflow: hidden;
}

.card-info h4 {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 26px; /* Mobile */
    margin: 0; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card-info p {
    font-family: var(--font-main);
    font-weight: 400;
    font-size: 8px; /* Mobile */
    margin: 0; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- SECCIÓN 7: SEASONS (BASE MOBILE) --- */
.seasons-section {
    width: 100%;
    background-color: var(--color-dark-green);
    /* min-height para permitir que el fondo crezca con el hover de las fotos */
    min-height: 239px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* IMPORTANTE: No usar overflow:hidden aquí o cortará el zoom */
}

.seasons-title {
    font-family: var(--font-main);
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    font-size: 18px; /* Mobile */
    
    /* Simetría Mobile */
    margin-top: 15px;    
    margin-bottom: 15px; 
}

.seasons-scroll-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 19px; /* Mobile */
    width: 100%;
    height: auto; 
    overflow-x: auto;
    overflow-y: hidden;
    
    /* Padding generoso para evitar recorte al escalar (hover) */
    padding: 25px 40px; 
    
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.seasons-scroll-container::-webkit-scrollbar { display: none; }

.season-img {
    width: 118px; height: 167px; /* Mobile */
    object-fit: cover;
    flex-shrink: 0; 
    transition: transform 0.3s ease;
    cursor: pointer;
    position: relative; 
    z-index: 1;
    transform-origin: center center;
}

.season-img:hover {
    transform: scale(1.2);
    z-index: 10;
}

/* --- SECCIÓN 8: QUOTES MARQUEE (BASE MOBILE) --- */
.quotes-marquee-section {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 15px 0;
    white-space: nowrap;
}

.quotes-track {
    display: flex;
    gap: 0; 
    /* Usamos la misma animación 'scroll-left' definida en la Sección 3 */
    animation: scroll-left 20s linear infinite;
    width: max-content;
}

.quotes-marquee-section h2 {
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--color-yellow);
    margin: 0;
    padding: 0 10px;
    font-size: 20px; /* Mobile */
    line-height: 1;
    text-transform: uppercase;
}


/* =========================================
   3. MEDIA QUERIES (TABLET & DESKTOP)
   ========================================= */

/* --- TABLET (768px - 1023px) --- */
@media (min-width: 768px) {
    /* Menú */
    .menu-section { height: 45px; }
    .menu-container { font-size: 12px; }
    
    /* Hero */
    .hero-section { height: 374px; }
    .hero-title { font-size: 65px; }
    
    /* Marquee */
    .marquee-section { height: 39px; }
    .marquee-section span { font-size: 16px; }
    
    /* Narrativa */
    .narrative-section { height: 657px; }
    .narrative-text { font-size: 15px; gap: 20px; width: 60%; }
    .icon-trompa { width: 126px; height: 101px; top: 15%; left: 2%; }
    .icon-botas { width: 106px; height: 106px; bottom: 22%; left: 5%; }
    .icon-tie { width: 144px; height: auto; top: 15%; right: 5%; }
    .icon-paraguas { width: 102px; height: 102px; bottom: 22%; right: 5%; }
    
    /* Personajes */
    .character-card p { font-size: 18px; }

    /* Momentos */
    .moments-section { min-height: 1004px; }
    .moments-main-title { font-size: 36px; margin-bottom: 40px; }
    .moments-layout { width: 595px; height: 836px; gap: 12px; }
    .moments-player { width: 534px; height: 411px; padding: 30px; }
    .player-content { gap: 21px; }
    .moments-player h3 { font-size: 32px; }
    .video-wrapper { width: 447px; height: 251.44px; }
    .moments-player p { font-size: 15px; }
    .moments-list { width: 595px; height: 412px; }
    .card-video-thumb { width: 182px; height: 102px; }
    .card-info h4 { font-size: 32px; }
    .card-info p { font-size: 15px; }

    /* Seasons (Tablet) */
    .seasons-section { min-height: 671px; }
    .seasons-title { 
        font-size: 36px; 
        margin-top: 30px;
        margin-bottom: 30px; 
    }
    .seasons-scroll-container { 
        gap: 41px; 
        padding: 60px 40px; /* Padding extra para zoom */
    }
    .season-img { width: 353px; height: 502px; }

    /* Quotes (Tablet) */
    .quotes-marquee-section { padding: 20px 0; }
    .quotes-marquee-section h2 { font-size: 40px; }
}

/* --- DESKTOP (>= 1024px) --- */
@media (min-width: 1024px) {
    /* Menú */
    .menu-section { height: 81px; }
    .menu-container { font-size: 20px; }
    
    /* Hero */
    .hero-section { height: 696px; }
    .hero-title { font-size: 130px; }
    
    /* Marquee */
    .marquee-section { height: 57px; }
    .marquee-section span { font-size: 18px; }
    
    /* Narrativa */
    .narrative-section { height: 742px; }
    .narrative-text { font-size: 18px; gap: 30px; width: 50%; }
    .icon-trompa { width: 228px; height: 182px; top: 12%; left: 5%; }
    .icon-botas { width: 146px; height: 169px; bottom: 18%; left: 10%; }
    .icon-tie { width: 168px; height: 260px; top: 12%; right: 10%; }
    .icon-paraguas { width: 197px; height: 197px; bottom: 18%; right: 10%; }
    
    /* Personajes */
    .character-card p { font-size: 18px; }

    /* Momentos */
    .moments-section { min-height: 656px; }
    .moments-main-title { font-size: 75px; margin-bottom: 50px; }
    .moments-layout { flex-direction: row; width: 1266px; height: 422px; gap: 13px; align-items: flex-start; }
    .moments-player { width: 534px; height: 411px; }
    .moments-player h3 { font-size: 32px; text-align: left; }
    .moments-player p { font-size: 18px; text-align: left; }
    .moments-list { width: 688px; height: 412px; }
    .card-video-thumb { width: 182px; height: 102px; }
    .card-info h4 { font-size: 32px; }
    .card-info p { font-size: 18px; -webkit-line-clamp: unset; }

    /* Seasons (Desktop) */
    .seasons-section { min-height: 748px; }
    .seasons-title { 
        font-size: 75px; 
        margin-top: 40px; 
        margin-bottom: 40px; 
    }
    .seasons-scroll-container { 
        gap: 41px;
        padding: 60px 40px; 
    }
    .season-img { width: 353px; height: 502px; }

    /* Quotes (Desktop) */
    .quotes-marquee-section { padding: 30px 0; }
    .quotes-marquee-section h2 { font-size: 75px; }
}

/* =========================================
   SECCIÓN 9: QUOTES SLIDER (BASE MOBILE)
   ========================================= */

.quotes-slider-section {
    position: relative;
    width: 100%;
    /* Altura Mobile Exacta */
    height: 197px; 
    overflow: hidden;
    background-color: #000; /* Fallback color */
}

/* Imagen de Fondo */
.quote-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.4s ease; /* Transición suave al cambiar */
}

/* Overlay Negro 23% */
.quote-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.23);
    z-index: 2;
}

/* Contenedor del Contenido (Texto + Flechas) */
.quote-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    justify-content: space-between; /* Flechas a los extremos */
    align-items: center;
    padding: 0 20px; /* Margen lateral para las flechas */
}

/* Texto de la Frase */
.quote-text-container {
    flex: 1; /* Ocupa el espacio central */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.quote-text {
    font-family: var(--font-hand); /* Mansalva */
    color: var(--color-yellow);
    text-align: center;
    line-height: 1.2;
    margin: 0;
    
    /* Tamaño Mobile Exacto */
    font-size: 14px; 
}

/* Flechas de Navegación */
.quote-nav {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px; /* Tamaño flecha mobile */
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s ease;
    /* Aseguramos que se vean bien */
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-nav:hover {
    transform: scale(1.2);
}

/* =========================================
   MEDIA QUERIES (AÑADIR A LOS BLOQUES EXISTENTES)
   ========================================= */

/* --- TABLET (768px - 1023px) --- */
@media (min-width: 768px) {
    /* ... reglas anteriores ... */

    /* AJUSTE QUOTES SLIDER TABLET */
    .quotes-slider-section {
        height: 383px;
    }

    .quote-text {
        font-size: 27px;
        max-width: 80%; /* Evita que el texto toque las flechas */
    }

    .quote-nav {
        font-size: 40px; /* Flecha más grande */
        padding: 20px;
    }
}

/* --- DESKTOP (>= 1024px) --- */
@media (min-width: 1024px) {
    /* ... reglas anteriores ... */

    /* AJUSTE QUOTES SLIDER DESKTOP */
    .quotes-slider-section {
        height: 699px;
    }

    .quote-text {
        font-size: 65px;
        max-width: 70%;
    }

    .quote-nav {
        font-size: 60px; /* Flecha Desktop */
        padding: 30px;
    }
}

/* =========================================
   SECCIÓN 10: GALERÍA VERTICAL PING-PONG
   ========================================= */

.gallery-section {
    width: 100%;
    background-color: var(--color-yellow);
    height: 271px; /* Altura Mobile */
    overflow: hidden; 
    position: relative;
    padding-top: 30px; 
}

.gallery-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px; 
    height: 100%;
}

.gallery-col {
    display: flex;
    flex-direction: column;
    gap: 10px; 
    
    /* CAMBIOS CLAVE PARA EL EFECTO PING-PONG: */
    /* 1. 'ease-in-out': Para que frene suavemente al dar la vuelta */
    /* 2. 'alternate': Para que vaya y vuelva (ping-pong) */
    animation: move-up ease-in-out infinite alternate;
    
    cursor: pointer; 
}

.gallery-col:hover {
    animation-play-state: paused;
}

@keyframes move-up {
    0% { transform: translateY(0); }
    /* Al llegar al 50% (final del primer set), volverá atrás gracias a 'alternate' */
    100% { transform: translateY(-50%); } 
}

/* RITMOS DIFERENTES (Ajustados para el efecto vaivén) */
.gallery-col.col-1 { 
    width: 72px; 
    animation-duration: 22s; /* Velocidad media */
}

.gallery-col.col-2 { 
    width: 61px; 
    animation-duration: 18s; /* Más rápida */
    margin-top: -20px; 
}

.gallery-col.col-3 { 
    width: 59px; 
    animation-duration: 25s; /* Más lenta */
    margin-top: 0; 
}

/* =========================================
   FOOTER: MACLAREN'S PUB (BASE MOBILE)
   ========================================= */
.footer-section {
    width: 100%;
    background-color: var(--color-dark-green);
    /* Altura Mobile */
    height: 54px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo {
    /* Tamaño Mobile */
    width: 146px;
    height: 24px;
    object-fit: contain;
    display: block;
}


/* =========================================
   MEDIA QUERIES (AÑADIR A LOS BLOQUES EXISTENTES)
   ========================================= */

/* --- TABLET (768px - 1023px) --- */
@media (min-width: 768px) {
    /* ... reglas anteriores ... */

    /* AJUSTE GALERÍA TABLET */
    .gallery-section {
        height: 490px;
        padding-top: 60px;
    }
    
    .gallery-wrapper { gap: 20px; }
    .gallery-col { gap: 20px; }

    .gallery-col.col-1 { width: 141px; }
    .gallery-col.col-2 { width: 117px; margin-top: -40px; }
    .gallery-col.col-3 { width: 112px; }

    /* AJUSTE FOOTER TABLET */
    .footer-section {
        height: 105px;
    }
    
    .footer-logo {
        width: 280px;
        height: 45px;
    }
}


/* --- DESKTOP (>= 1024px) --- */
@media (min-width: 1024px) {
    /* ... reglas anteriores ... */

    /* AJUSTE GALERÍA DESKTOP */
    .gallery-section {
        height: 1169px;
        padding-top: 140px;
    }
    
    .gallery-wrapper { gap: 30px; }
    .gallery-col { gap: 30px; }

    .gallery-col.col-1 { width: 327px; }
    .gallery-col.col-2 { width: 271px; margin-top: -150px; }
    .gallery-col.col-3 { width: 262px; margin-top: 50px; }

    /* AJUSTE FOOTER DESKTOP */
    .footer-section {
        height: 242px;
    }
    
    .footer-logo {
        width: 524px;
        height: 84px;
    }
}