/* ═══════════════════════════════════════════════════════════
   Disrupt AI — premium.ia-disrupt.com
   Sistema visual "Aguayo nocturno".
   Fondo: pizarra fría de La Paz de noche. Acentos: los cuatro
   colores del aguayo, que aquí NO son decorativos — cada uno es
   un estado del pedido (ámbar/hueso/carmín/jade). La banda tejida
   que separa las secciones es la leyenda viva del tablero.
   Tipografía: Omnibus-Type (Buenos Aires) — Archivo Expanded para
   display, Chivo para texto, Chivo Mono para dato de sistema.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* superficie */
  --pizarra:      #12151C;
  --pizarra-alta: #171B24;
  --grafito:      #1B212C;
  --grafito-alto: #232A38;
  --linea:        #2B3341;
  --linea-tenue:  #222936;

  /* tinta */
  --hueso:        #F2EEE5;
  --hueso-medio:  #A8AEBB;
  --hueso-tenue:  #6E7688;

  /* estados = aguayo */
  --ambar:   #E8A33D;  /* pendiente de pago */
  --pagado:  #EDE7D8;  /* pagado           */
  --carmin:  #D8265E;  /* en preparación   */
  --jade:    #16A67C;  /* listo para retirar */

  /* tipografía */
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --texto:   'Chivo', system-ui, -apple-system, sans-serif;
  --mono:    'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ritmo */
  --borde-r: 3px;
  --marco: clamp(1.25rem, 5vw, 5.5rem);
  --aire: clamp(4.5rem, 10vw, 9rem);
  --max: 1380px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pizarra);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
b { font-weight: 600; color: var(--hueso); }

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--hueso); color: var(--pizarra);
  padding: .75rem 1.25rem; font-weight: 600; text-decoration: none;
}
.saltar:focus { left: 0; }

.mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .92em;
  letter-spacing: -0.01em;
}

/* ── display ───────────────────────────────────────────── */
.d-xl, .d-lg, .d-md {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'wdth' 112, 'wght' 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.d-xl { font-size: clamp(2.15rem, 6.2vw, 4.1rem); }
.d-lg { font-size: clamp(1.9rem, 4.6vw, 3.5rem); }
.d-md { font-size: clamp(1.55rem, 3vw, 2.4rem); font-variation-settings: 'wdth' 108, 'wght' 700; }

.d-xl em, .d-lg em {
  font-style: normal;
  font-variation-settings: 'wdth' 123, 'wght' 300;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hueso-tenue);
}
.eyebrow i { font-style: normal; color: var(--carmin); padding: 0 .15em; }

.lede {
  color: var(--hueso-medio);
  font-size: clamp(1.02rem, 0.97rem + 0.34vw, 1.22rem);
  line-height: 1.58;
  max-width: 54ch;
}

/* ── botones ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.6rem;
  background: var(--hueso); color: var(--pizarra);
  font-family: var(--texto); font-weight: 600; font-size: .96rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid var(--hueso);
  border-radius: var(--borde-r);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--ambar); border-color: var(--ambar); color: #201703; }
.btn--fantasma {
  background: transparent; color: var(--hueso);
  border-color: var(--linea);
}
.btn--fantasma:hover { background: transparent; color: var(--ambar); border-color: var(--ambar); }
.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn--grande {
  padding: 1.15rem 2rem; font-size: 1.06rem;
  flex-wrap: wrap;
}
.btn--grande .mono {
  color: var(--hueso-tenue);
  font-size: .88rem;
  border-left: 1px solid rgba(18,21,28,.22);
  padding-left: .8rem;
  transition: color .18s ease;
}
.btn--grande:hover .mono { color: #4a3a12; }

/* ── nav ───────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem var(--marco);
  background: rgba(18,21,28,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea-tenue);
}
.nav__marca {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1.02rem; letter-spacing: -0.03em;
  text-decoration: none;
  margin-right: auto;
}
.nav__marca span { color: var(--carmin); }
.nav__hilo {
  width: 14px; height: 15px;
  background:
    linear-gradient(var(--ambar) 0 0) 0 0 / 3px 100% no-repeat,
    linear-gradient(var(--pagado) 0 0) 4px 0 / 2px 100% no-repeat,
    linear-gradient(var(--carmin) 0 0) 7px 0 / 4px 100% no-repeat,
    linear-gradient(var(--jade) 0 0) 12px 0 / 2px 100% no-repeat;
}
.nav__links { display: none; gap: 1.6rem; font-size: .9rem; }
.nav__links a { color: var(--hueso-medio); text-decoration: none; transition: color .16s ease; }
.nav__links a:hover { color: var(--hueso); }
@media (min-width: 900px) { .nav__links { display: flex; } }
@media (max-width: 460px) {
  .btn--grande { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .btn--grande .mono { border-left: 0; padding-left: 0; }
}

/* ══ BANDA AGUAYO — la firma ═══════════════════════════════
   Cuatro franjas tejidas. El ancho de cada una es la cantidad
   de pedidos en ese estado, ahora mismo, en el tablero. */
