/* styles.css
   MASTER FILE - FINAL VERSION
   Includes: Home, Future Venues, Experiences, Article Template
*/

/* ==============================
   Accessibility helpers
   ============================== */
.skip-link {
    position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
    position: static; left: 20px; top: 20px; width: auto; height: auto;
    background: #fff; color: #000; padding: 8px 12px; border-radius: 4px; z-index: 9999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ==============================
   Reset / Base / Design Tokens
   ============================== */
:root {
    /* Colores */
    --color-dark: #000000;
    --color-light: #FFFFFF;
    --color-brand: #d1111d;
    --color-brand-hover: #b00e18;
    --color-nav-text: #333333;
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-light: rgba(255, 255, 255, 0.15);
    --color-bg-gray: #f5f5f5;
    --color-bg-navy: #003a74;
    --color-bg-navy-dark: #0d3863; /* <-- NUEVO: Azul casi medianoche para el footer */

    /* Tipografía */
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;

    /* Fluid Typography */
    --fs-hero: clamp(28px, 4vw + 1rem, 35px);       
    --fs-h2: clamp(28px, 4vw, 42px);                
    --fs-h3: clamp(20px, 3vw, 32px);                
    --fs-body-lg: clamp(14px, 2vw, 20px);           
    --fs-body: 16px;

    /* Espaciado */
    --section-padding: clamp(60px, 8vw, 100px);     
    --gutter: clamp(20px, 5vw, 40px);               
    
    /* Layout */
    --header-height: 80px;
    --container-width: 1600px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

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

body {
    font-family: var(--font-sans); color: var(--color-dark); background-color: var(--color-bg-gray);
    -webkit-font-smoothing: antialiased; line-height: 1.5; font-size: var(--fs-body);
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; }

/* ==============================
   Utilities & Layout
   ============================== */
.wrapper { max-width: var(--container-width); margin: 0 auto; width: 100%; }

.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-column { display: flex; flex-direction: column; }
.flex-end-align { align-items: flex-end; }

.abs-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hide-mobile { display: flex; }

/* Headers de Sección */
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }
.red-bar { width: 4px; height: 24px; background: var(--color-brand); }
.title-sm { 
    font-family: var(--font-sans); font-size: 22px; font-weight: 700; color: #0c1a2e; text-transform: uppercase; 
}

.is-hidden {
    display: none !important;
}

/* Utilidad para ocultar elementos exclusivos del celular en la computadora */
@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Utilidad para quitar el doble espacio al juntar dos secciones */
.remove-top-padding {
    padding-top: 0 !important;
}



/* ==============================
   Components
   ============================== */
.btn {
    display: inline-block; padding: 10px 35px; border-radius: 50px;
    font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; transition: background 0.3s ease, color 0.3s ease;
}
.btn-solid { background: var(--color-brand); color: var(--color-light); border: none; }
.btn-solid:hover { background: var(--color-brand-hover); }

.btn-outline { border: 1px solid var(--color-light); color: var(--color-light); padding: 12px 40px; }
.btn-outline:hover { background: var(--color-light); color: var(--color-dark); }

.btn-outline-large {
    display: inline-block; padding: 15px 60px; border: 1px solid var(--color-light);
    border-radius: 50px; color: var(--color-light); font-size: 14px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease;
    min-width: 200px; text-align: center;
}
.btn-outline-large:hover { background-color: var(--color-light); color: var(--color-bg-navy); }

/* Tarjetas Base (Home) */
.card-base {
    position: relative; border-radius: var(--radius-md); overflow: hidden;
    background: var(--color-light); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-base:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.card-base:hover .card-bg, .card-base:hover .article-img { transform: scale(1.03); transition: transform 0.5s ease; }

.overlay-grad {
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 60%);
    display: flex; align-items: flex-end; padding: 30px; pointer-events: none;
}
.overlay-dark { background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); z-index: 2; display: flex; align-items: flex-end; }
.clickable-content { pointer-events: auto; width: 100%; }

