/* Contrada UGC · estilos del portafolio. Requiere ../tokens.css.
   ── Bloques 0–13: copia FIEL del sistema Contrada (base.css + demo/styles.css).
   ── Bloques 14+: secciones propias del portafolio UGC, construidas con el mismo
      vocabulario (Oswald 700 uppercase, salvia/ink/crema, carets, pills, 2px gaps).
      No se introduce ningún color, fuente ni radio fuera del sistema.
   Sin ilustraciones de línea: el sistema pide una ilustración de autor por cliente,
   y un dibujo genérico de plato/taza es justo lo que el filtro anti-plantilla veta. */

/* ============ 0 · BASE (de componentes/base.css) ============ */
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}

:root{ --nav-h: 4.5rem; }

/* El nav es position:fixed → toda sección ancla reserva su alto para que el nav
   no tape el título al saltar por el menú. (Lección del sistema Editorial.) */
section[id]{scroll-margin-top:var(--nav-h)}

/* ============ 1 · NAV STICKY ============
   Estado 1 (sobre hello): transparente, color = accent-text.
   Estado 2 (past-hello, JS): bg crema translúcido + blur + color ink. */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:var(--p-2);padding:.9rem var(--pad-x);height:var(--nav-h);color:var(--accent-text);background:transparent;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease)}
.site-nav.past-hello{background:rgba(254,248,221,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);box-shadow:0 1px 0 rgba(0,70,50,.08)}
.site-nav .nav-brand{font-family:var(--f-display);font-weight:700;font-size:1.5rem;line-height:1;text-transform:uppercase;letter-spacing:.02em;color:inherit;text-decoration:none;transition:color var(--dur-hover) var(--ease)}
.site-nav .nav-links{display:flex;align-items:center;gap:1.4rem;list-style:none;margin:0;padding:0}
.site-nav .nav-links a{font-family:var(--f-text);font-size:1rem;font-weight:400;color:inherit;text-decoration:none;transition:opacity var(--dur-hover) var(--ease)}
.site-nav .nav-links a:hover{opacity:.65}
.site-nav .nav-links a.is-current{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1rem}
.site-nav .nav-toggle{display:none;width:44px;height:44px;padding:0;background:transparent;border:none;color:inherit;cursor:pointer;align-items:center;justify-content:center}
.site-nav .nav-toggle span{display:block;width:24px;height:2px;background:currentColor;position:relative}
.site-nav .nav-toggle span::before,.site-nav .nav-toggle span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform var(--dur-hover) var(--ease),top var(--dur-hover) var(--ease)}
.site-nav .nav-toggle span::before{top:-7px}
.site-nav .nav-toggle span::after{top:7px}
body.nav-open{overflow:hidden}
body.nav-open .site-nav .nav-toggle span{background:transparent}
body.nav-open .site-nav .nav-toggle span::before{top:0;transform:rotate(45deg)}
body.nav-open .site-nav .nav-toggle span::after{top:0;transform:rotate(-45deg)}

/* Overlay mobile menu */
.nav-overlay{position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--salvia);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
body.nav-open .nav-overlay{opacity:1;pointer-events:auto}
.nav-overlay a{font-family:var(--f-display);font-weight:700;font-size:2.25rem;line-height:1;text-transform:uppercase;color:var(--salvia);text-decoration:none;transition:color var(--dur-hover) var(--ease)}
.nav-overlay a:hover{color:var(--bg)}
.nav-overlay .nav-overlay-social{display:flex;gap:1rem;margin-top:var(--p-2)}
.nav-overlay .nav-overlay-social a{font-size:1.5rem}

/* Toggle de idioma en el nav (solo sale si el sitio es bilingüe) */
.nav-lang{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-display);font-weight:400;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:inherit}
.nav-lang button{font:inherit;color:inherit;background:none;border:none;padding:0 .1rem;cursor:pointer;opacity:.55;transition:opacity var(--dur-hover) var(--ease)}
.nav-lang button.is-on{opacity:1;font-weight:700}
.nav-lang .sep{opacity:.4}

