/* s7.css - capa Seat Seven sobre shared/venue.css (se carga DESPUES).
   Solo var(--s7-*) de brand/tokens: ni un color ni una fuente propios.
   No toca venue.js. Se reutiliza tal cual en la F3 para los hubs.
   Reparto de la marca (brand book 04): visor en azul/noche, contenido en marfil, rojo solo de acento
   y nunca sobre azul. */

/* -- 1. Variables de venue.css -> tokens (zona oscura: el visor) -- */
:root{
 --accent:var(--s7-azul);--sky:var(--s7-marfil);--acc:var(--s7-marfil);
 --bg:var(--s7-noche);--panel:var(--s7-noche);--card:var(--s7-azul);
 --line:color-mix(in srgb,var(--s7-marfil) 22%,transparent);
 --line-soft:color-mix(in srgb,var(--s7-marfil) 12%,transparent);
 --ink:var(--s7-marfil);--bright:var(--s7-blanco);
 --muted:color-mix(in srgb,var(--s7-marfil) 80%,var(--s7-noche));
 --dim:color-mix(in srgb,var(--s7-marfil) 60%,var(--s7-noche));
 --font-display:var(--s7-font-display);--font-ui:var(--s7-font-text);
 --kicker-text:"Seat Seven";
}
html,body{background:var(--s7-marfil)}
body{font-family:var(--s7-font-text)}
.stage-hero{background:var(--s7-noche)}

/* -- 2. Titulares: Archivo Expanded ExtraBold, sin cursiva (la marca no la tiene) -- */
.stage-overlay h1,.venue-title-m h1,.seo-copy h2,.related h2{font-family:var(--s7-font-display);font-weight:800;font-style:normal}
.stage-overlay h1 .accent,.venue-title-m h1 .accent{color:var(--s7-marfil)}
.tagline{font-family:var(--s7-font-tag);font-weight:700}
.back-btn,.scroll-hint,.view-modal-btn,.tooltip{background:var(--s7-azul);color:var(--s7-blanco)}
.back-btn:hover,.scroll-hint:hover{background:var(--s7-azul);box-shadow:0 0 0 2px var(--s7-marfil)}

/* -- 3. Zona clara: el contenido bajo el visor -- */
.page,.foot{
 --bg:var(--s7-marfil);--panel:var(--s7-papel);--card:var(--s7-papel);
 --line:var(--s7-linea);--line-soft:var(--s7-marfil-2);
 --ink:var(--s7-tinta);--bright:var(--s7-tinta);--muted:var(--s7-gris);--dim:var(--s7-gris);
 --acc:var(--s7-rojo);--accent:var(--s7-azul);--sky:var(--s7-azul);
 background:var(--bg);color:var(--ink)}
.page a{color:var(--s7-azul);text-underline-offset:3px}
.page a:hover{color:var(--s7-rojo)}
.seo-copy h2{color:var(--s7-azul);text-transform:none;letter-spacing:0}
.seo-copy h3{font-family:var(--s7-font-tag);font-weight:700;color:var(--s7-azul)}
.seo-copy p,.seo-copy li,.faq dd{color:var(--s7-tinta)}
.faq dt{font-family:var(--s7-font-tag);font-weight:700;color:var(--s7-azul)}
.s7-note{font-size:var(--s7-small);color:var(--s7-gris)}
.venue-chips a{background:var(--s7-papel);box-shadow:0 0 0 1px var(--s7-linea);color:var(--s7-tinta)}
.venue-chips a:hover{box-shadow:0 0 0 2px var(--s7-azul)}
.venue-chips .vc-name{font-family:var(--s7-font-display);font-weight:800;color:var(--s7-azul)}
.venue-chips .vc-meta{color:var(--s7-gris)}

/* -- 4. Sin cabecera (F2.2, opcion A): el visor empieza en el pixel 0.
   Cada pixel encima del mapa es espacio de anuncio (banner superior en los hubs).
   Navegacion = chip "All venue guides" del visor + pie. --lb-h no se toca aqui:
   en los hubs lo sigue fijando venue.css segun el banner superior. -- */
.skip-link{background:var(--s7-azul);color:var(--s7-blanco)}

/* -- 5. Pie "(c) Seat Seven" (mismo que el resto del sitio) -- */
.foot{border-top:1px solid var(--s7-linea);background:var(--s7-marfil-2)}
.foot-in{max-width:var(--s7-max);margin:0 auto;padding:28px var(--s7-gutter) 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s7-space-2);font-size:var(--s7-small);color:var(--s7-gris)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{color:var(--s7-gris)}
.foot-brand{flex-basis:100%;line-height:0}
.foot-brand img{height:24px;width:auto;display:block}
/* en las guias el pie se alinea con la columna de lectura (mismo borde izquierdo que el texto) */
.s7-venue .foot-in{max-width:calc(var(--s7-read) + 2 * var(--s7-gutter));row-gap:var(--s7-space-1)}

