/* ============================================================
   LANDING — PolloStok (Rosario)
   Concepto: "Brasas contemporáneas, sabor de barrio".
   Alterna bloques carbón (hero, carta, servicios, contacto) con
   bloques crema (destacados, historia, cómo pedir).
   Elemento firma (uno solo): LA PINCELADA naranja, tomada de las
   placas de Instagram del local. Vive detrás de "brasas" en el H1
   y detrás de los precios de los destacados. En ningún otro lado.
   Tokens: assets/estilos.css (se carga antes que este archivo).
   ============================================================ */

html{scroll-behavior:smooth}
.app{max-width:none; background:var(--bg-1)}
[id]{scroll-margin-top:84px}
.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(18px,4vw,44px)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
img{max-width:100%}
[hidden]{display:none!important}
/* estilos.css trae una landing mínima de la Base (.hero, .promo, .estado-msg):
   se neutraliza lo que choca con este diseño. */
.hero{padding:0}
main{padding:0}
.hero p{margin:0}
.promo{border:none}

/* ---------- Elemento firma: la pincelada ---------- */
/* La mancha es la que entregó el cliente (imagenes/pincelada.png): trazo de rodillo
   seco con su propia inclinación, así que acá NO se rota ni se recolorea.
   Va como FONDO del propio span, no como un ::before que se desborda: el fondo
   se recorta a la caja, así que nunca puede pisar la línea de arriba ni la de
   abajo (con el pseudo-elemento, el span armaba su propia capa y se dibujaba
   encima del resto del título). El aire lo da el padding, no el desborde.
   Se usa mancha3 (17/09/2026): el trazo llena casi toda la imagen y los bordes
   irregulares quedan pegados al bloque, así que alcanza con un padding chico y
   la mancha no se mete en la línea de arriba. */
.pincel{display:inline-block; color:var(--accent-ink); line-height:1;
  padding:.16em .28em .2em; margin-block:-.14em; white-space:nowrap;
  background:no-repeat center/100% 100% url("../imagenes/pincelada.png?v=2")}

.nw{white-space:nowrap}

/* ---------- Botones ---------- */
.btn-ps{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px;
  padding:12px 24px; border-radius:var(--r-md); background:var(--accent); color:var(--accent-ink);
  font-family:var(--f-display); font-weight:800; font-size:19px; letter-spacing:.03em; text-transform:uppercase;
  transition:background .18s ease, transform .12s ease; border:2px solid var(--accent)}
.btn-ps:hover{background:var(--accent-3); border-color:var(--accent-3)}
.btn-ps:active{transform:scale(.985)}
.btn-ps.linea{background:transparent; color:var(--tx-osc-1); border-color:rgba(255,253,248,.42)}
.btn-ps.linea:hover{border-color:var(--tx-osc-1); background:rgba(255,253,248,.06)}
.btn-ps.linea-clara{background:transparent; color:var(--tx-1); border-color:var(--tx-1)}
.btn-ps.linea-clara:hover{background:var(--tx-1); color:var(--bg-0)}
.btn-ps svg{flex:none}
.link-ps{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:15px;
  border-bottom:2px solid var(--accent); padding-bottom:2px; transition:gap .18s ease}
.link-ps:hover{gap:11px}

/* ---------- Títulos de sección ---------- */
.eyebrow{font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2); margin:0 0 10px}
.oscura .eyebrow, .hero .eyebrow{color:var(--accent)}
.hero .eyebrow{margin:0 0 14px}
.h2{font-family:var(--f-display); font-weight:800; text-transform:uppercase; line-height:.95;
  font-size:clamp(38px,5.6vw,64px); letter-spacing:.005em; margin:0; max-width:18ch}
.bajada-sec{font-size:clamp(15.5px,1.6vw,17.5px); color:var(--tx-2); max-width:56ch; margin:14px 0 0}
.oscura .bajada-sec{color:var(--tx-osc-2)}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(64px,9vw,112px)}
.crema{background:var(--bg-1); color:var(--tx-1)}
.blanca{background:var(--bg-0); color:var(--tx-1)}
.oscura{position:relative; background:var(--ink-1); color:var(--tx-osc-1); isolation:isolate}
.carbon{background:var(--ink-0)}
/* Grano muy sutil sobre los oscuros: que el negro se sienta a hollín, no a pantalla */
.oscura::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.07; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Barra superior ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:40; color:var(--tx-osc-1);
  transition:background .25s ease, box-shadow .25s ease}
