/* ==========================================================================
   KLIVANTA — Landing "Sistema 4×4"
   Design system + estilos de sección. Todo queda scopeado bajo
   body.klivanta-landing para no interferir con el resto del sitio.
   ========================================================================== */

:root{
  --k-bg-light:#FAF7F1;
  --k-bg-card:#F7F1E6;
  --k-bg-card-dark:#F2E6D9;
  --k-bg-body:#DDD5C6;
  --k-terracotta:#B5502F;
  --k-amber:#E8A33D;
  --k-olive:#6B7A4A;
  --k-charcoal:#2E2A26;
  --k-text-secondary:#3c372f;
  --k-text-tertiary:#6b6357;
  --k-white:#FFFFFF;

  /* Paleta oficial — GUIA_ESTILO_VISUAL_KLIVANTA_F3.md (docs/).
     Se van aplicando sección por sección; no reemplazan las variables de
     arriba hasta que se confirme cada sección. */
  --k-terra:#C4845A;         /* Acento principal — Terra cálido */
  --k-olive-deep:#2F3A2E;    /* Verde oliva profundo — pedido puntual para el header de guia-gratis */
  --k-olive-2:#7A8C5E;       /* Acento secundario — Verde oliva */
  --k-cream:#F5F0E8;         /* Fondo principal — Crema cálido */
  --k-cream-2:#FAF7F2;       /* Fondo secundario — Marfil cálido */
  --k-terra-light:#E8C7B2;   /* Terra claro — recuadros */
  --k-olive-light:#DDE4D1;   /* Oliva claro — consejos */
  --k-line:#D8D2C9;          /* Líneas y divisores */
  --k-text-dark:#3D3D3D;     /* Texto principal */
  --k-text-mid:#6B6965;      /* Texto secundario */
  --k-terra-dark:#9B5E3C;    /* Botón principal — pedido puntual guia-gratis */
  --k-terra-deep:#7F482C;    /* Hover del botón principal — pedido puntual guia-gratis */

  --font-display:'Montserrat', sans-serif;
  --font-body:'Source Sans 3', sans-serif;
  --k-radius-sm:8px;
  --k-radius-md:14px;
  --k-radius-lg:22px;
  --k-container:1140px;
}

/* ---------- reset / base ---------- */
body.klivanta-landing{
  margin:0;
  background:var(--k-bg-body);
  color:var(--k-charcoal);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
body.klivanta-landing *{ box-sizing:border-box; }
body.klivanta-landing img{ max-width:100%; display:block; }
body.klivanta-landing a{ text-decoration:none; color:inherit; }
body.klivanta-landing ul{ margin:0; padding:0; list-style:none; }
body.klivanta-landing{ overflow-x:hidden; width:100%; }

/* Solo guia-gratis: GenerateBlocks aplica 40px de padding lateral por
   defecto en .gb-inside-container. Eso se suma al padding de .k-wrap y al
   de cada sección, dejando márgenes laterales enormes (hasta 82px en
   mobile). Lo neutralizamos porque el espaciado ya lo controla .k-wrap. */
body.k-page-guia-gratis .gb-inside-container{ padding-left:0; padding-right:0; }

.k-wrap{
  max-width:var(--k-container);
  margin:0 auto;
  padding:0 24px;
}

/* CSS Grid no achica sus hijos por debajo del tamaño de su contenido
   (imágenes, textos largos) por defecto, lo que puede desbordar el
   viewport en mobile (ej: la foto de la oferta empujando la columna del
   grid más ancha que la pantalla). min-width:0 en los hijos lo evita. */
.k-offer-grid > *,
.k-printable-grid > *,
.k-formula > *,
.k-steps > *,
.k-bonus-grid > *,
.k-testi-grid > *,
.k-review-grid > *,
.k-footer-inner > *,
.k-value-grid > *,
.k-details-grid > *,
.k-features-check > *{ min-width:0; }
.k-upsell2-grid > *{ min-width:0; }
body.k-page-guia-gratis .k-hero-inner > *{ min-width:0; }

.k-icon{ width:1em; height:1em; flex:none; }

/* ---------- typography helpers ---------- */
.k-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:2px; text-transform:uppercase; color:var(--k-terracotta);
}
.k-kicker .sep{ color:var(--k-olive); }
.k-kicker.on-dark{ color:var(--k-amber); }

.k-h1{
  font-family:var(--font-display); font-weight:800; color:var(--k-charcoal);
  font-size:clamp(30px,5vw,52px); line-height:1.08; margin:14px 0 16px;
}
.k-h2{
  font-family:var(--font-display); font-weight:800; color:var(--k-charcoal);
  font-size:clamp(24px,3.4vw,36px); line-height:1.15; margin:10px 0 14px;
}
.k-h3{
  font-family:var(--font-display); font-weight:700; color:var(--k-charcoal);
  font-size:clamp(18px,2.2vw,22px); line-height:1.25; margin:0 0 8px;
}
.k-lead{
  font-family:var(--font-body); font-size:clamp(16px,2vw,19px); line-height:1.55;
  color:var(--k-text-secondary); max-width:640px;
}
.k-p{ font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--k-text-secondary); }
.k-center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- buttons ---------- */
.k-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  padding:16px 30px; border-radius:999px; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
}
/* .k-btn.k-btn-amber (dos clases) en vez de .k-btn-amber solo: así gana
   en especificidad al reset global `body.klivanta-landing a{color:inherit}`
   — si no, el botón queda con el color heredado del contenedor en vez del
   suyo propio (se notó recién sobre fondos oscuros, pero pasaba siempre). */
.k-btn.k-btn-amber{ background:var(--k-amber); color:var(--k-charcoal); box-shadow:0 8px 20px rgba(232,163,61,.35); }
.k-btn.k-btn-amber:hover{ filter:brightness(.92); transform:translateY(-2px); box-shadow:0 12px 24px rgba(232,163,61,.42); }
.k-btn.k-btn-olive{ background:var(--k-olive); color:var(--k-white); box-shadow:0 8px 20px rgba(107,122,74,.3); }
.k-btn.k-btn-olive:hover{ filter:brightness(.9); transform:translateY(-2px); }
.k-btn.k-btn-outline{ background:transparent; color:var(--k-charcoal); border:1.5px solid rgba(46,42,38,.3); }
.k-btn.k-btn-outline:hover{ border-color:var(--k-charcoal); }
.k-btn.k-btn-terracotta{ background:var(--k-terracotta); color:var(--k-white); box-shadow:0 10px 24px rgba(181,80,47,.32); }
.k-btn.k-btn-terracotta:hover{ filter:brightness(.92); transform:translateY(-2px); box-shadow:0 14px 30px rgba(181,80,47,.4); }
/* Variante para botones outline sobre fondos oscuros (ej: tarjeta de upsell). */
.k-upsell-card .k-btn.k-btn-outline{ color:var(--k-white); border-color:rgba(255,255,255,.4); }
.k-upsell-card .k-btn.k-btn-outline:hover{ border-color:var(--k-white); }
.k-btn-sm{ padding:10px 20px; font-size:13px; }
.k-btn-block{ width:100%; }

/* ---------- badges / pills / numbered circles ---------- */
.k-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  padding:6px 14px; border-radius:999px; border:1px solid rgba(46,42,38,.18);
  background:var(--k-white); color:var(--k-text-secondary);
}
.k-badge-num{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:50%;
  background:var(--k-amber); color:var(--k-charcoal);
  font-family:var(--font-display); font-weight:800; font-size:16px;
}
.k-badge-num.olive{ background:var(--k-olive); color:var(--k-white); }
.k-tag{
  display:inline-block; background:var(--k-amber); color:var(--k-charcoal);
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.4px; border-radius:999px; padding:7px 16px;
}
.k-tag.olive{ background:var(--k-olive); color:var(--k-white); }

/* ---------- cards ---------- */
.k-card{
  background:var(--k-bg-card); border-radius:var(--k-radius-md);
  padding:26px; border:1px solid rgba(46,42,38,.08);
}
.k-card.dark{ background:var(--k-bg-card-dark); }

/* ---------- section rhythm ---------- */
.k-section{ padding:64px 0; }
.k-section-tight{ padding:44px 0; }

/* placeholder image box */
.k-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; background:var(--k-bg-card-dark);
  border:1.5px dashed rgba(46,42,38,.28); border-radius:var(--k-radius-md);
  color:var(--k-text-tertiary); font-family:var(--font-body); font-size:12.5px;
  padding:16px; overflow:hidden;
}
.k-ph b{ font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--k-text-secondary); }
.k-ph .k-icon{ width:26px; height:26px; color:var(--k-terracotta); opacity:.6; }

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.k-topbar{
  position:sticky; top:0; z-index:200; background:var(--k-olive-deep);
  box-shadow:0 2px 14px rgba(0,0,0,.15);
}

/* MICRO-01 · El bloque que pintaba los botones ámbar en terracota
   (--k-terra-dark) se retiró aquí. Estaba escrito para guia-gratis pero con
   selectores sin scope (.k-topbar/.k-hero/.k-cta-band), así que teñía también
   cualquier otra plantilla que los usara, y dejaba la landing del lead magnet
   con un CTA de otro color que la página de ventas.

   Al quitarlo, ambas páginas heredan el mismo `.k-btn.k-btn-amber` base:
   ámbar #E8A33D sobre tinta. /gracias-oferta/ usa `.k-btn-terracotta`, una
   regla independiente, y no se ve afectada. */
