/* =====================================================================
   REVTILE — Sistema de diseño
   Un solo acento. Jerarquía por tamaño, no por color. Movimiento mínimo.
   ---------------------------------------------------------------------
   Orden del archivo:
   01 Tokens · 02 Base · 03 Tipografía · 04 Layout · 05 Botones
   06 Nav · 07 Marquee · 08 Hero · 09 Producto (tarjetas) · 10 Calculadora
   11 Datos · 12 Autenticidad · 13 Galería · 14 Entregas · 15 Cómo comprar
   16 FAQ · 17 Cierre · 18 Footer · 19 Barra fija y WhatsApp
   20 Fichas de producto · 21 Verify · 22 Legal y 404 · 23 Movimiento
   ===================================================================== */

/* ── 01 · Tokens ─────────────────────────────────────────────────── */
:root {
  /* superficies — papel, no crema ni blanco puro */
  --bg:            #EDEDE8;
  --bg-soft:       #F5F5F1;
  --surface:       #FFFFFF;
  --surface-2:     #F5F5F1;
  --line:          #D6D6CE;
  --line-2:        #B5B5AB;
  --bg-blur:       rgba(237, 237, 232, .97);   /* casi opaca: la barra pasa sobre el campo rojo */

  /* texto */
  --ink:           #14140F;
  --ink-2:         #43433C;
  --ink-dim:       #63635B;   /* 5,2:1 sobre el papel */

  /* acento */
  --accent:        #E31D36;   /* rellenos, con blanco encima */
  --accent-2:      #C4162C;
  --accent-ink:    #FFFFFF;
  --accent-text:   #C4162C;   /* texto pequeño e iconos: 5,1:1 */
  --accent-wash:   #FBE8EB;
  --accent-line:   rgba(227, 29, 54, .38);

  /* la cinta oscura: el único bloque de tinta plena del sistema */
  --cinta:         #14140F;
  --cinta-ink:     #FFFFFF;
  --cinta-dim:     #B9B9B1;
  --cinta-acc:     #FF6B7A;

  /* semánticos */
  --danger:        #B3261E;
  --warn:          #8A5B00;
  --whatsapp:      #25D366;

  /* forma — Cartel no tiene esquinas redondas */
  --radius:        2px;
  --radius-sm:     2px;
  --radius-pill:   2px;
  --shadow:        0 2px 4px rgba(20,20,15,.06), 0 16px 40px rgba(20,20,15,.12);
  --ring:          0 0 0 2px var(--bg), 0 0 0 4px var(--accent-text);

  /* espacio */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 128px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(56px, 7vw, 96px); /* antes 72-128px: la portada se sentía interminable */
  --maxw: 1180px;
  --maxw-text: 62ch;

  /* movimiento */
  --t-fast: 160ms cubic-bezier(.2,.6,.3,1);
  --t: 240ms cubic-bezier(.2,.6,.3,1);
  --t-slow: 550ms cubic-bezier(.16,.7,.2,1);

  /* alias heredados (checkout, rastreo, panel, guías) */
  --red:       var(--accent-text);
  --red-soft:  var(--accent);
  --teal:      var(--ink-dim);
  --teal-deep: var(--line-2);
  --lime:      var(--accent-text);
  --gold:      var(--accent-text);
  --glow-red:  none;
  --glow-teal: none;
  --glow-lime: none;
  --glow-gold: none;
}

/* ── 02 · Base ───────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
/* <picture> no debe convertirse en el hijo de flex/grid: la imagen sigue siendolo */
picture { display: contents; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); }

/* foco visible, siempre */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}

/* los blobs y el grano de la versión anterior desaparecen sin tocar el HTML */
.blob, .cursor-glow { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
  transition: top var(--t);
}
.skip-link:focus { top: 12px; }

/* ── 03 · Tipografía ─────────────────────────────────────────────── */
/* Anton tiene un solo grosor y va en caja alta: el peso lo da el tamaño.
   Los subtítulos bajan a Barlow para que las fichas se puedan leer. */
h1, h2, .display, .nav__logo, .footer__logo {
  font-family: 'Anton', 'Barlow', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .006em;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
h3, h4 {
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  text-wrap: balance;
}
/* Texto en contorno: el recurso del cartel para meter dos jerarquías en
   un mismo tamaño. Se usa una vez por pantalla, nunca más. */
/* Texto en contorno. El trazo lleva color propio: con currentColor
   heredaria el "transparent" del relleno y no se veria nada. */
.hueco {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
@supports not (-webkit-text-stroke: 1px red) { .hueco { color: inherit; } }

.mono, .code, .spec__k, .verify__k {
  font-family: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.section-eyebrow {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s2);
}
.section-eyebrow b { color: var(--accent-text); font-weight: 400; }

.section-title {
  font-size: clamp(30px, 4.8vw, 52px);
  letter-spacing: .006em;
  margin-bottom: var(--s2);
}
/* Dentro del sitio los títulos son de cartel, pero el texto que los
   acompaña no: si todo grita, no se entiende nada. */
.section-lead, .trust__lead, .product__size, .step__text, .card__text,
.benefit__text, .faq__item p { text-transform: none; }
.section-lead {
  color: var(--ink-2);
  font-size: clamp(16px, 2vw, 18px);
  max-width: var(--maxw-text);
  margin-bottom: var(--s4);
}

/* el punto de acento al final de los títulos */
.accent { color: var(--accent-text); }
/* "neon-text" existía para pintar y hacer brillar palabras: ahora solo pinta */
.neon-text { color: var(--accent-text); text-shadow: none; }
.neon { color: var(--accent-text); }

/* ── 04 · Layout ─────────────────────────────────────────────────── */
.wrap, .products__inner, .benefits__inner, .trust__inner,
.testis__inner, .how__inner, .faq__inner, .aprende__inner, .final__inner,
.pp-section__inner, .verify__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { position: relative; }
.products, .benefits, .trust, .testis, .how, .faq, .aprende,
.final, .pp-section, .verify {
  padding-block: var(--section);
}
.section--alt, .pp-section--alt { background: var(--bg-soft); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ── 05 · Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-sm);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-2); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink-dim); background: var(--surface); }

/* el dorado de lanzamiento deja de ser un tercer color */
.btn--gold { background: var(--accent); color: var(--accent-ink); }
.btn--gold:hover { background: var(--accent-2); }

.btn--full { width: 100%; }
.btn--big { min-height: 62px; padding: 0 38px; font-size: 20px; }

.btn__arrow { transition: transform var(--t); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-note {
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 10px;
  text-align: center;
}

/* enlace de texto con subrayado sobrio */
.link {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  padding-bottom: 1px;
  transition: color var(--t), border-color var(--t);
}
.link:hover { color: var(--ink); border-color: var(--accent-text); }

/* ── 06 · Nav ────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-blur);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 64px;
}
.nav__logo {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .05em;
  margin-right: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
/* la iguana junto al nombre, en todas las páginas: se entra y se sabe
   que esto es REVTILE. Va por CSS para no tocar cada plantilla. */
.nav__logo::before {
  content: '';
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-right: 9px;
  border-radius: 50%;
  background-color: #F3EFE4; /* crema del chip por si la imagen tarda */
  background-image: url('../assets/mascota-chip.webp');
  background-size: cover;
  border: 1.5px solid var(--cinta);
  transform: rotate(-6deg);
}
.nav__dot { color: var(--accent-text); }

/* El letrero de neón de la versión original: la mayor parte del tiempo el
   logotipo está en blanco, y cada 11 s parpadea y se queda encendido en
   rojo un momento. Es el único gesto decorativo que queda en el sitio, y
   desaparece por completo con prefers-reduced-motion. */
/* Sobre papel el neón no tiene sentido: el logotipo late en rojo, muy
   despacio, y se queda quieto con prefers-reduced-motion. */
@keyframes revtile-latido {
  0%, 80%, 100% { color: var(--ink); }
  84%, 93%      { color: var(--accent-text); }
}
.nav__logo { animation: revtile-latido 10s infinite; }
.nav__logo:hover { color: var(--accent-text); animation: none; }

.nav__links { display: flex; gap: var(--s3); }
.nav__links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--t);
  padding: 6px 0;
}
.nav__links a:hover { color: var(--ink); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background var(--t);
  white-space: nowrap;
}
.nav__cta:hover { background: var(--accent-2); }

.pp-back {
  font-size: 14px;
  color: var(--ink-dim);
  margin-right: auto;
  transition: color var(--t);
}
.pp-back:hover { color: var(--ink); }

.nav__burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__burger span {
  width: 17px; height: 1.5px; background: var(--ink);
  transition: transform var(--t), opacity var(--t-fast);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* menú móvil */
.mobmenu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  padding: 96px var(--gutter) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.mobmenu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobmenu__links { display: flex; flex-direction: column; }
.mobmenu__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
}
.mobmenu__link i {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-style: normal;
  color: var(--accent-text);
}
.mobmenu__cta { margin-top: auto; }
.mobmenu__mascot {
  width: 108px; height: auto;
  align-self: center;
  opacity: .5;
  margin-top: var(--s3);
}