.nav.solida{background:rgba(17,16,14,.94); box-shadow:0 1px 0 rgba(255,253,248,.08);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.nav-in{display:flex; align-items:center; gap:22px; height:76px}
.nav .marca img{height:clamp(38px,5vw,48px); width:auto; display:block}
.nav .links{display:none; gap:24px; margin-left:auto; font-size:14.5px; font-weight:600}
.nav .links a{color:rgba(255,253,248,.8); padding:6px 0; border-bottom:2px solid transparent;
  transition:color .16s, border-color .16s}
.nav .links a:hover{color:var(--tx-osc-1); border-bottom-color:var(--accent)}
.nav .pedir{margin-left:auto; min-height:44px; padding:8px 16px; font-size:16.5px}
.nav .menu-btn{display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:var(--r-md); border:1px solid rgba(255,253,248,.3); color:var(--tx-osc-1); flex:none}
.nav .menu-btn .x{display:none}
.nav.abierto .menu-btn .x{display:block} .nav.abierto .menu-btn .h{display:none}
.menu-movil{display:none; background:var(--ink-0); border-top:1px solid rgba(255,253,248,.08)}
.nav.abierto{background:var(--ink-0)}
.nav.abierto .menu-movil{display:block}
.menu-movil a{display:block; padding:15px clamp(18px,4vw,44px); font-family:var(--f-display);
  font-weight:700; font-size:24px; text-transform:uppercase; letter-spacing:.02em;
  border-bottom:1px solid rgba(255,253,248,.07)}
.menu-movil a:hover{color:var(--accent)}
@media(min-width:960px){
  .nav .links{display:flex}
  .nav .links + .pedir{margin-left:6px}
  .nav .menu-btn, .menu-movil{display:none!important}
}
@media(max-width:420px){ .nav .pedir .largo{display:none} }

/* ---------- Hero ---------- */
.hero{position:relative; min-height:clamp(560px,88svh,820px); display:flex; align-items:flex-end;
  background:var(--ink-0); color:var(--tx-osc-1); overflow:hidden; isolation:isolate}
/* El <picture> es una caja posicionada del tamaño del hero: sin esto queda por encima
   del texto en el orden de pintado y se come los clics de los botones (la foto en sí no
   se ve arriba porque el <img> va con z-index:-2, pero la caja igual atrapa el mouse). */
.hero picture, .hero picture img{position:absolute; inset:0; width:100%; height:100%}
.hero picture, .franja picture{z-index:-2; pointer-events:none}
.hero picture img{object-fit:cover; object-position:62% 50%; z-index:-2}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(17,16,14,.94) 0%, rgba(17,16,14,.78) 34%, rgba(17,16,14,.18) 68%, rgba(17,16,14,0) 100%),
    linear-gradient(180deg, rgba(17,16,14,.55) 0%, rgba(17,16,14,0) 26%, rgba(17,16,14,0) 62%, rgba(17,16,14,.85) 100%)}
/* Marco fino de la placa de Instagram: un solo uso, acá. */
.hero .marco{position:absolute; inset:clamp(12px,2vw,22px); top:calc(76px + 6px);
  border:1px solid rgba(255,253,248,.28); pointer-events:none; z-index:-1}
/* ---------- Humo del hero ---------- */
/* Va ENCIMA de la foto y del velo, pero DEBAJO del texto (el contenido sube a z-index 1).
   Son dos PNG con alfa que se mueven con transform y opacity (GPU): sin filtros en vivo,
   que en celulares se sienten. Recorrido largo y lineal, como corresponde a un loop de
   fondo; nada de easing con "carácter" acá. */
.humo{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  mix-blend-mode:screen;
  /* El humo vive sobre la foto y el fuego, a la derecha: se enmascara para que no
     aclare la zona del texto, que es donde se juega la legibilidad. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 56%, rgba(0,0,0,.35) 70%, #000 86%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 56%, rgba(0,0,0,.35) 70%, #000 86%)}
.humo i{position:absolute; display:block; width:150%; height:130%; left:-25%; top:-15%;
  /* Las texturas van como MÁSCARA de un color plano cálido: así el PNG solo necesita el
     canal de opacidad (pesa una fracción de lo que pesaría en color) y el tono del humo
     se decide acá. */
  background-color:#fff3e0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:cover; mask-size:cover;
  -webkit-mask-position:center; mask-position:center;
  will-change:transform}