/* Sin panel claro detrás del formulario: los campos flotan directo sobre
   la card oliva oscura. Las labels pasan a claras para seguir siendo
   legibles sin ese fondo. */
body.k-page-guia-gratis .k-lead-form{ background:transparent; padding:0; box-shadow:none; }
body.k-page-guia-gratis .k-lead-form label{ color:rgba(255,255,255,.82); }
/* El botón de envío es el CTA principal de la landing: usa exactamente el
   mismo ámbar que el CTA de compra de la sales page. Sólo cambian los colores;
   el fondo transparente del formulario y las labels claras se conservan porque
   son propios de la tarjeta oliva de esta página. */
body.k-page-guia-gratis .k-lead-form .wpcf7-submit{
  background:#E8A33D; color:#2E2A2A;
  box-shadow:0 8px 20px rgba(232,163,61,.34);
}
body.k-page-guia-gratis .k-lead-form .wpcf7-submit:hover{
  background:#D9942F; color:#2E2A2A; filter:none;
  box-shadow:0 12px 26px rgba(232,163,61,.42);
}

/* Hero — fondo crema, 2 columnas (texto | imagen grande). Solo guia-gratis. */
body.k-page-guia-gratis .k-hero{ background:var(--k-white); color:var(--k-text-dark); text-align:left; }
body.k-page-guia-gratis .k-hero:before{ content:none; }
body.k-page-guia-gratis .k-hero-inner{
  max-width:var(--k-container); padding:0 24px; text-align:left;
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;
}
body.k-page-guia-gratis .k-hero .k-kicker{ justify-content:flex-start; }
body.k-page-guia-gratis .k-hero .k-h1{ color:var(--k-text-dark); margin:16px 0 18px; }
body.k-page-guia-gratis .k-hero .k-h1 em{ color:var(--k-terra-dark); }
body.k-page-guia-gratis .k-hero-sub{ color:var(--k-text-dark); max-width:none; margin:0 0 24px; }
body.k-page-guia-gratis .k-hero .k-chip-row{ justify-content:flex-start; max-width:none; margin:0 0 14px; }
body.k-page-guia-gratis .k-hero .k-pill{ background:var(--k-white); border-color:var(--k-line); color:var(--k-text-dark); }
body.k-page-guia-gratis .k-hero-cta{ align-items:flex-start; margin-top:10px; }
body.k-page-guia-gratis .k-hero-note{ color:var(--k-text-mid); }
body.k-page-guia-gratis .k-hero-photo{ margin:0; max-width:none; display:flex; justify-content:center; }
body.k-page-guia-gratis .k-hero-photo img{
  width:88%; height:auto; margin:0 auto;
  filter:drop-shadow(0 26px 30px rgba(107,122,74,.4)) drop-shadow(0 8px 10px rgba(107,122,74,.25));
}
.k-topbar-inner{
  max-width:var(--k-container); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.k-logo{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; }

/* El archivo fuente (docs/klivanta-logo-3.png) es un render de presentación:
   1536×1024, sin transparencia, con el isotipo (los 4 cuadrados) a la
   izquierda y la palabra "Klivanta" en azul marino a la derecha. Acá solo
   recortamos por CSS el isotipo (background-size/position) y la palabra
   "Klivanta" se escribe como texto real en blanco — así se puede agrandar
   y recolorear libremente. Si en algún momento se exporta el isotipo como
   PNG/SVG con fondo transparente, esto se simplifica a un <img> normal. */
.k-logo-icon{
  display:block; flex:none; width:35px; height:38px;
  background-repeat:no-repeat; background-size:208.5px 139px; background-position:-35px -45px;
}
.k-logo-icon-footer{ width:48px; height:52px; background-size:285.3px 190.2px; background-position:-48px -61px; }
.k-logo-mark{
  font-family:var(--font-display); font-weight:800; font-size:21px;
  letter-spacing:1.5px; color:var(--k-white); white-space:nowrap;
}
.k-logo-mark-footer{ font-size:27px; }
.k-footer-logo-row{ display:flex; align-items:center; gap:12px; }
.k-logo-rule{ width:1px; height:16px; background:rgba(255,255,255,.3); flex:none; }
.k-logo-tag{ font-family:var(--font-body); font-size:21px; color:var(--k-amber); white-space:nowrap; }
.k-topbar .k-btn{ flex:none; }
.k-topbar .k-btn .short{ display:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.k-hero{
  background:var(--k-cream); color:var(--k-text-dark); text-align:left;
  padding:64px 0 60px; position:relative; overflow:hidden;
}
.k-hero:before{ content:none; }
.k-hero-inner{
  position:relative; max-width:var(--k-container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;
}
.k-hero-inner > *{ min-width:0; }
.k-hero .k-kicker{ justify-content:flex-start; }
.k-hero .k-h1{ color:var(--k-text-dark); margin:16px 0 18px; }
.k-hero .k-h1 em{ font-style:normal; color:var(--k-terra-dark); }
/* Home: título "Come Bien con Poco" — nombre primario del ebook, tomado
   de V1 con sus specs exactas: tamaño clamp(2.7rem,7vw,5.7rem), peso 700
   (V1 no fuerza 800, queda en el bold por defecto), sin letter-spacing,
   margin-top en 0, y el terra claro de V1 (#C4845A = var(--k-terra),
   distinto del terra oscuro que usa el resto del sitio). Scopeado a
   body.home para no tocar el hero de guia-gratis, que comparte .k-h1. */
body.home .k-hero .k-h1{
  font-size:clamp(2.7rem, 7vw, 5.7rem); font-weight:700; line-height:1.08;
  letter-spacing:normal; margin:0 0 16px;
}
body.home .k-hero .k-h1 em{ color:var(--k-terra); }
body.home .k-hero .k-h1-line{ display:inline-block; white-space:nowrap; }
.k-hero-sub{
  font-family:var(--font-body); font-size:clamp(15px,2vw,18px); line-height:1.6;
  color:var(--k-text-dark); max-width:none; margin:0 0 24px;
}
.k-hero-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:10px; }
.k-hero-note{ font-size:13px; color:var(--k-text-mid); }
.k-hero-photo{ margin:0; max-width:none; display:flex; justify-content:center; }
.k-hero-photo img{ width:100%; height:auto; border-radius:var(--k-radius-lg); box-shadow:0 24px 60px rgba(61,61,61,.16); }
/* Mockups con fondo transparente no llevan ni radio ni sombra de tarjeta:
   ya vienen recortados a la silueta del libro/tablet/celular. */
.k-hero-photo img.is-transparent{ border-radius:0; box-shadow:none; }

/* ==========================================================================
   PAIN POINTS
   ========================================================================== */
.k-pain{ background:var(--k-olive-light); }
.k-pain-head{ text-align:center; max-width:640px; margin:0 auto 34px; }
.k-pain-head .k-p{ margin-top:14px; }
.k-pain-list{ max-width:760px; margin:0 auto; display:grid; gap:12px; }
.k-pain-item{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--k-white); border:1px solid rgba(46,42,38,.08);
  border-radius:var(--k-radius-sm); padding:16px 18px;
}
.k-pain-item .dot{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:rgba(181,80,47,.1); color:var(--k-terracotta);
  display:flex; align-items:center; justify-content:center;
}
.k-pain-item .dot .k-icon{ width:15px; height:15px; }
.k-pain-item p{ margin:0; font-size:16px; line-height:1.5; color:var(--k-text-secondary); }
.k-pain-close{ max-width:640px; margin:26px auto 0; text-align:center; font-size:15.5px; line-height:1.55; color:var(--k-text-mid); }
.k-pain-arrow{ text-align:center; margin-top:18px; color:var(--k-olive); }

/* ==========================================================================
   FORMULA / INTRO
   ========================================================================== */
.k-intro{ background:var(--k-cream-2); }
.k-intro-head{ text-align:center; max-width:720px; margin:0 auto 8px; }
.k-intro-sub{ text-align:center; max-width:600px; margin:0 auto 40px; color:var(--k-text-secondary); }

.k-method-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  max-width:900px; margin:32px auto 20px;
}
.k-method-card{
  position:relative; overflow:hidden;
  background:var(--k-white); border-radius:var(--k-radius-md);
  padding:28px 28px 26px; border:1px solid rgba(46,42,38,.08);
  box-shadow:0 6px 18px rgba(61,61,61,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.k-method-card:before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--k-terra) 0%, var(--k-olive-2) 100%);
}
.k-method-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(61,61,61,.14); }
.k-method-card p{ margin:0; font-size:15px; line-height:1.65; color:var(--k-text-secondary); }
.k-method-card-wide{ max-width:900px; margin:0 auto 40px; }
.k-method-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.k-method-badge{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--k-terra) 0%, var(--k-terra-dark) 100%);
  color:var(--k-white); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(155,94,60,.32);
}
.k-method-badge .k-icon{ width:19px; height:19px; }
.k-method-eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  letter-spacing:.4px; text-transform:uppercase; color:var(--k-olive);
}