/* -- 6. Indice /venues/ (tarjetas) -- */
.s7-index{max-width:var(--s7-max);margin:0 auto;padding:var(--s7-space-4) var(--s7-gutter) var(--s7-space-8)}

@media (max-width:720px){
 .foot-in{padding-left:var(--s7-gutter-mobile);padding-right:var(--s7-gutter-mobile)}
 .foot nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7-space-1) var(--s7-space-2)}
}

/* -- 7. Ritmo del texto de la guia -- */
.seo-copy h2::before{content:none;display:none}
.seo-copy h2{font-size:var(--s7-h2);line-height:1.12;margin:var(--s7-space-5) 0 var(--s7-space-2)}
.seo-copy > h2:first-child{margin-top:0}
.seo-copy h3{text-transform:none;letter-spacing:0;margin:var(--s7-space-3) 0 var(--s7-space-1)}
.seo-copy p{margin:0 0 var(--s7-space-2);line-height:var(--s7-lh)}
.seo-copy ul{margin:0 0 var(--s7-space-2);padding-left:var(--s7-space-3)}
.seo-copy li{margin:0 0 var(--s7-space-1);line-height:var(--s7-lh)}
.faq dd{margin:4px 0 var(--s7-space-2)}

/* -- 8. F2.2: columna de lectura centrada (ancho de lectura de los tokens).
   El rail de anuncios de los hubs va FUERA de .page (venue.css v43), asi que
   centrar no choca con el: con o sin rail, el texto queda centrado en la ventana. -- */
.s7-venue .content > *{max-width:var(--s7-read);margin-left:auto;margin-right:auto}
.s7-venue .seo-copy{max-width:var(--s7-read)}

/* -- 9. F2.2: transicion visor -> contenido y ritmo vertical -- */
.breadcrumbs{margin:0;padding-top:var(--s7-space-3);font-size:var(--s7-xs)}
.breadcrumbs a{color:var(--s7-gris)}
.breadcrumbs [aria-current="page"]{color:var(--s7-tinta)}
.seo-copy{padding:var(--s7-space-5) 0 0}
.faq{margin:0}
.s7-note{margin:var(--s7-space-4) 0 0;padding-top:var(--s7-space-2);border-top:1px solid var(--s7-linea)}

/* -- 10. F2.2: "Other venues" = mismo lenguaje que el texto y que /venues/ -- */
.related{margin:var(--s7-space-6) auto;padding:var(--s7-space-4) var(--s7-space-3);
 background:var(--s7-papel);border:0;box-shadow:0 0 0 1px var(--s7-linea);border-radius:var(--s7-radius)}
.related h2{font-family:var(--s7-font-display);font-weight:800;font-size:var(--s7-h2-doc);line-height:1.2;
 text-transform:none;letter-spacing:0;color:var(--s7-azul);margin:0 0 var(--s7-space-2)}
.venue-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7-space-2)}
.venue-chips a{border:0;border-radius:var(--s7-radius);padding:var(--s7-space-2);background:var(--s7-marfil)}
.venue-chips a:hover{transform:none}
.venue-chips .vc-name{font-size:var(--s7-small)}

/* -- 11. F2.2: movil. El h1 sale del visor (.venue-title-m, lo mueve venue.js):
   sin fondo quedaba marfil sobre marfil (invisible). Se queda en la zona oscura. -- */
@media (max-width:640px){
 .venue-title-m{background:var(--s7-noche);padding:var(--s7-space-2) var(--s7-gutter-mobile)}
 .venue-title-m h1{color:var(--s7-marfil);background:none;-webkit-text-fill-color:var(--s7-marfil)}
 .venue-title-m h1 .accent{-webkit-text-fill-color:var(--s7-marfil)}
 .page{padding-left:var(--s7-gutter-mobile);padding-right:var(--s7-gutter-mobile)}
 .seo-copy{padding-top:var(--s7-space-4)}
 .breadcrumbs{padding-top:var(--s7-space-2)}
 .related{padding:var(--s7-space-3) var(--s7-space-2);margin:var(--s7-space-5) auto}
 .venue-chips{grid-template-columns:1fr}
}

/* -- 12. F2.2: colores de venue.css que chocaban con la marca (solo CSS) -- */
.best-star-icon{color:var(--s7-marfil)}
.best-star-label{color:var(--s7-marfil);background:var(--s7-noche)}

/* -- 13. F2.2: unidades de Auto ads que Google cuelga de <html> y no rellena.
   Sin servir quedan en el flujo y dejan ~600 px bajo el pie. Regla documentada
   por Google para unidades sin rellenar; las servidas (filled) no se tocan. -- */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important}
