/**
 * Klivanta — Sales page "Come Bien con Poco" (Page ID 8).
 *
 * Se carga DESPUÉS de klivanta-landing.css y reutiliza sus tokens, su reset y
 * sus componentes base (.k-wrap, .k-btn, .k-h1/.k-h2, .k-kicker, .k-pain...).
 *
 * Todo lo de este archivo está scopeado bajo `body.k-page-sales` a propósito:
 * /guia-gratis/ comparte template y hoja base, así que el aislamiento evita
 * cualquier regresión en esa página. No mover reglas fuera del scope.
 */

body.k-page-sales{
  /* Paleta oficial de CLAUDE.md, fijada aquí para no depender de las variables
     históricas de klivanta-landing.css (que difieren en 1-2 puntos de HEX). */
  --s-cream:#F7F1E6;
  --s-terracotta:#B5502F;
  --s-olive:#6B7A4A;
  --s-amber:#E8A33D;
  --s-ink:#2E2A2A;

  --s-paper:#FFFFFF;
  --s-ivory:#FCFAF6;
  --s-line:#E2D9C8;

  /* Variantes oscurecidas de la paleta, sólo para texto pequeño.
     Terracota, oliva y ámbar en 11-15px se quedaban entre 2.2:1 y 4.5:1 sobre
     crema o blanco. Los fondos, botones y titulares grandes siguen usando los
     HEX oficiales de CLAUDE.md; esto es únicamente el ajuste mínimo para que
     las etiquetas pequeñas lleguen a AA. */
  --s-muted:#5F5A55;          /* antes #6B6560 */
  --s-olive-text:#55643A;     /* legible del oliva #6B7A4A */
  --s-terracotta-text:#9E4326;/* legible del terracota #B5502F */
  --s-amber-text:#8C5E14;     /* legible del ámbar #E8A33D */

  --s-radius:16px;
  --s-radius-lg:24px;
}

/* GenerateBlocks añade 40px de padding lateral en .gb-inside-container; el
   espaciado horizontal ya lo controla .k-wrap, así que lo neutralizamos (mismo
   criterio que en guia-gratis). */
body.k-page-sales .gb-inside-container{ padding-left:0; padding-right:0; }

/* ---------- CTA en ámbar oficial ----------
   klivanta-landing.css pinta .k-topbar/.k-hero/.k-offer-card/.k-cta-band
   .k-btn-amber en terracota (--k-terra-dark). Esa fue una decisión puntual de
   guia-gratis que quedó en selectores sin scope. En la sales page el CTA va en
   el ámbar de la paleta oficial, así que lo devolvemos aquí.
   Los selectores son compuestos (.k-btn.k-btn-amber) a propósito: hace falta
   ganarle tanto a esas reglas como al reset `a{color:inherit}`. */
body.k-page-sales .k-topbar .k-btn.k-btn-amber,
body.k-page-sales .k-hero .k-btn.k-btn-amber,
body.k-page-sales .s-offer-card .k-btn.k-btn-amber,
body.k-page-sales .s-close .k-btn.k-btn-amber,
body.k-page-sales .s-sticky .k-btn.k-btn-amber{
  background:var(--s-amber); color:var(--s-ink);
  box-shadow:0 8px 20px rgba(232,163,61,.34);
}
body.k-page-sales .k-topbar .k-btn.k-btn-amber:hover,
body.k-page-sales .k-hero .k-btn.k-btn-amber:hover,
body.k-page-sales .s-offer-card .k-btn.k-btn-amber:hover,
body.k-page-sales .s-close .k-btn.k-btn-amber:hover,
body.k-page-sales .s-sticky .k-btn.k-btn-amber:hover{
  background:#D9942F; color:var(--s-ink); filter:none;
  box-shadow:0 12px 26px rgba(232,163,61,.42);
}
body.k-page-sales .k-btn:focus-visible{ outline:3px solid var(--s-ink); outline-offset:3px; }

/* El kicker base es inline-flex: en mobile eso deja "COME BIEN CON POCO" y
   "SISTEMA 4×4™" como dos columnas que se parten por dentro. Como texto
   corrido fluye y corta donde toca. */
body.k-page-sales .k-kicker{ display:block; color:var(--s-terracotta-text); }
body.k-page-sales .k-kicker .sep{ margin:0 4px; color:var(--s-olive-text); }

/* Áreas táctiles del footer y del logo compartidos: a 17-20px de alto quedan
   por debajo del mínimo de 44px. Se corrige sólo en esta página para no
   alterar /guia-gratis/. */
body.k-page-sales .k-footer-links a{ padding:12px 0; }
body.k-page-sales .k-footer-legal a{ display:inline-block; padding:14px 4px; }
body.k-page-sales .k-logo{ padding:8px 0; }

body.k-page-sales .k-section{ padding:clamp(52px,7vw,88px) 0; }
body.k-page-sales .k-h2{ color:var(--s-ink); }

/* Ancho de lectura: ningún párrafo debe pasar de ~68 caracteres. */
body.k-page-sales .k-lead-copy{
  max-width:62ch;
  font-family:var(--font-body);
  font-size:clamp(17px,1.75vw,19px);
  line-height:1.68;
  color:var(--s-muted);
}

/* Encabezado de sección reutilizable */
body.k-page-sales .s-head{ max-width:720px; margin:0 0 clamp(28px,4vw,44px); }
body.k-page-sales .s-head.is-center{ margin-left:auto; margin-right:auto; text-align:center; }
body.k-page-sales .s-head .k-kicker{ color:var(--s-terracotta-text); }
body.k-page-sales .s-head p{ margin:12px 0 0; }

/* ==========================================================================
   S1 · HERO
   ========================================================================== */