.k-formula{
  background:var(--k-olive-deep); border-radius:var(--k-radius-lg);
  padding:40px clamp(20px,5vw,52px); color:var(--k-white);
  display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center;
  margin-bottom:48px;
}
.k-formula-stat{
  font-family:var(--font-display); font-weight:900; color:var(--k-amber);
  font-size:clamp(20px,3.4vw,34px); line-height:1.2; margin:14px 0 16px;
  overflow-wrap:break-word; word-break:break-word;
}
.k-formula p{ color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.6; margin:0 0 18px; }
.k-formula-matrix{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.k-formula-cell{
  aspect-ratio:1; border-radius:10px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); display:flex; align-items:center;
  justify-content:center; color:rgba(255,255,255,.5); font-size:11px;
}
.k-formula-cell.on{ background:var(--k-terra-dark); color:var(--k-white); font-weight:700; }

.k-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:8px; }
.k-steps-3{ grid-template-columns:repeat(3,1fr); max-width:760px; margin-left:auto; margin-right:auto; }
.k-step-card{ background:var(--k-bg-card); border-radius:var(--k-radius-md); padding:20px 18px; }
.k-step-title{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:12px 0 6px; }
.k-step-desc{ font-size:14px; line-height:1.45; color:var(--k-text-secondary); }

/* bonus cards */
.k-bonus-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:56px 0 20px; flex-wrap:wrap; }
.k-bonus-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.k-bonus-card{
  position:relative; background:var(--k-white); border-radius:var(--k-radius-md);
  overflow:hidden; border:1px solid rgba(46,42,38,.08);
  box-shadow:0 6px 18px rgba(61,61,61,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.k-bonus-card:before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--k-olive) 0%, var(--k-terra) 100%);
}
.k-bonus-card:hover{ transform:translateY(-6px); box-shadow:0 16px 30px rgba(61,61,61,.14); }
.k-bonus-card .k-ph{ border-radius:0; border-width:0 0 1px; aspect-ratio:4/3; }
.k-bonus-badge{
  width:40px; height:40px; margin:22px 0 0 18px; border-radius:50%;
  background:linear-gradient(135deg, var(--k-olive) 0%, var(--k-olive-deep) 100%);
  color:var(--k-white); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(107,122,74,.32);
}
.k-bonus-badge .k-icon{ width:19px; height:19px; }
.k-bonus-body{ padding:14px 16px 18px; }
.k-bonus-num{ font-family:var(--font-display); font-weight:800; font-size:12px; color:var(--k-terracotta); letter-spacing:.5px; }
.k-bonus-title{ font-family:var(--font-display); font-weight:700; font-size:15px; margin:6px 0 6px; line-height:1.3; }
.k-bonus-desc{ font-size:13.5px; color:var(--k-text-tertiary); line-height:1.4; margin:0; }

/* ==========================================================================
   OFERTA / PRECIO
   ========================================================================== */
.k-offer{ background:var(--k-bg-light); }
/* Solo la oferta de la home (no la de guia-gratis, que comparte .k-offer). */
.k-offer.k-offer-sale{ background:var(--k-cream); }
/* Solo guia-gratis: sección "Descarga gratuita" (S7) — fondo de sección
   salvia claro, tarjeta en verde oliva profundo. S6 "Sobre la guía" no
   se toca (misma clase .k-offer, distinguida con .k-lead-section). */
body.k-page-guia-gratis .k-offer.k-lead-section{ background:var(--k-olive-light); }
body.k-page-guia-gratis .k-lead-section .k-lead-card{ background:var(--k-olive-deep); max-width:640px; margin-left:auto; margin-right:auto; }
/* Nombre y correo apilados (uno encima del otro), en vez de lado a lado. */
body.k-page-guia-gratis .k-lead-form .row{ grid-template-columns:1fr; }
/* El header es sticky: sin esto, saltar a #lead-form deja el inicio de la
   card tapado debajo del header en cualquier tamaño de pantalla. */
body.k-page-guia-gratis #lead-form{ scroll-margin-top:84px; }
/* Botón "Aceptar" del banner de cookies y CTA del header: subir a un área
   táctil de 44px (antes 37px, chico para el pulgar en mobile). El del
   header ya vale para toda la home; el de cookies queda pendiente. */
body.k-page-guia-gratis .k-cookies .k-btn-sm,
.k-topbar .k-btn-sm{ padding:13px 22px; min-height:44px; display:inline-flex; align-items:center; }
body.k-page-guia-gratis .k-lead-perks-outer .k-pill{
  background:var(--k-white); border-color:var(--k-line); color:var(--k-text-dark);
}
.k-offer-grid{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:44px; align-items:center;
}
.k-offer-photo{ max-width:420px; margin:0 auto; }
.k-offer-photo img{ border-radius:var(--k-radius-lg); box-shadow:0 24px 50px rgba(46,42,38,.22); }
/* Solo guia-gratis, sección "Sobre la guía gratis": mockup transparente,
   sin caja/sombra, al 75% de su columna. */
body.k-page-guia-gratis .k-offer-photo-s6{ max-width:none; }
body.k-page-guia-gratis .k-offer-photo-s6 img{
  width:75%; height:auto; margin:0 auto;
  border-radius:0; box-shadow:none;
}
.k-offer-card{
  background:var(--k-white); border-radius:var(--k-radius-lg);
  padding:30px clamp(20px,3vw,36px); border:1px solid rgba(46,42,38,.08);
}
/* El header es sticky: sin esto, el botón del hero/header que salta a
   #oferta deja el borde superior de la card tapado debajo del header. */
#oferta{ scroll-margin-top:84px; }
.k-offer-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:1px; color:var(--k-olive); text-transform:uppercase; }
.k-offer-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2.6vw,28px); margin:10px 0 16px; }
.k-offer-includes{ display:grid; gap:10px; margin:0 0 22px; }
.k-offer-includes li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--k-text-secondary); }
.k-offer-includes .k-icon{ color:var(--k-olive); width:17px; height:17px; margin-top:2px; }

/* Value stack de la oferta: el libro + los 2 bonos con nombre propio. */
.k-stack{ display:flex; flex-direction:column; gap:16px; margin:18px 0 24px; }
.k-stack-item{ display:flex; gap:14px; align-items:flex-start; text-align:left; }
.k-stack-icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--k-terra) 0%, var(--k-terra-dark) 100%);
  color:var(--k-white); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(155,94,60,.3);
}
.k-stack-icon .k-icon{ width:18px; height:18px; }
.k-stack-title{ font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:3px; }
.k-stack-tag{
  display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px;
  background:var(--k-olive-light); color:var(--k-olive); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.3px; vertical-align:middle;
}
.k-stack-desc{ margin:0; font-size:13.5px; line-height:1.5; color:var(--k-text-secondary); }

.k-price-row{ display:flex; align-items:baseline; gap:12px; margin:6px 0 4px; flex-wrap:wrap; }
.k-price-old{ font-family:var(--font-body); font-size:16px; color:var(--k-text-tertiary); text-decoration:line-through; }
.k-price-new{ font-family:var(--font-display); font-weight:900; font-size:38px; color:var(--k-terracotta); }
.k-price-note{ font-size:12.5px; color:var(--k-text-tertiary); margin:0 0 20px; }

.k-timer-box{
  background:var(--k-bg-card-dark); border-radius:var(--k-radius-sm);
  padding:14px 16px; margin-bottom:20px;
}
.k-timer-label{ display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--k-terracotta); margin-bottom:10px; }
.k-timer-label .k-icon{ width:14px; height:14px; }
.k-timer{ display:flex; gap:10px; }
.k-timer-unit{ flex:1; background:var(--k-white); border-radius:8px; padding:8px 4px; text-align:center; }
.k-timer-unit .n{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--k-charcoal); }
.k-timer-unit .l{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--k-text-tertiary); }

/* Tarjeta de captación de leads: separada de la tarjeta de precio, con su
   propio encabezado. Vive debajo del k-offer-grid, dentro de la misma
   sección de oferta. Tratamiento oscuro + halo ámbar a propósito para que
   contraste fuerte contra las tarjetas claras del resto de la página y
   funcione como el momento "foco" de conversión de toda la sección. */
