/* ==========================================================================
   EntreCuidados — landing pública (index.html). Solo usa variables del
   sistema visual de css/style.css; no redefine nada.
   ========================================================================== */

.pagina-landing .container { max-width: 1040px; }

/* --- Hero --- */
.hero { padding: 54px 0 30px; text-align: center; }

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-accent-dark);
  margin: 0 0 10px;
}

.hero h1 { max-width: 17ch; margin-left: auto; margin-right: auto; }
.hero h1 .marcado { color: var(--color-primary); }

.hero .lead {
  font-size: 1.16rem;
  color: var(--color-text-soft);
  max-width: 56ch;
  margin: 0 auto 26px;
}

.hero-trust {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  font-size: 0.88rem;
  color: var(--color-text-soft);
}
.hero-trust li { white-space: nowrap; }

/* --- La ronda ilustrada (SVG inline) --- */
.ronda-vis { margin: 40px auto 0; max-width: 420px; }
.ronda-vis svg { width: 100%; height: auto; display: block; }

/* --- Sección problema --- */
.problema {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 40px 26px;
  margin-top: 50px;
}
.problema .cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.cifra {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  border: 1px solid var(--color-border);
}
.cifra .numero {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.cifra .detalle { font-size: 0.9rem; color: var(--color-text-soft); }
.problema .fuente-nota { font-size: 0.8rem; color: var(--color-text-soft); margin: 18px 0 0; text-align: center; }

/* --- Cómo funciona (3 pasos) --- */
.pasos {
  counter-reset: paso;
  display: grid;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }

.paso {
  counter-increment: paso;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px 20px;
  position: relative;
}
.paso::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #F2FAF8;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.paso h3 { margin-bottom: 6px; }
.paso p { margin: 0; font-size: 0.95rem; color: var(--color-text-soft); }

/* --- Módulos / features --- */
.modulos {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}
@media (min-width: 700px) { .modulos { grid-template-columns: 1fr 1fr; } }

.modulo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.modulo .emoji { font-size: 1.7rem; flex-shrink: 0; margin-top: 2px; }
.modulo h3 { margin-bottom: 4px; }
.modulo p { margin: 0; font-size: 0.94rem; color: var(--color-text-soft); }
.modulo .pronto {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 6px;
  vertical-align: 2px;
}
.modulo-destacado { border: 2px solid var(--color-primary); }

/* --- Autocuidado (banda cálida) --- */
.autocuidado {
  margin-top: 56px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  color: #F2FAF8;
  padding: 40px 28px;
  text-align: center;
}
.autocuidado h2 { color: inherit; }
.autocuidado p { color: color-mix(in srgb, #F2FAF8 82%, transparent); max-width: 52ch; margin-left: auto; margin-right: auto; }
.autocuidado .btn-ghost { border-color: rgba(242, 250, 248, 0.5); color: #F2FAF8; }
.autocuidado .btn-ghost:hover { border-color: #F2FAF8; color: #F2FAF8; }

/* --- Secciones genéricas --- */
.landing-section { padding: 46px 0 0; }
.landing-section > h2 { text-align: center; }
.landing-section > .sub {
  text-align: center;
  color: var(--color-text-soft);
  max-width: 58ch;
  margin: 0 auto;
}

/* --- CTA final --- */
.cta-final { padding: 60px 0 20px; text-align: center; }