body.k-page-sales .k-hero{
  background:linear-gradient(180deg,var(--s-ivory) 0%,var(--s-cream) 100%);
  padding:clamp(40px,6vw,72px) 0 clamp(48px,7vw,84px);
}
/* La columna del bundle pesa algo más que la del copy: le da presencia sin
   quitarle sitio al H1, que sigue mandando en la mitad izquierda. */
body.k-page-sales .k-hero-inner{
  display:grid; grid-template-columns:1fr 1.14fr;
  gap:clamp(26px,3vw,42px); align-items:center;
}
body.k-page-sales .k-hero-inner > *{ min-width:0; }
body.k-page-sales .k-hero .k-h1{
  font-size:clamp(30px,4.6vw,50px); line-height:1.1;
  color:var(--s-ink); margin:16px 0 18px;
}
body.k-page-sales .k-hero .k-h1 em{ font-style:normal; color:var(--s-terracotta); }
body.k-page-sales .k-hero-sub{
  font-family:var(--font-body); font-size:clamp(17px,1.8vw,19px);
  line-height:1.65; color:var(--s-muted); max-width:56ch; margin:0 0 22px;
}

body.k-page-sales .s-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; }
body.k-page-sales .s-chips li{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--s-paper); border:1px solid var(--s-line);
  border-radius:999px; padding:8px 14px;
  font-family:var(--font-body); font-size:15px; color:var(--s-ink);
}
body.k-page-sales .s-chips .k-icon{ width:14px; height:14px; color:var(--s-olive); }

/* Bloque de precio del hero */
body.k-page-sales .s-price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 14px;
  margin:0 0 20px;
}
body.k-page-sales .s-price-old{
  font-family:var(--font-display); font-weight:600; font-size:18px;
  color:var(--s-muted); text-decoration:line-through;
  text-decoration-thickness:1.5px;
}
body.k-page-sales .s-price-new{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px,4vw,42px); line-height:1; color:var(--s-ink);
}
body.k-page-sales .s-installments{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--s-terracotta-text);
}
body.k-page-sales .s-price-tag{
  display:inline-block; width:100%;
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--s-olive-text);
  margin-bottom:4px;
}
body.k-page-sales .k-hero-cta{ align-items:flex-start; }
body.k-page-sales .k-hero-note{ font-size:15px; color:var(--s-muted); }

/* El hero muestra el bundle de los tres entregables. Es una imagen apaisada
   con fondo transparente y sus propias sombras, así que hay que anular el
   radio y la sombra que klivanta-landing.css aplica a .k-hero-photo img: sobre
   un PNG/WebP transparente esa sombra dibuja un panel rectangular detrás. */
body.k-page-sales .k-hero-photo img{
  width:100%; max-width:680px; height:auto; margin:0 auto;
  border-radius:0; box-shadow:none;
}

/* ==========================================================================
   S2 · PROBLEMA
   ========================================================================== */
body.k-page-sales .k-pain{ background:var(--s-paper); }

/* La sección vivía pegada al borde izquierdo del contenedor de 1140px y en
   desktop se sentía descolgada. Ahora la columna se centra y el encabezado
   se alinea al centro; los tres problemas se quedan alineados a la izquierda
   porque son filas de lista y centrarlas costaría lectura. */
body.k-page-sales .k-pain-head{ max-width:660px; margin-left:auto; margin-right:auto; text-align:center; }
body.k-page-sales .k-pain-head .k-lead-copy{ margin-left:auto; margin-right:auto; }
body.k-page-sales .k-pain-list{ max-width:720px; margin:0 auto; gap:2px; }
body.k-page-sales .k-pain-item{
  background:transparent; border:none; border-top:1px solid var(--s-line);
  border-radius:0; padding:18px 0; align-items:flex-start;
}
body.k-page-sales .k-pain-list .k-pain-item:last-child{ border-bottom:1px solid var(--s-line); }
body.k-page-sales .k-pain-item .dot{
  background:transparent; color:var(--s-terracotta);
  width:auto; height:auto; margin-top:3px;
}
body.k-page-sales .k-pain-item .dot .k-icon{ width:17px; height:17px; }
body.k-page-sales .k-pain-item p{ font-size:18px; line-height:1.55; color:var(--s-ink); }
body.k-page-sales .k-pain-close{
  max-width:60ch; margin:32px auto 0; text-align:center;
  font-size:17.5px; line-height:1.62; color:var(--s-muted);
}

/* ==========================================================================
   S3 · SISTEMA 4×4™
   ========================================================================== */
body.k-page-sales .s-method{ background:var(--s-cream); }

body.k-page-sales .s-bases{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 18px; padding:0;
}
body.k-page-sales .s-bases > li{
  background:var(--s-paper); border:1px solid var(--s-line);
  border-radius:var(--s-radius); padding:20px 18px;
}
body.k-page-sales .s-bases .s-num{
  display:block; font-family:var(--font-display); font-weight:800; font-size:12px;
  letter-spacing:1.2px; color:var(--s-amber-text); margin-bottom:8px;
}
body.k-page-sales .s-bases b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:17.5px; color:var(--s-ink); margin-bottom:6px;
}
body.k-page-sales .s-bases span.s-desc{ font-size:15px; line-height:1.5; color:var(--s-muted); }

body.k-page-sales .s-giros{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 32px; padding:0;
}
body.k-page-sales .s-giros > li{
  background:transparent; border:1px dashed var(--s-line);
  border-radius:var(--s-radius); padding:18px;
}
body.k-page-sales .s-giros b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:16.5px; color:var(--s-terracotta-text); margin-bottom:6px;
}
body.k-page-sales .s-giros span.s-desc{ font-size:14.5px; line-height:1.5; color:var(--s-muted); }