/* ============ 2 · BIENVENIDA (signature primario) ============ */
.hello{position:fixed;inset:0;background:var(--accent-bg);color:var(--accent-text);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:98;transition:transform .1s linear;padding:var(--nav-h) var(--pad-x) 0}
.hello-name{font-family:var(--f-display);font-weight:700;font-size:12.5rem;line-height:1;text-transform:uppercase;margin:0;text-align:center}
.hello-role{font-family:var(--f-display);font-weight:400;font-size:1.5rem;text-transform:uppercase;letter-spacing:.32em;margin:.4rem 0 0;opacity:.9}
.hello-sub{position:absolute;bottom:var(--p-3);left:0;right:0;text-align:center;font-family:var(--f-text);font-size:1rem;color:inherit;opacity:.85;letter-spacing:.04em}
.hello-spacer{height:100vh;pointer-events:none}

/* ============ 3 · HERO · retrato centrado + banda de métricas por detrás ============
   La banda es el signature secundario del sistema (track duplicado que anima
   translateX(-50%) y entra/sale a sangre), pero en vez del nombre lleva las
   métricas. El track repite el juego de métricas hasta doblar el ancho de la
   pantalla: nunca puede verse un hueco vacío. */
.hero{position:relative;min-height:100vh;padding:var(--p-4) var(--pad-x) var(--p-3);display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}
.metric-band{position:absolute;top:50%;left:0;width:100vw;transform:translateY(-50%);color:var(--salvia);pointer-events:none;user-select:none;overflow-x:hidden;overflow-y:visible;z-index:0}
/* padding-bottom = el sitio que ocupan las etiquetas, que van fuera del flujo */
.metric-track{display:flex;align-items:flex-start;gap:6rem;width:max-content;padding-bottom:3.6rem;animation:wordmark-slide 54.5s linear infinite}
.metric-track.is-reverse{animation-direction:reverse}
/* La segunda cinta solo existe en móvil (ver el bloque de ≤479px) */
.metric-band--abajo{display:none}
/* Cada métrica: la cifra grande y, debajo, la etiqueta en cuerpo pequeño. */
/* El ancho de cada bloque lo marca la CIFRA, nunca la etiqueta: si no, una
   métrica con cifra corta y etiqueta larga («46» + «Marcas de hostelería y
   alimentación») ensancha su bloque y rompe el ritmo — los huecos alternaban
   86 y 98 px en escritorio y 40 y 49 en móvil.
   La etiqueta va en posición absoluta, colgada bajo su cifra: así no cuenta
   para el ancho del bloque y puede ser más ancha o más estrecha que él sin
   mover nada. El hueco que necesita se reserva con el padding de la pista. */
.metric-item{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.metric-value{font-family:var(--f-display);font-weight:700;font-size:12rem;line-height:1;text-transform:uppercase;white-space:nowrap}
/* La unidad va pegada a la cifra: el espacio normal de Oswald (~.26em) abre
   demasiado a este cuerpo. Se separa en un span para poder ajustarlo. */
.metric-unit{margin-left:.1em}
.metric-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.35rem;width:22ch;font-family:var(--f-text);font-weight:400;font-size:1.05rem;line-height:1.35;opacity:.9}
@keyframes wordmark-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .metric-track { animation: none; } }

/* Retrato: hasta tres fotos apiladas; el JS enciende una y las demás se apagan,
   así que el cambio es un fundido y no un salto. Con una sola foto no pasa nada. */
.hero-portrait{position:relative;z-index:1;width:min(420px,34vw);aspect-ratio:4/5;overflow:hidden}
.hero-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-portrait img.is-on{opacity:1}
@media (prefers-reduced-motion: reduce){ .hero-portrait img{transition:none} }

