/* Marisco Recio · corriente: cinemático de producto
   tokens: Fraunces (titulares) + Mona Sans (todo lo demás) · lienzo #061434 · coral único acento
   gesto: la pasarela del timón (horizonx:motion-focus + M14): giras el timón y te sale otro pescado */

:root{
  color-scheme: dark;

  /* color: la marca medida (direccion.md). En hex porque el lienzo tiene que coincidir al
     píxel con el fondo horneado de las fotos (#051433 medido); equivalen a los OKLCH del contrato */
  --ocean-deep:    #061434;  /* lienzo */
  --ocean:         #0A1E3F;
  --ocean-mid:     #102648;
  --silver-bright: #ECEFF3;  /* tinta, 15,7:1 */
  --silver:        #C8CED5;  /* texto secundario */
  --silver-mute:   #8B97A4;  /* texto suave, 6,1:1 */
  --rule:          rgb(200 206 213 / .28);
  --coral:         #C04A35;  /* relleno del CTA */
  --coral-text:    #DC6E57;  /* coral como texto y foco, 5,54:1 */
  --on-coral:      #FBFCFD;  /* 4,79:1 sobre coral */
  --focus:         var(--coral-text);
  --on-silver-mute: #3F4B5A;  /* texto suave sobre plata (chip activo) */

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-text:    "Mona Sans", system-ui, sans-serif;
  /* T5: rem + vw. 6,4rem = 102 px a 1440 = 6x el cuerpo de 17 px (acabado.md §2) */
  --display: clamp(3.6rem, 1.2rem + 6.5vw, 6.4rem);
  --step-3:  clamp(1.95rem, 1.68rem + 1.35vw, 2.66rem);
  --step-2:  clamp(1.56rem, 1.4rem + .8vw, 2rem);
  --step-1:  clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step--1: clamp(.875rem, .85rem + .1vw, .9375rem);

  --radius-ui: 999px;

  --ease-marca: cubic-bezier(.22,.61,.36,1);
  --muelle-timon: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.4%, 1.061 24.1%, 1.078 28.4%, 1.068 32.9%, 1.034 40.3%, 1.004 48.2%, .993 56.8%, 1 75%, 1);
  --dur-hover: 350ms;
  --dur-texto: 1000ms;
  --dur-paso: 1400ms;
  --dur-timon: 900ms;
  --dur-vuelta: 1400ms;      /* el paso automático: una vuelta entera y un poco (405°) */

  --ancho: 1360px;
  --gutter: max(clamp(1rem, 4vw, 2.5rem), calc((100vw - var(--ancho)) / 2));
  --cab: 72px;
}
@media (max-width: 767px){ :root{ --cab: 60px; } }

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--ocean-deep);
  color: var(--silver-bright);
  font: 400 var(--step-0)/1.55 var(--font-text);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img{ display: block; max-width: 100%; height: auto; }
figure{ margin: 0; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.saltar{
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  padding: .75rem 1rem; background: var(--silver-bright); color: var(--ocean-deep);
  font-weight: 600; border-radius: var(--radius-ui);
}
.saltar:focus{ top: .75rem; }

/* ---------- cabecera ---------- */
.cabecera{
  position: relative; z-index: 5;   /* por encima del halo de la pieza, que sube hasta aquí */
  height: var(--cab);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-inline: var(--gutter);
}
.cabecera__marca{ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.cabecera__marca img{ width: 48px; height: 48px; }
.cabecera__nav{ display: flex; gap: clamp(.75rem, 2.4vw, 2.25rem); }
.cabecera__nav a{
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--silver); text-decoration: none;   /* plata y no plata apagada: el halo de la pieza sube hasta aquí (3,9:1 medido) */
  font-size: var(--step--1); font-weight: 500;
  transition: color var(--dur-hover) var(--ease-marca);
}
@media (hover: hover) and (pointer: fine){ .cabecera__nav a:hover{ color: var(--silver-bright); } }
@media (max-width: 767px){ .cabecera__marca img{ width: 42px; height: 42px; } }

/* ---------- hero ---------- */
/* --P es el ancho del PRODUCTO (la caja común de las 7 piezas), no el de la foto: la luz de
   estudio se sale de esa caja a propósito. 46vw a 1440 (direccion.md), con tope por altura */
.hero{
  --P: min(46vw, 662px, calc((100svh - var(--cab) - 16rem) * 1.57));
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--P) * 1.3);   /* 0,3P a la derecha: la pieza que espera */
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 7vh, 4.5rem) var(--gutter) clamp(2rem, 8vh, 5rem);
  overflow-x: clip;          /* ni scroll lateral ni corte del halo por arriba */
}
.hero__texto{ position: relative; z-index: 2; }

.hero__t{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 460;          /* fino: el grosor lo pone el tamaño */
  font-size: var(--display);
  line-height: .95;
  letter-spacing: -.02em;
  text-box: trim-both cap alphabetic;   /* T3 */
}
.lineas > span{ display: block; overflow: hidden; padding-block: .04em .1em; margin-block: -.04em -.1em; }
.lineas > span > span{ display: block; }