/* Fórmula */
body.k-page-sales .s-formula{
  background:var(--s-ink); color:#fff;
  border-radius:var(--s-radius-lg); padding:clamp(26px,4vw,40px);
  margin:0 0 32px; text-align:center;
}
body.k-page-sales .s-formula .k-kicker{ color:var(--s-amber); text-align:center; }
body.k-page-sales .s-formula-line{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(17px,2.4vw,26px); line-height:1.4; margin:14px 0 0;
}
body.k-page-sales .s-formula-line em{ font-style:normal; color:var(--s-amber); }
body.k-page-sales .s-formula-line + .s-formula-line{ margin-top:8px; }

/* Ruta 01-04 */
body.k-page-sales .s-route{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 26px; padding:0;
  counter-reset:step;
}
body.k-page-sales .s-route > li{ padding-top:16px; border-top:2px solid var(--s-amber); }
body.k-page-sales .s-route .s-num{
  display:block; font-family:var(--font-display); font-weight:800; font-size:12px;
  letter-spacing:1.2px; color:var(--s-muted); margin-bottom:6px;
}
body.k-page-sales .s-route b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:17.5px; color:var(--s-ink); margin-bottom:6px;
}
body.k-page-sales .s-route span.s-desc{ font-size:15px; line-height:1.5; color:var(--s-muted); }

body.k-page-sales .s-note{
  border-left:3px solid var(--s-olive); padding:4px 0 4px 16px;
  font-size:16.5px; line-height:1.62; color:var(--s-muted); max-width:62ch; margin:0;
}

/* ==========================================================================
   S4 · PRUEBA DE PRODUCTO
   ========================================================================== */
body.k-page-sales .s-proof{ background:var(--s-paper); }

/* Toda la prueba de producto se compone como una columna editorial centrada:
   encabezado, intro, ficha de receta y antetítulo del carrusel comparten el
   mismo eje. El carrusel sí ocupa el ancho completo, que es lo que le da aire
   a la sección sin robarle protagonismo a la receta. */
body.k-page-sales .s-proof .s-head{ margin-left:auto; margin-right:auto; text-align:center; }
body.k-page-sales .s-proof .s-head .k-lead-copy{ margin-left:auto; margin-right:auto; }
body.k-page-sales .s-pages-head{ margin-left:auto; margin-right:auto; max-width:760px; text-align:center; }

/* Ficha de receta — HTML real, no imagen (indexable y legible) */
body.k-page-sales .s-recipe{
  background:var(--s-ivory); border:1px solid var(--s-line);
  border-radius:var(--s-radius-lg); overflow:hidden;
  max-width:920px; margin-left:auto; margin-right:auto;
}
body.k-page-sales .s-recipe-top{
  background:var(--s-cream); padding:clamp(22px,3vw,30px) clamp(20px,3vw,34px);
  border-bottom:1px solid var(--s-line);
}
body.k-page-sales .s-recipe-tag{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:#fff; background:var(--s-terracotta);
  border-radius:999px; padding:5px 12px; margin-bottom:12px;
}
body.k-page-sales .s-recipe-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(21px,2.8vw,28px); line-height:1.2; color:var(--s-ink); margin:0 0 8px;
}
body.k-page-sales .s-recipe-desc{ font-size:16.5px; line-height:1.58; color:var(--s-muted); margin:0; max-width:58ch; }

body.k-page-sales .s-recipe-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--s-line); border-bottom:1px solid var(--s-line);
}
body.k-page-sales .s-recipe-meta > div{ background:var(--s-ivory); padding:14px 16px; text-align:center; }
body.k-page-sales .s-recipe-meta .l{
  display:block; font-size:11.5px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--s-muted); margin-bottom:4px;
}
body.k-page-sales .s-recipe-meta .v{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:15.5px; color:var(--s-ink);
}

body.k-page-sales .s-recipe-cols{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(24px,4vw,44px); padding:clamp(24px,3.5vw,34px);
}
body.k-page-sales .s-recipe-cols > *{ min-width:0; }
body.k-page-sales .s-colh{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--s-olive-text);
  margin:0 0 16px; padding-bottom:9px; border-bottom:1px solid var(--s-line);
}
body.k-page-sales .s-ing{ display:grid; gap:9px; margin:0; padding:0; }
body.k-page-sales .s-ing li{
  font-size:16px; line-height:1.5; color:var(--s-ink);
  padding-left:16px; position:relative;
}
body.k-page-sales .s-ing li:before{
  content:""; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--s-amber);
}
body.k-page-sales .s-steps{ display:grid; gap:14px; margin:0; padding:0; counter-reset:s; }
body.k-page-sales .s-steps li{
  display:flex; gap:13px; font-size:16px; line-height:1.55; color:var(--s-ink);
}
body.k-page-sales .s-steps li:before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--s-olive); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
body.k-page-sales .s-recipe-tip{
  display:flex; gap:12px; align-items:flex-start;
  margin:0 clamp(24px,3.5vw,34px) clamp(24px,3.5vw,34px);
  background:#DDE4D1; border-radius:var(--s-radius); padding:16px 18px;
}
body.k-page-sales .s-recipe-tip .k-icon{ width:19px; height:19px; color:var(--s-olive); margin-top:1px; }
body.k-page-sales .s-recipe-tip p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--s-ink); }
body.k-page-sales .s-recipe-tip b{ font-family:var(--font-display); }

body.k-page-sales .s-source{
  font-size:14.5px; color:var(--s-muted); margin:18px auto 0;
  max-width:62ch; text-align:center;
}