.tag-brand { display: block; color: var(--color-brand); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.arrow-circle { width: 32px; height: 32px; background: var(--color-brand); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.arrow-outline { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: 0.3s; }

/* ==============================
   Header
   ============================== */
header {
    height: var(--header-height); border-bottom: 1px solid var(--color-border);
    padding: 0 var(--gutter); background: #fff; position: relative; z-index: 100;
}
.nav-wrap { height: 100%; }
.nav-left { gap: 25px; }
.menu-icon { display: none; cursor: pointer; transition: transform 0.2s; }
.menu-icon:active { transform: scale(0.9); }

.logo { font-size: 24px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-dark); display: flex; align-items: center; }
.logo span { color: var(--color-brand); margin-left: 2px; }

nav ul { gap: 35px; }
nav a { font-size: 14px; color: var(--color-nav-text); white-space: nowrap; }
nav a:hover { color: var(--color-brand); }

.full-list-link { font-size: 14px; font-weight: 600; color: #0c1a2e; margin-bottom: 5px; }

.nav-right { height: 100%; display: flex; align-items: center; }
.nav-item-divider { padding-left: 25px; margin-left: 25px; border-left: 1px solid var(--color-border); height: 32px; display: flex; align-items: center; }
.nav-item-divider.first { border: none; padding: 0; margin: 0; }

.partner-box { gap: 12px; }
.partner-text { font-size: 9px; line-height: 1.3; color: #666; text-transform: uppercase; text-align: right; font-weight: 500; white-space: nowrap; }
.partner-logo { height: 18px; width: auto; }
.lang-box { font-size: 12px; font-weight: 600; gap: 5px; cursor: pointer; }

/* ==============================
   Sections - Big
   ============================== */
.big-section {
    position: relative; width: 100%; overflow: hidden;
    display: flex; align-items: flex-end;
    height: calc(100vh - var(--header-height)); min-height: 600px;
}
.big-content { 
    padding: 0 0 var(--section-padding) var(--section-padding); max-width: 1200px; 
    color: var(--color-light); width: 100%; position: relative; z-index: 2; 
}

.big-content h1 { font-size: var(--fs-hero); letter-spacing: -1px; margin-bottom: 15px; line-height: 1.1; }
.big-content h2 { font-size: var(--fs-hero); letter-spacing: -1px; margin-bottom: 15px; line-height: 1.1; }
.big-content p { font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: 300; opacity: 0.9; margin-bottom: 25px; }

.hero-bg { z-index: 1; }
.inside { height: 85vh; }
.bw-filter { filter: grayscale(100%) contrast(1.1); z-index: 1; }
.scenic-break { justify-content: center; padding-bottom: 60px; }
.overlay-bottom { background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 30%); z-index: 1; }
.scenic-logo { z-index: 2; color: var(--color-light); font-size: clamp(32px, 4vw, 42px); text-shadow: 0 4px 12px rgba(0,0,0,0.3); }

/* ==============================
   Sections - Standard
   ============================== */
.section-std { padding: 50px var(--gutter); margin-bottom: var(--section-padding); }

.grid-layout { display: grid; gap: 20px; height: 500px; }
.grid-2-1 { grid-template-columns: 1.8fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.col-split { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; height: 100%; }

.card-txt h3 { color: var(--color-light); font-size: var(--fs-h3); margin-bottom: 10px; text-transform: uppercase; }
.card-txt p { color: rgba(255,255,255,0.9); font-size: 14px; margin-bottom: 20px; max-width: 90%; }

.venue-info h3 { font-size: 24px; color: var(--color-light); margin-bottom: 8px; letter-spacing: 0.5px; }
.venue-info p { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.85); }

/* ==============================
   Sections - The Vault
   ============================== */
.vault { 
    background-color: var(--color-dark); 
    color: var(--color-light); 
    padding: 40px var(--gutter) 80px; /* <-- Aquí redujimos el espacio superior e inferior */
    min-height: auto; /* <-- Aquí quitamos la altura forzada */
    justify-content: center; 
}
.vault-header { text-align: center; margin-bottom: 60px; }
.vault-logo { color: var(--color-light); justify-content: center; margin-bottom: 10px; }
.vault-title { font-family: var(--font-sans); font-size: var(--fs-hero); font-weight: 700; letter-spacing: -1px; }
.vault-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; max-width: 1400px; margin: 0 auto; }
.vault-img { border-radius: var(--radius-md); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.vault-content h3 { font-size: var(--fs-h2); margin-bottom: 20px; }
.vault-content p { font-family: var(--font-sans); font-size: 15px; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; }

/* ==============================
   Field Notes
   ============================== */
.field-notes { background-color: var(--color-bg-gray); padding: var(--section-padding) 0 var(--section-padding) var(--gutter); overflow: hidden; }
.carousel-container { display: flex; gap: 25px; overflow-x: auto; padding-bottom: 40px; padding-right: var(--gutter); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel-container::-webkit-scrollbar { display: none; }
.article-card { flex: 0 0 320px; height: 380px; display: flex; flex-direction: column; }
.article-img-wrap { height: 200px; width: 100%; overflow: hidden; }
.article-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.article-content h3 { font-size: 20px; line-height: 1.3; color: var(--color-dark); }

.carousel-controls { display: flex; justify-content: flex-end; gap: 15px; margin-top: 20px; padding-right: var(--gutter); }
.nav-btn { width: 45px; height: 45px; border-radius: 50%; background-color: var(--color-brand); color: #fff; border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.2s ease; }
.nav-btn:hover { background-color: var(--color-brand-hover); transform: scale(1.1); }
.nav-btn:active { transform: scale(0.95); }

/* ==============================
   At The Tournament
   ============================== */
.at-tournament { background-color: var(--color-bg-navy); color: var(--color-light); padding: 140px var(--gutter); margin: 40px var(--gutter); border-radius: var(--radius-lg); }
.tournament-wrap { align-items: center; gap: 60px; }
.tournament-intro { flex: 0 0 40%; max-width: 40%; padding-right: 20px; }
.tournament-intro h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
.tournament-links { flex: 0 0 60%; max-width: 60%; }
.t-link-item { display: flex; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--color-border-light); padding-right: 40px; }
.t-link-item:first-child { border-top: 1px solid var(--color-border-light); }
.t-link-item:hover .arrow-outline { background-color: var(--color-light); color: var(--color-dark); border-color: var(--color-light); }
.t-thumb { width: 80px; height: 80px; border-radius: var(--radius-md); margin-right: 25px; }
.t-content { flex-grow: 1; }
.t-content h3 { font-size: 24px; margin-bottom: 8px; }
.t-content p { font-family: var(--font-sans); font-size: 14px; opacity: 0.8; }

/* ==============================
   Join Promo & Newsletter & Footer
   ============================== */
.join-promo-section { background-color: var(--color-bg-gray); padding-top: 120px; padding-bottom: 120px; }
.promo-grid-white { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; align-items: center; }
.promo-img-large { height: 650px; object-fit: cover; border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); box-shadow: -20px 20px 40px rgba(0,0,0,0.05); z-index: 1; }
.promo-white-box { background-color: var(--color-light); height: 650px; padding: 80px; display: flex; align-items: center; border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); box-shadow: 20px 20px 40px rgba(0,0,0,0.08); margin-left: -40px; z-index: 2; }
.promo-content-inner { max-width: 450px; }
.promo-content-inner h2 { font-size: 48px; margin-bottom: 25px; color: var(--color-dark); }
.promo-content-inner p { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: #555; margin-bottom: 40px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--color-dark); transition: 0.3s; }
.arrow-char { color: var(--color-brand); font-size: 18px; transition: transform 0.3s; }
.link-arrow:hover .arrow-char { transform: translateX(5px); }

.newsletter { background-color: var(--color-bg-navy); color: var(--color-light); padding: var(--section-padding) var(--gutter); }
.newsletter-wrap { align-items: center; }
.news-content { max-width: 600px; }
.news-subtitle { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; opacity: 0.9; }
.news-content h2 { font-size: var(--fs-h2); margin-bottom: 40px; line-height: 1.1; }
.news-graphic-container { flex-shrink: 0; width: 350px; display: flex; justify-content: center; align-items: center; }
.news-graphic { width: 100%; height: auto; object-fit: contain; }

/* ==============================
   SITE FOOTER (Ajustes de espaciado y centrado)
   ============================== */
.site-footer { 
    background-color: var(--color-bg-navy-dark); 
    color: var(--color-light); 
    padding: 50px var(--gutter) 20px var(--gutter); /* Padding reducido para un look más sutil */
    font-family: var(--font-sans); 
}

.footer-top { 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
    margin-bottom: 40px; 
}

.footer-brand .logo { 
    display: inline-block; 
    transition: opacity 0.3s ease; 
}

.footer-brand .logo:hover { 
    opacity: 0.8; 
}

.footer-logo-img { 
    max-width: 300px; 
    height: auto; 
    display: block; 
}

.footer-links-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
    width: 100%; 
}

.footer-links-col { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.footer-links-col a { 
    font-size: 14px; 
    font-weight: 500; 
    opacity: 0.9; 
    transition: opacity 0.3s; 
    color: var(--color-light);
    text-decoration: none;
}

.footer-links-col a:hover { 
    opacity: 1; 
    text-decoration: underline; 
    text-underline-offset: 4px; 
}

.footer-divider { 
    height: 1px; 
    background-color: rgba(255, 255, 255, 0.15); 
    margin: 40px 0; 
}

.partners-title { 
    font-size: 14px; 
    font-weight: 700; 
    margin-bottom: 25px; 
    opacity: 0.9; 
}

.partners-logos { 
    display: flex; 
    align-items: center; 
    gap: 50px; 
    flex-wrap: wrap; 
}

.partner-logo-img { 
    height: 40px; 
    width: auto; 
    object-fit: contain; 
    opacity: 0.9; 
    transition: opacity 0.3s; 
}

.partner-logo-img:hover { 
    opacity: 1; 
}

/* El contenedor para centrar el copyright */
.footer-bottom {
    display: flex;
    justify-content: center; /* Centramos el texto horizontalmente */
    width: 100%;
    margin-top: 10px;
}

.footer-bottom p { 
    font-size: 12px; 
    opacity: 0.6; 
    margin: 0;
}


/* ==============================
   FOOTER MÓVIL (Corrección de Jerarquía)
   ============================== */
@media (max-width: 768px) {
    /* Obligamos al contenedor principal del footer a apilar todo en una sola columna */
    .site-footer .wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; 
        gap: 40px !important; 
    }

    /* Le damos al logo todo el ancho para que sea el rey de la parte superior */
    .footer-brand {
        width: 100% !important;
        display: block !important;
        margin-bottom: 10px;
    }

    /* Apilamos también las columnas de los links para que no se apachurren entre ellas */
    .footer-links-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important; 
        width: 100% !important;
    }
}



/* ==============================
   PAGE: FUTURE VENUES (ESTILOS)
   ============================== */

/* Hero Venues Specific Overrides (Banner más alto y superpuesto) */
.hero-venues {
    height: 55vh;          /* AUMENTADO: Para dar espacio al overlap y presencia */
    min-height: 450px;     
    align-items: center;   
}
.hero-venues .big-content {
    padding: 0 var(--section-padding);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: center; 
}
.hero-venues h1 {
    font-size: clamp(32px, 4vw, 56px); 
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Sombra para legibilidad si la carta se acerca mucho */
}