/* Wordmark clásico (se mantiene en el footer) */
.wordmark{position:absolute;top:50%;left:0;width:100vw;font-family:var(--f-display);font-weight:700;font-size:18.75rem;line-height:1.2;text-transform:uppercase;color:var(--salvia);transform:translateY(-50%);pointer-events:none;user-select:none;overflow-x:hidden;overflow-y:visible}
/* 80s, no los 45 del sistema original: aquí las letras son enormes y con 45s la
   cinta corría a 125 px/s —el triple que la de métricas y el doble que las de
   marcas—. A 80s va a ~70 px/s, la misma cadencia que las cintas de marcas, que
   es lo que toca en una marca de agua de fondo. */
.wordmark-track{display:flex;gap:.35em;width:max-content;animation:wordmark-slide 80s linear infinite;line-height:1.2}
.wordmark-track > span{white-space:nowrap;flex:0 0 auto;padding-block:.02em}
@media (prefers-reduced-motion: reduce) { .wordmark-track { animation: none; } }

/* ============ 4 · MARQUEE HORIZONTAL ============ */
.marquee{background:var(--salvia);color:var(--ink);padding:var(--p-3) 0;overflow:hidden}
.marquee.on-green{background:var(--ink);color:var(--salvia)}
.marquee-track{display:flex;gap:var(--p-4);align-items:center;animation:marquee var(--dur-marquee) linear infinite;width:max-content}
/* Las dos cintas corren en sentidos opuestos */
.marquee-track.is-reverse{animation-direction:reverse}
.marquee-item{font-family:var(--f-display);font-weight:700;font-size:9rem;line-height:1;text-transform:uppercase;flex:0 0 auto}
.marquee-sep{width:6rem;height:6rem;flex:0 0 auto;overflow:hidden;border-radius:50%;background:var(--bg)}
.marquee-sep img{width:100%;height:100%;object-fit:cover}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ============ 5 · MANIFIESTO (bloque verde · nombre interno "manifiesto") ============ */
.manifest{background:var(--ink);color:var(--salvia);padding:var(--p-6) var(--pad-x);position:relative;overflow:hidden}
.manifest-inner{display:grid;grid-template-columns:1fr;gap:var(--p-4);align-items:center}
.manifest-text{margin:0 auto;font-family:var(--f-display);font-weight:700;font-size:3.5rem;line-height:1.15;text-transform:uppercase;color:var(--salvia);max-width:22ch;text-align:center}
.manifest-close{display:block;margin-top:var(--p-2);font-family:var(--f-display);font-style:italic;font-weight:700;font-size:3.5rem;color:var(--salvia)}

/* ============ 6 · BOUTIQUE SPLIT ============ */
.boutique{padding:var(--p-6) var(--pad-x);display:grid;grid-template-columns:1fr 1.2fr;gap:var(--p-4);align-items:center}
.boutique-media{aspect-ratio:1/1.2;overflow:hidden}
.boutique-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.boutique:hover .boutique-media img{transform:scale(1.02)}
.boutique-text h2{margin:0 0 var(--p-2);font-family:var(--f-display);font-weight:700;font-size:5rem;line-height:1;text-transform:uppercase;color:var(--salvia)}
.boutique-text p{margin:0 0 var(--p-2);font-family:var(--f-text);font-size:1.125rem;line-height:1.65;color:var(--ink);max-width:52ch}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-weight:400;font-size:1.67rem;text-transform:uppercase;color:var(--ink);background:var(--salvia);border:none;padding:1.39rem 3rem;text-decoration:none;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease);cursor:pointer;border-radius:var(--radius-pill)}
.btn:hover{background:var(--ink);color:var(--salvia)}

/* ============ 7 · WALL OF LOVE ============
   Las palabras de fondo van en % del alto de la sección para que sigan repartidas
   cuando el JS estira el bloque según lo largas que sean las reseñas. */
/* min-height, no height fija: con pocas reseñas el bloque encoge hasta aquí y
   las palabras de fondo siguen teniendo sitio; con muchas, el JS lo estira. */
