/* Página de presentación de Carta+ (cartaplus.pe).
   Paleta de la marca (vino, oro, crema). Los títulos van en Instrument Serif,
   la misma familia del logotipo; los textos y botones, en Barlow.
   No se usan atributos style en el HTML: la política de seguridad los bloquea.
   Las variables --px, --s, --pos, --mx, etc. las mueve js/landing.js.
   La portada cambia en 940 px de ancho: por debajo, el video del plato llena la
   primera pantalla; desde ahí, los cinco platos se abren en abanico. */

:root {
  --vino: #3c1316;
  --vino2: #4a1c20;
  --vino-oscuro: #2a0d10;
  --oro: #e5a82b;
  --oro-claro: #f0b942;
  --crema: #f7efe4;
  --suave: #d9c9bd;
  --tinta: #2a0d10;
  --linea: rgba(247, 239, 228, .12);
  --panel: rgba(12, 11, 9, .35);
  --serif: "Instrument Serif", "Libre Baskerville", Georgia, serif;
  --sans: "Barlow", system-ui, sans-serif;
  --suavizado: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  background: var(--vino);
  color: var(--crema);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main { overflow-x: hidden; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
em { color: var(--oro); font-style: italic; }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }

.wrap { max-width: 1160px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

h1, h2, .tile__big, .langs__dish, .foot__slogan, .foot__mark, .plato__nombre { font-family: var(--serif); font-weight: 400; }

/* Textura de grano muy suave sobre toda la página */
.grano {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: url(../img/grano.png);
  opacity: .03;
  pointer-events: none;
}

/* Línea de avance de lectura, arriba del todo */
.progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: 2px;
  background: var(--oro);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* --- Navegación flotante --- */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  width: min(100% - 24px, 760px);
  padding: 7px 7px 7px 20px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: rgba(42, 13, 16, .5);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transform: translateX(-50%);
  transition: background .3s, box-shadow .3s;
}
.nav.is-scrolled { background: rgba(42, 13, 16, .85); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
.nav__logo img { height: 27px; width: auto; }
.nav__links { display: none; margin-left: auto; }
.nav__links a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--suave);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.nav__links a:hover { background: rgba(247, 239, 228, .08); color: var(--crema); }
.nav__cta {
  margin-left: auto;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--oro);
  color: var(--tinta);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.nav__cta:hover { background: var(--oro-claro); }

/* --- Portada --- */
.hero { position: relative; padding-top: 118px; padding-bottom: 40px; }
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* se va despacio hacia arriba al bajar (--s va de 0 a 1) */
  translate: 0 calc(var(--s, 0) * -50px);
  opacity: calc(1 - var(--s, 0) * 1.25);
}
.hero__titulo { display: flex; flex-direction: column; align-items: center; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--suave);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oro); animation: pulso 2.4s infinite; }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(229, 168, 43, .55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(229, 168, 43, 0); }
}

h1 {
  max-width: 15.5ch;
  margin-top: 22px;
  font-size: clamp(3rem, 12.4vw, 6.6rem);
  line-height: .96;
  letter-spacing: -.014em;
}
h1 .w { display: inline-block; }
.corte { display: none; }

/* Las palabras del título suben una por una; después se traza la línea bajo "venderlos." */
.js h1 .w { opacity: 0; translate: 0 .5em; animation: sube 1s var(--suavizado) forwards; }
h1 .w:nth-child(1) { animation-delay: .08s; }
h1 .w:nth-child(2) { animation-delay: .15s; }
h1 .w:nth-child(3) { animation-delay: .22s; }
h1 .w:nth-child(4) { animation-delay: .29s; }
h1 .w:nth-child(5) { animation-delay: .36s; }
h1 .w:nth-child(6) { animation-delay: .43s; }
/* los hijos 7 y 11 son los saltos de línea de pantallas anchas */
h1 .w:nth-child(8) { animation-delay: .5s; }
h1 .w:nth-child(9) { animation-delay: .57s; }
h1 .w:nth-child(10) { animation-delay: .64s; }
h1 .w:nth-child(12) { animation-delay: .82s; }
h1 .w:nth-child(13) { animation-delay: .9s; }
@keyframes sube { to { opacity: 1; translate: 0 0; } }

