/* Valores de brand/brand.tokens.json. No hardcodear: si falta algo, va primero a los tokens.
   Actualizado en G6 (2026-09-25): paleta y tipografía de G5 (dorado sobre Gabarito/Figtree
   descartados), estructura del fold aprobada en brand/direccion/fold.html. */
:root {
  --blanco: #FAF7EF;
  --blanco-sombra: #F1E9D6;
  --papel: #FFFEFA;
  --tinta: #201B14;
  --negro: #17140F;
  --gris: #6E6656;
  --dorado: #C9A227;
  --dorado-claro: #E6C766;
  --dorado-hondo: #8A6B1B;
  --borde: #E5DAB9;
  /* Solapas de color (Fondos, 2026-10-02) */
  --negro-elevado: #2A241B;
  --negro-texto-2: #CFC5AE;
  --negro-borde: #4A4030;
  --dorado-texto-2: #3B3226;
  /* Firma del estudio en el pie: el lavanda de gastro (no es un color de Fredy; lima sobre negro no, ver registro) */
  --gastro-lavanda: #F8D4FE;

  --superficie: var(--blanco);
  --superficie-elevada: var(--blanco-sombra);
  --texto: var(--tinta);
  --texto-2: var(--gris);
  --acento: var(--dorado);
  --texto-acento: var(--dorado-hondo);

  --e1: 6px; --e2: 12px; --e3: 20px; --e4: 32px; --e5: 52px; --e6: 84px; --e7: 136px;

  --titular: "Balthazar", Georgia, serif;
  --display: "Libre Franklin", system-ui, sans-serif;
  --texto-familia: "Libre Franklin", system-ui, sans-serif;
  --comanda: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --rapido: 160ms cubic-bezier(.3,.7,.4,1);
  --corte: 620ms cubic-bezier(.7,0,.2,1);
  --impresion: 900ms steps(14, end);
  --impresion-linea: 180ms steps(3, end);
  --cinta: 1100ms cubic-bezier(.16,.84,.24,1);
  --marca: 700ms ease-out;
  --subrayado: 220ms cubic-bezier(.7,0,.2,1);

  --radio-chico: 4px;
  --radio-grande: 22px;
}

/* Fuentes alojadas en el sitio (2026-10-02, fase 4): subconjunto latin de Google Fonts, licencia OFL.
   Sacarlas de Google ahorra dos conexiones y la hoja que bloqueaba el primer pintado. */
@font-face { font-family: "Balthazar"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/balthazar.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/plex-mono-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/plex-mono-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 400; font-display: swap; src: url("fuentes/libre-franklin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fuentes/libre-franklin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/funnel-display-gastro.woff2") format("woff2"); } /* solo las letras de «gastro», para la firma */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--superficie); }
body {
  margin: 0;
  background: var(--superficie);
  color: var(--texto);
  font: 400 1.0625rem/1.55 var(--texto-familia);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: var(--e2); top: var(--e2); background: var(--negro); color: var(--blanco); padding: 10px 16px; border-radius: var(--radio-chico); z-index: 10; }
:focus-visible { outline: 2px solid var(--dorado-hondo); outline-offset: 3px; }
main:focus { outline: none; }

/* Cabecera */
.cabecera {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: 28px clamp(16px, 4vw, 40px);
}
.sello img { width: 120px; height: 120px; display: block; }
[hidden] { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.header-cta { font: 700 0.875rem/1.4 var(--display); text-decoration: none; border-bottom: 1px solid var(--dorado); }

/* Portada */
.portada {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  padding: 24px clamp(16px, 4vw, 40px) 72px;
}
h1 {
  font: 800 clamp(3rem, 6.5vw, 6.2rem)/0.96 var(--display);
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.bajada { font: 400 1.2rem/1.55 var(--texto-familia); max-width: 46ch; margin: 0 0 32px; }
.bajada .destacado { color: var(--texto-acento); font-weight: 600; }

.acciones-principales { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.acciones-principales .etiqueta {
  width: 100%; font: 600 0.75rem/1.4 var(--comanda); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-2); margin-bottom: 2px;
}
.boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 26px; border-radius: var(--radio-chico);
  font: 700 1rem/1 var(--display); text-decoration: none; border: 0;
  transition: background var(--rapido), transform 80ms;
}
.boton:active { transform: translateY(1px); }
.boton.dorado { background: var(--acento); color: var(--texto); }
.boton.dorado:hover { background: var(--dorado-claro); }
.boton.contorno { background: transparent; color: var(--texto); border: 1.5px solid var(--borde); }

.accion-secundaria {
  font: 600 0.9375rem/1.4 var(--display); text-decoration: none;
  color: var(--texto); border-bottom: 1px solid var(--borde); padding-bottom: 2px;
  background: linear-gradient(var(--dorado), var(--dorado)) no-repeat 0 100% / 0 2px;
  transition: background-size var(--subrayado);
}
.accion-secundaria:hover { background-size: 100% 2px; }

.portada-foto { margin: 0; position: relative; }
.portada-foto :is(img, video) { display: block; border-radius: var(--radio-chico); width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--superficie-elevada); }
.portada-foto figcaption { font: 500 0.8125rem/1.4 var(--display); color: var(--texto-2); margin-top: 12px; }