/* Carrusel de páginas reales */
body.k-page-sales .s-pages-head{ margin-top:clamp(48px,6vw,68px); margin-bottom:22px; }
body.k-page-sales .s-pages{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,275px);
  gap:20px; margin:0; padding:4px 0 18px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  /* El scroll horizontal vive AQUÍ, nunca en el body. */
  overscroll-behavior-x:contain;
}
body.k-page-sales .s-pages > li{ scroll-snap-align:start; }
body.k-page-sales .s-pages figure{ margin:0; }
body.k-page-sales .s-pages img{
  width:100%; height:auto; display:block;
  border:1px solid var(--s-line); border-radius:10px;
  box-shadow:0 14px 30px -14px rgba(46,42,42,.28);
  background:var(--s-paper);
}
body.k-page-sales .s-pages figcaption{
  margin-top:12px; font-size:15px; line-height:1.55; color:var(--s-muted);
}
body.k-page-sales .s-pages figcaption b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:15.5px; color:var(--s-ink); margin-bottom:4px;
}
body.k-page-sales .s-scroll-hint{
  font-size:14px; color:var(--s-muted); margin:0; display:none;
}

/* ==========================================================================
   S5 · QUÉ RECIBES
   ========================================================================== */
body.k-page-sales .s-deliver{ background:var(--s-cream); }
body.k-page-sales .s-items{ display:grid; gap:18px; margin:0 0 18px; padding:0; }
/* Card en tres zonas: icono, texto y portada real del entregable a la derecha.
   La portada ocupa las dos filas y se centra verticalmente, así el card no
   crece de alto por incluirla. */
body.k-page-sales .s-item{
  display:grid;
  grid-template-columns:56px 1fr 176px;
  grid-template-areas:
    "icon head cover"
    "icon desc cover";
  column-gap:22px; row-gap:10px; align-items:start;
  background:var(--s-paper); border:1px solid var(--s-line);
  border-radius:var(--s-radius); padding:clamp(20px,3vw,28px);
}
body.k-page-sales .s-item > *{ min-width:0; }
body.k-page-sales .s-item-icon{ grid-area:icon; }
body.k-page-sales .s-item-head{ grid-area:head; }
body.k-page-sales .s-item-desc{ grid-area:desc; }
body.k-page-sales .s-item-cover{
  grid-area:cover; align-self:center; margin:0;
}
body.k-page-sales .s-item-cover img{
  display:block; width:100%; height:auto;
  border-radius:6px; border:1px solid var(--s-line);
  box-shadow:0 12px 26px -12px rgba(46,42,42,.32);
}
body.k-page-sales .s-item-icon{
  width:56px; height:56px; border-radius:14px;
  background:var(--s-cream); color:var(--s-terracotta);
  display:flex; align-items:center; justify-content:center;
}
body.k-page-sales .s-item-icon .k-icon{ width:24px; height:24px; }
body.k-page-sales .s-item h3{
  font-family:var(--font-display); font-weight:800; font-size:clamp(17px,2vw,20px);
  color:var(--s-ink); margin:0 0 4px; line-height:1.25;
}
body.k-page-sales .s-item-sub{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--s-muted); margin:0 0 12px;
}
body.k-page-sales .s-item p.s-item-desc{
  margin:0; font-size:16.5px; line-height:1.65; color:var(--s-muted); max-width:64ch;
}
body.k-page-sales .s-badge{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:11.5px; letter-spacing:1.1px; text-transform:uppercase;
  background:var(--s-amber); color:var(--s-ink);
  border-radius:999px; padding:4px 10px; margin-left:8px; vertical-align:3px;
}

/* Comparativa lead magnet vs producto */
body.k-page-sales .s-vs-head{ margin:clamp(40px,5vw,56px) 0 20px; max-width:720px; }
body.k-page-sales .s-vs{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0; padding:0;
}
body.k-page-sales .s-vs > li{
  background:var(--s-paper); border:1px solid var(--s-line);
  border-radius:var(--s-radius); padding:clamp(20px,3vw,28px);
}
body.k-page-sales .s-vs > li.is-paid{ border-color:var(--s-olive); border-width:2px; }
body.k-page-sales .s-vs h4{
  font-family:var(--font-display); font-weight:800; font-size:18.5px;
  color:var(--s-ink); margin:0 0 2px;
}
body.k-page-sales .s-vs .s-vs-role{
  font-size:14.5px; color:var(--s-muted); margin:0 0 16px;
  padding-bottom:14px; border-bottom:1px solid var(--s-line);
}
body.k-page-sales .s-vs ul{ display:grid; gap:10px; margin:0; padding:0; }
body.k-page-sales .s-vs ul li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:16px; line-height:1.5; color:var(--s-ink);
}
body.k-page-sales .s-vs ul .k-icon{ width:16px; height:16px; flex:none; margin-top:3px; }
body.k-page-sales .s-vs .is-free ul .k-icon{ color:var(--s-muted); }
body.k-page-sales .s-vs .is-paid ul .k-icon{ color:var(--s-olive); }
body.k-page-sales .s-vs-close{
  margin:22px 0 0; font-size:17.5px; line-height:1.62; color:var(--s-ink); max-width:62ch;
}

/* ==========================================================================
   S6 · OFERTA
   ========================================================================== */