.marca { position: relative; white-space: nowrap; }
.trazo { position: absolute; left: -2%; bottom: -.04em; width: 104%; height: .2em; overflow: visible; }
.trazo path {
  fill: none;
  stroke: var(--oro);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
}
.js .trazo path { stroke-dashoffset: 1; animation: traza .9s ease-out 1.55s forwards; }
@keyframes traza { to { stroke-dashoffset: 0; } }

/* El resto de la portada entra después del título */
.js .entra { opacity: 0; translate: 0 18px; animation: sube 1s var(--suavizado) forwards; }
.js .entra--1 { animation-delay: 0s; }
.js .entra--2 { animation-delay: 1.05s; }
.js .entra--3 { animation-delay: 1.2s; }
/* El abanico solo se aclara: su posición la mueven el mouse y el scroll */
.js .asoma { opacity: 0; animation: asoma 1.3s ease .7s forwards; }
@keyframes asoma { to { opacity: 1; } }

.lead { margin-top: 24px; max-width: 30ch; color: var(--suave); font-size: clamp(1.12rem, 3.6vw, 1.35rem); }

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 26px; margin-top: 30px; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--oro);
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s, translate .3s var(--suavizado), background .2s, box-shadow .3s;
}
/* Brillo que cruza el botón al pasar el mouse */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s;
}
.btn:hover { background: var(--oro-claro); box-shadow: 0 12px 32px rgba(229, 168, 43, .28); }
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: scale(.97); }
.btn__arrow { transition: transform .25s; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(247, 239, 228, .35);
  font-weight: 500;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.link:hover { border-color: var(--oro); color: var(--oro); }

/* --- Platos de la portada, en video ---
   Lo común a los dos tamaños. En celular llenan la primera pantalla (bloque
   siguiente); en pantallas anchas se abren en abanico (más abajo). */
.fan { position: relative; display: flex; }
.plato {
  position: relative;
  flex: none;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--linea);
  border-radius: 24px;
  background: #0c0b09;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .36);
  overflow: hidden;
  isolation: isolate;
}
.plato video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.plato__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding: 48px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(12, 6, 7, .9));
  text-align: left;
}
.plato__nombre { font-size: 1.32rem; line-height: 1.04; }
.plato__precio { color: var(--oro); font-size: .95rem; font-weight: 600; white-space: nowrap; }
.cine__barras { display: none; }

/* --- Portada en celular: el video del plato llena la primera pantalla ---
   Los platos van uno encima del otro y se turnan como las historias de las
   redes: avanzan solos, con un toque o deslizando (lo maneja js/landing.js).
   El título queda abajo, sobre un velo que termina en el color de la página. */