/* La cuchilla: la foto entra con un solo trazo recto (token "corte") */
.portada-foto :is(img, video) { animation: cortar var(--corte) 200ms both; }
@keyframes cortar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }


/* Lunch a medida (2026-10-02): una card por producto, de a 6, y la comanda que se va armando al costado */
.lunch {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 28px 48px; align-items: start;
  padding: 72px clamp(16px, 4vw, 40px) 88px;
}
.lunch-cabeza { grid-column: 1 / -1; }
.lunch-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lunch-item {
  display: flex; flex-direction: column; background: var(--papel); color: var(--tinta);
  border-radius: var(--radio-chico); overflow: hidden; box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--rapido);
}
.lunch-item.elegido { box-shadow: 0 0 0 2px var(--negro); }
.lunch-foto { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--blanco-sombra); }
.lunch-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lunch-cuenta {
  position: absolute; left: 8px; top: 8px; min-width: 2.2em; padding: 5px 8px; text-align: center;
  background: var(--negro); color: var(--blanco); border-radius: var(--radio-chico); font: 600 0.875rem/1 var(--comanda);
  visibility: hidden;
}
.lunch-item.elegido .lunch-cuenta { visibility: visible; }
.lunch-item-pie { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 14px; flex: 1; }
.lunch-item-pie h3 { margin: 0; font: 400 1.2rem/1.05 var(--titular); letter-spacing: 0.04em; text-transform: uppercase; }
.lunch-precio { margin: 0; font: 500 0.8125rem/1.3 var(--comanda); color: var(--gris); }
.lunch-nota { margin: 0; font: 400 0.75rem/1.35 var(--texto-familia); color: var(--gris); }
.lunch-cantidad { margin-top: auto; align-self: flex-start; }
.lunch-item .lunch-cantidad { margin-top: 8px; }
.cantidad.lunch-cantidad button { width: 44px; height: 44px; font-size: 1.15rem; }
.cantidad.lunch-cantidad output { min-width: 3ch; }
.lunch-sello { display: grid; place-items: center; background: var(--negro); border-radius: var(--radio-chico); }
.lunch-sello img { width: 62%; height: auto; filter: invert(1); }
.lunch-ticket { position: sticky; top: 24px; }
.comanda-items.lunch-lineas li { grid-template-columns: 4ch 1fr auto; }
.lunch .pedido-vacio { padding: 10px 0; border-bottom: 1px dashed var(--gris); margin: 0; }
.lunch .comanda-total { align-items: baseline; }
.lunch-personas { margin: 0 0 6px; font-weight: 600; }

.headline { font: 800 clamp(1.9rem, 3.4vw, 2.7rem)/1.05 var(--display); margin: 0 0 16px; }
.lunch p.copy { font: 400 1.05rem/1.6 var(--texto-familia); max-width: 48ch; color: var(--texto); margin: 0 0 28px; }


@media (max-width: 900px) {
  .cabecera { padding: 20px 22px; }
  .sello img { width: 84px; height: 84px; }
  .portada { grid-template-columns: 1fr; padding: 8px 22px 48px; gap: 32px; }
  .lunch { grid-template-columns: 1fr; padding: 48px 22px 56px; gap: 24px; }
  .lunch-items { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lunch-item-pie h3 { font-size: 1.05rem; }
  .lunch-ticket { position: static; }
}
@media (pointer: coarse) {
  .header-cta, .accion-secundaria { min-height: 44px; display: inline-flex; align-items: center; }
  /* Fase 4 (2026-10-02): todo lo que se toca llega a 44 px en pantallas táctiles */
  .boton-ig { min-height: 44px; }
  .sello-nuevo { min-height: 44px; display: flex; align-items: center; }
  .sabores-lista .sabor { padding: 0; }
  .sabor label { min-height: 44px; align-items: center; }
  .sabor input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
  .cantidad button { width: 44px; height: 44px; }
  .ticket-pie a, .letra-chica a, .pie-ig { display: inline-block; padding: 12px 0; margin: -12px 0; }
}


/* Proceso: el texto queda quieto y al lado corre el reel de Fredy, paso por paso.
   Hasta 2026-10-01 eran 6 fotos (assets/prompts-proceso/, respaldo en respaldo-src-2026-10-02/). */
.proceso {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(260px, 0.8fr) 2fr; gap: 64px; align-items: start;
  padding: 24px clamp(16px, 4vw, 40px) 112px;
}
.proceso-texto { position: sticky; top: 40px; }
.proceso-cita { margin: 0 0 24px; }
.proceso-cita h2 { font: 800 clamp(2rem, 3.6vw, 3.1rem)/1.02 var(--display); letter-spacing: -0.015em; margin: 0 0 12px; }
.proceso-cita footer { font: 600 0.8125rem/1.4 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-acento); }
.proceso-cita footer::before { content: "— "; }
.proceso .copy { font: 400 1.05rem/1.6 var(--texto-familia); max-width: 38ch; margin: 0 0 24px; }