.k-lead-card{
  position:relative; overflow:hidden;
  background:var(--k-charcoal); border-radius:28px;
  padding:clamp(32px,5vw,52px) clamp(22px,4vw,44px); margin-top:44px; text-align:center;
  box-shadow:0 24px 60px rgba(46,42,38,.3);
}
.k-lead-card:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 0%, rgba(232,163,61,.3), transparent 70%);
  pointer-events:none;
}
.k-lead-card:after{
  content:""; position:absolute; inset:10px; border-radius:20px;
  border:1.5px dashed rgba(232,163,61,.35);
  pointer-events:none;
}
.k-lead-card-inner{ position:relative; z-index:1; }
.k-lead-badge{
  width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  background:var(--k-amber); color:var(--k-charcoal);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(232,163,61,.45);
}
.k-lead-badge .k-icon{ width:28px; height:28px; }
.k-lead-card .k-kicker{ justify-content:center; }
.k-lead-card .k-h3{ margin:10px auto 8px; max-width:480px; color:var(--k-white); }
.k-lead-card .k-lead-intro{ max-width:440px; margin:0 auto; color:rgba(255,255,255,.78); }
.k-lead-perks{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 0; }
.k-lead-perks .k-pill{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.9);
}
.k-lead-perks .k-pill .k-icon{ color:var(--k-amber); }
.k-lead-card .k-lead-form{ max-width:480px; margin:24px auto 0; text-align:left; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.k-lead-card .k-lead-note{ max-width:480px; margin:14px auto 0; justify-content:center; color:rgba(255,255,255,.55); }
.k-lead-card .k-lead-note .k-icon{ color:var(--k-amber); }

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */
.k-testi{ background:var(--k-terra-light); }
.k-testi-head{ text-align:center; max-width:640px; margin:0 auto 36px; }
.k-testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.k-testi-grid-4{ grid-template-columns:repeat(2,1fr); max-width:900px; margin:0 auto; }
.k-testi-card{
	position:relative; overflow:hidden;
	background:var(--k-white); border-radius:var(--k-radius-md); padding:22px;
	border:1px solid rgba(196,132,90,.18);
	box-shadow:0 6px 18px rgba(61,61,61,.07);
	transition:transform .25s ease, box-shadow .25s ease;
}
.k-testi-card:before{
	content:"";
	position:absolute; top:0; left:0; right:0; height:4px;
	background:linear-gradient(90deg, var(--k-terra) 0%, var(--k-amber) 100%);
}
.k-testi-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(155,94,60,.2); }
.k-testi-card .k-icon.quote,
.k-testi-quote{
	position:absolute; top:16px; right:16px; margin:0;
	width:38px; height:38px; color:var(--k-terra); opacity:.28;
}
.k-testi-stars{ display:flex; gap:2px; color:var(--k-amber); margin-bottom:10px; }
.k-testi-stars .k-icon{ width:14px; height:14px; fill:var(--k-amber); color:var(--k-amber); }
.k-testi-text{ position:relative; z-index:1; font-size:14.5px; line-height:1.55; color:var(--k-text-secondary); margin:0 0 16px; }
.k-testi-person{ display:flex; align-items:center; gap:10px; }
.k-testi-avatar{
	width:38px; height:38px; border-radius:50%; flex:none;
	display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg, var(--k-terra) 0%, var(--k-terra-dark) 100%);
	color:var(--k-white); font-family:var(--font-display); font-weight:700; font-size:13px;
}
.k-testi-name{ font-family:var(--font-display); font-weight:700; font-size:13.5px; }
.k-testi-role{ font-size:12px; color:var(--k-text-tertiary); }

/* ==========================================================================
   GUIA IMPRIMIBLE (reemplaza "certificado")
   ========================================================================== */
.k-printable{ background:var(--k-bg-light); }
.k-printable-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center; }
.k-printable-list{ display:grid; gap:12px; margin:20px 0 26px; }
.k-printable-list li{ display:flex; gap:10px; font-size:15px; color:var(--k-text-secondary); }
.k-printable-list .k-icon{ color:var(--k-terracotta); width:18px; height:18px; margin-top:2px; }
.k-printable-grid .gb-button-wrapper{ margin-top:20px; }
.k-printable-sheet{
  background:var(--k-white); border-radius:var(--k-radius-lg);
  padding:30px; box-shadow:0 18px 40px rgba(46,42,38,.14);
  border:1px solid rgba(46,42,38,.06);
}
.k-printable-sheet img{ border-radius:10px; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.k-cta-band{ background:var(--k-olive-light); color:var(--k-text-dark); text-align:center; }
.k-cta-band .k-h2{ color:var(--k-text-dark); max-width:700px; margin-left:auto; margin-right:auto; }
.k-cta-band p{ color:var(--k-text-mid); max-width:560px; margin:0 auto 26px; }
.k-cta-band .k-btn-amber{ box-shadow:0 8px 20px rgba(0,0,0,.18); }
.k-cta-band .gb-button-wrapper{ display:flex; justify-content:center; }
.k-cta-band p.k-cta-final{ margin:18px auto 0; font-size:13.5px; color:var(--k-text-mid); }
body.k-page-guia-gratis .k-cta-band .gb-button-wrapper{ display:flex; justify-content:center; }

/* ==========================================================================
   RESEÑAS
   ========================================================================== */
.k-reviews{ background:var(--k-cream-2); }
.k-reviews-head{ text-align:center; max-width:600px; margin:0 auto 8px; }
.k-reviews-head .k-p{ margin-top:14px; }
.k-reviews-score{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:40px; color:var(--k-text-tertiary); font-size:14px; }
.k-reviews-score .stars{ display:flex; gap:2px; color:var(--k-amber); }
.k-reviews-score .k-icon{ width:16px; height:16px; }

.k-review-form{ background:var(--k-white); border-radius:var(--k-radius-lg); padding:clamp(20px,3vw,36px); margin-bottom:48px; }
.k-review-form .row,
.k-lead-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.k-review-form label,
.k-lead-form label{ display:block; font-family:var(--font-display); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--k-text-secondary); margin-bottom:6px; }
.k-review-form input[type=text],
.k-review-form input[type=email],
.k-review-form textarea,
.k-lead-form input[type=text],
.k-lead-form input[type=email],
.k-lead-form textarea{
  width:100%; border:1px solid rgba(46,42,38,.18); border-radius:10px;
  padding:12px 14px; font-family:var(--font-body); font-size:14.5px;
  background:var(--k-bg-light); color:var(--k-charcoal);
}
.k-review-form textarea{ min-height:110px; resize:vertical; }
.k-review-form .stars-input{ display:flex; gap:4px; margin-bottom:18px; color:var(--k-amber); }
.k-review-form .stars-input .k-icon{ width:22px; height:22px; }

/* Lead form: vive dentro de una tarjeta blanca (k-lead-card), así que usa
   el fondo body/beige para que los inputs no se pierdan contra la card. */