@media (max-width: 939.98px) {
  .hero { padding: 0 0 34px; }
  /* Los toques sobre el título pasan al video de atrás */
  .hero__text { position: relative; z-index: 2; translate: none; opacity: 1; pointer-events: none; }
  .hero__actions { pointer-events: auto; }
  /* El título termina justo al pie de la primera pantalla. Si la pantalla es alta
     (más de 620 px útiles) deja 96 px para que también entre la frase de abajo.
     Se calcula con svh, que no cambia cuando el navegador esconde sus barras. */
  .hero__titulo {
    justify-content: flex-end;
    min-height: calc(100vh - 96px);
    min-height: calc(100svh - clamp(0px, (100svh - 620px) * 999, 96px));
    padding: 150px 0 10px;
  }
  .hero .chip { display: none; }
  h1 { margin-top: 0; font-size: clamp(2.25rem, min(11.6vw, 13vh), 6rem); text-shadow: 0 2px 28px rgba(30, 8, 10, .6); }
  .lead { margin-top: 12px; }
  .hero__actions { margin-top: 26px; }

  .fan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 100vh;
    height: 100svh;
    background: var(--vino-oscuro);
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
    /* al bajar, el video se queda un poco atrás (--s va de 0 a 1) */
    translate: 0 calc(var(--s, 0) * 60px);
  }
  .js .asoma { animation-duration: .9s; animation-delay: 0s; }
  /* El plato que entra aparece encima; el que sale espera debajo y recién se apaga */
  .plato {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 0;
    transition: opacity 0s .8s;
  }
  .plato.is-center { z-index: 1; opacity: 1; transition: opacity .8s; }
  /* El video sube un poco para que el plato quede en la parte despejada */
  .plato video { translate: 0 -8%; }
  /* Velo: oscurece arriba, para la barra, y abajo se funde con el color de la página */
  .plato::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(42, 13, 16, .62) 0, rgba(42, 13, 16, 0) 23%, rgba(60, 19, 22, 0) 36%, rgba(60, 19, 22, .85) 66%, var(--vino) 90%);
  }
  /* Nombre y precio del plato, en una etiqueta de vidrio */
  .plato__pie {
    top: 102px;
    left: 20px;
    right: auto;
    bottom: auto;
    z-index: 2;
    align-items: baseline;
    padding: 7px 15px 8px;
    border: 1px solid rgba(247, 239, 228, .2);
    border-radius: 999px;
    background: rgba(42, 13, 16, .42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .plato__nombre { font-size: 1.2rem; }

  /* Barras de avance: una por plato; la del plato en pantalla se va llenando */
  .js .cine__barras {
    position: absolute;
    top: 84px;
    left: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    gap: 5px;
  }
  .cine__barras i {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(var(--crema), var(--crema)) no-repeat left / 0 100%, rgba(247, 239, 228, .3);
  }
  .cine__barras .is-done { background-size: 100% 100%; }
  .cine__barras .is-on { animation: llena 6s linear forwards; }
  /* Fuera de pantalla, la barra espera */
  .is-quieta .cine__barras i { animation-play-state: paused; }
}
@keyframes llena { to { background-size: 100% 100%; } }

/* --- Cinta que corre --- */
.marquee { padding: 16px 0; border-block: 1px solid var(--linea); background: rgba(42, 13, 16, .4); overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: corre 34s linear infinite; }
.marquee__group { display: flex; flex: none; align-items: center; }
.marquee span, .marquee i { font-family: var(--serif); font-size: clamp(1.7rem, 5.4vw, 2.5rem); line-height: 1.1; white-space: nowrap; }
.marquee span { padding: 0 22px; font-style: italic; }
.marquee i { color: var(--oro); font-style: normal; }
@keyframes corre { to { transform: translateX(-50%); } }

.eyebrow, .tag {
  color: var(--oro);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h2 { margin-top: 12px; font-size: clamp(2.7rem, 9.5vw, 4.6rem); line-height: 1; letter-spacing: -.01em; text-wrap: balance; }

/* --- La diferencia: carta de papel contra carta con video --- */
.compara { padding-top: 88px; padding-bottom: 8px; text-align: center; }
.compara__escena { display: grid; justify-items: center; gap: 26px; margin-top: 40px; }
.compara__nota { max-width: 27ch; cursor: pointer; }
.compara__nota .tag { transition: letter-spacing .3s var(--suavizado); }
@media (hover: hover) {
  .compara__nota:hover .tag { letter-spacing: .26em; }
}
.compara__nota p { margin-top: 8px; color: var(--suave); text-wrap: balance; }
.compara__pista { margin-top: 22px; color: var(--suave); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }

.marco {
  --pos: 50%;
  position: relative;
  /* El ancho también depende del alto de la pantalla, para que el celular entre entero. */
  width: min(78vw, 330px);
  width: max(190px, min(78vw, 330px, (100vh - 110px) * .462));
  width: max(190px, min(78vw, 330px, (100svh - 110px) * .462));
  container-type: inline-size;
  aspect-ratio: 780 / 1688;
  border: 5px solid #5a4a44;
  border-radius: 34px;
  background: #0c0b09;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
  overflow: hidden;
  isolation: isolate;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.marco__capa { position: absolute; inset: 0; }
/* La carta con video ocupa lo que queda a la derecha de la línea */
.marco__capa--viva { -webkit-clip-path: inset(0 0 0 var(--pos)); clip-path: inset(0 0 0 var(--pos)); }
.marco__capa--viva img { width: 100%; height: 100%; object-fit: cover; }

/* El video va exactamente encima de la foto del plato en la captura
   (foto: x 40-740, y 130-1006 de 780 × 1688 px). */
.phone__video {
  position: absolute;
  left: 5.13%;
  top: 7.7%;
  width: 89.74%;
  height: 51.9%;
  border-radius: 3.8% / 3.05%;
  object-fit: cover;
}

/* La carta de papel: mismos platos de FOGÓN, solo texto */
.papel {
  padding: 9% 8.5% 0;
  background: linear-gradient(180deg, #f4ebdb, #ebdfca);
  color: #3a2a22;
  /* El texto crece y se achica con el marco (cqw = 1 % de su ancho) */
  font-size: clamp(10.5px, 3.5vw, 14.5px);
  font-size: 4.9cqw;
  text-align: left;
}
.papel__marca { font-family: var(--serif); font-size: 1.9em; letter-spacing: .3em; text-align: center; text-indent: .3em; }
.papel__seccion {
  margin-top: 1em;
  padding: .5em 0;
  border-block: 1px solid rgba(58, 42, 34, .3);
  color: #8a6a4a;
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .32em;
  text-align: center;
  text-transform: uppercase;
}
.papel__item { margin-top: 1.05em; }
.papel__nombre { display: flex; align-items: baseline; gap: .4em; font-family: var(--serif); font-size: 1.22em; line-height: 1.1; }
.papel__nombre i { flex: 1; min-width: 1em; border-bottom: 1px dotted rgba(58, 42, 34, .55); }
.papel__nombre b { font-weight: 400; }
.papel__desc { margin-top: .25em; color: #6b5648; font-size: .86em; line-height: 1.3; }

.marco__asa {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  display: grid;
  place-items: center;
  width: 46px;
  margin-left: -23px;
  outline: none;
}
.marco__asa::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--oro);
  box-shadow: 0 0 16px rgba(229, 168, 43, .85);
}
.marco__perilla {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  /* --corr la calcula landing.js: mantiene la perilla dentro del marco cuando la línea llega al borde */
  translate: var(--corr, 0px) 0;
  transition: scale .25s var(--suavizado);
}
.marco__perilla svg { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marco.is-drag .marco__perilla, .marco__asa:focus-visible .marco__perilla { scale: 1.12; }
.marco__asa:focus-visible .marco__perilla { outline: 2px solid var(--crema); outline-offset: 3px; }

/* --- Qué hace: cuadrícula tipo bento --- */
.bento { padding-top: 88px; padding-bottom: 32px; }

.grid { display: grid; gap: 14px; margin-top: 40px; }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--linea);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(247, 239, 228, .06), rgba(247, 239, 228, .02));
  overflow: hidden;
  transition: transform .35s var(--suavizado), border-color .3s;
}
.tile > * { position: relative; }
/* Luz dorada que sigue al mouse dentro de cada recuadro */
.tile::before, .cta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(229, 168, 43, .17), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
@media (hover: hover) {
  .tile:hover { border-color: rgba(229, 168, 43, .5); transform: translateY(-4px); }
  .tile:hover::before, .cta__card:hover::before { opacity: 1; }
}
.tile__text { font-size: 1.12rem; line-height: 1.4; text-wrap: pretty; }

/* Vende: video de un plato de fondo */
.tile--vende { min-height: 460px; padding: 0; justify-content: flex-end; }
/* El encuadre baja un poco para que el plato quede arriba del texto; la sombra lo deja leerse */
.tile--vende video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: 50% 80%; }
.tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 6, 7, 0) 30%, rgba(20, 6, 7, .74) 66%, rgba(20, 6, 7, .94) 100%); }
.tile__body { position: relative; padding: 28px; }
.tile__big { margin-top: 10px; max-width: 15ch; font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1.04; }