.aguayo {
  display: flex;
  height: 13px;
  width: 100%;
  background: var(--pizarra-alta);
  overflow: hidden;
  transform-origin: left center;
}
.aguayo > span {
  flex: 1 1 0;
  min-width: 4px;
  transition: flex-grow 1.1s cubic-bezier(.4,0,.2,1);
}
.aguayo > span[data-franja="pendiente"] {
  background: repeating-linear-gradient(90deg, var(--ambar) 0 2px, #B77C22 2px 3px, var(--ambar) 3px 5px, #12151C 5px 6px);
}
.aguayo > span[data-franja="pagado"] {
  background: repeating-linear-gradient(90deg, var(--pagado) 0 1px, #A9A292 1px 2px, var(--pagado) 2px 4px, #12151C 4px 5px);
}
.aguayo > span[data-franja="preparacion"] {
  background: repeating-linear-gradient(90deg, var(--carmin) 0 2px, #8E1A3E 2px 3px, var(--carmin) 3px 6px, #12151C 6px 7px);
}
.aguayo > span[data-franja="listo"] {
  background: repeating-linear-gradient(90deg, var(--jade) 0 2px, #0D6E52 2px 3px, var(--jade) 3px 5px, #12151C 5px 6px);
}

/* ── layout de sección ─────────────────────────────────── */
.seccion {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--aire) var(--marco);
}
.seccion__cab { max-width: 880px; }
.seccion__cab--ancha { max-width: 980px; }
.seccion__cab .eyebrow { margin-bottom: 1.35rem; }
.seccion__cab .d-lg { margin-bottom: 1.5rem; }

/* ══ HERO ══════════════════════════════════════════════ */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--marco) clamp(3.5rem, 7vw, 6rem);
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: 1.22fr .78fr; }
}
.hero__txt .eyebrow { margin-bottom: 1.6rem; }
.hero__txt .d-xl { margin-bottom: 1.8rem; }
.hero__txt .lede { margin-bottom: 2.4rem; }

.acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 3.2rem; }

.hero__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 1.75rem 2rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--linea-tenue);
}
.hero__datos dt {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 700;
  font-size: 2.1rem; line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: .3rem;
}
.hero__datos dd {
  margin: 0;
  font-size: .84rem; color: var(--hueso-tenue);
  line-height: 1.35;
}

.hero__vis {
  position: relative;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 1.5rem;
}

/* ── teléfono ──────────────────────────────────────────
   El radio grande sólo existe aquí: redondo = es un aparato. */
.fono {
  --ancho: 244px;
  width: var(--ancho);
  padding: 8px;
  background: linear-gradient(160deg, #2E3644, #171C25 60%);
  border: 1px solid #39404F;
  border-radius: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 34px 60px -28px rgba(0,0,0,.85);
  flex: none;
}
.fono--grande { --ancho: clamp(250px, 30vw, 320px); }
.fono__pantalla {
  position: relative;
  border-radius: 23px;
  overflow: hidden;
  background: #0B0D12;
  aspect-ratio: 9 / 19.5;
}
.fono__pantalla > video,
.fono__pantalla > img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.fono__hud {
  position: absolute; left: 10px; right: 10px; top: 10px;
  display: flex; justify-content: space-between; gap: .4rem;
}
.tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .55rem;
  background: rgba(10,12,17,.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(242,238,229,.14);
  border-radius: 999px;
  color: var(--hueso);
}
.tag--vivo { display: inline-flex; align-items: center; gap: .35rem; }
.tag--vivo i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--jade);
  animation: latido 2s ease-in-out infinite;
}
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ── ticket flotante (espejo del tablero) ─────────────── */
.ticket {
  position: absolute;
  left: 0; bottom: -14px;
  width: min(228px, 62vw);
  margin: 0;
  padding: .95rem 1rem 1rem;
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--ambar);
  border-radius: var(--borde-r);
  box-shadow: 0 24px 44px -22px rgba(0,0,0,.9);
  transition: border-left-color .5s ease;
}
.ticket figcaption {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hueso-tenue);
  margin-bottom: .55rem;
}
.ticket__cod {
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 700;
  font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1;
}
.ticket__meta { font-family: var(--mono); font-size: .72rem; color: var(--hueso-tenue); margin-top: .3rem; }
.ticket__item { font-size: .84rem; color: var(--hueso-medio); margin-top: .6rem; }
.ticket__pie {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .8rem; padding-top: .7rem;
  border-top: 1px solid var(--linea-tenue);
  font-family: var(--mono); font-size: .76rem;
  white-space: nowrap;
}
.pill {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .04em;
  text-transform: uppercase;
  padding: .25rem .5rem;
  border-radius: 2px;
  background: rgba(232,163,61,.13); color: var(--ambar);
  white-space: nowrap;
}
@media (max-width: 999px) {
  .ticket { position: static; width: min(300px, 100%); }
}
@media (min-width: 1000px) { .ticket { left: -46px; bottom: 20px; } }