.hero__sub{
  margin: clamp(1.25rem, 3.5vh, 2rem) 0 0;
  max-width: 31ch;
  color: var(--silver);
  font-size: var(--step-1);
  line-height: 1.45;
  text-wrap: pretty;
}
.hero__acciones{
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem;
  margin-top: clamp(1.5rem, 4.5vh, 2.75rem);
}

.boton{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem;
  border-radius: var(--radius-ui);
  background: var(--coral); color: var(--on-coral);
  font-weight: 600; font-size: var(--step-0); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  touch-action: manipulation;
  transition: transform var(--dur-hover) var(--muelle-timon);
}
.enlace{
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--silver-bright); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--rule); text-underline-offset: .4em;
  transition: text-decoration-color var(--dur-hover) var(--ease-marca);
}
@media (hover: hover) and (pointer: fine){
  .boton:hover{ transform: translateY(-2px); }
  .enlace:hover{ text-decoration-color: var(--coral-text); }
}
.boton:active{ transform: scale(.98); }

/* ---------- la pasarela ---------- */
.pasarela{
  position: relative; z-index: 1; min-width: 0;
  --timon: clamp(104px, 8vw + 60px, 176px);
}
.pasarela__pista{ list-style: none; margin: 0; padding: 0; }

/* sin JS: la primera pieza grande y las demás en fila */
.pasarela__pista{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.pieza:first-child{ grid-column: 1 / -1; }
.timon{ display: none; }

.pieza img{ width: 100%; height: auto; }   /* sin JS: la foto entera, con su luz de estudio */

/* con JS: la procesión. La activa manda; las siguientes esperan a la derecha, pequeñas y apagadas */
.js .pasarela__pista{
  display: block; position: relative;
  width: var(--P); aspect-ratio: 1020 / 650;   /* caja común del producto dentro de las fotos de 1480x1110 */
  touch-action: pan-y;
}
.js .pieza{
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  transition: transform var(--dur-paso) var(--ease-marca), opacity var(--dur-paso) var(--ease-marca);
}
/* la foto se coloca para que el producto llene la caja: x 230-1250 e y 220-870 de 1480x1110.
   margin-top en % se mide sobre el ANCHO, que es lo que hace falta aquí */
.js .pieza img{
  position: absolute; left: -22.549%; top: 0; margin-top: -21.569%;
  width: 145.098%; max-width: none; height: auto;
}
/* la procesión: la activa manda; la siguiente espera a la derecha, entera dentro de la pantalla */
.js .pieza[data-pos="0"]    { transform: none;                         opacity: 1;   z-index: 3; }
.js .pieza[data-pos="1"]    { transform: translateX(62%) scale(.3);    opacity: .55; z-index: 2; cursor: pointer; }
.js .pieza[data-pos="2"]    { transform: translateX(72%) scale(.2);    opacity: .22; z-index: 1; }
.js .pieza[data-pos="3"]    { transform: translateX(80%) scale(.16);   opacity: 0; }
.js .pieza[data-pos="fuera"]{ transform: translateX(84%) scale(.14);   opacity: 0; }
/* la que se va sale hacia la izquierda, pequeña, y deja de verse en 450 ms: una salida, no una doble exposición */
.js .pieza[data-pos="-1"]{
  transform: translateX(-70%) scale(.5); opacity: 0; z-index: 2;
  transition: transform var(--dur-paso) var(--ease-marca), opacity 450ms var(--ease-marca);
}

.pasarela__mando{
  display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(.75rem, 2.5vh, 1.5rem);
  position: relative; z-index: 4;
}
.js .timon{
  display: block; flex: none;
  width: var(--timon); height: var(--timon); padding: 0;
  background: none; border: 0; border-radius: 50%;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pasarela__rotulo{ display: grid; gap: .5rem; }
.pasarela__aviso{ display: none; }
.js .pasarela__aviso{
  display: block; margin: 0; cursor: pointer;
  color: var(--silver-mute); font-size: var(--step--1); font-weight: 500; letter-spacing: .02em;
  transition: opacity 600ms var(--ease-marca);
}
.pasarela__aviso span{ display: inline-block; color: var(--coral-text); }
.pasarela.usada .pasarela__aviso{ opacity: 0; }   /* tras la primera mano se apaga: ya sabe que gira */
.timon img{
  width: 100%; height: 100%;
  transform: rotate(var(--giro, 0deg));
  transition: transform var(--dur-timon) var(--muelle-timon);   /* M14: se asienta con muelle */
}
@media (hover: hover) and (pointer: fine){
  .timon:hover img{ transform: rotate(calc(var(--giro, 0deg) + 8deg)); }
}
.pasarela__nombre{
  margin: 0;
  font-family: var(--font-display); font-weight: 460;
  font-size: var(--step-2); line-height: 1; letter-spacing: -.01em;
  color: var(--silver-bright);
}
.pasarela__nombre.cambia{ animation: nombre 700ms var(--ease-marca) both; }
@keyframes nombre{ from{ opacity: 0; transform: translateY(.35em); } }

/* ---------- entrada (M2 en el titular, M1 en lo demás); sin JS todo está quieto y visible ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .lineas > span > span{ animation: linea var(--dur-texto) var(--ease-marca) both; }
  .js .lineas > span:nth-child(2) > span{ animation-delay: 100ms; }
  .js .hero__sub, .js .hero__acciones{ animation: sube 800ms var(--ease-marca) both; }
  .js .hero__sub{ animation-delay: 300ms; }
  .js .hero__acciones{ animation-delay: 400ms; }
  .js .pasarela{ animation: aparece 1200ms var(--ease-marca) 150ms both; }
}
@keyframes linea{ from{ transform: translateY(105%); } }
@keyframes sube{ from{ opacity: 0; transform: translateY(14px); } }
@keyframes aparece{ from{ opacity: 0; transform: translateX(24px); } }

@media (prefers-reduced-motion: reduce){
  .js .pieza{ transition: opacity 200ms linear; }
  .timon img{ transition: none; }
  .js .pieza[data-pos="-1"]{ transition: opacity 200ms linear; }
  .pasarela__nombre.cambia{ animation: none; }
}

/* ---------- móvil: la pasarela arriba, el texto y el CTA debajo ---------- */
@media (max-width: 767px){
  .hero{
    --P: min(88vw, 440px);
    grid-template-columns: minmax(0, 1fr);
    align-content: start; row-gap: clamp(1.25rem, 3vh, 2rem);
    padding-block: 1.75rem 1.5rem;
  }
  .pasarela{ order: -1; --timon: 104px; }
  /* en móvil no cabe la que espera sin cortarse contra el borde: solo la activa */
  .js .pieza[data-pos="1"], .js .pieza[data-pos="2"]{ opacity: 0; }
  .hero__sub{ max-width: 34ch; }
}

/* =====================================================================
   RESTO DE LA WEB (después del OK del hero, 27/09)
   ===================================================================== */
.num{ font-variant-numeric: tabular-nums; }      /* T4 */
address{ font-style: normal; }
.cabecera__nav a[aria-current="page"]{ color: var(--silver-bright); text-decoration: underline; text-decoration-color: var(--coral-text); text-underline-offset: .45em; }

/* titulares de sección: Fraunces fina, grande, en líneas (M2) */
.t2{
  margin: 0;
  font-family: var(--font-display); font-weight: 460;
  font-size: clamp(2.4rem, 1.5rem + 3.3vw, 4.4rem);
  line-height: .98; letter-spacing: -.02em;
}
.t1{
  margin: 0;
  font-family: var(--font-display); font-weight: 460;
  font-size: clamp(3rem, 1.5rem + 5vw, 5.6rem);
  line-height: .95; letter-spacing: -.02em;
}
/* M2 al entrar: solo con JS y sin movimiento reducido (sitio.js pone .espera) */
.lineas.espera > span > span{ transform: translateY(105%); transition: transform var(--dur-texto) var(--ease-marca); }
.lineas.espera > span:nth-child(2) > span{ transition-delay: 100ms; }
.lineas.espera.visto > span > span{ transform: none; }

.seccion{ padding: clamp(5rem, 13vh, 9.5rem) var(--gutter) 0; }
.seccion__cab{
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem 3rem;
}
.familias .seccion__cab{ flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.seccion__intro{
  margin: 0; max-width: 40ch;
  color: var(--silver); font-size: var(--step-1); line-height: 1.5; text-wrap: pretty;
}

/* ---------- familias (sección firma en portada) ---------- */
.familias__rejilla{
  list-style: none; margin: clamp(2.25rem, 6vh, 3.75rem) 0 0; padding: 0;
  display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fam--mar{ grid-column: span 2; grid-row: span 2; }
.fam--res{ grid-column: span 2; grid-row: 3; }
.fam__a{
  display: flex; flex-direction: column; gap: .9rem; height: 100%;
  color: inherit; text-decoration: none; border-radius: 14px;
}
.fam__foto{
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 14px; background: var(--silver-bright);
}
.fam__foto picture, .fam__foto .mazo__extra{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.fam__foto picture{ display: block; }
.fam__foto img{ width: 100%; height: 100%; object-fit: contain; padding: 7% 9%; mix-blend-mode: multiply; }
/* la grande: la foto de pasarela sobre su navy, entera (4:3), centrada en su hueco */
.fam__foto--navy{ flex: 1; aspect-ratio: auto; min-height: 0; background: var(--ocean-deep); }
.fam__foto--navy picture, .fam__foto--navy .mazo__extra{ top: 50%; height: auto; transform: translateY(-50%); }
.fam__foto--navy img{ height: auto; aspect-ratio: 4 / 3; object-fit: cover; padding: 0; mix-blend-mode: normal; }
.fam--mar .fam__foto--navy{ border: 1px solid var(--rule); }

.fam__txt{ display: grid; gap: .3rem; }
.fam__n{
  margin: 0; font-family: var(--font-display); font-weight: 460;
  font-size: var(--step-1); line-height: 1.1; letter-spacing: -.01em;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .25em;
  transition: text-decoration-color var(--dur-hover) var(--ease-marca);
}
.fam--mar .fam__n{ font-size: var(--step-3); }
.fam__meta{ margin: 0; color: var(--silver-mute); font-size: var(--step--1); line-height: 1.45; }
.fam--mar .fam__meta{ font-size: var(--step-0); color: var(--silver); }
@media (hover: hover) and (pointer: fine){ .fam__a:hover .fam__n{ text-decoration-color: var(--coral-text); } }
/* la de res, apaisada: foto a la izquierda y texto al lado */
.fam--res .fam__a{ flex-direction: row; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); }
.fam--res .fam__foto{ flex: 0 0 55%; }
.fam--res .fam__n{ font-size: var(--step-2); }

/* hover-deck: las cartas se funden unas en otras (solo opacity) */
.mazo__extra{ opacity: 0; transition: opacity var(--dur-hover) var(--ease-marca); }
.mazo picture{ transition: opacity var(--dur-hover) var(--ease-marca); }
.mazo.barajando picture:not(.en-mesa){ opacity: 0; }
.mazo .mazo__extra.en-mesa{ opacity: 1; }
.fam__foto .mazo__extra{ object-fit: contain; padding: 7% 9%; }
.fam__foto--navy .mazo__extra{ padding: 0; }

.familias__pie{ margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; }

/* ---------- cocinas profesionales ---------- */
.cocinas{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.cocinas__intro{ display: grid; gap: clamp(1.25rem, 3vh, 1.75rem); }
.cifra{ display: flex; align-items: flex-end; gap: 1rem; margin: clamp(.5rem, 2vh, 1.25rem) 0 0; }
.cifra__n{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.4rem, 2rem + 4.5vw, 6rem); line-height: .8; letter-spacing: -.03em;
}
.cifra__t{ color: var(--silver); font-size: var(--step-0); line-height: 1.35; padding-bottom: .15em; }
.pasos{ list-style: none; margin: 0; padding: 0; }
.paso{
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem;
  padding: clamp(1.25rem, 3vh, 1.9rem) 0; border-top: 1px solid var(--rule);
}
.paso:last-child{ border-bottom: 1px solid var(--rule); }
.paso__n{ grid-row: span 2; color: var(--silver-mute); font-size: var(--step--1); font-weight: 600; padding-top: .45em; }
.paso h3{ margin: 0; font-family: var(--font-display); font-weight: 460; font-size: var(--step-2); line-height: 1.1; letter-spacing: -.01em; }
.paso p{ margin: .45rem 0 0; color: var(--silver); max-width: 44ch; }
.marcas{ grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem clamp(2.5rem, 6vw, 6rem); align-items: baseline; }
.marcas__t{ margin: 0; color: var(--silver-mute); font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; }
.marcas__lista{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .55rem 1.5rem; color: var(--silver); font-size: var(--step-0); }

/* ---------- respiro: 100svh, una foto y una frase ---------- */
.respiro{
  position: relative; overflow: clip;
  min-height: 100svh; margin-top: clamp(5rem, 13vh, 9.5rem);
  display: grid; align-items: end;
  padding: 0 var(--gutter) clamp(2.5rem, 9vh, 5.5rem);
}
.respiro__foto{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.respiro__foto picture{ display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, 1480px, calc(100svh * 1.2)); }
.respiro__foto img{ width: 100%; height: auto; }
.respiro__frase{
  position: relative; margin: 0; max-width: 19ch;
  font-family: var(--font-display); font-weight: 460;
  font-size: var(--step-3); line-height: 1.12; letter-spacing: -.015em;
  text-wrap: balance;
}

/* ---------- local para particulares ---------- */
.local{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.local__txt{ display: grid; gap: clamp(1.25rem, 3vh, 1.75rem); }
.datos{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: .5rem; }
.dato__t{ margin: 0 0 .5rem; color: var(--silver-mute); font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; }
.dato p, .dato address{ margin: 0; color: var(--silver-bright); line-height: 1.5; }
.dato__k{ color: var(--silver); }
.local__acciones{ display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: .5rem; }
.local__mapa{
  position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule);
  background:
    radial-gradient(circle at 50% 44%, rgb(16 38 72 / 0) 0 22%, var(--ocean) 70%),
    repeating-linear-gradient(90deg, rgb(200 206 213 / .07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgb(200 206 213 / .07) 0 1px, transparent 1px 64px),
    linear-gradient(112deg, transparent 47%, rgb(200 206 213 / .16) 47% 48.2%, transparent 48.2%),
    var(--ocean-mid);
}
.local__mapa-t{
  min-height: clamp(300px, 44vh, 420px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 2rem; text-align: center;
}
.local__mapa-t p{ margin: 0; color: var(--silver-bright); font-weight: 500; }
.local__pin{ width: 34px; height: 44px; color: var(--silver-bright); }
.boton-linea{
  display: none; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem;
  border-radius: var(--radius-ui); border: 1px solid var(--silver-mute); background: none;
  color: var(--silver-bright); font: 600 var(--step--1)/1 var(--font-text); cursor: pointer; touch-action: manipulation;
}
.js .boton-linea{ display: inline-flex; }
.local__mapa iframe{ display: block; width: 100%; height: clamp(320px, 52vh, 500px); border: 0; }

/* ---------- preguntas ---------- */
.faq{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vh, 3rem); }
.faq__lista{ max-width: 56rem; }
.faq__i{ border-top: 1px solid var(--rule); }
.faq__i:last-child{ border-bottom: 1px solid var(--rule); }
.faq__i summary{
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px; padding: 1.15rem 0;
  font-size: var(--step-1); font-weight: 500; cursor: pointer; list-style: none;
}
.faq__i summary::-webkit-details-marker{ display: none; }
.faq__i summary::after{
  content: ""; flex: none; width: .6rem; height: .6rem;
  border-right: 1.5px solid var(--silver); border-bottom: 1.5px solid var(--silver);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--dur-hover) var(--ease-marca);
}
.faq__i[open] summary::after{ transform: rotate(-135deg) translateY(-25%); }
.faq__r p{ margin: 0 0 1.25rem; max-width: 60ch; color: var(--silver); }

/* ---------- pie: más de 60svh y cierra con la marca a todo lo ancho ---------- */
.pie{
  margin-top: clamp(5rem, 13vh, 9.5rem);
  min-height: 70svh;
  display: flex; flex-direction: column;
  padding: clamp(4rem, 11vh, 7rem) var(--gutter) clamp(1.25rem, 3vh, 2rem);
  background: var(--ocean);
  border-top: 1px solid var(--rule);
}
.pie__cta{ display: grid; gap: clamp(1rem, 2.5vh, 1.5rem); max-width: 60rem; }
.pie__cta-p{ margin: 0; color: var(--silver); font-size: var(--step-1); max-width: 40ch; }
.pie__acciones{ display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: .5rem; }
.pie__cols{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  margin-top: clamp(3.5rem, 10vh, 6rem); padding-top: 2rem; border-top: 1px solid var(--rule);
}
.pie__col h3{ margin: 0 0 .75rem; color: var(--silver-mute); font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; }
.pie__col p, .pie__col address{ margin: 0; color: var(--silver); font-size: var(--step--1); line-height: 1.6; }
.pie__col a{ display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--silver); transition: color var(--dur-hover) var(--ease-marca); }
@media (hover: hover) and (pointer: fine){ .pie__col a:hover{ color: var(--silver-bright); } }
.pie__marca-w{ container-type: inline-size; margin-top: auto; padding-top: clamp(3rem, 9vh, 6rem); }
.pie__marca{
  margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 460;
  font-size: calc(100cqi / 5.1); line-height: .8; letter-spacing: -.035em;
  color: var(--silver-bright);
  text-box: trim-both cap alphabetic;
}
.pie__base{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: clamp(1.25rem, 3vh, 2rem); padding-top: 1rem; border-top: 1px solid var(--rule);
  color: var(--silver-mute); font-size: var(--step--1);
}
.pie__base p{ margin: 0; display: flex; align-items: center; }
.pie__base a{ display: inline-flex; align-items: center; min-height: 44px; color: var(--silver); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .35em; }

/* ---------- barra fija en móvil (secciones.md §17) ---------- */
.barra-cta{ display: none; }
@media (max-width: 767px){
  .barra-cta{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1.6fr; gap: .5rem;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--ocean-deep); border-top: 1px solid var(--rule);
    transition: transform 300ms var(--ease-marca);
  }
  .js .barra-cta:not([data-visible]){ transform: translateY(110%); }
  body{ padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 1023px){
  .barra-cta[data-siempre]{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1.6fr; gap: .5rem;
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background: var(--ocean-deep); border-top: 1px solid var(--rule);
  }
  body:has(.barra-cta[data-siempre]){ padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.barra-cta__b{
  min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--radius-ui); border: 1px solid var(--rule); background: none;
  color: var(--silver-bright); font: 600 var(--step--1)/1 var(--font-text); text-decoration: none;
  cursor: pointer; touch-action: manipulation;
}
.barra-cta__b--wa{ background: var(--coral); color: var(--on-coral); border-color: transparent; }
.barra-cta__n{
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem;
  border-radius: var(--radius-ui); background: var(--silver-bright); color: var(--ocean-deep); font-size: .875rem;
}
.barra-cta__n.late{ animation: late 450ms var(--muelle-timon); }
@keyframes late{ from{ transform: scale(1.35); } }

/* ---------- catálogo ---------- */
.cat{ padding: clamp(2rem, 7vh, 4.5rem) var(--gutter) 0; }
.cat__cab{ display: grid; gap: clamp(1rem, 2.5vh, 1.5rem); }
.cat__sub{ margin: 0; color: var(--silver); font-size: var(--step-1); max-width: 46ch; }
.cat__herr{ display: none; }
.js .cat__herr{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 5vh, 2.75rem);
}
.chips{ display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 100%; }
.chip{
  min-height: 44px; padding: 0 1rem; display: inline-flex; align-items: center; gap: .45rem;
  border-radius: var(--radius-ui); border: 1px solid var(--rule); background: none;
  color: var(--silver); font: 500 var(--step--1)/1 var(--font-text); cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-hover) var(--ease-marca), border-color var(--dur-hover) var(--ease-marca);
}
.chip .num{ color: var(--silver-mute); }
.chip[aria-pressed="true"]{ background: var(--silver-bright); color: var(--ocean-deep); border-color: var(--silver-bright); }
.chip[aria-pressed="true"] .num{ color: var(--on-silver-mute); }
@media (hover: hover) and (pointer: fine){ .chip:hover{ border-color: var(--silver); color: var(--silver-bright); } .chip[aria-pressed="true"]:hover{ color: var(--ocean-deep); } }
.buscar{ display: grid; gap: .4rem; flex: 0 1 20rem; }
.buscar__l{ color: var(--silver-mute); font-size: var(--step--1); font-weight: 600; }
.buscar__i{
  min-height: 48px; width: 100%; padding: 0 1.2rem;
  border-radius: var(--radius-ui); border: 1px solid var(--rule); background: var(--ocean);
  color: var(--silver-bright); font: 400 var(--step-0)/1 var(--font-text);
}
.buscar__i::placeholder{ color: var(--silver-mute); opacity: 1; }
.cat__cuenta{ margin: 0; flex-basis: 100%; min-height: 1.5em; color: var(--silver-mute); font-size: var(--step--1); }

.cat__cuerpo{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: 1rem; }
.js .cat__cuerpo{ grid-template-columns: minmax(0, 1fr) 340px; }
.grupo{ margin-bottom: clamp(2.5rem, 7vh, 4rem); scroll-margin-top: 1.5rem; }
.grupo__t{ margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 460; font-size: var(--step-2); letter-spacing: -.01em; }
.grupo__t .num{ font-family: var(--font-text); font-size: var(--step--1); color: var(--silver-mute); margin-left: .35rem; vertical-align: .35em; }
.rejilla{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.75rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.ficha{ display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--ocean); border: 1px solid var(--rule); }
.ficha[hidden], .grupo[hidden]{ display: none; }
.ficha__foto{ aspect-ratio: 1; background: var(--silver-bright); }
.ficha__foto picture{ display: block; width: 100%; height: 100%; }
.ficha__foto img{ width: 100%; height: 100%; object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.ficha__cuerpo{ display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1rem 1rem 1.1rem; }
.ficha__n{ margin: 0; font-size: var(--step-0); font-weight: 600; line-height: 1.3; letter-spacing: 0; text-wrap: pretty; }
.ficha__d{
  margin: 0; color: var(--silver); font-size: var(--step--1); line-height: 1.5;
}
.ficha__datos{ margin: 0; display: grid; gap: .2rem; font-size: .875rem; line-height: 1.4; }
.ficha__datos dt{ display: inline; color: var(--silver-mute); }
.ficha__datos dt::after{ content: ": "; }
.ficha__datos dd{ display: inline; margin: 0; color: var(--silver); overflow-wrap: anywhere; }
.ficha__precio{ margin: .15rem 0 0; font-size: var(--step--1); font-weight: 600; color: var(--silver-bright); }
.ficha__acc{ display: grid; gap: .25rem; margin-top: auto; padding-top: .35rem; }
.ficha__anadir{ display: none; }
.js .ficha__anadir{
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1rem; width: 100%;
  border-radius: var(--radius-ui); border: 1px solid var(--silver-mute); background: none;
  color: var(--silver-bright); font: 600 var(--step--1)/1.1 var(--font-text); cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-hover) var(--muelle-timon);
}
.ficha__anadir:active{ transform: scale(.97); }
.ficha__anadir.en-hoja{ background: var(--silver-bright); color: var(--ocean-deep); border-color: var(--silver-bright); }
.ficha__wa{
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  color: var(--silver); font-size: var(--step--1); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .35em;
}
@media (hover: hover) and (pointer: fine){ .ficha__wa:hover{ color: var(--silver-bright); text-decoration-color: var(--coral-text); } }
.cat__vacio{ padding: 2rem 0 4rem; color: var(--silver); }
.cat__vacio[hidden]{ display: none; }
.cat__vacio p{ margin: 0 0 .5rem; }

/* la hoja de pedido: lateral fijo en escritorio */
.hoja, .hoja-fondo{ display: none; }
.js .hoja{
  display: flex; flex-direction: column; gap: .9rem;
  position: sticky; top: 1rem;
  max-height: calc(100svh - 2rem); overflow: auto; overscroll-behavior: contain;
  padding: 1.35rem 1.25rem 1.25rem;
  border-radius: 14px; background: var(--ocean-mid); border: 1px solid var(--rule);
}
.hoja:focus:not(:focus-visible){ outline: none; }
.hoja__cab{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hoja__t{ margin: 0; font-family: var(--font-display); font-weight: 460; font-size: var(--step-2); line-height: 1.05; letter-spacing: -.01em; }
.hoja__cerrar{ display: none; }
.hoja__vacia{ margin: 0; color: var(--silver); font-size: var(--step--1); }
.hoja__lista{ list-style: none; margin: 0; padding: 0; }
.hoja__lista:empty{ display: none; }
.linea{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--rule); }
.linea:last-child{ border-bottom: 1px solid var(--rule); }
.linea__n{ margin: 0; font-size: var(--step--1); font-weight: 600; line-height: 1.3; }
.linea__p{ margin: .15rem 0 0; font-size: .875rem; color: var(--silver-mute); }
.cant{ display: flex; align-items: center; gap: .15rem; }
.cant__b{
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--rule); background: none;
  color: var(--silver-bright); font: 500 1.15rem/1 var(--font-text); cursor: pointer; touch-action: manipulation;
}
.cant__v{ min-width: 2ch; text-align: center; font-weight: 600; }
.hoja__campos{ display: grid; gap: .4rem; }
.hoja__campos label{ color: var(--silver); font-size: var(--step--1); font-weight: 500; margin-top: .35rem; }
.hoja__campos label span{ color: var(--silver-mute); font-weight: 400; }
.hoja__campos input, .hoja__campos textarea{
  width: 100%; min-height: 44px; padding: .65rem .9rem;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--ocean-deep);
  color: var(--silver-bright); font: 400 var(--step-0)/1.4 var(--font-text); resize: vertical;
}
.hoja__enviar{ width: 100%; margin-top: .35rem; cursor: pointer; border: 0; }
.hoja__enviar:disabled{ opacity: .45; cursor: not-allowed; transform: none; }
.hoja__estado{ margin: 0; color: var(--silver); font-size: var(--step--1); }
.hoja__estado:empty{ display: none; }
.hoja__vaciar{
  align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--silver-mute); font: 500 var(--step--1)/1 var(--font-text);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .35em;
}
.hoja__vaciar[hidden], .hoja__vacia[hidden]{ display: none; }