body.k-page-sales .s-offer{
  background:linear-gradient(135deg,#55643A 0%,#74815A 100%);
}
/* El bundle gana algo de ancho, pero la tarjeta conserva el suyo: el precio y
   el botón siguen siendo el foco de conversión. */
body.k-page-sales .s-offer-grid{
  display:grid; grid-template-columns:1.16fr .84fr;
  gap:clamp(26px,2.6vw,36px); align-items:center;
}
body.k-page-sales .s-offer-grid > *{ min-width:0; }
/* El bundle es apaisado y ya trae sus propias sombras y fondo transparente:
   ni recuadro, ni radio, ni sombra adicional. */
body.k-page-sales .s-offer-photo img{
  width:100%; max-width:680px; height:auto; display:block; margin:0 auto;
}
body.k-page-sales .s-offer-card{
  background:var(--s-paper); border:1px solid var(--s-line);
  border-radius:var(--s-radius-lg); padding:clamp(26px,4vw,40px);
}
body.k-page-sales .s-offer-card .k-kicker{ color:var(--s-olive-text); }
body.k-page-sales .s-offer-card h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(21px,2.7vw,28px); line-height:1.2; color:var(--s-ink); margin:12px 0 20px;
}
body.k-page-sales .s-incl{ display:grid; gap:11px; margin:0 0 24px; padding:0; }
body.k-page-sales .s-incl li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16.5px; line-height:1.5; color:var(--s-ink);
}
body.k-page-sales .s-incl .k-icon{ width:17px; height:17px; color:var(--s-olive); flex:none; margin-top:3px; }
body.k-page-sales .s-offer-price{
  border-top:1px solid var(--s-line); border-bottom:1px solid var(--s-line);
  padding:20px 0; margin:0 0 22px;
}
body.k-page-sales .s-offer-price .s-price{ margin:0 0 6px; }
body.k-page-sales .s-offer-price .s-price-new{ font-size:clamp(36px,4.6vw,46px); }
body.k-page-sales .s-price-note{ margin:0; font-size:15px; color:var(--s-muted); }
body.k-page-sales .s-offer-card .k-btn{ width:100%; }
body.k-page-sales .s-specs{
  display:flex; flex-wrap:wrap; gap:8px 16px; margin:18px 0 0; padding:0;
  font-size:14.5px; color:var(--s-muted);
}
body.k-page-sales .s-specs li{ display:inline-flex; align-items:center; gap:6px; }
body.k-page-sales .s-specs .k-icon{ width:14px; height:14px; color:var(--s-olive); }

/* ========================================================================== 
   S6B · RESEÑAS
   ========================================================================== */
body.k-page-sales .s-reviews{ background:var(--s-cream); }
body.k-page-sales .s-review-summary{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:7px 12px; margin:18px auto 0; color:var(--s-muted); font-size:15px;
}
body.k-page-sales .s-review-summary strong{
  font-family:var(--font-display); font-size:18px; color:var(--s-ink);
}
body.k-page-sales .s-review-stars{
  --rating:100%;
  position:relative; display:inline-block; width:max-content;
  font-size:20px; line-height:1; letter-spacing:2px; white-space:nowrap;
}
body.k-page-sales .s-review-stars::before{
  content:"★★★★★"; color:#D8D1C4;
}
body.k-page-sales .s-review-stars::after{
  content:"★★★★★"; position:absolute; inset:0 auto 0 0;
  width:var(--rating); overflow:hidden; color:#F2B52B; white-space:nowrap;
}
body.k-page-sales .s-reviews-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px; margin-top:clamp(28px,4vw,42px);
}
body.k-page-sales .s-review-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--s-paper); border:1px solid var(--s-line);
  border-top:4px solid #F2B52B; border-radius:var(--s-radius);
  padding:clamp(20px,2.4vw,26px); box-shadow:0 12px 28px rgba(38,55,45,.08);
}
body.k-page-sales .s-review-rating{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:17px;
}
body.k-page-sales .s-review-score{
  font-family:var(--font-display); font-weight:800; font-size:14px;
  color:var(--s-olive-text); background:#EEF0E7; border-radius:999px;
  padding:5px 9px; white-space:nowrap;
}
body.k-page-sales .s-review-card blockquote{
  margin:0; padding:0; border:0; color:var(--s-ink);
  font-size:16px; line-height:1.64; font-style:normal;
}
body.k-page-sales .s-review-author{
  margin:auto 0 0; padding-top:20px; font-family:var(--font-display);
  font-weight:800; font-size:15.5px; color:var(--s-terracotta-text);
}
body.k-page-sales .s-review-author::before{ content:"— "; }

@media (max-width:900px){
  body.k-page-sales .s-reviews-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  body.k-page-sales .s-reviews-grid{ grid-template-columns:1fr; gap:14px; }
  body.k-page-sales .s-review-card{ padding:20px; }
}

/* ========================================================================== 
   S7 · PARA QUIÉN ES / NO ES
   ========================================================================== */
body.k-page-sales .s-fit{ background:var(--s-paper); }
body.k-page-sales .s-fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); }
body.k-page-sales .s-fit-grid > *{ min-width:0; }
body.k-page-sales .s-fit-grid h3{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-size:20.5px;
  color:var(--s-ink); margin:0 0 20px;
}
body.k-page-sales .s-fit-grid h3 .k-icon{ width:20px; height:20px; }
body.k-page-sales .s-yes h3 .k-icon{ color:var(--s-olive); }
body.k-page-sales .s-no h3 .k-icon{ color:var(--s-muted); }
body.k-page-sales .s-fit-list{ display:grid; gap:13px; margin:0; padding:0; }
body.k-page-sales .s-fit-list li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16.5px; line-height:1.6; color:var(--s-ink);
}
body.k-page-sales .s-fit-list .k-icon{ width:17px; height:17px; flex:none; margin-top:3px; }
body.k-page-sales .s-yes .k-icon{ color:var(--s-olive); }
/* Gris neutro, nunca rojo: es información, no una alarma. */
body.k-page-sales .s-no .k-icon{ color:#9A938B; }
body.k-page-sales .s-disclaimer{
  margin:clamp(28px,4vw,40px) 0 0; padding-top:20px; border-top:1px solid var(--s-line);
  font-size:15px; line-height:1.62; color:var(--s-muted); max-width:70ch;
}

/* ==========================================================================
   S8 · FAQ
   ========================================================================== */
body.k-page-sales .k-faq{ background:var(--s-cream); }
body.k-page-sales .k-faq-item{
  background:var(--s-paper); border:1px solid var(--s-line);
  border-radius:var(--s-radius); margin-bottom:12px; overflow:hidden;
}
body.k-page-sales .k-faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; min-height:48px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:17.5px;
  line-height:1.4; color:var(--s-ink); list-style:none;
}
body.k-page-sales .k-faq-item summary:focus-visible{ outline:2px solid var(--s-amber); outline-offset:-2px; }
body.k-page-sales .k-faq-item summary .k-icon{ color:var(--s-terracotta-text); width:20px; height:20px; }
body.k-page-sales .k-faq-body{
  padding:0 22px 24px; font-size:16.5px; line-height:1.68; color:var(--s-muted); max-width:70ch;
}