.k-lead-form{
  background:var(--k-bg-light); padding:20px; border-radius:var(--k-radius-md);
}
.k-lead-form .wpcf7-form-control-wrap{ display:block; margin-bottom:14px; }
.k-review-form .wpcf7-submit,
.k-lead-form .wpcf7-submit{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  padding:16px 30px; border-radius:999px; border:none; cursor:pointer;
  background:var(--k-amber); color:var(--k-charcoal); box-shadow:0 8px 20px rgba(232,163,61,.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.k-lead-form .wpcf7-submit{ width:100%; }
.k-review-form .wpcf7-submit:hover,
.k-lead-form .wpcf7-submit:hover{ filter:brightness(.92); transform:translateY(-2px); }
/* S8 (reseñas), estilo guia-gratis: botón terra oscuro en vez de ámbar. */
.k-review-form .wpcf7-submit{ background:var(--k-terra-dark); color:var(--k-white); box-shadow:0 8px 20px rgba(155,94,60,.35); }
.k-review-form .wpcf7-submit:hover{ background:var(--k-terra-deep); filter:none; box-shadow:0 12px 24px rgba(127,72,44,.42); }
.k-review-form .wpcf7-not-valid-tip,
.k-lead-form .wpcf7-not-valid-tip{ font-size:12.5px; color:var(--k-terracotta); margin-top:4px; }
.k-review-form .wpcf7-response-output,
.k-lead-form .wpcf7-response-output{ font-size:13px; border-radius:8px; margin-top:12px; }
.k-lead-note{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--k-text-tertiary); margin:0 0 20px; }
.k-lead-note .k-icon{ width:15px; height:15px; color:var(--k-olive); flex:none; }

.k-review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.k-review-card{ background:var(--k-white); border-radius:var(--k-radius-md); padding:20px; border:1px solid rgba(46,42,38,.08); }
.k-review-card.hidden{ display:none; }
.k-review-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.k-review-stars{ display:flex; gap:2px; color:var(--k-amber); }
.k-review-stars .k-icon{ width:13px; height:13px; }
.k-review-name{ font-family:var(--font-display); font-weight:700; font-size:13.5px; }
.k-review-text{ font-size:14px; line-height:1.5; color:var(--k-text-secondary); margin:0; }
.k-review-more{ text-align:center; margin-top:30px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.k-faq{ background:var(--k-cream); }
.k-faq-wrap{ max-width:760px; margin:0 auto; }
.k-faq-item{
  background:var(--k-white); border:1px solid rgba(46,42,38,.1);
  border-radius:var(--k-radius-sm); margin-bottom:10px; overflow:hidden;
}
.k-faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:14px; padding:18px 20px;
  font-family:var(--font-display); font-weight:700; font-size:15.5px;
  color:var(--k-charcoal);
}
.k-faq-item summary::-webkit-details-marker{ display:none; }
.k-faq-item summary .k-icon{ flex:none; color:var(--k-terracotta); transition:transform .2s ease; }
.k-faq-item[open] summary .k-icon{ transform:rotate(180deg); }
.k-faq-body{ padding:0 20px 20px; font-size:14.5px; line-height:1.55; color:var(--k-text-secondary); }

/* ==========================================================================
   VALUE PROPS (landing guía gratis)
   ========================================================================== */
.k-value{ background:var(--k-bg-light); }
.k-value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.k-value-card{ text-align:center; padding:8px; }
.k-value-icon{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  background:var(--k-bg-card-dark); color:var(--k-terracotta);
  display:flex; align-items:center; justify-content:center;
}
.k-value-icon .k-icon{ width:26px; height:26px; }
.k-value-title{ font-family:var(--font-display); font-weight:700; font-size:17px; margin:0 0 6px; }
.k-value-desc{ font-size:14px; line-height:1.5; color:var(--k-text-secondary); }
.k-value-grid-2{ grid-template-columns:repeat(2,1fr); max-width:768px; margin:20px auto 0; }

/* Solo guia-gratis: fondo marfil, tarjetas con sombra + animación al hover. */
body.k-page-guia-gratis .k-value{ background:var(--k-cream-2); }
/* "Para quién es" comparte la clase .k-value con "Por qué funciona" pero
   lleva su propio fondo — sección distinguida con .k-audience. */
body.k-page-guia-gratis .k-value.k-audience{ background:var(--k-terra-light); }
/* Home: "Bloque de confianza" (S6) comparte .k-value — distinguida con .k-trust. */
.k-value.k-trust{ background:var(--k-olive-light); }
body.k-page-guia-gratis .k-value-card,
.k-value.k-trust .k-value-card{
  background:var(--k-white); border-radius:var(--k-radius-md);
  padding:32px 24px; box-shadow:0 6px 18px rgba(61,61,61,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
body.k-page-guia-gratis .k-value-card:hover,
.k-value.k-trust .k-value-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 30px rgba(61,61,61,.14);
}
.k-value.k-trust .k-value-icon{
  background:linear-gradient(135deg, var(--k-terra) 0%, var(--k-terra-dark) 100%);
  color:var(--k-white);
}

/* ==========================================================================
   BARRA DE CONFIANZA (banda oscura y compacta, 3 items)
   ========================================================================== */
.k-trustbar{ background:var(--k-charcoal); padding:26px 0; }
.k-trustbar-row{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
.k-trustbar-item{ display:flex; align-items:center; gap:14px; }
.k-trustbar-icon{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:rgba(232,163,61,.15); color:var(--k-amber);
  display:flex; align-items:center; justify-content:center;
}
.k-trustbar-icon .k-icon{ width:20px; height:20px; }
.k-trustbar-item strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--k-white); }
.k-trustbar-item span{ display:block; font-size:12.5px; color:rgba(255,255,255,.55); }

/* Solo guia-gratis: mismo color que el header, banda más baja, tarjetas más
   separadas, con línea divisoria vertical entre cada una. */
body.k-page-guia-gratis .k-trustbar{ background:var(--k-olive-deep); padding:16px 0; }
body.k-page-guia-gratis .k-trustbar-row{ gap:64px; }
body.k-page-guia-gratis .k-trustbar-item{ position:relative; }
body.k-page-guia-gratis .k-trustbar-item:not(:last-child):after{
  content:""; position:absolute; top:50%; right:-32px; transform:translateY(-50%);
  width:1px; height:36px; background:rgba(255,255,255,.2);
}

/* ==========================================================================
   UPSELL EN 2 COLUMNAS (lista + panel de oferta)
   ========================================================================== */
.k-upsell2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.k-upsell2-list{ display:grid; gap:12px; margin-top:16px; }
.k-upsell2-list li{ display:flex; gap:10px; font-size:14.5px; color:var(--k-text-secondary); }
.k-upsell2-list .k-icon{ color:var(--k-olive); width:17px; height:17px; margin-top:2px; flex:none; }
.k-upsell2-panel{
  background:var(--k-bg-card); border-radius:var(--k-radius-lg);
  padding:clamp(24px,3vw,36px); text-align:center; border:1px solid rgba(46,42,38,.08);
}
.k-upsell2-panel .k-btn{ width:100%; }
.k-upsell2-panel .below-link{ margin-top:14px; font-size:13px; color:var(--k-text-tertiary); }
.k-upsell2-panel .below-link a{ color:var(--k-terracotta); text-decoration:underline; }

/* ==========================================================================
   SOLUCIÓN (landing guía gratis)
   ========================================================================== */
.k-solution{ background:var(--k-bg-body); }
.k-solution-inner{ max-width:680px; margin:0 auto; text-align:center; }
.k-solution-inner p{ text-align:left; }
.k-solution-formula{
  background:var(--k-charcoal); color:var(--k-amber); border-radius:16px;
  padding:18px 24px; margin:24px 0; font-family:var(--font-display);
  font-weight:800; font-size:clamp(16px,2.4vw,20px); text-align:center;
}
.k-solution-close{ font-style:italic; color:var(--k-text-tertiary); }

.k-chip-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.k-hero .k-chip-row{ justify-content:flex-start; max-width:none; margin:0 0 14px; }
.k-hero .k-pill{ background:var(--k-white); border-color:var(--k-line); color:var(--k-text-dark); }

/* ==========================================================================
   GUÍA GRATIS VS. LIBRO COMPLETO (home)
   ========================================================================== */
.k-compare{ background:var(--k-white); }
.k-compare-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:start; }
.k-compare-head{ position:sticky; top:100px; }
.k-compare-body p{ font-size:15.5px; line-height:1.65; color:var(--k-text-secondary); margin:0 0 18px; }
.k-compare-body p:last-child{ margin-bottom:0; }
.k-compare-body strong{ color:var(--k-text-dark); }

/* ==========================================================================
   OFERTA DE LA GUÍA (2 columnas: hojas + bonus)
   ========================================================================== */
.k-details{ background:var(--k-bg-light); }
/* Home: "Para quién es / no es" comparte .k-details — distinguida con .k-fit. */
.k-details.k-fit{ background:var(--k-cream-2); }
.k-details.k-fit .k-details-col:last-child{ background:var(--k-terra-light); border:none; }
.k-details-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.k-details-col{ background:var(--k-white); border-radius:var(--k-radius-md); padding:26px; border:1px solid rgba(46,42,38,.08); }
.k-details-col h3{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:17px; margin:0 0 16px; }
.k-details-col h3 .k-icon{ color:var(--k-terracotta); width:20px; height:20px; }
.k-details-list{ display:grid; gap:12px; }
.k-details-list li{ display:flex; gap:10px; font-size:14.5px; color:var(--k-text-secondary); }
.k-details-list > li > b{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--k-bg-card-dark); color:var(--k-terracotta); font-family:var(--font-display); font-weight:800; font-size:11px; display:flex; align-items:center; justify-content:center; }

/* ==========================================================================
   CARACTERÍSTICAS + SPECS
   ========================================================================== */
.k-features{ background:var(--k-bg-body); }
.k-features-card{ background:var(--k-white); border-radius:var(--k-radius-lg); padding:clamp(24px,4vw,40px); border:1px solid rgba(46,42,38,.08); }
.k-features-check{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px; }
.k-features-check li{ display:flex; gap:10px; font-size:15px; color:var(--k-text-secondary); }
.k-features-check .k-icon{ color:var(--k-olive); width:18px; height:18px; margin-top:2px; flex:none; }
.k-specs{ display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid rgba(46,42,38,.1); padding-top:20px; }

/* ==========================================================================
   ERRORES COMUNES
   ========================================================================== */
.k-mistakes{ background:var(--k-bg-light); }

/* Solo guia-gratis: muestra de receta real (Pollo casero con verduras y
   arroz) — card con foto, badge animado, pasos numerados y tip. */
body.k-page-guia-gratis .k-mistakes{
	background:var(--k-cream-2);
	position:relative;
	overflow:hidden;
}
body.k-page-guia-gratis .k-mistakes:before,
body.k-page-guia-gratis .k-mistakes:after{
	content:"";
	position:absolute;
	border-radius:50%;
	filter:blur(50px);
	z-index:0;
	pointer-events:none;
}
body.k-page-guia-gratis .k-mistakes:before{
	width:340px; height:340px; top:-120px; left:-100px;
	background:radial-gradient(circle, rgba(196,132,90,.28) 0%, rgba(196,132,90,0) 70%);
}
body.k-page-guia-gratis .k-mistakes:after{
	width:380px; height:380px; bottom:-140px; right:-110px;
	background:radial-gradient(circle, rgba(107,122,74,.24) 0%, rgba(107,122,74,0) 70%);
}
body.k-page-guia-gratis .k-mistakes .k-wrap{ position:relative; z-index:1; }