/* Mide: barras de ejemplo */
.chart { margin-top: auto; padding: 16px 16px 18px; border: 1px solid var(--linea); border-radius: 18px; background: var(--panel); }
.chart__title {
  display: flex;
  justify-content: space-between;
  color: var(--suave);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.chart__title span { opacity: .7; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.bar { margin-top: 12px; }
.bar span { display: block; font-size: .92rem; }
.bar i {
  display: block;
  height: 8px;
  margin-top: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--oro), #f6cf75);
  transform-origin: left;
  transition: transform 1.2s var(--suavizado) .35s;
}
.bar--1 i { width: 92%; }
.bar--2 i { width: 74%; transition-delay: .45s; }
.bar--3 i { width: 57%; transition-delay: .55s; }
.bar--4 i { width: 35%; transition-delay: .65s; }
.js .bar i { transform: scaleX(0); }
.js .is-in .bar i { transform: scaleX(1); }

/* Se adapta: el precio cambia y se publica solo, en bucle de 6 s */
.editor { display: grid; gap: 8px; margin-top: auto; }
.editor__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--panel);
  font-size: .98rem;
}
.editor__row small { margin-left: 6px; color: var(--suave); font-size: .8rem; opacity: .8; }
.editor__price { display: inline-flex; gap: .3em; color: var(--oro); font-weight: 600; }
.roll { display: inline-block; height: 1.5em; overflow: hidden; }
.roll b { display: block; font-weight: 600; animation: rueda 6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes rueda {
  0%, 28% { transform: translateY(0); }
  38%, 90% { transform: translateY(-100%); }
  98%, 100% { transform: translateY(0); }
}
.switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: rgba(247, 239, 228, .18); animation: interruptor 6s infinite; }
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--crema);
  animation: perilla 6s cubic-bezier(.6, 0, .2, 1) infinite;
}
@keyframes interruptor {
  0%, 54% { background: rgba(247, 239, 228, .18); }
  62%, 92% { background: var(--oro); }
  100% { background: rgba(247, 239, 228, .18); }
}
@keyframes perilla {
  0%, 54% { transform: translateX(0); }
  62%, 92% { transform: translateX(16px); }
  100% { transform: translateX(0); }
}
.editor__toast {
  justify-self: start;
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(229, 168, 43, .16);
  color: var(--oro);
  font-size: .82rem;
  font-weight: 600;
  animation: aviso 6s infinite;
}
@keyframes aviso {
  0%, 40% { opacity: 0; transform: translateY(6px); }
  47%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

/* Idiomas: el nombre del plato cambia (lo mueve js/landing.js) */
.langs { display: grid; gap: 16px; }
.langs__pills { display: inline-flex; justify-self: start; gap: 2px; padding: 4px; border: 1px solid var(--linea); border-radius: 99px; background: var(--panel); }
.langs__pills span {
  padding: 5px 12px;
  border-radius: 99px;
  color: var(--suave);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  transition: background .3s, color .3s;
}
.langs__pills .is-on { background: var(--oro); color: var(--tinta); }
.langs__dish { min-height: 2.2em; font-size: 1.75rem; line-height: 1.1; transition: opacity .25s, transform .25s; }
.langs__dish.is-out { opacity: 0; transform: translateY(6px); }
.tile--idiomas .tile__text, .tile--qr .tile__text, .tile--nosotros .tile__text { margin-top: auto; }

/* QR: lleva a cartaplus.pe; una línea lo recorre como si se escaneara */
.qr { position: relative; width: 132px; padding: 10px; border-radius: 18px; background: var(--crema); overflow: hidden; }
.qr img { width: 100%; height: auto; }
.qr::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 8%;
  height: 2px;
  border-radius: 2px;
  background: var(--oro);
  box-shadow: 0 0 14px 3px rgba(229, 168, 43, .75);
  animation: escanea 3.4s ease-in-out infinite;
}
@keyframes escanea { 50% { top: 91%; } }