.humo .h1{opacity:.36;
  -webkit-mask-image:url("../imagenes/humo-1.png"); mask-image:url("../imagenes/humo-1.png");
  animation:humo-a 30s linear infinite alternate}
.humo .h2{opacity:.25;
  -webkit-mask-image:url("../imagenes/humo-2.png"); mask-image:url("../imagenes/humo-2.png");
  animation:humo-b 44s linear infinite alternate}
@keyframes humo-a{
  from{transform:translate3d(-16%, 6%, 0) scale(1.0)}
  to  {transform:translate3d(16%, -9%, 0) scale(1.3)}}
@keyframes humo-b{
  from{transform:translate3d(18%, -5%, 0) scale(1.28)}
  to  {transform:translate3d(-16%, 8%, 0) scale(1.0)}}
/* En celular alcanza una capa: menos trabajo para la GPU y el humo igual se lee */
@media(max-width:600px){ .humo .h2{display:none} .humo .h1{opacity:.3}
  .humo{-webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 72%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 72%)} }

.hero-in{position:relative; z-index:1; width:100%; padding-block:130px clamp(44px,7vw,80px)}
.hero-txt{max-width:660px}
.hero h1{font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(50px,8.4vw,104px); line-height:1; letter-spacing:.004em; margin:0}
/* Interlineado un pelín más suelto que el resto de los títulos: los pelitos de la
   pincelada necesitan ese aire para no rozar la línea de arriba. */
.hero h1 .pincel{margin-block:-.12em}
.hero .bajada{font-size:clamp(16px,1.9vw,19px); color:rgba(255,253,248,.84); max-width:44ch;
  margin:22px 0 0!important; line-height:1.5}
.hero-acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.pruebas{display:flex; flex-wrap:wrap; gap:6px 22px; margin:30px 0 0; padding:0; list-style:none;
  font-size:14.5px; font-weight:600; color:rgba(255,253,248,.86)}
.pruebas li{display:flex; align-items:center; gap:8px}
.pruebas li::before{content:""; width:7px; height:7px; background:var(--accent); transform:rotate(45deg); flex:none}
@media(max-width:600px){
  .hero{align-items:flex-end}
  .hero picture img{object-position:64% 50%}
  .hero::after{background:
    linear-gradient(180deg, rgba(17,16,14,.6) 0%, rgba(17,16,14,.12) 28%, rgba(17,16,14,.72) 56%, rgba(17,16,14,.97) 100%)}
  .hero-acciones .btn-ps{width:100%}
}

/* ---------- Barra de información ---------- */
.datos{background:var(--ink-0); color:var(--tx-osc-1); border-top:1px solid rgba(255,253,248,.08)}
.datos-in{display:grid; grid-template-columns:1fr 1fr; gap:0}
.datos .item{display:flex; flex-direction:column; gap:8px; padding:20px 14px 22px 0; min-height:44px}
.datos .item:nth-child(2n){padding-left:16px; border-left:1px solid rgba(255,253,248,.09)}
.datos .item:nth-child(n+3){border-top:1px solid rgba(255,253,248,.09)}
.datos svg{color:var(--accent)}
.datos .k{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-osc-2); font-weight:700}
.datos .v{font-family:var(--f-display); font-weight:700; font-size:clamp(19px,2vw,23px); line-height:1.1; letter-spacing:.01em}
.datos .estado{font-size:12.5px; color:var(--tx-osc-2); display:flex; align-items:center; gap:6px}
.datos a.item:hover .v{color:var(--accent)}
@media(min-width:860px){
  .datos-in{grid-template-columns:repeat(4,1fr)}
  .datos .item{padding:26px 22px 28px}
  .datos .item:first-child{padding-left:0}
  .datos .item + .item{border-left:1px solid rgba(255,253,248,.09); border-top:none}
}