body.k-page-guia-gratis .k-recipe-card{
	display:grid;
	grid-template-columns:.85fr 1.15fr;
	gap:0;
	background:var(--k-white);
	border-radius:var(--k-radius-lg);
	box-shadow:0 20px 44px rgba(61,61,61,.14);
	overflow:hidden;
	max-width:980px;
	margin:0 auto;
}
body.k-page-guia-gratis .k-recipe-photo{ position:relative; overflow:hidden; }
body.k-page-guia-gratis .k-recipe-photo img{
	width:100%; height:100%; object-fit:cover; display:block;
	transition:transform .5s ease;
}
body.k-page-guia-gratis .k-recipe-card:hover .k-recipe-photo img{ transform:scale(1.06); }
body.k-page-guia-gratis .k-recipe-badge{
	position:absolute; top:18px; left:18px;
	background:linear-gradient(135deg, var(--k-terra) 0%, var(--k-terra-dark) 100%);
	color:var(--k-white);
	font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.4px;
	padding:7px 14px; border-radius:999px;
	box-shadow:0 8px 18px rgba(155,94,60,.4);
	animation:k-badge-pulse 2.6s ease-in-out infinite;
}
@keyframes k-badge-pulse{
	0%, 100%{ transform:scale(1); }
	50%{ transform:scale(1.07); }
}
body.k-page-guia-gratis .k-recipe-body{ padding:32px 36px; }
body.k-page-guia-gratis .k-recipe-title{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 8px; color:var(--k-text-dark); }
body.k-page-guia-gratis .k-recipe-desc{ font-size:14.5px; line-height:1.5; color:var(--k-text-mid); margin:0 0 18px; }
body.k-page-guia-gratis .k-recipe-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
body.k-page-guia-gratis .k-recipe-meta-item{
	background:var(--k-cream-2); border-radius:var(--k-radius-sm); padding:10px 8px; text-align:center;
	border:1px solid rgba(196,132,90,.14);
}
body.k-page-guia-gratis .k-recipe-meta-item .l{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--k-text-tertiary); margin-bottom:3px; }
body.k-page-guia-gratis .k-recipe-meta-item .v{ display:block; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--k-terra-dark); }
body.k-page-guia-gratis .k-recipe-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:20px; }
body.k-page-guia-gratis .k-recipe-colh{ font-family:var(--font-display); font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--k-olive); margin:0 0 12px; }
body.k-page-guia-gratis .k-recipe-ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
body.k-page-guia-gratis .k-recipe-ul li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.4; color:var(--k-text-secondary); }
body.k-page-guia-gratis .k-recipe-ul .k-icon{ width:15px; height:15px; color:var(--k-olive); flex:none; margin-top:2px; }
body.k-page-guia-gratis .k-recipe-ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; position:relative; }
body.k-page-guia-gratis .k-recipe-ol li{ display:flex; align-items:flex-start; gap:12px; font-size:13.5px; line-height:1.45; color:var(--k-text-secondary); }
body.k-page-guia-gratis .k-recipe-step-num{
	flex:none; width:24px; height:24px; border-radius:50%;
	background:linear-gradient(135deg, var(--k-terra) 0%, var(--k-terra-dark) 100%);
	color:var(--k-white); font-family:var(--font-display); font-weight:700; font-size:12px;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 4px 10px rgba(155,94,60,.35);
}
body.k-page-guia-gratis .k-recipe-tip{
	display:flex; gap:12px; align-items:flex-start;
	background:var(--k-olive-light); border-radius:var(--k-radius-md);
	padding:14px 16px; border-left:3px solid var(--k-olive);
}
body.k-page-guia-gratis .k-recipe-tip p{ margin:0; font-size:13px; line-height:1.5; color:var(--k-text-dark); }
body.k-page-guia-gratis .k-recipe-tip-icon{ flex:none; width:20px; height:20px; color:var(--k-olive); }
body.k-page-guia-gratis .k-recipe-tip-icon .k-icon{ width:20px; height:20px; }
body.k-page-guia-gratis .k-recipe-note{ margin-top:22px; font-size:13.5px; color:var(--k-text-mid); position:relative; z-index:1; }
body.k-page-guia-gratis .k-mistakes .gb-button-wrapper{ display:flex; justify-content:center; }

/* ==========================================================================
   UPSELL (Sistema 4×4 completo)
   ========================================================================== */
.k-upsell{ background:var(--k-bg-body); }
/* Solo guia-gratis: fondo marfil + panel de oferta con más vida (gradiente
   cálido, borde e insignia de acento, sombra con color, animación sutil). */
body.k-page-guia-gratis .k-upsell{ background:var(--k-cream-2); }
body.k-page-guia-gratis .k-upsell2-panel{
  background:linear-gradient(160deg, var(--k-terra-light) 0%, var(--k-white) 68%);
  border:2px solid var(--k-terra);
  box-shadow:0 20px 44px rgba(196,132,90,.32);
  position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
body.k-page-guia-gratis .k-upsell2-panel:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 54px rgba(196,132,90,.4);
}
body.k-page-guia-gratis .k-upsell2-badge{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:var(--k-terra); color:var(--k-white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px rgba(196,132,90,.45);
}
body.k-page-guia-gratis .k-upsell2-badge .k-icon{ width:24px; height:24px; }
body.k-page-guia-gratis .k-upsell2-tag{ background:var(--k-terra-dark); color:var(--k-white); }
body.k-page-guia-gratis .k-upsell2-price{
  font-family:var(--font-display); font-weight:800; font-size:36px;
  color:var(--k-terra-dark); margin:14px 0 4px;
}
.k-upsell-card{
  background:var(--k-charcoal); color:var(--k-white); border-radius:var(--k-radius-lg);
  padding:clamp(28px,4vw,48px); text-align:center;
}
.k-upsell-card .k-kicker{ justify-content:center; }
.k-upsell-card .k-h2{ color:var(--k-white); max-width:560px; margin-left:auto; margin-right:auto; }
.k-upsell-list{ display:grid; gap:10px; max-width:480px; margin:24px auto 28px; text-align:left; }
.k-upsell-list li{ display:flex; gap:10px; font-size:14.5px; color:rgba(255,255,255,.82); }
.k-upsell-list .k-icon{ color:var(--k-amber); width:17px; height:17px; margin-top:2px; flex:none; }
.k-upsell-price{ font-family:var(--font-display); font-weight:900; font-size:34px; color:var(--k-amber); margin-bottom:6px; }
.k-upsell-note{ font-size:13px; color:rgba(255,255,255,.6); margin-bottom:24px; }

/* La notificación flotante de prueba social se eliminó en LM-1 junto con su
   JS (initFomo). Mostraba descargas inventadas; CLAUDE.md prohíbe las falsas
   notificaciones. Ninguna página publicada imprimía .k-fomo. */

/* ==========================================================================
   BANNER DE COOKIES
   ========================================================================== */
.k-cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:160;
  background:var(--k-charcoal); color:rgba(255,255,255,.85);
  padding:16px 20px; display:none;
  align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 -8px 24px rgba(0,0,0,.2);
}
.k-cookies.is-visible{ display:flex; }
.k-cookies p{ margin:0; font-size:13.5px; max-width:560px; }
.k-cookies a{ color:var(--k-amber); text-decoration:underline; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.k-footer{ background:var(--k-olive-deep); color:rgba(255,255,255,.75); padding:44px 0 30px; }

/* Solo guia-gratis: sombra sutil entre secciones, efecto de capas superpuestas. */
body.k-page-guia-gratis .k-hero,
body.k-page-guia-gratis .k-trustbar,
body.k-page-guia-gratis .k-value,
body.k-page-guia-gratis .k-pain,
body.k-page-guia-gratis .k-details,
body.k-page-guia-gratis .k-offer,
body.k-page-guia-gratis .k-mistakes,
body.k-page-guia-gratis .k-testi,
body.k-page-guia-gratis .k-upsell,
body.k-page-guia-gratis .k-cta-band,
body.k-page-guia-gratis .k-footer{
	position:relative;
	box-shadow:0 -10px 22px -14px rgba(0,0,0,.24);
}
.k-footer-inner{ max-width:var(--k-container); margin:0 auto 30px; padding:0 24px; display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:30px; }
.k-footer-inner > *{ min-width:0; }
.k-footer-col h4{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:var(--k-white); margin:0 0 14px; }
.k-footer-brand p{ margin:12px 0 0; font-size:13.5px; line-height:1.5; max-width:320px; color:rgba(255,255,255,.6); }
.k-footer-stats{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:16px 0 0; font-size:13px; color:rgba(255,255,255,.6); }
.k-footer-stats b{ color:var(--k-amber); font-family:var(--font-display); }
.k-footer-links{ display:flex; flex-direction:column; gap:12px; }
.k-footer-links a{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(255,255,255,.7); }
.k-footer-links a:hover{ color:var(--k-white); }
.k-footer-links .k-icon{ width:15px; height:15px; }
.k-footer-note p{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.6); margin:0; }
.k-footer-note p b{ color:rgba(255,255,255,.85); }
.k-footer-legal{ max-width:var(--k-container); margin:0 auto; padding:20px 24px 0; border-top:1px solid rgba(255,255,255,.1); text-align:center; }
.k-footer-legal p{ font-size:12px; line-height:1.6; color:rgba(255,255,255,.5); margin:0; }
.k-footer-legal a{ color:rgba(255,255,255,.7); text-decoration:underline; }
.k-copy{ color:rgba(255,255,255,.4) !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px){
  .k-formula{ grid-template-columns:1fr; }
  .k-method-grid{ grid-template-columns:1fr; }
  .k-offer-grid{ grid-template-columns:1fr; }
  .k-printable-grid{ grid-template-columns:1fr; }
  .k-printable-grid > *:first-child{ order:2; }
  .k-steps{ grid-template-columns:repeat(2,1fr); }
  .k-bonus-grid{ grid-template-columns:repeat(2,1fr); }
  .k-testi-grid{ grid-template-columns:repeat(2,1fr); }
  .k-review-grid{ grid-template-columns:repeat(2,1fr); }
  .k-footer-inner{ grid-template-columns:1fr; gap:32px; }
  .k-value-grid{ grid-template-columns:1fr; }
  .k-details-grid{ grid-template-columns:1fr; }
  .k-compare-grid{ grid-template-columns:1fr; }
  .k-compare-head{ position:static; }
  .k-upsell2-grid{ grid-template-columns:1fr; }
  .k-trustbar-row{ flex-direction:column; align-items:center; gap:18px; }
  body.k-page-guia-gratis .k-trustbar-row{ gap:18px; }
  body.k-page-guia-gratis .k-trustbar-item:after{ display:none; }
  .k-hero-inner{ grid-template-columns:1fr; gap:36px; }
  body.k-page-guia-gratis .k-hero-inner{ grid-template-columns:1fr; gap:36px; }
  .k-hero-photo img{ width:75%; height:auto; }
  body.k-page-guia-gratis .k-hero-photo img{ width:75%; height:auto; }
  body.k-page-guia-gratis .k-recipe-card{ grid-template-columns:1fr; }
  body.k-page-guia-gratis .k-recipe-photo{ height:260px; }
}

