/* Ibra & Company · propuesta 2026 (rama propuesta-2026)
   Dirección: docs/NORTE.md § PROPUESTA 2026 · columna Paput Menorca · color de las fotos del local.
   Movimiento: docs/DESIGN-DECISIONS.md (kit-motion E22). */

/* ---------- Letra: kit E20 r3-archivo (OFL, fonts/archivo/OFL.txt) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo/Archivo-wdth-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-stretch: 62% 100%;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+2009, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+202F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Archivo reserva";
  src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans");
  size-adjust: 98.5888%; ascent-override: 89.0567%; descent-override: 21.3006%; line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo titular reserva";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold");
  font-weight: 600 1000;
  size-adjust: 74.1671%; ascent-override: 118.3813%; descent-override: 28.3144%; line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* color: de las fotos del local (docs/paleta/ y NORTE) */
  --crema: #f5f2ec;          /* cuello del uniforme y blanco cálido de la pared */
  --crema-hondo: #ebe4d8;    /* superficie hundida, mismo tono */
  --cafe: #2a1a13;           /* polo del uniforme, oscurecido: tinta y pie */
  --cafe-suave: #5b4a42;     /* texto de apoyo sobre crema */
  --uniforme: #6d4235;       /* medido en el polo de Ibra: botones y acento */
  --uniforme-hondo: #573327; /* pasar el ratón */
  --linea: color-mix(in oklab, var(--cafe) 16%, transparent);
  --color-foco: #1f6f78;     /* turquesa de la pared, oscurecido: solo para el contorno de foco */

  --font-display: "Archivo", "Archivo titular reserva", sans-serif;
  --font-body: "Archivo", "Archivo reserva", sans-serif;

  --ancho: 76rem;
  --margen: max(1.25rem, (100% - var(--ancho)) / 2);
  --alto-cabecera: 4rem;
  --radio: 1.5rem;
  --tap: 2.75rem;

  /* kit-motion E22 · tokens-plano.css (valores sin tocar) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-hoja: cubic-bezier(.32, .72, 0, 1);
  --duration-pulsar: 160ms;
  --duration-hover: 150ms;
  --duration-icono: 200ms;
  --duration-acordeon: 250ms;
  --duration-panel: 400ms;
  --duration-panel-salida: 320ms;
  --duration-aparecer: 500ms;
  --duration-escalon: 90ms;
  --movimiento: 1;
  --recorrido-aparecer: 1.5rem;
  --recorrido-heroe: 1rem;
  --recorrido-panel: 100%;
  --escala-pulsar: .97;
}
@media (prefers-reduced-motion: reduce) {
  :root { --movimiento: 0; --recorrido-aparecer: 0px; --recorrido-heroe: 0px; --recorrido-panel: 0px; --escala-pulsar: 1; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-padding-top: calc(var(--alto-cabecera) + 1rem); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--crema); color: var(--cafe);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; font-weight: 400;
}
@media (width >= 64rem) { body { font-size: 1.1875rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .88; letter-spacing: -.005em; overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--cafe); color: var(--crema); padding: .75rem 1rem; border-radius: .5rem; }
.saltar:focus { top: .75rem; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: calc(300ms * var(--movimiento) + 1ms); animation-timing-function: var(--ease-in-out); }

/* ---------- Botón (kit-motion 02) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .75rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--uniforme); color: var(--crema);
  font: 700 1rem/1.1 var(--font-body); font-stretch: 100%; text-decoration: none; letter-spacing: .01em;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: scale calc(var(--duration-pulsar) * var(--movimiento)) var(--ease-out), background-color var(--duration-hover) ease;
}
.boton:active { scale: var(--escala-pulsar); }
@media (hover: hover) and (pointer: fine) { .boton:hover { background: var(--uniforme-hondo); } }
.boton--grande { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.125rem; }
.boton--crema { background: var(--crema); color: var(--uniforme); }
@media (hover: hover) and (pointer: fine) { .boton--crema:hover { background: #fff; } }
.boton--linea { background: transparent; color: var(--cafe); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) and (pointer: fine) { .boton--linea:hover { background: color-mix(in oklab, var(--cafe) 7%, transparent); } }
.boton svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem;
  block-size: var(--alto-cabecera); padding-inline: var(--margen);
  background: var(--crema); border-bottom: 1px solid var(--linea);
}
.marca { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; margin-inline-end: auto; }
.cabecera .boton, .marca b { white-space: nowrap; }
.marca b { font-family: var(--font-display); font-weight: 800; font-stretch: 62%; font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem); letter-spacing: .01em; text-transform: uppercase; }
.marca small { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cafe-suave); margin-top: .15rem; }
.menu-enlinea { display: none; }
.cabecera .boton { min-height: var(--tap); padding: .6rem 1.15rem; font-size: .95rem; }

/* Menú móvil (kit-motion 03) */
.menu-boton {
  flex: none;
  display: inline-grid; place-items: center; inline-size: var(--tap); block-size: var(--tap);
  border: 0; border-radius: .5rem; background: transparent; color: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: scale calc(var(--duration-pulsar) * var(--movimiento)) var(--ease-out);
}
.menu-boton:active { scale: var(--escala-pulsar); }
.menu-boton__icono { display: grid; inline-size: 1.4rem; block-size: 1rem; }
.menu-boton__icono > span {
  grid-area: 1 / 1; align-self: center; block-size: 2px; border-radius: 2px; background: currentColor;
  transition: translate calc(var(--duration-icono) * var(--movimiento)) var(--ease-in-out), rotate calc(var(--duration-icono) * var(--movimiento)) var(--ease-in-out), opacity var(--duration-icono) var(--ease-in-out);
}
.menu-boton__icono > span:nth-child(1) { translate: 0 -.45rem; }
.menu-boton__icono > span:nth-child(3) { translate: 0 .45rem; }
html:has(.menu-panel:popover-open) .menu-boton__icono > span:nth-child(1) { translate: 0 0; rotate: 45deg; }
html:has(.menu-panel:popover-open) .menu-boton__icono > span:nth-child(2) { opacity: 0; }
html:has(.menu-panel:popover-open) .menu-boton__icono > span:nth-child(3) { translate: 0 0; rotate: -45deg; }
.menu-panel {
  position: fixed; margin: 0; inset: var(--alto-cabecera) 0 0 0; inline-size: auto; block-size: auto;
  max-inline-size: none; max-block-size: none; border: 0;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--crema); color: var(--cafe); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; translate: var(--recorrido-panel) 0;
  transition-property: translate, opacity, display, overlay;
  transition-duration: var(--duration-panel-salida); transition-timing-function: var(--ease-hoja); transition-behavior: allow-discrete;
}
.menu-panel:popover-open { opacity: 1; translate: 0 0; transition-duration: var(--duration-panel); }
@starting-style { .menu-panel:popover-open { opacity: 0; translate: var(--recorrido-panel) 0; } }
.menu-panel ul { list-style: ""; margin: 0; padding: 0; display: grid; gap: .25rem; }
.menu-panel a { display: flex; align-items: center; min-block-size: 3.5rem; padding-inline: .25rem; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 2.4rem; line-height: 1; }
.menu-panel .boton { margin-top: 1.5rem; inline-size: 100%; font-family: var(--font-body); font-stretch: 100%; text-transform: none; font-size: 1.125rem; }
html:has(.menu-panel:popover-open) { overflow: hidden; }
@media (width >= 48rem) {
  .menu-boton { display: none; }
  .menu-enlinea { display: flex; gap: 1.75rem; list-style: ""; margin: 0 1rem 0 0; padding: 0; }
  .menu-enlinea a { text-decoration: none; font-weight: 600; font-size: 1rem; padding-block: .5rem; }
  .menu-enlinea a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
}