/* El proceso en video (2026-10-02): el reel a la izquierda, los 6 pasos al lado como índice.
   La palabra del paso va sobre el video y entra con el corte de la cuchilla (token "corte"). */
.proceso-video { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 40px; align-items: center; }
.proceso-video .video-caja { position: relative; }
.proceso-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radio-grande); background: var(--negro); }
.proceso-palabra {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 72px 20px 22px;
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
  border-radius: 0 0 var(--radio-grande) var(--radio-grande);
  background: linear-gradient(to top, color-mix(in srgb, var(--negro) 82%, transparent), color-mix(in srgb, var(--negro) 0%, transparent));
}
.proceso-palabra .n { font: 800 1rem/1 var(--display); color: var(--dorado); }
.proceso-palabra .t { font: 800 clamp(1.7rem, 2.6vw, 2.3rem)/1 var(--display); letter-spacing: -0.02em; color: var(--blanco); text-wrap: balance; }
.proceso-palabra.corta { animation: cortar var(--corte) both; }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: none; }
.paso { border-top: 1px solid var(--borde); padding: 0; }
.paso:last-child { border-bottom: 1px solid var(--borde); }
.paso-boton {
  display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 44px; padding: 10px 0 12px; border: 0; background: none;
  color: var(--texto-2); text-align: left; cursor: pointer; transition: color var(--rapido);
}
.paso-n { font: 800 1rem/1 var(--display); color: var(--texto-2); min-width: 2ch; }
.paso-titulo { font: 800 clamp(1.15rem, 1.8vw, 1.6rem)/1.15 var(--display); }
.paso-cita { font: italic 400 1rem/1.5 var(--texto-familia); color: var(--texto-2); margin: 6px 0 0 calc(2ch + 14px); display: none; }
.paso-boton:hover, .paso[aria-current] .paso-boton { color: var(--texto); }
.paso[aria-current] .paso-n { color: var(--texto-acento); }
.paso[aria-current] .paso-cita { display: block; margin-top: -6px; padding-bottom: 12px; }

/* Botones sobre los videos: pausa (todos, WCAG 2.2.2) y sonido (solo lo nuevo) */
.video-caja { position: relative; }
.video-pausa {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: color-mix(in srgb, var(--negro) 55%, transparent); color: var(--blanco); cursor: pointer;
  transition: background var(--rapido);
}
.video-pausa:hover { background: color-mix(in srgb, var(--negro) 80%, transparent); }
.video-pausa svg { width: 18px; height: 18px; fill: currentColor; }
.video-pausa .i-play, .video-pausa[data-estado="pausado"] .i-pausa { display: none; }
.video-pausa[data-estado="pausado"] .i-play { display: inline; }
.video-sonido {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--acento); color: var(--texto);
  font: 700 0.875rem/1 var(--display); cursor: pointer; transition: background var(--rapido);
}
.video-sonido:hover { background: var(--dorado-claro); }
.video-sonido svg { width: 18px; height: 18px; }
.video-sonido[aria-pressed="false"] .ondas { opacity: .35; }

@media (max-width: 900px) {
  .proceso { grid-template-columns: 1fr; gap: 32px; padding: 8px 22px 72px; }
  .proceso-texto { position: static; }
  .proceso-video { grid-template-columns: 1fr; gap: 20px; }
  .proceso-video .video-caja { max-width: 420px; width: 100%; margin: 0 auto; }
  .pasos { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .paso:last-child { border-bottom: 0; }
  .paso-cita { display: none !important; }
}
@media (pointer: coarse) {
  .video-pausa { width: 44px; height: 44px; }
  .paso-boton { min-height: 44px; align-items: center; }
}

/* Comanda: lo que es un pedido se ve como el ticket que sale de la impresora.
   Papel, letra de impresora térmica, líneas punteadas y borde de corte dentado. */
.ticket {
  --diente: 7px;
  background: var(--papel); color: var(--tinta);
  font: 500 0.875rem/1.5 var(--comanda); letter-spacing: 0.02em;
  padding: calc(var(--diente) + 14px) 18px calc(var(--diente) + 16px);
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--diente)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--diente)) 51% repeat-x;
          mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--diente)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--diente)) 51% repeat-x;
}
.ticket p { margin: 0; }
.ticket-cabeza {
  display: flex; justify-content: space-between; gap: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding-bottom: 8px; border-bottom: 1px dashed var(--gris);
}
.ticket-fecha { text-transform: uppercase; padding: 8px 0 4px; }
.ticket-lineas { margin: 0; padding: 4px 0 10px; border-bottom: 1px dashed var(--gris); }
.ticket-lineas div { display: flex; align-items: baseline; gap: 6px; }
.ticket-lineas dt { text-transform: uppercase; }
/* la línea de puntos entre el concepto y el valor, como en el ticket */
.ticket-lineas div::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--gris); transform: translateY(-4px); }
.ticket-lineas dd { order: 2; margin: 0; font-weight: 600; }
.ticket-pie { padding-top: 10px; text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }

/* El sello de pan de hoy, prendido a la foto del hero */
.sello-hoy {
  position: absolute; top: 28px; left: -36px; width: 232px; transform: rotate(-2deg);
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--tinta) 10%, transparent)) drop-shadow(0 8px 14px color-mix(in srgb, var(--tinta) 16%, transparent));
}

