/* ==================================================================
   chassis-shell.css - CARCASA del chasis aplicada a las paginas ESTATICAS
   ------------------------------------------------------------------
   Generado/mantenido por _tools/unify_shell.py. Extraido de la carcasa
   VIVA de https://nycsightseeing.tours/blog/ (layout() del Worker) el
   2026-08-27.

   QUE HACE: header, navegacion, tipografia, paleta, anchos, breadcrumbs
   y footer de las 143 paginas estaticas, identicos al chasis.
   QUE NO HACE: no toca el HTML de contenido, ni URLs, ni canonicals,
   ni titles, ni metas, ni JSON-LD.

   ORDEN DE CARGA: este fichero es el ULTIMO <link> del <head>, despues
   de style.css / listings.css / blog.css y de los <style> inline. Por eso
   casi nada necesita !important.

   DEUDA CONOCIDA (leerla antes de tocar el chasis): esto es una COPIA de
   la carcasa del Worker. Si cambia layout() en functions/_shared/_render.ts,
   este fichero NO se entera solo. Volver a correr _tools/unify_shell.py
   despues de re-extraer la carcasa viva.
   ================================================================== */

/* ---------- 1. Tokens del chasis ---------- */
:root{
  --paper:#FFFDF9;--cream:#F6F1E8;--ink:#211E19;--slate:#1C2228;--slate2:#242C34;
  --ocre:#D9A441;--terra:#B44E2C;--terra-dark:#96401F;--line:#E4DACB;--white:#fff;

  /* ---------- 2. Remapeo de los tokens del diseno viejo ----------
     El contenido de las 143 paginas usa estas variables. Reapuntandolas
     se re-viste TODO el cuerpo sin editar una sola linea de su HTML.
     Verde #0a7e6c y naranja #e07b1f desaparecen de la red por aqui. */
  --primary:#B44E2C;
  --primary-dark:#96401F;
  --primary-light:#C86438;
  --accent:#D9A441;
  --accent-hover:#C08F32;
  --dark:#211E19;
  --text:#211E19;
  --muted:#6E6558;
  --border:#E4DACB;
  --bg-light:#F6F1E8;
  --bg-dark:#1C2228;
  --star:#D9A441;

  /* El chasis es plano: 4px, no pastillas de 14/20px. */
  --radius-sm:3px;
  --radius:4px;
  --radius-lg:6px;

  /* Ancho del chasis. El viejo era 1180. */
  --max-w:1080px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Oswald','Arial Narrow',sans-serif;
}

/* ---------- 3. Base ---------- */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  padding-top:0;      /* el chasis NO tiene header sticky */
}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.disp{font-family:'Oswald','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.01em}
.serif{font-family:'Fraunces',Georgia,serif}
.hp{position:absolute;left:-9999px;top:-9999px}

/* ---------- 4. Header ---------- */
header.site{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:5}
header.site .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.site-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{font-family:'Oswald',sans-serif;font-size:1.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--terra)}
.brand::after{content:"";display:block;width:44px;height:4px;background:var(--ocre);margin-top:2px}
.nav-main{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav-main a{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);text-decoration:none}
.nav-main a:hover{color:var(--terra);text-decoration:none}
header.site .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;position:static}
header.site .nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease;margin:0 auto}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{position:fixed;inset:0;background:rgba(18,22,26,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity .28s ease}
.nav-backdrop[hidden]{display:none}
body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
/* El cajon movil quedaba DEBAJO del velo: header.site crea contexto de apilado
   con z-index:5, asi que el 60 del drawer es relativo a ese 5. Se sube el header. */
body.nav-open header.site{z-index:70}

/* Selector de idioma (dropdown propio, sin select nativo) */
.lang-dd{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);padding:7px 11px;font:inherit;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);cursor:pointer}
.lang-btn:hover{border-color:var(--terra);color:var(--terra)}
.lang-btn .chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .15s ease}
.lang-dd.open .lang-btn .chev{transform:rotate(-135deg);margin-top:3px}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 30px rgba(28,34,40,.18);min-width:170px;z-index:50;list-style:none;margin:0;padding:6px 0}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;font-size:.85rem;color:var(--ink);text-decoration:none}
.lang-menu a:hover{background:var(--cream);color:var(--terra);text-decoration:none}
.lang-menu a.on{font-weight:700;color:var(--terra)}
.lang-menu a.on::after{content:"";display:inline-block;width:7px;height:7px;background:var(--ocre)}

/* CTA de suscripcion */
.sub-cta{background:var(--terra);color:var(--white);border:0;padding:9px 16px;font:inherit;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;border-radius:0}
.sub-cta:hover{background:var(--terra-dark)}

