/* ============================================================================
   BFREE OFICIAL — Sistema de diseño "Apothecary Editorial"
   Distribuidora JB · bfreeoficial.com
   ----------------------------------------------------------------------------
   Concepto: botica herbolaria de autor. Papel hueso cálido como lienzo,
   carmesí de marca como tinta de sello, oro del tapón del frasco como filete,
   verde botánico para lo natural. Tipografía editorial (Fraunces) con cuerpo
   humanista (Karla). Nada de degradados neón ni look de "suplemento milagro".
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* Superficies — papel */
  --paper:        #FAF6EF;
  --paper-2:      #F3EBDF;
  --paper-3:      #EADFCE;
  --paper-ink:    #FFFDF9;

  /* Tinta */
  --ink:          #221A15;
  --ink-soft:     #4A3D34;
  --ink-mute:     #7A6A5C;
  --ink-faint:    #A89684;

  /* Marca — carmesí (del frasco) */
  --red:          #D42B25;
  --red-deep:     #9E1B17;
  --red-dark:     #6B1210;
  --red-wash:     #FBEDEB;

  /* Oro — del tapón */
  --gold:         #B8912F;
  --gold-light:   #E0BE63;
  --gold-wash:    #FBF4E2;

  /* Botánico */
  --green:        #46603C;
  --green-light:  #7E9A6B;
  --green-wash:   #EFF3EA;

  /* Semáforo médico */
  --stop:         #B32218;
  --stop-wash:    #FBEBE9;
  --caution:      #9A6B12;
  --caution-wash: #FDF3DF;
  --go:           #3F6B3B;
  --go-wash:      #ECF3EA;

  /* Tipografía */
  --display: 'Fraunces', 'Georgia', serif;
  --body:    'Karla', -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Métrica */
  --measure:  68ch;
  --gut:      clamp(1.25rem, 4vw, 3rem);
  --shell:    min(1240px, 100% - (var(--gut) * 2));
  --rule:     1px solid rgba(34, 26, 21, .14);
  --rule-firm:1px solid rgba(34, 26, 21, .28);

  /* Sombra — suave, como papel sobre papel */
  --lift-1: 0 1px 2px rgba(34,26,21,.05), 0 4px 12px rgba(34,26,21,.05);
  --lift-2: 0 2px 6px rgba(34,26,21,.07), 0 12px 32px rgba(34,26,21,.08);
  --lift-3: 0 6px 18px rgba(34,26,21,.10), 0 24px 56px rgba(34,26,21,.11);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Textura de papel — grano sutil sobre todo el documento */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; height: auto; }
/* El atributo hidden debe ganarle a cualquier display de clase (.row, .prog…) */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--red); color: var(--paper); }

/* ── Tipografía ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.022em;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); letter-spacing: -.015em; }
h4 { font-size: 1.075rem; letter-spacing: -.008em; }

.serif-it { font-style: italic; font-variation-settings: 'SOFT' 60, 'WONK' 0; }

/* Eyebrow — etiqueta de sección tipo botica */
.eyebrow {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-deep);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--green { color: var(--green); }
.eyebrow--paper { color: rgba(250,246,239,.75); }

/* Numeral editorial grande */
.numeral {
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  font-style: italic;
  line-height: .8;
  color: var(--paper-3);
  font-variation-settings: 'SOFT' 80, 'WONK' 0;
}

.lede {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.prose p { color: var(--ink-soft); text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 700; }

/* ── Estructura ───────────────────────────────────────────────────────────── */
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; z-index: 2; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--paper2 { background: var(--paper-2); }
.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink p { color: rgba(250,246,239,.72); }

.rule { height: 1px; background: rgba(34,26,21,.14); border: 0; }

/* Encabezado de sección editorial */
.sec-head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 54ch;
}
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }

/* ── Navegación ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,246,239,.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: var(--rule);
  transition: box-shadow .3s ease, background .3s ease;
}
/* Filete de oro bajo la barra — detalle de etiqueta de botica */
.nav::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,145,47,.55), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}
/* Al despegarse del hero la barra gana cuerpo, en vez de quedar flotando plana */
.nav.is-stuck {
  background: rgba(250,246,239,.94);
  box-shadow: 0 6px 26px rgba(34,26,21,.09);
}
.nav.is-stuck::after { opacity: 1; }