/* ── 07 · Marquee — el único elemento en movimiento continuo ─────── */
.ticker {
  background: var(--bg-soft);
  color: var(--ink-dim);
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding: 12px 0;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker__track span {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--ink-dim);
  white-space: nowrap;
  text-transform: uppercase;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── 08 · Hero ───────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(48px, 8vw, 88px);
  padding-bottom: clamp(48px, 7vw, 80px);
}
.hero__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.hero__inner > * { min-width: 0; }
.hero__label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--s3);
}
.hero__label::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 2px;
}
.hero h1 {
  font-size: clamp(34px, 5.6vw, 66px);
  margin-bottom: var(--s3);
}
.hero h1 em { font-style: normal; color: var(--accent-text); display: block; }
.hero__sub {
  color: var(--ink-2);
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.58;
  max-width: 52ch;
  margin-bottom: var(--s4);
}
.hero__sub strong { color: var(--ink); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s3); }
/* En el hero el negro navega y el rojo compra: así el rojo no se gasta
   antes de llegar al catálogo. */
.hero__actions .btn--primary { background: var(--ink); color: var(--bg); }
.hero__actions .btn--primary:hover { background: #000; }
.hero__actions .btn--ghost { border-color: var(--ink); border-width: 2px; }
.hero__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14.5px;
  color: var(--ink-2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.hero__terms span { display: inline-flex; align-items: center; gap: 8px; }
.hero__terms span::before {
  content: "";
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--accent-text);
  border-bottom: 1.8px solid var(--accent-text);
  transform: rotate(-45deg) translateY(-2px);
  flex: none;
}
.hero__terms b { color: var(--ink); font-weight: 600; }

/* El cartel: una diagonal roja parte la pantalla. Solo aquí y en el
   cierre; hacia adentro el sistema baja de volumen. */
.hero--solo {
  position: relative;
  overflow: hidden;
  padding-block: 0 0;
  background: var(--bg);
}
/* El campo rojo. Se dibuja como un bloque inclinado en vez de un
   clip-path porque skew y translate los compone la GPU: animar el
   recorte repintaría media pantalla en cada cuadro. */
.hero__campo {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 47%;
  width: 130%;
  background: var(--accent);
  transform-origin: top left;
  transform: skewX(13deg) translate3d(var(--campo, 0%), 0, 0);
  z-index: 0;
  will-change: transform;
}

/* Entrada: barre desde la derecha una sola vez, al cargar. */
html.js .hero__campo { animation: campo-entra 900ms cubic-bezier(.16,.84,.28,1) both; }
@keyframes campo-entra {
  from { transform: skewX(13deg) translate3d(115%, 0, 0); }
  to   { transform: skewX(13deg) translate3d(var(--campo, 0%), 0, 0); }
}

/* Al bajar, se retira como un telón. La variable la escribe main.js
   una vez por cuadro mientras el hero está a la vista, y nada más. */
.hero--solo { --campo: 0%; }
.hero--solo .hero__inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  padding-block: clamp(36px, 5vw, 72px);
  align-items: center;
}
.hero--solo h1 {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: .008em;
  max-width: 16ch;
}
.hero--solo h1 em,
.hero--solo h1 .hero__pais { display: block; color: inherit; }
/* El contorno tiene que ganarle a la regla de arriba, que es más
   específica; y el trazo lleva color propio, porque currentColor
   heredaría el "transparent" del relleno. */
.hero--solo h1 em.hueco {
  color: var(--accent-text);
  -webkit-text-stroke: 0;
}
.hero--solo h1 .hero__pais { color: var(--ink); }
.hero--solo .hero__sub { font-size: clamp(16px, 1.9vw, 18px); max-width: 36ch; }
/* La banda negra: sobre papel es el elemento con más contraste posible,
   y por eso es donde va lo que el cliente busca antes que nada. */
/* La cinta: el único bloque de tinta plena del sistema, y por eso lleva
   justo lo que el comprador busca antes que nada. */
.hero--solo .hero__terms {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: var(--cinta);
  color: var(--cinta-dim);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero--solo .hero__terms span {
  padding: 16px var(--gutter);
  border-left: 1px solid var(--line);
  align-items: center;
}
.hero--solo .hero__terms span:first-child { border-left: 0; }
.hero--solo .hero__terms span::before { display: none; }
.hero--solo .hero__terms b { color: var(--cinta-ink); font-weight: 700; }

/* la escena del hero: el tarro con su sombra proyectada */
.hero__art { display: flex; justify-content: center; }
.hero__art img {
  width: 100%;
  max-width: 400px;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .55));
}

/* hero heredado (404) */
.hero__stage { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.hero__giant {
  font-family: 'Anton', sans-serif;
  font-size: clamp(52px, 13vw, 132px);
  font-weight: 800;
  letter-spacing: .006em;
  line-height: .95;
}
.hero__baseline { height: 1px; background: var(--line); margin: var(--s3) auto var(--s3); max-width: 420px; }
.hero__meta, .hero__floor, .hero__badges, .duo__seal { display: none; }

/* ── 09 · Tarjetas de producto ───────────────────────────────────── */
.products__grid > * { min-width: 0; }
.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: var(--s3);
  align-items: stretch;
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.product:hover { border-color: var(--line-2); transform: translateY(-3px); }
.product:focus-within { border-color: var(--accent-line); }

/* nivel 1 — la foto */
.product__photo {
  background: var(--bg-soft);
  aspect-ratio: 4 / 3; /* antes 1/1: la tarjeta se sentía enorme */
  display: grid;
  place-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.product__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--t-slow);
}
.product:hover .product__photo img { transform: scale(1.025); }
/* el <picture> es en línea: sin esto el <img> mide el ancho en cuadrado y la
   foto 4:3 recorta el tarro por arriba y por abajo */
.product__photo { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.product__photo picture { display: block; width: 100%; height: 100%; min-height: 0; }

/* una sola etiqueta, y solo cuando dice algo */
.product__flag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.product__flag--quiet {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line-2);
}

.product__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  flex: 1;
}

/* nivel 2 — identidad */
.product__brand {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.product__name {
  font-family: 'Barlow', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: none;
}
.product__size {
  font-size: 13.5px;
  color: var(--ink-dim);
  margin-bottom: var(--s2);
}

/* nivel 1 — el precio. Resalta por tamaño, no por fondo: sobre papel un
   número de 48 px en negro pleno pesa más que cualquier recuadro. */
.product__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.product__price {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.product__price small {
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: var(--ink-dim); text-transform: uppercase;
}
.product__price-old {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-dim);
  margin-left: 8px;
}
.product__envio { display: none; }

/* ── Compra protegida ────────────────────────────────────────────────
   El seguro de la compra, dicho en concreto y junto al botón de pagar:
   qué garantiza REVTILE y cómo se reclama. */
.co__protegida {
  margin-top: 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  background: var(--surface);
}
.co__protegida-titulo {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.co__protegida-titulo::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #F3EFE4;
  background-image: url('../assets/mascota-chip.webp');
  background-size: cover;
  border: 1px solid var(--cinta);
}
.co__protegida ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.co__protegida li {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.co__protegida li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-text);
  font-weight: 700;
}

/* ── Aprende, versión lista ──────────────────────────────────────────
   Las guías ya no son tarjetones: una fila por guía, como índice de
   revista. La portada respira y las guías siguen a un clic. */
.aprende__lista {
  list-style: none;
  padding: 0;
  border-top: 1.5px solid var(--ink);
}
.aprende__lista li { border-bottom: 1px solid var(--line-2); }
.aprende__lista a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(15.5px, 2vw, 18px);
  line-height: 1.4;
  transition: color var(--t);
}
.aprende__lista a:hover { color: var(--accent-text); }
.aprende__lista .aprende__tag { flex: 0 0 96px; }
.aprende__lista .aprende__leer { margin-left: auto; color: var(--accent-text); font-weight: 700; }
@media (max-width: 640px) {
  .aprende__lista a { flex-wrap: wrap; gap: 6px 16px; }
  .aprende__lista .aprende__tag { flex-basis: 100%; }
}
@keyframes latido-punto {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 29, 54, .35); }
  50% { box-shadow: 0 0 0 7px rgba(227, 29, 54, 0); }
}

/* ── Tachado animado ─────────────────────────────────────────────────
   El precio de antes se tacha "a mano" un instante después de cargar:
   la raya crece de izquierda a derecha, sutil y una sola vez. */
.product__price-old, .pp-buy__price .was {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.product__price-old::after, .pp-buy__price .was::after {
  content: '';
  position: absolute;
  left: -3%;
  top: 54%;
  height: 1.5px;
  width: 0;
  background: var(--accent-text);
  animation: tachar .45s cubic-bezier(.2,.6,.3,1) .7s forwards;
}
@keyframes tachar { to { width: 106%; } }
@media (prefers-reduced-motion: reduce) {
  .product__price-old::after, .pp-buy__price .was::after { animation: none; width: 106%; }
}
/* ── Sello de envío ───────────────────────────────────────────────
   El equivalente al cuño en un formulario: llama la atención con
   borde y color, no con una masa oscura encima del papel. */
.sello {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 7px 12px;
  border: 1.5px solid var(--accent-text);
  border-radius: 3px;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-text);
  line-height: 1;
}
.sello::before {
  content: "";
  width: 10px; height: 5px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
  flex: none;
}

.product__serving {
  font-size: 14.5px;
  color: var(--ink-2);
  padding-top: 4px;
  margin-bottom: 14px;
}
.product__serving b {
  color: var(--accent-text);
  font-weight: 600;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.product__info .sello { margin-bottom: var(--s3); }

/* nivel 3 — los checks */
.checks { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-bottom: 16px; }
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}
.check::before {
  content: "";
  width: 11px; height: 6px;
  border-left: 1.6px solid var(--accent-text);
  border-bottom: 1.6px solid var(--accent-text);
  transform: rotate(-45deg) translateY(-2px);
  flex: none;
}