/* Lo hacemos por ti: tres platos grabados */
.stack { display: flex; }
.stack img {
  width: 88px;
  height: 88px;
  margin-left: -22px;
  border: 3px solid var(--vino2);
  border-radius: 50%;
  object-fit: cover;
  transition: margin .35s var(--suavizado);
}
.stack img:first-child { margin-left: 0; }
@media (hover: hover) {
  .tile:hover .stack img:not(:first-child) { margin-left: -10px; }
}

/* --- Contacto --- */
.cta { padding-top: 56px; padding-bottom: 88px; }
.cta__card {
  position: relative;
  padding: 64px 22px 68px;
  border: 1px solid rgba(229, 168, 43, .45);
  border-radius: 36px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(229, 168, 43, .22), transparent 62%), var(--vino2);
  text-align: center;
  overflow: hidden;
}
.cta__card > * { position: relative; }
.cta__card h2 { margin-top: 0; font-size: clamp(2.7rem, 10vw, 5rem); }
.cta__card p { max-width: 34ch; margin: 18px auto 0; color: var(--suave); font-size: 1.12rem; text-wrap: balance; }
.cta__card .btn { margin-top: 32px; }

/* --- Pie con el nombre en grande. Con mouse, una luz lo recorre como linterna. --- */
.foot { padding-top: 44px; border-top: 1px solid var(--linea); background: var(--vino-oscuro); overflow: hidden; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.foot__slogan { font-size: 1.55rem; font-style: italic; line-height: 1.15; }
.foot__meta { color: rgba(217, 201, 189, .7); font-size: .9rem; }
.foot__mark {
  margin: 20px 0 0;
  padding-bottom: .12em;
  background:
    radial-gradient(circle 17vw at var(--fx, -40%) var(--fy, 50%), rgba(247, 239, 228, .85), transparent 100%),
    linear-gradient(180deg, rgba(247, 239, 228, .3), rgba(247, 239, 228, .09));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(6.5rem, 31vw, 23rem);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
/* En la tipografía el + queda más alto y más pegado que en el logotipo: se baja y se separa para que coincida */
.foot__mark span { margin-left: .08em; color: rgba(229, 168, 43, .6); vertical-align: -.11em; }

/* --- Apariciones al hacer scroll (solo si hay JavaScript) --- */
.js [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .9s var(--suavizado), translate .9s var(--suavizado);
}
.js .tile[data-reveal] {
  transition: opacity .9s var(--suavizado), translate .9s var(--suavizado), transform .35s var(--suavizado), border-color .3s;
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

@media (min-width: 600px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .nav__links { display: flex; }
  .nav__cta { margin-left: 4px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tile--vende, .tile--nosotros { grid-column: span 2; }
  .tile--vende { min-height: 500px; }
  .tile__body { padding: 34px; }
}

@media (min-width: 940px) {
  .hero { padding-top: clamp(108px, 15vh, 142px); padding-bottom: 72px; }
  h1 { max-width: none; font-size: clamp(3.2rem, min(6.2vw, 10.5vh), 5.6rem); }
  .corte { display: inline; }
  .lead { max-width: none; margin-top: 20px; }
  .hero__actions { margin-top: 28px; }

  /* Los platos se abren en arco. --px y --py siguen al mouse; --s, al scroll. */
  .fan {
    justify-content: center;
    gap: 26px;
    margin-top: clamp(34px, 5.5vh, 56px);
    padding: 0 20px 44px;
    translate: 0 calc(var(--s, 0) * -90px);
  }
  .plato {
    width: clamp(150px, 14.6vw, 212px);
    transition: transform .6s var(--suavizado), opacity .4s, filter .4s;
  }
  .plato:nth-child(1) { transform: translate(calc(var(--px, 0) * -16px), calc(40px + var(--py, 0) * -8px)) rotate(-5deg); }
  .plato:nth-child(2) { transform: translate(calc(var(--px, 0) * -10px), calc(12px + var(--py, 0) * -6px)) rotate(-2.5deg); }
  .plato:nth-child(3) { transform: translate(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -10px)) scale(1.05); z-index: 1; }
  .plato:nth-child(4) { transform: translate(calc(var(--px, 0) * -10px), calc(12px + var(--py, 0) * -6px)) rotate(2.5deg); }
  .plato:nth-child(5) { transform: translate(calc(var(--px, 0) * -16px), calc(40px + var(--py, 0) * -8px)) rotate(5deg); }
  .plato__nombre { font-size: 1.22rem; }

  .compara { padding-top: 120px; }
  .compara__escena { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 56px; margin-top: 56px; }
  .compara__nota--antes { justify-self: end; text-align: right; }
  .compara__nota--despues { justify-self: start; text-align: left; }
  .compara__nota p { font-size: 1.15rem; }
  .marco { width: max(220px, min(340px, (100vh - 140px) * .462)); }

  .bento { padding-top: 120px; }
  .grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .tile { padding: 30px; }
  .tile--vende { grid-column: span 3; grid-row: span 2; min-height: 620px; padding: 0; }
  .tile--mide, .tile--adapta { grid-column: span 3; }
  .tile--idiomas, .tile--qr, .tile--nosotros { grid-column: span 2; min-height: 300px; }
  .cta { padding-top: 72px; padding-bottom: 120px; }
  .cta__card { padding: 96px 40px 100px; }
  .foot { padding-top: 56px; }
}

/* Con mouse: al pasar por un plato del abanico, ese se endereza y los demás se apagan */
@media (min-width: 940px) and (hover: hover) {
  .fan:hover .plato { opacity: .45; filter: saturate(.55); }
  .fan .plato:hover { opacity: 1; filter: none; transform: translateY(-16px) rotate(0deg) scale(1.08); z-index: 2; }
}

/* Quien pide menos movimiento en su sistema ve la página quieta y completa. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js .entra, .js h1 .w { opacity: 1; translate: none; }
  .js .asoma { opacity: 1; }
  .fan { translate: none; }
  .js .trazo path { stroke-dashoffset: 0; }
  .js .bar i { transform: none; }
  .cine__barras .is-on { background-size: 100% 100%; }
  .hero__text { translate: none; opacity: 1; }
  .progreso { display: none; }
}