/* ==========================================================================
   S9 · CIERRE
   ========================================================================== */
body.k-page-sales .s-close{ background:var(--s-olive); color:#fff; text-align:center; }
body.k-page-sales .s-close h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(24px,3.4vw,36px); line-height:1.18; color:#fff;
  max-width:18ch; margin:0 auto 16px;
}
body.k-page-sales .s-close p{
  color:rgba(255,255,255,.88); font-size:17.5px; line-height:1.62;
  max-width:56ch; margin:0 auto 28px;
}
body.k-page-sales .s-close .s-close-final{
  font-size:15px; color:rgba(255,255,255,.78); margin:20px auto 0;
}

/* ==========================================================================
   STICKY CTA (solo mobile)
   ========================================================================== */
body.k-page-sales .s-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--s-line);
  box-shadow:0 -6px 20px -8px rgba(46,42,42,.22);
  transform:translateY(110%); transition:transform .25s ease;
}
body.k-page-sales .s-sticky.is-on{ transform:translateY(0); }
body.k-page-sales .s-sticky-price{
  font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--s-ink);
  display:flex; flex-direction:column; line-height:1.15;
}
body.k-page-sales .s-sticky-price small{
  font-weight:600; font-size:11.5px; color:var(--s-muted);
  text-decoration:line-through; text-decoration-thickness:1px;
}
body.k-page-sales .s-sticky-price .s-sticky-installments{
  text-decoration:none; color:var(--s-terracotta-text); font-weight:700;
}
body.k-page-sales .s-sticky .k-btn{ padding:13px 22px; font-size:14.5px; white-space:nowrap; }

/* ========================================================================== 
   RESPONSIVE
   ========================================================================== */
@media (min-width: 901px) and (max-height: 800px){
  body.k-page-sales .k-hero{ padding:28px 0 36px; }
  body.k-page-sales .k-hero .k-h1{ margin:10px 0 12px; }
  body.k-page-sales .k-hero-sub{ margin-bottom:14px; }
  body.k-page-sales .s-chips{ margin-bottom:14px; }
  body.k-page-sales .s-price{ margin-bottom:12px; }
  body.k-page-sales .s-offer{ padding:40px 0; }
  body.k-page-sales .s-offer-card{ padding:26px 30px; }
  body.k-page-sales .s-offer-card h2{ margin:8px 0 14px; font-size:24px; }
  body.k-page-sales .s-incl{ gap:8px; margin-bottom:14px; }
  body.k-page-sales .s-offer-price{ padding:14px 0; margin-bottom:14px; }
  body.k-page-sales .s-specs{ margin-top:12px; }
}