.product__more {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-dim);
  text-align: center;
  transition: color var(--t);
}
.product__more:hover { color: var(--ink); }

/* enlace que cubre la tarjeta: clicable entera, y alcanzable por teclado */
.product__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product__info .btn, .product__more { position: relative; z-index: 2; }

/* las tres presentaciones como una decisión */
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.picker__opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  transition: border-color var(--t), background var(--t);
}
.picker__opt:hover { border-color: var(--line-2); }
.picker__opt.is-active { border-color: var(--accent-text); background: var(--accent-wash); }
.picker__role {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.picker__size { font-family: 'Barlow', system-ui, sans-serif; font-size: 17px; font-weight: 600; }
.picker__price { font-size: 13px; color: var(--ink-dim); }

/* combo */
.combo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.combo__eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 6px;
}
.combo__title { font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 6px; }
.combo__sub { color: var(--ink-dim); font-size: 14.5px; max-width: 56ch; }
.combo__btn { flex: none; }

/* ── 11 · Datos (antes "beneficios") ─────────────────────────────── */
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--line);
}
.benefit {
  padding: var(--s4) var(--s3) var(--s4) 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.benefit__value {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: clamp(31px, 4.2vw, 42px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--accent-text);
}
.benefit__unit { font-size: .42em; font-weight: 600; color: var(--ink-dim); margin-left: 4px; letter-spacing: 0; }
.benefit__title { font-size: 17px; }
.benefit__text { font-size: 14.5px; color: var(--ink-dim); max-width: 42ch; }

.disclaimer {
  margin-top: var(--s3);
  font-size: 13.5px;
  color: var(--ink-dim);
  max-width: var(--maxw-text);
  padding-left: 14px;
  border-left: 1px solid var(--line-2);
}

/* ── 12 · Autenticidad ───────────────────────────────────────────── */
.trust__lead { color: var(--ink-2); max-width: var(--maxw-text); margin-bottom: var(--s4); }

.steps-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.steps-num > * { background: var(--bg); padding: var(--s3); display: flex; flex-direction: column; gap: 10px; }
.steps-num .n {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--accent-text);
  letter-spacing: .1em;
}
.steps-num h3 { font-size: 16px; }
.steps-num p { font-size: 14.5px; color: var(--ink-dim); }

/* tarjetas de confianza heredadas */
.trust__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s3); }
.card {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card__icon { width: 26px; height: 26px; color: var(--accent-text); }
.card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card__title { font-size: 16px; }
.card__text { font-size: 14.5px; color: var(--ink-dim); }

/* ── 13 · Galería ────────────────────────────────────────────────── */
.gallery { margin-top: var(--s4); }
.gallery__hint { font-size: 13px; color: var(--ink-dim); margin-bottom: var(--s2); }
.gallery__track {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
}
.gallery__item {
  flex: 0 0 clamp(230px, 30vw, 320px);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.gallery__item img, .gallery__item video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface-2);
}
.gallery__item figcaption {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
}
/* los vídeos ya no arrancan solos: carátula + botón */
.gallery__item--video { position: relative; }
.gallery__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 20, 15, .28);
  transition: background var(--t);
}
.gallery__play:hover { background: rgba(20, 20, 15, .14); }
.gallery__play span {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 17px;
  padding-left: 3px;
}
.gallery__item.is-playing .gallery__play { display: none; }

/* ── 14 · Entregas reales ────────────────────────────────────────── */
.testis__inner .gallery__item--chat img { aspect-ratio: 3 / 5; object-fit: contain; background: var(--surface-2); }

/* ── 15 · Cómo comprar ───────────────────────────────────────────── */
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s3); }
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--s3);
  border-top: 1px solid var(--line-2);
}
.step__num {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--accent-text);
  letter-spacing: .1em;
}
.step__title { font-size: 17px; }
.step__text { font-size: 14.5px; color: var(--ink-dim); }

/* ── 16 · FAQ ────────────────────────────────────────────────────── */
.faq__list { border-top: 1px solid var(--line); max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  transition: color var(--t);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-text); }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  border-right: 1.6px solid var(--ink-dim);
  border-bottom: 1.6px solid var(--ink-dim);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t);
}
.faq__item[open] summary { color: var(--accent-text); }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--accent-text); }
.faq__item p { padding: 0 40px 22px 0; color: var(--ink-dim); font-size: 15px; max-width: var(--maxw-text); }
.faq__item p b { color: var(--ink-2); font-weight: 600; }

/* ── 17 · Cierre ─────────────────────────────────────────────────── */
.final {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: polygon(0 0, 38% 0, 72% 100%, 0 100%);
  z-index: 0;
}
.final { background: var(--cinta); color: var(--cinta-ink); border-top: 0; }
.final__inner { position: relative; z-index: 1; }
.final__title { color: var(--cinta-ink); }
.final__note { color: var(--cinta-dim); }
.final .neon-text, .final .accent { color: var(--cinta-ink); }
.final .btn--primary { background: var(--bg); color: var(--ink); }
.final .social__link { border-color: rgba(255,255,255,.3); color: var(--cinta-dim); }
.final .social__link:hover { color: #fff; border-color: #fff; }
.final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
.final__glow { display: none; }
.final__mascot { width: 110px; }
.final__title { font-size: clamp(30px, 5.4vw, 54px); }
.final__note { font-size: 14.5px; color: var(--ink-2); }
.final__share { font-size: 14px; }

.social { display: flex; gap: 12px; margin-top: var(--s2); }
.social__link {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  transition: color var(--t), border-color var(--t);
}
.social__link:hover { color: var(--ink); border-color: var(--ink-dim); }
.social__link svg { width: 19px; height: 19px; }

/* ── 18 · Footer ─────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line-2);
  background: var(--bg-soft);
  padding: var(--s5) 0 var(--s3);
}
.footer__grid {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s4);
}
.footer__logo { font-size: 21px; font-weight: 400; letter-spacing: .05em; margin-bottom: 12px; }
.footer__tag { font-size: 14px; color: var(--ink-dim); max-width: 40ch; margin-bottom: var(--s3); }
.footer__social-row { display: flex; gap: 10px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__title {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.footer__col a, .footer__col span { font-size: 14px; color: var(--ink-2); transition: color var(--t); }
.footer__col a:hover { color: var(--accent-text); }

.footer__legal {
  max-width: var(--maxw);
  margin: var(--s4) auto 0;
  padding: var(--s3) var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s2) var(--s4);
}
.footer__legal div { display: flex; flex-direction: column; gap: 2px; }
.footer__legal dt, .footer__legal .k {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.footer__legal dd, .footer__legal .v { font-size: 13.5px; color: var(--ink-2); }

.footer__base {
  max-width: var(--maxw);
  margin: var(--s3) auto 0;
  padding: var(--s3) var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__base p { font-size: 12.5px; color: var(--ink-dim); }
.footer__note { max-width: var(--maxw-text); }

/* ── 19 · Barra fija y WhatsApp ──────────────────────────────────── */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: var(--bg-blur);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  transform: translateY(101%);
  transition: transform var(--t);
}
.buybar.is-visible { transform: none; }
.buybar__info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.buybar__thumbs { display: flex; }
.buybar__thumbs img {
  width: 38px; height: 38px;
  object-fit: contain;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.buybar__thumbs img + img { margin-left: -10px; }
.buybar__text { display: flex; flex-direction: column; min-width: 0; }
.buybar__text b { font-family: 'Barlow', system-ui, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .008em; }
.buybar__text span { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buybar__btn { flex: none; min-height: 46px; }
body.buybar-on { padding-bottom: 76px; }

.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 96;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.wa-float.is-on { opacity: 1; visibility: visible; transform: none; }
.wa-float svg { width: 28px; height: 28px; }
body.buybar-on .wa-float { bottom: 86px; }

/* ── 20 · Fichas de producto ─────────────────────────────────────── */
.pp-hero {
  padding-block: clamp(32px, 5vw, 56px) var(--section);
}
.pp-hero__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.pp-hero__inner > * { min-width: 0; }

/* galería del producto */
.pp-gal { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 12px; }
.pp-gal__main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: var(--s4);
  overflow: hidden;
}
.pp-gal__main img { width: 100%; height: 100%; object-fit: contain; }
/* las fotos reales (jpg) llenan el marco recortadas al cuadrado; los
   renders del tarro (png) siguen completos — así toda la galería se ve
   uniforme aunque las fotos vengan con proporciones distintas */
.pp-gal__main img[src$=".jpg"], .pp-gal__thumb img[src$=".jpg"] { object-fit: cover; }
.pp-gal__thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pp-gal__thumb {
  flex: 0 0 68px;
  height: 68px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 6px;
  transition: border-color var(--t);
}
.pp-gal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pp-gal__thumb.is-active { border-color: var(--accent-text); }

/* bloque de decisión */
.pp-buy { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
/* nada de break-word en los titulares: partia el punto final a una linea
   aparte. El desbordamiento real ya lo resuelve el min-width: 0 de arriba. */
.pp-buy h1, .hero h1 { overflow-wrap: normal; hyphens: none; }
.pp-buy h1 { font-size: clamp(28px, 4.2vw, 42px); }
.pp-buy__price {
  display: flex;
  align-items: baseline;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.pp-buy__price .now {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pp-buy__price .was {
  font-size: 17px; color: var(--ink-dim);
}
.pp-buy__price .envio { display: none; }
.pp-buy__unit { font-size: 14.5px; color: var(--ink-2); }
.pp-buy__unit b { color: var(--ink); font-weight: 600; }

.pp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pp-stat {
  padding: 16px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-stat:last-child { border-right: 0; }
.pp-stat b { font-family: 'Barlow', system-ui, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.pp-stat span { font-size: 11.5px; color: var(--ink-dim); }

.pp-note { font-size: 13.5px; color: var(--ink-2); }

/* tabla de datos (nutricional, envíos) */
.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec th, .spec td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { font-weight: 500; color: var(--ink-dim); width: 45%; }
.spec td { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec caption { text-align: left; font-size: 12.5px; color: var(--ink-dim); padding-bottom: var(--s2); }

.pp-section__inner > h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: var(--s3); }
.pp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); align-items: start; }

/* CTA fija de la ficha en móvil */
.pp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 12px var(--gutter);
  background: var(--bg-blur);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(101%);
  transition: transform var(--t);
}
.pp-sticky.is-visible { transform: none; }
.pp-sticky__price { display: flex; flex-direction: column; }
.pp-sticky__price b { font-family: 'Barlow', system-ui, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .008em; }
.pp-sticky__price span { font-size: 11.5px; color: var(--ink-dim); }
.pp-sticky .btn { flex: none; min-height: 46px; }

/* ── 21 · Verify ─────────────────────────────────────────────────── */
.verify__card {
  max-width: 640px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.verify__head {
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.verify__code {
  font-family: 'DM Mono', monospace;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 500;
  letter-spacing: .04em;
}
.verify__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent-wash);
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
}
.verify__state--void { background: rgba(179,38,30,.07); color: var(--danger); border-color: rgba(179,38,30,.3); }
.verify__rows { display: flex; flex-direction: column; }
.verify__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 14px var(--s3);
  border-bottom: 1px solid var(--line);
}
.verify__k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.verify__v { font-family: 'DM Mono', monospace; font-size: 14px; text-align: right; }
.verify__v.ok { color: var(--accent-text); }
.verify__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; padding: var(--s3); }
.verify__photos img { aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); }
.verify__scope {
  padding: var(--s3);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.62;
}
.verify__scope b { color: var(--ink-2); font-weight: 600; display: block; margin-bottom: 4px; }
.verify__form { max-width: 460px; margin-inline: auto; display: flex; gap: 10px; }
.verify__form input {
  flex: 1;
  min-height: 52px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.verify__form input::placeholder { color: var(--ink-dim); letter-spacing: .04em; }

/* ── 22 · Legal y 404 ────────────────────────────────────────────── */
.legal__main {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--section) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.legal__title { font-size: clamp(30px, 5vw, 46px); }
.legal__updated { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--ink-dim); margin-top: -28px; }
.legal__block { display: flex; flex-direction: column; gap: 12px; }
.legal__block h2 { font-size: 21px; }
.legal__block p, .legal__block li { color: var(--ink-2); font-size: 15.5px; }
.legal__block ul { padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.legal__block a, .disclaimer a, .footer__note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

.notfound { max-width: 620px; margin: 0 auto; padding: var(--section) var(--gutter); text-align: center; display: flex; flex-direction: column; gap: var(--s3); align-items: center; }
.notfound__mascot { width: 130px; opacity: .8; }

/* ── 23 · Movimiento ─────────────────────────────────────────────── */
/* Todo nace visible. La animación es una mejora, nunca un requisito:
   si el JS no corre, la página se lee igual. */
.reveal {
  opacity: 1;
  transform: none;
}
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .hero__campo { animation: none; }
  .hero__campo { transform: skewX(13deg) translate3d(0, 0, 0) !important; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 24 · Responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { max-width: 460px; }
  .pp-hero__inner { grid-template-columns: 1fr; }
  .pp-gal { position: static; }
  .footer__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
  .pp-back { font-size: 13px; }
  .combo { flex-direction: column; align-items: flex-start; }
  .combo__btn { width: 100%; }
  .pp-sticky { display: flex; }
  body.pp-sticky-on { padding-bottom: 76px; }
}

@media (max-width: 620px) {
  .hero__terms { flex-direction: column; gap: 8px; }
  .hero__actions .btn { width: 100%; }
  .hero__jar img { max-height: 150px; }
  .benefits__grid { grid-template-columns: 1fr; }
  .benefit { padding-right: 0; }
  .gallery__item { flex-basis: 78vw; }
  .buybar { padding: 10px var(--gutter); gap: 10px; }
  .buybar__text b { white-space: nowrap; font-size: 14px; }
  .buybar__text span { display: none; }
  .buybar__thumbs img + img { display: none; }
  .buybar__btn { padding: 0 16px; font-size: 14px; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s3); }
}