/* CONTENEDOR DE TARJETAS CON OVERLAP (La Magia del Diseño) */
.venue-list-section {
    margin-top: -100px; /* Esto sube las tarjetas ENCIMA del Hero */
    position: relative;
    z-index: 10;        /* Asegura que queden arriba */
}

/* Wide Card Container */
.wide-card {
    display: flex;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px; /* Padding estilo F1 */
    gap: 40px; /* Espacio entre foto y texto */
    align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    /* Animación eliminada */
}

/* Image Column (Left) */
.wide-card-img {
    flex: 1.2; 
    aspect-ratio: 16 / 9; /* <-- LA MAGIA: Obliga a que el marco siempre sea horizontal */
    position: relative;
    border-radius: var(--radius-md); 
    overflow: hidden; 
}

/* Content Column (Right) */
.wide-card-content {
    flex: 1;
    padding: 0; /* El padding ahora lo controla la tarjeta madre */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Header inside card */
.wc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.wc-title {
    font-size: 26px; /* Ajuste sutil */
    color: var(--color-dark);
    line-height: 1.1;
    max-width: 80%;
}

.wc-year {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1;
}

.wc-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Vertical List Styles */
.detail-list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Más compacto */
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 5px;
}
.detail-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-brand);
    text-transform: uppercase;
    width: 100px; 
    letter-spacing: 0.5px;
}

/* Dropdown / Accordion Styles */
.accordion-btn {
    background: none;
    border: none;
    color: var(--color-bg-navy);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-top: 10px;
    width: 100%;
    text-align: left;
    transition: color 0.3s;
}
.accordion-btn:hover { color: var(--color-brand); }

.arrow-down { transition: transform 0.3s ease; font-size: 12px; }
.accordion-btn.active .arrow-down { transform: rotate(180deg); }