@media (max-width: 620px){
  .k-wrap{ padding:0 18px; }
  .k-hero-inner{ padding:0 18px; }
  .k-footer-inner{ padding:0 18px; }
  .k-section{ padding:44px 0; }
  .k-steps{ grid-template-columns:1fr 1fr; gap:10px; }
  .k-bonus-grid{ grid-template-columns:1fr; }
  .k-testi-grid{ grid-template-columns:1fr; }
  .k-review-grid{ grid-template-columns:1fr; }
  .k-pain-item{ padding:14px; }
  .k-review-form .row,
  .k-lead-form .row{ grid-template-columns:1fr; }
  .k-timer{ gap:6px; }
  .k-formula{ padding:28px 20px; }
  .k-topbar-inner{ padding:12px 18px; gap:10px; }
  .k-topbar-inner .k-logo-tag,
  .k-topbar-inner .k-logo-rule{ display:none; }

  /* CTAs de una sola columna se agarran mejor con el pulgar a lo ancho */
  .k-hero-cta .k-btn,
  .k-cta-band .k-btn,
  .k-printable-grid .k-btn,
  .k-upsell-card .k-btn{ width:100%; }

  .k-features-check{ grid-template-columns:1fr; }
  .k-cookies{ padding:14px; justify-content:flex-start; text-align:left; }
  body.k-page-guia-gratis .k-recipe-body{ padding:24px 20px; }
  body.k-page-guia-gratis .k-recipe-cols{ grid-template-columns:1fr; gap:20px; }
  body.k-page-guia-gratis .k-recipe-meta{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 480px){
  .k-topbar-inner{ padding:10px 14px; }
  .k-logo-icon{ width:26px; height:28px; background-size:153.6px 102.4px; background-position:-26px -33px; }
  .k-logo-mark{ font-size:16px; letter-spacing:1px; }
  .k-topbar .k-btn .full{ display:none; }
  .k-topbar .k-btn .short{ display:inline; }
  .k-topbar .k-btn{ padding:9px 16px; font-size:12.5px; }
}

@media (max-width: 620px){
  /* Red de seguridad: si algún botón queda con texto largo y sin regla de
     ancho completo, que ajuste en dos líneas en vez de desbordar. */
  .k-btn{ white-space:normal; text-align:center; }
  /* "Come Bien" tiene que entrar en una sola línea (ver .k-h1-line arriba);
     a este ancho el tamaño de V1 ya no entra, así que baja un poco. */
  body.home .k-hero .k-h1{ font-size:clamp(2rem, 10vw, 5.7rem); }
}

@media (max-width: 400px){
  .k-steps{ grid-template-columns:1fr; }
  .k-timer-unit .n{ font-size:17px; }
  .k-timer-unit .l{ font-size:9px; }
  .k-price-new{ font-size:32px; }
  .k-h1{ font-size:clamp(26px,7vw,34px); }
}

/* ==========================================================================
   FASE LEGAL — aviso de privacidad y opt-in de marketing del lead form
   Vive sobre la tarjeta oliva oscura de /guia-gratis/, de ahí el texto claro.
   ========================================================================== */
.k-lead-form .k-form-legal{
  font-size:13px; line-height:1.55; margin:2px 0 14px;
  color:rgba(255,255,255,.68);
}
.k-lead-form .k-form-legal a{
  color:var(--k-amber); text-decoration:underline; text-underline-offset:2px;
}
.k-lead-form .k-form-legal a:hover{ color:#fff; }

.k-lead-form .k-form-optin{ margin:0 0 18px; }
.k-lead-form .k-form-optin .wpcf7-form-control-wrap{ display:inline; margin:0; }
.k-lead-form .k-form-optin .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.k-lead-form .k-form-optin label{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-family:var(--font-body); font-weight:400; font-size:13.5px;
  line-height:1.5; letter-spacing:0; text-transform:none;
  color:rgba(255,255,255,.82); margin:0;
}
.k-lead-form .k-form-optin input[type=checkbox]{
  flex:none; width:19px; height:19px; margin:1px 0 0;
  accent-color:var(--k-amber); cursor:pointer;
}
.k-lead-form .k-form-optin .wpcf7-list-item-label{ flex:1; }

/* ==========================================================================
   LM-1 — /guia-gratis/ (Page ID 21)
   Todo lo de abajo va scopeado en body.k-page-guia-gratis. La sales page
   (Page 8) comparte esta hoja, así que nada de aquí puede alcanzarla.
   ========================================================================== */

/* ---------- Sección "cómo funciona": 4 bases + 4 giros ---------- */
body.k-page-guia-gratis .k-lm-system{ background:var(--k-cream-2); }
body.k-page-guia-gratis .k-lm-system,
body.k-page-guia-gratis .k-lm-matrix{
  position:relative;
  box-shadow:0 -10px 22px -14px rgba(0,0,0,.24);
}

body.k-page-guia-gratis .k-lm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
body.k-page-guia-gratis .k-lm-grid > *{ min-width:0; }
body.k-page-guia-gratis .k-lm-col{
  background:var(--k-white); border:1px solid rgba(46,42,38,.08);
  border-radius:var(--k-radius-md); padding:26px;
  display:flex; flex-direction:column;
}
body.k-page-guia-gratis .k-lm-colh{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-family:var(--font-display); font-weight:700; font-size:17px;
  color:var(--k-charcoal);
}
body.k-page-guia-gratis .k-lm-colh .k-icon{ width:20px; height:20px; color:var(--k-terracotta); }

body.k-page-guia-gratis .k-lm-bases{ display:grid; gap:14px; }
body.k-page-guia-gratis .k-lm-bases > li{ display:flex; align-items:flex-start; gap:12px; }
body.k-page-guia-gratis .k-lm-bases > li > .k-lm-num{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--k-bg-card-dark); color:var(--k-terracotta);
  font-family:var(--font-display); font-weight:800; font-size:11.5px;
  display:flex; align-items:center; justify-content:center;
}
body.k-page-guia-gratis .k-lm-bases > li > .k-lm-body{ display:block; min-width:0; }
body.k-page-guia-gratis .k-lm-bases > li > .k-lm-body > b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:15.5px; color:var(--k-charcoal); margin-bottom:2px;
}
body.k-page-guia-gratis .k-lm-bases .k-lm-meta{
  display:block; font-size:14px; line-height:1.5; color:var(--k-text-mid);
}
body.k-page-guia-gratis .k-lm-foot{
  margin:18px 0 0; padding-top:14px; border-top:1px solid var(--k-line);
  font-size:13.5px; line-height:1.5; color:var(--k-text-mid);
}

/* La fórmula 4 x 4 = 16: el mecanismo entero en una línea. */
body.k-page-guia-gratis .k-lm-formula{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:clamp(14px,3vw,34px);
  margin:28px auto 0; padding:26px clamp(18px,4vw,38px);
  background:var(--k-terra-light); border-radius:var(--k-radius-lg);
}
body.k-page-guia-gratis .k-lm-formula-item{ text-align:center; }
body.k-page-guia-gratis .k-lm-formula-item > b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,5vw,44px); line-height:1; color:var(--k-terra-dark);
}
body.k-page-guia-gratis .k-lm-formula-item > span{
  display:block; margin-top:6px; font-size:13.5px; letter-spacing:.4px;
  text-transform:uppercase; font-family:var(--font-display); font-weight:700;
  color:var(--k-text-mid);
}
body.k-page-guia-gratis .k-lm-formula-item--total > b{ color:var(--k-olive-deep); }
body.k-page-guia-gratis .k-lm-formula-op{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(20px,3vw,28px); color:var(--k-terracotta); line-height:1;
}

/* ---------- Sección Matriz 4x4: render real de la página 4 del PDF ---------- */
body.k-page-guia-gratis .k-lm-matrix{ background:var(--k-bg-card); }
body.k-page-guia-gratis .k-lm-figure{ margin:0; text-align:center; }
body.k-page-guia-gratis .k-lm-figure img{
  width:100%; max-width:660px; height:auto; margin:0 auto;
  border-radius:var(--k-radius-md);
  border:1px solid rgba(46,42,38,.1);
  box-shadow:0 24px 60px rgba(61,61,61,.16);
}
body.k-page-guia-gratis .k-lm-figure figcaption{
  margin-top:14px; font-size:13.5px; color:var(--k-text-mid);
}

