/* ==========================================================
   NŌK GUIDE — LANDING DE PRODUCTO (módulo independiente)
   Solo se carga en la página de producto. No toca checkout.
   Para revertir: borrar este archivo + inc/landing/ y restaurar
   single-product.php anterior.
   ========================================================== */

/* --- Hero: pregunta + subtítulo --- */
.nok .hero .h1-pregunta{font-size:clamp(34px,8.2vw,66px);max-width:17ch;line-height:1.02}
.nok .hero .lede{font-size:clamp(21px,3vw,26px);font-style:italic;max-width:30ch;opacity:1;color:var(--papel)}
.nok .hero .hero-detalle{font-size:clamp(17px,2.2vw,19px);max-width:46ch;margin-top:14px;opacity:.82}

/* --- CTA entre secciones --- */
.nok .cta-seccion{margin-top:40px;text-align:center}
.nok .cta-seccion form{display:inline-block}
.nok .cta-seccion .btn{font-size:20px;padding:22px 40px}
.nok .cta-seccion-nota{display:block;margin-top:12px;opacity:.65}

/* --- Contador de guías vendidas (solo se imprime si es verificable) --- */
.nok .contador-ventas{padding:40px 0;border-top:1px solid rgba(241,244,248,.14)}
.nok .contador-ventas .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.nok .contador-cifra{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center}
.nok .contador-num{font-family:var(--f-disp);font-size:clamp(54px,14vw,92px);line-height:1;color:var(--ambar)}
.nok .contador-etq{font-family:var(--f-disp);font-size:clamp(22px,5vw,34px);text-transform:uppercase;letter-spacing:.04em}
.nok .contador-texto{max-width:46ch;font-size:19px;opacity:.9}

/* --- Beneficios --- */
.nok .beneficios{display:grid;grid-template-columns:1fr;gap:14px;margin-top:34px}
.nok .beneficio{background:#fff;border:1px solid rgba(15,23,32,.16);border-top:3px solid var(--ambar);padding:24px 22px}
.nok .beneficio-n{color:var(--ambar-txt);display:block;margin-bottom:10px}
.nok .beneficio h3{font-size:24px;margin-bottom:10px}
.nok .beneficio p{font-size:18px;line-height:1.55;opacity:.92}

/* --- Bonus: qué resuelve cada uno --- */
.nok .bonus-resuelve{margin-top:12px;padding-top:12px;border-top:1px solid rgba(15,23,32,.14);font-size:16px !important}
.nok .bonus-resuelve strong{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ambar-txt);display:block;margin-bottom:4px;font-weight:500}

/* --- Opiniones: carrusel nativo (sin JS) --- */
.nok .resenas-carrusel{display:flex;gap:16px;margin-top:30px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:4px 2px 18px;scrollbar-width:thin}
.nok .resenas-carrusel:focus-visible{outline:3px solid var(--ambar);outline-offset:4px}
.nok .resena{flex:0 0 88%;scroll-snap-align:start;background:#fff;border:1px solid rgba(15,23,32,.16);
  padding:26px 22px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.nok .resena blockquote{font-size:18px;line-height:1.6;font-style:italic;border:none;padding:0;margin:0}
.nok .resena figcaption{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(15,23,32,.14);padding-top:14px}
.nok .resena figcaption b{font-family:var(--f-disp);font-weight:400;font-size:20px;letter-spacing:.03em;text-transform:uppercase}
.nok .resena-badge{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ambar-txt)}
.nok .resena-verificada .resena-badge{color:#1E5A3A}
.nok .resena-estrellas{color:var(--ambar-txt);font-size:20px;letter-spacing:.1em;line-height:1}
.nok .resenas-hint{display:block;margin-top:2px;opacity:.6}
.nok .resenas-nota{margin-top:16px;font-size:15px;opacity:.7;max-width:62ch}

@media(min-width:860px){
  .nok .beneficios{grid-template-columns:repeat(3,1fr);gap:18px}
  .nok .beneficio:last-child{grid-column:1/-1}
  .nok .resena{flex-basis:calc((100% - 32px) / 3)}
  .nok .resenas-hint{display:none}
  .nok .contador-ventas .wrap{flex-direction:row;justify-content:center;gap:40px;text-align:left}
}
@media(min-width:560px) and (max-width:859px){
  .nok .beneficios{grid-template-columns:repeat(2,1fr)}
  .nok .beneficio:last-child{grid-column:1/-1}
  .nok .resena{flex-basis:56%}
}