/* ---------- 5. Breadcrumbs ---------- */
nav.crumbs{font-size:.78rem;color:var(--muted);padding:12px 0;text-transform:uppercase;letter-spacing:.08em;background:none;border:0;margin:0}
nav.crumbs a{color:var(--muted);text-decoration:none}
nav.crumbs a:hover{color:var(--terra)}
nav.crumbs span[aria-current]{color:var(--ink);font-weight:600}
/* Cuando el breadcrumb cuelga directo de <main> o de <body> se auto-centra
   al ancho del chasis (dentro de un .container ya lo hereda). */
main>nav.crumbs,body>nav.crumbs,main>article>nav.crumbs{max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}

/* ---------- 6. Footer ---------- */
footer.site{border-top:4px solid var(--slate);background:var(--slate);color:#C9CFD6;padding:44px 0 0;margin-top:40px}
footer.site .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
footer.site a{text-decoration:none}
.f-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px}
.f-brand{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:1.25rem;margin-bottom:10px;color:var(--white)}
.f-brand span{color:var(--ocre)}
.f-tag{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:.92rem;color:#AEB6BF;margin-bottom:16px;max-width:34ch}
.f-h{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#9AA4AF;margin-bottom:12px}
.f-h::before{content:"";display:inline-block;width:8px;height:8px;background:var(--ocre);margin-right:9px}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col li{margin-bottom:9px}
.f-col a{color:#C9CFD6;font-size:.86rem}
.f-col a:hover{color:var(--white)}
footer.site .sub-cta{margin-top:2px}
.f-bottom{border-top:1px solid #333C46;padding:18px 0 22px}
.f-disc{font-size:.76rem;color:#8E98A3;max-width:100ch;margin-bottom:10px}
.f-legalline{font-size:.74rem;color:#8E98A3}
@media(max-width:860px){.f-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-cols{grid-template-columns:1fr}}

/* ---------- 7. Movil: drawer del chasis ---------- */
@media(max-width:560px){
  .site-inner{padding-top:12px;padding-bottom:12px}
}
@media(max-width:760px){
  .site-inner{flex-wrap:nowrap}
  header.site .nav-toggle{display:flex}
  .nav-main{
    position:fixed;top:0;right:0;height:100dvh;width:min(84vw,320px);
    background:var(--paper);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;flex-wrap:nowrap;
    padding:70px 0 28px;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:-10px 0 44px rgba(0,0,0,.28);z-index:60;overflow-y:auto;
  }
  body.nav-open{overflow:hidden}
  body.nav-open .nav-main{transform:none}
  .nav-main>a{padding:17px 24px;font-size:.92rem;border-bottom:1px solid var(--line)}
  .nav-main .sub-cta{margin:20px 24px 6px;text-align:center;padding:15px;font-size:.82rem}
  .nav-main .lang-dd{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}
  .nav-main .lang-btn{display:none}
  .nav-main .lang-menu,.nav-main .lang-menu[hidden]{position:static;display:block;box-shadow:none;border:0;min-width:0;margin:0;padding:0}
  .nav-main .lang-menu a{padding:13px 24px;font-size:.9rem}
  .nav-main .lang-menu::before{content:attr(data-lbl);display:block;padding:4px 24px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
}

/* ---------- 8. Modal de suscripcion (mismo del chasis) ---------- */
.sub-overlay{position:fixed;inset:0;background:rgba(18,22,26,.66);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sub-overlay[hidden]{display:none}
.sub-overlay:not([hidden]){animation:subfade .32s ease}
@keyframes subfade{from{opacity:0}to{opacity:1}}
.sub-box{background:var(--paper);max-width:760px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.42);position:relative;display:flex;overflow:hidden;border-radius:0}
.sub-overlay:not([hidden]) .sub-box{animation:subin .40s cubic-bezier(.2,.8,.2,1)}
@keyframes subin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.sub-img{flex:0 0 42%;position:relative;background:var(--slate);min-height:400px}
.sub-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sub-body{flex:1;padding:38px 36px 30px;display:flex;flex-direction:column}
.sub-box h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.9rem;line-height:1.12;letter-spacing:-.01em;margin-bottom:12px;color:var(--ink);text-transform:none}
.sub-box .sp-p{color:var(--muted);font-size:.95rem;line-height:1.55;margin-bottom:22px;max-width:none}
.sub-box form{display:flex;flex-direction:column;gap:12px}
.sub-box input[type=email]{width:100%;padding:13px 14px;border:1px solid var(--line);font:inherit;font-size:1rem;background:var(--paper);color:var(--ink)}
.sub-box input[type=email]:focus{outline:none;border-color:var(--terra)}
.sub-box button.go{background:var(--terra);color:var(--white);border:0;padding:14px 22px;font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;cursor:pointer;transition:background .15s ease}
.sub-box button.go:hover{background:var(--terra-dark)}
.sub-box .terms{display:flex;gap:9px;align-items:flex-start;font-size:.76rem;line-height:1.4;color:var(--muted);margin-top:2px}
.sub-box .terms input{margin-top:2px;flex:none}
.sub-box .terms a{color:var(--terra)}
.sub-box .x{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.85);border:0;width:30px;height:30px;border-radius:50%;font-size:1.3rem;line-height:1;color:var(--ink);cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.sub-box .x:hover{background:var(--white);color:var(--terra)}
.sub-box .msg{font-size:.86rem;margin-top:4px;display:none}
.sub-box .msg.on{display:block}
.sub-box .msg.ok{color:#2E6B3A}
.sub-box .msg.err{color:var(--terra-dark)}
@media(max-width:620px){.sub-img{display:none}.sub-box{max-width:440px}.sub-body{padding:34px 26px 26px}.sub-box h2{font-size:1.6rem}}

/* ==================================================================
   9. TIPOGRAFIA del cuerpo: Oswald en H1/H2, Fraunces en H3.
   Solo cambia la FAMILIA y el caso, nunca el texto ni la jerarquia.
   ================================================================== */
h1,h2{font-family:'Oswald','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
h1{font-weight:700;line-height:1.02;font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-weight:600;line-height:1.1;font-size:clamp(1.4rem,3vw,2rem)}
h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:0;color:var(--ink);text-transform:none}
/* Excepciones: titulos DENTRO de tarjetas y de la UI siguen en Inter, que es
   donde el serif se lee como un cambio de contenido y no de estilo. */
.product-card__body h3,.blog-card-title,.filters h3,.footer-col h5,
.ha-c-h,.faq-question,.attraction-sidebar h3{font-family:'Inter',-apple-system,sans-serif;text-transform:none;letter-spacing:-.01em;font-weight:700}
.product-card__body h3 a{color:var(--ink)}

/* Barra ocre bajo los H2 de prosa, como el chasis. Solo en cuerpos de texto. */
.article-body>h2::after,.attraction-section>h2::after{content:"";display:block;width:38px;height:4px;background:var(--ocre);margin-top:8px}

/* ==================================================================
   10. Detalles de paleta que el remapeo de tokens no alcanza
   ================================================================== */
/* Etiquetas y pildoras: el generador viejo escribia el color EN LINEA
   (style="--tag-color:#16a085"), un arcoiris de 12 verdes y azules que no
   existen en el chasis. !important gana al inline porque el inline no lo lleva. */
[style*="--tag-color"],.tag{--tag-color:var(--terra)!important}
[style*="--cat-color"],.cat-pill,.category-hero h1{--cat-color:var(--ocre)!important}
.tag-green{--tag-color:var(--ocre)!important}
.cat-pill{border-radius:0;background:var(--cream);color:var(--ink)}
.cat-pill:hover{background:var(--line)}
.cat-pill--active{background:var(--terra)!important;color:var(--white)!important}

/* Panel editorial de categoria: gris azulado + borde azul -> crema + ocre. */
.category-editorial,.category-intro{
  max-width:1080px;background:var(--cream)!important;border:0!important;
  border-left:4px solid var(--ocre)!important;border-radius:0!important;padding:20px 24px}
.category-editorial p,.category-intro p{color:var(--ink)!important}
.category-faqs>h2{color:var(--ink)!important}
.category-faqs details{border-bottom-color:var(--line)!important}
.category-faqs summary{color:var(--ink)!important}
.category-faqs summary::before{color:var(--terra)!important}
.category-faqs details p{color:var(--muted)!important}

/* Estrellas y distintivos: amarillo Tailwind, verdes y azules -> ocre/terra. */
.stars{color:var(--ocre)!important}
.badge-icon{color:var(--terra)!important}
.badge-green{background:var(--cream)!important;color:var(--terra)!important}
.badge-duration,.badge-price,.badge-crowd{background:var(--cream)!important;color:var(--ink)!important;border-radius:0!important}
.feature-badge{border-radius:0}

/* Marcadores de posicion de imagen: degradados verde azulados -> slate. */
.tour-img,.tour-img-1,.tour-img-2,.tour-img-3{
  background-image:linear-gradient(135deg,var(--slate) 0%,var(--slate2) 100%)!important}

/* Botones: planos y en Oswald, como .fcta del chasis. */
.btn{border-radius:var(--radius-sm)}
.btn-primary{background:var(--terra);color:var(--white);box-shadow:none;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.btn-primary:hover{background:var(--terra-dark);box-shadow:none}

/* Verde WhatsApp y azul Telegram fuera de la paleta: se neutralizan a slate.
   Se hace en los DOS sitios donde aparecen, la barra de compartir del cuerpo y
   la burbuja flotante, o el sitio queda con dos verdes distintos discutiendo.
   Llevan !important porque el bloque de la burbuja es un <style> dentro del
   <body>, que en la cascada va despues de este <link> del <head>. */
.share-wa,.share-tg{background:var(--slate)!important;color:var(--white)!important}
.share-wa:hover,.share-tg:hover{background:var(--terra)!important}
.fab-wa,.fab-tg{background:var(--slate)!important}
.fab-share__toggle{background:var(--terra)!important;box-shadow:0 6px 20px rgba(180,78,44,.42)!important}
.fab-share__toggle:hover{box-shadow:0 8px 24px rgba(180,78,44,.55)!important}
.fab-share--open .fab-share__toggle{background:var(--slate)!important;box-shadow:0 6px 20px rgba(28,34,40,.45)!important}

/* Barra pegajosa de reserva: azul marino que no esta en la paleta -> slate. */
.ha-sticky{background:rgba(28,34,40,.97)!important}
.gyg-tip-x{background:var(--slate)!important}

/* Acordeones FAQ: el <style> inline de las 99 fichas trae grises de Tailwind. */
.attraction-faq .faq-acc{border-top-color:var(--line)!important}
.attraction-faq .faq-acc details{border-bottom-color:var(--line)!important}
.attraction-faq .faq-acc summary{color:var(--ink)!important;font-family:'Inter',sans-serif}
.attraction-faq .faq-acc summary::after{color:var(--muted)!important}
.attraction-faq .faq-acc .faq-acc-a{color:var(--muted)!important}

/* Popup de conversion heredado: se re-viste, no se toca su HTML. */
#ha-popup,.ha-popup-card{border-radius:var(--radius-lg)!important}
.ha-c-img{background-color:var(--slate)!important}
.ha-c-cta{background:var(--terra)!important;color:var(--white)!important;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em}
.ha-c-cta:hover{background:var(--terra-dark)!important}

/* Bloque de disclosure de afiliado del pie viejo, dentro del pie nuevo. */
footer.site .f-disc.aff{color:#8E98A3}

/* ==================================================================
   11. ANCHOS. El diseno viejo tenia 1180 en --max-w y 1200 escrito a
   mano en once contenedores que la variable no alcanza. El chasis es
   1080 con 20px de aire, y esto los baja todos.
   ================================================================== */
.product-grid,
.category-hero,
.category-nav,
.tours-hero,
.attraction-page,
.dest-hero,
.dest-categories,
.dest-featured,
.category-faqs,
.category-page .attraction-section,
.article-container,
.disclaimer-affiliate{max-width:1080px;margin-left:auto;margin-right:auto}
.category-hero,.tours-hero,.dest-hero,.category-nav,.category-faqs,
.category-page .attraction-section{padding-left:20px;padding-right:20px}
@media(max-width:560px){
  .category-hero,.tours-hero,.dest-hero,.category-nav,.category-faqs,
  .category-page .attraction-section{padding-left:16px;padding-right:16px}
}


/* === ajustes responsive de /activities/ (27-ago-2026) === */
/* El panel de filtros solo se queda fijo en escritorio. En movil, pegado, flotaba sobre las
   tarjetas al hacer scroll y tapaba el contenido. */
@media (max-width: 820px) {
  .filters { position: static !important; top: auto !important; padding: 12px 16px; }
  .layout { grid-template-columns: 1fr !important; }
}
/* La fila de actividad no puede ser mas ancha que su contenedor: en 375px se salia por la
   derecha y el boton quedaba cortado. */
@media (max-width: 640px) {
  .row { grid-template-columns: 84px 1fr !important; gap: 10px; padding: 12px; }
  .row .act { grid-column: 1 / -1; justify-self: stretch; }
  .row .act a { display: block; text-align: center; }
  .row h2 { font-size: 1rem; line-height: 1.3; }
  .row .meta { font-size: .8rem; }
  .row img, .row .noimg { width: 84px; height: 60px; }
}
.row h2, .row .meta { overflow-wrap: anywhere; }
html, body { overflow-x: hidden; }

/* Causa REAL del desbordamiento en movil de /activities/: un hijo de grid tiene min-width:auto
   por defecto, asi que `main` no encogia por debajo del ancho de su contenido y se salia 36px
   del contenedor (.layout medido en 335, main en 371). No era el padding ni el box-sizing. */
.layout > main, .layout > aside { min-width: 0; }
.row img { max-width: 100%; }