/* La cinta del paquete cruza la página y ata la sección de lunch */
.cinta { overflow: hidden; position: relative; z-index: 1; margin: -12px 0 -56px; pointer-events: none; }
.cinta img { width: 112%; max-width: none; margin-left: -6%; }

/* La comanda del lunch */
.sello-comanda { max-width: 420px; margin-bottom: 24px; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--tinta) 10%, transparent)) drop-shadow(0 6px 12px color-mix(in srgb, var(--tinta) 10%, transparent)); }
.comanda { font-size: 0.9375rem; }
.comanda-items { list-style: none; margin: 0; padding: 10px 0; border-bottom: 1px dashed var(--gris); }
.comanda-items li { display: grid; grid-template-columns: 4ch 1fr; gap: 10px; }
.comanda-items .cant { text-align: right; font-weight: 600; }
.comanda-total { display: flex; justify-content: space-between; padding: 10px 0 6px; font-weight: 600; text-transform: uppercase; }
.comanda-total b { font-size: 1.25rem; }
.comanda-precio { font-size: 0.8125rem; color: var(--texto-2); }

@media (max-width: 900px) {
  .sello-hoy { top: 10px; left: 10px; width: 168px; }
  .sello-hoy .ticket { --diente: 5px; font-size: 0.6875rem; padding-inline: 12px; }
  .cinta { margin: 0 0 -24px; }
  .cinta img { width: 240%; margin-left: -70%; }
  .cinta-pie { margin: 0; --y-izq: 65.4%; --y-der: 34.3%; }
}

/* ---------- Movimiento: inventario G7 (aprobado 2026-09-28, brand/direccion/movimiento.html) ----------
   Si algo no está acá, no se mueve. Ningún texto entra animado. */
html { scroll-behavior: smooth; }
:focus-visible { transition: none; }

/* 2. La impresión: el sello baja de a renglones cuando termina el corte del hero (200 ms + 620 ms) */
@keyframes imprimir { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.sello-hoy .ticket { animation: imprimir var(--impresion) 850ms both; }
.comanda-items li.imprime { animation: imprimir var(--impresion-linea) both; }

/* 1 y 3: el corte de las fotos del proceso y la cinta corren al entrar en pantalla.
   El JS les pone .al-ver (pausadas) y .corre; sin JS no se animan y se ven enteras. */
@keyframes tensar {
  from { clip-path: inset(0 100% 0 0); transform: translate(-4%, 1.2%); }
  to   { clip-path: inset(0 0 0 0);    transform: translate(0, 0); }
}
.cinta img.al-ver { animation: tensar var(--cinta) both paused; }
.cinta img.al-ver.corre { animation-play-state: running; }

/* 4. La bandeja se llena: el número de la card que cambió se marca en dorado y se apaga */
.lunch-cuenta.marca { animation: marcar-cuenta var(--marca) both; }
@keyframes marcar-cuenta { from { background: var(--dorado); color: var(--negro); } to { background: var(--negro); color: var(--blanco); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada-foto :is(img, video), .proceso-palabra.corta, .sello-hoy .ticket, .comanda-items li.imprime,
  .cinta img.al-ver, .lunch-cuenta.marca { animation: none; }
  .accion-secundaria { transition: none; }
}

/* ---------- Sabores: la carta es una tira de comandas ---------- */
.sabores {
  max-width: 1320px; margin: 0 auto;
  padding: 104px clamp(16px, 4vw, 40px) 96px;
  display: grid; grid-template-columns: minmax(240px, 0.75fr) 2.25fr; gap: 56px; align-items: start;
}
.sabores-texto { position: sticky; top: 40px; }
.sabores .copy { font: 400 1.05rem/1.6 var(--texto-familia); max-width: 40ch; margin: 0 0 24px; }
.sabores-comandas { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 20px; align-items: start; }
.sello-sabores { filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--tinta) 10%, transparent)) drop-shadow(0 6px 12px color-mix(in srgb, var(--tinta) 10%, transparent)); }
.sabores-lista { list-style: none; margin: 0; padding: 10px 0 2px; }
.sabores-lista li { padding: 3px 0; border-bottom: 1px dotted var(--borde); }
.sabores-lista li:last-child { border-bottom: 0; }
.sello-sabores.ancha .sabores-lista { columns: 2; column-gap: 24px; }
.sello-sabores.ancha .sabores-lista li { break-inside: avoid; }