/* Hidden Content Logic */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #f9f9f9;
    border-radius: var(--radius-md);
}
.inner-padding { padding: 20px; font-size: 14px; line-height: 1.6; color: #555; }

/* Link Activo en Nav */
.active-link { color: var(--color-brand) !important; font-weight: 700; }

/* ==============================
   NUEVO ESTILO F1 EXPERIENCES
   (Pegar al final de styles.css)
   ============================== */

/* Fondo gris para la sección, como en F1 */
.bg-gray-section {
    background-color: var(--color-bg-gray);
    padding-top: 80px;
    padding-bottom: 80px;
}

/* La tarjeta blanca contenedora */
.f1-card {
    background: #fff;
    border-radius: var(--radius-lg);
    /* Sombra sutil para levantarla del fondo gris */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    display: flex;
    overflow: hidden; /* Para que la imagen no se salga de las esquinas redondeadas */
    padding: 40px; /* Padding interno estilo revista */
    gap: 40px; /* Espacio entre texto e imagen */
    align-items: center;
    border: 1px solid rgba(0,0,0,0.03);
}

/* Columna de Texto (Izquierda) */
.f1-card-content {
    flex: 1;
    color: var(--color-dark);
}

.f1-card-title {
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--color-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

.f1-card-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
}

/* Lista de bullet points estilo F1 */
.f1-details-list {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 25px;
    color: #444;
}
.f1-details-list li {
    margin-bottom: 10px;
    font-size: 15px;
}

/* Columna de Imagen (Derecha) - Contenida dentro de la tarjeta blanca */
.f1-card-image-wrap {
    flex: 1.2; /* Un poco más ancha que el texto */
    height: 420px; /* Altura fija para uniformidad */
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

/* Botón rojo estilo F1 */
.f1-btn-red {
    background-color: var(--color-brand);
    color: #fff;
    padding: 14px 40px;
    font-size: 14px;
    letter-spacing: 1px;
}
.f1-btn-red:hover {
    background-color: var(--color-brand-hover);
    box-shadow: 0 5px 15px rgba(209, 17, 29, 0.3);
}

/* Ajustes Responsivos para F1 Card */
@media (max-width: 1024px) {
    .bg-gray-section {
        padding: 40px 20px;
    }
    .f1-card {
        flex-direction: column-reverse; /* Imagen arriba en celular */
        padding: 25px;
        gap: 25px;
    }
    .f1-card-image-wrap {
        width: 100%;
        height: 280px;
        flex: none;
    }
    .f1-card-title {
        font-size: 26px;
    }
    .f1-btn-red {
        width: 100%;
        text-align: center;
        display: block;
    }
}

/* ==============================
   PAGE: ARTICLE TEMPLATE (Estilo Editorial)
   ============================== */

.article-page {
    background-color: #fff;
    padding-bottom: 80px;
}

/* NUEVO: Contenedor Split para el Header del Artículo (Desktop: Lado a Lado) */
.article-hero-split {
    display: flex;
    width: 100%;
    min-height: 60vh; /* Altura en desktop para que se vea imponente */
}

/* Columna Izquierda: Texto Azul */
.article-header-col {
    flex: 0 0 40%; /* 40% del ancho */
    background-color: #0c1a2e; /* Azul oscuro */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.article-meta-content {
    max-width: 500px;
}

/* Columna Derecha: Imagen */
.article-image-col {
    flex: 1; /* El resto del espacio (60%) */
    position: relative;
}

.article-hero-img {
    position: absolute; /* <-- LA MAGIA: Esto le quita el peso a la foto para que no estire la página */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Estilos de Tipografía del Header */
.category-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-brand);
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.article-main-title {
    font-size: clamp(32px, 5vw, 48px);
    font-family: var(--font-sans); /* O Playfair si prefieres más clásico */
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 30px;
    max-width: 900px;
}

.author-block {
    margin-bottom: 30px;
}
.author-name {
    display: block;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
}
.meta-info {
    font-size: 13px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.separator { margin: 0 8px; }

/* Botones de Compartir */
.share-icons {
    display: flex;
    gap: 12px;
}
.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 14px;
    font-weight: 700;
}
.icon-circle:hover { background: var(--color-brand); }

/* Caption */
.img-caption {
    font-size: 13px;
    color: #666;
    margin-top: 20px;
    font-style: italic;
    border-left: 3px solid var(--color-brand);
    padding-left: 12px;
}

/* Cuerpo del Texto (Columna Central) */
.article-body {
    display: flex;
    justify-content: center; /* Centrado editorial */
    margin-top: 40px;
}
.content-column {
    max-width: 750px; /* Ancho óptimo de lectura */
    width: 100%;
}

.content-column p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 25px;
    font-weight: 300;
}

/* Letra Capitular (Drop Cap) - El toque elegante */
.first-paragraph::first-letter {
    float: left;
    font-family: var(--font-serif);
    font-size: 85px;
    line-height: 0.7;
    padding-top: 8px;
    padding-right: 12px;
    padding-left: 3px;
    color: #0c1a2e; /* O gris oscuro */
    font-weight: 700;
}

/* Citas (Blockquotes) */
blockquote {
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 1.4;
    color: var(--color-brand);
    margin: 40px 0;
    padding-left: 20px;
    border-left: 4px solid #000;
}

/* ==============================
   Responsive (All Pages)
   ============================== */
@media (max-width: 1024px) {
    .hide-mobile { display: none !important; }
    
    /* ==============================
       MENU MÓVIL (ESTILO OMEGA)
       ============================== */
    .menu-icon { display: flex; z-index: 101; }
    
    /* 1. Anclamos SOLO el logo del header al centro exacto de la pantalla */
header .logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

    /* 2. Igualamos su tamaño para que sea idéntico al del menú abierto */
    .header-logo-img {
        height: auto !important;
        width: 160px !important; 
        max-width: 160px !important;
    }

    .nav-mobile-active {
        display: flex !important;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: #ffffff; /* Fondo blanco inmaculado */
        z-index: 100;
        flex-direction: column;
        padding: 0; /* Limpiamos el padding viejo para controlar cada sección */
        overflow-y: auto; /* Permite scroll si el cel es muy chiquito */
    }

    /* 1. Header del Menú Móvil (Logo) */
    .mobile-nav-header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px 20px 20px 20px;
    }
    .mobile-nav-logo {
        max-width: 160px;
        /* Se eliminó el filtro brightness(0) para respetar los colores originales del logo */
    }

    /* 2. Links con flechas y líneas sutiles */
    .nav-mobile-active ul { 
        display: flex;
        flex-direction: column; 
        gap: 0; 
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .nav-mobile-active li {
        list-style: none;
        width: 100%;
    }
    .nav-mobile-active a { 
        display: flex;
        justify-content: space-between; /* Texto a la izq, flecha a la der */
        align-items: center;
        font-size: 15px; 
        font-family: var(--font-sans); /* Fuente sin patines tipo Omega */
        font-weight: 500; 
        color: var(--color-dark); 
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 22px 30px;
        border-bottom: 1px solid var(--color-border); /* Línea separadora sutil */
        text-decoration: none;
    }

    /* 3. Footer del Menú (Idioma y Patrocinador anclados abajo) */
    .mobile-nav-footer {
        margin-top: auto; /* Truco pro: Empuja este bloque hasta el fondo de la pantalla */
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 40px 30px;
        background-color: var(--color-bg-gray); /* Fondo gris claro tipo footer */
    }
    .mobile-lang-box {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 500;
        color: var(--color-dark);
        cursor: pointer;
    }
   .mobile-partner-box {
        display: flex;
        flex-direction: row; /* <-- CAMBIO IMPORTANTE: Los pone uno al lado del otro */
        align-items: center; /* Los centra verticalmente */
        justify-content: space-between; /* Texto a la izquierda, logo a la derecha */
        gap: 20px; /* Espacio entre ellos */
        width: 100%; /* Asegura que ocupen todo el ancho disponible */
    }
    .mobile-partner-box .partner-text {
        font-family: var(--font-sans);
        font-size: 11px;
        color: var(--color-dark);
        opacity: 0.6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.4;
    }
    .mobile-partner-box img {
        height: 35px;
        width: auto;
        object-fit: contain;
    }
    /* Alineación Hero & Inside (Izquierda) */
    .big-content { 
        padding-bottom: 40px;
        text-align: left;
        align-items: flex-start;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* The Experience */
    #exp-grid { display: flex; flex-direction: column; height: auto; gap: 15px; }
    .col-split { display: flex; flex-direction: column; height: auto; gap: 15px; }
    .card-tall { height: 55vh; min-height: 400px; }
    .card-short { height: 25vh; min-height: 200px; }
    
    .grid-3, .vault-grid { grid-template-columns: 1fr; height: auto; }
    .card-base { margin-bottom: 0; }

    .vault-grid { display: flex; flex-direction: column; gap: 40px; text-align: center; }
    .vault-content { align-items: center; display: flex; flex-direction: column; }
    
    /* At The Tournament (Centrado) */
    .at-tournament { margin: 20px; padding: 60px 20px; }
    .tournament-wrap { flex-direction: column; gap: 40px; }
    
    .tournament-intro { 
        flex: auto; max-width: 100%; padding-right: 0; 
        text-align: center; 
    }
    .tournament-links { flex: auto; max-width: 100%; width: 100%; }
    .t-thumb { display: none; }
    
    .t-link-item { padding-right: 0; justify-content: space-between; }
    .arrow-outline { flex-shrink: 0; margin-left: 20px; }
    
    /* Join Promo */
    .join-promo-section { padding-top: 60px; padding-bottom: 60px; }
    .promo-grid-white { display: flex; flex-direction: column; }
    .promo-img-large { height: 300px; width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: none; }
    .promo-white-box { height: auto; padding: 40px 30px; margin-left: 0; margin-top: 0; width: 100%; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
    
    /* Newsletter */
    .newsletter-wrap { flex-direction: column; text-align: center; gap: 50px; }
    .news-graphic-container { width: 200px; margin: 0 auto; }
    .footer-links-grid { grid-template-columns: 1fr; gap: 30px; }
    .partners-logos { gap: 30px; justify-content: flex-start; }
    .partner-logo-img { height: 30px; }

    /* Mobile Carousels */
    .carousel-controls { display: none; }

    .section-std.venues .grid-3 {
        display: flex;             
        overflow-x: auto;          
        scroll-snap-type: x mandatory; 
        padding-bottom: 30px;      
        gap: 20px;
        scrollbar-width: none;     
        -webkit-overflow-scrolling: touch;
    }
    .section-std.venues .grid-3::-webkit-scrollbar { display: none; }

    .section-std.venues .card-base {
        flex: 0 0 85vw;
        width: 85vw;
        min-width: 85vw; 
        scroll-snap-align: center;
        margin-bottom: 0;
        height: 60vh;
    }

    /* Field Notes */
    .carousel-container {
        padding-right: 20px;
        scroll-snap-type: x mandatory;
    }

    .article-card {
        flex: 0 0 85vw;
        scroll-snap-align: center;
    }

    /* RESPONSIVE VENUES (Mobile Overlap & Slim) */
    .venue-list-section {
        margin-top: -60px; /* Mantiene el overlap encimado en celular */
    }
    .wide-card {
        flex-direction: column; 
        padding: 20px; /* Margen blanco en celular */
        gap: 20px;
    }
    
    /* Ajuste de imagen para Celular (Mantiene tamaño aprobado) */
    .wide-card-img {
        height: 180px; 
        width: 100%;
        flex: none;
    }
    
    .wide-card-content {
        padding: 0; 
    }
    .wc-title { font-size: 24px; }
    .wc-year { font-size: 28px; }
    
    /* Hero Venues adjustment */
    .hero-venues .big-content { padding-bottom: 60px; }


    /* RESPONSIVE EXPERIENCES */
    .exp-card-wide {
        flex-direction: column;
        min-height: auto;
    }
    .exp-img-col {
        height: 250px;
        flex: none;
    }
    .exp-content-col {
        padding: 40px 30px;
    }
    .exp-title { font-size: 28px; }
    .exp-actions { flex-direction: column; }
    .exp-actions .btn { width: 100%; text-align: center; }

    /* RESPONSIVE ARTICLE PAGE (Fix Mobile Padding & Layout) */
    .article-hero-split {
        flex-direction: column; /* Apilar en móvil: Azul arriba, Foto abajo */
    }
    .article-header-col {
        flex: auto;
        width: 100%;
        padding: 40px 20px; /* Padding móvil del header azul */
    }
    .article-image-col {
        height: 40vh; /* Altura controlada en móvil */
    }
    /* AQUÍ EL FIX DEL PADDING QUE PEDISTE */
    .content-column {
        padding: 0 30px; /* Más espacio a los lados del texto */
    }
    .content-column p {
        font-size: 16px;
    }
    .first-paragraph::first-letter {
        font-size: 60px;
    }
}

/* ==============================
   PAGE: TOURNAMENT (Final Polished Version)
   (Pegar al final de styles.css, borrando versiones anteriores de Tournament)
   ============================== */

.wrapper-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--gutter); /* Agregado: da espacio lateral en celular para que no choque el texto */
}

/* Intro Editorial (CORRECCIÓN DEFINITIVA DEL GAP GRIS) */
.intro-editorial {
    /* EL SECRETO: Pasamos los 80px al padding inferior de la caja para que sea fondo blanco sólido */
    padding: 50px 0 80px 0; 
    background-color: #fff;
    margin-bottom: 0 !important; 
}

.editorial-title {
    font-family: var(--font-serif);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
    margin-bottom: 30px;
    color: var(--color-bg-navy);
}

.editorial-text {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    font-weight: 300;
    margin-bottom: 0; /* Matamos el margen rebelde que se estaba escapando */
}

/* Foto Gigante de Transición (CORREGIDA PARA CERRAR EL HUECO GRIS) */
.photo-break {
    height: 75vh;
    min-height: 500px;
    background-color: #ffffff; /* Pintamos el fondo de blanco por si las dudas */
    margin-top: 0 !important; /* Matamos cualquier margen superior que deje ver el body gris */
    margin-bottom: 0 !important; /* Matamos cualquier margen inferior */
    padding: 0 !important;
    width: 100%;
    display: block;
}

/* --- Carrusel Estilo Rivian --- */
.riv-carousel-sec {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
}

.riv-pills-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
}