.nav__in {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4.5rem;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
.brand__mark {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--red-deep);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
.brand__sub {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nav__links { display: flex; gap: 1.6rem; align-items: center; }
.nav__link {
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-block: .3rem;
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__link:hover { color: var(--red-deep); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--red-deep); }

.nav__toggle { display: none; padding: .5rem; margin-right: -.5rem; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  font-family: var(--body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 2px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  position: relative;
  white-space: nowrap;
}
.btn svg { flex-shrink: 0; }

.btn--primary {
  background: var(--red-deep);
  color: var(--paper);
  box-shadow: var(--lift-1), inset 0 0 0 1px var(--red-dark);
}
.btn--primary:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: var(--lift-2), inset 0 0 0 1px var(--red-dark);
}

.btn--ghost {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(34,26,21,.28);
}
.btn--ghost:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
  transform: translateY(-2px);
}

.btn--gold {
  background: var(--gold);
  color: #2A2008;
  box-shadow: var(--lift-1);
}
.btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: var(--lift-2); }

.btn--lg { padding: 1.05rem 2.1rem; font-size: .98rem; }
.btn--block { width: 100%; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  z-index: 2;
}
/* Halo cálido detrás del producto */
.hero::after {
  content: '';
  position: absolute;
  top: 12%; right: -8%;
  width: min(680px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,43,37,.10), rgba(212,43,37,0) 68%);
  pointer-events: none;
  z-index: -1;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em {
  font-style: italic;
  color: var(--red-deep);
  font-variation-settings: 'SOFT' 70, 'WONK' 0;
}
.hero__lede { margin-bottom: 2.25rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.25rem; }

/* Tira de credenciales */
/* Sellos de credibilidad — 4 en rejilla pareja, nunca uno huérfano en su fila.
   Cada uno es una viñeta de botica: grabado, cifra y leyenda. */
.creds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 2rem;
  background: rgba(34, 26, 21, .12);   /* hace de filete entre celdas */
  border: var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
@media (max-width: 900px) { .creds { grid-template-columns: repeat(2, 1fr); } }

.cred {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 1.35rem .75rem 1.25rem;
  text-align: center;
  background: var(--paper-ink);
  transition: background .35s ease, transform .35s ease;
  /* Entrada escalonada: cada sello hereda su propio --d */
  opacity: 0;
  transform: translateY(14px);
  animation: cred-in .7s cubic-bezier(.22,.8,.28,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes cred-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cred { animation: none; opacity: 1; transform: none; }
}

.cred:hover { background: var(--gold-wash); }

.cred__ico {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--ink-soft);
  transition: color .35s ease, transform .45s cubic-bezier(.22,.8,.28,1);
}
.cred__ico svg { width: 100%; height: 100%; overflow: visible; }

/* Los grabados se dibujan solos al entrar, como trazados a mano.
   Los elementos llevan pathLength="1" en el HTML: eso normaliza su longitud,
   así un trazo corto y uno largo tardan lo mismo. Con un dasharray fijo los
   cortos se completaban al instante y el efecto no se percibía.
   Los aros punteados usan stroke-dasharray para su textura y quedan excluidos. */
@media (prefers-reduced-motion: no-preference) {
  .cred__ico svg > [pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: cred-draw 1.5s cubic-bezier(.65,0,.35,1) forwards;
    animation-delay: calc(var(--d, 0s) + .25s);
  }
}
@keyframes cred-draw { to { stroke-dashoffset: 0; } }
/* Detalle que se tiñe de oro: estrella del laurel, ranura de la cápsula,
   centro del pin, líneas de movimiento del camión. */
.cred__accent { color: var(--gold); transition: color .35s ease; }

.cred:hover .cred__ico { color: var(--red-deep); transform: translateY(-3px) scale(1.06); }
.cred:hover .cred__accent { color: var(--gold-light); }

.cred__n {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--red-deep);
  font-variation-settings: 'SOFT' 30, 'WONK' 0;
  font-variant-numeric: tabular-nums;   /* el contador no baila al animar */
}
.cred__l {
  font-family: var(--mono);
  font-size: .61rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.45;
  max-width: 14ch;
}

/* Retrato del producto — marco de etiqueta de botica */
.shot { position: relative; perspective: 1400px; }
/* Capa de giro 3D enlazada al scroll — separada de .shot__img para no pelear
   con su animación `float` (cada una anima su propio transform). */