/* ---------- Lo nuevo: una card, espacio fijo que rota (hoy, la miga de milanesa) ---------- */
.nuevo { max-width: 1320px; margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 24px; }
.nuevo-card {
  display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: center;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 20px; padding: 12px;
}
.nuevo-foto { margin: 0; }
.nuevo-foto video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: var(--negro); }
.nuevo-capas { position: relative; margin: 0 8px 0 0; aspect-ratio: 745 / 915; }
.nuevo-capas img { position: absolute; height: auto; will-change: transform; filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--tinta) 16%, transparent)); }
@media (max-width: 1100px) {
  .nuevo-card { grid-template-columns: minmax(240px, 320px) 1fr; padding-right: 40px; }
  .nuevo-capas { display: none; }
}
.nuevo-etiqueta {
  display: inline-block; margin: 0 0 20px; padding: 6px 12px; background: var(--acento); color: var(--texto);
  font: 600 0.8125rem/1 var(--comanda); letter-spacing: .12em; text-transform: uppercase;
}
.nuevo-cita { margin: 0 0 8px; }
.nuevo-cita p { margin: 0; font: italic 400 1.15rem/1.4 var(--texto-familia); color: var(--texto-2); }
.nuevo-cita footer { display: none; }
.nuevo .copy { font: 400 1.05rem/1.6 var(--texto-familia); max-width: 38ch; margin: 0 0 16px; }
.nuevo-precio { font: 600 1rem/1.4 var(--comanda); margin: 0 0 20px; }
.nuevo-precio span { font-size: 1.35rem; }
.nuevo-firma { margin: 16px 0 0; font: 600 0.75rem/1.4 var(--comanda); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-acento); }
.nuevo-firma::before { content: "— Fredy: "; }

/* Sello de lo nuevo sobre la foto de portada: cinta dorada que baja a la sección */
.sello-nuevo {
  position: absolute; right: 0; bottom: 48px; padding: 9px 14px; background: var(--acento); color: var(--texto);
  font: 600 0.75rem/1 var(--comanda); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.sello-nuevo:hover { background: var(--dorado-claro); }

/* ---------- Armador: cantidades de a 3, precio y entrega ---------- */
.sabores-pila { display: grid; gap: 20px; align-content: start; }
/* desktop (3 columnas): Con jamón usa el ancho doble para ir en una sola columna, un sabor por renglón,
   con el mismo espaciado que las otras comandas. Los tickets mantienen su alto natural. */
@media (min-width: 1101px) {
  .sello-sabores.ancha .sabores-lista { columns: 1; }
  .sello-sabores.ancha .sabor label { white-space: nowrap; }
}
/* celular: una sola columna, en el orden de siempre (casa, clásicos, atún, queso, cantimpalo, jamón) */
@media (max-width: 600px) {
  .sabores-pila { display: contents; }
  .comanda-casa { order: 1; } .comanda-clasicos { order: 2; } .comanda-atun { order: 3; }
  .comanda-queso { order: 4; } .comanda-cantimpalo { order: 5; } .comanda-jamon { order: 6; }
}
.sabor-precio { font: 500 0.75rem/1 var(--comanda); color: var(--texto-2); margin-left: 4px; white-space: nowrap; }
.cantidad output { min-width: 2.4ch; text-align: center; font: 600 0.875rem/1 var(--comanda); color: var(--tinta); }
.pedido .pedido-items li { grid-template-columns: 3ch 1fr auto; }
.comanda-precio-linea { padding: 6px 0 0; font-size: 0.75rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; }
.pedido-items .subtotal { color: var(--texto-2); }
.pedido .comanda-total { align-items: baseline; }
.entrega { border: 0; margin: 0; padding: 10px 0 6px; border-top: 1px dashed var(--gris); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.entrega label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.entrega input { accent-color: var(--dorado-hondo); margin: 0; }
.direccion { display: grid; gap: 4px; padding: 4px 0 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.direccion input {
  font: 500 0.9375rem/1.3 var(--comanda); color: var(--tinta); text-transform: none; letter-spacing: 0;
  padding: 10px 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--blanco);
}
.direccion input:focus-visible { outline: 2px solid var(--dorado-hondo); outline-offset: 1px; }
.letra-chica { font-size: 0.75rem; line-height: 1.45; color: var(--texto-2); padding-top: 4px; }
.letra-chica a { color: var(--texto-acento); }
.ticket .leyenda-precios { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--gris); }

/* ---------- Zona de envío: el círculo de 10 km ---------- */
.envio {
  max-width: 1320px; margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 40px) 96px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center;
}
.envio-mapa { aspect-ratio: 1 / 1; max-height: 640px; width: 100%; border-radius: var(--radio-chico); background: var(--superficie-elevada); z-index: 0; }
/* el mapa de OSM en gris cálido, para que el único color sea el dorado del círculo */
.envio-mapa .leaflet-tile-pane { filter: grayscale(1) sepia(.18) brightness(1.04) contrast(.92); }
.envio .copy { font: 400 1.05rem/1.6 var(--texto-familia); max-width: 40ch; margin: 0 0 24px; }
.envio-barrios { border-bottom: 0; }
.envio-barrios div { break-inside: avoid; }
.mapa-etiqueta { font: 600 0.75rem/1.2 var(--comanda); background: var(--negro); color: var(--blanco); border: 0; border-radius: var(--radio-chico); padding: 5px 8px; }
.mapa-etiqueta::before { border-top-color: var(--negro) !important; }