/* =====================================================================
   Heredado — checkout, guías, rastreo y panel.
   No se reescribe: hereda la paleta nueva por los alias del bloque 01.
   ===================================================================== */

/* ===== Guias educativas ===== */
.guia .legal__block h2 { font-size: 22px; }

.guia__figura { margin: 18px 0 22px; }

.guia__figura img, .guia__figura video {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  display: block;
}

.guia__figura figcaption {
  margin-top: 10px;
  color: var(--ink-dim);
  font-size: 13px;
  font-style: italic;
}

.guia__tabla-wrap { overflow-x: auto; }

.guia__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.guia__tabla th, .guia__tabla td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
}

.guia__tabla thead th {
  color: var(--ink);
  font-weight: 700;
  background: var(--surface);
}

.guia__tabla td:first-child { color: var(--ink); font-weight: 600; }

.guia__tabla b { color: var(--gold); }

.guia__cta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 26px;
}

.guia__cta .btn { margin-top: 6px; }

.guia__mas { margin-top: 18px; font-size: 13.5px; }

.guia__mas a { color: var(--teal); }

/* ===== Seccion Aprende (index) ===== */
.aprende { padding: 130px 24px; }

.aprende__inner { max-width: 1160px; margin: 0 auto; }

.aprende__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.aprende__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.aprende__card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: var(--glow-teal);
}

.aprende__tag { font-size: 12px; font-weight: 700; color: var(--teal); letter-spacing: 1px; }

.aprende__card h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }

.aprende__card p { color: var(--ink-dim); font-size: 14px; line-height: 1.6; flex: 1; }

.aprende__leer { color: var(--red); font-weight: 700; font-size: 14px; }

@media (max-width: 900px) {
  .aprende { padding: 84px 20px; }
  .aprende__grid { grid-template-columns: 1fr; gap: 14px; }
  .guia .legal__block h2 { font-size: 19px; }
}

/* ===== Rastreo de pedidos ===== */
.ras__main { max-width: 660px; }

/* ── El campo del codigo ─────────────────────────────────────────────
   Antes el fondo y el borde eran blanco translucido, heredados del
   tema oscuro: sobre papel no se veia nada y el campo no parecia un
   campo. Ahora tiene fondo propio y borde de tinta. */
.ras__buscar { display: flex; gap: 10px; align-items: stretch; }

.ras__buscar input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  color: var(--ink);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color var(--t), box-shadow var(--t);
}
.ras__buscar input::placeholder {
  color: var(--ink-dim);
  letter-spacing: .06em;
  text-transform: none;
}
.ras__buscar input:hover { border-color: var(--ink-dim); }
.ras__buscar input:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.ras__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 26px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 2px solid var(--ink);
}

/* El numero de pedido es el dato que la persona vino a buscar: era de
   22 px y pasaba desapercibido. */
.ras__id {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: clamp(26px, 4.4vw, 34px);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--ink);
}
.ras__fecha { color: var(--ink-dim); font-size: 13.5px; margin-top: 6px; }

/* ── Los estados ─────────────────────────────────────────────────────
   Sin colores nuevos: la escala la da el peso de la tinta. */
.ras__badge {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid;
  white-space: nowrap;
}
/* recibido: en contorno, todavia no ha pasado nada */
.ras__badge--teal { color: var(--ink-2); border-color: var(--line-2); background: var(--surface-2); }
/* confirmado y entregado: tinta plena, es el estado que se busca */
.ras__badge--lima { color: var(--cinta-ink); border-color: var(--cinta); background: var(--cinta); }
/* en camino: rojo pleno, es lo que hay que mirar hoy */
.ras__badge--gold { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
/* cancelado */
.ras__badge--rojo { color: var(--danger); border-color: var(--danger); background: var(--surface); }

/* ── La linea de tiempo ──────────────────────────────────────────────
   Lo cumplido va en tinta, lo pendiente en gris, y el paso actual en
   rojo con un anillo: un solo punto rojo en toda la pantalla. */
.ras__timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 22px; }
.ras__paso { display: flex; gap: 18px; align-items: flex-start; position: relative; padding-bottom: 28px; }
.ras__paso:last-child { padding-bottom: 0; }

.ras__paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 9px; top: 22px; bottom: 0;
  width: 2px;
  background: var(--line);
}
.ras__paso.is-hecho:not(:last-child)::before { background: var(--ink); }

.ras__punto {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  background: var(--surface);
  margin-top: 1px;
  z-index: 1;
  transition: transform var(--t), background var(--t), border-color var(--t);
}
.ras__paso.is-hecho .ras__punto { border-color: var(--ink); background: var(--ink); box-shadow: none; }
.ras__paso.is-actual .ras__punto {
  border-color: var(--accent);
  background: var(--accent);
  transform: scale(1.2);
  box-shadow: 0 0 0 5px var(--accent-wash);
}