.riv-pill {
    background: transparent;
    border: 1px solid var(--color-border);
    padding: 12px 30px;
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.riv-pill:hover { border-color: var(--color-brand); }
.riv-pill.active {
    background-color: var(--color-dark);
    color: #fff;
    border-color: var(--color-dark);
}

.riv-track-wrap {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.riv-track {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 max(var(--gutter), calc(50vw - 35vw));
    scroll-behavior: smooth;
}
.riv-track::-webkit-scrollbar { display: none; }

.riv-card {
    flex: 0 0 70vw; 
    max-width: 1100px; 
    height: 500px; 
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    scroll-snap-align: center; 
}

.riv-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.riv-card:hover .riv-img { transform: scale(1.02); }

.riv-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 50px;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
    color: #fff;
}
.riv-overlay h3 { font-family: var(--font-serif); font-size: 32px; margin-bottom: 10px; }
.riv-overlay p { font-size: 16px; opacity: 0.9; max-width: 600px; }

/* ==============================
   TOURNAMENT RESPONSIVE (CELULAR)
   ============================== */
@media (max-width: 768px) {
    /* Oculta los botones superiores en pantallas de celular */
    .riv-pills-container {
        display: none !important; 
    }
    
    /* Le quitamos el margen gigante que dejaban los botones */
    .riv-carousel-sec {
        padding-top: 40px !important; 
    }

    /* Ajustes para que la sección editorial se vea perfecta en celular */
    .intro-editorial {
        padding: 40px 0 50px 0; /* El espacio vive en el padding blanco */
    }
    .editorial-text {
        margin-bottom: 0; 
    }
}


/* ==============================
   CARRUSEL TOURNAMENT: Ajustes Móviles
   ============================== */
@media (max-width: 768px) {
    /* Ocultamos los botones superiores en pantallas de celular */
    .riv-pills-container {
        display: none !important; 
    }
    
    /* Le quitamos el margen gigante que dejaban los botones para que el carrusel suba y se vea más limpio */
    .riv-carousel-sec {
        padding-top: 40px !important; 
    }
}



/* --- AJUSTE LIMPIO: Tarjetas F1 50/50 --- */
@media (min-width: 1025px) {
    /* Forzamos el 50/50 exacto respetando el padding original de Experiences */
    .f1-card-50-50 .f1-card-content { 
        flex: 1; 
    }
    .f1-card-50-50 .f1-card-image-wrap { 
        flex: 1; 
        height: auto; 
        min-height: 400px; /* Tamaño sensato, no gigante */
    }
    /* El Zig-Zag */
    .f1-card-reverse { 
        flex-direction: row-reverse; 
    }
}

/* --- Sección Estática Inferior --- */
.riv-static-sec {
    padding: 120px 0;
    background-color: #fff;
}

.riv-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.riv-static-item { text-align: left; }

.riv-static-img-wrap {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 30px;
    background-color: #f5f5f5;
}

.riv-static-content { padding-right: 20px; }

.riv-static-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-bottom: 15px;
}

.riv-static-title {
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1.3;
    color: var(--color-dark);
    font-weight: 400;
}

/* Responsive Ajustes */
@media (max-width: 1024px) {
    .intro-editorial { padding-top: 60px; }
    .editorial-text { margin-bottom: 60px; }
    
    .riv-carousel-sec { padding: 60px 0; }
    .riv-pill { padding: 10px 20px; font-size: 13px; }
    .riv-track { gap: 20px; padding: 0 var(--gutter); }
    .riv-card {
        flex: 0 0 88vw;
        height: 400px;
        max-width: none;
    }
    .riv-overlay { padding: 30px; }
    .riv-overlay h3 { font-size: 24px; }

    .riv-static-sec { padding: 80px 0; }
    .riv-grid-3 { grid-template-columns: 1fr; gap: 60px; }
    .riv-static-title { font-size: 24px; }
}


/* ==============================
   PAGE: EXPERIENCES (FINAL CORRECTIONS: SPACING & BUTTONS)
   (Pegar al final de styles.css, borrando versiones anteriores de Experiences)
   ============================== */

/* NUEVO: Clase utilitaria para separar la barra roja del título */
.header-title-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaciado correcto entre barra y texto */
}

/* 1. SECCIÓN LANDING (Top Split - Con más aire lateral) */
.f1-landing-sec {
    padding: 80px 0;
    background-color: var(--color-bg-gray);
}

.f1-landing-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px; /* Más espacio entre foto y links */
    height: 65vh;
    min-height: 550px;
    /* CORRECCIÓN: Margen extra para que no se pegue a los bordes en pantallas grandes */
    margin: 0 40px; 
}

/* Foto Gigante Izquierda */
.f1-landing-hero-img {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.f1-landing-title {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -1px;
    z-index: 2;
}

/* Tarjetas Derecha (Links) */
.f1-landing-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.f1-link-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 25px;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    color: var(--color-dark);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.f1-link-card:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: var(--color-brand);
}

.f1-link-img-wrap {
    width: 130px;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.f1-link-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.f1-link-title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.f1-link-sub {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-brand);
}