/* ---------- Destacados ---------- */
.cabecera{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 40px}
.grilla-dest{display:grid; grid-template-columns:1fr; gap:18px; margin-top:38px}
/* Celular: carrusel manual con snap (sin autoplay), para que la lista no sea eterna */
@media(max-width:559px){
  .grilla-dest{grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * clamp(18px,4vw,44px)); padding:4px clamp(18px,4vw,44px) 14px;
    scroll-padding-inline:clamp(18px,4vw,44px); scrollbar-width:none}
  .grilla-dest::-webkit-scrollbar{display:none}
  .plato{scroll-snap-align:start}
  .plato:hover{transform:none}
  .pasos{gap:22px}
  .pasos li::before{font-size:50px}
}
@media(min-width:560px){ .grilla-dest{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .grilla-dest{grid-template-columns:repeat(4,1fr)} }
.plato{display:flex; flex-direction:column; background:var(--bg-0); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1); transition:box-shadow .2s ease, transform .2s ease}
.plato:hover{box-shadow:var(--sh-2); transform:translateY(-3px)}
.plato .media{aspect-ratio:4/3; background:var(--ink-2)}
.plato .media img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.plato:hover .media img{transform:scale(1.04)}
/* Sin foto: placeholder de marca (la cara del logo en tono), nunca una foto engañosa */
.plato .media.ph{display:grid; place-items:center; background:var(--ink-1)}
.plato .media.ph img{width:34%; height:auto; opacity:.5; object-fit:contain}
.plato .cuerpo{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1}
.plato .cat{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3)}
.plato .nom{font-family:var(--f-display); font-weight:700; font-size:23px; line-height:1.02; margin-top:5px}
.plato .desc{font-size:14px; color:var(--tx-2); margin-top:7px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.plato .pie-plato{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:16px}
.plato .precio{font-family:var(--f-display); font-weight:800; font-size:24px; letter-spacing:.01em}
.plato .ver{font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:5px; color:var(--tx-1)}
.plato:hover .ver{color:var(--accent-2)}

.promos{display:grid; gap:14px; margin:0 0 56px}
@media(min-width:720px){ .promos{grid-template-columns:repeat(2,1fr)} }
.promo{background:var(--ink-1); color:var(--tx-osc-1); border-radius:var(--r-lg); padding:22px 24px}
.promo .et{font-family:var(--f-display); font-weight:700; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent)}
.promo strong{display:block; font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,3vw,34px); line-height:.98; margin-top:6px}
.promo span.tx{display:block; color:var(--tx-osc-2); margin-top:8px; font-size:15px}

.estado-msg{color:var(--tx-2); padding:26px 0; margin:0; text-align:left}
.oscura .estado-msg{color:var(--tx-osc-2)}

/* ---------- La carta: índice tipo pizarra ---------- */
.indice{list-style:none; margin:40px 0 0; padding:0; border-top:1px solid rgba(255,253,248,.14)}
.indice li{border-bottom:1px solid rgba(255,253,248,.14)}
.indice a{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 20px;
  padding:clamp(16px,2.2vw,24px) 4px; transition:padding .2s ease, color .16s}
.indice .nom-cat{font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,4.4vw,52px); line-height:.95; letter-spacing:.005em}
.indice .meta{grid-column:1; font-size:14px; color:var(--tx-osc-2)}
.indice .meta b{color:var(--tx-osc-1); font-weight:700}
.indice .flecha{grid-row:1/span 2; grid-column:2; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(255,253,248,.28); transition:background .18s, border-color .18s, color .18s}
.indice a:hover .nom-cat{color:var(--accent)}
.indice a:hover .flecha{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
@media(min-width:760px){
  .indice a{grid-template-columns:1fr auto auto}
  .indice .meta{grid-column:2; grid-row:1; text-align:right}
  .indice .flecha{grid-column:3; grid-row:1}
}
.cierre{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:38px}
.cierre .nota{font-size:14.5px; color:var(--tx-osc-2); max-width:44ch}

/* ---------- Historia ---------- */
.historia{display:grid; gap:clamp(30px,5vw,64px); align-items:center}
@media(min-width:900px){ .historia{grid-template-columns:1fr 1fr} }
.historia .foto{position:relative; margin:0}
.historia .foto img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-lg)}
.historia .foto::after{content:""; position:absolute; inset:12px; border:1px solid rgba(255,253,248,.5);
  border-radius:calc(var(--r-lg) - 6px); pointer-events:none}
.historia p{font-size:clamp(16px,1.6vw,18px); color:var(--tx-2); line-height:1.6; margin:18px 0 0; max-width:52ch}
.historia .link-ps{margin-top:26px}