.ras__paso b { font-size: 15.5px; display: block; color: var(--ink); }
.ras__paso small { color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; display: block; margin-top: 3px; }
.ras__paso:not(.is-hecho) b { color: var(--ink-dim); font-weight: 500; }
.ras__paso.is-actual b { color: var(--ink); font-weight: 700; }
.ras__timeline.is-cancelado { opacity: .5; }

/* ── Avisos ──────────────────────────────────────────────────────────
   Tambien eran translucidos sobre negro. Ahora llevan una barra de
   color a la izquierda, que se ve sin necesidad de teñir el fondo. */
.ras__info {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14.5px;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.ras__info b { color: var(--ink); font-weight: 700; }
.ras__info--guia { border-left-color: var(--accent); background: var(--accent-wash); border-color: var(--accent-line); }
.ras__info--guia b { color: var(--accent-text); }
.ras__vivo { margin-top: 8px; }
.ras__vivo b { color: var(--accent-text); }
.ras__guia-btn { margin-top: 12px; font-size: 13.5px; padding: 10px 18px; }

.ras__items-titulo {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.ras__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.4;
}
.ras__item img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px;
}
.ras__item b { font-weight: 700; }

.ras__items {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.ras__items p { margin-bottom: 5px; }
.ras__total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== Panel de administración ===== */
.adm__main { max-width: 860px; }

.adm__tag { font-size: 11px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; }

.adm__salir { cursor: pointer; border: none; }

.adm__login { max-width: 460px; margin: 40px auto; text-align: center; }

.adm__login-mascota { border-radius: 50%; margin-bottom: 14px; }

.adm__login-title { font-family: 'Barlow', system-ui, sans-serif; font-size: 26px; font-weight: 800; margin-bottom: 6px; }

.adm__login .co__sub { margin-bottom: 22px; }

.ras__buscar--llave input { font-family: 'DM Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: none; font-size: 14.5px; }

.adm__saludo { margin-bottom: 20px; }

.adm__saludo-titulo { font-family: 'Barlow', system-ui, sans-serif; font-size: clamp(24px, 5vw, 34px); font-weight: 900; }

.adm__saludo-fecha { color: var(--ink-dim); font-size: 14px; margin-top: 4px; text-transform: capitalize; }

.adm__stat--oro b { color: var(--gold); }

.adm__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }

.adm__stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.adm__stat b { font-family: 'Barlow', system-ui, sans-serif; font-size: 21px; display: block; }

.adm__stat span { color: var(--ink-dim); font-size: 12.5px; }

.adm__stat--alerta b { color: var(--red-soft); }

.adm__filtros { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }

.adm__filtros select, .adm__filtros input {
  background: var(--surface-2);
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.adm__filtros input[type="search"] { flex: 1; min-width: 180px; }

.adm__refrescar { padding: 10px 16px; font-size: 16px; cursor: pointer; }

.adm__vacio { color: var(--ink-dim); font-size: 14px; padding: 18px 0; text-align: center; }

.adm__pedido {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-dim);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--bg-soft);
}

.adm__pedido--nuevo { border-left-color: var(--red); }
.adm__pedido--verificado { border-left-color: var(--gold); }
.adm__pedido--despachado { border-left-color: var(--teal); }
.adm__pedido--entregado { border-left-color: var(--lime); }
.adm__pedido--cancelado { opacity: 0.55; }

.adm__ped-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }

.adm__ped-head > b:first-child { font-family: 'Barlow', system-ui, sans-serif; font-size: 14px; }

.adm__ped-head span { color: var(--ink-dim); font-size: 12.5px; }

.adm__ped-total { margin-left: auto; color: var(--gold); }

.adm__ped-body { font-size: 13.5px; line-height: 1.7; color: var(--ink-dim); margin-bottom: 12px; }

.adm__ped-body b { color: var(--ink); }

.adm__ped-body a { color: var(--teal); text-decoration: none; }

.adm__ped-ctrl { display: flex; gap: 8px; flex-wrap: wrap; }

.adm__ped-ctrl select, .adm__ped-ctrl input {
  background: var(--surface-2);
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.adm__ped-ctrl input[data-campo="guia"] { width: 130px; }

.adm__ped-ctrl input[data-campo="nota"] { flex: 1; min-width: 140px; }

.adm__guardar { padding: 8px 18px; font-size: 13px; }

.adm__cupon-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }

.adm__cupon-form input, .adm__cupon-form select {
  background: var(--surface-2);
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}

.adm__cupon-form input#cuCodigo { text-transform: uppercase; }

.adm__cupon {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px dashed var(--accent-line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13.5px;
}

.adm__cupon b { font-family: 'Barlow', system-ui, sans-serif; color: var(--gold); }

.adm__cupon span { color: var(--ink-dim); }

.adm__cupon.is-off { opacity: 0.5; border-style: solid; border-color: var(--line-2); }

.adm__cupon.is-off b { color: var(--ink-dim); }

.adm__cupon-toggle {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
}

.adm__cupon-toggle:hover { border-color: var(--red); }

@media (max-width: 640px) {
  .adm__stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .adm__stat { padding: 12px 8px; }
  .adm__stat b { font-size: 15px; }
  .adm__cupon-form { grid-template-columns: 1fr 1fr; }
  .ras__buscar { flex-direction: column; }
  .co__cupon { flex-direction: column; }
}

/* =====================================================================
   Ajustes finales — armoniza los bloques heredados con el sistema nuevo.
   Va al final a propósito: aquí gana el sistema, no el CSS antiguo.
   ===================================================================== */
.aprende { padding-block: var(--section); padding-inline: 0; }
.aprende__inner { max-width: var(--maxw); padding-inline: var(--gutter); }
.aprende__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.aprende__card {
  border-radius: var(--radius);
  border-color: var(--line);
  padding: var(--s3);
  transition: border-color var(--t), transform var(--t);
}
.aprende__card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: none; }
.aprende__tag {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.aprende__card h3 { font-family: 'Barlow', system-ui, sans-serif; font-size: 18px; }
.aprende__card p { font-size: 14.5px; }
.aprende__leer { color: var(--accent-text); font-weight: 600; font-size: 14px; }

/* guías y páginas legales heredadas */
.guia .legal__block h2 { font-size: 21px; }
.guia__figura figcaption { font-size: 13px; color: var(--ink-dim); }
.guia__tabla { font-size: 14.5px; }
.guia__cta, .guia__mas { border-radius: var(--radius); border-color: var(--line); }

/* rastreo y panel: mismo radio y sin brillos heredados */
.ras__paso, .adm__stat, .adm__login { border-radius: var(--radius-sm) !important; }
.adm__stat, .ras__paso { box-shadow: none !important; }

/* ── REVTILE VERIFY — pantalla pública y stickers ────────────────── */
.verify__msg {
  max-width: 640px;
  margin: 0 auto 28px;
  padding: 14px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14.5px;
  text-align: center;
}
.verify__label-ejemplo {
  max-width: 640px;
  margin: 0 auto 10px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* el ejemplo se distingue por el borde y la etiqueta, no bajando la
   opacidad: eso arrastraba el texto por debajo del contraste minimo */
.verify__card.is-ejemplo { border-style: dashed; border-color: var(--line-2); background: var(--bg-soft); }
.verify__card.is-ejemplo .verify__state {
  background: transparent;
  color: var(--ink-dim);
  border-color: var(--line-2);
}
.verify .steps { max-width: 100%; }
.verify .pp-section { padding-block: var(--section) 0; }

/* ── Panel: registros VERIFY ─────────────────────────────────────── */
.adm__verify-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: var(--s3);
}
.adm__verify-form input, .adm__verify-form select, .adm__verify-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.adm__verify-form .full { grid-column: 1 / -1; }

.adm__verify-nuevo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  margin-bottom: var(--s3);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-wash);
}
.adm__verify-nuevo .codigo {
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  letter-spacing: .05em;
}
.adm__verify-nuevo img { width: 128px; height: 128px; background: #fff; border-radius: 6px; padding: 6px; }
.adm__verify-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.adm__verify-lista { display: flex; flex-direction: column; gap: 8px; }
.adm__verif {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr auto;
  gap: 6px 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 13.5px;
}
.adm__verif.is-anulado { opacity: .55; }
.adm__verif b { font-family: 'DM Mono', monospace; font-size: 14px; letter-spacing: .04em; }
.adm__verif span { color: var(--ink-dim); }
.adm__verif .adm__verif-btns { display: flex; gap: 6px; }
.adm__verif button {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-dim);
}
.adm__verif button:hover { color: var(--ink); border-color: var(--ink-dim); }