/* 2. SECCIÓN SCHEDULE (Estilo Homepage) */
.exp-sched-track {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding-bottom: 30px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.exp-sched-track::-webkit-scrollbar { display: none; }

.venue-small-card {
    flex: 0 0 280px;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    scroll-snap-align: start;
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}
.venue-small-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.vsc-img {
    height: 160px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.vsc-img img { transition: transform 0.5s ease; }
.venue-small-card:hover .vsc-img img { transform: scale(1.05); }

.vsc-content { 
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.vsc-title {
    font-family: var(--font-serif);
    font-size: 20px;
    margin-bottom: 5px;
    color: var(--color-dark);
}
.vsc-loc {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.vsc-date {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-dark);
    font-weight: 700;
    margin-bottom: auto; /* Empuja el botón hacia abajo */
}

/* CORRECCIÓN: Botón pequeño estilo homepage (Outline grueso y oscuro) */
.vsc-btn {
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--color-dark); /* Borde grueso y oscuro */
    color: var(--color-dark);
    background: transparent;
    border-radius: 50px;
    margin-top: 20px;
    transition: all 0.3s ease;
}
.vsc-btn:hover {
    background: var(--color-dark);
    color: #fff;
    border-color: var(--color-dark);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .f1-landing-sec { padding: 40px 0; }
    .f1-landing-grid { 
        grid-template-columns: 1fr; 
        height: auto; 
        gap: 20px;
        margin: 0; /* Quitamos el margen extra en celular */
    }
    .f1-landing-hero-img { 
        height: 300px; 
    }
    .f1-landing-title { 
        font-size: 24px; 
        left: 20px; 
        bottom: 20px; 
    }
    .f1-link-card { 
        padding: 15px; 
    }
    .f1-link-img-wrap { display: none; }
    
    .venue-small-card {
        flex: 0 0 260px;
    }
}


/* ==============================
   CONTROL DE TAMAÑO PARA EL LOGO
   ============================== */
.header-logo-img {
    height: 80px; /* <-- Sube o baja este número si quieres el logo más grande o más chico */
    width: auto;
    object-fit: contain;
}


/* ==============================
   TOP ANNOUNCEMENT BAR
   (Barra azul arriba del menú)
   ============================== */
.top-announcement-bar {
    position: relative;
    background-color: #27415f; /* El azul elegante de tu diseño */
    color: #ffffff;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 101; /* Asegura que esté por encima de todo */
}

/* Las líneas diagonales a la izquierda */
.top-bar-lines {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 90px;
}

/* El contenido del texto */
.top-bar-content {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    padding: 0 20px;
    z-index: 2;
}

.top-bar-divider {
    margin: 0 10px;
    opacity: 0.5;
    font-weight: 300;
}

.top-bar-link {
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.top-bar-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    opacity: 0.9;
}

/* Ajustes para celular */
@media (max-width: 1024px) {
    .top-bar-content {
        font-size: 9px; /* Letra un poco más chica para que quepa todo */
        letter-spacing: 0.5px;
    }
    .top-bar-lines {
        width: 60px; /* Líneas un poco más angostas en móvil */
        opacity: 0.3; /* Las hacemos semi-transparentes en móvil para que el texto se lea mejor si se encima */
    }
    .top-bar-divider {
        display: none; /* Quitamos el palito separador en celular */
    }
    .top-bar-link {
        display: block; /* Ponemos el link abajo del texto principal en celular */
        margin-top: 2px;
    }
}


/* ==============================
   LOGO CÉNTRICO GIGANTE (Sección Scenic Break)
   ============================== */
.scenic-center-logo {
    position: relative;
    z-index: 2;
    
    /* --- CAMBIA ESTOS DOS VALORES --- */
    width: 30vw;      /* Antes era 50vw. Ahora será el 30% del ancho */
    max-width: 350px; /* Antes era 500px. Ahora el tope es 350px */
    /* ------------------------------- */
    
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* Ajuste para celular */
@media (max-width: 768px) {
     .scenic-center-logo {
        width: 80vw; /* En celular lo hacemos más ancho (80% de la pantalla) para que impacte */
        max-width: none;
     }
}



/* ==============================
   PAGE: TOURNAMENT - HERO STYLE (Masters Vibe)
   ============================== */

/* La sección contenedora general */
.tournament-hero-card-sec {
    /* Regresamos el padding a algo normal, el "aire" lo dará el max-width */
    padding: 60px 20px 60px 20px; 
    background-color: #fff;
}

/* El título principal estilo editorial */
.tournament-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(40px, 6vw, 40px); /* Tamaño elegante */
    text-align: left; /* ¡TÍTULO A LA IZQUIERDA! */
    color: var(--color-bg-navy);
    
    /* MAGIA: Le damos el mismo ancho que la foto para que se alineen perfecto */
    width: 100%;
    max-width: 1100px; /* Ancho reducido para forzar el "aire" lateral */
    margin: 0 auto 30px auto; /* Centra el contenedor pero el texto queda a la izquierda */
    
    letter-spacing: -1px;
}

/* El contenedor de la tarjeta de imagen */
.tournament-hero-card-wrap {
    width: 100%;
    max-width: 1100px; /* El mismo tope exacto que el título */
    margin: 0 auto; /* Asegura que la tarjeta se mantenga en el centro de la pantalla */
    height: 60vh;
    min-height: 450px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Sombra elegante */
}

/* La imagen dentro de la tarjeta */
.hero-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Ajuste fino para celular */
@media (max-width: 768px) {
    .tournament-hero-card-sec {
        padding: 40px 20px; 
    }
    .tournament-hero-title {
        margin-bottom: 20px; /* Un poco menos de espacio entre título y foto en celular */
    }
    .tournament-hero-card-wrap {
        height: 50vh;
        min-height: 350px;
    }
}



/* ==============================
   PAGE: REGISTER / JOIN TOURNAMENT
   (Estilo editorial limpio tipo "The Masters")
   ============================== */

/* --- 1. HERO SECTION --- */
.register-hero-sec {
    padding-top: 0 !important; 
    margin-top: 0 !important;
}

.reg-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* MÁS ESPACIO A LA IZQUIERDA EN EL HERO */
.reg-hero-content {
    max-width: 600px; 
    padding-left: 60px; /* Aire del lado izquierdo en compu */
}

/* TÍTULOS DEL HERO EN AZUL ALBATROSS */
.reg-hero-subtitle {
    display: block;
    font-family: var(--font-serif);
    font-size: 18px;
    color: #003366; 
    margin-bottom: 15px;
}

.reg-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(50px, 6vw, 80px);
    line-height: 1.05;
    color: #003366; 
    margin-bottom: 25px;
    letter-spacing: -1px;
} /* <-- ¡AQUÍ ESTÁ LA LLAVE QUE FALTABA! */

.reg-hero-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 40px;
}

/* Contenedor de Botones */
.reg-hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Botón 1: Sólido (Register) */
.btn-reg-primary {
    background-color: var(--color-dark);
    color: #fff;
    border: 2px solid var(--color-dark);
    border-radius: 50px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 600;
}
.btn-reg-primary:hover {
    background-color: #000;
    border-color: #000;
}

/* Botón 2: Outline (Ticket Info) */
.btn-reg-secondary {
    background-color: transparent;
    color: var(--color-dark);
    border: 2px solid var(--color-border);
    border-radius: 50px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 600;
}
.btn-reg-secondary:hover {
    border-color: var(--color-dark);
    background-color: rgba(0,0,0,0.03);
}

/* Lado Derecho: Imagen */
.reg-hero-media {
    position: relative;
    width: 100%;
}

.reg-hero-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --- 2. TICKET INFO SECTION --- */
.ticket-info-sec {
    background-color: #ffffff;
    padding: 100px 0;
}

.ticket-info-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.ticket-block {
    margin-bottom: 70px;
}
.ticket-block:last-child {
    margin-bottom: 0;
}

/* TÍTULOS DE TICKET INFO EN AZUL ALBATROSS */
.ticket-sec-title {
    font-family: var(--font-serif);
    font-size: 28px;
    color: #003366; 
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.ticket-sec-subtitle {
    font-family: var(--font-serif);
    font-size: 34px;
    color: #003366; 
    margin-bottom: 20px;
    font-weight: 400;
}

.ticket-sec-text {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: #444;
}

/* La lista numerada con círculos */
.ticket-steps-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.info-list-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}

/* CIRCULITOS NUMERADOS EN AZUL ALBATROSS */
.step-circle {
    width: 28px;
    height: 28px;
    background-color: #003366; 
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-text {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}
.step-text strong {
    color: var(--color-dark);
}

.ticket-sec-disclaimer {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    border-top: 1px solid var(--color-border);
    padding-top: 30px;
}

/* --- RESPONSIVE (CELULARES) CORREGIDO CON MÁS AIRE --- */
@media (max-width: 900px) {
    /* Hero: Apila texto arriba e imagen abajo */
    .reg-hero-grid {
        grid-template-columns: 1fr; 
        gap: 40px;
    }

    /* Contenedor de Texto del Hero */
    .reg-hero-content {
        max-width: 100%;
        /* AQUÍ ESTÁ EL CAMBIO: Le damos 25px a cada lado para que no se pegue al borde */
        padding-left: 25px;  /* <-- Más aire a la izquierda */
        padding-right: 25px; /* <-- Más aire a la derecha */
        text-align: center; 
    }
    
    /* Centramos los botones en celular */
    .reg-hero-actions {
        justify-content: center;
    }

    /* Sección de Información de abajo */
    .ticket-info-sec {
        padding: 60px 0;
    }

    /* AQUÍ TAMBIÉN AGREGAMOS AIRE al contenedor de la info de abajo */
    .ticket-info-wrapper {
        padding-left: 25px;  /* <-- Más aire a la izquierda */
        padding-right: 25px; /* <-- Más aire a la derecha */
    }

    /* Ajustes de tamaño de letra para celular */
    .ticket-sec-title {
        font-size: 22px;
    }
    .ticket-sec-subtitle {
        font-size: 26px;
    }
}


/* ==============================
   TABS SYSTEM (Pestañas de Torneos)
   ============================== */

/* Contenedor de los botones */
.tournaments-tab-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px; /* Espacio antes de que empiece la info */
    flex-wrap: wrap; /* Permite que los botones bajen de línea si no caben */
}

