/* ==========================================================================
   lp.css · Base compartida de las landings de campaña
   soynoeliajimenez.com — Versens, agosto 2026
   Tokens tomados de la web (Elementor global colors + tipografías).
   ========================================================================== */

:root{
  --burdeos:#622128;
  --burdeos-claro:#7d3037;
  --rojo:#A6192E;
  --arena:#DFD1A7;
  --arena-suave:#EAE0C4;
  --crema:#F5F0E3;
  --crema-claro:#FBF8F1;
  --blanco:#ffffff;
  --tinta:#25282A;
  --texto:#3c4043;
  --gris:#6b6f72;
  --borde:#E3D9C4;

  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Montserrat", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--crema-claro);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--burdeos);
  margin:0;
  font-weight:600;
  line-height:1.15;
  text-wrap:balance;
}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}

/* --- contenedores ------------------------------------------------------- */
.wrap{max-width:1020px;margin:0 auto;padding:0 24px}
.narrow{max-width:730px;margin:0 auto;padding:0 24px}

/* --- aviso de prototipo (se borra al publicar) -------------------------- */
.proto{
  background:var(--burdeos);
  color:var(--arena);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:9px 16px;
  font-weight:600;
}

/* --- tipografía de apoyo ------------------------------------------------ */
.eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rojo);
  font-weight:600;
  margin:0 0 18px;
}
.sec-t{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rojo);
  font-weight:600;
  margin:0 0 16px;
}
.microcopy{font-size:14px;color:var(--gris);margin-top:14px}
.tick{color:var(--burdeos);font-weight:700;flex:none}

/* Hueco pendiente de confirmar con la clienta. Se ve, pero no chilla. */
.pdte{
  border-bottom:1px dotted var(--rojo);
  color:var(--rojo);
  font-style:italic;
  cursor:help;
}

/* --- botones ------------------------------------------------------------ */
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--burdeos);
  color:var(--crema);
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:16px 30px;
  border:0;
  border-radius:3px;
  cursor:pointer;
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}
.cta:hover{background:var(--burdeos-claro);transform:translateY(-1px)}
.cta:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
.cta.ghost{background:transparent;color:var(--burdeos);border:1.5px solid var(--burdeos)}
.cta.ghost:hover{background:var(--arena-suave)}

/* --- bloques comunes ---------------------------------------------------- */
.bloque{padding:56px 0}
.bloque.crema{background:var(--crema);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.bloque h2{font-size:clamp(27px,3.6vw,38px)}

.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tarjeta{border-top:2px solid var(--arena);padding-top:18px}
.tarjeta h3{font-size:20px;margin-bottom:8px}
.tarjeta p{margin:0;font-size:15px}

.listado{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.listado li{display:flex;gap:11px;align-items:flex-start;font-size:16px}

/* --- pie ---------------------------------------------------------------- */
.pie{background:var(--tinta);color:#c9ccce;padding:30px 0;font-size:13.5px}
.pie a{color:var(--arena)}
.pie .legales{margin-top:10px}
.pie .legales a{margin-right:16px}

/* --- responsive --------------------------------------------------------- */
@media (max-width:860px){
  .tarjetas{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cta:hover{transform:none}
}