/* hoja de stickers imprimible */
.adm__stickers { display: none; }
@media print {
  body.imprimiendo > *:not(.adm__stickers) { display: none !important; }
  body.imprimiendo .adm__stickers {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6mm;
    padding: 8mm;
    background: #fff;
    color: #000;
  }
  .adm__sticker {
    border: 1px dashed #999;
    border-radius: 3mm;
    padding: 4mm;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2mm;
    break-inside: avoid;
    font-family: 'DM Mono', monospace;
  }
  .adm__sticker img { width: 26mm; height: 26mm; }
  .adm__sticker .marca { font-family: 'Barlow', system-ui, sans-serif; font-weight: 800; letter-spacing: .16em; font-size: 9pt; }
  .adm__sticker .cod { font-size: 10pt; letter-spacing: .06em; }
  .adm__sticker .url { font-size: 6.5pt; color: #555; }
}

.pendiente {
  font-family: 'DM Mono', monospace;
  font-size: .85em;
  color: var(--warn);
  border: 1px dashed var(--line-2);
  border-radius: 4px;
  padding: 1px 7px;
}

.gallery__track:focus-visible, .pp-gal__thumbs:focus-visible { box-shadow: var(--ring); border-radius: var(--radius); }

/* =====================================================================
   CHECKOUT — pedido.html
   Dos columnas en escritorio: los pasos a la izquierda, el resumen fijo a
   la derecha. En móvil se apila y el total viaja en la barra inferior.
   Las clases y los id son los que espera js/checkout.js: no se renombra
   ninguno, solo cambia cómo se ven.
   ===================================================================== */

/* ── Estructura ──────────────────────────────────────────────────── */
.co__main {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 56px) var(--gutter) var(--s6);
}
.co__title { font-size: clamp(28px, 4.4vw, 42px); margin-bottom: 8px; }
.co__sub { color: var(--ink-2); font-size: 16px; max-width: 56ch; margin-bottom: var(--s4); }

.co__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.co__pasos { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }

.co__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
}
.co__card > .section-eyebrow { margin-bottom: var(--s3); }

