/* ============================================================
   Tézal Kafenta — LANDING DE CAMPAÑA (estilos específicos)
   Se carga ADEMÁS de styles.css. Reutiliza los componentes de
   marca (.btn, .stars, .compare-grid, .tcard, .faq…) y agrega
   lo propio de una landing: barra de oferta, header mínimo,
   hero de producto, bloque de garantía y CTA fija en móvil.
   Pensada para duplicar por producto (Reishi / Termogénico /
   Capuchino): solo cambian copy, imagen y precio.
   ============================================================ */

/* la landing NO usa el cursor custom ni el preloader: experiencia directa */
body.lp{background:var(--ink)}

/* Barra de oferta (arriba del todo) */
.offer-bar{background:var(--red);color:#fff;text-align:center;font-family:var(--round);
  font-size:12.5px;letter-spacing:.04em;padding:10px 16px;font-weight:500;position:relative;z-index:600}
.offer-bar b{font-weight:700}
.offer-bar .code{border:1px dashed rgba(255,255,255,.6);border-radius:6px;padding:1px 8px;margin-left:4px;font-weight:700;letter-spacing:.1em}

/* Header mínimo (logo + 1 CTA, sin menú = sin fugas) */
.lp-header{position:sticky;top:0;z-index:500;background:rgba(22,21,15,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.lp-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:13px 0}
.lp-header .lp-logo img{height:42px;width:auto;display:block}
.lp-header .btn{padding:11px 22px;font-size:11px}

/* Hero de producto */
.lp-hero{background:linear-gradient(180deg,#F5F1E6,#ECE4D2);border-bottom:1px solid rgba(36,31,21,.1);
  padding:54px 0 60px}
.lp-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.lp-hero .eyebrow{color:var(--red)}
.lp-hero h1{font-family:var(--display);font-weight:800;color:#211F16;letter-spacing:-.02em;
  font-size:clamp(34px,4.6vw,58px);line-height:1.02;margin:18px 0 16px}
.lp-hero h1 em{font-style:normal;color:var(--red)}
.lp-hero .sub{color:#6E6451;font-size:clamp(15px,1.4vw,18px);font-weight:300;max-width:46ch;line-height:1.6;margin-bottom:22px}
.lp-hero .stars{justify-content:flex-start;margin-bottom:20px}
.lp-hero .stars b,.lp-hero .stars small{color:#3a3326}
.lp-price{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.lp-price .now{font-family:var(--display);font-weight:800;font-size:38px;color:#211F16;line-height:1}
.lp-price .was{font-family:var(--round);font-size:18px;color:#9b9484;text-decoration:line-through}
.lp-price .save{font-family:var(--round);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--red);border-radius:20px;padding:5px 11px}
.lp-hero .btn-primary{font-size:14px;padding:19px 40px}
.lp-hero .micro-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;
  font-family:var(--round);font-size:12px;letter-spacing:.04em;color:#6E6451}
.lp-hero .micro-trust span{display:inline-flex;align-items:center;gap:7px}
.lp-hero .micro-trust span::before{content:"✓";color:var(--red);font-weight:800}
.lp-visual{position:relative;display:flex;justify-content:center;align-items:center;
  border-radius:24px;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 16%,#FFFCF5,#E6DCC8);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 40px 80px -44px rgba(60,40,20,.5)}
.lp-visual img{width:78%;filter:drop-shadow(0 26px 40px rgba(60,40,20,.28))}
.lp-visual .lp-badge{position:absolute;top:18px;left:18px;background:var(--red);color:#fff;
  font-family:var(--round);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 13px;border-radius:30px}

/* Bloque de garantía (reversión de riesgo) */
.lp-guarantee{text-align:center}
.lp-guarantee .seal{width:74px;height:74px;border-radius:50%;border:2px solid var(--red);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  font-family:var(--display);font-weight:800;font-size:13px;color:var(--red);line-height:1.05;text-align:center;
  background:radial-gradient(circle at 50% 38%,rgba(227,6,19,.12),transparent)}
.lp-guarantee h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.01em;margin-bottom:16px}
.lp-guarantee p{max-width:54ch;margin:0 auto;color:var(--cream-soft);font-weight:300;font-size:16px}

/* CTA fija en móvil (barra de compra siempre visible) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:540;display:none;
  background:rgba(20,19,14,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:11px 16px}
.sticky-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sticky-cta .sc-price{font-family:var(--display);font-weight:800;font-size:20px;color:var(--cream);line-height:1}
.sticky-cta .sc-price small{display:block;font-family:var(--round);font-weight:400;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.sticky-cta .btn{flex:1;justify-content:center;max-width:230px;padding:15px 22px}

/* Footer mínimo (solo legales — requerido para anuncios) */
.lp-foot{border-top:1px solid var(--line);background:var(--charcoal);padding:34px 0;text-align:center}
.lp-foot img{height:40px;margin:0 auto 16px}
.lp-foot .links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-family:var(--round);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-soft)}
.lp-foot .links a:hover{color:var(--red)}
.lp-foot .copy{font-family:var(--round);font-size:11px;color:var(--muted);margin-top:20px}

/* Estrellas del hero en CAFÉ (sobre crema, rojo/crema se perdía) */
.lp-hero .stars .s{color:var(--coffee)}

/* 2a imagen del hero (cambio de imagen, como en las tarjetas) */
.lp-visual-alt{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .6s var(--ease);z-index:1;pointer-events:none}
.lp-visual .lp-badge{z-index:3}
@media (hover:hover){ .lp-visual:hover .lp-visual-alt{opacity:1} }   /* desktop: al pasar el cursor */
@media (hover:none){ .lp-visual-alt{animation:lpFlip 6.4s ease-in-out infinite} } /* móvil: cross-fade auto */
@keyframes lpFlip{0%,36%{opacity:0} 50%,86%{opacity:1} 100%{opacity:0}}

@media (max-width:860px){
  .lp-hero .wrap{grid-template-columns:1fr;gap:34px;text-align:center}
  .lp-hero .stars,.lp-price,.lp-hero .micro-trust{justify-content:center}
  .lp-hero .sub{margin-inline:auto}
  .lp-visual{max-width:420px;margin:0 auto;width:100%;order:-1}
}
@media (max-width:620px){
  .sticky-cta{display:block}
  body.lp{padding-bottom:78px}            /* deja aire para la barra fija */
  .lp-header .btn{display:none}           /* en móvil el CTA vive en la barra fija */
  .offer-bar{font-size:11.5px;padding:9px 12px}
}