/* El diseño del botón por defecto (inactivo) */
.tab-btn {
    background-color: transparent;
    color: #003366; /* Azul Albatross */
    border: 2px solid #003366;
    border-radius: 50px; /* Forma de pastilla */
    padding: 12px 24px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; /* Transición suave al pasar el mouse */
}

.tab-btn:hover {
    background-color: rgba(0, 51, 102, 0.05); /* Fondo muy sutil al pasar el mouse */
}

/* El diseño del botón cuando está ACTIVO (seleccionado) */
.tab-btn.active {
    background-color: #003366;
    color: #ffffff;
}

/* Contenido de las pestañas */
.tab-content {
    display: none; /* Esconde todo por defecto */
    animation: fadeInTab 0.4s ease forwards; /* Animación de aparición suave */
}

.tab-content.active {
    display: block; /* Muestra solo el que está activo */
}

/* Animación para que no brinque feo al cambiar */
@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajustes para los botones en celular */
@media (max-width: 900px) {
    .tournaments-tab-container {
        gap: 10px;
        flex-direction: column; /* Apilamos los botones uno sobre otro en cel */
    }
    .tab-btn {
        width: 100%; /* Que ocupen todo el ancho disponible */
        text-align: center;
    }
}



/* ==============================
   INLINE NEWSLETTER FORM (Homepage)
   ============================== */
.inline-news-form {
    display: flex;
    gap: 12px;
    margin-top: 30px; /* Separación del título */
    max-width: 450px; /* Para que no se estire a toda la pantalla */
}

/* La barrita blanca para el correo */
.inline-news-input {
    flex: 1; /* Ocupa el espacio disponible */
    padding: 14px 20px;
    border: none;
    border-radius: 50px;
    background-color: #ffffff;
    color: #333333;
    font-family: var(--font-sans);
    font-size: 15px;
    outline: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombrita sutil */
}

.inline-news-input::placeholder {
    color: #888888;
}

/* El botón de Enviar */
.inline-news-submit {
    padding: 14px 28px;
    border-radius: 50px;
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.inline-news-submit:hover {
    background-color: #ffffff;
    color: #003366; /* El texto se vuelve azul al pasar el mouse */
}

/* Ajuste para celular: Se apilan para que se vean bien grandes y fáciles de picar */
@media (max-width: 600px) {
    .inline-news-form {
        flex-direction: column;
    }
}



/* ==============================
   PAGE: GUIDE (Guía del Jugador)
   ============================== */

/* El contenedor principal de las secciones de la guía */
.guide-section {
    padding: 80px 0;
    background-color: #ffffff;
}
/* Un fondo gris muy tenue para diferenciar secciones después */
.section-before-arrive {
    background-color: #f9f9f9; 
}

.guide-wrapper {
    max-width: 1100px; /* Mismo ancho que el Hero para alinear */
    margin: 0 auto;
}

/* Encabezado de la sección (ej. 01. Before You Arrive) */
.guide-sec-header {
    margin-bottom: 50px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 20px;
}

.guide-sec-number {
    display: block;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: #003366; /* Azul Albatross */
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.guide-sec-title {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5vw, 48px);
    color: var(--color-dark);
    margin: 0;
}

/* Grid de contenido editorial */
.guide-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas en compu */
    gap: 60px;
    margin-bottom: 80px;
}

.guide-block {
    margin-bottom: 40px;
}
.guide-block:last-child {
    margin-bottom: 0;
}

.guide-block-title {
    font-family: var(--font-serif);
    font-size: 22px;
    color: #003366;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.guide-block-title i {
    font-size: 24px; /* Tamaño de los iconos pequeños */
    color: #003366;
}

.guide-block p, .guide-checklist li {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: #444;
}

/* Lista con bullets bonitos */
.guide-checklist {
    list-style: none;
    padding: 0;
}
.guide-checklist li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}
.guide-checklist li::before {
    content: "•"; /* Bullet personalizado */
    color: #003366;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
}

/* --- HELPFUL INFORMATION DROPDOWNS (Acordeones) --- */
.helpful-info-container {
    margin-top: 60px;
    border-top: 1px solid var(--color-border);
    padding-top: 40px;
}

.helpful-info-title {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--color-dark);
    margin-bottom: 30px;
}

/* Estilo del contenedor <details> */
.guide-dropdown {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 10px;
}

/* Estilo de la barra que se pica <summary> */
.guide-summary {
    padding: 20px 0;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    color: #003366;
    cursor: pointer;
    list-style: none; /* Quita la flecha fea por defecto */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Hack para quitar la flecha en Safari/Chrome */
.guide-summary::-webkit-details-marker {
    display: none;
}

/* El icono de "+" que gira */
.dropdown-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
}

/* Cuando el acordeón está abierto, gira el icono */
.guide-dropdown[open] .dropdown-icon {
    transform: rotate(45deg); /* Se convierte en una 'X' */
}

/* El contenido oculto */
.dropdown-content {
    padding-bottom: 25px;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    max-width: 800px; /* Para que no sea muy ancho de leer */
}

/* --- RESPONSIVE PARA CELULAR --- */
@media (max-width: 768px) {
    .guide-content-grid {
        grid-template-columns: 1fr; /* Una sola columna en celular */
        gap: 40px;
    }
    .guide-sec-header {
        margin-bottom: 30px;
    }
    .guide-block-title {
        font-size: 20px;
    }
    .guide-summary {
        font-size: 16px;
    }
}


/* ==============================
   SECCIÓN 2: ARRIVAL & ENTRY
   ============================== */
.section-arrival-entry {
    background-color: #ffffff; 
}

.arrival-intro {
    max-width: 800px;
    margin-bottom: 40px;
}

/* --- NUEVO CUADRO ESTILO THE MASTERS --- */
.directions-master-box {
    background-color: #f9f9f9; 
    border-radius: 8px; /* Un poco más redondo para modernizarlo */
    padding: 40px; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 60px;
}

.dir-col {
    min-width: max-content; /* Evita que el texto se aplaste */
}

