/* Ajustes de producción sobre el diseño de Eloy.
   Regla: aquí NO se cambia el diseño; solo se añade lo que la versión
   estática necesita, lo que faltaba para poder publicar y las correcciones
   pedidas en las rondas de revisión. */

/* El vídeo de la torrija sustituye al iframe de YouTube: mismo encuadre,
   sin cookies de terceros y sin los controles de YouTube encima del plato. */
.petitVideo video{display:block;width:100%;height:100%;object-fit:cover;border:0}

/* React montaba el CTA flotante al pasar de 520 px; aquí lo hace landing.js */
.floatCta[hidden]{display:none}

/* Identificación legal en el pie (LSSI): sin esto no se puede publicar. */
footer .pieLegal{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
footer .pieLegal a{font-size:12px;color:#a7a4ad;border-bottom:1px solid transparent;transition:.2s}
footer .pieLegal a:hover{color:#f7f5f2;border-bottom-color:#ffffff40}

/* Aviso de cookies. Solo aparece si algún día se activa la medición
   (ver assets/js/consentimiento.js). Hoy no sale porque no hay nada que consentir. */
.avisoCookies{position:fixed;z-index:60;left:50%;bottom:22px;transform:translateX(-50%);
 width:min(680px,calc(100% - 32px));padding:18px 20px;border:1px solid #ffffff2b;border-radius:14px;
 background:#111119f2;backdrop-filter:blur(16px);box-shadow:0 20px 55px #000b;
 display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;line-height:1.5}
.avisoCookies p{margin:0;flex:1 1 260px;color:#cbc8ce}
.avisoCookies a{color:#ff9a83;border-bottom:1px solid #ff755655}
.avisoCookies div{display:flex;gap:10px}
.avisoCookies button{border:0;cursor:pointer;font-weight:900;font-size:12px;padding:12px 18px;border-radius:8px;font-family:inherit}
.avisoCookies .aceptar{background:linear-gradient(135deg,#5138d5,#7860ff);color:#fff}
.avisoCookies .rechazar{background:#ffffff14;color:#cbc8ce}
.avisoCookies[hidden]{display:none}
@media(max-width:600px){.avisoCookies div{width:100%}.avisoCookies button{flex:1}}

/* Carrusel de logos: arreglo de dos fallos del prototipo.
   1) La animación desplazaba 1.506 px cuando una copia mide 1.471: esos 35 px
      de más se acumulaban y daban un tirón en cada vuelta.
   2) Solo había dos copias, así que en cuanto la pantalla pasaba de ~1.470 px
      la tira dejaba de cubrirla y se veía el hueco antes de reiniciar
      (434 px de vacío en un monitor de 1920, más de 1.000 en uno de 2560).
   Con cuatro copias y un desplazamiento de exactamente una (25 %), el bucle
   es continuo y no se nota el corte. */
@keyframes logosMove{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* Logo de marca (pedido por Eloy el 22/08/2026). El prototipo escribía
   "FENÓMENUS" con la tipografía del sistema, así que se perdía la Ó del
   símbolo y la marca cambiaba de forma según el móvil: Arial no existe en
   Android y el navegador la sustituye. Con el SVG se ve igual en todas partes. */
.logo img{display:block;height:24px;width:auto}
footer .logo img{height:22px}

/* ───────────────────────────────────────────────────────────────────
   Ronda de feedback de Eloy · 22/08/2026 (revisión en iPhone)
   ─────────────────────────────────────────────────────────────────── */

/* [1] "Eso mejor en formato carrusel y que se pase automáticamente…
       así no ocupa tanto scroll."
   Las tres tarjetas apiladas ocupaban 894 px de scroll en móvil. En
   carrusel ocupan una sola. Se pasa con el dedo, y el paso automático
   lo lleva landing.js. */
@media(max-width:700px){
  .painGrid{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    overscroll-behavior-inline:contain; touch-action:pan-x;
    padding:0 6vw 4px; margin-inline:-5vw; scroll-padding-inline:6vw;
    scrollbar-width:none;
  }
  .painGrid::-webkit-scrollbar{display:none}
  .painGrid article{
    flex:0 0 82vw; scroll-snap-align:center; scroll-snap-stop:always;
    min-height:0; border-radius:14px;
  }
  .painPuntos{display:flex; justify-content:center; gap:7px; margin-top:18px}
  .painPuntos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:#3a3843;cursor:pointer;transition:.25s}
  .painPuntos button[aria-current="true"]{background:var(--orange);width:20px;border-radius:4px}
  .logo img{height:21px}
}

/* [2][3] "Estas flechas no están centradas en el círculo… y molaría que
          fuesen dinámicas."
   Dos motivos por los que quedaban 6 px altas: el carácter "→" no está
   centrado en su propia caja, y además el <i> es una rejilla donde el
   dibujo y el texto caían en filas distintas. Ahora el dibujo va colocado
   por su cuenta, centrado en los dos ejes pase lo que pase. */
.desireShift i{position:relative; font-size:0; line-height:0}
.desireShift i:before{
  content:""; position:absolute; inset:0; margin:auto;
  width:22px; height:22px; background:currentColor;
  -webkit-mask:var(--flecha) center/contain no-repeat;
          mask:var(--flecha) center/contain no-repeat;
  animation:flechaEmpuja 1.9s ease-in-out infinite;
}
:root{--flecha:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11h13.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H3z"/></svg>')}
@keyframes flechaEmpuja{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}

/* [7] "Esta flecha está asfixiada por las cajas… darle vida."
   + Angel, 22/08: la raya naranja estorbaba. Fuera la línea: el único nexo
   entre las dos fotos es el círculo con la flecha, centrado entre ambas. */
.photoArrow{
  background:none !important; background-image:none !important;
  width:auto !important; height:auto !important; min-height:0;
  display:grid !important; place-items:center; font-size:0; position:relative;
  margin:16px auto !important; padding:0; box-shadow:none; border-radius:0;
  transform:none !important;
}
.photoArrow:after{
  content:""; position:static; display:block; width:46px; height:46px;
  background:#15151d; border:1px solid #3d3944; border-radius:50%;
  box-shadow:0 12px 30px #0009; transform:none;
}
.photoArrow:before{
  content:""; position:absolute; inset:0; margin:auto; z-index:2;
  width:20px; height:20px; background:#ff876d;
  -webkit-mask:var(--flecha) center/contain no-repeat;
          mask:var(--flecha) center/contain no-repeat;
  animation:flechaEmpuja 1.9s ease-in-out infinite;
}
@keyframes flechaEmpujaAbajo{
  0%,100%{transform:rotate(90deg) translateX(-2px)}
  50%{transform:rotate(90deg) translateX(3px)}
}
@media(max-width:700px){
  .photoArrow{margin:20px auto !important}
  .photoArrow:before{animation-name:flechaEmpujaAbajo}
}

/* [4] "El fondo donde está la botella que se quede del mismo color…
       que no aparezcan las esquinas esas en blanco."
   La foto llevaba su propio fondo crema y encima se mezclaba en modo
   multiply: el rectángulo de la imagen salía más oscuro que el resto y las
   esquinas se veían más claras. Las dos botellas ya tienen fondo
   transparente, así que ese relleno sobraba. */
.bottleStage .wineBottleImage,
.winePairCards .bottleStage .wineBottleImage{background:0 0}

/* [5][6] "Los títulos están descompensados… que no se queden palabras
          muertas." El navegador reparte las líneas para que queden
          equilibradas; los casos concretos llevan además las dos últimas
          palabras unidas en el HTML. */
h1,h2,h3,.kicker,.desireShift b,blockquote,summary{text-wrap:balance}
p,.heroCopy>p,.painGrid p{text-wrap:pretty}

/* Angel, 22/08: "prefiero las tres frases en tres líneas diferentes".
   Solo en móvil: en escritorio el título cabe en dos y se deja como él lo
   diseñó. */
@media(min-width:701px){ br.brMovil{display:none} }

/* [8] "Centrar el logo y lo del 2026."
   Su hoja usa body>main>footer con align-items:flex-start, así que hay que
   igualar el selector para que esto cuente. */
@media(max-width:700px){
  body>main>footer{flex-direction:column;align-items:center;text-align:center;
    gap:14px;padding-block:30px}
  body>main>footer .pieLegal{order:3;width:auto;margin-top:0;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .desireShift i:before,.photoArrow:before{animation:none}
  .painGrid{scroll-behavior:auto}
}

/* ───────────────────────────────────────────────────────────────────
   Ronda de Eloy · 22/08/2026, 19:10 (revisión en iPhone)
   ─────────────────────────────────────────────────────────────────── */

/* [A] "Esto no ponerlo en negrita, o solo poner en negrita alguna palabra
       que considere resaltar."
   El párrafo entero iba en negrita, así que no destacaba nada. Ahora el
   texto va en peso normal y la negrita se reserva para el remate, que es
   donde está el argumento de venta: "tú facturas menos". */
.strong{font-weight:400; color:#d9d5df !important; }
.strong b{font-weight:800; color:#fff}

/* [B] "El texto debajo del 85 está muy junto al número… y es muy pequeño…
       está como aislado y no sigue bien el flujo."
   Iba a 7 px (móvil) pegado a un número de 68 px con interlineado 0,78:
   parecía un pie de foto suelto. Se separa, crece y se aclara para que
   lea como una sola unidad con la cifra. */
.statNumber>span{font-size:11px; margin-top:18px; letter-spacing:.15em; color:#ded8e5}
@media(max-width:700px){
  .statNumber>span{font-size:10px; margin-top:15px}
  .statCopy{padding-left:20px}
}

/* [C] "Esta flecha está muerta."
   La de entre el PDF y la carta: mismo tratamiento que las otras, dibujo
   centrado de verdad y con movimiento. */
.choiceArrow{position:relative; font-size:0}
.choiceArrow:before{
  content:""; position:absolute; inset:0; margin:auto;
  width:20px; height:20px; background:#fff;
  -webkit-mask:var(--flecha) center/contain no-repeat;
          mask:var(--flecha) center/contain no-repeat;
  animation:flechaEmpuja 1.9s ease-in-out infinite;
}

/* [D] "Estas tres están pálidas… medio muertas… darle un poco más de
       estructura, una vuelta."
   Eran texto gris sobre un fondo casi invisible. Ahora cada condición es
   una pastilla con borde propio y un punto de color: se leen como tres
   garantías, que es lo que son. */
.pricing .priceMain .conditions span{
  color:#e8e4ee; background:#ffffff0f; border:1px solid #ffffff26;
  padding:9px 14px; font-weight:700; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:8px;
}
.pricing .priceMain .conditions span:before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange); flex:none;
}
@media(max-width:700px){
  .pricing .priceMain .conditions span{padding:9px 13px; font-size:11px}
}

/* [E] "TE ENCUENTRAN AQUÍ": Eloy lo ve aislado y sin seguir el flujo; Angel
   confirma que sigue desconectado del bloque de abajo.
   El diagnóstico: esa sección es una frase de tres pasos —te encuentran aquí,
   los iconos, abren tu carta— pero el final vive DENTRO de la caja a 10 px y
   el principio FUERA, en gris y a 8 px. No es cuestión de tamaño: el rótulo
   no pertenece visualmente al bloque que presenta.
   Solución: se convierte en la cabecera de la propia caja, pegada a ella y con
   el mismo tratamiento que el rótulo de cierre. La secuencia queda dentro de
   una sola pieza. */
.channelBlock>p{font-size:10px; color:#6f6771; letter-spacing:.15em}
@media(max-width:700px){
  .channelBlock>p{
    font-size:10px; margin:0 auto; padding:15px 20px 11px;
    background:#faf7f1; border:1px solid #d6cdc1; border-bottom:0;
    border-radius:24px 24px 0 0; max-width:980px;
  }
  .channelBlock .channelLogos{border-radius:0 0 24px 24px; border-top:0; padding-top:16px}
}

/* ───────────────────────────────────────────────────────────────────
   Vídeo "Qué es Fenómenus" · idea de Eloy (audio del 22/08, 19:40):
   acceso discreto, y al reproducirlo que se quede pegado en una esquina
   con su X mientras el visitante sigue navegando.
   Los dos accesos ocupan huecos que su propio diseño ya tenía previstos
   y sin usar: la acción secundaria del hero (.secondary) y la versión
   completa de la barra flotante (texto + botón + X).
   El vídeo no se descarga hasta que alguien lo pide.
   ─────────────────────────────────────────────────────────────────── */

/* acceso del hero: su clase .secondary, con el reset que necesita un botón */
.heroActions .secondary{
  background:none; border:0; border-bottom:1px solid #777; border-radius:0;
  color:#cfcbd6; cursor:pointer; font-family:inherit; padding:0 0 3px;
  display:inline-flex; align-items:center; gap:9px; transition:.2s;
}
.heroActions .secondary:before{content:"▶"; font-size:9px; color:var(--orange)}
.heroActions .secondary:hover{color:#fff; border-bottom-color:#fff}

/* acceso de la barra flotante */
.floatCta .enlaceVideo{
  background:none; border:0; padding:0; color:#e7e4ec; cursor:pointer;
  font-family:inherit; font-size:inherit; font-weight:inherit; text-align:left;
  display:inline-flex; align-items:center; gap:9px; transition:.2s;
}
.floatCta .enlaceVideo:before{content:"▶"; font-size:9px; color:var(--orange)}
.floatCta .enlaceVideo:hover{color:#fff}
#cerrarBarra{flex:none}

/* el visor */
.visorVideo[hidden]{display:none}
.visorVideo{position:fixed; inset:0; z-index:70; display:grid; place-items:center}
.visorFondo{position:absolute; inset:0; background:#05050ae8; backdrop-filter:blur(6px)}
.visorCaja{
  position:relative; z-index:1; width:min(920px, calc(100vw - 32px));
  border-radius:16px; overflow:hidden; box-shadow:0 30px 90px #000c;
  transition:width .28s ease, transform .28s ease;
}
.visorCaja video{display:block; width:100%; height:auto; background:#000}
.visorCerrar{
  position:absolute; top:8px; right:8px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid #ffffff35;
  background:#0b0b12cc; color:#fff; font-size:19px; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0; font-family:inherit;
}
.visorCerrar:hover{background:#000; border-color:#ffffff70}

/* pegado a la esquina: el visitante sigue leyendo mientras lo escucha */
.visorVideo.pegado{display:block; pointer-events:none}
.visorVideo.pegado .visorFondo{display:none}
.visorVideo.pegado .visorCaja{
  pointer-events:auto; position:fixed; width:290px;
  right:20px; bottom:20px; border:1px solid #ffffff26;
  box-shadow:0 18px 50px #000b; cursor:pointer;
}
.visorVideo.pegado video{pointer-events:none}

/* en móvil la barra flotante ocupa el ancho abajo, así que el vídeo
   pegado se va ARRIBA para no taparla */
@media(max-width:700px){
  .visorCaja{width:calc(100vw - 24px)}
  .visorVideo.pegado .visorCaja{width:172px; right:12px; bottom:auto; top:12px}
  .visorCerrar{width:30px; height:30px; font-size:17px; top:6px; right:6px}
}

@media(prefers-reduced-motion:reduce){
  .visorCaja{transition:none}
}

/* Eloy, 20:11: "en el flotante ya solo dejaría lo de ver vídeo, quitaría el
   botón para agendar para no saturar".
   Hecho: la barra lleva UN solo botón cada vez. Primero el vídeo; cuando el
   visitante ya lo ha visto (o lo ha cerrado), el mismo sitio pasa a ofrecer la
   llamada — que es justo cuando más interesado está y ya no satura, porque el
   vídeo ya no hace falta ofrecerlo dos veces. */
.floatCta.single .botonVideo{
  font-family:inherit; cursor:pointer; color:#fff; letter-spacing:.01em;
  background:linear-gradient(135deg,#312069,#7054ff); border:1px solid #9b8aff;
  border-radius:999px; min-width:260px; padding:17px 25px; font-size:13px;
  font-weight:900; box-shadow:0 16px 45px #20145db8;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.floatCta.single .botonVideo:before{content:"▶"; font-size:10px}
.floatCta.single a[hidden]{display:none}
@media(max-width:700px){
  .floatCta.single .botonVideo{width:100%; min-width:0; padding:16px 20px}
}

/* ═══════════════════════════════════════════════════════════════════
   Ronda de Eloy · 23/08/2026 (revisión en iPhone + notas del documento)
   ═══════════════════════════════════════════════════════════════════ */

/* [1] "El icono ese del vídeo que no sea un emoji… se me queda infantil."
       "Flecha sin emoji hacia abajo en plan pérdida de ventas."

   Causa: el diseño usaba caracteres del teclado (▶ ✦ ＋ ↘ ↗ ★ 🍷 🍰). En
   Android se pintan como símbolos, pero el iPhone los sustituye por su
   propio emoji de color: de ahí el triángulo azul con relieve que veía
   Eloy. El mismo HTML, distinto dibujo según el móvil.

   Solución: ninguno es ya un carácter. Todos son dibujos vectoriales
   nuestros, del mismo grosor de línea y con el color que les toque, así
   que se ven idénticos en cualquier teléfono. Angel decidió (23/08)
   cambiar también la copa y la tarta, que Eloy no había marcado: dejar
   dos emojis sueltos entre iconos dibujados canta más que cambiarlos. */
:root{
  --ico-play:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.4 5.1c0-.7.7-1.1 1.3-.8l9.1 6.9c.5.4.5 1.2 0 1.6l-9.1 6.9c-.6.4-1.3 0-1.3-.8z"/></svg>');
  --ico-copa:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6.6 3h10.8l-.8 5.6A4.6 4.6 0 0 1 12 12.6a4.6 4.6 0 0 1-4.6-4L6.6 3Z"/><path d="M12 12.6V19"/><path d="M8.4 19.4h7.2"/></svg>');
  --ico-postre:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3.4 20.2h17.2"/><path d="M5.2 20.2v-6.1c0-1 .8-1.8 1.8-1.8h10c1 0 1.8.8 1.8 1.8v6.1"/><path d="M5.2 15.6c1.5-1.1 2.8-1.1 4.3 0s2.8 1.1 4.3 0 2.8-1.1 4.9 0"/><path d="M12 11.9V8.6"/><circle cx="12" cy="6.9" r="1.5"/></svg>');
  --ico-baja:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6.6l5.9 5.9 3.3-3.3 8.2 8.2"/><path d="M20.6 12.6v4.9h-4.9"/></svg>');
  --ico-sube:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17.4l5.9-5.9 3.3 3.3 8.2-8.2"/><path d="M20.6 11.4V6.5h-4.9"/></svg>');
  --ico-chispa:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.4c.85 4.9 1.85 5.9 6.75 6.75-4.9.85-5.9 1.85-6.75 6.75-.85-4.9-1.85-5.9-6.75-6.75C10.15 8.3 11.15 7.3 12 2.4Z"/><path d="M18 15.1c.42 2.2.92 2.7 3.1 3.1-2.18.42-2.68.92-3.1 3.1-.42-2.18-.92-2.68-3.1-3.1 2.18-.4 2.68-.9 3.1-3.1Z"/></svg>');
  --ico-mas:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><path d="M12 5.2v13.6M5.2 12h13.6"/></svg>');
  --ico-fruta:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8.4c-1.5-1.5-4.2-1.9-6 .2-1.9 2.2-1.3 6 .8 8.6 1.4 1.7 3 2.6 4 2 .7-.4 1.6-.4 2.4 0 1 .6 2.6-.3 4-2 2.1-2.6 2.7-6.4.8-8.6-1.8-2.1-4.5-1.7-6-.2Z"/><path d="M12 8.4V5.2"/><path d="M12 5.2c1.9 0 3.4-1.3 3.4-3-1.9 0-3.4 1.3-3.4 3Z"/></svg>');
  --ico-estrella:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.4l2.92 5.92 6.53.95-4.72 4.6 1.11 6.51L12 17.31l-5.84 3.07 1.11-6.51-4.72-4.6 6.53-.95z" stroke="black" stroke-width="1.2" stroke-linejoin="round"/></svg>');
}

/* utilidad: cualquier icono dibujado se pinta con el color que se le pase */
.icoDibujado{
  display:inline-block; flex:none; background:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* el "play" de los tres accesos al vídeo */
.heroActions .secondary:before,
.floatCta.single .botonVideo:before,
.floatCta .enlaceVideo:before{
  content:""; width:11px; height:11px; font-size:0; flex:none;
  -webkit-mask:var(--ico-play) center/contain no-repeat;
          mask:var(--ico-play) center/contain no-repeat;
}
.heroActions .secondary:before,.floatCta .enlaceVideo:before{background:var(--orange)}
.floatCta.single .botonVideo:before{background:#fff; width:12px; height:12px}

/* los tres avisos flotantes del móvil del hero */
.heroProduct .callout i{font-size:0; position:relative}
.heroProduct .callout i:before{
  content:""; position:absolute; inset:0; margin:auto; background:#fff;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.heroProduct .callout.c1 i:before{width:13px; height:13px; -webkit-mask-image:var(--ico-play); mask-image:var(--ico-play)}
.heroProduct .callout.c2 i:before{width:16px; height:16px; -webkit-mask-image:var(--ico-chispa); mask-image:var(--ico-chispa)}
.heroProduct .callout.c3 i:before{width:15px; height:15px; -webkit-mask-image:var(--ico-mas); mask-image:var(--ico-mas)}

/* las tres tarjetas del problema: copa, postre y caída de ventas */
.painGrid article>i{font-size:0; position:relative}
.painGrid article>i:before{
  content:""; position:absolute; inset:0; margin:auto;
  width:23px; height:23px; background:#ff876d;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.painGrid article:nth-child(1)>i:before{-webkit-mask-image:var(--ico-copa); mask-image:var(--ico-copa)}
.painGrid article:nth-child(2)>i:before{-webkit-mask-image:var(--ico-postre); mask-image:var(--ico-postre)}
.painGrid article:nth-child(3)>i:before{-webkit-mask-image:var(--ico-baja); mask-image:var(--ico-baja)}

/* los tres pasos de "Envíanos tu carta" */
.steps .stepIcon.workStep,.steps .stepIcon.salesStep{font-size:0; position:relative}
.steps .stepIcon.workStep:before,.steps .stepIcon.salesStep:before{
  content:""; position:absolute; inset:0; margin:auto;
  width:20px; height:20px; background:#fff;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.steps .stepIcon.workStep:before{-webkit-mask-image:var(--ico-chispa); mask-image:var(--ico-chispa)}
.steps .stepIcon.salesStep:before{-webkit-mask-image:var(--ico-sube); mask-image:var(--ico-sube)}

/* la estrella del banner de promoción */
.promo span{font-size:0; display:inline-flex; align-items:center}
.promo span:before{
  content:""; width:13px; height:13px; background:#ffb04a;
  -webkit-mask:var(--ico-estrella) center/contain no-repeat;
          mask:var(--ico-estrella) center/contain no-repeat;
}

/* la flecha de "te encuentran aquí → abren tu carta" */
.channelLogos>i{font-size:0; display:inline-flex; align-items:center}
.channelLogos>i:before{
  content:""; width:17px; height:17px; background:currentColor;
  -webkit-mask:var(--flecha) center/contain no-repeat;
          mask:var(--flecha) center/contain no-repeat;
}

/* [2] "La cabecera en móvil… compactarla más, está como muy disperso todo…
       el título de arriba está como muy separado del titular. El titular en
       móvil hacerlo lo más grande que se pueda."

   Medido en un iPhone de 390 px antes de tocar nada: 172 px de aire sobre
   la etiqueta, 28 px entre la etiqueta y el titular, y 106 px entre el botón
   y el móvil de la demo. El titular estaba a 35 px, la mitad del ancho de
   pantalla desaprovechado. Eso es lo que se leía como "disperso".

   Ahora: 118 px arriba, 12 px hasta el titular, y el móvil de la demo sube.
   El tamaño del titular ya no es un número fijo: landing.js mide la línea
   más larga y lo agranda hasta llenar la pantalla, sea cual sea el móvil y
   la tipografía que tenga instalada. */
@media(max-width:700px){
  .hero{padding:118px 18px 30px; min-height:0}
  .hero .pill{padding:8px 13px}
  .hero h1{margin:12px 0 16px; font-size:38px; line-height:1.02}
  .heroCopy>p{font-size:16px; line-height:1.45}
  .heroActions{margin-top:24px; gap:20px}
  .heroProduct{height:430px; margin-block:-6px}
}

/* [3] "Aquí y los otros titulares… optimizar espacios… ajustarlos un poco
       para que quede más compensado." (tres capturas: el problema, los
       casos y "envíanos tu carta")

   Cada sección gastaba 78 px de margen arriba y otros 78 abajo, más el aire
   propio del titular: en un móvil eso significa que un título de cuatro
   líneas se comía la pantalla entera y el contenido que lo demuestra
   quedaba fuera. Se recorta el aire, no el tamaño: el titular sigue siendo
   grande —es el estilo de la marca— pero ahora entra en pantalla junto con
   lo que viene detrás, que es lo que convierte. */
@media(max-width:700px){
  .section{padding-block:56px}
  .section>h2{font-size:38px; line-height:1.03}
  .pain .twocol{gap:20px}
  .pain .painGrid{margin-top:30px}
  .painPuntos{margin-top:14px}
  .cases .caseGrid,.positioning .positioningGrid,.photoProof .photoProofGrid{margin-top:30px}
  .setup .steps{margin-top:30px}
  .final{padding-block:78px}
  .final h2{font-size:52px; line-height:1.02}
}

/* [4] "Quitar el espacio muerto este… en el móvil también."
       (marcado sobre el hueco vacío de la tira de logos)

   Medido sobre la tira renderizada: entre logo y logo hay 66 px, pero en la
   costura entre una copia y la siguiente había 139 px, más del doble. El
   motivo es que el dibujo de la tira ya trae 34 px de margen a cada lado y
   encima se le sumaban 70 px de separación entre copias. Ese margen extra
   pasa a ser -2 px, que es justo lo que hace falta para que la costura mida
   lo mismo que cualquier otro hueco. El bucle sigue siendo exacto porque la
   animación desplaza una copia completa, márgenes incluidos. */
.logoTrack img{margin-right:-2px}
@media(max-width:600px){ .logoTrack img{margin-right:-2px} }

/* [5] Vídeo pequeño arrastrable (Eloy, 23/08: "como en YouTube").
   La caja deja de ser un adorno fijo: se puede coger y soltar donde
   convenga. touch-action:none evita que el dedo mueva la página cuando lo
   que quiere es mover el vídeo; el resto de la pantalla se desplaza igual. */
.visorVideo.pegado .visorCaja{touch-action:none; cursor:grab; user-select:none;
  -webkit-user-select:none}
.visorVideo.pegado .visorCaja:active{cursor:grabbing}
.visorVideo.pegado video{pointer-events:none}

/* [6] "Aquí vamos a meter más postres… y lo hacemos interactivo, o sea que
       el usuario, como se puede hacer con la carta de vinos, vaya
       desplazando hacia abajo." (nota de Eloy en el documento)

   La tarjeta de la derecha deja de ser una foto fija de un postre: ahora es
   la carta de verdad, con los cinco postres que mandó Eloy en su orden, y
   se recorre deslizando hacia abajo dentro del propio móvil. Es la mejor
   demostración posible del producto: el visitante no ve una captura de la
   carta, la usa.

   Dos de los cinco no tienen foto ni vídeo (así lo pidió). En vez de dejar
   un hueco, esos platos llevan una portada tipográfica con su icono: la
   carta se sostiene igual sin material, que es justo lo que le pasará a
   cualquier restaurante el primer día. */
.dessertScroll{
  height:340px; overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y proximity; scroll-behavior:smooth;
  margin:13px -4px 0; padding:0 4px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.dessertScroll::-webkit-scrollbar{display:none}
.dessertScroll:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
.dessertItem{
  height:340px; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-bottom:14px;
}
.dessertItem .petitVideo{height:236px; margin:0 0 14px; flex:none}
.dessertItem .petitInfo{flex:1; align-items:flex-start}
.dessertItem .petitInfo p{max-width:none}
.dessertVideo{display:block; width:100%; height:100%; object-fit:cover; border:0}

/* Foto única dentro de la ficha de un postre (la tarta de queso, 26/08/2026).
   No usa .fotoPase: esa animación cruza varias imágenes y con una sola
   la dejaría parpadeando y oculta dos tercios del tiempo.            */
.dessertFoto{display:block; width:100%; height:100%; object-fit:cover; border:0}

/* el pase de fotos del tiramisú: tres imágenes que se van cruzando */
.fotoPase{position:relative; width:100%; height:100%}
.fotoPase img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation:pasePostre 9s linear infinite;
}
.fotoPase img:nth-child(2){animation-delay:3s}
.fotoPase img:nth-child(3){animation-delay:6s}
@keyframes pasePostre{
  0%{opacity:0} 4%{opacity:1} 33%{opacity:1} 37%{opacity:0} 100%{opacity:0}
}

/* Los platos que aún no tienen foto (queda solo la fruta de temporada;
   la tarta de queso ya lleva la suya desde el 26/08/2026). No llevan un recuadro vacío
   donde debería ir la imagen: la ficha ocupa toda la pantalla del móvil y
   el plato se lee como una entrada de carta bien compuesta. Es lo que le
   va a pasar a cualquier restaurante el primer día, y así se ve que la
   carta se sostiene igual. */
.dessertSoloTexto{
  justify-content:center; gap:16px; padding:22px 4px 30px;
}
.dessertSoloTexto .sinFotoIcono{margin-bottom:2px}
.dessertSoloTexto .petitInfo{flex:0 0 auto; align-items:flex-end}
.dessertSoloTexto .petitInfo h3{font-size:24px; line-height:1.15; margin:0 0 5px}
.dessertSoloTexto .petitInfo p{font-size:11px; max-width:230px}
.sinFotoIcono{
  display:block; width:30px; height:30px; background:#6b6472;
  -webkit-mask:var(--ico-postre) center/contain no-repeat;
          mask:var(--ico-postre) center/contain no-repeat;
}
.sinFotoIcono.sinFotoFruta{-webkit-mask-image:var(--ico-fruta); mask-image:var(--ico-fruta)}

/* barra de recorrido: dice sin palabras que esto se desliza */
.dessertBarra{
  position:absolute; right:11px; top:64px; bottom:26px; width:3px;
  border-radius:3px; background:#ffffff14; overflow:hidden;
}
.dessertBarra i{
  display:block; width:100%; height:20%; border-radius:3px;
  background:var(--orange); transform:translateY(0); transition:transform .18s linear;
}
.sellcard{position:relative}

@media(max-width:600px){
  /* con el texto reservando su alto, 312 px dejaban la foto en 149: se sube
     la pantalla del móvil para que la foto siga siendo la protagonista */
  .dessertScroll{height:348px}
  .dessertItem{height:348px}
  .dessertBarra{top:58px; bottom:22px}
}
@media(prefers-reduced-motion:reduce){
  .fotoPase img{animation:none; opacity:1}
  .fotoPase img:nth-child(2),.fotoPase img:nth-child(3){display:none}
  .dessertScroll{scroll-behavior:auto}
}

/* la hoja de Eloy da a todo <article> de la comparativa un alto mínimo y un
   relleno pensados para una sola tarjeta; los platos van sueltos */
.compareGrid .dessertItem{min-height:0; padding:0}
.dessertItem .petitInfo p{font-size:10px; line-height:1.45}
.dessertItem .petitInfo h3{margin:7px 0 4px}
@media(max-width:600px){
  .dessertItem .petitInfo p{font-size:11px}
  .dessertItem .petitInfo h3{font-size:24px}
}

/* que mande el texto: la foto ocupa lo que sobre, así el nombre y la
   descripción del plato nunca se cortan, sea cual sea el móvil */
.dessertItem .petitVideo{flex:1 1 auto; height:auto; min-height:90px}
.dessertItem .petitInfo{flex:0 0 auto}

/* [7] "Aquí vamos a meter estos vinos, que son un poco más divertidos, y así
       llamamos un poco más la atención." (nota de Eloy en el documento)

   Entran los cinco que mandó: El Marido de mi Amiga, Habla del Silencio,
   MachoMan, Matsu El Viejo y La Piu Belle. Los mismos cinco, en el mismo
   orden, a los dos lados de la comparación.

   Los precios los pidió Eloy calculados "para un restaurante". Se han
   tomado los precios reales de tienda del 23/08/2026 y se han pasado a
   carta con el criterio habitual de sala (algo más del doble del precio de
   tienda, que es unas tres veces el coste del restaurante):
     El Marido de mi Amiga  7,30 € → 16 €      · copa 3,5
     Habla del Silencio    12,30 € → 24 €      · copa 4,5
     MachoMan Monastrell   22,95 € → 39 €      · copa 7
     Matsu El Viejo        40,00 € → 72 €      · solo botella
     La Piu Belle          77,70 € → 135 €     · solo botella
   Los dos de arriba no se sirven por copa: en una carta real tampoco, y
   decirlo da verosimilitud a la demostración.

   El diseño original tenía dos tarjetas fijas una al lado de otra. Con
   cinco, en escritorio pasa a ser el mismo carrusel que ya funcionaba en
   móvil: se arrastra, se ve la siguiente asomando y queda claro que hay
   más. */
@media(min-width:651px){
  .winePairCards{
    display:flex; grid-template-columns:none;
    gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
    scroll-behavior:smooth; overscroll-behavior-inline:contain;
    padding:10px 4px 20px; scrollbar-width:none;
  }
  .winePairCards::-webkit-scrollbar{display:none}
  .winePairCards .wineCard{
    flex:0 0 clamp(238px,29%,300px); scroll-snap-align:start; min-height:470px;
  }
  /* la respiración de las tarjetas venía asignada a la 1ª y la 2ª; con cinco
     se reparte para que no vayan todas a la vez */
  .winePairCards .wineCard:nth-child(3){animation:6.4s ease-in-out -1.6s infinite wineCardBreath}
  .winePairCards .wineCard:nth-child(4){animation:6.4s ease-in-out -4.8s infinite wineCardBreath}
  .winePairCards .wineCard:nth-child(5){animation:6.4s ease-in-out -2.4s infinite wineCardBreath}
  .winePairCards .wineCard:nth-child(3) .bottleStage{animation-delay:-1.35s}
  .winePairCards .wineCard:nth-child(4) .bottleStage{animation-delay:-4.05s}
  .winePairCards .wineCard:nth-child(5) .bottleStage{animation-delay:-2.1s}
  .winePairCards .wineCard:nth-child(3):after{animation-delay:2s}
  .winePairCards .wineCard:nth-child(4):after{animation-delay:6s}
  .winePairCards .wineCard:nth-child(5):after{animation-delay:1s}
}

/* las botellas nuevas ya vienen con fondo blanco: el modo multiply lo
   funde con el papel de la tarjeta y no se ve ningún recuadro */
.winePairCards .bottleStage .wineBottleImage{mix-blend-mode:multiply}
/* ajustes de escala que el diseño tenía puestos a dedo para las dos
   botellas antiguas; ahora todas están medidas al mismo alto */
.winePairCards .wineCard .wineBottleImage,
.winePairCards .wineCard:first-child .wineBottleImage,
.winePairCards .wineCard:nth-child(2) .wineBottleImage{transform:none}

.winePrices .soloBotella{
  font:9px/1 inherit; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#6f665c; align-self:center;   /* contraste 5,1:1 sobre el papel */
}

/* el marcador de la carta de vinos era un adorno fijo de dos puntos, escrito
   a mano cuando solo había dos vinos. Ahora son cinco y los puntos son de
   verdad: marcan en cuál estás y se puede pulsar para saltar. */
.wineDigital:after{display:none !important}
.winePuntos{display:flex; justify-content:center; gap:7px; margin-top:6px}
.winePuntos button{width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:#c7bdb0; cursor:pointer; transition:.25s}
.winePuntos button[aria-current="true"]{background:#6b55ed; width:20px; border-radius:4px}
@media(min-width:651px){ .winePuntos{margin-top:2px} }

/* [8] "Estos dos ganchos pasan desapercibidos… estaría bueno hacer algo
       rollo lo de la web gratis de la sección del precio: colocarlo como
       una pegatina flotante para que se aprecie, sobre todo en ordenador."
       (nota de Eloy en el documento)

   "Solo informa" y "Abre el apetito antes de llegar" son la frase que cierra
   toda la comparación, y estaban como un pie de foto gris al final de cada
   maqueta. Ahora salen de la esquina como una pegatina pegada encima, con la
   misma factura que la de "te regalamos la web": cinta arriba, esquinas
   irregulares y sombra. La del PDF, apagada; la de Fenómenus, encendida. */
.forkPieza{position:relative; z-index:1; min-width:0}
.forkPieza>article{
  display:block; border-radius:22px; overflow:hidden;
  box-shadow:0 25px 65px #2d251d22;
}
.forkPiezaFen>article{box-shadow:0 32px 80px #5e45dd38}

.forkSticker{
  position:absolute; z-index:5; text-align:center;
  min-width:172px; padding:13px 18px 12px;
  border-radius:19px 24px 16px 26px;
  box-shadow:0 16px 38px #0006;
}
.forkSticker:before{
  content:""; position:absolute; top:-8px; left:50%;
  width:44px; height:14px; background:#e8d8c899;
  transform:translateX(-50%) rotate(-3deg); box-shadow:0 2px 5px #0002;
}
.forkSticker span,.forkSticker b{display:block}
.forkSticker span{font-size:8px; font-weight:950; letter-spacing:.14em; margin-bottom:6px}
.forkSticker b{font:18px/1.2 Georgia,serif}

.forkStickerPdf{
  left:-14px; bottom:-26px; transform:rotate(-4deg);
  background:#cec6ba; border:1px solid #ded7cd; color:#4a443f;
}
.forkStickerPdf span{color:#7d746b}
.forkStickerFen{
  right:-14px; bottom:-26px; transform:rotate(3.5deg);
  background:linear-gradient(135deg,#2a1f56,#5b3fd6);
  border:1px solid #9b8aff; color:#fff;
}
.forkStickerFen span{color:#c6bbff}

/* sitio para que las pegatinas no pisen lo que viene debajo */
.menuFork{padding-bottom:34px}
@media(max-width:950px){
  .menuFork{row-gap:52px; padding-bottom:40px}
}
@media(max-width:600px){
  .forkSticker{min-width:0; padding:11px 15px 10px; border-radius:16px 20px 14px 22px}
  .forkSticker b{font-size:15px}
  .forkStickerPdf{left:-8px; bottom:-22px}
  .forkStickerFen{right:-8px; bottom:-22px}
}
/* que la pegatina no tape la descripción del plato: sale más hacia fuera */
.forkStickerFen{right:-24px; bottom:-32px}
.forkStickerPdf{left:-20px; bottom:-30px}
@media(max-width:600px){
  /* en móvil la maqueta ocupa todo el ancho: la pegatina baja del todo para
     no taparle el precio ni la descripción al plato */
  .forkStickerFen{right:-6px; bottom:-30px}
  .forkStickerPdf{left:-6px; bottom:-30px}
  .menuFork{row-gap:64px; padding-bottom:46px}
}

/* las estrellas de las valoraciones eran el mismo carácter "★" que el
   iPhone pinta como emoji: mismo tratamiento que el resto de iconos */
.caseMeta b.nota{display:inline-flex; align-items:center; gap:5px}
.estrellaNota{
  width:11px; height:11px; background:currentColor; flex:none;
  -webkit-mask:var(--ico-estrella) center/contain no-repeat;
          mask:var(--ico-estrella) center/contain no-repeat;
}

/* El ancho del visor se medía en porcentaje del contenedor, que es una
   rejilla centrada: al volver del tamaño pequeño al grande, el navegador
   resolvía ese porcentaje contra la caja ya encogida y el vídeo se quedaba
   en 172 px para siempre. Medido contra la pantalla ya no hay vuelta atrás
   posible. (Detectado probando el arrastre, 23/08.) */

/* ═══════════════════════════════════════════════════════════════════
   Ronda de Eloy · 23/08/2026, noche (5 notas sobre lo publicado por la tarde)
   ═══════════════════════════════════════════════════════════════════ */

/* [A] "Aquí se quedan las dos esquinas estas blancas."
   Reproducido y medido: no era el brillo ni la foto, era el redondeo del
   soporte de la botella. El soporte tiene las esquinas superiores muy
   redondeadas y recorta lo que hay dentro, pero la foto lleva modo multiply
   —que es lo que funde su fondo blanco con el papel— y eso la saca a su
   propia capa, donde el recorte redondeado ya no la alcanza: las dos
   esquinas blancas de la foto asomaban justo por donde el soporte creía
   haberlas cortado. Sin redondeo no hay nada que asomar, y como el soporte
   es del mismo color que la tarjeta, no se pierde nada. */
.winePairCards .bottleStage{border-radius:0}

/* [B] "Los bloques equilibrarlos mejor: los iconos esos quitarlos, los
       precios que estén todos alineados a los títulos… que actúe como un
       experto en UX de Apple."

   Tres cosas, y la del medio es la que más se nota: el precio estaba
   alineado con el rótulo de categoría, no con el nombre del plato, así que
   cada tarjeta parecía descuadrada. Ahora el rótulo ocupa su propia línea y
   el precio arranca exactamente a la altura del nombre, en todos los platos
   y los tengan o no foto. Fuera los iconos, y el aire de arriba y abajo
   repartido por igual. */
.dessertItem .petitInfo{
  display:grid; grid-template-columns:1fr auto; column-gap:16px;
  align-items:start; row-gap:0;
}
.dessertItem .petitInfo > small{grid-column:1/-1; display:block; margin-bottom:7px}
.dessertItem .petitInfo > div{grid-column:1; grid-row:2; min-width:0}
.dessertItem .petitInfo > footer{grid-column:2; grid-row:2; margin:0}
.dessertItem .petitInfo h3{margin:0 0 5px}
.dessertItem .petitInfo footer > b{display:block; line-height:1}

/* sin icono: el plato sin foto es solo tipografía, centrada en su pantalla */
.dessertSoloTexto .sinFotoIcono{display:none}
.dessertSoloTexto{justify-content:center; padding:20px 4px 24px}
.dessertSoloTexto .petitInfo h3{font-size:24px; line-height:1.15}

/* el rótulo de categoría lo estilaba `.petitInfo>div>small`, y al sacarlo del
   div para poder alinear el precio con el nombre dejó de casar el selector */
.dessertItem .petitInfo > small{
  color:var(--orange); letter-spacing:.13em; font-size:7px; font-weight:900;
}
@media(max-width:600px){ .dessertItem .petitInfo > small{font-size:8px} }

/* Mientras se desliza solo, fuera el imantado entre platos y el
   desplazamiento suave del navegador: los dos pelean con el movimiento
   continuo y lo convierten en tirones. Vuelven en cuanto manda el visitante. */
.dessertScroll.deslizandoSolo,
.winePairCards.deslizandoSolo{scroll-snap-type:none; scroll-behavior:auto}

/* Una imagen aún sin descargar no debe enseñar su texto alternativo con el
   icono de foto rota: se ve al desplazar el carrusel de vinos deprisa.
   Invisible hasta que tiene su dirección, y entra con un fundido corto. */
img[data-foto]{visibility:hidden}
.wineBottleImage,.fotoPase img{transition:opacity .35s ease}

/* Todas las fotos con el mismo alto. Antes cada una se ajustaba al texto que
   tuviera debajo, y con la carta bajando sola eso se nota: la foto crece y
   encoge de plato en plato.

   El reparto no se hace por porcentaje —el plato de la torrija tiene una línea
   más de descripción y se le cortaba el texto en móvil— sino al revés: el
   bloque de texto reserva el alto del más largo y la foto se queda con lo que
   sobra. Así todas las fotos miden lo mismo y ningún plato pierde una línea. */
.dessertItem .petitVideo{flex:1 1 auto; height:auto; min-height:0}
.dessertItem .petitInfo{flex:0 0 auto; min-height:132px; align-content:start}
@media(max-width:600px){ .dessertItem .petitInfo{min-height:146px} }

/* ───────────────────────────────────────────────────────────────────
   Ronda de Eloy · 24/08/2026
   ───────────────────────────────────────────────────────────────────

   [URGENTE] "En el móvil, cuando estás aquí en los vinos, se queda como
   enganchado: no te deja hacer scroll ni para arriba ni para abajo."

   La causa está en la hoja original: la carta de vinos declara en móvil
   `touch-action:pan-x`, que le dice al navegador que sobre esa caja SOLO
   valen los gestos laterales. Cualquier deslizamiento vertical que empiece
   encima se descarta entero, no se pasa a la página. Y como cada tarjeta de
   vino mide 78vw de ancho por 555 px de alto, ocupa casi toda la pantalla
   del móvil: el dedo cae ahí siempre y la página parece bloqueada.

   Con `auto` el navegador vuelve a decidir por la dirección del gesto —de
   lado mueve la carta, hacia arriba o abajo mueve la página— y además se
   recupera el zoom con dos dedos, que `pan-x` también anulaba (WCAG 1.4.4).
   El encadenado lateral sigue contenido por `overscroll-behavior-inline`,
   que es lo que de verdad evita que arrastrar la carta arrastre la página. */
@media(max-width:650px){
  .winePairCards{touch-action:auto}
}
/* mismo fallo, mismo remedio, en el carrusel de las tres tarjetas */
@media(max-width:700px){
  .painGrid{touch-action:auto}
}

/* ── [13][14] En el móvil, cada frase encima de la carta de la que habla ──
   Eloy: "en el PC se ve bien que el título esté arriba y los ejemplos A y B
   uno al lado del otro… pero en el móvil te pide que 'Uno se lee.' esté
   encima de la carta mala y 'El otro se pide.' debajo de la otra, donde está
   la flecha, y quitarla."

   Cuando las dos cartas se apilan, un titular único arriba obliga a recordar
   cuál era cuál mientras se baja. Cada frase pegada a su carta se lee sola.
   El titular completo sigue en el <h2> para quien navega con lector de
   pantalla: se oculta a la vista, no al oído. */
.cmpRotulo{display:none}
@media(max-width:950px){
  .compare h2 .cmpFrases{
    position:absolute; width:1px; height:1px; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .compare>h2{margin-bottom:26px}
  .cmpRotulo{
    display:block; text-align:center; color:var(--orange);
    font:clamp(26px,7.2vw,34px)/1.05 Georgia,serif; letter-spacing:-.04em;
    margin:0 0 16px;
  }
  .cmpRotuloB{margin:26px 0 16px}
  .compareGrid>.desireShift{display:none}
}

/* ── [7] Maridajes: un plato por línea ──
   "En la sección VA PERFECTO CON, cuando aparezcan dos platos, que cada uno
   esté en una línea." Iban separados por un punto medio y la segunda mitad
   caía donde le tocaba: en la tarjeta de MachoMan, "Chuletón a la brasa ·
   Cordero al" y "horno" en la línea siguiente. Ahora son dos renglones. */
.winePair b>span{display:block}
.winePair b>span+span{margin-top:3px}

/* ── [7] Los precios y sus iconos, alineados ──
   "La botella y la copa se quedan descuadradas de los números… si tiene que
   cambiar la tipografía o los iconos, que lo haga, pero que quede alineado."

   Estaban dibujados con bordes de CSS y cada uno colgaba de un sitio: la
   copa llevaba el pie fuera de su caja (dos pseudo-elementos por debajo) y
   la botella el tapón por encima. Centrarlos era imposible porque su caja no
   coincidía con lo que se veía. Ahora son dos dibujos vectoriales con el
   dibujo centrado en su propia caja, del mismo tamaño y grosor que el resto
   de iconos de la página, y el ajuste fino va en un solo sitio. */
:root{
  --ico-botella:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.4 2.8h3.2v4.2c0 .6.2 1.2.6 1.7l1.1 1.3c.5.6.7 1.3.7 2v7.9c0 .6-.4 1-1 1H9c-.6 0-1-.4-1-1v-7.9c0-.7.2-1.4.7-2l1.1-1.3c.4-.5.6-1.1.6-1.7z"/><path d="M8 13.4h8"/></svg>');
}
.winePrices>b{
  /* Anclados a la línea base, no al centro. Georgia escribe las cifras a la
     antigua: el 3, el 5, el 7 y el 9 bajan por debajo de la línea, el 6 y el
     8 suben. Centrar el icono respecto a la caja del número lo dejaba a una
     altura distinta en cada vino (medido: 0,5 px de desvío en "16" y 3,5 px
     en "3,5"). Desde la línea base, los cinco quedan idénticos. */
  display:inline-flex; align-items:baseline; gap:6px; line-height:1;
}
.winePrices .bottleIcon,
.winePrices .glassIcon{
  flex:none; border:0; margin:0; padding:0;
  /* el tamaño va en em para que acompañe al precio en móvil (24 px) y en
     escritorio (17 px), y equivale a la altura de las cifras */
  font-size:1em; width:.78em; height:.78em; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  /* cada dibujo deja un aire distinto dentro de su cuadro (la copa más que
     la botella), así que el último píxel hasta la línea base se corrige aquí.
     Medido sobre el render, no calculado: cifras 15→25, botella 15→24,
     copa 15→23. */
}
.winePrices .bottleIcon{
  -webkit-mask-image:var(--ico-botella); mask-image:var(--ico-botella);
  transform:translateY(.06em);
}
.winePrices .glassIcon{
  -webkit-mask-image:var(--ico-copa); mask-image:var(--ico-copa);
  transform:translateY(.12em);
}
.winePrices .bottleIcon:before,.winePrices .bottleIcon:after,
.winePrices .glassIcon:before,.winePrices .glassIcon:after{content:none}

/* ── [6] Las tres tarjetas del TPV, equilibradas ──
   "Quitar esta línea y ese texto de debajo, equilibrar este bloque con los
   otros dos, que el titular tenga doble línea y esté todo bien alineado."
   El "Puedes seguir usando tu TPV." fuera (ya no está en el HTML) y los tres
   titulares a dos renglones, para que los tres párrafos arranquen a la misma
   altura sin depender de dónde parta cada frase. */
.positioningGrid h3{text-wrap:balance}
@media(min-width:801px){
  .positioningGrid article{justify-content:flex-start}
  .positioningGrid h3{min-height:2.1em}
}

/* ── [8] Las dos pegatinas de la foto ──
   "Lo del WhatsApp subirlo arriba a la derecha. Y el de Fenómenus, que no sea
   tan light: así naranja, que tenga un poco más de rollo, y que tenga algo
   como una varita o una estrellita tipo IA con algún efecto, como que la
   imagen ha sido transformada por nosotros. En el móvil el orden déjalo mejor
   como está, solo añade lo del efecto de IA."

   Así que la de WhatsApp solo se mueve en pantalla grande; en el móvil se
   queda donde estaba. */
@media(min-width:801px){
  .photoProofGrid .whatsappDrop{top:14px; right:14px; bottom:auto; left:auto}
}
.photoResult .photoFrame span{
  background:linear-gradient(135deg,#ff6a3d,#e8452f);
  color:#fff; font-weight:900; letter-spacing:.12em;
  display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 8px 22px #ff5a3540;
}
.photoResult .photoFrame span:before{
  content:""; width:13px; height:13px; flex:none; background:#fff;
  -webkit-mask:var(--ico-chispa) center/contain no-repeat;
          mask:var(--ico-chispa) center/contain no-repeat;
  animation:chispaIA 3.4s ease-in-out infinite;
}
@keyframes chispaIA{
  0%,72%,100%{opacity:.9; transform:scale(1) rotate(0)}
  80%        {opacity:1;  transform:scale(1.28) rotate(18deg)}
  88%        {opacity:.9; transform:scale(1) rotate(0)}
}
/* el barrido de luz sobre la foto buena: dura poco y pasa cada seis segundos,
   lo justo para que se lea como "esta imagen la hemos tocado nosotros".

   El brillo se mueve dentro del propio destello, no recortando el marco: la
   pegatina asoma a propósito por el borde de la foto y un `overflow:hidden`
   en el marco se la comía entera. */
.photoResult .photoFrame{position:relative}
.photoResult .photoFrame:after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(102deg,#fff0 42%,#ffffff5e 50%,#fff0 58%);
  background-size:320% 100%; background-repeat:no-repeat;
  animation:barridoIA 6s ease-in-out infinite;
}
@keyframes barridoIA{0%,60%{background-position:128% 0} 90%,100%{background-position:-42% 0}}
/* la pegatina va posicionada por la hoja original: aquí solo se le sube la
   capa para que el destello no la pise */
.photoResult .photoFrame span{z-index:2}

/* ── [5] El flujo, con su tercer paso ──
   "Aquí hay que poner un texto a la altura de los otros y siguiendo el flujo:
   está diciendo TE ENCUENTRAN AQUÍ, ABREN TU CARTA… y en el titular ese
   debería haber algo en plan: o pueden ver esta mierda que no vende, o esto
   que sí."
   La secuencia se cierra con lo que de verdad está en juego —deciden si
   entran— y el titular ya no se queda solo delante de las dos maquetas. */
.forkIntro>p{
  margin:14px auto 0; max-width:520px; color:#5f5961;
  font-size:16px; line-height:1.45; text-wrap:balance;
}
@media(max-width:700px){
  .forkIntro>p{font-size:14px; margin-top:11px; max-width:330px}
}

/* ── [10] La secuencia guiada del móvil ──
   "La flecha de debajo del 85% que esté centrada y se mueva como guiando
   hacia lo siguiente… y luego, debajo de 'abren tu carta', otra flecha
   guiando hacia abajo, y mantener así una secuencia lógica."

   La flecha que ya había estaba fuera de su sitio por un fallo de giro: el
   dibujo se apoya al principio de un elemento que ocupa todo el ancho, y al
   girar el elemento entero 90° ese punto se iba media caja hacia arriba, o
   sea fuera del recuadro. Se gira solo el dibujo y se centra. */
@media(max-width:700px){
  .channelLogos>i{justify-content:center; transform:none}
  .channelLogos>i:before{transform:rotate(90deg); animation:guiaBaja 2.6s ease-in-out infinite}
}
.guiaAbajo{display:none}
@media(max-width:700px){
  .guiaAbajo{
    display:block; width:20px; height:20px; margin:16px auto;
    background:#9a929c;
    -webkit-mask:var(--flecha) center/contain no-repeat;
            mask:var(--flecha) center/contain no-repeat;
    transform:rotate(90deg);
    animation:guiaBaja 2.6s ease-in-out infinite;
  }
}
@keyframes guiaBaja{
  0%,100%{opacity:.5;  translate:0 0}
  50%    {opacity:1;   translate:0 5px}
}
@media(prefers-reduced-motion:reduce){
  .guiaAbajo,.channelLogos>i:before,
  .photoResult .photoFrame span:before,.photoResult .photoFrame:after{animation:none}
  .photoResult .photoFrame:after{opacity:0}
}

/* ── [9] Los tres pasos, en carrusel en el móvil ──
   "Este bloque, como tampoco es tan importante, en el móvil que sea formato
   scroll, que se pase solo y que si cojo el mando lo pueda pasar. Así
   reducimos scroll."  Apilados ocupaban 414 px de pantalla para decir tres
   frases; en carrusel ocupan una tarjeta. El paso automático lo lleva
   landing.js, y se para en cuanto el visitante lo toca.
   Sin `touch-action:pan-x`: es lo que dejaba la página enganchada en la
   carta de vinos. */
@media(max-width:700px){
  .setup .steps{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    overscroll-behavior-inline:contain;
    padding:0 6vw 4px; margin-inline:-5vw; scroll-padding-inline:6vw;
    scrollbar-width:none;
  }
  .setup .steps::-webkit-scrollbar{display:none}
  .setup .steps article{
    flex:0 0 82vw; scroll-snap-align:center; scroll-snap-stop:always;
    border:1px solid #cfc6bb; border-right:1px solid #cfc6bb;
    border-radius:14px; padding:22px 20px; background:#faf7f1;
  }
  .setup .steps article:last-child{border:1px solid #cfc6bb}
  .stepsPuntos{display:flex; justify-content:center; gap:7px; margin:16px 0 26px}
  .stepsPuntos button{
    width:7px; height:7px; padding:0; border:0; border-radius:50%;
    background:#cec4b8; cursor:pointer; transition:.25s;
  }
  .stepsPuntos button[aria-current="true"]{background:var(--orange); width:20px; border-radius:4px}
}

/* ── [16] Las tres ventajas, también en carrusel ──
   "Estas 3 ventajas ponerlas modo carrusel: así, uno encima del otro, quedan
   muy bastos en el móvil. Que se desplacen solos." */
@media(max-width:700px){
  /* el carril no puede imponer su ancho a la tarjeta: sin esto, las tres
     píldoras suman 536 px y sacan el precio fuera de la caja */
  .pricing .priceMain>div{min-width:0; width:100%; align-self:stretch}
  .pricing .priceMain .conditions{
    min-width:0;
    display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    overscroll-behavior-inline:contain;
    gap:10px; margin:14px 0 0; scrollbar-width:none;
    /* el carril reserva media pantalla a cada lado para que la píldora
       activa quede centrada de verdad, también la primera y la última */
    padding-inline:calc(50% - 86px); scroll-padding-inline:calc(50% - 86px);
  }
  .pricing .priceMain .conditions::-webkit-scrollbar{display:none}
  .pricing .priceMain .conditions span{
    flex:0 0 172px; scroll-snap-align:center; scroll-snap-stop:always;
    justify-content:center; display:inline-flex; align-items:center; gap:8px;
    white-space:nowrap;
  }
  .ventajasPuntos{display:flex; justify-content:center; gap:6px; margin-top:12px}
  .ventajasPuntos button{
    width:6px; height:6px; padding:0; border:0; border-radius:50%;
    background:#3d3a47; cursor:pointer; transition:.25s;
  }
  .ventajasPuntos button[aria-current="true"]{background:var(--orange); width:17px; border-radius:4px}
}

/* ── [15] El cierre ──
   "Parte del título de 'Tu carta te cuesta' en una sola línea; reducir
   espacio entre título y botón; y los aros esos que están de fondo, que
   tengan algún efecto sutil, como que se mueven, pero muy sutil." */
@media(max-width:700px){
  /* Eloy, 24/08 (WhatsApp): "menos espacio" entre el titular y el botón */
  .final h2{font-size:clamp(34px,10.4vw,46px); line-height:1.04; margin:18px 0 22px}
  /* la sección reservaba 650 px de alto y en el móvil dejaba 380 px de morado
     vacío bajo el botón: con el titular ya en dos líneas sobra ese suelo */
  .final{padding-block:52px; min-height:0}
  .finalGlow{width:430px; height:430px; top:10px}
}
.finalGlow{animation:arosLatido 16s ease-in-out infinite}
.finalGlow:before{animation:arosLatido 16s ease-in-out -5.3s infinite}
.finalGlow:after{animation:arosLatido 16s ease-in-out -10.6s infinite}
@keyframes arosLatido{
  0%,100%{opacity:.75; scale:1}
  50%    {opacity:1;    scale:1.045}
}
@media(prefers-reduced-motion:reduce){
  .finalGlow,.finalGlow:before,.finalGlow:after{animation:none}
}

/* ── [12] El pie, por encima del botón flotante ──
   "Los enlaces de cookies y política de privacidad quedan escondidos: subir
   un poco el contenido para que se pueda ver sin que lo tape el botón."
   La barra flotante vive fija sobre el pie, así que el pie reserva su altura
   por debajo. Es un hueco negro sobre fondo negro: no se ve, pero deja de
   tapar dos enlaces que son obligatorios (RGPD y LSSI). */
@media(max-width:700px){
  body>main>footer{padding-bottom:104px}
}

/* ═══════════════════════════════════════════════════════════════════
   Ronda de Eloy · 24/08/2026, mediodía (WhatsApp + documento)
   ═══════════════════════════════════════════════════════════════════ */

/* ── El primer pantallazo ──
   "Hay que optimizarlo bien. La otra vez te dije que se viene el móvil, pero
   mejor que no. Que se vea todo el titular y el botón en el primer impacto, y
   luego ya en el siguiente scroll que veas el móvil."

   El texto del hero ocupa 301 px y la cabecera 126: cabía de sobra, el problema
   era que el móvil de la demostración asomaba justo debajo y se llevaba la
   atención antes de haber leído la promesa. Ahora el bloque de texto reserva
   toda la altura visible y el móvil empieza exactamente en el pliegue.

   La unidad es `svh` (small viewport height), que mide la pantalla **con** las
   barras del navegador desplegadas. Con `vh` a secas, en Safari de iPhone el
   móvil volvería a asomar en cuanto aparece la barra de abajo. */
@media(max-width:700px){
  .hero .heroCopy{
    min-height:calc(100vh - 118px);
    min-height:calc(100svh - 118px);
    /* centrado, pero con más aire abajo que arriba: el bloque sube, pesa
       donde debe y el hueco de abajo invita a seguir bajando */
    display:flex; flex-direction:column; justify-content:center;
    /* El aire de arriba no es decorativo: sin él, en cuanto la pantalla baja
       de ~740 px (un iPhone con las barras de Safari puestas) el bloque
       centrado llega al borde y la cápsula "Carta digital para restaurantes"
       se sube encima de la línea fina de la cabecera. Medido a 844, 740 y
       660 px de alto. */
    padding-top:26px; padding-bottom:104px;
  }
  /* En una columna flexible, un hijo con contenido más ancho que la caja NO
     se encoge: se desborda. El titular, que el JavaScript agranda hasta rozar
     el borde, se salía por la derecha y sacaba barra de scroll horizontal. */
  .hero .heroCopy>*{min-width:0; max-width:100%}
  /* …y al revés: los hijos que se ajustaban a su contenido pasaron a ocupar
     todo el ancho, porque en una columna flexible los items se estiran. Es lo
     que descuadró la cápsula de "Carta digital para restaurantes" (Eloy,
     24/08, 15:59). Vuelve a medir lo que mide su texto. */
  .hero .heroCopy .pill,
  .hero .heroCopy .heroActions{align-self:flex-start}
  /* el móvil sobresale 115 px de su caja (va en perspectiva): sin este aire su
     barra inferior se apoyaba justo encima de la tira de logos, que es lo que
     Eloy vio como "el carrusel de logos pisa el móvil" */
  .hero{padding-bottom:104px}
}

/* ── Las dos maquetas, cada una con su frase ──
   "Elimina el título de arriba y deja el de 'O abren un PDF…' en esa primera, y
   luego en la de Fenómenus metes el de 'O abren una carta que sí', así con la
   tipografía buena, con aire."  Mismo patrón que la comparativa de postres:
   la frase pegada a la pieza de la que habla, no un titular común arriba. */
.forkRotulo{
  display:block; text-align:center; color:#211d22;
  font:clamp(24px,3vw,34px)/1.08 Georgia,serif; letter-spacing:-.04em;
  margin:0 0 22px; text-wrap:balance;
}
.forkRotuloFen{color:var(--orange)}
@media(max-width:950px){
  .forkRotulo{font-size:clamp(25px,7vw,32px); margin:0 0 18px}
  .menuFork>.forkPieza+.choiceArrow{margin-block:24px}
  .forkPiezaFen .forkRotulo{margin-top:30px}
}

/* ── [C1] Aire sobre "El otro se pide." ──
   "Darle un poco más de aire arriba, que respire el título." */
@media(max-width:950px){
  .cmpRotuloB{margin:46px 0 18px}
}

/* ── [C2] El hueco de los platos sin foto ──
   "Se queda un hueco enorme entre postres: dejar un hueco coherente."
   Todos los platos medían 340 px, tuvieran foto o no. Los dos que van sin
   foto sólo tienen tres líneas de texto, así que quedaban flotando en medio
   de una pantalla vacía. Ahora ocupan lo que necesitan —menos, porque tienen
   menos que enseñar— y el imantado los sigue tratando como una parada. La
   barra de recorrido pasa a medirse contra el scroll real (landing.js). */
.dessertScroll .dessertSoloTexto{
  height:auto; min-height:0; padding:30px 4px 34px; justify-content:center;
}
@media(max-width:600px){
  .dessertScroll .dessertSoloTexto{padding:26px 4px 30px}
}

/* Red de seguridad contra el scroll lateral. Los carriles de los carruseles
   se salen del margen a propósito (`margin-inline:-5vw`) para que las tarjetas
   lleguen al borde de la pantalla; como `vw` incluye la barra de scroll y el
   contenido no, en escritorio eso deja unos píxeles de scroll horizontal.

   Va en <main>, NO en <html> ni en <body>: tocar el desbordamiento del
   elemento que hace scroll es justo lo que provocó el "scroll infinito al
   final de la página" que vio Eloy en su iPhone (24/08, 16:03). Safari
   recalcula mal el alto del documento en cuanto ese elemento deja de tener
   `overflow:visible`, y se nota sobre todo al abrir y cerrar el vídeo, que
   es cuando cambia la altura del contenido fijo. En <main> el recorte hace
   lo mismo sin tocar el scroll de la página.

   `overscroll-behavior-y` corta además el rebote que arrastra la página más
   allá del final; misma receta que arregló el scroll blanco de las landings
   de Patsa Lab en julio. */
main{overflow-x:clip}
html,body{overscroll-behavior-y:none}

/* ── Sellos de puntuación en la carta de vinos ──
   Eloy, 24/08: "en la carta de los vinos hay que hacer algo pro… que Claude
   integre de una manera sutil, alineada y con una buena UX los sellos de los
   puntos Parker y Peñín de cada uno; esto es importante como técnica de
   neuromarketing porque la gente decide muchas veces qué vino tomar en
   función de estas puntuaciones".

   Van justo debajo del nombre, antes de la nota de cata: es donde el ojo ya
   está cuando decide. Pastilla pequeña, número en la tipografía de los
   precios y la guía en versalitas: se leen de un vistazo sin competir con el
   nombre del vino.

   Sólo los llevan tres de los cinco, que es lo que pasa en una carta real y
   además demuestra la función mejor que ponérselo a todos. Las puntuaciones
   están comprobadas una a una en fuentes públicas el 24/08/2026; las dos que
   no se pudieron confirmar no se han puesto. */
.wineSellos{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0}
.wineSello{
  display:inline-flex; align-items:baseline; gap:5px;
  background:#efe7db; border:1px solid #ddd2c1; border-radius:999px;
  padding:4px 10px 5px;
}
.wineSello b{font:15px/1 Georgia,serif; color:#211d22}
.wineSello small{
  font-size:7px; font-weight:900; letter-spacing:.13em; color:#8a7f6f;
}
@media(max-width:650px){
  .wineSellos{gap:7px; margin-top:10px}
  .wineSello{padding:5px 12px 6px}
  .wineSello b{font-size:17px}
  .wineSello small{font-size:8px}
}
/* la carta de papel de al lado no los lleva a propósito: es justo lo que la
   carta digital puede enseñar y el papel no */

/* ── El vídeo: mismo patrón que la web de captación de Gastromaps ──
   Eloy, 24/08: "fusila tal cual lo del botón de ver vídeo como hice aquí, en
   el mismo sitio, pero con los colores de Fenómenus… y si te fijas, al final
   del vídeo hay un CTA con un botón: que te lo ponga igual, pero con copy de
   Fenómenus. Y al terminar de ver el vídeo el botón cambia y pasa a ser para
   agendar llamada."

   El relevo de la barra flotante ya estaba (se hizo el 23/08). Lo que faltaba
   era este bloque dentro de la sección y el cartel del final. */
/* Eloy, 24/08 (18:51): "aquí, por no sobresaturar con tanto botón y CTA,
   quitar el botón y dejar solo el vídeo… y el del vídeo, que le dé una vuelta
   a cómo maquetarlo mejor".

   Fuera el botón morado "Quiero vender más en cada mesa": esta sección
   explica cómo se pone en marcha, y quien llega aquí todavía está
   entendiendo, no decidiendo. Lo único que se le ofrece es el vídeo, y ahora
   se ofrece de verdad: una tarjeta con el fotograma, no una línea de texto
   con un botón al lado. Es un solo objetivo grande —toda la tarjeta se
   pulsa—, que es lo que funciona con el dedo. */
.videoTarjeta{
  display:flex; align-items:center; gap:16px; width:min(520px,100%);
  margin:30px auto 0; padding:12px 22px 12px 12px; text-align:left;
  background:#141220; border:1px solid #ffffff17; border-radius:20px;
  cursor:pointer; font-family:inherit; color:#fff;
  box-shadow:0 20px 44px #2a1f3a26;
  transition:transform .22s, box-shadow .22s;
}
.videoTarjeta:hover{transform:translateY(-2px); box-shadow:0 26px 58px #2a1f3a3d}
.videoTarjetaFoto{
  flex:none; position:relative; width:132px; height:76px;
  border-radius:13px; overflow:hidden; background:#000;
  display:grid; place-items:center;
}
.videoTarjetaFoto img{width:100%; height:100%; object-fit:cover; display:block; opacity:.85}
.videoTarjetaFoto i{
  position:absolute; width:34px; height:34px; border-radius:50%;
  background:var(--orange); display:grid; place-items:center;
  box-shadow:0 6px 18px #00000059;
}
.videoTarjetaFoto i:after{
  content:""; width:0; height:0; margin-left:2px;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-left:9px solid #fff;
}
.videoTarjetaTexto{display:block; min-width:0}
.videoTarjetaTexto small,.videoTarjetaTexto strong,.videoTarjetaTexto em{display:block}
.videoTarjetaTexto small{
  color:#9a94a4; letter-spacing:.11em; font-size:8px; font-weight:900;
}
.videoTarjetaTexto strong{
  margin-top:5px; font:800 16px/1.25 inherit; letter-spacing:-.01em; text-wrap:balance;
}
.videoTarjetaTexto em{
  margin-top:7px; color:var(--orange); font:900 11px/1 inherit; font-style:normal;
}
.videoTarjetaTexto em:after{content:" →"}
@media(max-width:700px){
  .videoTarjeta{gap:13px; padding:10px 16px 10px 10px; margin-top:24px}
  .videoTarjetaFoto{width:104px; height:62px}
  .videoTarjetaTexto strong{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .videoTarjeta{transition:none}
}

/* el cartel del final, dentro del propio reproductor */
.visorFin{
  position:absolute; inset:0; z-index:4;   /* la X sube a 5: ver más abajo */
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:32px 26px; color:#fff;
  background:linear-gradient(150deg,#120f1af2,#2a1b46f5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.visorFin[hidden]{display:none}
.visorFin p{margin:0}
.visorFin small,.visorFin strong{display:block}
.visorFin small{
  color:var(--orange); letter-spacing:.13em; font-size:8px; font-weight:900;
}
.visorFin strong{
  margin-top:9px; font:clamp(21px,2.4vw,34px)/1.06 Georgia,serif;
  letter-spacing:-.03em; text-wrap:balance; max-width:520px;
}
.visorFin>a{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:20px; min-height:46px; padding:0 22px;
  background:var(--orange); color:#fff; border-radius:12px;
  font-size:12px; font-weight:900; text-decoration:none;
  box-shadow:0 14px 32px #ff755640;
}
.visorFin>button{
  margin-top:12px; padding:0; border:0; background:0 0;
  color:#b3aabb; font:800 10px/1 inherit; cursor:pointer;
}
.visorFin>button:hover{color:#fff}
/* en el tamaño pequeño (cuando el vídeo está pegado a una esquina) el cartel
   se aprieta para que el botón siga cabiendo */
.visorVideo.pegado .visorFin{padding:18px 14px}
.visorVideo.pegado .visorFin strong{font-size:16px; margin-top:6px}
.visorVideo.pegado .visorFin>a{margin-top:12px; min-height:38px; padding:0 15px; font-size:10px}
.visorVideo.pegado .visorFin>button{margin-top:8px; font-size:9px}

/* La X por encima del cartel del final. Eloy, 24/08: "cuando el vídeo
   termina, la pantalla que sale no tiene X para cerrar el reproductor".
   El cartel se dibujaba por encima del botón (capa 4 contra capa 2), así que
   la X quedaba debajo y no se podía pulsar. */
.visorCerrar{z-index:5}

/* ═══════════════════════════════════════════════════════════════════
   Ronda de Eloy · 24/08/2026, tarde
   ═══════════════════════════════════════════════════════════════════ */

/* ── "Quitar flecha y reducir el hueco" (entre las dos maquetas de carta) ──
   En móvil la flecha ya no separa nada: las dos piezas van una debajo de
   otra y ahora cada una lleva su frase encima, que es lo que las distingue.
   Se va también la línea de fondo que la acompañaba, y con ella el hueco
   que sobraba: 64 px de separación pasan a 26, y el rótulo de la segunda
   pieza deja de necesitar su propio empujón. */
@media(max-width:950px){
  .menuFork>.choiceArrow{display:none}
  .menuFork:before{display:none}
  .menuFork{row-gap:26px; padding-bottom:20px}
  .forkPiezaFen .forkRotulo{margin-top:34px}
}
@media(max-width:600px){
  .menuFork{row-gap:24px; padding-bottom:18px}
}

/* El titular ya no obliga a que cada frase entre en una línea (ver landing.js):
   con `balance` las líneas que se parten quedan repartidas en vez de dejar una
   palabra suelta abajo. */
@media(max-width:700px){
  .hero h1{text-wrap:balance; width:100%}
  /* la hoja original prohíbe partir las frases del titular (`nowrap`), que era
     lo que obligaba a mantenerlo pequeño. Ahora pueden partirse: es la
     condición para que el título crezca y llene la primera pantalla. */
  .hero h1>span,.hero h1>strong,.hero h1>em{display:block; white-space:normal}
}

/* ── El bloque del 85 %, en columna en el móvil ──
   Eloy, 24/08: "el link ese quítale el subrayado y que quepa todo el texto en
   dos líneas".

   No cabía por una razón medible: el número y el texto iban en dos columnas y
   al texto le quedaban **101 px de ancho** en una pantalla de 390. Con eso, la
   frase se comía seis líneas y la nota del estudio tres, y una se montaba
   encima de la otra. En columna, el dato se lee grande —que es lo que
   engancha— y el texto dispone del ancho entero. */
@media(max-width:700px){
  .onlineStat{
    display:block; text-align:center; padding:26px 22px 24px;
  }
  .onlineStat>.statNumber{margin:0 auto}
  .onlineStat>.statCopy{
    max-width:none; margin:18px auto 0; padding:17px 0 0;
    border-left:0; border-top:1px solid #ffffff24; text-align:center;
  }
  .onlineStat .statCopy p{font-size:15px; line-height:1.35; margin-bottom:11px}
  .onlineStat .statCopy a{
    display:inline-block; max-width:300px;
    border-bottom:0; text-decoration:none;      /* fuera el subrayado */
    font-size:9px; line-height:1.4; color:#b4acc0;
  }
  /* la flecha guía, un punto más grande (Eloy: "que sea un poco más grande y
     centrada, mismo margen arriba y abajo") */
  .guiaAbajo{width:26px; height:26px; margin:18px auto}
}

/* ── Las dos primeras pantallas, como dos bloques ──
   Eloy, 24/08 (de viva voz, a través de Angel): "que el primer scroll baje
   directo desde el hero hasta la segunda pantalla; que no puedas quedarte a
   mitad de camino viendo media frase del hero y medio móvil. Solo esas dos;
   de ahí para abajo, scroll normal".

   Se hace con lo que traen los navegadores de serie (scroll snap), no
   secuestrando el scroll con JavaScript: el dedo sigue mandando, y lo único
   que hace el navegador es rematar el gesto en uno de los dos puntos. Por eso
   el imantado es `proximity` y no `mandatory`: solo actúa cerca de esos dos
   puntos y deja el resto de la página completamente libre. `scroll-snap-stop`
   es lo que impide saltarse la segunda pantalla de un manotazo.

   Para que la segunda pantalla sea una pantalla de verdad, el bloque del
   móvil mide ahora lo que sobra tras la tira de logos (95 px), con el móvil
   centrado dentro. Así el conjunto móvil + logos ocupa exactamente el alto
   visible, que es lo que pidió. */
/* El imantado NO se hace con `scroll-snap` de CSS. Se probó y no da lo que
   Eloy pide: con `proximity` te sigues quedando a medias, y con `mandatory`
   aparece justo lo que no quiere — resistencia a salir de la segunda pantalla
   cuando lo que quieres es seguir bajando. Lo lleva landing.js, que actúa solo
   en dos casos concretos y en el resto no se mete. */
/* El ancla de la segunda pantalla no existe fuera del móvil. Sin esto rompía
   el hero en escritorio: el hero es una rejilla de dos columnas y un <span>
   suelto cuenta como una celda más, así que ocupaba el sitio del móvil y lo
   empujaba a la fila de abajo, dejando media pantalla vacía a la derecha
   (visto por Eloy el 24/08 por la noche). */
.anclaPantalla2{display:none}

@media(max-width:700px){
  .hero{padding-bottom:0}
  .hero .heroProduct{
    margin-top:0;
    min-height:calc(100vh - 95px);
    min-height:calc(100svh - 95px);
    display:flex; align-items:center; justify-content:center;
  }
  .anclaPantalla2{display:block; width:1px; height:1px; margin:0; padding:0}
}

/* ── El reproductor se esconde tras el borde, como en YouTube ──
   Eloy, 24/08: "al deslizar el reproductor contra el borde que se esconda
   detrás dejando visible una pestaña para volver a traerlo, y que el audio
   siga sonando". Y en la segunda vuelta: "el icono, algo más moderno, más
   pro; que se pueda arrastrar de arriba abajo estando oculto; y que no se vea
   todo el alto del reproductor, solo una pestañita más discreta".

   Así que el vídeo se va casi entero —deja 6 px dentro— y lo que se ve es una
   pestaña aparte, de 58 px de alto, con un chevron fino. Esos 6 px no son un
   descuido: **Safari de iPhone pausa cualquier vídeo que sale entero de la
   pantalla** (nos pasó el 23/08 con los vídeos de la carta), así que el vídeo
   nunca llega a salir del todo. La pestaña los tapa. */
:root{
  --ico-chevron:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5 8 12l7 7"/></svg>');
}
.visorVideo.pegado .visorCaja.escondido{
  transition:left .3s cubic-bezier(.22,1,.36,1), top .3s cubic-bezier(.22,1,.36,1);
  box-shadow:none;
}
.visorSacar{display:none}
.visorSacar[hidden]{display:none}
.visorVideo.pegado .visorSacar:not([hidden]){
  display:grid; place-items:center;
  /* SIN ESTO LA PESTAÑA NO SE PUEDE TOCAR. El contenedor del visor, en modo
     pequeño, lleva `pointer-events:none` para que se pueda seguir leyendo la
     página por debajo; la caja del vídeo lo devuelve a `auto` y la pestaña
     —que es hermana de la caja, no hija— se quedó sin devolverlo. Resultado:
     no recibía ni un solo toque. Lo que a veces funcionaba era acertar en los
     6 px del vídeo que asoman al lado, y de ahí el "falla muchas veces" de
     Angel. Comprobado sobre el estilo aplicado, no sobre el escrito. */
  pointer-events:auto;
  position:fixed; z-index:75; width:34px; height:64px;
  border:1px solid #ffffff26; padding:0; cursor:pointer;
  background:#0b0b12d9;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px #0009;
  touch-action:none;
  transition:top .3s cubic-bezier(.22,1,.36,1), transform .18s ease;
}
/* pegada al borde derecho: se redondea solo por dentro */
.visorSacar[data-lado="der"]{border-radius:14px 0 0 14px; border-right:0}
.visorSacar[data-lado="izq"]{border-radius:0 14px 14px 0; border-left:0}
.visorSacar:active{transform:scale(.94)}
/* Zona de dedo más grande que el dibujo. La pestaña mide 34x64 px, pero lo
   que se puede tocar son 58x88: un dedo apunta con un margen de un centímetro
   largo, y fallar aquí es quedarse sin vídeo (Angel, 24/08: "intentar tapear
   falla muchas veces"). No se ve nada: solo amplía el blanco de tiro. */
.visorVideo.pegado .visorSacar:not([hidden]):before{
  content:""; position:absolute; top:-12px; bottom:-12px; left:-24px; right:-12px;
}
.visorSacar[data-lado="izq"]:before{left:-12px; right:-24px}
.visorSacar>span{
  width:15px; height:15px; background:#fff; display:block;
  -webkit-mask:var(--ico-chevron) center/contain no-repeat;
          mask:var(--ico-chevron) center/contain no-repeat;
}
.visorSacar[data-lado="izq"]>span{transform:scaleX(-1)}
/* escondido, la X y el cartel del final no estorban */
.visorVideo.pegado .visorCaja.escondido .visorCerrar{opacity:0; pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .visorVideo.pegado .visorCaja.escondido,.visorSacar{transition:none}
}

/* ── El botón flotante del vídeo, con la anatomía de la web de Gastromaps ──
   Eloy mandó dos capturas de su web: el lanzador es una **píldora abajo a la
   derecha** —círculo con el play y dos líneas de texto—, no una barra ancha
   centrada; y cuando el visitante ya ha visto el vídeo, ese sitio pasa a una
   **tarjeta clara** con el siguiente paso y el botón de agendar.

   La barra ancha que había además **tapaba los enlaces legales del pie**, que
   van centrados. En la esquina derecha deja de pisarlos. */
.floatCta.lanzadera{
  position:fixed; right:16px; bottom:16px; left:auto; z-index:50;
  width:auto; max-width:calc(100% - 32px); min-height:0;
  background:none; border:0; padding:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  display:block;
  /* la barra ancha iba centrada con un desplazamiento propio; anclada a la
     derecha ese desplazamiento la sacaba 82 px de su sitio */
  transform:none; animation:none;
}
.floatCta.lanzadera[hidden]{display:none}

/* el lanzador. Los selectores llevan `.floatCta.lanzadera` delante a
   propósito: la hoja original define `.floatCta button` con fondo
   transparente, borde cero y 5 px de relleno, y con menos peso que eso el
   botón salía **transparente en escritorio** (visto por Angel el 24/08). */
.floatCta.lanzadera .lanzaVideo{
  display:inline-flex; align-items:center; gap:11px;
  background:#0d0c14; color:#fff; border:1px solid #ffffff2b;
  border-radius:999px; min-height:58px; padding:8px 18px 8px 9px;
  cursor:pointer; font-family:inherit; text-align:left;
  box-shadow:0 16px 42px #00000075;
  transition:box-shadow .25s, transform .2s;
}
.floatCta.lanzadera .lanzaVideo[hidden]{display:none}
.floatCta.lanzadera .lanzaVideo:hover{transform:translateY(-1px); box-shadow:0 22px 54px #00000090}
.floatCta.lanzadera .lanzaVideoPlay{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--orange); display:grid; place-items:center;
  box-shadow:0 0 0 5px #ff755626;
  animation:lanzaLatido 6.4s ease-in-out infinite;
}
.floatCta.lanzadera .lanzaVideoPlay:after{
  content:""; width:0; height:0; margin-left:3px;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:10px solid #fff;
}
@keyframes lanzaLatido{
  0%,66%,100%{box-shadow:0 0 0 5px #ff755626, 0 0 0 0 #ff755600}
  74%        {box-shadow:0 0 0 5px #ff755626, 0 0 0 13px #ff755600}
}
.floatCta.lanzadera .lanzaVideoTexto{display:block}
.floatCta.lanzadera .lanzaVideoTexto small,.lanzaVideoTexto strong{display:block}
.floatCta.lanzadera .lanzaVideoTexto small{
  color:#9a94a4; letter-spacing:.09em; font-size:7px; font-weight:800;
  margin-bottom:2px;
}
.floatCta.lanzadera .lanzaVideoTexto strong{font-size:13px; font-weight:800}

/* la tarjeta que lo sustituye cuando ya ha visto el vídeo */
.floatCta.lanzadera .ctaSiguiente{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:13px;
  padding-top:19px;
  width:min(438px,calc(100vw - 32px));
  background:#fffffff5; color:#1b1720;
  border:1px solid #e3dcd4; border-radius:17px;
  padding:13px 14px 13px 16px; position:relative;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 18px 44px #00000038;
}
.floatCta.lanzadera .ctaSiguiente[hidden]{display:none}
/* Angel, 24/08 por la noche: "en la versión PC la frase «te enseñamos tu
   carta funcionando» no se ve entera, la palabra «funcionando» está pisada
   por el botón de su derecha". La hoja original trae `white-space:nowrap` en
   el párrafo de la barra flotante —venía de cuando era una barra de una sola
   línea—, así que la frase no partía: pedía 235 px, tenía 200 y el sobrante
   se metía debajo del botón. Ahora parte en dos líneas y la tarjeta es algo
   más ancha, que con "Empieza a vender más" el botón ocupa 155 px. */
.floatCta.lanzadera .ctaSiguiente p{margin:0; min-width:0}
.floatCta.lanzadera .ctaSiguiente p,
.floatCta.lanzadera .ctaSiguiente small,
.floatCta.lanzadera .ctaSiguiente strong{white-space:normal; text-wrap:pretty}
.floatCta.lanzadera .ctaSiguiente small,.ctaSiguiente strong{display:block}
.floatCta.lanzadera .ctaSiguiente small{
  color:#7a7280; letter-spacing:.09em; font-size:6.5px; font-weight:900;
  margin-bottom:3px;
}
.floatCta.lanzadera .ctaSiguiente strong{font-size:11.5px; line-height:1.35; font-weight:800}
.floatCta.lanzadera .ctaSiguiente>a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:39px; padding:0 14px; white-space:nowrap;
  background:var(--orange); color:#fff; border-radius:10px;
  font-size:10px; font-weight:900; text-decoration:none;
  box-shadow:0 8px 20px #ff755645;
}
.floatCta.lanzadera .ctaSiguienteCerrar{
  /* dentro de la tarjeta, no a caballo del borde: media X colgando fuera se
     lee como un fallo de maquetación (Angel, 24/08) */
  position:absolute; top:6px; right:7px; width:20px; height:20px;
  border-radius:50%; border:1px solid #e6dfd6; background:#f4efe8; color:#6d6572;
  cursor:pointer; padding:0;
  display:grid; place-items:center; box-shadow:0 4px 12px #0000002e;
}
.floatCta.lanzadera .ctaSiguienteCerrar:hover{color:#1b1720}

@media(max-width:600px){
  /* con el prefijo `.floatCta.lanzadera`, como las reglas de arriba: sin él
     pesan menos que la regla base y el navegador las descarta en silencio */
  .floatCta.lanzadera{right:12px; bottom:calc(12px + env(safe-area-inset-bottom))}
  .floatCta.lanzadera .lanzaVideo{min-height:54px; padding:7px 15px 7px 8px}
  .floatCta.lanzadera .lanzaVideoPlay{width:37px; height:37px}
  .floatCta.lanzadera .lanzaVideoTexto strong{font-size:12px}
  .floatCta.lanzadera .ctaSiguiente{width:min(358px,calc(100vw - 20px)); padding:12px 12px 12px 14px}
}
@media(prefers-reduced-motion:reduce){
  .lanzaVideoPlay{animation:none}
}
/* el pie ya no necesita reservar el alto de una barra que ocupaba todo el
   ancho: la píldora vive en la esquina y los enlaces van centrados */
@media(max-width:700px){
  body>main>footer{padding-bottom:78px}
}

/* ── Las dos "X" de cerrar, dibujadas ──
   Angel, 24/08: "la X del botón no está centrada en el circulito, está caída
   hacia abajo". Dos motivos, y ninguno era el color ni el tamaño del círculo:

   1. El carácter `×` **nunca está centrado en su propia caja** —es el mismo
      problema que tuvieron las flechas el 22/08— y aquí además arrastraba un
      interlineado de 31,5 px dentro de un círculo de 20.
   2. La declaración que debía corregirlo estaba mal escrita: en el atajo
      `font:` no vale `inherit` como familia, así que **el navegador la
      descartaba entera** y seguía mandando la hoja original (21 px).

   Se aplica a las dos cruces de la web —la de la tarjeta flotante y la del
   reproductor— porque comparten el mismo defecto. Dos barras cruzadas
   centradas por geometría: no dependen de la tipografía, así que se ven
   iguales en cualquier móvil. */
.floatCta.lanzadera .ctaSiguienteCerrar,
.visorCerrar{font-size:0; position:absolute; line-height:0}
.floatCta.lanzadera .ctaSiguienteCerrar:before,
.floatCta.lanzadera .ctaSiguienteCerrar:after,
.visorCerrar:before,
.visorCerrar:after{
  content:""; position:absolute; top:50%; left:50%;
  border-radius:2px; background:currentColor;
}
.floatCta.lanzadera .ctaSiguienteCerrar:before,
.floatCta.lanzadera .ctaSiguienteCerrar:after{width:9px; height:1.6px}
.visorCerrar:before,.visorCerrar:after{width:13px; height:1.7px}
.floatCta.lanzadera .ctaSiguienteCerrar:before,
.visorCerrar:before{transform:translate(-50%,-50%) rotate(45deg)}
.floatCta.lanzadera .ctaSiguienteCerrar:after,
.visorCerrar:after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ── Mando propio del reproductor ─────────────────────────────────────
   Eloy, 24/08 (18:53): "quitar la opción de los 3 puntos, que no puedan ni
   ponerlo más rápido, ni descargarlo ni nada, que se quede todo básico". Y
   Angel, la misma tarde: "en el móvil no se puede pulsar el botón de mute
   porque la X para cerrar está encima".

   Las dos cosas son el mismo problema: los controles eran los del navegador.
   Chrome de Android coloca el altavoz **arriba a la derecha**, justo donde va
   nuestra X, y añade un menú de tres puntos con descarga y velocidad que no
   se puede quitar del todo. Así que el mando es nuestro: cinco piezas abajo
   —play, tiempo, barra, sonido y pantalla completa—, nada más, y la esquina
   de arriba queda libre para la X.

   Los iconos son dibujos (máscaras SVG), no caracteres: la lección del 23/08
   es que ▶ y ✕ se pintan distinto en cada móvil. */
:root{
  --ico-play:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M8 5.2v13.6a.8.8 0 0 0 1.23.67l10.6-6.8a.8.8 0 0 0 0-1.34L9.23 4.53A.8.8 0 0 0 8 5.2Z"/></svg>');
  --ico-pausa:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 4.5h3.4v15H7zM13.6 4.5H17v15h-3.4z"/></svg>');
  --ico-sonido:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 9.2h3.2L12 5.1a.7.7 0 0 1 1.15.54v12.72A.7.7 0 0 1 12 18.9L7.2 14.8H4a.8.8 0 0 1-.8-.8v-4a.8.8 0 0 1 .8-.8Z"/><path fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" d="M16.4 9.1a4 4 0 0 1 0 5.8M18.9 6.6a7.4 7.4 0 0 1 0 10.8"/></svg>');
  --ico-mudo:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 9.2h3.2L12 5.1a.7.7 0 0 1 1.15.54v12.72A.7.7 0 0 1 12 18.9L7.2 14.8H4a.8.8 0 0 1-.8-.8v-4a.8.8 0 0 1 .8-.8Z"/><path fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" d="m16.6 9.4 4.6 5.2M21.2 9.4l-4.6 5.2"/></svg>');
  --ico-abrir:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4H4v5M20 9V4h-5M15 20h5v-5M4 15v5h5"/></svg>');
  --ico-cerrar-pantalla:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9h5V4M20 9h-5V4M15 20v-5h5M9 20v-5H4"/></svg>');
}
.mando{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:11px;
  padding:26px 14px 11px;
  background:linear-gradient(to top,#000000d9 12%,#00000080 55%,#0000);
  opacity:1; transition:opacity .22s ease;
}
.visorCaja.mandoOculto .mando{opacity:0; pointer-events:none}
.mandoBoton{
  flex:none; width:34px; height:34px; padding:0; border:0; border-radius:9px;
  background:#ffffff14; cursor:pointer; display:grid; place-items:center;
  transition:background .18s;
}
.mandoBoton:hover{background:#ffffff2b}
.mandoBoton:before{
  content:""; width:19px; height:19px; background:#fff; display:block;
}
.mandoPlay:before{-webkit-mask:var(--ico-pausa) center/contain no-repeat; mask:var(--ico-pausa) center/contain no-repeat}
.mandoPlay.enPausa:before{-webkit-mask-image:var(--ico-play); mask-image:var(--ico-play)}
.mandoSonido:before{-webkit-mask:var(--ico-sonido) center/contain no-repeat; mask:var(--ico-sonido) center/contain no-repeat}
.mandoSonido.mudo:before{-webkit-mask-image:var(--ico-mudo); mask-image:var(--ico-mudo)}
.mandoSonido.mudo{background:var(--orange)}
.mandoPantalla:before{-webkit-mask:var(--ico-abrir) center/contain no-repeat; mask:var(--ico-abrir) center/contain no-repeat}
.mandoPantalla.enPantalla:before{-webkit-mask-image:var(--ico-cerrar-pantalla); mask-image:var(--ico-cerrar-pantalla)}
.mandoTiempo{
  flex:none; color:#e9e6ef; font-size:11px; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
/* la barra: alta de dedo (16 px de zona táctil) aunque la línea sea de 4 */
.mandoPista{
  flex:1; min-width:40px; height:16px; position:relative; cursor:pointer;
  display:flex; align-items:center; touch-action:none;
}
.mandoPista:before{
  content:""; position:absolute; left:0; right:0; height:4px;
  border-radius:99px; background:#ffffff3d;
}
.mandoPista i{
  position:absolute; left:0; height:4px; width:0;
  border-radius:99px; background:var(--orange);
}
.mandoPista b{
  position:absolute; left:0; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:#fff; box-shadow:0 2px 6px #0009;
  opacity:0; transition:opacity .16s;
}
.mandoPista:hover b,.mandoPista:focus-visible b,.mandoPista.tocando b{opacity:1}
.mandoPista:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:99px}

/* el play grande del centro: solo cuando está en pausa */
.mandoGrande{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  border:0; background:none; padding:0; cursor:pointer;
  display:grid; place-items:center;
}
.mandoGrande>span{
  width:66px; height:66px; border-radius:50%;
  background:#0d0c14cc; border:1px solid #ffffff2e;
  box-shadow:0 10px 34px #0009;
  display:grid; place-items:center;
  opacity:0; transform:scale(.86); transition:opacity .2s, transform .2s;
}
.mandoGrande>span:after{
  content:""; width:26px; height:26px; margin-left:3px; background:#fff;
  -webkit-mask:var(--ico-play) center/contain no-repeat;
          mask:var(--ico-play) center/contain no-repeat;
}
.visorCaja.enPausa .mandoGrande>span{opacity:1; transform:scale(1)}
/* en pequeño y escondido no pinta nada: el toque devuelve el vídeo a grande */
.visorVideo.pegado .mando,.visorVideo.pegado .mandoGrande{display:none}

@media(max-width:700px){
  .mando{gap:9px; padding:24px 11px 10px}
  .mandoBoton{width:32px; height:32px}
  .mandoTiempo{font-size:10px}
  .mandoGrande>span{width:58px; height:58px}
}
@media(prefers-reduced-motion:reduce){
  .mando,.mandoGrande>span{transition:none}
}

/* En pantalla completa manda la caja, no el vídeo: así el mando y la X
   siguen ahí (Eloy: "si lo abro a toda la pantalla se pierden los controles
   del play, la barra de navegación y todo"). */
.visorCaja:fullscreen{
  width:100vw; height:100vh; max-width:none; border-radius:0;
  display:grid; place-items:center; background:#000;
}
.visorCaja:fullscreen video{width:100%; height:100%; object-fit:contain}
.visorCaja:fullscreen .mando{padding:34px 24px 20px}
.visorCaja:fullscreen .visorCerrar{top:16px; right:18px}

/* ── El puente entre "deciden ahí mismo" y las dos maquetas ──
   Eloy, 24/08 (18:49): "todo este copy tiene que seguir un orden lógico,
   porque cuando lees 'deciden si entran' y luego te pasas a leer 'O abren un
   PDF', eso no tiene sentido. Y en el móvil menos. Que mantenga una
   coherencia y que le aporte un toque irónico para que espabile el
   hostelero."

   Tenía razón y el fallo era de secuencia, no de redacción: la cadena
   terminaba en la decisión y las dos ramas volvían atrás, al momento de abrir
   la carta, cada una empezando por un "O" que no colgaba de nada. Ahora la
   cadena termina en "DECIDEN AHÍ MISMO", una frase hace de bisagra —lo que
   encuentran es una de estas dos cosas— y las ramas son ya las dos cosas:
   "Un PDF. Con suerte, hasta se abre." y "O una carta que abre el apetito."
   El "O" de la segunda ya tiene de dónde colgar, y el orden se lee igual de
   arriba abajo en el móvil que en dos columnas en el ordenador. */
.forkPuente{
  margin:0 auto 30px; max-width:640px; text-align:center;
  color:#4c4652; font:clamp(15px,1.7vw,19px)/1.35 inherit; font-weight:700;
  text-wrap:balance;
}
.forkPuente em{color:#211d22; font-style:normal; font-weight:800}
@media(max-width:950px){
  .forkPuente{margin-bottom:22px; font-size:clamp(14px,4vw,17px)}
}

/* ── Sellos de puntuación: de etiqueta a burbuja flotante ─────────────
   Eloy, 25/08/2026: "lo de los puntos de los vinos no me convencen...
   prefiero que sea circular... y que aparezca dentro del círculo el número...
   y PUNTOS PARKER y PUNTOS PEÑIN cada uno con su estilo... y que esté como
   por ahí... en modo burbuja y con un poco de aura... de como ligeramente
   flotando".
   Las dos referencias que mandó están medidas, no aproximadas a ojo: el verde
   de Peñín es #124540 y Parker va con doble aro fino sobre fondo claro.
   OJO: son sellos NUESTROS inspirados en los suyos, no copias de sus logos.
   Citar la puntuación es legítimo; reproducir la marca registrada de la guía,
   no — y esto va en una web comercial.                                      */

.wineCard .wineSellos{
  position:absolute; top:12px; right:12px; z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:9px;
  margin:0; pointer-events:none;
}
.wineSello{
  width:58px; height:58px; padding:0; gap:0; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1;
  animation:selloFlota 4.6s ease-in-out infinite;
}
.wineSello:nth-child(2){animation-delay:-2.3s}   /* que no floten a la vez */
.wineSello b{margin:0}
.wineSello small{
  font-size:6.5px; font-weight:900; letter-spacing:.1em; line-height:1.25;
  margin-top:2px;
}

/* Parker: doble aro fino sobre fondo claro, como en su sello */
.wineSello.parker{
  background:#fdfcfa; border:1px solid #2b2b2b;
  box-shadow:0 0 0 3px #fdfcfa, 0 0 0 4px #2b2b2b,
             0 8px 20px #00000026, 0 0 22px #ffffff40;
}
.wineSello.parker b{font:800 21px/1 system-ui,-apple-system,"Segoe UI",sans-serif; color:#232323}
.wineSello.parker small{color:#4a4a4a}

/* Peñín: círculo verde sólido, número en blanco */
.wineSello.penin{
  background:#124540; border:1px solid #0d3630;
  box-shadow:0 0 0 3px #ffffffcc, 0 8px 20px #0000002e, 0 0 22px #12454040;
}
.wineSello.penin b{font:800 21px/1 system-ui,-apple-system,"Segoe UI",sans-serif; color:#fff}
.wineSello.penin small{color:#cfe0dc}

@keyframes selloFlota{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media(max-width:760px){
  .wineCard .wineSellos{top:9px; right:9px; gap:7px}
  .wineSello{width:50px; height:50px}
  .wineSello.parker b,.wineSello.penin b{font-size:18px}
  .wineSello small{font-size:5.8px}
}

@media(prefers-reduced-motion:reduce){
  .wineSello{animation:none}
}

/* ── "Te encuentran aquí", ahora dentro de la caja ────────────────────
   Eloy, 25/08/2026: "aquí sería meter el TE ENCUENTRAN AQUI dentro de la
   caja... con una flecha apuntando a las redes.... luego dejar el de abren
   tu carta / las flechas que se muevan ligeramente / y quitar el deciden
   ahí mismo".
   El rótulo era un <p> encima de la caja y la caja tenía el borde superior
   cortado para pegarse a él; ahora que el rótulo entra dentro, la caja
   vuelve a cerrarse por completo.                                          */

.channelBlock>p{display:none}          /* por si quedara alguno suelto */
.channelBlock .channelLogos{
  border-radius:999px; border-top:1px solid #d6cdc1; padding-top:16px;
}
.channelLogos .canalEtiqueta{
  font-size:10px; font-weight:900; letter-spacing:.14em; color:#6f6771;
  white-space:nowrap;
}
/* las flechas, moviéndose un poco hacia donde apuntan */
.channelLogos>i:before{animation:guiaLate 2.6s ease-in-out infinite}
/* usa `translate` y no `transform`, igual que guiaBaja: así no borra
   ninguna rotación que la flecha pueda llevar puesta */
@keyframes guiaLate{
  0%,100%{opacity:.55; translate:0 0}
  50%    {opacity:1;    translate:4px 0}
}

@media(max-width:760px){
  .channelBlock .channelLogos{border-radius:24px}
  .channelLogos .canalEtiqueta{font-size:9px; letter-spacing:.12em}
  /* en móvil la tira va en vertical: la flecha ya gira y baja, se respeta */
  .channelLogos>i:before{animation:guiaBaja 2.6s ease-in-out infinite}
}

@media(prefers-reduced-motion:reduce){
  .channelLogos>i:before{animation:none}
}

/* El plato destacado de la carta pasó de foto a vídeo (28/08/2026, encargo de
   Eloy: el solomillo se sustituye por el steak tartar). El CSS original solo
   contemplaba una <img> ahí dentro, así que el vídeo necesita las mismas reglas
   o se sale de su caja. */
.onlineDish > video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* ===========================================================================
   RONDA DE ELOY DEL 28/08/2026 (noche)
   =========================================================================== */

/* 1. LA CAJA DE MARIDAJE DEL MÓVIL (hero).
   Pedía que se viera la botella y el precio de la copa. Antes era solo texto:
   nombre del vino y un número suelto. Ahora es una ficha en tres partes —
   botella, nombre y los dos precios— dentro del mismo ancho de siempre.
   El original ponía `.winebox>*{display:block}`: aquí se pasa a rejilla. */
/* OJO CON LA ESPECIFICIDAD: el diseño original trae `.phone .winebox`, que pesa
   más que `.winebox` a secas. Escrito solo con `.winebox`, el bloque se apilaba
   en columna y los precios se salían del móvil. Se escribe con el mismo peso. */
.phone .winebox {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 11px 13px;
}
.phone .winebox > * { display: block }
/* La foto de catálogo viene con fondo blanco: sobre la caja oscura se veía un
   cuadrado. Se usa la versión recortada (`-recorte`), con fondo transparente. */
.wineboxBotella {
  width: 30px;
  height: auto;
  filter: drop-shadow(0 3px 6px #0009);
}
.phone .winebox .wineboxTexto small { color: var(--orange); letter-spacing: .12em; font-size: 7px; display: block }
.phone .winebox .wineboxTexto b { margin: 3px 0 1px; font-size: 10px; display: block }
.phone .winebox .wineboxTexto span { color: #8f8a97; font-size: 7.5px; display: block }
/* OJO: unas líneas más arriba está `.phone .winebox > * { display: block }`,
   que pesa más que `.wineboxPrecios` a secas y dejaba esta caja en bloque. El
   `gap` no hacía nada y los dos precios se separaban solo por el espacio del
   HTML: 14 px medidos en pantalla, en vez de los 30 escritos. Con el selector
   completo sí manda. */
.phone .winebox .wineboxPrecios {
  display: flex;
  gap: 30px;
  align-items: center;
  color: #efeaf3;
  font-size: 12px;
  font-weight: 700;
}
/* Los iconos son EXACTAMENTE los de la sección de vinos: el contenedor lleva
   también la clase `winePrices`, así que hereda sus dibujos y sus medidas en vez
   de tener una copia reducida que se parecía pero no era igual. */
.phone .winebox .wineboxPrecios b { margin: 0; font-size: 12px; display: inline-flex; align-items: center; gap: 5px }

/* 2. LA BURBUJA "PLATO DEL MES".
   Va sobre el vídeo del steak tartar, arriba a la izquierda, y lleva una
   estrella que late para que el ojo vaya ahí. El latido es de la estrella, no
   de la burbuja entera: un cartel que parpadea completo cansa y se lee peor. */
.platoMes {
  z-index: 3;
  position: absolute;
  top: 14px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  background: #12101fe6;
  border: 1px solid #ffffff26;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}
.platoMesEstrella {
  width: 9px;
  height: 9px;
  display: block;
  background: var(--orange);
  /* estrella de cinco puntas dibujada, sin fuentes ni imágenes */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: lateEstrella 1.8s ease-in-out infinite;
}
@keyframes lateEstrella {
  0%, 100% { opacity: 1;   transform: scale(1) }
  50%      { opacity: .45; transform: scale(.8) }
}

/* 3. EL MARIDAJE BAJO EL PLATO.
   Eloy lo pidió debajo del steak tartar, con el mismo lenguaje que la carta de
   vinos ("VA PERFECTO CON"). Se apoya en el borde inferior de la tarjeta, así
   que hereda su fondo oscuro y no parece un añadido. */
.dishPair {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 14px;
  padding: 14px 27px 16px;
  background: #0b0a0e;
  border-top: 1px solid #221f2a;
}
.dishPair > small {
  grid-column: 1 / -1;
  color: #ff9b82;
  letter-spacing: .13em;
  font-size: 7px;
  font-weight: 900;
}
.dishPairVino b { color: #fff; font: 15px/1.1 Georgia; display: block; margin-top: 4px }
.dishPairVino p { color: #b7b1bd; font-size: 9px; margin: 4px 0 0; max-width: 330px }
.dishPair .winePrices {
  display: flex;
  gap: 10px;
  align-self: end;
  color: #efeaf3;
  font-size: 13px;
  font-weight: 700;
}
.dishPair .winePrices b { display: inline-flex; align-items: center; gap: 4px }

@media (max-width: 760px) {
  .dishPair { padding: 12px 18px 14px }
  .dishPairVino p { font-size: 8.5px }
}

@media (prefers-reduced-motion: reduce) {
  .platoMesEstrella { animation: none }
}

/* En móvil el teléfono del hero se dibuja más estrecho, y tres columnas
   (botella, nombre, dos precios) se aprietan. Se reduce la botella, se ajusta
   el aire y se retira la línea secundaria, que es la información menos
   importante de las tres: el nombre y los precios sí tienen que verse. */
@media (max-width: 760px) {
  .phone .winebox { grid-template-columns: 24px 1fr auto; gap: 8px; padding: 10px 11px }
  .wineboxBotella { width: 24px }
  .phone .winebox .wineboxTexto span { display: none }
  .phone .winebox .wineboxPrecios { gap: 20px; font-size: 11px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RONDA DE ELOY DEL 29/08/2026 (capturas desde su iPhone)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · SELLO "TOP VENTAS" PARA EL MARIDO DE MI AMIGA.
   "A este vino ponerle este sello del mismo tamaño que los otros": hereda
   .wineSello entero (58 px en escritorio, 50 en móvil, misma posición y misma
   flotación), así que por construcción NO puede quedar de otro tamaño. Solo
   cambia el color: el coral de la marca en vez del negro de Parker o el verde
   de Peñín. */
.wineSello.topventas {
	/* UN SOLO ARO, al contrario que Parker y Peñín, que llevan halo + aro.
	   Es la diferencia que marcó Eloy sobre su propio diseño.
	   Y el aro va METIDO 3 px, dejando una franja libre alrededor igual de
	   ancha que el halo blanco de Peñín. Se hace con una capa de fondo en vez
	   de con el borde del propio sello, para que la caja siga midiendo lo
	   mismo que los otros (50 / 59 px) y la fila no se descoloque. */
	background: transparent;
	border: 0;
	box-shadow: none;
	position: relative;
	gap: 0;
	padding: 0 5px;
}
.wineSello.topventas::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #fdf8f4;
	border: 1px solid #ff7556;
	box-shadow: 0 6px 16px #0000001a;
}
.wineSello.topventas > * { position: relative; }
.wineSello.topventas b {
	font: 400 7.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #ff5c35;
	margin: 0 0 1px;
}
/* Cuatro líneas, como el suyo: TOP / VENTAS / ELLAS LO / ELIGEN */
.wineSello.topventas small {
	font-size: 6.1px;
	font-weight: 800;
	letter-spacing: .03em;
	line-height: 1.1;
	color: #ff5c35;
	margin: 0;
}
.wineSello.topventas i {
	font-style: normal;
	font-size: 4.5px;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.12;
	color: #e5896e;
	margin-top: 2px;
}

/* 2 · EL ARTÍCULO DEL "85 %".
   "ponerle un EL ahí en la esquina para que se vea como que EL 85%". Va
   pegado arriba a la izquierda del número, en pequeño, sin descolocar la cifra
   (el número sigue centrado en su sitio: el "EL" se posiciona sobre él). */
.statNumber b i {
	display: inline-block;
	vertical-align: top;
	margin: .28em .12em 0 0;
	font: 700 .3em/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	font-style: normal;
	letter-spacing: .04em;
	opacity: .85;
}

/* 3 · QUE EL PRECIO NO SE COMA LA DESCRIPCIÓN DEL PLATO.
   Lo cazó Eloy en su iPhone: "el precio aquí aparece encima del texto".

   QUÉ PASABA: el precio va en posición absoluta abajo a la derecha y el texto
   ocupaba todo el ancho por debajo. Medido sobre LAS LÍNEAS DE TEXTO (no sobre
   la caja del párrafo, que no se mueve): a 390 px la última línea se metía
   28 px dentro del precio, y a 414 px, 4 px. Justo la franja del iPhone.

   POR QUÉ SOLO EN MÓVIL: de 700 px para arriba el texto tiene de sobra y nunca
   llega al precio. Poner el hueco también ahí solo conseguía partir la frase en
   tres líneas sin motivo y afeaba el escritorio, que estaba bien.

   Comprobado en 8 anchos (320 a 1440) con el motor de Safari: 0 solapes. */
@media (max-width: 700px) {
	.onlineDish > div > p,
	.onlineDish > div > h3 { padding-right: 58px; }
}


/* 4 · EL MÓVIL DIBUJADO DEL HERO, RETOQUES DE ELOY (31/08/2026).
   SOLO ESCRITORIO: en móvil ya estaba bien —el rótulo cabe en una línea y el
   subtítulo del vino está oculto— y Angel pidió no tocarlo.

   a) Los dos precios estaban a 29 px uno de otro, cuando el número y su icono
      están a 5. Se baja el hueco a 14 y se devuelve lo quitado como margen
      izquierdo, para que la columna siga midiendo lo mismo: así el "7" y la
      copa NO se mueven y es el "39" el que se acerca, que es lo que se pidió.
   b) "MARIDAJE RECOMENDADO" se partía en dos líneas por 3 px. Se aprieta el
      espaciado entre letras, que es lo que sobraba; el tamaño no se toca.

   OJO CON EL SELECTOR: la regla que manda es `.phone .winebox .wineboxPrecios`
   (tres clases). Escribirlo con dos no basta: pierde y no pasa nada, en
   silencio. Y el corte va en 761 px porque es el que ya usa el proyecto para
   separar el móvil, así no se solapa con su media query de 760. */
@media (min-width: 761px) {
	.phone .winebox .wineboxPrecios {
		gap: 14px;
		margin-left: 16px;
	}
	.phone .winebox .wineboxTexto small {
		letter-spacing: .05em;
		white-space: nowrap;
	}
}