/* ---------- El local: restó, confitería y cervecería son lo mismo ---------- */
.local { max-width: 1320px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 40px) 120px; }
.local-cabeza { margin-bottom: 28px; }
.local .copy { font: 400 1.05rem/1.6 var(--texto-familia); max-width: 52ch; margin: 0; }
/* fotos en 4:5 con scroll de costado; la última asoma para que se note que sigue */
.local-fotos {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * clamp(16px, 4vw, 40px)) 40px; padding: 0 clamp(16px, 4vw, 40px) 12px;
  scroll-padding-inline: clamp(16px, 4vw, 40px);
  scrollbar-width: thin; scrollbar-color: var(--dorado) transparent;
}
.local-fotos img { flex: none; width: clamp(240px, 26vw, 340px); min-width: 0; max-width: none; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--radio-chico); scroll-snap-align: start; }
.local-fotos:focus-visible { outline-offset: -2px; }
.local-info { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.sello-horario { max-width: 360px; margin-bottom: 24px; }
.sello-horario .ticket-pie a { text-decoration: none; }
[data-abierto].abierto { color: var(--texto-acento); }
.local-acciones { display: flex; gap: 10px; max-width: 420px; }
.local-acciones .boton { flex: 1; justify-content: center; }
.local-mapa-caja { border-radius: var(--radio-chico); overflow: hidden; }
.local-mapa { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.local-llegar { margin-top: 10px; width: 100%; justify-content: center; }
.boton.negro { background: var(--negro); color: var(--blanco); justify-content: center; }
.boton.negro:hover { background: var(--tinta); }

/* ---------- Pie: la cinta ata la página al pie negro ---------- */
.cinta-pie { margin: 0; background: var(--superficie); --y-izq: 83.2%; --y-der: 16.6%; }
/* el negro del pie arranca en la línea central de la cinta y copia su inclinación
   (medida sobre fotos/cinta.webp en el tramo que se ve de la imagen) */
.cinta-pie::before { content: ""; position: absolute; inset: 0; background: var(--negro); clip-path: polygon(0 var(--y-izq), 100% var(--y-der), 100% 100%, 0 100%); }
.cinta-pie img { position: relative; }
.pie { background: var(--negro); color: var(--blanco); text-align: center; padding: 48px clamp(16px, 4vw, 40px) 40px; }
.pie-palabra { display: block; width: min(560px, 78vw); height: auto; margin: 0 auto; color: var(--blanco); }
.pie-bajada { font: 600 0.8125rem/1.4 var(--comanda); text-transform: uppercase; letter-spacing: .12em; color: var(--dorado); margin: 20px 0 40px; }
.pie-sucursales { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; max-width: 1000px; font: 400 0.9375rem/1.5 var(--texto-familia); }
.pie-suc-nombre { font: 700 0.9375rem/1.5 var(--display); margin-right: 4px; }
.pie-legal { margin: 40px 0 0; font: 500 0.75rem/1.4 var(--comanda); color: var(--dorado-claro); letter-spacing: .04em; }

@media (max-width: 1100px) {
  .sabores-comandas { grid-template-columns: 1fr 1fr; }
  .sello-sabores.ancha { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sabores { grid-template-columns: 1fr; gap: 28px; padding: 56px 22px 72px; }
  .sabores-texto { position: static; }
  .nuevo-card, .envio, .local-info { grid-template-columns: 1fr; gap: 28px; }
  .nuevo-card { padding: 10px 10px 24px; grid-template-columns: 1fr; }
  .nuevo-foto { max-width: 380px; width: 100%; margin: 0 auto; }
  .nuevo-texto { padding: 0 10px; }
  .nuevo { padding: 72px 22px 16px; }
  .envio { padding: 16px 22px 72px; }
  .local { padding: 48px 22px 88px; }
  .envio-mapa { aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
  .sabores-comandas { grid-template-columns: 1fr; }
  .pie-sucursales { flex-direction: column; gap: 10px; }
}
.nowrap { white-space: nowrap; }

/* ---------- Hero: los tres links en grande, separados por líneas ---------- */
.cabecera { justify-content: space-between; }
.indice { display: flex; flex-direction: column; margin: 0 0 32px; border-bottom: 1.5px solid var(--tinta); }
.indice a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font: 800 clamp(2.6rem, 5.4vw, 5rem)/1.05 var(--display); letter-spacing: -0.02em;
  color: var(--texto); text-decoration: none; padding: 10px 0 12px; border-top: 1.5px solid var(--tinta);
  transition: color var(--rapido), background var(--rapido);
}
.indice a > span[aria-hidden] { font-size: 0.5em; color: var(--dorado-hondo); }
.indice a:hover { color: var(--dorado-hondo); }

/* ---------- Sabores: selector de sucursal, casillas y cantidad ---------- */

.sabores-lista .sabor { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.sabor label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; flex: 1; min-width: 0; }
.sabor input[type="checkbox"] { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--dorado-hondo); }
.sabor.elegido label { font-weight: 600; }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: var(--radio-chico); flex: none; }
.cantidad button { width: 26px; height: 26px; border: 0; background: transparent; font: 600 1rem/1 var(--comanda); cursor: pointer; color: var(--tinta); }
.cantidad button:hover { background: var(--blanco-sombra); }
.cantidad input { width: 2.4ch; border: 0; background: transparent; text-align: center; font: 600 0.875rem/1 var(--comanda); color: var(--tinta); -moz-appearance: textfield; }
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sello-pedido { margin: 8px 0 16px; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--tinta) 10%, transparent)) drop-shadow(0 6px 12px color-mix(in srgb, var(--tinta) 10%, transparent)); }
.pedido-items { list-style: none; margin: 0; padding: 10px 0 0; max-height: 40vh; overflow-y: auto; }
.pedido-items li { display: grid; grid-template-columns: 3ch 1fr; gap: 10px; }
.pedido-items .cant { text-align: right; font-weight: 600; }
.pedido-vacio { padding: 10px 0 0; color: var(--texto-2); font-size: 0.8125rem; }
.pedido .comanda-total { border-top: 1px dashed var(--gris); margin-top: 10px; }