.dir-col h4 {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.dir-col p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* La rayita divisora */
.dir-divider {
    width: 1px;
    height: 90px;
    background-color: #ddd;
    margin: 0 40px; /* Reduje un poco el margen para darle espacio al mapa */
    flex-shrink: 0;
}

/* Los links subrayados */
.dir-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dir-links a {
    font-family: var(--font-sans);
    font-size: 15px;
    color: #003366; 
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.dir-links a:hover {
    color: #000;
}

/* --- NUEVA COLUMNA DEL MAPA --- */
.dir-map-col {
    margin-left: auto; /* Esta es la magia que empuja el mapa hasta la derecha */
    width: 100%;
    max-width: 350px; /* Ancho máximo del mapa */
}

.dir-map-link {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombrita para que parezca botón */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dir-map-link:hover {
    transform: translateY(-3px); /* Se levanta un poquito al pasar el mouse */
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.dir-map-img {
    width: 100%;
    height: 160px; /* Esta altura fija hace que el recuadro gris crezca y se vea imponente */
    object-fit: cover;
    display: block;
}

/* ... AQUÍ SIGUE TU CSS DE .arrival-map-img Y LO DEMÁS ... */

/* Imagen del mapa de estacionamiento */
.arrival-map-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

/* Grid de Artículos Prohibidos */
.prohibited-items-container {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid var(--color-border);
}

.prohibited-intro {
    margin-bottom: 40px;
    color: #555;
    font-family: var(--font-sans);
    line-height: 1.6;
}

.prohibited-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px;
}

.prohibited-item h4 {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 10px;
}

.prohibited-item p {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* --- RESPONSIVE PARA CELULAR --- */
@media (max-width: 900px) {
    .directions-master-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
        gap: 30px;
    }
    .dir-divider {
        width: 100%; 
        height: 1px;
        margin: 0;
    }
    .dir-map-col {
        margin-left: 0; /* En celular le quitamos el empuje a la derecha */
        max-width: 100%;
    }
    .dir-map-img {
        height: 200px; /* En celular lo hacemos un poco más alto para que luzca */
    }
    .prohibited-grid {
        grid-template-columns: 1fr; 
        gap: 30px;
    }
}


/* ==============================
   SECCIÓN 3: PLAN YOUR DAY (CORRECCIONES FINALES)
   ============================== */
.section-plan-day {
    background-color: #ffffff;
    border-top: 1px solid var(--color-border);
}

.plan-switcher-container {
    margin-bottom: 60px;
}

.plan-switcher {
    display: flex;
    gap: 15px;
}

.switcher-btn {
    background-color: transparent;
    color: #003366;
    border: 2px solid #003366;
    border-radius: 50px;
    padding: 12px 28px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.switcher-btn.active, .switcher-btn:hover {
    background-color: #003366;
    color: #ffffff;
}

.schedule-content {
    display: none; 
    animation: fadeInTab 0.4s ease forwards;
}

.schedule-content.active {
    display: block; 
}

.schedule-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 70px; 
    margin-bottom: 70px;
}

/* 1. CORRECCIÓN DE LA FOTO (Mismo tamaño siempre) */
.schedule-image-col {
    align-self: start; /* Evita que la foto se estire si el texto es muy largo */
}

.schedule-hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5; /* Magia: forzamos un rectángulo vertical elegante */
    object-fit: cover;
    border-radius: 8px;
}

.timeline-vertical {
    position: relative;
    margin-left: 60px; 
    border-left: 2px solid #e0e0e0; 
}

.timeline-item {
    position: relative;
    margin-bottom: 45px;
}
.timeline-item:last-child {
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: 0; 
    top: 0;
    transform: translateX(-50%); 
    background-color: #003366; 
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,51,102,0.3);
    white-space: nowrap; 
}

/* 2. CORRECCIÓN DEL AIRE EN LOS HORARIOS */
.timeline-details {
    padding-left: 75px; /* Empujamos 75px a la derecha para que la bolita NO toque el texto */
}

.timeline-details h4 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.timeline-details p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.timeline-disclaimer {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #888;
    margin-top: 20px;
    font-style: italic;
    padding-left: 75px; /* Alineado exacto con los textos de arriba */
}

.schedule-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding-top: 50px;
    border-top: 1px solid #eee;
}

.recommended-reads-container {
    margin-top: 100px;
    padding-top: 70px;
    border-top: 1px solid var(--color-border);
}

/* 3. CORRECCIÓN DE LOS ARTÍCULOS GIGANTES */
.latest-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Esto los divide en 3 columnas perfectas */
    gap: 30px;
}
.news-img-wrap {
    height: 220px;
    overflow: hidden;
    border-radius: 4px;
}
.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.news-card:hover .news-img {
    transform: scale(1.05);
}
.news-card-content { padding-top: 15px; }
.news-date { display: block; font-size: 12px; color: #888; margin-bottom: 8px; font-family: var(--font-sans);}
.news-title { font-family: var(--font-serif); font-size: 18px; line-height: 1.4; margin-bottom: 15px; color: var(--color-dark); }
.news-link { font-size: 13px; font-weight: 600; color: #003366; text-decoration: none; }
.news-link:hover { text-decoration: underline; }

/* RESPONSIVE PARA CELULAR */
@media (max-width: 900px) {
    .plan-switcher {
        width: 100%;
        flex-direction: column; 
    }
    .switcher-btn {
        width: 100%;
        text-align: center;
    }
    .schedule-top-grid, .schedule-bottom-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* En celular los artículos pasan a 1 sola columna */
    .latest-news-grid {
        grid-template-columns: 1fr; 
    }

    .timeline-vertical {
        margin-left: 0;
        border-left: none;
    }
    .timeline-marker {
        position: relative; 
        transform: none; 
        left: 0;
        display: inline-block;
        margin-bottom: 15px; 
    }
    
    /* En celular el texto va abajo de la bolita, no necesita padding a la izquierda */
    .timeline-details, .timeline-disclaimer {
        padding-left: 0; 
    }
    
    .timeline-item {
        margin-bottom: 40px;
        padding-bottom: 30px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .schedule-hero-img {
        aspect-ratio: auto;
        height: 300px; /* Foto más chaparrita en celular */
    }
}



/* ==============================
   SECCIÓN 4: TICKET INFO & MAPS
   ============================== */
.section-tickets-info {
    background-color: #f9f9f9; /* Gris súper clarito y elegante */
    padding: 80px 0;
}

/* Parte de arriba (Textos y Botón) */
.tickets-info-top {
    margin-bottom: 60px;
    max-width: 800px; /* Para que el texto no se estire demasiado */
}

.tickets-info-title {
    font-family: var(--font-serif);
    font-size: 32px;
    color: #003366; /* Azul Albatross */
    margin-bottom: 20px;
}

.tickets-info-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.btn-ticket-cta {
    display: inline-block;
    border: 1px solid #003366;
    color: #003366;
    background-color: transparent;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-ticket-cta:hover {
    background-color: #003366;
    color: #ffffff;
}

/* Parte de abajo (3 Columnas con rayitas) */
.tickets-info-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border-top: 1px solid #e0e0e0; /* Una línea sutil para separar la parte de arriba */
    padding-top: 50px;
}

.ticket-info-col {
    flex: 1; /* Las 3 columnas ocupan exactamente el mismo espacio */
}

.ticket-info-col h4 {
    font-family: var(--font-serif);
    font-size: 20px;
    color: #003366;
    margin-bottom: 15px;
}

.ticket-info-col p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
}

.ticket-info-link {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #003366;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.ticket-info-link:hover {
    color: #000000;
}

/* La rayita vertical que separa las columnas */
.ticket-col-divider {
    width: 1px;
    height: 120px;
    background-color: #e0e0e0; 
    margin-top: 10px;
}

/* --- RESPONSIVE PARA CELULAR --- */
@media (max-width: 900px) {
    .tickets-info-bottom {
        flex-direction: column; /* Las columnas se apilan en el cel */
        gap: 40px;
    }
    .ticket-col-divider {
        width: 100%; /* La rayita se vuelve horizontal en cel */
        height: 1px;
        margin: 0;
    }
}


/* ==============================
   RESCATE URGENTE: ARTÍCULOS MÓVIL (Fijar Colapso de Imagen)
   ============================== */
@media (max-width: 1024px) {
    /* 1. Nos aseguramos de que el contenedor principal apile el texto arriba y la foto abajo */
    .article-hero-split {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
    }

    /* 2. Le damos altura fija y segura al contenedor de la foto */
    .article-image-col {
        position: relative !important; /* Vital para que la imagen absoluta no se escape */
        width: 100% !important;
        height: 40vh !important; /* Ocupa el 40% de la pantalla del celular */
        min-height: 300px !important; /* Si la pantalla es muy chica, mínimo mide 300px para que no se apachurre */
        flex: none !important;
    }

    /* 3. Forzamos a la imagen a llenar su caja sin deformarse */
    .article-hero-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Esto corta la foto bonito sin apachurrarla */
    }
}


/* Cojín lateral exclusivo para celulares */
@media (max-width: 768px) {
    .cojin-movil {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}