/* ---------- Portada (Paput · pantalla 1) ---------- */
.portada { position: relative; display: grid; isolation: isolate; min-block-size: clamp(34rem, calc(100svh - var(--alto-cabecera)), 60rem); color: var(--crema); overflow: clip; }
.portada > * { grid-area: 1 / 1; }
.portada__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 52%, rgb(28 16 11 / .7), rgb(28 16 11 / .34) 72%),
    linear-gradient(to top, rgb(28 16 11 / .55), rgb(28 16 11 / 0) 45%);
}
.portada__texto { place-self: center; display: grid; justify-items: center; text-align: center; gap: 1.5rem; padding: 3rem var(--margen); }
.portada__linea { font-weight: 700; font-size: clamp(1.1875rem, 1rem + .4vw, 1.375rem); letter-spacing: .02em; text-shadow: 0 1px 12px rgb(0 0 0 / .45); }
.portada h1 { font-size: clamp(4.75rem, 2rem + 9.5vw, 9.5rem); line-height: .84; text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
.portada h1 span { display: block; }

.portada h1 { animation: heroe-sube 700ms var(--ease-out) both; }
.portada__linea { animation: heroe-funde 500ms ease 400ms both; }
@keyframes heroe-sube { from { opacity: 0; translate: 0 var(--recorrido-heroe); } }
@keyframes heroe-funde { from { opacity: 0; } }

/* ---------- Quiénes: las tijeras cortan el titular (DESIGN-DECISIONS fila 9) ---------- */
.quienes { padding: clamp(3.5rem, 7vw, 6.5rem) var(--margen) clamp(2.5rem, 5vw, 4rem); overflow-x: clip; }
.cortado { position: relative; display: grid; color: var(--uniforme); font-size: clamp(3.5rem, 1.25rem + 8.2vw, 10.5rem); view-timeline: --corte block; }
.cortado__trozo { grid-area: 1 / 1; }
.cortado__trozo--arriba { clip-path: inset(0 0 calc(100% - .4em) 0); }
.cortado__trozo--abajo { clip-path: inset(.4em 0 0 0); transform-origin: 0 .4em; }
.cortado__linea { position: absolute; inset-inline: 0; top: .4em; border-top: .035em dashed var(--cafe-suave); opacity: 0; transform-origin: 100% 0; }
.cortado__carro { position: absolute; inset-inline: 0; top: .4em; block-size: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.cortado__carro .tijeras { flex: none; inline-size: .78em; block-size: .78em; translate: 0 -50%; color: var(--cafe); }
.cortado__pelos i { position: absolute; left: var(--x); top: .4em; inline-size: .2em; block-size: .03em; border-radius: 1em; background: var(--cafe); rotate: var(--g); opacity: 0; }
.tijeras__hoja { transform-box: view-box; transform-origin: 32px 32px; }

.quienes__cuerpo { display: grid; gap: 2.5rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.quienes__texto { display: grid; align-content: start; gap: 1.75rem; }
.quienes__texto p { max-width: 30em; font-size: clamp(1.125rem, 1rem + .45vw, 1.4rem); line-height: 1.5; }
.quienes__texto p strong { font-weight: 700; }
.sello {
  justify-self: start; display: inline-block; rotate: -6deg;
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.4rem); line-height: 1; color: var(--uniforme);
  padding: .5rem .9rem .45rem; border: 3px solid currentColor; border-radius: .6rem;
}
.quienes__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.5vw, 1.25rem); align-items: start; }
.quienes__fotos img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio); }
.quienes__fotos img:first-child { rotate: -2.5deg; }
.quienes__fotos img:last-child { rotate: 3deg; margin-top: 3rem; }
@media (width >= 56rem) {
  .quienes__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
}

/* ---------- Lo más pedido: tablero de letras colgado y polaroids (filas 10 y 11) ---------- */
.oferta { padding: clamp(2.5rem, 5vw, 4rem) var(--margen) clamp(3.5rem, 7vw, 6rem); overflow-x: clip; }
.puente { text-align: center; font-size: clamp(2.75rem, 1.75rem + 4vw, 5rem); }
.oferta__mesa { display: grid; gap: clamp(3rem, 6vw, 4.5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (width >= 56rem) { .oferta__mesa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); } }

.tablero {
  --cuerda: 3.25rem;
  position: relative; margin-top: var(--cuerda); justify-self: center; inline-size: min(100%, 34rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  color: #fbf8f2; border-radius: .5rem; border: .65rem solid var(--uniforme-hondo);
  background: repeating-linear-gradient(to bottom, #2a1a13 0 .55rem, #1d120d .55rem .62rem);
  box-shadow: 0 1.25rem 2.5rem -1rem rgb(42 26 19 / .45), inset 0 0 0 1px rgb(255 255 255 / .06);
  transform-origin: 50% calc(-1 * var(--cuerda));
}
.tablero__cuerda { position: absolute; left: 18%; inline-size: 64%; bottom: calc(100% + .65rem); block-size: calc(var(--cuerda) - .2rem); overflow: visible; }
.tablero__cuerda path { fill: none; stroke: var(--cafe); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tablero::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + var(--cuerda) - .2rem); inline-size: .9rem; block-size: .9rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9b8a8, #5b4a42 70%); box-shadow: 0 2px 3px rgb(0 0 0 / .3); }
.tablero p, .tablero li { font-family: var(--font-display); text-transform: uppercase; text-shadow: 0 1px 0 rgb(0 0 0 / .5); }
.tablero__cabeza { text-align: center; font-weight: 800; font-stretch: 75%; letter-spacing: .2em; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); line-height: 1; padding-bottom: .9rem; margin-bottom: .4rem; border-bottom: 2px dashed rgb(251 248 242 / .35); }
.tablero__lista { list-style: ""; margin: 0; padding: 0; }
.tablero__lista li { display: flex; align-items: baseline; gap: .6rem; padding-block: .55rem; font-weight: 700; font-stretch: 75%; letter-spacing: .07em; font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem); line-height: 1.05; }
.tablero__lista li::before { content: ""; order: 2; flex: 1; min-inline-size: 1rem; border-bottom: .14em dotted rgb(251 248 242 / .45); translate: 0 -.2em; }
.tablero__lista span { order: 1; }
.tablero__lista b { order: 3; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablero__falta { font-size: .62em; letter-spacing: .05em; }
.tablero__nota { margin-top: .9rem; font-size: .95rem; font-weight: 600; font-stretch: 85%; letter-spacing: .06em; line-height: 1.35; color: rgb(251 248 242 / .82); text-align: center; }

.polaroids { list-style: ""; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(.75rem, 2vw, 1.5rem); }
.polaroids > .polaroid:nth-child(2) { margin-top: 2.5rem; }
@media (width < 56rem) { .polaroids { row-gap: 2rem; } .polaroids > .polaroid:nth-child(3) { margin-top: 0 !important; } }
.polaroids > .polaroid:nth-child(3) { grid-column: 1 / -1; justify-self: center; inline-size: min(62%, 19rem); margin-top: -1.5rem; }
.polaroid figure {
  position: relative; margin: 0; padding: .6rem .6rem 1rem; background: #fffdf9;
  border-radius: .2rem; box-shadow: 0 .9rem 1.75rem -.6rem rgb(42 26 19 / .32), 0 1px 2px rgb(42 26 19 / .12);
  rotate: var(--giro);
  transition: rotate 320ms cubic-bezier(.34, 1.56, .64, 1), translate 320ms cubic-bezier(.34, 1.56, .64, 1), scale 320ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 320ms ease;
}
.polaroid img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroid figcaption { padding: .75rem .2rem 0; font-size: .9375rem; line-height: 1.3; color: var(--cafe-suave); }
.polaroid figcaption b { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 1.75rem; line-height: .95; color: var(--cafe); margin-bottom: .2rem; }
@media (hover: hover) and (pointer: fine) {
  .polaroid figure:hover { rotate: 0deg; translate: 0 -.6rem; scale: 1.05; z-index: 2; box-shadow: 0 1.6rem 2.5rem -.8rem rgb(42 26 19 / .4), 0 1px 2px rgb(42 26 19 / .12); }
}
@media (prefers-reduced-motion: reduce) { .polaroid figure { transition-duration: 0ms; } }
.oferta__pie { display: grid; justify-items: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---------- Interludio: dos cintas cruzadas (filas 7 y 13) ---------- */
.interludio { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); overflow: clip; }
.cinta { grid-area: 1 / 1; inline-size: 130%; rotate: -4deg; background: var(--uniforme); color: var(--crema); padding-block: clamp(.55rem, 1.1vw, .95rem); overflow: clip; box-shadow: 0 .5rem 1.25rem -.5rem rgb(42 26 19 / .35); }
.cinta--turquesa { rotate: 3.5deg; background: var(--color-foco); font-size: .62em; }
.cinta__pista { display: flex; inline-size: max-content; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem); line-height: 1; }
.cinta--turquesa .cinta__pista { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); }
.cinta__pista span { padding-inline: .35em; }
.cinta__pista span::after { content: "·"; padding-inline-start: .7em; }

/* ---------- Luces: el techo de hexágonos del local (fila 12) ---------- */
.luces { position: relative; isolation: isolate; display: grid; place-items: center; overflow: clip; background: var(--cafe); color: var(--crema); min-block-size: min(100svh, 50rem); padding: clamp(4.5rem, 9vw, 8rem) var(--margen); view-timeline: --luces block; }
.luces__techo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -1;
  stroke: #fff6e4; stroke-width: 6; stroke-linecap: round;
  -webkit-mask-image: radial-gradient(ellipse 62% 50% at 50% 56%, rgb(0 0 0 / .05) 45%, #000 100%); mask-image: radial-gradient(ellipse 62% 50% at 50% 56%, rgb(0 0 0 / .05) 45%, #000 100%); }
.luces::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgb(31 111 120 / .35), transparent 70%); }
.luces__dentro { position: relative; display: grid; justify-items: center; text-align: center; gap: 1.5rem; max-inline-size: 44rem; }
/* Foto de Ibra: tres marcos para elegir con ?ibra= (fila 27). Sin JS manda el de <html data-ibra>. */
.luces__foto { position: relative; inline-size: clamp(11rem, 18vw, 15rem); }
.ibra-tira { display: grid; }
.ibra-tira img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 20%; }
.ibra-tira .ibra-tira__otro, .ibra-tira__fin { display: none; }