/* ---------- Servicios: lista, no grilla de cards ---------- */
.servicios{list-style:none; margin:40px 0 0; padding:0}
.servicios li{display:grid; gap:10px 36px; padding:26px 0; border-top:1px solid rgba(255,253,248,.14)}
.servicios li:last-child{border-bottom:1px solid rgba(255,253,248,.14)}
.servicios h3{font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,3vw,34px); line-height:1; margin:0}
.servicios p{margin:0; color:var(--tx-osc-2); font-size:16px; max-width:46ch}
.servicios .link-ps{color:var(--tx-osc-1); justify-self:start}
@media(min-width:860px){
  .servicios li{grid-template-columns:minmax(260px,1fr) 1.3fr auto; align-items:center}
}

/* ---------- Cómo pedir: secuencia real, por eso lleva números ---------- */
.pasos{list-style:none; margin:42px 0 0; padding:0; display:grid; gap:30px; counter-reset:paso}
@media(min-width:820px){ .pasos{grid-template-columns:repeat(3,1fr); gap:40px} }
.pasos li{counter-increment:paso; border-top:3px solid var(--tx-1); padding-top:18px}
.pasos li::before{content:counter(paso); display:block; font-family:var(--f-display); font-weight:800;
  font-size:64px; line-height:.9; color:var(--accent-2)}
.pasos h3{font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:28px; margin:10px 0 6px}
.pasos p{margin:0; color:var(--tx-2); font-size:15.5px; max-width:34ch}

/* ---------- Franja de brasas ---------- */
.franja{position:relative; isolation:isolate; overflow:hidden; color:var(--tx-osc-1); text-align:center;
  padding-block:clamp(90px,14vw,170px); background:var(--ink-0)}
.franja picture, .franja picture img{position:absolute; inset:0; width:100%; height:100%}
.franja picture img{object-fit:cover; object-position:50% 45%; z-index:-2}
.franja::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(17,16,14,.42) 0%, rgba(17,16,14,.78) 70%, rgba(17,16,14,.9) 100%)}
.franja .h2{margin-inline:auto; max-width:14ch; font-size:clamp(44px,7vw,88px)}
.franja p{font-size:18px; color:rgba(255,253,248,.86); margin:16px 0 30px}

/* ---------- Contacto ---------- */
.contacto{display:grid; gap:clamp(34px,5vw,70px)}
@media(min-width:900px){ .contacto{grid-template-columns:1.1fr 1fr} }
.contacto .dir{font-family:var(--f-display); font-weight:700; font-size:clamp(26px,3vw,34px); margin:22px 0 0; line-height:1.05}
.contacto .dir small{display:block; font-family:var(--f-body); font-weight:500; font-size:15px; color:var(--tx-osc-2); margin-top:6px}
.tabla{margin:0; padding:0}
.tabla .fila{display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid rgba(255,253,248,.12)}
.tabla .fila:first-child{border-top:1px solid rgba(255,253,248,.12)}
.tabla dt{color:var(--tx-osc-2); font-size:15px}
.tabla dd{margin:0; font-weight:700; font-size:15.5px; text-align:right}
.tabla dd a:hover{color:var(--accent)}
.contacto .hero-acciones{margin-top:30px}
.contacto h3{font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:26px; margin:0 0 14px}

/* ---------- Pie ---------- */
.pie{background:var(--ink-0); color:var(--tx-osc-2); padding-block:48px 34px; font-size:14px}
.pie-in{display:grid; gap:30px}
.pie .logo-pie{height:46px; width:auto}
.pie nav{display:flex; flex-wrap:wrap; gap:10px 22px; font-weight:600; color:var(--tx-osc-1)}
.pie nav a:hover, .pie .nap a:hover{color:var(--accent)}
.pie .nap{line-height:1.7}
.pie .legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px;
  border-top:1px solid rgba(255,253,248,.1); padding-top:22px; font-size:13px}
.pie .legal a{color:var(--tx-osc-1)}
@media(min-width:860px){ .pie-in{grid-template-columns:auto 1fr auto; align-items:start} .pie .legal{grid-column:1/-1} }

/* ---------- Barra fija mobile ---------- */
.barra-movil{position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(17,16,14,.96);
  border-top:1px solid rgba(255,253,248,.1); transform:translateY(110%); transition:transform .3s cubic-bezier(.22,1,.36,1)}
.barra-movil.show{transform:translateY(0)}
.barra-movil .btn-ps{flex:1; min-height:48px; font-size:17px; padding:10px}
@media(min-width:960px){ .barra-movil{display:none} }
@media(max-width:959px){ .pie{padding-bottom:100px} }

:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}