.shot__tilt {
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .shot__tilt { transform: none !important; }
}
.shot__frame {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: linear-gradient(168deg, var(--paper-ink), var(--paper-2));
  box-shadow: var(--lift-3);
  border-radius: 3px;
}
/* Doble filete de etiqueta */
.shot__frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(184,145,47,.5);
  border-radius: 2px;
  pointer-events: none;
}
.shot__frame::after {
  content: '';
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(184,145,47,.22);
  border-radius: 1px;
  pointer-events: none;
}
.shot__img {
  width: 100%;
  filter: drop-shadow(0 22px 34px rgba(34,26,21,.22));
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
/* Sello circular sobre el marco */
.stamp {
  position: absolute;
  top: -1.1rem; right: -1.1rem;
  width: 6.5rem; height: 6.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--red-deep);
  color: var(--paper);
  box-shadow: var(--lift-2);
  transform: rotate(-9deg);
  border: 1px dashed rgba(250,246,239,.5);
  z-index: 3;
}
.stamp span {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.35;
}
.stamp strong {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── Tira de confianza ────────────────────────────────────────────────────── */
.trust {
  background: var(--ink);
  color: var(--paper);
  padding-block: 1.15rem;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.trust__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 2.5rem;
}
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,246,239,.82);
}
.trust__item svg { color: var(--gold-light); flex-shrink: 0; }

/* ── Bloque problema (PAS) ────────────────────────────────────────────────── */
/* Siempre 4 tarjetas (ver index.html y modo-de-uso.html). 2 columnas fijas en
   vez de auto-fit: con auto-fit, a ciertos anchos caben 3 tracks y la 4ª
   tarjeta deja una celda vacía huérfana — como el contenedor pinta el fondo
   que hace de línea divisoria entre celdas, esa celda vacía se veía como un
   bloque gris enorme. Con 2 columnas fijas, 4 elementos siempre completan la
   rejilla (2×2), sin importar el ancho. */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(34,26,21,.14);
  border: var(--rule);
}
@media (max-width: 640px) {
  .pain-grid { grid-template-columns: 1fr; }
}
.pain {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: .7rem;
  align-content: start;
  transition: background .3s var(--ease);
}
.pain:hover { background: var(--paper-ink); }
.pain__n {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--red);
}
.pain h3 { font-size: 1.2rem; }
.pain p { font-size: .93rem; color: var(--ink-mute); line-height: 1.6; }
/* Respuesta del producto al dolor descrito arriba — cierra el par PAS dentro
   de la misma tarjeta para que el beneficio no quede a media pantalla. */
.pain__fix {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: var(--rule);
  color: var(--ink) !important;
}
.pain__fix strong { color: var(--red-deep); }

/* ── Tarjetas de beneficio ────────────────────────────────────────────────── */
.ben-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ben {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--paper-ink);
  border: var(--rule);
  border-radius: 3px;
  display: grid;
  gap: .85rem;
  align-content: start;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
  overflow: hidden;
}
.ben::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent, var(--red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease);
}
.ben:hover {
  transform: translateY(-5px);
  box-shadow: var(--lift-2);
  border-color: transparent;
}
.ben:hover::before { transform: scaleX(1); }
.ben__ico {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-wash, var(--red-wash));
  color: var(--accent, var(--red));
}
.ben h3 { font-size: 1.22rem; }
.ben p { font-size: .93rem; color: var(--ink-mute); line-height: 1.62; }

/* ── Ingredientes — fichas de botica ──────────────────────────────────────── */
.ing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}
.ing {
  background: var(--paper-ink);
  border: var(--rule);
  border-radius: 3px;
  padding: 1.6rem 1.5rem;
  display: grid;
  gap: .8rem;
  align-content: start;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ing:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
.ing__art {
  width: 4.5rem; height: 4.5rem;
  color: var(--green);
}
/* Mismo grabado-al-trazo que los sellos de credibilidad del home (.cred__ico),
   pero disparado desde JS (ver main.js, junto al IntersectionObserver del
   reveal) en vez de CSS puro: una regla `.rv.in .ing__art > [pathLength] {
   animation: ... }` — idéntica a la que sí funciona en .cred__ico — no
   arrancaba en este selector pese a especificidad y sintaxis correctas
   (verificado con matchMedia/scroll-behavior que no era reduced-motion, y que
   la misma regla inyectada en un <style> nuevo sí corría). Con Web Animations
   API (`el.animate()`) el resultado es idéntico y no depende de ese misterio
   de cascada. Este bloque solo define el estado inicial oculto. */
.ing__art > [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ing__art > [pathLength] { stroke-dashoffset: 0; }
}
.ing__name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.ing__role {
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
}
.ing p { font-size: .9rem; color: var(--ink-mute); line-height: 1.6; }

/* ── Compatibilidad médica ────────────────────────────────────────────────── */
.med {
  background: var(--paper-ink);
  border: var(--rule-firm);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--lift-1);
}
.med__head {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-2);
  border-bottom: var(--rule-firm);
}
.med__body { padding: clamp(1.5rem, 3vw, 2.25rem); }