/* ══ PASOS ════════════════════════════════════════════ */
.pasos {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  gap: 1px;
  background: var(--linea-tenue);
  border-top: 1px solid var(--linea-tenue);
  border-bottom: 1px solid var(--linea-tenue);
}
@media (min-width: 760px)  { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.paso {
  background: var(--pizarra);
  padding: 2rem clamp(1.25rem, 2vw, 1.9rem) 2.25rem;
  display: flex; flex-direction: column;
}
.paso__n {
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .12em;
  color: var(--carmin);
  margin-bottom: 1.5rem;
}
.paso h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: 1.18rem; line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: .8rem;
}
.paso p:not(.paso__n) { color: var(--hueso-medio); font-size: .92rem; }
.paso .mono { color: var(--ambar); }
/* ── tira de pantallas reales ─────────────────────────
   Las cuatro pantallas del flujo, en orden. Rueda en
   horizontal cuando no entran las cuatro. */
.tira {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
}
.tira__cuadro { margin: 0; scroll-snap-align: start; }
.tira__cuadro .fono { --ancho: 100%; }
.tira__cuadro figcaption {
  margin-top: 1rem;
  font-size: .84rem; line-height: 1.4;
  color: var(--hueso-medio);
}
.tira__cuadro figcaption .mono {
  display: block;
  color: var(--carmin);
  font-size: .72rem; letter-spacing: .1em;
  margin-bottom: .3rem;
}

/* ══ TABLERO VIVO ═════════════════════════════════════ */
.seccion--panel { max-width: 1560px; }
.tablero {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--pizarra-alta);
  border: 1px solid var(--linea);
  border-radius: var(--borde-r);
  overflow: hidden;
}
.tablero__barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--linea);
  background: var(--grafito);
}
.tablero__titulo {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 600;
  font-size: 1.05rem; letter-spacing: -0.02em;
  margin-right: auto;
  display: flex; align-items: baseline; gap: .7rem;
}
.tablero__titulo .mono {
  font-family: var(--mono); font-size: .74rem; font-weight: 400;
  letter-spacing: 0; color: var(--hueso-tenue);
}
.tablero__metricas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.tablero__metricas p { font-size: .78rem; color: var(--hueso-tenue); }
.tablero__metricas .mono { color: var(--hueso); font-size: .88rem; }
.tablero__pausa {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hueso-medio);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: .38rem .7rem;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.tablero__pausa:hover { color: var(--hueso); border-color: var(--hueso-tenue); }

/* Las cuatro columnas nunca se apilan: verlas lado a lado ES el argumento.
   En pantalla angosta se ruedan en horizontal, como el panel en una tablet. */
.tablero__cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 76%;
  gap: 1px;
  background: var(--linea-tenue);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
}
.col { scroll-snap-align: start; }
@media (min-width: 620px)  { .tablero__cols { grid-auto-columns: 46%; } }
@media (min-width: 1060px) { .tablero__cols { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow-x: visible; } }

.col { background: var(--pizarra-alta); padding: 1.1rem .9rem 1.25rem; min-height: 190px; }
.col h3 {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-weight: 500;
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hueso-medio);
  margin-bottom: 1rem;
}
.col h3 i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.col h3 .mono { margin-left: auto; color: var(--hueso-tenue); letter-spacing: 0; }
.col[data-col="pendiente"]   h3 i { background: var(--ambar); }
.col[data-col="pagado"]      h3 i { background: var(--pagado); }
.col[data-col="preparacion"] h3 i { background: var(--carmin); }
.col[data-col="listo"]       h3 i { background: var(--jade); }
.col ul { display: flex; flex-direction: column; gap: .6rem; }
.col__mas {
  margin-top: .7rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--hueso-tenue);
}