/* A · Negativo: tira de 35 mm con Koke, Issam e Ibra; al bajar corre hasta dejar a Ibra en la ventana */
[data-ibra="negativo"] .luces__foto { --fw: clamp(9.5rem, 15vw, 12.5rem); --fh: calc(var(--fw) * 4 / 3); --hueco: .6rem; --orilla: 1.7rem;
  --ventana: calc(var(--fh) * 1.5);
  --fin: calc((var(--ventana) - var(--fh)) / 2 - 2 * var(--fh) - 3 * var(--hueco));
  --ini: calc(var(--fin) + 2 * (var(--fh) + var(--hueco)));
  inline-size: calc(var(--fw) + 2 * var(--orilla)); block-size: var(--ventana); overflow: clip;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
[data-ibra="negativo"] .ibra-tira { gap: var(--hueco); padding: var(--hueco) var(--orilla) 0; translate: 0 var(--fin);
  background: repeating-linear-gradient(to bottom, transparent 0 .62rem, rgb(255 244 222 / .92) .62rem 1.12rem) .5rem 0 / .62rem 100% no-repeat,
              repeating-linear-gradient(to bottom, transparent 0 .62rem, rgb(255 244 222 / .92) .62rem 1.12rem) calc(100% - .5rem) 0 / .62rem 100% no-repeat,
              #120c09; }
[data-ibra="negativo"] .ibra-tira img { block-size: var(--fh); border-radius: .2rem; }
[data-ibra="negativo"] .ibra-tira .ibra-tira__otro { display: block; filter: saturate(.7) brightness(.8); }
[data-ibra="negativo"] .ibra-tira__fin { display: block; block-size: calc(var(--fh) * .6); background: #241a14; border-radius: .2rem .2rem 0 0; }

/* B · Espejo: el espejo redondo de marco negro que se ve detrás de Ibra en la foto; un reflejo lo cruza al bajar */
[data-ibra="espejo"] .luces__foto { inline-size: clamp(12rem, 20vw, 16.5rem); aspect-ratio: 1; padding: .55rem; border-radius: 50%; overflow: clip; background: #120c09;
  box-shadow: 0 0 0 1px rgb(255 246 228 / .4), 0 0 4rem rgb(255 236 200 / .22), 0 1.5rem 3rem -1rem rgb(0 0 0 / .6); }
[data-ibra="espejo"] .ibra-tira, [data-ibra="espejo"] .ibra-tira img { block-size: 100%; border-radius: 50%; }
[data-ibra="espejo"] .ibra-tira img { object-position: 50% 12%; }
[data-ibra="espejo"] .luces__foto::after { content: ""; position: absolute; inset: .55rem; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 1.75rem rgb(0 0 0 / .45);
  background: linear-gradient(118deg, transparent 38%, rgb(255 255 255 / .42) 46%, rgb(255 255 255 / .12) 52%, transparent 60%) 0% 0 / 300% 100% no-repeat,
              radial-gradient(circle at 28% 20%, rgb(255 255 255 / .2), transparent 38%) 0 0 / 100% 100% no-repeat; }

/* C · Penumbra: sin marco; Ibra sale de la oscuridad del techo y los bordes de la foto se funden con el fondo */
@property --abre { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
[data-ibra="penumbra"] .luces__foto { inline-size: clamp(14rem, 24vw, 21rem); aspect-ratio: 3 / 4; }
[data-ibra="penumbra"] .ibra-tira { block-size: 100%; }
[data-ibra="penumbra"] .ibra-tira img { object-position: 50% 25%; filter: sepia(.18) contrast(1.06) brightness(.94);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 40%, #000 var(--abre), transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 40%, #000 var(--abre), transparent 100%); }
.luces h2 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.25rem); line-height: .9; text-shadow: 0 2px 24px rgb(42 26 19 / .9); }
.luces p { max-inline-size: 30em; font-size: clamp(1.125rem, 1rem + .4vw, 1.35rem); color: #efe8dd; text-shadow: 0 1px 12px rgb(42 26 19 / .9); }

.luces__dentro::before { content: ""; position: absolute; z-index: -1; inset: -3.5rem -5rem; background: rgb(42 26 19 / .95);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent), linear-gradient(transparent, #000 3rem, #000 calc(100% - 3rem), transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent), linear-gradient(transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-composite: intersect; }
@media (width < 40rem) { .luces__dentro::before { inset: -2.5rem calc(-1 * var(--margen)); background: rgb(42 26 19 / .96); -webkit-mask-image: linear-gradient(transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); } }

/* ---------- Locales: toldos (fila 14) y persianas (fila 24; solo se ven dentro de la escena) ---------- */
.persiana { display: none; }
.locales { padding: clamp(3.5rem, 7vw, 6rem) var(--margen); background: var(--crema-hondo); }
.locales .fija > h2 { text-align: center; font-size: clamp(3.25rem, 2rem + 5vw, 6.5rem); }
.locales__entrada { text-align: center; color: var(--cafe-suave); margin: 1rem auto 0; max-width: 34em; }
.locales__lista { display: grid; gap: 1.75rem; margin-top: clamp(2.25rem, 4vw, 3.5rem); }
@media (width >= 52rem) { .locales__lista { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); } }
.local { --toldo: 4.25rem; position: relative; overflow: clip; display: grid; gap: 1.1rem; align-content: start; justify-items: center; text-align: center; padding: calc(var(--toldo) + 1.75rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); background: var(--crema); border-radius: var(--radio); }
.toldo {
  position: absolute; inset: 0 0 auto; block-size: var(--toldo); transform-origin: 50% 0;
  background: repeating-linear-gradient(90deg, var(--uniforme) 0 2.5rem, #fbf8f2 2.5rem 5rem), var(--uniforme);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.25rem) no-repeat, radial-gradient(circle 1.25rem at 50% 0, #000 97%, #0000) bottom / 2.5rem 1.25rem repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.25rem) no-repeat, radial-gradient(circle 1.25rem at 50% 0, #000 97%, #0000) bottom / 2.5rem 1.25rem repeat-x;
}
.toldo::after { content: ""; position: absolute; inset: 0 0 auto; block-size: .6rem; background: rgb(42 26 19 / .3); }
.toldo--recogido { block-size: 1.5rem; -webkit-mask: none; mask: none; border-radius: 0 0 .75rem .75rem; background: linear-gradient(rgb(255 255 255 / .18), rgb(0 0 0 / .28)), repeating-linear-gradient(90deg, var(--uniforme) 0 2.5rem, #fbf8f2 2.5rem 5rem); }
.toldo--recogido::after { display: none; }
.poste { position: relative; display: block; inline-size: 1.5rem; block-size: 4.25rem; border-radius: .75rem; overflow: hidden; background: var(--crema); box-shadow: 0 0 0 .22rem var(--cafe); }
.poste > span { position: absolute; inset: 0 0 auto; block-size: 300%; translate: 0 -33%; background: repeating-linear-gradient(-38deg, var(--uniforme) 0 .55rem, #fbf8f2 .55rem 1.1rem, var(--color-foco) 1.1rem 1.65rem, #fbf8f2 1.65rem 2.2rem); }
.poste::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / .45), transparent 45%, rgb(0 0 0 / .2)); }
.local h3 { font-size: clamp(2.5rem, 1.75rem + 2.5vw, 3.75rem); }
.local dl { display: grid; gap: 1rem; margin: 0; }
.local dt { font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cafe-suave); }
.local dd { margin: .15rem 0 0; }
.local__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .5rem; }
.local--pronto { --toldo: 1.5rem; background: transparent; box-shadow: inset 0 0 0 2px var(--linea); align-content: center; padding-bottom: 6.5rem; }
.nota-propuesta { font-size: .9375rem; color: var(--cafe-suave); max-width: 26em; }
.obras { position: absolute; left: -10%; right: -10%; bottom: 2rem; rotate: -4deg; background: var(--color-foco); color: #fbf8f2; padding-block: .45rem; overflow: clip; }
.obras__pista { inline-size: max-content; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 1.6rem; line-height: 1; letter-spacing: .02em; }
.locales__pie { text-align: center; margin-top: 2rem; color: var(--cafe-suave); }

/* ---------- Cierre: estrellas que se rellenan (fila 15) ---------- */
.cierre { --pad: clamp(3.5rem, 7vw, 6.5rem); display: grid; gap: 2.5rem; align-items: center; background: var(--uniforme); color: var(--crema); padding: var(--pad) var(--margen); overflow: clip; }
.cierre__texto { display: grid; gap: 1.75rem; justify-items: start; }
.estrellas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: 1.0625rem; }
.estrellas b { font-family: var(--font-display); font-weight: 800; font-stretch: 62%; font-size: 2.2em; line-height: .8; vertical-align: -.08em; }
.estrellas__dibujo { position: relative; display: block; inline-size: 10.5rem; block-size: 2rem; }
.estrellas__dibujo svg { display: block; inline-size: 100%; block-size: 100%; }
.estrellas__vacias { color: rgb(245 242 236 / .28); }
.estrellas__ventana { position: absolute; inset: 0; clip-path: inset(0 2% 0 0); }
.estrellas__llenas { position: absolute; inset: 0; color: var(--crema); }
.cierre figure { margin: 0; display: grid; gap: 1rem; }
.cierre blockquote { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); line-height: .92; }
.cierre figcaption { font-size: 1rem; }
/* Foto del cierre sin marco: a sangre hasta el borde, y por dentro se mueve más despacio que la página (fila 28) */
.cierre__foto { position: relative; overflow: clip; margin: 0 -1.25rem calc(-1 * var(--pad)); block-size: clamp(22rem, 95vw, 34rem); view-timeline: --paralaje block; }
.cierre__foto img { position: absolute; inset: -12% 0; inline-size: 100%; block-size: 124%; object-fit: cover; object-position: 50% 45%; }
@media (width >= 56rem) {
  .cierre { grid-template-columns: 1.25fr 1fr; padding-right: 0; column-gap: clamp(3rem, 6vw, 6rem); }
  .cierre__foto { align-self: stretch; block-size: auto; min-block-size: 36rem; margin: calc(-1 * var(--pad)) 0; }
}

/* ---------- Página del local: barberos en polaroid, tablero y estrellas claras ---------- */
.barbero { position: relative; padding: .6rem .6rem 1.1rem; background: #fffdf9; border-radius: .2rem; box-shadow: 0 .9rem 1.75rem -.6rem rgb(42 26 19 / .32), 0 1px 2px rgb(42 26 19 / .12); rotate: var(--giro, -2deg);
  transition: rotate 320ms cubic-bezier(.34, 1.56, .64, 1), translate 320ms cubic-bezier(.34, 1.56, .64, 1); }
.barbero:nth-child(2) { --giro: 2.5deg; } .barbero:nth-child(3) { --giro: -1deg; }
.barbero img { border-radius: 0; }
.barbero h3 { padding-inline: .2rem; }
.barbero .boton { margin-inline: .2rem; }
@media (hover: hover) and (pointer: fine) { .barbero:hover { rotate: 0deg; translate: 0 -.5rem; } }
@media (prefers-reduced-motion: reduce) { .barbero { transition-duration: 0ms; } }
.tarifas .tablero { justify-self: stretch; }
.tarifas__foto.polaroid { justify-self: center; inline-size: min(100%, 26rem); }
.estrellas--claras { margin-top: 1rem; color: var(--cafe-suave); }
.estrellas--claras .estrellas__vacias { color: rgb(42 26 19 / .16); }
.estrellas--claras .estrellas__llenas { color: var(--uniforme); }

/* ---------- Tijeras del botón (fila 16) ---------- */
.boton--tijeras .tijeras { inline-size: 1.35em; block-size: 1.35em; flex: none; margin-inline-start: -.2em; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .boton--tijeras:hover .tijeras__hoja--a { animation: tijeretazo-a 360ms var(--ease-in-out); }
  .boton--tijeras:hover .tijeras__hoja--b { animation: tijeretazo-b 360ms var(--ease-in-out); }
}
@keyframes tijeretazo-a { 25%, 75% { rotate: -18deg; } 0%, 50%, 100% { rotate: 0deg; } }
@keyframes tijeretazo-b { 25%, 75% { rotate: 18deg; } 0%, 50%, 100% { rotate: 0deg; } }

/* ---------- Todo lo atado al scroll: solo si el navegador lo sabe y sin «reducir movimiento» ----------
   Prueba «La película» (DESIGN-DECISIONS filas 19-26). Cada bloque de la portada es una escena:
   - Escritorio (≥ 56rem de ancho y ≥ 41rem de alto): la escena se queda fija (.fija, sticky bajo la cabecera) y
     todo se ata a su timeline con nombre (--e-corte, --e-tarifas, --e-luces, --e-locales), rango `contain`.
   - Móvil y ventanas bajas: sin fijar; cada pieza anima con su propio view() (--tl, --rg, --base, --span).
   Cada pieza pone solo --t0 y --t1 (0 a 1: cuándo empieza y acaba dentro de la escena) y su animation-name. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    :root { --h-fija: calc(100svh - var(--alto-cabecera)); }

    .cabecera::after { content: ""; position: absolute; inset: auto 0 -1px 0; block-size: 5px; transform-origin: 0 50%;
      background: repeating-linear-gradient(-45deg, var(--uniforme) 0 7px, #fbf8f2 7px 14px, var(--color-foco) 14px 21px, #fbf8f2 21px 28px);
      animation: avance linear both; animation-timeline: scroll(root); }

    /* --- Lo común de las piezas de escena (se usa animation-name suelto, nunca el atajo `animation`) --- */
    :is(.cortado, .cortado__carro, .cortado__carro .tijeras__hoja, .cortado__linea, .cortado__trozo--abajo, .cortado__pelos i,
        .quienes__fotos img, .quienes__texto p, .sello,
        .oferta .tablero__cabeza, .oferta .tablero__lista li, .oferta .tablero__nota, .oferta .polaroid, .oferta__pie,
        .luces__techo, .luces__techo line, .luces__foto, .ibra-tira, .ibra-tira img, .luces h2, .luces p,
        .persiana, .persiana__lamas, .obras__pista, .poste > span) {
      animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto;
      animation-timeline: var(--tl, view());
      animation-range: var(--rg, cover) calc(var(--base, 4%) + var(--t0, 0) * var(--span, 52%)) var(--rg, cover) calc(var(--base, 4%) + var(--t1, 1) * var(--span, 52%));
    }

    /* ===== 1 · El corte (sin fijar: el titular usa su propio view(), como la fila 9) ===== */
    .cortado { --tl: --corte; --base: 18%; --span: 30%; }
    .cortado__carro { animation-name: tijeras-cruzan; }
    .cortado__carro .tijeras__hoja--a { animation-name: corta-a; }
    .cortado__carro .tijeras__hoja--b { animation-name: corta-b; }
    .cortado__linea { animation-name: linea-se-come; }
    .cortado__trozo--abajo { animation-name: trozo-cae; --t0: .93; --t1: 1.2; }
    .cortado__pelos i { animation-name: pelo-cae; animation-fill-mode: forwards; --t0: var(--c); --t1: calc(var(--c) + .6); }
    .quienes__fotos img { animation-name: abanico-a; --t0: .1; --t1: .9; }
    .quienes__fotos img:last-child { animation-name: abanico-b; }
    .sello { animation-name: sello-golpe; --t0: .45; --t1: 1; }

    /* ===== 2 · Tarifas (sin fijar: cada fila gira al entrar, cada polaroid llega por su lado) ===== */
    .oferta .tablero__cabeza, .oferta .tablero__lista li, .oferta .tablero__nota { animation-name: fila-gira; transform-origin: 50% 0; --t0: .1; --t1: .9; }
    .oferta .polaroid { animation-name: reparte-a; --t0: .05; --t1: .85; }
    .oferta .polaroid:nth-child(2) { animation-name: reparte-b; }
    .oferta .polaroid:nth-child(3) { animation-name: reparte-c; }

    /* ===== 3 · Las cintas: cruzan más rápido y cambian de ángulo ===== */
    .cinta__pista { animation: cinta-corre linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .cinta--turquesa .cinta__pista { animation-name: cinta-vuelve; }
    .cinta { animation: cinta-gira-a linear both; animation-timeline: view(); animation-range: cover 0% cover 60%; }
    .cinta--turquesa { animation-name: cinta-gira-b; }

    /* ===== 4 · Luces (también sin fijar: los tubos se encienden con el bloque) ===== */
    .luces { view-timeline: --luces block; --tl: --luces; --base: 6%; --span: 70%; }
    .luces__techo line { animation-name: luz-enciende; --t0: calc(.05 + var(--i) * .5); --t1: calc(var(--t0) + .14); }
    [data-ibra="negativo"] .ibra-tira { animation-name: tira-corre; animation-timing-function: cubic-bezier(.45, 0, .2, 1); --t0: .08; --t1: .55; }
    [data-ibra="penumbra"] .ibra-tira img { animation-name: penumbra-abre; --t0: .05; --t1: .5; }
    [data-ibra="espejo"] .luces__foto::after { animation: brillo-cruza linear both; animation-timeline: var(--tl, view());
      animation-range: var(--rg, cover) calc(var(--base, 4%) + .45 * var(--span, 52%)) var(--rg, cover) calc(var(--base, 4%) + .8 * var(--span, 52%)); }

    /* ===== 5 · Locales (sin fijar: cada persiana sube con su tarjeta) ===== */
    .local { view-timeline: --card block; }
    .locales { --tl: --card; --base: 8%; --span: 52%; }
    .persiana { display: block; position: absolute; inset: calc(var(--toldo) - 1.1rem) 0 0 0; z-index: 3; pointer-events: none; animation-name: persiana-sube; animation-timing-function: cubic-bezier(.5, 0, .2, 1); --t0: .1; --t1: .85; }
    .persiana--atascada { animation-name: persiana-atasca; animation-timing-function: linear; --t0: .25; --t1: .9; }
    .persiana__lamas { animation-name: lamas-enrollan; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
    .persiana--atascada .persiana__lamas { animation-name: lamas-atascan; animation-timing-function: linear; }
    .persiana__lamas { position: absolute; inset: 0 0 .95rem 0; transform-origin: 50% 100%;
      background:
        linear-gradient(90deg, rgb(255 255 255 / .3), rgb(255 255 255 / 0) 24%, rgb(0 0 0 / 0) 68%, rgb(0 0 0 / .22)),
        repeating-linear-gradient(to bottom, #dde0e2 0 .5rem, #b9bec1 .5rem .62rem, #8d9396 .62rem .72rem); }
    .persiana::before { content: ""; position: absolute; inset: auto 0 0 0; block-size: .95rem; background: linear-gradient(#656b6e, #3a4043); border-radius: 0 0 .3rem .3rem; box-shadow: 0 .35rem .6rem -.2rem rgb(42 26 19 / .4); }
    .persiana::after { content: ""; position: absolute; left: 50%; bottom: .22rem; inline-size: 3.25rem; block-size: .5rem; translate: -50% 0; border-radius: .3rem; background: #1f2427; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); }
    .local .toldo { z-index: 5; }
    .local--pronto > :is(h3, .nota-propuesta, .obras) { position: relative; z-index: 4; }
    .local--pronto > .obras { position: absolute; }
    .local--pronto > h3, .local--pronto > .nota-propuesta { background: var(--crema); border-radius: .4rem; box-shadow: 0 .15rem .5rem rgb(42 26 19 / .28); }
    .local--pronto > h3 { padding: .45rem .95rem .3rem; rotate: -1.5deg; }
    .local--pronto > .nota-propuesta { padding: .6rem .95rem; rotate: 1deg; }
    .obras__pista { animation-name: obras-corre; --t0: 0; --t1: 1; }
    .poste > span { animation-name: poste-gira; --t0: 0; --t1: 1; }

    /* ===== 6 · Cierre: el bloque entra con un golpe; las estrellas se rellenan (fila 15) ===== */
    .cierre__texto figure { animation: cierre-golpe linear both; animation-timeline: view(); animation-range: entry 5% entry 95%; }
    .cierre__foto img { animation: paralaje linear both; animation-timeline: --paralaje; animation-range: cover 0% cover 100%; }
    .estrellas__ventana { animation: ventana-llena linear both; animation-timeline: view(); animation-range: entry 50% cover 40%; }

    /* ===== La página del local conserva sus piezas de la vuelta 2 (filas 10, 11, 17) ===== */
    .seccion .tablero { animation: balanceo linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

/* ===== Escritorio: la escena se queda fija ===== */
@media screen and (prefers-reduced-motion: no-preference) and (width >= 56rem) and (height >= 41rem) {
  @supports (animation-timeline: view()) {
    .quienes, .oferta, .locales { padding: 0; --rg: contain; --base: 0%; --span: 100%; block-size: calc(var(--h-fija) + var(--recorrido)); }
    .quienes .fija, .oferta .fija, .locales .fija { position: sticky; top: var(--alto-cabecera); block-size: var(--h-fija); overflow: clip; }
    .oferta { scroll-margin-top: calc(var(--recorrido) * -.98); }
    .locales { scroll-margin-top: calc(var(--recorrido) * -.88); }

    /* ---- Escena «El corte» ---- */
    .quienes { --recorrido: 85vh; --tl: --e-corte; view-timeline: --e-corte block; view-timeline-inset: var(--alto-cabecera) 0px; }
    .quienes .fija { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(.75rem, 2vh, 1.5rem); padding: 1.25rem var(--margen) 1.5rem; }
    .quienes .cortado { --tl: --e-corte; --rg: contain; --base: 0%; --span: 100%; font-size: min(7.4vw, 15.5vh); inline-size: max-content; justify-self: center; white-space: nowrap; z-index: 2;
      transform-origin: 50% 50%; animation-name: titular-encoge; animation-timing-function: cubic-bezier(.65, 0, .35, 1); --t0: .36; --t1: .6; }
    .quienes .cortado__carro { --t0: 0; --t1: .3; }
    .quienes .cortado__linea { --t0: 0; --t1: .3; }
    .quienes .cortado__carro .tijeras__hoja { --t0: 0; --t1: .3; }
    .quienes .cortado__trozo--abajo { --t0: .29; --t1: .36; }
    .quienes .cortado__pelos i { --t0: calc(var(--c) * .22); --t1: calc(var(--t0) + .14); }
    .quienes__cuerpo { margin-top: 0; min-block-size: 0; }
    .quienes__fotos { align-self: center; }
    .quienes__fotos img { max-block-size: 55vh; transform-origin: 50% 100%; --t0: .24; --t1: .54; }
    .quienes__fotos img:last-child { margin-top: 2rem; }
    .quienes__texto p { animation-name: texto-entra; font-size: clamp(1.25rem, .85rem + .95vw, 1.7rem); --t0: .46; --t1: .62; }
    .sello { --t0: .7; --t1: .86; }

    /* ---- Escena «Tarifas» ---- */
    .oferta { --recorrido: 85vh; --tl: --e-tarifas; view-timeline: --e-tarifas block; view-timeline-inset: var(--alto-cabecera) 0px; }
    .oferta .fija { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 5rem); padding: 1rem var(--margen) 1.25rem; }
    .oferta__mesa { display: contents; }
    .oferta .puente { grid-column: 1; grid-row: 1; font-size: clamp(2.5rem, 1rem + 6.4vh, 4.75rem); }
    .oferta .tablero { grid-column: 1; grid-row: 2 / 4; align-self: center; margin-top: var(--cuerda); inline-size: min(100%, 34rem); padding-block: 1.1rem .9rem; }
    .oferta .tablero__cabeza { font-size: min(2.1rem, 4vh); padding-bottom: .55rem; }
    .oferta .tablero__lista li { font-size: min(2.05rem, 4.4vh); padding-block: min(.55rem, 1.1vh); }
    .oferta .tablero__nota { margin-top: .6rem; font-size: min(1.05rem, 1.9vh); }
    .oferta .polaroids { --pw: min(19rem, 31vh); grid-column: 2; grid-row: 1 / 3; position: relative; display: block; align-self: center; block-size: calc(var(--pw) * 2.4); }
    .oferta .polaroids > .polaroid { position: absolute; margin: 0; inline-size: var(--pw); }
    .oferta .polaroid img { aspect-ratio: 5 / 4; }
    .oferta .polaroid:nth-child(1) { left: 2%; top: 0; }
    .oferta .polaroid:nth-child(2) { left: 53%; top: calc(var(--pw) * .1); }
    .oferta .polaroid:nth-child(3) { left: 27%; bottom: 0; z-index: 2; }
    .oferta .polaroid figcaption { font-size: min(1.05rem, 2.2vh); padding-top: .5rem; }
    .oferta .polaroid figcaption b { font-size: min(2rem, 3.4vh); }
    .oferta__pie { grid-column: 2; grid-row: 3; margin-top: 0; }
    .oferta .tablero__cabeza { --t0: 0; --t1: .13; }
    .oferta .tablero__lista li:nth-child(1) { --t0: .03; --t1: .16; }
    .oferta .tablero__lista li:nth-child(2) { --t0: .08; --t1: .21; }
    .oferta .tablero__lista li:nth-child(3) { --t0: .13; --t1: .26; }
    .oferta .tablero__lista li:nth-child(4) { --t0: .18; --t1: .31; }
    .oferta .tablero__lista li:nth-child(5) { --t0: .23; --t1: .36; }
    .oferta .tablero__lista li:nth-child(6) { --t0: .28; --t1: .41; }
    .oferta .tablero__nota { --t0: .28; --t1: .41; }
    .oferta .polaroid:nth-child(1) { animation-name: reparte-in-a; --t0: .3; --t1: .48; }
    .oferta .polaroid:nth-child(2) { animation-name: reparte-in-b; --t0: .42; --t1: .6; }
    .oferta .polaroid:nth-child(3) { animation-name: reparte-in-c; --t0: .54; --t1: .72; }
    .oferta__pie { animation-name: boton-aparece; --t0: .72; --t1: .84; }

    /* ---- Escena «Locales» ---- */
    .locales { --recorrido: 75vh; --tl: --e-locales; view-timeline: --e-locales block; view-timeline-inset: var(--alto-cabecera) 0px; }
    .locales .fija { display: grid; align-content: center; padding: .75rem var(--margen) 1rem; }
    .locales .fija > h2 { font-size: min(clamp(3rem, 1.5rem + 4vw, 5.5rem), 10vh); }
    .locales__entrada { margin-top: .5rem; }
    .locales__lista { margin-top: clamp(1rem, 2.5vh, 1.75rem); }
    .local { --toldo: 3.25rem; gap: .65rem; padding: calc(var(--toldo) + 1rem) 1.5rem 1.5rem; }
    .local--pronto { --toldo: 1.5rem; padding-bottom: 6rem; }
    .local h3 { font-size: min(3.25rem, 7vh); }
    .local dl { gap: .6rem; }
    .poste { block-size: 3rem; }
    .locales__pie { margin-top: clamp(.75rem, 2vh, 1.25rem); }
    .persiana { --t0: .04; --t1: .5; }
    .persiana--atascada { --t0: .16; --t1: .54; }
    .obras__pista, .poste > span { --t0: 0; --t1: 1; }
  }
}

/* ===== Luces: escena fija también en móvil (recorrido más corto) ===== */
@media screen and (prefers-reduced-motion: no-preference) and (height >= 34rem) {
  @supports (animation-timeline: view()) {
    .luces { --recorrido: 70vh; --tl: --e-luces; --rg: contain; --base: 0%; --span: 100%; view-timeline: --e-luces block; view-timeline-inset: var(--alto-cabecera) 0px;
      display: block; place-items: normal; padding: 0; min-block-size: 0; block-size: calc(var(--h-fija) + var(--recorrido)); }
    .luces::before { display: none; }
    .luces .fija { position: sticky; top: var(--alto-cabecera); block-size: var(--h-fija); display: grid; place-items: center; overflow: clip; isolation: isolate; padding: 1.5rem var(--margen); }
    .luces .fija::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgb(31 111 120 / .35), transparent 70%); }
    .luces__foto { inline-size: clamp(7rem, 30svh, 15rem); }
    .luces h2 { font-size: min(clamp(2rem, 1.2rem + 4vw, 5.25rem), 9.5svh); }
    .luces__techo { -webkit-mask-image: none; mask-image: none; }
    .luces .fija::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 62% 50% at 50% 56%, rgb(42 26 19 / .95) 45%, rgb(42 26 19 / 0) 100%);
      animation: vineta linear both; animation-timeline: --e-luces; animation-range: contain 20% contain 55%; }
    .luces__techo { transform-origin: 50% 50%; animation-name: camara-entra; animation-timing-function: cubic-bezier(.4, 0, .2, 1); --t0: 0; --t1: .5; }
    .luces__techo line { --t0: calc(.01 + var(--i) * .34); --t1: calc(var(--t0) + .1); }
    .luces__foto { animation-name: foto-crece; --t0: .3; --t1: .5; }
    [data-ibra="negativo"] .luces__foto { --fw: clamp(6rem, 21svh, 13rem); }
    [data-ibra="negativo"] .ibra-tira { --t0: .32; --t1: .78; }
    [data-ibra="espejo"] .luces__foto { inline-size: clamp(7rem, 36svh, 18rem); }
    [data-ibra="penumbra"] .luces__foto { inline-size: clamp(7rem, 30svh, 21rem); animation-name: none; }
    [data-ibra="penumbra"] .ibra-tira img { --t0: .26; --t1: .6; }
    .luces h2 { animation-name: texto-sube; --t0: .5; --t1: .64; }
    .luces p { animation-name: texto-sube; --t0: .56; --t1: .7; }
    .luces__dentro::before { animation: panel-aparece linear both; animation-timeline: --e-luces; animation-range: contain 42% contain 56%; }
  }
}

/* ===== Movimiento de las escenas ===== */
@keyframes avance { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes tijeras-cruzan { from { translate: -100% 0; } to { translate: 0 0; } }
@keyframes corta-a { 0%, 25%, 50%, 75%, 100% { rotate: 0deg; } 12.5%, 37.5%, 62.5%, 87.5% { rotate: -17deg; } }
@keyframes corta-b { 0%, 25%, 50%, 75%, 100% { rotate: 0deg; } 12.5%, 37.5%, 62.5%, 87.5% { rotate: 17deg; } }
@keyframes linea-se-come { from { opacity: .55; scale: 1 1; } to { opacity: .55; scale: 0 1; } }
@keyframes trozo-cae { from { translate: 0 0; rotate: 0deg; } to { translate: 0 .05em; rotate: .9deg; } }
@keyframes pelo-cae { from { opacity: 1; translate: 0 0; rotate: var(--g); } to { opacity: 0; translate: .15em .9em; rotate: calc(var(--g) + 140deg); } }
@keyframes titular-encoge { from { translate: 0 calc(var(--h-fija) / 2 - 4.6rem); scale: 1.4; } to { translate: 0 0; scale: 1; } }
@keyframes abanico-a { from { translate: 8% 6%; rotate: 0deg; scale: .7; opacity: 0; } 10% { opacity: 1; } 60% { translate: -6% 0; rotate: -15deg; scale: 1.04; } }
@keyframes abanico-b { from { translate: -108% 6%; rotate: 0deg; scale: .7; opacity: 0; } 10% { opacity: 1; } 60% { translate: 6% 0; rotate: 16deg; scale: 1.04; } }
@keyframes texto-entra { from { opacity: 0; translate: -2.5rem 0; } 30% { opacity: 1; } }
@keyframes sello-golpe { from { opacity: 0; scale: 1.45; rotate: -16deg; } 30% { opacity: 1; } 70% { opacity: 1; scale: .94; rotate: -5deg; } to { opacity: 1; scale: 1; rotate: -6deg; } }
@keyframes fila-gira {
  0% { transform: perspective(48rem) rotateX(90deg); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  52% { transform: perspective(48rem) rotateX(0deg); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  68% { transform: perspective(48rem) rotateX(15deg); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  80% { transform: perspective(48rem) rotateX(0deg); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  90% { transform: perspective(48rem) rotateX(4deg); animation-timing-function: ease-in; }
  100% { transform: perspective(48rem) rotateX(0deg); }
}
@keyframes reparte-in-a { 0% { translate: 90% -330%; rotate: 470deg; scale: 1.5; } 78% { translate: -2% 2%; rotate: 20deg; scale: 1.1; animation-timing-function: ease-in-out; } 90% { scale: .97; translate: 0 0; rotate: -4deg; } 100% { translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes reparte-in-b { 0% { translate: 340% -20%; rotate: -420deg; scale: 1.5; } 78% { translate: 2% -2%; rotate: -18deg; scale: 1.1; animation-timing-function: ease-in-out; } 90% { scale: .97; translate: 0 0; rotate: 4deg; } 100% { translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes reparte-in-c { 0% { translate: 30% 330%; rotate: 360deg; scale: 1.5; } 78% { translate: 0 3%; rotate: 14deg; scale: 1.1; animation-timing-function: ease-in-out; } 90% { scale: .97; translate: 0 0; rotate: -3deg; } 100% { translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes reparte-a { 0% { translate: -170% 0; rotate: -460deg; scale: 1.3; } 78% { translate: 2% 0; rotate: 12deg; scale: 1.06; animation-timing-function: ease-in-out; } 90% { scale: .98; translate: 0 0; rotate: -3deg; } 100% { translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes reparte-b { 0% { translate: 170% 0; rotate: 420deg; scale: 1.3; } 78% { translate: -2% 0; rotate: -12deg; scale: 1.06; animation-timing-function: ease-in-out; } 90% { scale: .98; translate: 0 0; rotate: 3deg; } 100% { translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes reparte-c { 0% { translate: 190% 0; rotate: 380deg; scale: 1.3; } 78% { translate: -2% 0; rotate: -10deg; scale: 1.06; animation-timing-function: ease-in-out; } 90% { scale: .98; translate: 0 0; rotate: 2deg; } 100% { translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes boton-aparece { from { opacity: 0; translate: 0 1.25rem; scale: .85; } 30% { opacity: 1; } 70% { opacity: 1; scale: 1.05; translate: 0 0; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cinta-corre { from { translate: 0 0; } to { translate: -55% 0; } }
@keyframes cinta-vuelve { from { translate: -58% 0; } to { translate: 0 0; } }
@keyframes cinta-gira-a { from { rotate: -9deg; } to { rotate: -4deg; } }
@keyframes cinta-gira-b { from { rotate: 8.5deg; } to { rotate: 3.5deg; } }
@keyframes luz-enciende { 0% { opacity: .07; } 45% { opacity: .85; } 58% { opacity: .2; } 72% { opacity: 1; } 84% { opacity: .5; } 100% { opacity: 1; } }
@keyframes camara-entra { from { scale: .6; } to { scale: 2.2; } }
@keyframes foto-crece { from { scale: .08; opacity: 0; } 25% { opacity: 1; } 80% { scale: 1.06; } to { scale: 1; opacity: 1; } }
@keyframes texto-sube { from { opacity: 0; translate: 0 1.5rem; } 30% { opacity: 1; } }
@keyframes panel-aparece { from { opacity: 0; } 30% { opacity: 1; } }
@keyframes vineta { from { opacity: 0; } }
@keyframes persiana-sube { from { translate: 0 0; } to { translate: 0 -100%; } }
@keyframes lamas-enrollan { from { scale: 1 1; } to { scale: 1 .04; } }
@keyframes persiana-atasca { 0% { translate: 0 0; } 45% { translate: 0 -17%; } 52% { translate: 0 -14.5%; } 58% { translate: 0 -17.5%; } 64% { translate: 0 -15%; } 70% { translate: 0 -17%; } 78% { translate: 0 -16%; } 100% { translate: 0 -16.5%; } }
@keyframes lamas-atascan { 0% { scale: 1 1; } 45% { scale: 1 .83; } 52% { scale: 1 .855; } 58% { scale: 1 .825; } 64% { scale: 1 .85; } 70% { scale: 1 .83; } 78% { scale: 1 .84; } 100% { scale: 1 .835; } }
@keyframes obras-corre { from { translate: -5% 0; } to { translate: -35% 0; } }
@keyframes poste-gira { from { translate: 0 -66.6%; } to { translate: 0 0; } }
@keyframes cierre-golpe { from { opacity: 0; translate: 0 3rem; scale: .96; } 30% { opacity: 1; } 65% { opacity: 1; translate: 0 -.5rem; scale: 1.015; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes paralaje { from { translate: 0 -9%; } to { translate: 0 9%; } }
@keyframes tira-corre { from { translate: 0 var(--ini); } to { translate: 0 var(--fin); } }
@keyframes penumbra-abre { from { --abre: 0%; opacity: 0; scale: 1.12; } 35% { opacity: 1; } to { --abre: 60%; opacity: 1; scale: 1; } }
@keyframes brillo-cruza { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
@keyframes ventana-llena { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 2% 0 0); } }
@keyframes balanceo { 0% { rotate: -4.5deg; } 30% { rotate: 3deg; } 55% { rotate: -1.8deg; } 78% { rotate: .9deg; } 100% { rotate: -.3deg; } }
@keyframes deriva { from { translate: 0 1.75rem; } to { translate: 0 -1.75rem; } }
@keyframes deriva-al-reves { from { translate: 0 -1rem; } to { translate: 0 1.5rem; } }
@media screen and (prefers-reduced-motion: no-preference) and (width >= 56rem) {
  @supports (animation-timeline: view()) {
    .tarifas__foto.polaroid, .barbero { animation: deriva linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .barbero:nth-child(2) { animation-name: deriva-al-reves; }
  }
}

/* ---------- Pie ---------- */
.pie { background: var(--cafe); color: var(--crema); padding: clamp(3rem, 6vw, 4.5rem) var(--margen) 2rem; display: grid; gap: 2.5rem; }
.pie__marca { font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: .85; }
.pie__columnas { display: grid; gap: 2rem; }
@media (width >= 48rem) { .pie__columnas { grid-template-columns: repeat(3, 1fr); } }
.pie h2 { font-size: 1.6rem; margin-bottom: .75rem; }
.pie p, .pie li { color: color-mix(in oklab, var(--crema) 88%, var(--cafe)); }
.pie ul { list-style: ""; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pie a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; display: inline-block; padding-block: .45rem; }
.pie__demo { border-top: 1px solid color-mix(in oklab, var(--crema) 22%, transparent); padding-top: 1.5rem; font-size: .9375rem; color: color-mix(in oklab, var(--crema) 82%, var(--cafe)); }

/* ---------- Página del local ---------- */
.portada--local { min-block-size: clamp(30rem, 72svh, 46rem); }
.portada--local .portada__foto { object-position: 50% 40%; }
.portada--local::after { background: radial-gradient(ellipse 75% 70% at 50% 50%, rgb(28 16 11 / .84), rgb(28 16 11 / .52) 75%); }
.portada--local h1 { font-size: clamp(4.5rem, 2rem + 9vw, 9rem); }
.portada__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.portada .boton--linea { color: var(--crema); }
.portada__direccion { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight: 600; text-shadow: 0 1px 12px rgb(0 0 0 / .45); }

main { overflow-x: clip; }
.seccion { overflow-x: clip; padding: clamp(3.5rem, 7vw, 6rem) var(--margen); }
.seccion--honda { background: var(--crema-hondo); }
.seccion > h2 { font-size: clamp(3rem, 2rem + 4.5vw, 6rem); }
.seccion__entrada { margin-top: 1rem; color: var(--cafe-suave); max-width: 36em; }

.equipo { list-style: ""; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 2rem; }
@media (width >= 44rem) { .equipo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.25rem); } }
.barbero { display: grid; gap: .9rem; }
.barbero img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: var(--radio); }
.barbero h3 { font-size: clamp(2.5rem, 1.75rem + 2vw, 3.5rem); }
.barbero .boton { justify-self: start; }
.equipo__pie { margin-top: 2rem; color: var(--cafe-suave); }

.tarifas { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (width >= 56rem) { .tarifas { grid-template-columns: 1.2fr 1fr; align-items: start; gap: clamp(2.5rem, 5vw, 5rem); } }
.carta { list-style: ""; margin: 0; padding: 0; }
.carta li { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding-block: 1rem; border-bottom: 1px solid var(--linea); }
.carta li:first-child { border-top: 2px solid var(--cafe); }
.carta b { font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1; }
.carta span { grid-column: 1; color: var(--cafe-suave); font-size: 1rem; }
.carta em { grid-row: 1; grid-column: 2; font-style: normal; font-family: var(--font-display); font-weight: 800; font-stretch: 62%; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1; color: var(--uniforme); font-variant-numeric: tabular-nums; }
.carta__nota { margin-top: 1rem; color: var(--cafe-suave); font-size: .95rem; }
.tarifas__foto img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); }

.donde { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (width >= 56rem) { .donde { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); } }
.donde dl { margin: 0; display: grid; gap: 1.5rem; }
.donde dt { font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cafe-suave); }
.donde dd { margin: .2rem 0 0; font-size: 1.2rem; }
.donde__datos { display: grid; gap: 1.75rem; align-content: start; }
.donde__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.locales__pie a, .equipo__pie a, .desplegable__cuerpo a { display: inline-block; padding-block: .3rem; text-underline-offset: .2em; }
.horario { border-collapse: collapse; inline-size: 100%; font-variant-numeric: tabular-nums; }
.horario th, .horario td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.horario th { font-weight: 700; padding-right: 1rem; }
.horario td { text-align: right; }

.preguntas { margin-top: clamp(2rem, 4vw, 3rem); max-width: 50rem; }
:root { interpolate-size: allow-keywords; }
.desplegable { border-block-end: 1px solid var(--linea); }
.desplegable:first-child { border-block-start: 2px solid var(--cafe); }
.desplegable > summary { display: flex; align-items: center; gap: .75rem; min-block-size: 3.5rem; padding-block: .9rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.15rem; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: ""; margin-inline-start: auto; flex: none; inline-size: .6rem; block-size: .6rem; border-inline-end: 2.5px solid var(--uniforme); border-block-end: 2.5px solid var(--uniforme); rotate: 45deg; translate: 0 -.15rem; transition: rotate calc(var(--duration-acordeon) * var(--movimiento)) var(--ease-out); }
.desplegable[open] > summary::after { rotate: 225deg; translate: 0 .15rem; }
.desplegable::details-content { block-size: 0; overflow: clip; transition: block-size calc(var(--duration-acordeon) * var(--movimiento)) var(--ease-out), content-visibility calc(var(--duration-acordeon) * var(--movimiento)) allow-discrete; }
.desplegable[open]::details-content { block-size: auto; }
.desplegable__cuerpo { padding-block: 0 1.25rem; color: var(--cafe-suave); max-width: 40em; }

.opiniones { list-style: ""; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 2rem; }
@media (width >= 56rem) { .opiniones { grid-template-columns: 1.4fr 1fr 1fr; align-items: center; } }
.opinion { margin: 0; display: grid; gap: 1rem; }
.opinion blockquote { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.opinion:first-child blockquote { font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); line-height: .95; color: var(--uniforme); }
.opinion figcaption { color: var(--cafe-suave); font-size: .95rem; }
.opiniones__pie { margin-top: 2rem; }

/* ---------- Aparecer una vez (kit-motion 01), solo en 3 bloques ---------- */
@media screen {
  @supports (animation-timeline: view()) {
    .aparece { --en-vista: no; animation: aparece-bandera linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .aparece > * { animation: aparece-entra var(--duration-aparecer) var(--ease-out) both paused; animation-delay: calc(min(var(--escalon, 0), 4) * var(--duration-escalon)); }
    @container style(--en-vista: si) { .aparece > * { animation-play-state: running; } }
  }
}
@keyframes aparece-bandera { to { --en-vista: si; } }
@keyframes aparece-entra { from { opacity: 0; translate: 0 var(--recorrido-aparecer); } }
.js-aparece .aparece > * { transition: opacity var(--duration-aparecer) var(--ease-out) var(--retardo, 0ms), translate var(--duration-aparecer) var(--ease-out) var(--retardo, 0ms); }
.js-aparece .aparece:not([data-visto]) > * { opacity: 0; translate: 0 var(--recorrido-aparecer); }
@media print { .aparece > *, .portada h1, .portada__linea { opacity: 1 !important; translate: none !important; animation: none !important; transition: none !important; } }

.portada__direccion span { white-space: nowrap; }

/* Objetivos táctiles ≥ 44 px (ojos frescos v3) */
.marca { min-block-size: 2.75rem; justify-content: center; }
.menu-enlinea a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.pie a, .locales__pie a, .equipo__pie a, .desplegable__cuerpo a, .quienes a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-block: 0; }

/* Horario de la página del local como cartel colgado (ojos frescos v3) */
.tablero--horario { inline-size: min(100%, 30rem); }
.tablero--horario .horario th, .tablero--horario .horario td { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-stretch: 75%; letter-spacing: .07em; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); color: #fbf8f2; border-bottom: 2px dotted rgb(251 248 242 / .35); text-shadow: 0 1px 0 rgb(0 0 0 / .5); }
.tablero--horario .horario tr:last-child th, .tablero--horario .horario tr:last-child td { border-bottom: 0; }

/* Preguntas: unas tijeras que se abren al desplegar (sustituyen a la flecha; ojos frescos v3) */
.desplegable > summary::after { display: none; }
.desplegable > summary .tijeras { margin-inline-start: auto; flex: none; inline-size: 2rem; block-size: 2rem; color: var(--uniforme); rotate: 90deg; transition: rotate calc(var(--duration-acordeon) * var(--movimiento)) var(--ease-out); }
.desplegable > summary .tijeras__hoja { transition: rotate calc(var(--duration-acordeon) * var(--movimiento)) var(--ease-out); }
.desplegable[open] > summary .tijeras { rotate: 0deg; }
.desplegable[open] > summary .tijeras__hoja--a { rotate: -22deg; }
.desplegable[open] > summary .tijeras__hoja--b { rotate: 22deg; }
.tablero--horario .horario td { white-space: nowrap; }
@media (width < 40rem) { .tablero--horario .horario th, .tablero--horario .horario td { font-size: 1.1rem; letter-spacing: .04em; } }

/* ---------- Equipo en la portada, locales y «¿En qué local?» (06/11/2026, fila 30) ---------- */
.equipo-portada .barbero img { aspect-ratio: 600 / 760; }
.barbero__oficio { margin: -.5rem .2rem 0; color: var(--cafe-suave); font-size: .9375rem; }
.barbero .boton { margin-top: .2rem; }

.sedes__lista { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (width >= 60rem) { .sedes__lista { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); } }
.sede { display: grid; grid-template-rows: auto 1fr; background: var(--crema); border-radius: var(--radio); overflow: clip; box-shadow: 0 1px 2px rgb(42 26 19 / .08); }
.sede__foto { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
.sede__hueco { aspect-ratio: 3 / 2; display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--crema-hondo) 0 1.25rem, var(--crema) 1.25rem 2.5rem); }
.sede__cuerpo { display: grid; gap: 1rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); }
.sede h3 { font-size: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem); }
.sede dl { display: grid; gap: .85rem; margin: 0; }
.sede dt { font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cafe-suave); }
.sede dd { margin: .15rem 0 0; }
.sede dd a { color: inherit; }
.sede__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .5rem; }
.sede__mas { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--cafe); font-weight: 700; text-underline-offset: .2em; }
.sede__marca { justify-self: start; margin: 0; padding: .3rem .7rem; border-radius: 999px; background: var(--uniforme); color: var(--crema); font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sede--nueva { background: transparent; box-shadow: inset 0 0 0 2px var(--linea); }

.elige { inset: auto 0 0; margin: 0 auto; inline-size: min(100%, 28rem); padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); border: 0; border-radius: var(--radio) var(--radio) 0 0; background: var(--crema); color: var(--cafe); box-shadow: 0 -1rem 3rem rgb(42 26 19 / .35); display: none; gap: .85rem;
  opacity: 0; translate: 0 1.5rem; transition: opacity var(--duration-panel-salida) var(--ease-out), translate var(--duration-panel-salida) var(--ease-out), display var(--duration-panel-salida) allow-discrete, overlay var(--duration-panel-salida) allow-discrete; }
.elige:popover-open { display: grid; opacity: 1; translate: 0 0; transition-duration: var(--duration-panel); }
@starting-style { .elige:popover-open { opacity: 0; translate: 0 1.5rem; } }
.elige::backdrop { background: rgb(42 26 19 / .55); }
@media (width >= 44rem) { .elige { inset: 0; margin: auto; block-size: fit-content; border-radius: var(--radio); padding-bottom: 1.5rem; } }
.elige__titulo { margin: 0 0 .25rem; font-family: var(--font-display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 2.25rem; line-height: 1; }
.elige .boton { inline-size: 100%; justify-content: center; }
.elige__nota { margin: 0; font-size: .9375rem; color: var(--cafe-suave); }
.elige__cerrar { justify-self: center; min-block-size: var(--tap); padding-inline: 1rem; border: 0; background: none; color: var(--cafe); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .elige { transition-duration: 0ms; } }
.equipo-portada .barbero img { border-radius: .15rem; }

/* ---------- Logo de Ibra (06/11/2026): la insignia como forma, pintada con la paleta (el original no es dorado) ---------- */
.marca { flex-direction: row; align-items: center; gap: .6rem; }
.marca__texto { display: inline-flex; flex-direction: column; }
.marca__logo, .pie__logo { display: block; flex: none; aspect-ratio: 308 / 455; background: currentColor;
  -webkit-mask: url("img/logo.webp") center / contain no-repeat; mask: url("img/logo.webp") center / contain no-repeat; }
.marca__logo { block-size: 2.75rem; color: var(--cafe); }
.pie__logo { block-size: clamp(7rem, 5rem + 6vw, 10rem); color: var(--crema); }

/* ---------- Portada: dos barberías en Las Arenas (10/11/2026) ---------- */
.portada h1 { font-size: clamp(3.25rem, 1.25rem + 8.2vw, 8.75rem); }
.portada__locales { list-style: ""; margin: -.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.portada__locales a { display: inline-flex; align-items: center; gap: .4rem; min-block-size: var(--tap); padding: .45rem 1rem .45rem .8rem; border-radius: 999px;
  background: rgb(245 242 236 / .14); box-shadow: inset 0 0 0 1.5px rgb(245 242 236 / .7); color: var(--crema); font-weight: 700; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color var(--duration-hover) ease; }
.portada__locales svg { inline-size: 1.1em; block-size: 1.1em; flex: none; }
@media (hover: hover) and (pointer: fine) { .portada__locales a:hover { background: rgb(245 242 236 / .26); } }
.portada__locales { animation: heroe-funde 500ms ease 500ms both; }
@media (prefers-reduced-motion: reduce) { .portada__locales { animation: none; } }
.sede { scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }


/* ---------- Mayor 31 (hueco sin foto), pie con firma y legales (10/11/2026) ---------- */
.portada__hueco { position: absolute; inset: 0; z-index: -2; display: grid; place-items: start end; padding: clamp(5rem, 14vh, 8rem) var(--margen) 0;
  background: repeating-linear-gradient(-45deg, var(--crema-hondo) 0 1.25rem, var(--crema) 1.25rem 2.5rem); }
.portada__hueco .poste { inline-size: 2rem; block-size: 6rem; }
.cierre__foto--hueco { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--crema-hondo) 0 1.25rem, var(--crema) 1.25rem 2.5rem); }
.pie__fin { border-top: 1px solid color-mix(in oklab, var(--crema) 22%, transparent); padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem; font-size: .9375rem; }
.pie__fin p { color: color-mix(in oklab, var(--crema) 82%, var(--cafe)); }
.pie__fin a { padding-block: 0; }
.legal { padding: clamp(3.5rem, 7vw, 6rem) var(--margen); display: grid; justify-items: start; align-content: start; }
.legal > * { max-inline-size: 46rem; }
.legal h1 { font-size: clamp(3rem, 2rem + 4.5vw, 6rem); margin-bottom: .5rem; }
.legal__fecha { color: var(--cafe-suave); font-size: .9375rem; margin-bottom: 2rem; }
.legal h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); color: var(--uniforme); margin: 2.25rem 0 .75rem; }
.legal p, .legal li { margin-bottom: .8rem; }
.legal ul { margin: 0 0 .8rem; padding-inline-start: 1.25rem; }
.legal a { text-underline-offset: .2em; }
.legal table { border-collapse: collapse; inline-size: 100%; margin-bottom: 1rem; font-size: .9375rem; }
.legal th, .legal td { text-align: start; padding: .6rem .75rem; border: 1px solid var(--linea); vertical-align: top; }
.legal th { background: var(--crema-hondo); }
@media (width < 48rem) {
  .portada__direccion span { white-space: normal; display: block; }
  .portada__direccion { display: grid; gap: .25rem; }
  .portada__hueco { place-items: end start; padding: 0 var(--margen) 1.5rem; }
  .portada__hueco .poste { block-size: 3.5rem; inline-size: 1.4rem; }
}
@media (width < 48rem) { .portada__direccion .sep { display: none; } }
.legal__cabeza { background: var(--crema-hondo); padding: clamp(3.5rem, 7vw, 6rem) var(--margen) clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--linea); }
.legal__cabeza .legal__fecha { margin: .75rem 0 0; }
.legal { padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 7vw, 6rem); }
.legal a { display: inline-block; padding-block: .2rem; }

/* ---------- Tarifas por local (10/11/2026): tablero de la portada con dos columnas y precio arriba en cada local ---------- */
.tablero__cols, .tablero__lista--doble li { gap: .5rem; }
.tablero__cols { display: flex; align-items: baseline; font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-stretch: 75%; letter-spacing: .08em; white-space: nowrap; font-size: clamp(.9rem, .8rem + .4vw, 1.1rem); line-height: 1; padding-block: .1rem .3rem; color: rgb(251 248 242 / .82); text-shadow: 0 1px 0 rgb(0 0 0 / .5); }
.tablero__cols span { flex: 1; }
.tablero__cols b, .tablero__lista li b + b, .tablero__lista li span + b { text-align: end; }
.tablero--doble .tablero__lista b, .tablero--doble .tablero__cols b { inline-size: var(--col, 5.4rem); }
.tablero__locales { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1.25rem; margin-top: .7rem; font-size: .95rem; font-weight: 600; font-stretch: 85%; letter-spacing: .05em; text-transform: none; }
.tablero__locales a { color: rgb(251 248 242 / .82); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; display: inline-block; padding-block: .4rem; }
.tablero__locales a:hover { color: #fbf8f2; }
@media (width < 40rem) { .tablero--doble { --col: 3.9rem; } .tablero__cols { font-size: .85rem; letter-spacing: .04em; } .tablero--doble .tablero__lista li { font-size: 1.1rem; letter-spacing: .02em; } .tablero--doble .tablero__lista li::before { min-inline-size: .4rem; } }
.portada__precio { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-stretch: 75%; letter-spacing: .08em; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); line-height: 1.15; text-shadow: 0 1px 12px rgb(0 0 0 / .45); display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .6rem; align-items: baseline; }
.portada__precio strong { font-weight: 800; }
.portada__precio a { font-family: var(--font-body, inherit); text-transform: none; font-stretch: 100%; letter-spacing: 0; font-size: .75em; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; color: inherit; padding-block: .4rem; }
.tablero--doble .tablero__lista li span { white-space: nowrap; }
@media (width < 40rem) { .tablero--doble .tablero__lista li { gap: .3rem; } .tablero--doble { padding-inline: 1rem; } .portada__precio > span { display: none; } .portada__precio { flex-direction: column; align-items: center; gap: 0; } }

/* ---------- Firma del estudio en el pie (11/11/2026) ---------- */
.pie__firma a { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; opacity: .85; transition: opacity var(--duration-hover, 150ms) ease; }
.pie__firma-trazo { inline-size: 6.5rem; aspect-ratio: 640 / 168; background: currentColor; -webkit-mask: url("img/firma-g-urru.png") center/contain no-repeat; mask: url("img/firma-g-urru.png") center/contain no-repeat; }
.pie__firma a span:last-child { font-size: .85rem; letter-spacing: .02em; }
@media (hover: hover) and (pointer: fine) { .pie__firma a:hover { opacity: 1; } }

/* ---------- Portada: servicios sin precios; cada local enseña los suyos (11/11/2026) ---------- */
.tablero--servicios .tablero__lista li { justify-content: center; }
.tablero--servicios .tablero__lista li::before { content: none; }