.wall{position:relative;padding:var(--p-9) var(--pad-x);min-height:70vh;overflow:hidden}
.wall-word{position:absolute;font-family:var(--f-display);font-weight:700;line-height:1;text-transform:uppercase;color:var(--salvia);pointer-events:none;user-select:none;z-index:0}
.wall-word.w1{top:2%;left:0;font-size:16rem}
.wall-word.w2{top:38%;left:50%;transform:translateX(-50%);font-size:22rem}
.wall-word.w3{top:74%;right:0;font-size:18rem}

/* ============ 8 · PÁGINA INTERIOR: page-hero ============ */
.page-hero{padding:var(--p-6) var(--pad-x) var(--p-4);text-align:center}
.page-hero h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:8rem;line-height:1;text-transform:uppercase;color:var(--salvia)}
.page-hero .subtitle{margin:var(--p-2) auto 0;font-family:var(--f-text);font-size:1.125rem;color:var(--ink);max-width:52ch;line-height:1.6}

/* ============ 9 · LOCALE-CARD GRID (paleta propia por tarjeta) ============ */
/* La rejilla se adapta a CUÁNTAS tarifas haya (LIMITS.rates = 6). Con dos
   columnas fijas, 1 · 3 · 5 dejaban media rejilla vacía en la última fila.
   Las consultas de cantidad lo resuelven sin JS; si el navegador no soporta
   :has(), se queda en las dos columnas de siempre. */
.locales-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:0}
/* Solo en escritorio: por debajo de 992px la rejilla ya cae a una columna, y
   estas reglas tienen más especificidad que la del media query — sin acotarlas
   se colaban en tablet y partían las tarjetas en tres columnas de 250px. */
@media (min-width:992px){
  .locales-grid:has(> :last-child:nth-child(1)){grid-template-columns:1fr}
  .locales-grid:has(> :last-child:nth-child(3)),
  .locales-grid:has(> :last-child:nth-child(6)){grid-template-columns:repeat(3,1fr)}
  /* Con cinco, la última ocupa el ancho de las dos columnas en vez de dejar hueco */
  .locales-grid:has(> :last-child:nth-child(5)) > :last-child{grid-column:span 2}
  /* En tres columnas el nombre necesita menos cuerpo para no salirse */
  .locales-grid:has(> :last-child:nth-child(3)) .locale-card-name,
  .locales-grid:has(> :last-child:nth-child(6)) .locale-card-name{font-size:4.5rem}
}
.locale-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--p-3);padding:var(--p-3);min-height:60vh;background:var(--card-bg,var(--salvia));color:var(--card-text,var(--ink));text-decoration:none;overflow:hidden;transition:transform var(--dur-hover) var(--ease)}
.locale-card:hover{transform:scale(1.005)}
.locale-card::after{content:"›";position:absolute;bottom:var(--p-3);right:var(--p-3);font-family:var(--f-display);font-weight:400;font-size:5rem;line-height:.6;transition:transform var(--dur-hover) var(--ease)}
.locale-card:hover::after{transform:translateX(8px)}
.locale-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--p-2);z-index:1;position:relative}
.locale-card-index{font-family:var(--f-display);font-weight:400;font-size:1rem;letter-spacing:.08em;opacity:.7}
.locale-card-city{font-family:var(--f-text);font-size:1rem;letter-spacing:.04em}
.locale-card-name{margin:0;font-family:var(--f-display);font-weight:700;font-size:6rem;line-height:.9;text-transform:uppercase;z-index:1;position:relative}
.locale-card-price{font-family:var(--f-display);font-weight:700;font-size:2.5rem;line-height:1;text-transform:uppercase;z-index:1;position:relative}
.locale-card-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem;font-family:var(--f-text);font-size:.95rem;line-height:1.45;z-index:1;position:relative;max-width:82%}
.locale-card-list li{display:flex;gap:.5em}
.locale-card-list li::before{content:"—";opacity:.6;flex:0 0 auto}

/* ============ 10 · LOCAL-HERO (contacto sobre salvia) ============
   Va sobre el mismo verde claro que el bloque de cierre que lo precede, así que
   los dos leen como una sola superficie. De paso queda más fiel al sistema, que
   reserva el par acento para la pantalla de bienvenida y no para el resto. */