.med__label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .9rem;
}

/* Chips de condición */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .95rem;
  font-size: .84rem;
  font-weight: 600;
  border-radius: 100px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(34,26,21,.2);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), opacity .22s var(--ease);
  text-align: left;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); transform: translateY(-1px); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.chip[aria-pressed="true"] .chip__dot { background: var(--gold-light); }
.chip__dot {
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background .22s var(--ease);
  flex-shrink: 0;
}

/* Veredicto */
.verdict {
  margin-top: 1.5rem;
  border-radius: 3px;
  padding: 1.4rem 1.5rem;
  border-left: 4px solid var(--v-color, var(--ink-faint));
  background: var(--v-wash, var(--paper-2));
  animation: rise .4s var(--ease);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.verdict__top {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .6rem;
}
.verdict__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-color, var(--ink));
}
.verdict h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.verdict p { font-size: .93rem; color: var(--ink-soft); line-height: 1.62; }
.verdict ul { margin: .8rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.verdict li { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }
.verdict li strong { color: var(--ink); }

/* Tabla de referencia — min-width la obliga a desbordar en móvil, así que
   necesita avisar que se puede deslizar o parece que la página quedó cortada. */
.tbl-scroll-hint {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tbl-scroll-hint svg { color: var(--gold); animation: tbl-hint-slide 1.6s ease-in-out infinite; }
@keyframes tbl-hint-slide {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50%      { transform: translateX(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tbl-scroll-hint svg { animation: none; }
}

.tbl-wrap {
  --tbl-fade: var(--paper);   /* se sobreescribe según el fondo de la sección */
  overflow-x: auto;
  margin-top: 2rem;
  -webkit-overflow-scrolling: touch;
  /* Sombra de desliz sin JS: dos gradientes "cubren" el borde con el color de
     fondo y viajan CON el contenido (background-attachment: local) — se
     ocultan solos al llegar al principio o al final. Otros dos, fijos al
     contenedor (attachment: scroll), pintan la sombra que se ve debajo.
     Truco estándar de scroll-shadows en CSS puro. */
  background:
    linear-gradient(to right, var(--tbl-fade) 40%, transparent) 0 0 / 40px 100% local,
    linear-gradient(to left, var(--tbl-fade) 40%, transparent) 100% 0 / 40px 100% local,
    linear-gradient(to right, rgba(34,26,21,.16), transparent) 0 0 / 16px 100% scroll,
    linear-gradient(to left, rgba(34,26,21,.16), transparent) 100% 0 / 16px 100% scroll;
  background-repeat: no-repeat;
}
.section--paper2 .tbl-wrap { --tbl-fade: var(--paper-2); }
.section--ink .tbl-wrap    { --tbl-fade: var(--ink); }
@media (max-width: 720px) {
  .tbl-scroll-hint { display: flex; }
}
.tbl {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .9rem;
}
.tbl th, .tbl td {
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: var(--rule);
  vertical-align: top;
}
.tbl thead th {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: var(--rule-firm);
  white-space: nowrap;
}
.tbl tbody tr { transition: background .2s var(--ease); }
.tbl tbody tr:hover { background: var(--paper-2); }
.tbl td:first-child { font-weight: 600; }
.tbl td small { display: block; color: var(--ink-mute); font-size: .82rem; margin-top: .2rem; line-height: 1.5; }

.flag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .6rem;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.flag--stop    { background: var(--stop-wash);    color: var(--stop); }
.flag--caution { background: var(--caution-wash); color: var(--caution); }
.flag--go      { background: var(--go-wash);      color: var(--go); }

/* Aviso médico */
.disclaimer {
  margin-top: 1.75rem;
  padding: 1.15rem 1.35rem;
  background: var(--paper-2);
  border-left: 3px solid var(--ink-faint);
  border-radius: 2px;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.disclaimer svg { color: var(--ink-mute); flex-shrink: 0; margin-top: .15rem; }
.disclaimer p { font-size: .86rem; color: var(--ink-mute); line-height: 1.6; }
.disclaimer strong { color: var(--ink-soft); }

/* ── Calculadora ──────────────────────────────────────────────────────────── */
.calc {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--paper-ink);
  border: var(--rule-firm);
  border-radius: 4px;
  padding: clamp(1.6rem, 4vw, 2.75rem);
  box-shadow: var(--lift-1);
}
.calc__qty {
  font-family: var(--display);
  font-size: clamp(3.4rem, 9vw, 5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--red-deep);
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
}
.calc__unit {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: .5rem;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--red-deep) var(--pct,10%), var(--paper-3) var(--pct,10%));
  outline: none;
  margin-block: 1.5rem 1rem;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--paper-ink);
  border: 2px solid var(--red-deep);
  box-shadow: var(--lift-1);
  cursor: grab;
  transition: transform .18s var(--ease);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.14); }