.pedido {
  padding: .8rem .85rem .85rem;
  background: var(--grafito);
  border: 1px solid var(--linea-tenue);
  border-left: 2px solid var(--linea);
  border-radius: 2px;
  animation: entra .45s cubic-bezier(.2,.7,.3,1) both;
}
.pedido[data-e="pendiente"]   { border-left-color: var(--ambar); }
.pedido[data-e="pagado"]      { border-left-color: var(--pagado); }
.pedido[data-e="preparacion"] { border-left-color: var(--carmin); }
.pedido[data-e="listo"]       { border-left-color: var(--jade); }
.pedido.sale { animation: sale .4s ease forwards; }
@keyframes entra { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
@keyframes sale  { to { opacity: 0; transform: translateX(14px) scale(.97); } }

.pedido__cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-bottom: .5rem;
}
.pedido__cod {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 1.02rem; letter-spacing: -0.025em;
}
.pedido__mesa { font-family: var(--mono); font-size: .68rem; color: var(--hueso-tenue); letter-spacing: .05em; }
.pedido__items { font-size: .82rem; color: var(--hueso-medio); line-height: 1.45; }
.pedido__pie {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-top: .6rem; padding-top: .55rem;
  border-top: 1px solid rgba(43,51,65,.7);
  font-family: var(--mono); font-size: .74rem;
}
.pedido__hora { color: var(--hueso-tenue); font-size: .68rem; }

/* pruebas: capturas reales del panel */
.pruebas {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: 1.5rem;
}
@media (min-width: 900px) { .pruebas { grid-template-columns: 1fr 1fr; } }
.prueba { margin: 0; }
.prueba img {
  width: 100%; height: auto;
  border: 1px solid var(--linea);
  border-radius: var(--borde-r);
}
.prueba figcaption {
  margin-top: .8rem;
  font-size: .82rem; color: var(--hueso-tenue);
}

.ganancias {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: 1px;
  background: var(--linea-tenue);
  border-top: 1px solid var(--linea-tenue);
  border-bottom: 1px solid var(--linea-tenue);
}
@media (min-width: 860px) { .ganancias { grid-template-columns: repeat(3, 1fr); } }
.ganancias li {
  background: var(--pizarra);
  padding: 1.5rem clamp(1.1rem, 2vw, 1.6rem);
  font-size: .92rem; color: var(--hueso-medio);
}
.ganancias b { display: block; margin-bottom: .3rem; font-weight: 600; }
.ganancias .mono { color: var(--ambar); }

/* ══ PRODUCTOS ════════════════════════════════════════ */
.productos {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid; gap: 1px;
  background: var(--linea-tenue);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--borde-r);
  overflow: hidden;
}
@media (min-width: 880px) { .productos { grid-template-columns: 1fr 1fr; } }

.prod {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex; flex-direction: column;
}
/* Sabores es claro y editorial, Essenss es oscuro y cinematográfico.
   Los paneles se pintan como se pinta cada producto: la diferencia
   se ve antes de leer la lista. */