@media (max-width: 1024px){
  body.k-page-sales .s-bases,
  body.k-page-sales .s-giros,
  body.k-page-sales .s-route{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 900px){
  body.k-page-sales .k-hero-inner{ grid-template-columns:1fr; gap:30px; }
  body.k-page-sales .k-hero-photo{ order:2; }
  /* Apaisado: aprovecha todo el ancho para que los dos bonos sigan siendo
     identificables. Al ser más bajo que una portada vertical, el hero no
     crece de alto pese a ocupar más ancho. */
  body.k-page-sales .k-hero-photo img{ max-width:100%; }
  body.k-page-sales .s-offer-grid{ grid-template-columns:1fr; }
  body.k-page-sales .s-offer-photo{ order:0; }
  body.k-page-sales .s-offer-photo img{ max-width:100%; }
  body.k-page-sales .s-recipe-cols{ grid-template-columns:1fr; gap:26px; }
  body.k-page-sales .s-vs{ grid-template-columns:1fr; }
  body.k-page-sales .s-fit-grid{ grid-template-columns:1fr; }
}

@media (max-width: 620px){
  body.k-page-sales .s-bases,
  body.k-page-sales .s-giros,
  body.k-page-sales .s-route{ grid-template-columns:1fr; gap:10px; }
  body.k-page-sales .s-route > li{ padding-top:12px; }

  body.k-page-sales .s-recipe-meta{ grid-template-columns:repeat(2,1fr); }
  /* En mobile la portada pasa a la izquierda del título y la descripción cae
     entera debajo: se mantiene visible y reconocible sin estrangular el texto
     ni alargar el card. El icono se oculta porque la portada ya cumple el
     papel de ancla visual y tener ambos sería redundante. */
  body.k-page-sales .s-item{
    grid-template-columns:106px 1fr;
    grid-template-areas:
      "cover head"
      "desc  desc";
    column-gap:16px; row-gap:16px; align-items:center;
  }
  body.k-page-sales .s-item-icon{ display:none; }
  body.k-page-sales .s-item-cover{ align-self:start; }

  /* Una página visible a la vez, con snap.
     Ancho fijo, no minmax(0,…): con mínimo 0 el grid prefiere comprimir las
     seis columnas dentro del contenedor antes que desbordar, y el carrusel
     queda ilegible en vez de hacer scroll. */
  body.k-page-sales .s-pages{ grid-auto-columns:76vw; gap:14px; }
  body.k-page-sales .s-scroll-hint{ display:block; }

  /* klivanta-landing.css añade 18px de padding lateral a .k-hero-inner sólo a
     este ancho; se suma al de .k-wrap y dejaba el bundle 36px más estrecho que
     el resto de la página. El margen negativo lo cancela, únicamente para la
     imagen. */
  body.k-page-sales .k-hero-photo{ margin-left:-18px; margin-right:-18px; }

  body.k-page-sales .k-hero-cta .k-btn,
  body.k-page-sales .s-close .k-btn{ width:100%; }
  body.k-page-sales .s-sticky{ display:flex; }
  body.k-page-sales.has-sticky-cta .k-topbar .k-btn{
    visibility:hidden; opacity:0; pointer-events:none;
  }
  /* El sticky mide ~68px: reservamos espacio para que no tape el cierre. */
  body.k-page-sales.has-sticky-cta .s-close{ padding-bottom:104px; }

  body.k-page-sales .k-faq-item summary{ padding:18px; font-size:16.5px; }
  body.k-page-sales .k-faq-body{ padding:0 18px 20px; }

  /* Micro-etiquetas en versalitas: a 11,5-12px se leen con esfuerzo en el
     teléfono. Suben un punto sólo aquí; en desktop el tamaño original ya
     funciona y mantener la escala tipográfica compensada importa más. */
  body.k-page-sales .k-kicker{ font-size:13px; }
  body.k-page-sales .s-bases .s-num{ font-size:13px; }
  body.k-page-sales .s-recipe-meta .l{ font-size:12.5px; }
  body.k-page-sales .s-colh{ font-size:14px; }
  body.k-page-sales .s-badge{ font-size:12.5px; }
  body.k-page-sales .s-price-tag{ font-size:12.5px; }
  body.k-page-sales .s-badge{ margin-left:0; display:inline-block; margin-top:6px; vertical-align:0; }
  body.k-page-sales .s-item h3{ display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; }
}

/* ==========================================================================
   PULIDO VISUAL LIGERO — Come Bien con Poco (Page ID 8)
   --------------------------------------------------------------------------
   CSS-only. No añade peticiones, fuentes, imágenes ni JavaScript. Todo queda
   scopeado en `body.k-page-sales`, así que no puede alterar /guia-gratis/ ni
   ninguna otra landing.

   No toca copy, estructura, precios, CTA ni checkout: sólo borde, sombra,
   radio, ritmo vertical y estados de interacción.
   ========================================================================== */

body.k-page-sales{
  /* Tokens de superficie. Se derivan del sistema existente: el borde es el
     mismo --s-line pero rebajado a un valor translúcido para que no marque
     tanto sobre crema, y las sombras son de tinta (46,42,42), nunca negras. */
  --s-radius-card:16px;                 /* ya era el radio de facto */
  --s-border-soft:rgba(46,42,42,.08);
  --s-shadow-card:
    0 1px 2px rgba(46,42,42,.04),
    0 8px 24px -12px rgba(46,42,42,.06);
  --s-shadow-card-hover:
    0 1px 2px rgba(46,42,42,.05),
    0 14px 32px -14px rgba(46,42,42,.10);
  --s-shadow-offer:
    0 2px 4px rgba(46,42,42,.04),
    0 18px 44px -20px rgba(46,42,42,.16);
  --s-ease:160ms cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   1 · SUPERFICIES DE TARJETA
   Unifica borde, radio y sombra en los bloques que ya eran tarjetas.
   No convierte en caja nada que hoy no lo sea.
   -------------------------------------------------------------------------- */
body.k-page-sales .s-bases > li,
body.k-page-sales .s-item,
body.k-page-sales .s-recipe,
body.k-page-sales .k-faq-item{
  border-color:var(--s-border-soft);
  box-shadow:var(--s-shadow-card);
}
body.k-page-sales .s-bases > li,
body.k-page-sales .s-item,
body.k-page-sales .k-faq-item{
  border-radius:var(--s-radius-card);
}

/* Los giros mantienen su borde discontinuo (son la capa "sabor", no producto),
   pero se suaviza para que no compita con las bases. */
body.k-page-sales .s-giros > li{
  border-color:var(--s-border-soft);
  border-radius:var(--s-radius-card);
}

/* --------------------------------------------------------------------------
   2 · JERARQUÍA ENTRE SECCIONES
   Filete superior de un píxel para que la página deje de leerse como una hoja
   continua. Sólo entre secciones claras; el cierre oliva y el hero se excluyen.
   -------------------------------------------------------------------------- */
body.k-page-sales .k-pain,
body.k-page-sales .s-method,
body.k-page-sales .s-proof,
body.k-page-sales .s-deliver,
body.k-page-sales .s-offer,
body.k-page-sales .s-fit,
body.k-page-sales .k-faq{
  border-top:1px solid rgba(46,42,42,.05);
}

/* --------------------------------------------------------------------------
   3 · HERO
   Chips con superficie propia y ritmo algo más definido. Sin crecer de alto.
   -------------------------------------------------------------------------- */
body.k-page-sales .s-chips li{
  border-color:var(--s-border-soft);
  box-shadow:0 1px 2px rgba(46,42,42,.03);
  padding:9px 15px;
}
body.k-page-sales .k-hero .k-kicker{ margin-bottom:4px; }
body.k-page-sales .k-hero .k-h1{ letter-spacing:-.01em; }

/* El bloque de precio del hero gana un respiro por arriba para separarse de
   los chips sin alargar la sección. */
body.k-page-sales .k-hero .s-price{ margin-top:4px; }

/* --------------------------------------------------------------------------
   4 · BOTONES
   Estados de interacción. Sin brillo, rebote ni animación continua.
   -------------------------------------------------------------------------- */
body.k-page-sales .k-btn{
  transition:transform var(--s-ease), box-shadow var(--s-ease), background-color var(--s-ease);
}
body.k-page-sales .k-btn:hover{ transform:translateY(-1px); }
body.k-page-sales .k-btn:active{ transform:translateY(0); }

/* El foco visible ya existía; aquí sólo se asegura que gane a los estados
   hover/active y que nunca quede tapado por la tarjeta contenedora. */
body.k-page-sales .k-btn:focus-visible{
  outline:3px solid var(--s-ink);
  outline-offset:3px;
  transform:none;
}

/* Enlaces de texto dentro del contenido: foco perceptible sin depender del
   color, que es lo que fallaba al navegar con teclado. */
body.k-page-sales a:focus-visible,
body.k-page-sales summary:focus-visible{
  outline:3px solid var(--s-olive);
  outline-offset:2px;
  border-radius:4px;
}

/* --------------------------------------------------------------------------
   5 · S6 · OFERTA
   Es el bloque de conversión: se le da algo más de peso que al resto de
   tarjetas y se ordena mejor la relación precio / entregables / CTA.
   -------------------------------------------------------------------------- */
body.k-page-sales .s-offer-card{
  border-color:var(--s-border-soft);
  box-shadow:var(--s-shadow-offer);
  border-radius:var(--s-radius-lg);
}
body.k-page-sales .s-offer-price{
  border-top-color:var(--s-border-soft);
  border-bottom-color:var(--s-border-soft);
  padding:22px 0;
}
/* El precio en soles y la opción de cuotas forman una sola lectura. */
body.k-page-sales .s-offer-price .s-price-new{ letter-spacing:-.02em; }
body.k-page-sales .s-offer-price .s-price-old{ opacity:.72; font-size:17px; }
body.k-page-sales .s-offer-card .k-btn{ margin-top:2px; }
body.k-page-sales .s-incl li{ align-items:flex-start; }

/* --------------------------------------------------------------------------
   6 · IMÁGENES
   Sólo presentación: radio y borde coherentes. Sin filtros ni recortes.
   -------------------------------------------------------------------------- */
body.k-page-sales .s-item-cover img,
body.k-page-sales .s-pages img{
  border-color:var(--s-border-soft);
}
body.k-page-sales .s-pages img{
  border-radius:12px;
  box-shadow:0 1px 2px rgba(46,42,42,.04), 0 14px 30px -16px rgba(46,42,42,.22);
}

/* --------------------------------------------------------------------------
   7 · FAQ
   Sigue siendo <details> nativo. Sólo respiración y realce al abrir.
   -------------------------------------------------------------------------- */
body.k-page-sales .k-faq-item{
  transition:box-shadow var(--s-ease), border-color var(--s-ease);
}
body.k-page-sales .k-faq-item:hover{ box-shadow:var(--s-shadow-card-hover); }
body.k-page-sales .k-faq-item[open]{
  border-color:rgba(46,42,42,.12);
  box-shadow:var(--s-shadow-card-hover);
}
body.k-page-sales .k-faq-item summary{ transition:color var(--s-ease); }
body.k-page-sales .k-faq-item summary .k-icon{ transition:transform var(--s-ease); }
body.k-page-sales .k-faq-item + .k-faq-item{ margin-top:12px; }

/* --------------------------------------------------------------------------
   8 · TOPBAR
   Borde inferior de un píxel y sombra mínima para despegarlo del contenido
   al hacer scroll. Sin backdrop-filter.
   -------------------------------------------------------------------------- */
body.k-page-sales .k-topbar{
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 3px rgba(46,42,42,.10);
}

/* --------------------------------------------------------------------------
   9 · RITMO VERTICAL
   Ajustes puntuales donde el salto entre kicker, titular y copy era irregular.
   -------------------------------------------------------------------------- */
body.k-page-sales .s-head .k-kicker,
body.k-page-sales .k-pain-head .k-kicker{ margin-bottom:6px; }
body.k-page-sales .s-items{ gap:20px; }
body.k-page-sales .s-bases{ margin-bottom:20px; }
body.k-page-sales .s-note{ padding-top:2px; padding-bottom:2px; }
/* Cierre de S5: la nota final necesitaba algo de aire tras retirar la
   comparativa, para no quedar pegada a la última tarjeta. */
body.k-page-sales .s-deliver .s-note{ margin-top:24px; }

/* Barra sticky de mobile: misma familia de sombra que el resto. */
body.k-page-sales .s-sticky{
  box-shadow:0 -1px 2px rgba(46,42,42,.04), 0 -10px 28px -12px rgba(46,42,42,.16);
}

/* --------------------------------------------------------------------------
   10 · MOVIMIENTO REDUCIDO
   Nadie debería recibir desplazamientos si ha pedido no verlos.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body.k-page-sales .k-btn,
  body.k-page-sales .k-faq-item,
  body.k-page-sales .k-faq-item summary,
  body.k-page-sales .k-faq-item summary .k-icon,
  body.k-page-sales .s-sticky{
    transition:none;
  }
  body.k-page-sales .k-btn:hover,
  body.k-page-sales .k-btn:active{ transform:none; }
}

/* --------------------------------------------------------------------------
   11 · AJUSTES MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width: 620px){
  /* Sombras algo más contenidas: a este ancho las tarjetas van casi a sangre
     y una sombra amplia ensucia el borde de la pantalla. */
  body.k-page-sales .s-item,
  body.k-page-sales .s-bases > li,
  body.k-page-sales .k-faq-item{
    box-shadow:0 1px 2px rgba(46,42,42,.04), 0 6px 16px -10px rgba(46,42,42,.08);
  }
  body.k-page-sales .s-items{ gap:16px; }
  body.k-page-sales .s-chips li{ padding:8px 13px; }
  /* En táctil no hay hover: el desplazamiento del botón sólo confundiría. */
  body.k-page-sales .k-btn:hover{ transform:none; }
}