.local-hero{position:relative;padding:var(--p-6) var(--pad-x) var(--p-4);background:var(--salvia);color:var(--ink);overflow:hidden;min-height:70vh;display:flex;flex-direction:column;justify-content:flex-end}
.local-hero-inner{position:relative;z-index:1}
/* El eco: la misma palabra, más grande y al 18%, montada sobre el titular —
   arranca un poco a la izquierda y por encima para que se lea como repetición,
   no como un segundo rótulo suelto. */
.local-hero-title{position:relative;display:inline-block}
.local-hero-title .local-wordmark{position:absolute;left:-.04em;bottom:.18em;font-family:var(--f-display);font-weight:700;font-size:17rem;line-height:.85;text-transform:uppercase;color:inherit;opacity:.18;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
.local-hero-title h2{position:relative;z-index:1}
.local-hero h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:12rem;line-height:.9;text-transform:uppercase}
/* Los canales van sobre el propio color, separados por una hairline del mismo
   texto — sin franja beige de por medio. */
.contact-channels{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--p-4);margin-top:var(--p-4);padding-top:var(--p-3)}
.contact-channels h3{margin:0 0 var(--p-1);font-family:var(--f-display);font-weight:700;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.contact-channels p{margin:0;font-family:var(--f-text);font-size:1.125rem;line-height:1.8}
/* Sin subrayado en reposo: los datos siguen siendo enlaces y se marcan al pasar
   por encima, que es donde hace falta la señal. */
.contact-channels a{color:inherit;text-decoration:none;transition:opacity var(--dur-hover) var(--ease)}
.contact-channels a:hover{opacity:.7;text-decoration:underline;text-underline-offset:3px}

/* ============ 11 · CARTA (menu-page) ============ */
.menu-page{padding:var(--p-6) var(--pad-x) var(--p-9);display:grid;grid-template-columns:1fr 2fr;gap:var(--p-6);align-items:start;background:var(--bg)}
.menu-side{position:sticky;top:calc(var(--nav-h) + var(--p-2));display:flex;flex-direction:column;gap:var(--p-2)}
.menu-side h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:5rem;line-height:.95;text-transform:uppercase;color:var(--ink)}
.menu-side p{margin:0;font-family:var(--f-text);font-size:1rem;color:var(--ink);opacity:.75;line-height:1.55;max-width:32ch}
.menu-nav{list-style:none;margin:var(--p-2) 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.menu-nav a{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-display);font-weight:700;font-size:1.5rem;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:gap var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.menu-nav a:hover{gap:.8em;color:var(--accent-bg)}
.menu-body{display:flex;flex-direction:column;gap:var(--p-5)}
.menu-cat{border-top:1.5px solid var(--ink);scroll-margin-top:calc(var(--nav-h) + var(--p-2))}
.menu-cat h3{margin:var(--p-2) 0 var(--p-3);font-family:var(--f-display);font-weight:700;font-size:3rem;line-height:1;text-transform:uppercase;color:var(--ink)}
.menu-row{display:grid;grid-template-columns:1fr auto;gap:var(--p-2);padding:var(--p-1) 0;border-top:1px solid rgba(0,70,50,.15)}
.menu-row:last-child{border-bottom:1px solid rgba(0,70,50,.15)}
.menu-row-info h4{margin:0 0 .25rem;font-family:var(--f-display);font-weight:700;font-size:1.5rem;text-transform:uppercase}
.menu-row-info p{margin:0;font-family:var(--f-text);font-size:1rem;color:var(--ink);opacity:.8;line-height:1.5}
.menu-row-price{font-family:var(--f-display);font-weight:700;font-size:1.5rem;color:var(--ink);white-space:nowrap;align-self:start}

/* ============ 12 · CIERRE ============ */
.close-block{background:var(--salvia);color:var(--ink);padding:var(--p-9) var(--pad-x);text-align:center}
.close-block h2{margin:0 auto;font-family:var(--f-display);font-weight:700;font-size:5rem;line-height:1.1;text-transform:uppercase;max-width:22ch}

/* ============ 13 · FOOTER ============
   Solo dos cosas: la cinta del nombre y la firma. Sin enlaces ni iconos, así que
   la altura la fija el propio bloque para que la cinta tenga aire, y la firma se
   ancla abajo — si no, quedaría pisada por la cinta como pasaba antes. */
.footer{background:var(--ink);color:var(--salvia);padding:var(--p-6) var(--pad-x);position:relative;overflow:hidden;min-height:38rem;display:flex;flex-direction:column;justify-content:flex-end}
.footer .wordmark{color:var(--salvia);top:42%}
.footer-legal{position:relative;z-index:1;text-align:center;font-family:var(--f-text);font-size:.9rem;opacity:.7;margin:0}
/* Firma de Soshally: discreta, un escalón por debajo del copyright del creator. */
.footer-made{position:relative;z-index:1;text-align:center;font-family:var(--f-text);font-size:.8rem;opacity:.45;margin:.5rem 0 0}
.footer-made a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:opacity var(--dur-hover) var(--ease)}
.footer-made a:hover{opacity:.7}

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUES PROPIOS DEL PORTAFOLIO UGC
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- 14 · Banner a sangre (foto de sección) ---- */
.banner{height:70vh;overflow:hidden}
.banner img{width:100%;height:100%;object-fit:cover}