.prod--sabores {
  background: #EAE5DA;
  color: #23282F;
}
.prod--essenss { background: #0A0C11; }
.prod__cab { margin-bottom: 1.75rem; }
.prod__cab .d-md { margin-bottom: .35rem; }
.prod--sabores .prod__cab .d-md { color: #8E3A2B; }
.prod--essenss .prod__cab .d-md { color: var(--pagado); }
.prod__para { font-family: var(--mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--hueso-tenue); }
.prod__vis { display: flex; justify-content: center; margin-bottom: 1.9rem; }
.prod__vis .fono { --ancho: 202px; }
.prod__lista { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.9rem; }
.prod__lista li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .92rem; color: var(--hueso-medio);
}
.prod__lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 2px;
}
.prod--sabores .prod__lista li::before { background: #8E3A2B; }
.prod--essenss .prod__lista li::before { background: var(--carmin); }
.prod .btn { margin-top: auto; align-self: flex-start; }

.prod--sabores .prod__para { color: #7A736A; }
.prod--sabores .prod__lista li { color: #4A5058; }
.prod--sabores .fono {
  background: linear-gradient(160deg, #C9C2B4, #9E968B 60%);
  border-color: #B6AE9F;
  box-shadow: 0 2px 4px rgba(35,40,47,.14), 0 30px 54px -26px rgba(35,40,47,.45);
}
.prod--sabores .btn--fantasma {
  color: #23282F;
  border-color: rgba(35,40,47,.28);
}
.prod--sabores .btn--fantasma:hover { color: #8E3A2B; border-color: #8E3A2B; }
.prod--essenss .prod__cab .d-md { color: var(--pagado); }

/* ══ QR ═══════════════════════════════════════════════ */
.seccion--qr {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 940px) { .seccion--qr { grid-template-columns: .9fr 1.1fr; } }
.qr__txt .eyebrow { margin-bottom: 1.35rem; }
.qr__txt .d-lg { margin-bottom: 1.5rem; }
.qr__txt .lede { margin-bottom: 1.9rem; }
.qr__lista { display: flex; flex-direction: column; gap: .8rem; }
.qr__lista li {
  position: relative; padding-left: 1.5rem;
  font-size: .92rem; color: var(--hueso-medio);
}
.qr__lista li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 10px;
  background:
    linear-gradient(var(--ambar) 0 0) 0 0 / 3px 100% no-repeat,
    linear-gradient(var(--carmin) 0 0) 4px 0 / 3px 100% no-repeat,
    linear-gradient(var(--jade) 0 0) 8px 0 / 2px 100% no-repeat;
}

.qr__foto { margin: 0; position: relative; }
.qr__foto img {
  width: 100%; height: auto;
  border: 1px solid var(--linea);
  border-radius: var(--borde-r);
}
.qr__foto figcaption { margin-top: .85rem; font-size: .82rem; color: var(--hueso-tenue); }
/* ══ ACTIVAR ══════════════════════════════════════════ */
.activar {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid; gap: 1px;
  background: var(--linea-tenue);
  border-top: 1px solid var(--linea-tenue);
  border-bottom: 1px solid var(--linea-tenue);
}
@media (min-width: 820px) { .activar { grid-template-columns: 1fr 1fr; } }
.act {
  background: var(--pizarra);
  padding: 2rem clamp(1.25rem, 2.5vw, 2.25rem) 2.25rem;
}
.act__estado {
  display: inline-block;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--hueso-tenue);
  border: 1px dashed var(--linea);
  border-radius: 2px;
  padding: .3rem .6rem;
  margin-bottom: 1.4rem;
}
.act h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.025em;
  margin-bottom: .8rem;
}
.act p:not(.act__estado) { color: var(--hueso-medio); font-size: .95rem; }

/* ══ CIERRE ═══════════════════════════════════════════ */
.cierre {
  background: var(--pizarra-alta);
  border-top: 1px solid var(--linea-tenue);
  border-bottom: 1px solid var(--linea-tenue);
  padding: var(--aire) var(--marco);
}
.cierre__int {
  max-width: var(--max); margin: 0 auto;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}
@media (min-width: 1000px) { .cierre__int { grid-template-columns: 1.35fr .65fr; } }
.cierre__txt .eyebrow { margin-bottom: 1.6rem; }
.cierre__txt .d-xl { margin-bottom: 1.8rem; }
.cierre__txt .lede { margin-bottom: 2.6rem; }

.llevamos__rotulo {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hueso-tenue);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linea-tenue);
}
.llevamos ul { display: flex; flex-direction: column; }
.llevamos li {
  padding: 1rem 0 1.05rem;
  border-bottom: 1px solid var(--linea-tenue);
  font-size: .92rem; color: var(--hueso-medio);
}
.llevamos__queda { color: var(--jade); }
.cierre__nota { margin-top: 1.4rem; font-size: .84rem; color: var(--hueso-tenue); }

/* ══ PIE ══════════════════════════════════════════════ */
.pie {
  max-width: var(--max); margin: 0 auto;
  padding: 2.75rem var(--marco) 3.5rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 2rem;
  font-size: .84rem; color: var(--hueso-tenue);
}
.pie__marca {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1rem; letter-spacing: -0.03em;
  color: var(--hueso);
  margin-right: auto;
}
.pie__marca span { color: var(--carmin); }

/* ══ REVELADO AL SCROLL — sólo cabeceras ══════════════ */
[data-revela] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
[data-revela].visible { opacity: 1; transform: none; }

/* ══ MOVIMIENTO REDUCIDO ══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-revela] { opacity: 1; transform: none; }
  .aguayo > span { transition: none; }
}