/* ── Aviso de datos recordados ───────────────────────────────────── */
.co__saved {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px 16px; margin-bottom: var(--s3);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--ink-2); font-size: 13.5px;
}
.co__saved button {
  color: var(--accent-text); font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── 01 · Productos ──────────────────────────────────────────────── */
.co__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co__products > * { min-width: 0; }

.co__prod {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
  text-align: center;
  transition: border-color var(--t), background var(--t);
}
.co__prod.is-active { border-color: var(--accent); background: var(--accent-wash); }
.co__prod img { width: 100%; max-width: 108px; aspect-ratio: 1/1; object-fit: contain; }
.co__prod-name { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.co__prod-price {
  font-family: 'Barlow', system-ui, sans-serif; font-size: 18px; font-weight: 700;
  letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums;
}
.co__nuevo {
  position: absolute; top: 8px; right: 8px;
  padding: 3px 8px; border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .1em;
}

.co__step { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.co__step button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 8px;
  font-size: 17px; color: var(--ink-2);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.co__step button:hover { color: var(--ink); border-color: var(--ink-dim); background: var(--surface); }
.co__step-val {
  min-width: 34px;
  font-family: 'DM Mono', monospace; font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.co__combo {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--s3); padding: 12px 16px;
  border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  background: var(--accent-wash); color: var(--ink-2); font-size: 13.5px;
}
.co__combo b { color: var(--ink); font-weight: 600; }

/* ── 02 · Formulario ─────────────────────────────────────────────── */
.co__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.co__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.co__field--full { grid-column: 1 / -1; }
.co__field > span {
  font-size: 12.5px; color: var(--ink-dim);
  font-family: 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
}
.co__field input, .co__field select {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color var(--t);
}
.co__field select {
  appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.co__field input::placeholder { color: var(--ink-dim); }
.co__field input:focus, .co__field select:focus { border-color: var(--accent); }
.co__field.is-error input, .co__field.is-error select { border-color: var(--danger); }

.co__check {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 14px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.co__check input { width: 19px; height: 19px; accent-color: var(--accent); flex: none; margin-top: 1px; }
.co__check b { color: var(--ink); font-weight: 600; }

/* ── Métodos de pago en el pie ───────────────────────────────────────
   Chips de texto, sin logos ajenos: dicen cómo se paga de un vistazo. */
.footer__pagos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.footer__pagos-titulo {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-right: 4px;
}
.pago-chip {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  background: var(--surface);
}
.pago-chip--pronto { color: var(--ink-dim); font-weight: 500; border-style: dashed; }

/* ── Próximamente: proteínas ─────────────────────────────────────────
   El anuncio va en la cinta: el único bloque de tinta plena del
   sistema, con la esquina roja diagonal del hero y el título en Anton.
   Vistoso, pero con las mismas piezas de siempre. */
.pronto {
  position: relative;
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--cinta);
  border-radius: var(--radius);
  padding: 30px 34px;
  overflow: hidden;
}
.pronto::before { /* la esquina roja, como el campo del hero */
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  background: var(--accent);
  transform: rotate(35deg);
}
.pronto > * { position: relative; z-index: 1; }
.pronto__mascota { display: block; flex: 0 0 auto; width: 76px; }
.pronto__mascota img { width: 100%; height: auto; border-radius: 50%; border: 3px solid var(--cinta-ink); transform: rotate(-6deg); display: block; }
.pronto__texto { flex: 1 1 280px; }
.pronto__tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cinta-acc);
  margin-bottom: 4px;
}
.pronto__titulo {
  font-family: 'Anton', 'Barlow', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--cinta-ink);
  line-height: 1.05;
}
.pronto__titulo .accent { color: var(--cinta-acc); }
.pronto__sub { font-size: 14.5px; color: var(--cinta-dim); margin-top: 8px; max-width: 52ch; }
.pronto__btn { flex: 0 0 auto; font-size: 14.5px; padding: 14px 26px; }
@media (max-width: 640px) {
  .pronto { padding: 24px 20px; }
  .pronto__btn { flex-basis: 100%; text-align: center; }
}

/* ── Opiniones ───────────────────────────────────────────────────────
   Frases reales de los chats de entrega: estrellas, cita y quién. */
.resenas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.resena {
  margin: 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 18px 20px;
}
.resena__estrellas {
  color: var(--accent-text);
  font-size: 17px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.resena blockquote {
  margin: 0 0 12px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
.resena figcaption { font-size: 13px; color: var(--ink-2); }
.resena figcaption b { color: var(--ink); }
.resena__chip {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
}
.resenas__nota { margin-top: 14px; font-size: 12.5px; color: var(--ink-dim); }

/* ── El pin del mapa ─────────────────────────────────────────────────
   El rediseño se llevó estos estilos y el pin quedó invisible: el
   marcador es un divIcon propio (sin imágenes externas, sin CSP). */
.co__pin { filter: drop-shadow(0 3px 5px rgba(20, 20, 15, .35)); }
.co__pin-dot {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  border: 3.5px solid #fff;
  box-sizing: border-box;
}
.co__pin-punta {
  position: absolute;
  left: 50%;
  top: 21px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 16px solid var(--accent);
}

/* ── Mapa ────────────────────────────────────────────────────────── */
.co__map-block { margin-top: var(--s3); }
.co__map-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.co__map-head > span { font-size: 13.5px; color: var(--ink-2); }
.co__map-btn {
  padding: 9px 15px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: color var(--t), border-color var(--t);
}
.co__map-btn:hover { color: var(--ink); border-color: var(--ink-dim); }
.co__map {
  height: 260px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  position: relative; z-index: 0; isolation: isolate; /* los paneles de Leaflet (z-index 400+) no se salen del mapa */
}
.co__map-hint, .co__map-dir { font-size: 12.5px; color: var(--ink-dim); margin-top: 8px; }
.co__map-dir { color: var(--ink-2); }
.leaflet-container { background: var(--bg-soft); font-family: inherit; }

/* ── 03 · Método de pago ─────────────────────────────────────────── */
.co__metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.co__metodo {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); text-align: left;
  transition: border-color var(--t), background var(--t);
}
.co__metodo:hover { border-color: var(--line-2); }
.co__metodo.is-active { border-color: var(--accent); background: var(--accent-wash); }
.co__metodo b { font-family: 'Barlow', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.co__metodo-det { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.co__metodo-tag {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}

/* ── 04 · Entrega programada ─────────────────────────────────────── */
.co__prog {
  padding: var(--s3); margin-bottom: var(--s3);
  border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  background: var(--accent-wash);
}
.co__prog-title {
  font-family: 'Barlow', system-ui, sans-serif; font-size: 16px; font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.co__prog-title span {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}
.co__prog-sub { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 14px; }
.co__dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.co__dia {
  flex: 0 0 auto; min-width: 62px; padding: 11px 10px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--bg-soft); text-align: center; line-height: 1.3;
  transition: border-color var(--t), background var(--t);
}
.co__dia small { display: block; font-size: 10.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; }
.co__dia b { display: block; font-family: 'Barlow', system-ui, sans-serif; font-size: 17px; font-weight: 700; }
.co__dia.is-active { border-color: var(--accent); background: var(--surface); }
.co__field--hora { max-width: 260px; }

/* ── Cupón ───────────────────────────────────────────────────────── */
.co__cupon { display: flex; gap: 8px; margin-bottom: 10px; }
.co__cupon input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px;
  background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); color: var(--ink);
  font: inherit; font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
}
.co__cupon input::placeholder { text-transform: none; letter-spacing: 0; color: var(--ink-dim); }
.co__cupon .btn { flex: none; min-height: 48px; }
.co__cupon-msg { font-size: 13.5px; color: var(--ink-2); margin-bottom: var(--s2); }
.co__cupon-msg.is-error { color: var(--danger); }

/* ── Pago anticipado (Bre-B) ─────────────────────────────────────── */
.co__pay {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s3);
  padding: var(--s3); margin-bottom: var(--s3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.co__pay-qr img {
  width: 100%; border-radius: var(--radius-sm);
  background: #fff; padding: 8px;
}
.co__pay-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.co__pay-title { font-family: 'Barlow', system-ui, sans-serif; font-size: 16px; font-weight: 700; }
.co__pay-text { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.co__pay-text b { color: var(--ink); font-weight: 600; }
.co__pay-text--small { font-size: 12.5px; color: var(--ink-dim); }

.co__key {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--t);
}
.co__key:hover { border-color: var(--accent); }
.co__key-num {
  font-family: 'DM Mono', monospace; font-size: 19px;
  letter-spacing: .06em; color: var(--ink);
}
.co__key-copy {
  font-size: 12.5px; font-weight: 600; color: var(--accent-text);
  white-space: nowrap;
}

.co__titular {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface);
}
.co__titular-check {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 12px;
}
.co__titular-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co__titular-info small { font-size: 12px; color: var(--ink-dim); }
.co__titular-info b {
  font-family: 'DM Mono', monospace; font-size: 16px;
  letter-spacing: .06em; color: var(--ink);
}

/* ── Contraentrega ───────────────────────────────────────────────── */
.co__ce {
  padding: var(--s3); margin-bottom: var(--s3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.co__ce-title { font-family: 'Barlow', system-ui, sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.co__ce-text { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.co__ce-text b { color: var(--ink); font-weight: 600; }

/* ── Pago en línea (Wompi): la caja debe oler a banco, no a improvisación ── */
.co__wompi { border: 1.5px solid var(--ink); background: var(--surface); }
.co__wompi-candado {
  width: 14px; height: 14px;
  display: inline-block; vertical-align: -1.5px; margin-right: 4px;
}
.co__wompi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.co__wompi-chips span {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg-soft);
}
.co__wompi-nota {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
  padding-top: 12px; border-top: 1px dashed var(--line-2);
}
.co__wompi-nota b { color: var(--accent-text); flex: none; }

/* El boton de pago replica el oficial de Wompi (negro, wordmark blanco):
   que se sienta que sales a la pasarela, no que es un boton mas nuestro.
   Va despues de .btn--primary en la cascada para ganarle el fondo. */
.btn--wompi { background: var(--cinta); color: #fff; }
.btn--wompi:hover { background: #000; color: #fff; }
.btn__wompi { height: 21px; width: auto; display: block; margin-top: 1px; }

/* ── Resumen fijo ────────────────────────────────────────────────────
   La factura es la protagonista: cabecera en cinta, borde firme y el
   ahorro cantado en rojo. Nada de resumen apagado. */
.co__resumen {
  position: sticky; top: 88px; z-index: 5;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow);
}
.co__resumen-head {
  padding: 14px var(--s3);
  background: var(--cinta);
  font-family: 'DM Mono', monospace; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cinta-ink);
}
/* la cantidad se ve: chip rojo delante de cada tarro */
.co__cant {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
/* los precios en columna: tachado arriba pequeño, precio real debajo,
   todos alineados al mismo borde derecho como en una factura */
.co__precios, .co__pila {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  white-space: nowrap;
}
.co__precios s, .co__pila s { color: var(--ink-dim); font-size: 11.5px; font-weight: 400; }
.co__precios b { font-variant-numeric: tabular-nums; }
.co__pila s { font-size: 13px; }
#resEnvio { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
#resEnvio s { color: var(--ink-dim); font-size: 11.5px; margin: 0; font-weight: 400; }
/* el renglón del ahorro: la razón para pagar ya */
.co__ahorro {
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: 8px 10px !important;
  margin-top: 4px;
}
.co__ahorro span { color: var(--accent-text) !important; font-weight: 700; }
.co__ahorro b { color: var(--accent-text) !important; font-weight: 700; }
.co__total { padding: var(--s3); display: flex; flex-direction: column; gap: 14px; }
.co__total-lines { display: flex; flex-direction: column; gap: 9px; }
.co__total-lines p {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 14px; color: var(--ink-2);
}
.co__total-lines p span { flex: 1; min-width: 0; }
.co__total-lines p b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; white-space: nowrap; }
.co__verde { color: var(--accent-text) !important; }
.co__total-final {
  align-items: baseline !important;
  margin-top: 6px;
  padding-top: 16px !important;
  border-top: 2px solid var(--ink);
  font-size: 15px !important; color: var(--ink) !important;
}
.co__total-final b {
  font-family: 'Barlow', system-ui, sans-serif !important; font-size: 31px !important;
  font-weight: 700 !important; letter-spacing: 0; color: var(--ink) !important;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.co__total-lines p b#resEnvio { color: var(--accent); }
.co__resumen-pie {
  padding: 0 var(--s3) var(--s3);
  display: flex; flex-direction: column; gap: 10px;
}
.co__resumen-nota { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }

/* ── Enviar ──────────────────────────────────────────────────────── */
.co__send { margin-top: 6px; }
.co__ok, .co__error {
  margin-top: 14px; padding: 13px 16px;
  border-radius: var(--radius-sm); font-size: 14px;
}
.co__ok { border: 1px solid var(--accent-line); background: var(--accent-wash); color: var(--ink); }
.co__error { border: 1px solid rgba(179, 38, 30, .35); background: rgba(179, 38, 30, .07); color: var(--danger); }
.co__note { margin-top: 12px; font-size: 13px; color: var(--ink-dim); line-height: 1.6; }
.co__note b { color: var(--ink-2); font-weight: 600; }
.co__note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.co__foot-link { color: var(--accent-text); }
.footer__base--solo { border-top: 0; }

/* ── Barra inferior (solo móvil) ─────────────────────────────────── */
.co__bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 12px var(--gutter);
  background: var(--bg-blur);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.co__bar-total { display: flex; flex-direction: column; }
.co__bar-total span { font-size: 11.5px; color: var(--ink-dim); }
.co__bar-total b {
  font-family: 'Barlow', system-ui, sans-serif; font-size: 20px; font-weight: 700;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.co__bar-btn { flex: none; min-height: 46px; }

@media (max-width: 1020px) {
  .co__layout { grid-template-columns: 1fr; }
  .co__resumen { position: static; }
  .co__bar { display: flex; }
  body.co { padding-bottom: 78px; }
}

@media (max-width: 620px) {
  /* en movil el tarro se lee en una fila: foto, nombre y precio, y el
     contador a la derecha. En columna no cabia sin desbordar. */
  .co__products { grid-template-columns: 1fr; }
  .co__prod {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    text-align: left;
    padding: 12px 14px;
  }
  .co__prod img { grid-column: 1; grid-row: 1 / 3; max-width: 54px; }
  .co__prod-name { grid-column: 2; grid-row: 1; font-size: 13px; }
  .co__prod-price { grid-column: 2; grid-row: 2; font-size: 16px; }
  .co__step { grid-column: 3; grid-row: 1 / 3; margin-top: 0; }
  .co__step button { width: 32px; height: 32px; }
  .co__step-val { min-width: 26px; font-size: 15px; }
  .co__nuevo { top: 8px; right: 8px; font-size: 9px; padding: 3px 7px; }
  .co__pay { grid-template-columns: 1fr; }
  .co__pay-qr { max-width: 190px; margin-inline: auto; }
  .co__cupon { flex-direction: column; }
  .co__cupon .btn { width: 100%; }
}


/* ── Galería: marco, flechas y encuadre único ────────────────────────
   Las fotos ya vienen enmarcadas al mismo formato desde el archivo, así
   que aquí solo hay que respetarlo: 4:5 las de producto, 9:16 los
   pantallazos. Con la proporción del marco igual a la del archivo,
   object-fit no recorta nada. */
.gallery__marco { position: relative; }

.gallery__nav {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: background var(--t), border-color var(--t), opacity var(--t);
}
.gallery__nav:hover { background: var(--accent); border-color: var(--accent); }
.gallery__nav:hover span { border-color: var(--accent-ink); }
.gallery__nav--atras  { left: -14px; }
.gallery__nav--alante { right: -14px; }
.gallery__nav span {
  width: 10px; height: 10px;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  transition: border-color var(--t);
}
.gallery__nav--atras span  { transform: rotate(-135deg); margin-left: 3px; }
.gallery__nav--alante span { transform: rotate(45deg);   margin-right: 3px; }
.gallery__nav:disabled { opacity: 0; pointer-events: none; }
.gallery__marco.sin-flechas .gallery__nav { display: none; }

/* la barra de desplazamiento sobraba: ya hay flechas y hay dedo */
.gallery__marco .gallery__track { scrollbar-width: none; }
.gallery__marco .gallery__track::-webkit-scrollbar { display: none; }

/* Un solo encuadre para toda la fila */
.gallery__item img, .gallery__item video {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-soft);
}
.gallery__item--chat img {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.testis__inner .gallery__item--chat img {
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--bg-soft);
}
.gallery__item figcaption { min-height: 3.9em; }

@media (max-width: 860px) {
  /* ── La portada compacta en el celular ─────────────────────────────
     Los checks de cada tarjeta repetían lo mismo tres veces (ya lo dice
     el hero) y los datos de la creatina iban en una columna eterna. */
  .product .checks { display: none; }
  .product__photo { aspect-ratio: auto; }
  .product__photo img { height: 215px; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
  .products__grid { gap: 18px; }
  .benefits__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .benefit__value { font-size: 30px; }
  .benefit__text { font-size: 13px; }

  /* en móvil las flechas van dentro, para no salirse de la pantalla */
  .gallery__nav--atras  { left: 6px; }
  .gallery__nav--alante { right: 6px; }
  .gallery__nav { width: 40px; height: 40px; background: var(--bg-blur); }
}

/* ── Tercera pasada de compactación móvil ────────────────────────────
   La portada seguía sintiéndose sin fin en el celular: tarjetas de
   producto y fotos más pequeñas, que se recorran rápido con el pulgar. */
@media (max-width: 640px) {
  /* dos creatinas por fila, como catálogo de bolsillo: todo a media
     columna y la página deja de sentirse sin fin */
  .products__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* si la última tarjeta queda impar (la de mejor precio), va a lo
     ancho: destaca en vez de dejar un hueco */
  .products__grid > .product:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .products__grid > .product:last-child:nth-child(odd) .product__photo img { height: 130px; }
  .product__photo { padding: 10px; }
  .product__photo img { height: 105px; }
  .product__flag { top: 8px; left: 8px; font-size: 10px; padding: 4px 8px; }
  .product__info { padding: 12px; gap: 4px; }
  .product__brand { font-size: 9.5px; letter-spacing: .1em; }
  .product__name { font-size: 14.5px; }
  .product__size { font-size: 11.5px; margin-bottom: 6px; }
  .product__pricing { padding-top: 10px; gap: 2px 8px; }
  .product__price { font-size: 22px; }
  .product__price small { font-size: 9px; }
  .product__price-old { font-size: 12px; margin-left: 0; }
  .product__info .sello { margin-bottom: 8px; padding: 5px 8px; font-size: 10px; gap: 5px; }
  .product__serving { padding-top: 2px; margin-bottom: 10px; font-size: 12px; }
  .product__serving b { font-size: 13.5px; }
  .product__info .btn { min-height: 40px; padding: 0 8px; font-size: 12px; gap: 6px; }
  .product__more { margin-top: 4px; font-size: 12px; }
  /* fotos y testimonios: más angostas (se asoma la siguiente) y por
     tanto bastante más bajas; el pie de foto ya no reserva espacio */
  .gallery__item { flex-basis: 56vw; }
  .gallery__item figcaption { min-height: 0; }
  /* los tres pasos de verificación eran una columna de texto eterna */
  .steps-num > * { padding: 16px; gap: 6px; }
  .steps-num p { font-size: 13.5px; }
}

/* ── El hero, segunda pasada ─────────────────────────────────────────
   Tres cambios que pidió Oscar y uno que hacía falta. */

/* Las tres creatinas escalonadas. La de 600 g manda por tamaño y va
   detrás; las otras dos se apoyan delante. Es la foto de familia de una
   línea de producto, no tres imágenes en fila. */
.hero__art--trio { display: block; width: 100%; }
.hero__art--trio img {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .32));
}

/* La cinta del hero: un solo elemento en movimiento continuo, que es lo
   que la hacía viva. Con prefers-reduced-motion se queda quieta y sigue
   leyéndose entera. */
.hero--solo .ticker {
  position: relative;
  z-index: 2;
  border-top: 3px solid var(--accent-2);
}
.hero--solo .ticker__track span { padding-inline: 26px; position: relative; }
.hero--solo .ticker__track span::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  background: currentColor;
  opacity: .55;
  border-radius: 50%;
}

@media (max-width: 860px) {
  /* Los botones ocupaban media pantalla y tapaban el titular. Uno solo
     manda; el otro pasa a enlace de texto, que es lo que era. */
  .hero--solo .hero__actions { gap: 14px; align-items: center; }
  .hero--solo .hero__actions .btn--big { min-height: 50px; font-size: 14px; padding: 0 22px; }
  .hero--solo .hero__actions .btn--ghost {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13.5px;
    letter-spacing: .03em;
    text-transform: none;
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--line-2);
  }
  .hero--solo .hero__actions .btn--ghost:hover { color: var(--ink); }
  .hero__art--trio { max-width: 340px; }
  .hero--solo .ticker__track span { font-size: 12.5px; padding-inline: 18px; }
}

@media (max-width: 620px) {
  /* el botón deja de ser un bloque de borde a borde */
  .hero--solo .hero__actions .btn { width: auto; align-self: flex-start; }
  .hero--solo .hero__actions { flex-direction: column; align-items: flex-start; }
}

/* ── Tabla nutricional ───────────────────────────────────────────────
   El dato a la izquierda como tabla legible, la foto del envase a la
   derecha como comprobante. En móvil la foto va primero, porque es lo
   que la gente reconoce, y la tabla debajo para leerla sin zoom. */
.nutri {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.nutri__datos { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.nutri__tabla { margin: 0; }
.nutri__tabla thead th {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1.5px solid var(--ink);
  width: auto;
}
.nutri__tabla td { font-variant-numeric: tabular-nums; }
.nutri__notas {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 16px;
  border-left: 2px solid var(--accent-line);
  list-style: none;
}
.nutri__notas li { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.nutri__fuente { font-size: 12.5px; color: var(--ink-dim); }
.nutri__foto { min-width: 0; }
/* El enlace tiene que ser bloque: envuelve una imagen al 100 % y, si se
   queda en linea, ese 100 % no tiene contra que medirse y la foto
   colapsa. El aspect-ratio le reserva el alto aunque la imagen tarde. */
.nutri__foto a { display: block; }
.nutri__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--t);
}
.nutri__foto a:hover img { border-color: var(--accent-line); }
.nutri__foto figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-dim);
}

@media (max-width: 860px) {
  .nutri { grid-template-columns: 1fr; }
  .nutri__foto { order: -1; max-width: 420px; }
}

/* ── Centro de mando: los controles se ven ───────────────────────────
   Todo lo de arriba solo devolvio el contraste. Esto agrega lo que
   faltaba: que un campo se distinga del fondo al pasar por encima y al
   escribir, y que cada pedido sea una tarjeta con borde propio en vez
   de texto suelto. */
.adm__campo-foco,
.adm input, .adm textarea, .adm select,
.adm__login input, .adm__buscar input, .ras__buscar input {
  background: var(--surface);
}
.adm input:hover, .adm textarea:hover, .adm select:hover,
.adm__login input:hover { border-color: var(--ink-dim); }
.adm input:focus, .adm textarea:focus, .adm select:focus,
.adm__login input:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Cada pedido, una tarjeta */
.adm__ped {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.adm__ped + .adm__ped { margin-top: 14px; }
.adm__ped-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

/* Los bloques de envio, separados de verdad */
.adm__envio, .adm__envios > li, .adm__envios > div {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 14px 16px;
}
.adm__envio + .adm__envio { margin-top: 12px; }

/* ── Archivar y eliminar ─────────────────────────────────────────────
   Los dos botones son deliberadamente discretos: la accion principal de
   una tarjeta es Guardar, y estos dos no deben competir con ella. */
.adm__archivar, .adm__eliminar {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.adm__archivar:hover { border-color: var(--ink-dim); color: var(--ink); }
.adm__avisar {
  padding: 8px 14px;
  border: 1.5px solid var(--whatsapp);
  border-radius: var(--radius-sm);
  background: none;
  color: #128C4B;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.adm__avisar:hover { background: var(--whatsapp); color: #fff; }
.adm__eliminar { color: var(--danger); border-color: var(--danger); }
.adm__eliminar:hover { background: var(--danger); color: #fff; }
.adm__archivar:disabled { opacity: .5; }

.adm__verarchivo {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
}
.adm__verarchivo[aria-pressed="true"] {
  background: var(--cinta);
  border-color: var(--cinta);
  color: var(--cinta-ink);
}

/* El archivo se ve distinto de la lista viva, para que nadie confunda
   un pedido guardado con uno que hay que despachar hoy. */
.adm__lista--archivo .adm__pedido {
  background: var(--bg-soft);
  border-style: dashed;
}
.adm__lista--archivo .adm__pedido .adm__ped-head { background: transparent; }
/* ── Carga de imágenes ───────────────────────────────────────────────
   Un fondo que respira mientras llega la foto; si falla, una caja neutra con su descripción. */
.img-cargando { position: relative; }
.img-cargando::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--bg-soft) 30%, rgba(255, 255, 255, .7) 50%, var(--bg-soft) 70%) 0 0 / 220% 100%;
  animation: img-respira 1.3s linear infinite;
}
@keyframes img-respira { to { background-position: -220% 0; } }
.img-error { position: relative; min-height: 90px; background: var(--bg-soft); }
.img-error img { opacity: 0; }
.img-error::before {
  content: attr(data-alt);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;
  font: 500 11px/1.4 'DM Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .img-cargando::after { animation: none; background: var(--bg-soft); } }

/* ── Portada en el celular: el titular arriba y los frascos debajo, sobre el campo rojo ──
   (en dos columnas el texto quedaba en 155 px y el botón partido en dos renglones) */
@media (max-width: 860px) {
  .hero--solo .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 28px 0; }
  .hero--solo h1 { font-size: clamp(34px, 10.5vw, 52px); }
  .hero--solo .hero__sub { max-width: 40ch; }
  .hero--solo .hero__art--trio { max-width: 440px; margin-inline: auto; padding-bottom: 26px; }
  html.js .hero__campo, .hero__campo {
    left: 0; right: 0; width: 100%; top: auto; bottom: 0; height: 52%;
    transform: none; animation: none; will-change: auto;
  }
  .hero--solo .hero__actions .btn { white-space: nowrap; }
}

/* barra fija en el celular: dos fotos bastan y el precio se lee completo */
@media (max-width: 640px) {
  .buybar__thumbs picture:nth-child(n+3) { display: none; }
  .buybar__text b { font-size: 16px; white-space: nowrap; }
  .buybar__text span { display: none; }
  .buybar__info { gap: 10px; }
  .buybar__btn { padding-inline: 16px; font-size: 13px; }
}