/* en el celular el pedido va en una barra fija abajo; en desktop está en la columna fija */
.barra-pedido {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--negro); color: var(--blanco); font: 600 0.875rem/1.3 var(--comanda);
}
.barra-pedido .boton { padding: 12px 18px; }

@media (max-width: 900px) {
  .barra-pedido { display: flex; }
  /* en el celular el ticket va después de los sabores: ahí se elige la entrega y se pone la dirección */
  .sabores { display: flex; flex-direction: column; }
  .sabores-texto { display: contents; }
  .sabores-comandas { order: 1; }
  .sello-pedido { order: 2; margin: 8px 0 0; scroll-margin-top: 16px; }
  [data-whatsapp-sabores] { display: none; }
  .indice { margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .sello-sabores.ancha .sabores-lista { columns: 1; }
}
.barra-pedido .boton { white-space: nowrap; }
.barra-lunch { z-index: 21; } /* tapa la del armador si las dos tienen algo */

/* Botón de pedido deshabilitado hasta llegar al mínimo de 6 */
.boton[aria-disabled="true"] { background: var(--blanco-sombra); color: var(--texto-2); cursor: not-allowed; pointer-events: none; }
.barra-pedido .boton[aria-disabled="true"] { background: transparent; color: var(--blanco-sombra); box-shadow: inset 0 0 0 1.5px var(--gris); }
.pedido-minimo { padding-top: 8px; font-size: 0.8125rem; color: var(--texto-2); }

/* El primer link del índice es la acción principal: armar el pedido. Es el único con fondo dorado. */
.indice a.indice-principal {
  background: var(--dorado); border-top-color: var(--dorado); border-radius: var(--radio-chico);
  padding: 16px 20px 18px; margin-bottom: 6px; align-items: center;
}
.indice a.indice-principal:hover { background: var(--dorado-claro); color: var(--texto); }
.indice a.indice-principal span[aria-hidden] { color: var(--texto); }
.indice-texto { display: flex; flex-direction: column; gap: 8px; }
.indice-texto small { font: 600 clamp(0.75rem, 1vw, 0.875rem)/1.3 var(--comanda); letter-spacing: .04em; text-transform: uppercase; }
.indice a.indice-principal + a { border-top-color: transparent; }
.sabores-bajada { font: 700 1.25rem/1.3 var(--display); margin: -6px 0 14px; }

/* Instagram: botón secundario en la barra, borde dorado. El texto va en tinta:
   dorado sobre crema no llega al contraste mínimo (brand.rules.md). */
.boton-ig {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border: 1.5px solid var(--dorado); border-radius: 999px;
  font: 700 0.9375rem/1.2 var(--display); color: var(--texto); text-decoration: none;
  transition: background var(--rapido);
}
.boton-ig:hover { background: var(--blanco-sombra); }
.boton-ig:active { transform: translateY(1px); }
.ig-icono { width: 20px; height: 20px; flex: none; color: var(--dorado-hondo); }
.ig-corto { display: none; }
.cabecera-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.pie-ig { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; color: var(--blanco); font: 600 0.9375rem/1.2 var(--display); text-decoration: none; }
.pie-ig .ig-icono { color: var(--dorado); }
.pie-ig:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .ig-largo { display: none; }   /* en el celular: ícono + "+50 mil · seguinos" */
  .ig-corto { display: inline; }
  .cabecera-acciones { flex-direction: column; align-items: flex-end; gap: 8px; }
  .boton-ig { padding: 10px 14px; }
}
.boton-ig { white-space: nowrap; }
@media (max-width: 360px) {
  .sello img { width: 68px; height: 68px; }
  .boton-ig { font-size: 0.875rem; padding: 9px 12px; gap: 8px; }
}

/* ---------- Tipografía (Fredy eligió la D «Kansas», 2026-10-02) ----------
   Titulares en Balthazar, en mayúsculas: la más cercana a la Copperplate de Kansas entre las libres
   (Copperplate no tiene licencia web). Tiene un solo peso (400): no pedirle negrita, sale falsa.
   Botones, etiquetas y texto en Libre Franklin. */
:is(.indice a, .headline, .proceso-cita h2, .paso-titulo, .proceso-palabra .t, .sabores-bajada) {
  font-family: var(--titular); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em;
}
.indice a { font-size: clamp(2.2rem, 4vw, 3.85rem); line-height: .95; }
:is(.headline, .proceso-cita h2) { font-size: clamp(1.9rem, 3.3vw, 2.85rem); line-height: 1; }