.slider::-moz-range-thumb {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--paper-ink);
  border: 2px solid var(--red-deep);
  cursor: grab;
}
.presets { display: flex; flex-wrap: wrap; gap: .45rem; }
.preset {
  padding: .45rem .85rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .05em;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(34,26,21,.2);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.preset:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.preset[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }

.calc__out { display: grid; gap: .1rem; align-content: center; }
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .8rem;
  border-bottom: var(--rule);
}
.row__k { font-size: .88rem; color: var(--ink-mute); }
.row__v { font-family: var(--mono); font-size: .95rem; font-weight: 500; }
.row--total { border-bottom: 0; padding-top: 1.1rem; }
.row--total .row__k { font-weight: 700; color: var(--ink); font-size: .95rem; }
.row--total .row__v {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--red-deep);
}
.free {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}
.save {
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: var(--green-wash);
  border-radius: 2px;
  font-size: .84rem;
  color: var(--green);
  font-weight: 600;
  text-align: center;
}
.calc .btn { margin-top: 1.25rem; }

/* Selector de método de pago dentro de la calculadora */
.pay-pick {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.1rem;
  padding: .25rem;
  background: var(--paper-2);
  border-radius: 3px;
}
.pay-btn {
  flex: 1;
  padding: .6rem .5rem;
  border-radius: 2px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-mute);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.pay-btn small {
  display: block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: .15rem;
}
.pay-btn[aria-pressed="true"] {
  background: var(--paper-ink);
  color: var(--ink);
  box-shadow: var(--lift-1);
}

/* Progreso hacia el envío gratis */
.prog { margin-top: 1.25rem; }
.prog__txt {
  font-size: .82rem;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.prog__txt strong { color: var(--green); }
.prog__rail {
  height: 5px;
  border-radius: 3px;
  background: var(--paper-3);
  overflow: hidden;
}
.prog__bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green-light), var(--green));
  transition: width .45s var(--ease);
}

/* Barra de compra fija (móvil) */
.sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  align-items: center;
  gap: .75rem;
  padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(250,246,239,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: var(--rule-firm);
  box-shadow: 0 -4px 18px rgba(34,26,21,.09);
  transform: translateY(110%);
  transition: transform .32s var(--ease);
}
.sticky.show { transform: none; }
.sticky__info { display: grid; gap: .05rem; flex: 1; min-width: 0; }
.sticky__lbl {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sticky__val {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* width: auto explícito: a 560px hay una regla `.btn { width: 100% }` pensada
   para los CTA grandes de fondo de página (sí deben ir a ancho completo), pero
   sin acotar alcanza también a este botón — lo estiraba a ~350px y dejaba en
   0 el espacio para "Tu pedido · $X" a su izquierda. La especificidad de
   `.sticky .btn` (2 clases) ya le gana a `.btn` sola (1 clase), así que basta
   con volver a poner el ancho automático aquí. */
.sticky .btn { padding: .75rem 1.15rem; font-size: .84rem; flex-shrink: 0; width: auto; }
@media (max-width: 780px) {
  .sticky { display: flex; }
  /* El padding reservado tiene que crecer con la misma env(safe-area-inset-bottom)
     que ya usa .sticky arriba — si no, en cualquier iPhone o Android con barra
     de gestos la franja inferior real es más alta que lo reservado, y la barra
     tapa la última línea del contenido justo antes de ella. */
  body { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
}

/* Garantía */
.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.35rem;
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--green-wash);
  border: 1px solid rgba(70,96,60,.22);
  border-radius: 4px;
}
.guarantee__ico {
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-ink);
  color: var(--green);
  box-shadow: var(--lift-1);
}
.guarantee h3 { font-size: 1.3rem; margin-bottom: .5rem; color: var(--green); }
.guarantee p { font-size: .95rem; color: var(--ink-soft); line-height: 1.62; }
.guarantee p + p { margin-top: .6rem; }