/* ---------- legales y 404 ---------- */
.legal, .nf{ padding: clamp(2.5rem, 8vh, 5rem) var(--gutter) 0; }
.legal__fecha{ margin: 1.25rem 0 0; color: var(--silver-mute); font-size: var(--step--1); }
.legal__cuerpo{ max-width: 68ch; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.legal__cuerpo h2{ margin: 2.5rem 0 .75rem; font-family: var(--font-display); font-weight: 460; font-size: var(--step-1); letter-spacing: -.01em; }
.legal__cuerpo p, .legal__cuerpo li{ color: var(--silver); }
.legal__cuerpo ul{ padding-left: 1.2rem; }
.legal__cuerpo a{ color: var(--silver-bright); text-decoration-color: var(--coral-text); text-underline-offset: .3em; }
.nf{ min-height: 55svh; }
.nf__p{ margin: 1.5rem 0 0; color: var(--silver); font-size: var(--step-1); }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .lineas.espera > span > span{ transform: none; transition: none; }
  .barra-cta, .mazo__extra, .mazo picture{ transition: none; }
  .barra-cta__n.late{ animation: none; }
  .faq__i summary::after{ transition: none; }
}

/* ---------- tablet y móvil ---------- */
@media (max-width: 1023px){
  .js .cat__cuerpo{ grid-template-columns: minmax(0, 1fr); }
  /* la hoja pasa a hoja inferior */
  .js .hoja{
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50;
    max-height: 86svh; border-radius: 14px 14px 0 0; border-bottom: 0;
    padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
    transform: translateY(105%); visibility: hidden;
    transition: transform 350ms var(--ease-marca), visibility 0s linear 350ms;
  }
  .js .hoja.abierta{ transform: none; visibility: visible; transition: transform 350ms var(--ease-marca), visibility 0s; }
  .js .hoja-fondo{ display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 45; background: rgb(2 8 22 / .6); opacity: 0; transition: opacity 350ms var(--ease-marca); }
  .js .hoja-fondo[hidden]{ display: none; }
  .js .hoja-fondo.ve{ opacity: 1; }
  .hoja__cerrar{
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
    border-radius: var(--radius-ui); border: 1px solid var(--rule); background: none;
    color: var(--silver-bright); font: 600 var(--step--1)/1 var(--font-text); cursor: pointer;
  }
  .cocinas, .local, .faq{ grid-template-columns: minmax(0, 1fr); }
  .marcas{ grid-template-columns: minmax(0, 1fr); }
  .pie__cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px){
  .js .hoja, .js .hoja.abierta, .js .hoja-fondo{ transition: none; }
}
@media (max-width: 767px){
  .familias__rejilla{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fam--mar{ grid-column: 1 / -1; grid-row: auto; }
  .fam--res{ grid-column: 1 / -1; grid-row: auto; }
  .fam--mar .fam__foto--navy{ flex: none; aspect-ratio: 4 / 3; }
  .fam__ej{ display: none; }
  .fam__a{ gap: .65rem; }
  .datos{ grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .local__mapa iframe{ height: 300px; }
  .local__mapa-t{ min-height: 240px; }
  .respiro{ margin-top: 0; }
  .respiro__foto picture{ width: 150vw; top: 40%; }
  .rejilla{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .ficha__cuerpo{ padding: .8rem .75rem .9rem; gap: .5rem; }
  .ficha__datos div:nth-child(n+3){ display: none; }
  .js .ficha__anadir{ padding: 0 .5rem; }
  .pie{ min-height: 80svh; }
  .js .chips{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); flex-basis: 100%; }
  .js .chips::-webkit-scrollbar{ display: none; }
  .chip{ flex: none; }
  .buscar{ flex-basis: 100%; }
}
@media (max-width: 479px){
  .pie__cols{ grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 400px){
  .ficha__datos{ font-size: .875rem; }
}

/* ---------- pasarela: las piezas apagadas del todo salen del árbol visible ----------
   Misma imagen en pantalla: visibility cambia justo cuando la opacidad ya llegó a 0 (y al
   volver, al instante). Así no cuentan como fotos pintadas ni se pueden tocar a ciegas. */
.js .pieza{ transition: transform var(--dur-paso) var(--ease-marca), opacity var(--dur-paso) var(--ease-marca), visibility 0s linear 0s; }
.js .pieza[data-pos="3"], .js .pieza[data-pos="fuera"]{ visibility: hidden; transition-delay: 0s, 0s, var(--dur-paso); }
.js .pieza[data-pos="-1"]{
  visibility: hidden;
  transition: transform var(--dur-paso) var(--ease-marca), opacity 450ms var(--ease-marca), visibility 0s linear 450ms;
}
@media (max-width: 767px){
  .js .pieza[data-pos="1"], .js .pieza[data-pos="2"]{ visibility: hidden; transition-delay: 0s, 0s, var(--dur-paso); }
}
@media (prefers-reduced-motion: reduce){
  .js .pieza{ transition: opacity 200ms linear, visibility 0s linear 0s; }
  .js .pieza[data-pos="3"], .js .pieza[data-pos="fuera"], .js .pieza[data-pos="-1"]{ transition: opacity 200ms linear, visibility 0s linear 200ms; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px){
  .js .pieza[data-pos="1"], .js .pieza[data-pos="2"]{ transition: opacity 200ms linear, visibility 0s linear 200ms; }
}

/* ---------- catálogo en móvil: 4 fichas por familia y el resto a un toque ---------- */
.grupo__mas{ margin-top: 1rem; width: 100%; }
.grupo__mas[hidden]{ display: none; }
/* estados de la hoja: enviando, deshacer y el atajo de teclado (solo con teclado físico) */
.hoja__enviar.enviando{ cursor: progress; opacity: .8; }
.hoja__deshacer{
  justify-self: start; align-self: flex-start; min-height: 44px; padding: 0 1rem;
  border-radius: var(--radius-ui); border: 1px solid var(--silver-mute); background: none;
  color: var(--silver-bright); font: 600 var(--step--1)/1 var(--font-text); cursor: pointer; touch-action: manipulation;
}
.hoja__deshacer[hidden]{ display: none; }
.hoja__atajo{ margin: 0; color: var(--silver-mute); font-size: .875rem; }
.hoja__atajo{ display: none; }
@media (hover: hover) and (pointer: fine){ .hoja__atajo{ display: block; } }

/* ---------- móvil estrecho: una columna, foto a la izquierda (112 px) y el texto a la derecha ---------- */
@media (max-width: 479px){
  .rejilla{ grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .ficha{ display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
  .ficha__foto{ margin: .8rem 0 .8rem .8rem; border-radius: 10px; overflow: hidden; }
  .ficha__cuerpo{ padding: .8rem .9rem .9rem; }
  .ficha__datos div:nth-child(n+3){ display: block; }
}
/* ---------- respiro en móvil: el cangrejo y su frase juntos, sin franjas de navy vacío ---------- */
@media (max-width: 767px){
  /* la foto entra en el flujo y la frase se monta sobre su halo de abajo; el halo de arriba es
     transparente y se solapa con el final de las marcas (sin franjas de navy vacío) */
  .respiro{ display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 90svh; margin-top: -5rem; padding-bottom: 0; }
  .respiro__foto{ position: relative; top: auto; left: auto; right: auto; bottom: auto; margin-inline: calc(-1 * var(--gutter)); }
  .respiro__foto picture{ position: relative; left: 50%; top: auto; transform: translateX(-50%); width: 190vw; }
  .respiro__frase{ margin-top: -6.5rem; }
}