/* ---------- Fondos (Fredy, 2026-10-02): cada sección es una solapa de color que sube y tapa a la anterior,
   con títulos en color y una palabra gigante que corre detrás. Pedido de Fredy: más aire arriba y menos redondeo. */
.tab { position: relative; color: var(--texto); background: var(--superficie); overflow: clip; }
/* Cada solapa se mete --sube-solapa por debajo de la siguiente: mientras la siguiente sube (tab-sube), el hueco
   muestra el color de la anterior y no el fondo crema de la página. En reposo el alto total no cambia. */
.tab:has(~ .tab.solapa) { padding-bottom: var(--sube-solapa); }
.tab.solapa { margin-top: calc(-1 * (var(--radio-solapa) + var(--sube-solapa))); border-radius: var(--radio-solapa) var(--radio-solapa) 0 0; box-shadow: 0 -14px 32px color-mix(in srgb, var(--negro) 10%, transparent); }
:root { --radio-solapa: 24px; --aire-solapa: clamp(96px, 10vw, 144px); --sube-solapa: 100px; }
.tab > section { position: relative; z-index: 1; }
.tab.solapa > section { padding-top: var(--aire-solapa); }
.tab[data-fondo="negro"] {
  --superficie: var(--negro); --superficie-elevada: var(--negro-elevado); --texto: var(--blanco); --texto-2: var(--negro-texto-2);
  --texto-acento: var(--dorado-claro); --borde: var(--negro-borde);
}
.tab[data-fondo="dorado"] {
  --superficie: var(--dorado); --superficie-elevada: var(--dorado-claro); --texto: var(--negro); --texto-2: var(--dorado-texto-2);
  --texto-acento: var(--negro); --borde: color-mix(in srgb, var(--negro) 28%, transparent);
}
.tab[data-fondo="crema"] :is(.headline, .proceso-cita h2) { color: var(--dorado-hondo); }
.tab[data-fondo="negro"] :is(.headline, .proceso-cita h2) { color: var(--dorado); }
.tab[data-fondo="dorado"] .boton.dorado { background: var(--negro); color: var(--blanco); }
.tab[data-fondo="negro"] .boton.contorno { color: var(--blanco); }
.tab .cinta { margin-bottom: 0; }
.tab-palabra {
  position: absolute; z-index: 0; left: 0; top: 50%; translate: 0 -50%;
  white-space: nowrap; pointer-events: none; user-select: none;
  font: 400 clamp(9rem, 24vw, 26rem)/.8 var(--titular); letter-spacing: 0; text-transform: uppercase;
}
.tab[data-fondo="negro"] .tab-palabra { color: color-mix(in srgb, var(--dorado) 13%, transparent); }
.tab[data-fondo="dorado"] .tab-palabra { color: color-mix(in srgb, var(--negro) 9%, transparent); }
@media (max-width: 900px) {
  :root { --radio-solapa: 18px; --aire-solapa: 72px; }
}
/* Movimiento de Fondos (rompe a propósito tres reglas viejas de G7; ver brand.rules.md) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tab.solapa { animation: tab-sube linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .tab-palabra { animation: palabra-corre linear both; animation-timeline: view(); animation-range: cover; }
    .tab :is(.headline, .proceso-cita h2) { animation: titulo-entra linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
}
@keyframes tab-sube { from { translate: 0 var(--sube-solapa); border-radius: calc(2 * var(--radio-solapa)) calc(2 * var(--radio-solapa)) 0 0; } to { translate: 0 0; border-radius: var(--radio-solapa) var(--radio-solapa) 0 0; } }
@keyframes palabra-corre { from { transform: translateX(15vw); } to { transform: translateX(-60%); } }
@keyframes titulo-entra { from { opacity: 0; transform: translateY(40px) rotate(-2deg); } to { opacity: 1; transform: none; } }

/* ---------- Firma de gastro (2026-10-02): «Hecho por gastro» en el pie. Al pasar el cursor o con foco,
   «gastro» cambia a la tipografía y el color de gastro con un barrido: es la firma del portfolio del estudio
   (la frase que cambia de marca). En celulares cambia sola cuando aparece. */
.firma-gastro { color: inherit; text-decoration: none; display: inline-block; padding: 12px 0; margin: -12px 0; }
.firma-palabra { display: inline-grid; vertical-align: baseline; }
.firma-palabra > span { grid-area: 1 / 1; transition: clip-path 900ms cubic-bezier(.7,0,.2,1); }
.firma-fredy { clip-path: inset(0 0 0 0); }
.firma-marca {
  font: 700 1.2em/1 "Funnel Display", system-ui, sans-serif; letter-spacing: -0.01em; text-transform: none;
  color: var(--gastro-lavanda); align-self: center; clip-path: inset(0 0 0 100%);
}
.firma-gastro:is(:hover, :focus-visible) .firma-fredy, .firma-gastro.es-gastro .firma-fredy { clip-path: inset(0 100% 0 0); }
.firma-gastro:is(:hover, :focus-visible) .firma-marca, .firma-gastro.es-gastro .firma-marca { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .firma-palabra > span { transition: none; } }