@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;600;700&family=Inter:wght@400;600;700&display=swap');

/* =========================
   BASE
   ========================= */
*{ box-sizing: border-box; }

:root{
  --fondo:#F7F4EE;
  --papel:#FFFFFF;
  --papel2:#F3EFE6;
  --texto:#1E1E1E;
  --sec:#6B6B6B;
  --linea:#DAD6CE;
  --acento:#0E2A3A;
  --serif:"IBM Plex Serif", Georgia, serif;
  --sans:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

body{
  margin:0;
  background-color:white;
  color:var(--texto);
  font-family:var(--sans);
  line-height:1.7;
}

/* (se queda como lo tienes) */
.invisible{
  /* ... */
}

.contenedor{
  max-width: 980px;
  margin:0 auto;
  padding:0 22px;
}

/* Negrita suave */
b{ font-weight:550; }

/* =========================
   LAYOUT / BLOQUES
   ========================= */
.bloque{ padding:120px 0; }

.bloque--hero{ padding-top:28px; margin-top:40px; }
.bloque--cierre{ padding-bottom:0px; }
.bloque--precio{ padding-top:0px; }

.bloque--suave{
  background:var(--papel2);
  padding:70px 0;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:40px;
}

/* =========================
   HEADER
   ========================= */
.barra{
  width:100%;
  border-bottom:1px solid var(--linea);
  background:rgba(247,244,238,.9);
  position:sticky;
  top:0;
}

.barra__contenido{ padding:14px 22px; }

.barra__marca{
  display:flex;
  align-items:center;
  width:100%;
}

.marca-principal{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.contenedor-icono{
  width:50px;
  height:50px;
}

.marca-icono{
  width:50px;
  height:50px;
  opacity:0.4;
  line-height:1;
  border-radius:50%;
  margin-top:-5px;
}

/* ✅ CORREGIDO: bloque texto como unidad, centrado internamente */
.marca-texto{
  display:flex;
  flex-direction:column;
  align-items:center;     /* centra las dos líneas */
  text-align:center;      /* centra el texto */
  margin-left:auto;       /* mantiene bloque alineado a la derecha del header */
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--sec);
  font-weight:600;
}

/* ✅ CORREGIDO: sublínea con control real */
.marca-sub{
  margin-top:4px;
  font-size:11px;
  letter-spacing:0.18em;
  opacity:0.85;
}

/* =========================
   TARJETAS + TIPOGRAFÍA BASE
   ========================= */
.tarjeta{
  background:var(--papel);
  width:90%;
  border:1px solid var(--linea);
  border-radius:14px;
  padding:28px;
  max-width:860px;
  margin:0 auto;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  font-size:13px;
  color:var(--sec);
}

.tarjeta--plana{
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  margin-bottom:70px;
}

h2{
  font-family:var(--serif);
  margin:0 0 14px;
  font-size:18px;
  font-weight:600;
}

p{ margin:20px 0 14px; }

/* =========================
   HERO
   ========================= */
.hero-card--capas{
  background:#F1ECE1;
  border:1px solid var(--linea);
  border-radius:16px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:center;
  max-width:860px;
  margin:0 auto;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}

.hero-caja{
  background:rgba(255,255,255,.6);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:18px;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
}

/* Contexto */
.objeto__etiqueta{
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#0B1F2A;
  font-weight:800;
  margin:0 0 14px;
}

/* Patrón */
.patron__etiqueta{
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(107,107,107,0.92);
  margin:0 0 8px;
}

.patron__nombre{
  font-family:var(--serif);
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  font-weight:700;
  line-height:1.12;
  margin:0;
}

/* Claim */
.claim{
  font-size:0.92rem;
  font-weight:600;
  color:rgba(107,107,107,0.82);
  text-align:center;
  max-width:62ch;
  margin:0;
}

/* Regla central */
.hero-caja--verdad{
  min-height:200px;
  background:#fff;
  padding:22px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-caja--verdad .titulo{
  font-family:var(--serif);
  font-size:clamp(24px, 3vw, 36px);
  line-height:1.4;
  margin:0;
  color:#B00000;
}

/* CTA */
.hero-cta{
  margin-top:16px;
  width:100%;
  max-width:360px;
  min-height:44px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--acento);
  background:var(--acento);
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  text-decoration: none;
  display: inline-flex;
}

.hero-cta:hover{
  background:#fff;
  border-color:rgba(14,42,58,0.65);
  color:black;
  text-decoration: none;
}

.hero-cta:active{ transform:translateY(1px); text-decoration: none;}

/* Microtexto bajo botón */
.texto-debajo-boton{
  font-size:0.92rem;
  font-weight:600;
  color:rgba(107,107,107,0.82);
  text-align:center;
  max-width:62ch;
  margin:auto;
}

.texto-debajo-boton-sec{
  font-size:0.92rem;
  font-weight:600;
  color:rgba(107,107,107,0.82);
  text-align:center;
  max-width:42ch;
  margin-top:-20px;
}

/* =========================
   BLOQUE “QUÉ NO ES”
   ========================= */
.tarjeta--noes{
  padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}

.tarjeta--noes h2{ font-size:16px; }

.lista-no{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.tarjeta--noes .lista-no li{
  font-size:13px;
  color:rgba(107,107,107,0.9);
}

.lista-no strong{ color:var(--texto); }

/* =========================
   BLOQUE “QUÉ ES”
   ========================= */
.tarjeta--quees{
  padding:20px;
  width:90%;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
}

.tarjeta--quees h2{ font-size:16px; }

.tarjeta--quees p:not(.precio):not(.precio__meta){
  font-size:14px;
  line-height:1.65;
}

/* =========================
   PRECIO
   ========================= */
.precio{
  margin:0 0 4px;
  font-family:var(--serif);
  font-weight:1000;
  font-size:60px;
  color:var(--texto);
}

.precio__meta{
  margin-bottom:-5px;
  color:rgba(107,107,107,0.78);
  font-size:12.5px;
}

.boton-principal-leer{
  min-height:48px;
  padding:10px 20px;
  border-radius:10px;
  border:1px solid rgba(14,42,58,0.55);
  background:var(--papel2);
  color:var(--texto);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  opacity:0.6;
  display:inline-block;
  text-decoration:none;
  text-align:center;
}

.boton-principal-leer:hover{ opacity:0.96; }

/* =========================
   FOOTER
   ========================= */
.pie{
  background: rgba(247,244,238,.70);
  border-top:1px solid var(--linea);
  padding:18px 0;
  margin-top:50px;
}

.pie__texto{
  font-size:13px;
  color:var(--sec);
  margin:0;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:720px){
  .hero-card--capas{ padding:18px; gap:20px; }
  .hero-caja{ padding:14px; }
  .patron__nombre{ font-size:clamp(1.55rem, 6.2vw, 2.05rem); }
  .hero-caja--verdad .titulo{ font-size:clamp(22px, 6.5vw, 30px); line-height:1.2; }
  .precio{ font-size:34px; }
  .bloque--precio{ padding-top:60px; }
}

@media (max-width:640px){
  .barra__marca{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }

  /* ✅ CORREGIDO: mantener centrado en móvil */
  .marca-texto{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:4px;
    white-space:normal;
  }

  .marca-sub{
    font-size:11px;
    letter-spacing:0.18em;
    opacity:0.75;
  }
}

/* =========================
   BOTÓN SECUNDARIO — VOLVER
   ========================= */
.volver{
  display:inline-block;
  margin-top:14px;
  font-size:13px;
  color:rgba(107,107,107,0.85);
  text-decoration:none;
  padding:6px 0;
}

.volver:hover{
  color:rgba(14,42,58,0.85);
  text-decoration:underline;
}

.volver:active{ transform:translateY(1px); }

@media (max-width:720px){
  .precio{ font-size:34px; }
}

/* =========================
   CTA COMPACTO (criterio y pago)
   ========================= */
.hero-cta--compacto{
  width: auto;
  max-width: none;
  display: inline-flex;
  padding: 12px 22px;
}

.volver-detector{
    margin:6px 0 0 0;
    text-align:center;
    font-size:14px;
    opacity:.7;
    line-height:1.25;
}

.micro-cta{
    margin:4px 0 2px 0;
    font-size:13px;
    opacity:.65;
    text-align:center;
    line-height:1.25;
}