/* ---- 15 · Grid de fotos: pill salvia con el pie + foto ---- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:0}
.shot{display:flex;flex-direction:column;background:var(--bg)}
.shot-cap{background:var(--salvia);color:var(--ink);padding:.9rem var(--p-1);font-family:var(--f-display);font-weight:700;font-size:1.05rem;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease);min-height:3.4rem;display:flex;align-items:center}
.shot:hover .shot-cap{background:var(--ink);color:var(--salvia)}
.shot-media{aspect-ratio:4/5;overflow:hidden}
.shot-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.shot:hover .shot-media img{transform:scale(1.03)}

/* ---- 16 · Chips de categoría de vídeo (tope: se fijan bajo el nav) ---- */
.cats{position:sticky;top:var(--nav-h);z-index:40;display:flex;flex-wrap:wrap;gap:.5rem;padding:var(--p-1) var(--pad-x);background:var(--bg);border-bottom:1.5px solid var(--ink)}
.cat{font-family:var(--f-display);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:var(--radius-pill);padding:.45rem 1rem;cursor:pointer;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.cat:hover{background:var(--salvia)}
.cat.is-on{background:var(--ink);color:var(--salvia)}

/* ---- 17 · Reel de vídeos 9:16 · reproducen en su propio hueco ---- */
.reel{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:0}
.clip{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--ink);border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;text-align:left;width:100%}
.clip img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.clip:hover img{transform:scale(1.04)}
/* `contain`, no `cover`: el máster del creator puede venir apaisado y recortarle
   su propio trabajo sería peor que dejar dos bandas verde bosque a los lados. */
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink);z-index:2}
.clip-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:.9rem var(--p-1);background:linear-gradient(to top,rgba(0,70,50,.88),rgba(0,70,50,0));color:var(--salvia);transition:opacity var(--dur-hover) var(--ease)}
.clip.is-playing .clip-meta{opacity:0}
.clip-brand{font-family:var(--f-display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.clip-views{font-family:var(--f-text);font-size:.85rem;opacity:.85}
.clip-play{position:absolute;top:var(--p-1);left:var(--p-1);z-index:3;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--salvia);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:1rem;opacity:0;transform:scale(.85);transition:opacity var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
.clip:hover .clip-play{opacity:1;transform:scale(1)}
.clip.is-playing .clip-play{opacity:0}

/* ---- 18 · Reseñas del Wall of Love ----
   El reparto disperso lo genera el app.js a partir de CUÁNTAS reseñas haya: con
   posiciones fijas en el CSS solo funcionaba con siete exactas (con cuatro se
   amontonaban arriba, con doce se pisaban entre ellas). Aquí vive solo el
   aspecto; la posición y el ancho los pone el JS. */
.wall-quote{position:absolute;background:var(--bg);padding:var(--p-1);box-shadow:0 4px 12px rgba(0,70,50,.08);z-index:1;border:1.5px solid var(--ink);margin:0}
.wall-quote blockquote{margin:0 0 .9rem;font-family:var(--f-text);font-size:1rem;line-height:1.6;color:var(--ink)}
.wall-quote footer{font-family:var(--f-display);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.wall-quote footer span{display:block;font-family:var(--f-text);font-weight:400;font-size:.85rem;text-transform:none;letter-spacing:0;opacity:.7;margin-top:.15rem}

/* ============ TABLET (≤ 991px) ============ */
@media (max-width:991px){
  :root{ --pad-x: var(--p-2); --nav-h: 4rem; }
  .site-nav{padding:.75rem var(--pad-x)}
  .hello-name{font-size:6rem}
  .hello-role{font-size:1.05rem;letter-spacing:.24em}
  .hero{min-height:80vh;padding:calc(var(--nav-h) + var(--p-2)) var(--pad-x) var(--p-3)}
  .metric-track{gap:4rem;padding-bottom:3.6rem}
  .metric-value{font-size:7rem}
  .metric-label{font-size:1rem;width:20ch}
  .hero-portrait{width:min(340px,62vw)}
  .wordmark{font-size:14rem}
  .shots{grid-template-columns:repeat(2,1fr)}
  .reel{grid-template-columns:repeat(3,1fr)}
  .marquee-item{font-size:6rem}
  .marquee-sep{width:4rem;height:4rem}
  .manifest-text{font-size:2.5rem}
  .manifest-close{font-size:2.5rem}
  .boutique{grid-template-columns:1fr;gap:var(--p-3)}
  .boutique-text h2{font-size:3rem}
  .wall-word.w1{font-size:8rem}
  .wall-word.w2{font-size:12rem}
  .wall-word.w3{font-size:9rem}
  .close-block h2{font-size:3rem}
  .footer{min-height:34rem}
  .page-hero h2{font-size:5rem}
  .locales-grid{grid-template-columns:1fr}
  .locale-card-name{font-size:4rem}
  .local-hero h2{font-size:7rem}
  .local-hero-title .local-wordmark{font-size:10rem}
  .contact-channels{grid-template-columns:1fr;gap:var(--p-2)}
  .menu-page{grid-template-columns:1fr;gap:var(--p-3);padding:var(--p-4) var(--pad-x) var(--p-6)}
  .menu-side{position:static}
  .menu-side h2{font-size:4rem}
  .menu-cat h3{font-size:2.25rem}
}

/* ============ HAMBURGER ============
   El sistema original pasa a botón en ≤767px porque su nav tiene 5 enlaces. Un
   portafolio lista 8 secciones + el toggle de idioma y ya no caben a 768px con la
   escala congelada (medido: 819px de contenido en 753px de nav). Se adelanta al
   mismo corte donde el sistema congela la escala (991px), sin inventar breakpoint. */
@media (max-width:991px){
  .site-nav .nav-links{display:none}
  .site-nav .nav-toggle{display:inline-flex}
}

/* ============ MOBILE (≤ 479px) ============ */
@media (max-width:479px){
  :root{ --pad-x: 1.25rem; --nav-h: 3.5rem; }
  .site-nav{padding:.6rem var(--pad-x);height:var(--nav-h)}
  .site-nav .nav-brand{font-size:1.125rem}
  .nav-overlay a{font-size:2rem}
  .hello{padding-top:var(--nav-h)}
  .hello-name{font-size:5rem}
  .hello-role{font-size:.85rem;letter-spacing:.2em}
  /* En móvil las métricas NO pasan por detrás de la foto: se parten en dos
     cintas, una encima y otra debajo, corriendo en sentidos opuestos. El hero
     pierde el padding lateral para que las dos sangren de borde a borde. */
  .hero{min-height:100vh;padding:calc(var(--nav-h) + var(--p-2)) 0 var(--p-3);justify-content:center;gap:var(--p-2)}
  .metric-band{position:static;transform:none;width:100%}
  .metric-band--abajo{display:block}
  .metric-track{gap:3.5rem;padding-bottom:4.6rem}
  .metric-value{font-size:4rem}
  /* Ancho fijo y legible aunque la cifra sea de dos dígitos: al ir en absoluto,
     sobresalir del bloque no descoloca nada. */
  .metric-label{font-size:.9rem;width:8.5rem}
  .hero-portrait{width:min(280px,76vw)}
  .wordmark{font-size:8rem}
  .banner{height:44vh}
  .shots{grid-template-columns:1fr;gap:1px}
  .shot-cap{font-size:.95rem;min-height:0}
  .cats{padding:.75rem var(--pad-x);gap:.4rem;justify-content:center}
  .cat{font-size:.8rem;padding:.35rem .7rem}
  .reel{grid-template-columns:repeat(2,1fr);gap:1px}
  .clip-meta{padding:.6rem .7rem;flex-direction:column;align-items:flex-start;gap:.1rem}
  .clip-brand{font-size:.85rem}
  /* Marcas ocupa la pantalla entera y su contenido queda centrado en ella */
  #brands{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
  #brands .page-hero{padding-top:0}
  .marquee{padding:var(--p-2) 0}
  .marquee-item{font-size:3.5rem}
  .marquee-sep{width:2.5rem;height:2.5rem}
  .marquee-track{gap:var(--p-2)}
  .manifest{padding:var(--p-4) var(--pad-x)}
  .manifest-text{font-size:1.6rem}
  .manifest-close{font-size:1.6rem}
  .boutique{padding:var(--p-4) var(--pad-x)}
  .boutique-text h2{font-size:2.25rem}
  .btn{font-size:.95rem;padding:.9rem 1.75rem}
  /* Wall of love: en móvil el layout absoluto se apila (regla del sistema).
     El JS detecta este ancho y no toca los estilos en línea. */
  .wall{padding:var(--p-4) var(--pad-x) var(--p-5);min-height:auto}
  .wall-word{display:none}
  .wall-quote{position:relative!important;top:auto!important;left:auto!important;width:100%!important;margin:0 0 var(--p-2);padding:.9rem}
  .wall-quote:nth-of-type(even){margin-left:auto;margin-right:0;max-width:88%}
  .wall-quote:nth-of-type(odd){margin-right:auto;margin-left:0;max-width:88%}
  .close-block{padding:var(--p-4) var(--pad-x)}
  .close-block h2{font-size:1.75rem}
  .footer{padding:var(--p-4) var(--pad-x);min-height:23rem}
  .footer .wordmark{font-size:8rem}
  .page-hero{padding:calc(var(--nav-h) + var(--p-3)) var(--pad-x) var(--p-3)}
  .page-hero h2{font-size:3.25rem}
  .page-hero .subtitle{font-size:.95rem}
  .locales-grid{gap:1px}
  .locale-card{padding:var(--p-2);min-height:44vh}
  .locale-card-name{font-size:3rem}
  .locale-card-price{font-size:2rem}
  .locale-card-list{max-width:100%;font-size:.9rem}
  .locale-card::after{font-size:3rem;bottom:var(--p-2);right:var(--p-2)}
  .local-hero{padding:calc(var(--nav-h) + var(--p-3)) var(--pad-x) var(--p-3);min-height:auto}
  .local-hero h2{font-size:4.5rem}
  .local-hero-title .local-wordmark{font-size:6.4rem}
  .contact-channels p{font-size:1rem}
  .menu-page{padding:var(--p-3) var(--pad-x) var(--p-4);gap:var(--p-2)}
  .menu-side h2{font-size:2.5rem}
  .menu-nav a{font-size:1.125rem}
  .menu-cat h3{font-size:1.75rem}
  .menu-row-info h4{font-size:1.125rem}
  .menu-row-price{font-size:1.125rem}
}