/* Ficha legal / autoría (E-E-A-T) */
.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--rule);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* ── Pasos ────────────────────────────────────────────────────────────────── */
.steps { display: grid; gap: 1px; background: rgba(34,26,21,.14); border: var(--rule); }
.step {
  background: var(--paper);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}
.step__n {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 300;
  font-style: italic;
  line-height: .9;
  color: var(--gold);
  font-variation-settings: 'SOFT' 80, 'WONK' 0;
  min-width: 2ch;
}
.step h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.step p { font-size: .93rem; color: var(--ink-mute); line-height: 1.6; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { border-top: var(--rule); }
.faq__item { border-bottom: var(--rule); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -.012em;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--red-deep); }
.faq__sign {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--red-deep);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.faq__q[aria-expanded="true"] .faq__sign { transform: rotate(45deg); background: var(--red-deep); color: var(--paper); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.4rem; color: var(--ink-soft); font-size: .96rem; max-width: 62ch; }
.faq__a a { color: var(--red-deep); text-underline-offset: 3px; }

/* ── Banner decorativo ────────────────────────────────────────────────────── */
.banner {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--red);
}
.banner img { width: 100%; display: block; }

/* ── CTA final ────────────────────────────────────────────────────────────── */
.cta {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(900px, 120vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,43,37,.24), transparent 66%);
  pointer-events: none;
}
.cta__in { position: relative; }
.cta h2 { margin-bottom: 1.1rem; }
.cta h2 em { font-style: italic; color: var(--gold-light); }
.cta p { max-width: 50ch; margin-inline: auto; margin-bottom: 2.25rem; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: rgba(250,246,239,.62);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  border-top: 1px solid rgba(250,246,239,.1);
  position: relative;
  z-index: 2;
  font-size: .88rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(250,246,239,.1);
}
.foot h4 {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.foot ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.foot a { text-decoration: none; transition: color .2s var(--ease); }
.foot a:hover { color: var(--paper); }
.foot__brand .brand__mark { color: var(--paper); }
.foot__brand p { margin-top: .9rem; max-width: 34ch; line-height: 1.6; }
.foot__legal {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  font-size: .78rem;
  color: rgba(250,246,239,.45);
}

/* WhatsApp flotante */
.wa {
  position: fixed;
  right: 1.15rem; bottom: 1.15rem;
  z-index: 90;
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37,211,102,.4);
  transition: transform .25s var(--ease);
}
.wa:hover { transform: scale(1.08); }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.crumb {
  padding-block: 1.25rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--ink-mute);
  border-bottom: var(--rule);
}
.crumb a { text-decoration: none; transition: color .2s var(--ease); }
.crumb a:hover { color: var(--red-deep); }
.crumb span { margin-inline: .5rem; opacity: .5; }

/* Encabezado de página interior */
.phead { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.phead h1 { margin-block: 1.25rem .9rem; }
.phead h1 em { font-style: italic; color: var(--red-deep); }

/* ── Reveal al hacer scroll ───────────────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv.in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* El menú horizontal deja de caber alrededor de los 940px (6 items + marca),
   así que el hamburguesa entra en el mismo breakpoint que el resto del layout. */
@media (max-width: 940px) {
  .hero__grid, .calc { grid-template-columns: 1fr; }
  .hero__grid { gap: 3rem; }
  .shot { order: -1; max-width: 420px; margin-inline: auto; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }

  .nav__links {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: var(--rule-firm);
    padding: .5rem var(--gut) 1.25rem;
    box-shadow: var(--lift-2);
    display: none;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }
  .nav__links.open { display: flex; }
  .nav__link { padding: .8rem 0; border-bottom: var(--rule); font-size: .95rem; }
  .nav__link::after { display: none; }
  .nav__links .btn { margin-top: .9rem; }
  .nav__toggle { display: grid; place-items: center; }
}

@media (max-width: 780px) {
  .stamp { width: 5.2rem; height: 5.2rem; top: -.7rem; right: -.5rem; }
  .stamp strong { font-size: 1.2rem; }
}

@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .creds { gap: 1.1rem 1.75rem; }
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .btn { width: 100%; }
  .hero__cta .btn { width: 100%; }
}

/* ── Accesibilidad ────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  z-index: 999;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}

@media print {
  .nav, .wa, .cta, .banner { display: none; }
  body { background: #fff; }
}