/* ---------- Sección "qué encuentras": mockup + índice real ---------- */
body.k-page-guia-gratis .k-lm-contents{
  display:grid; grid-template-columns:340px 1fr; gap:clamp(24px,4vw,48px);
  align-items:center;
}
body.k-page-guia-gratis .k-lm-contents > *{ min-width:0; }
body.k-page-guia-gratis .k-lm-contents-photo img{
  width:100%; height:auto; max-width:340px; margin:0 auto;
}
body.k-page-guia-gratis .k-lm-contents-list .k-details-list{ gap:14px; }
body.k-page-guia-gratis .k-lm-contents-list .k-details-list > li{ font-size:15px; line-height:1.55; }
body.k-page-guia-gratis .k-lm-contents-list .k-details-list > li > b{ width:24px; height:24px; font-size:11.5px; margin-top:1px; }
body.k-page-guia-gratis .k-lm-cta-inline{ margin-top:26px; }

/* ---------- Microtipografía: subir el texto auxiliar más pequeño ---------- */
body.k-page-guia-gratis .k-kicker{ font-size:13px; letter-spacing:1.8px; }
body.k-page-guia-gratis .k-hero-note{ font-size:14px; }
body.k-page-guia-gratis .k-trustbar-item strong{ font-size:15px; }
body.k-page-guia-gratis .k-trustbar-item span{ font-size:13.5px; color:rgba(255,255,255,.68); }
body.k-page-guia-gratis .k-recipe-note{ font-size:14.5px; }
body.k-page-guia-gratis .k-footer-legal p{ font-size:13px; }
body.k-page-guia-gratis .k-lead-form .k-form-legal{ font-size:13.5px; }
body.k-page-guia-gratis .k-topbar .k-btn{ font-size:13.5px; }

/* ---------- Áreas táctiles ---------- */
/* El control del opt-in sube a 24x24 y la fila entera (label) queda como
   objetivo táctil: con dos líneas de texto pasa holgadamente de 44px. */
body.k-page-guia-gratis .k-lead-form .k-form-optin label{
  min-height:44px; align-items:center; padding:6px 0; font-size:14px;
}
body.k-page-guia-gratis .k-lead-form .k-form-optin input[type=checkbox]{
  width:24px; height:24px; margin:0;
}
/* Enlaces de texto: se les da altura de toque sin convertirlos en botones.
   El padding va solo en vertical: en horizontal separaba el enlace del punto
   final y de los separadores " · " del pie. */
body.k-page-guia-gratis .k-lead-form .k-form-legal a,
body.k-page-guia-gratis .k-footer-legal a{
  display:inline-block; padding:6px 0;
}
body.k-page-guia-gratis .k-footer-links a{ padding:7px 0; }

/* ---------- Focus visible ---------- */
/* El anillo por defecto del navegador casi no se ve sobre la tarjeta oliva
   del formulario. Este es de marca y funciona sobre crema y sobre oscuro. */
body.k-page-guia-gratis a:focus-visible,
body.k-page-guia-gratis button:focus-visible,
body.k-page-guia-gratis input:focus-visible,
body.k-page-guia-gratis textarea:focus-visible,
body.k-page-guia-gratis select:focus-visible,
body.k-page-guia-gratis summary:focus-visible,
body.k-page-guia-gratis [tabindex]:focus-visible{
  outline:3px solid var(--k-terra-dark);
  outline-offset:3px;
  border-radius:4px;
}
/* Sobre los fondos oscuros (topbar, tarjeta del formulario, footer) el terra
   no contrasta: ahí el anillo pasa a ámbar. */
body.k-page-guia-gratis .k-topbar a:focus-visible,
body.k-page-guia-gratis .k-topbar button:focus-visible,
body.k-page-guia-gratis .k-lead-card a:focus-visible,
body.k-page-guia-gratis .k-lead-card input:focus-visible,
body.k-page-guia-gratis .k-lead-card button:focus-visible,
body.k-page-guia-gratis .k-footer a:focus-visible{
  outline-color:var(--k-amber);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  body.k-page-guia-gratis .k-lm-grid{ grid-template-columns:1fr; }
  body.k-page-guia-gratis .k-lm-contents{ grid-template-columns:1fr; gap:28px; }
  body.k-page-guia-gratis .k-lm-contents-photo img{ max-width:280px; }
  body.k-page-guia-gratis .k-lm-cta-inline{ display:flex; justify-content:center; }
  body.k-page-guia-gratis .k-lm-figure img{ max-width:560px; }

  /* El mockup del hero llegaba a ~730px de alto en tablet porque heredaba
     width:75% del contenedor a una columna. Se limita por ancho real. */
  body.k-page-guia-gratis .k-hero-photo img{ width:auto; max-width:340px; }
}

@media (max-width: 620px){
  body.k-page-guia-gratis .k-lm-col{ padding:22px 20px; }
  body.k-page-guia-gratis .k-lm-formula{ gap:12px; padding:22px 16px; }
  body.k-page-guia-gratis .k-lm-formula-op{ font-size:20px; }
  body.k-page-guia-gratis .k-hero-photo img{ width:78%; max-width:none; }
  body.k-page-guia-gratis .k-lm-contents-photo img{ max-width:62vw; }
  body.k-page-guia-gratis .k-lm-cta-inline .k-btn{ width:100%; }
}

/* ---------- Honeypot antispam del formulario del lead magnet ---------- */
/* Se saca del flujo visual sin display:none ni visibility:hidden: hay bots
   que descartan los campos ocultos por esas dos propiedades, y entonces la
   trampa no serviría de nada. Queda fuera de pantalla, sin tamaño efectivo
   y fuera del orden de tabulación (tabindex="-1" en el propio input). */
body.k-page-guia-gratis .k-lead-form .k-hp{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
  margin:0; padding:0;
}

/* ==========================================================================
   MICRO-01 · PARIDAD VISUAL CON LA SALES PAGE
   --------------------------------------------------------------------------
   La sales page (klivanta-sales.css) refinó los estados del CTA: hover a
   #D9942F con un desplazamiento de 1px, transición de 160ms y foco en tinta.
   Aquí se replican esos mismos valores para que los botones de las dos
   páginas se comporten igual, no sólo se vean igual en reposo.

   Todo va scopeado en `body.k-page-guia-gratis`: no puede alcanzar a la sales
   page, a /gracias-oferta/ ni a las páginas legales.
   ========================================================================== */
body.k-page-guia-gratis .k-btn.k-btn-amber,
body.k-page-guia-gratis .k-lead-form .wpcf7-submit{
  /* La base usa --k-charcoal (#2E2A26); la sales page renderiza #2E2A2A.
     Se fija el valor exacto para que la paridad sea literal. */
  color:#2E2A2A;
  transition:transform 160ms cubic-bezier(.4,0,.2,1),
             box-shadow 160ms cubic-bezier(.4,0,.2,1),
             background-color 160ms cubic-bezier(.4,0,.2,1);
}
body.k-page-guia-gratis .k-btn.k-btn-amber:hover{
  background:#D9942F; color:#2E2A2A; filter:none;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(232,163,61,.42);
}
/* La banda de cierre daba al CTA una sombra negra (rgba(0,0,0,.18)) mientras el
   resto de botones llevan el halo ámbar. Se unifica con los demás. */
body.k-page-guia-gratis .k-cta-band .k-btn.k-btn-amber{
  box-shadow:0 8px 20px rgba(232,163,61,.34);
}
body.k-page-guia-gratis .k-cta-band .k-btn.k-btn-amber:hover{
  box-shadow:0 12px 26px rgba(232,163,61,.42);
}
body.k-page-guia-gratis .k-btn.k-btn-amber:active,
body.k-page-guia-gratis .k-lead-form .wpcf7-submit:active{
  transform:translateY(0);
}
body.k-page-guia-gratis .k-lead-form .wpcf7-submit:hover{
  transform:translateY(-1px);
}
/* El foco iba en ámbar sobre un botón ámbar: no se distinguía. Pasa a tinta,
   igual que en la sales page. */
body.k-page-guia-gratis .k-btn:focus-visible,
body.k-page-guia-gratis .k-lead-form .wpcf7-submit:focus-visible{
  outline:3px solid #2E2A2A;
  outline-offset:3px;
  transform:none;
}
/* El CTA secundario (`.k-btn-outline`) mantiene su jerarquía propia: la
   landing sí tiene un secundario y la sales page no. Sólo se alinea su foco. */
body.k-page-guia-gratis .k-btn.k-btn-outline:focus-visible{
  outline:3px solid #2E2A2A;
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  body.k-page-guia-gratis .k-btn,
  body.k-page-guia-gratis .k-lead-form .wpcf7-submit{ transition:none; }
  body.k-page-guia-gratis .k-btn:hover,
  body.k-page-guia-gratis .k-lead-form .wpcf7-submit:hover{ transform:none; }
}
@media (max-width: 620px){
  /* En táctil no hay hover: el desplazamiento sólo confundiría. */
  body.k-page-guia-gratis .k-btn:hover,
  body.k-page-guia-gratis .k-lead-form .wpcf7-submit:hover{ transform:none; }
}