/* ==========================================================================
   portada.css · Secciones exclusivas de la home, según maquetas/home-v16.html
   Se enlaza solo desde / y después de tokens.css.
   ========================================================================== */

/* La medida editorial de estilo.css no rige aquí: cada sección fija la suya */
main p{max-width:none}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero{display:grid;grid-template-columns:.92fr 1.08fr;min-height:82vh;position:relative}
.hero-foto{position:relative;overflow:hidden;min-height:420px}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:34% center}
.hero-texto{
  background-color:#F7EDDD;background-image:var(--textura);
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 7vw 80px 56px;text-align:right;position:relative;overflow:hidden;
}
.hero .kicker{margin-bottom:22px}
.hero h1{
  font-family:var(--titulos);font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  color:var(--negro);font-size:clamp(1.15rem,2.5vw,1.9rem);line-height:1.68;margin-bottom:40px;
}
.hero-p{max-width:29em;margin-left:auto;margin-bottom:22px;font-size:.97rem}
.hero-cta{margin-top:14px}

@media(max-width:920px){
  .hero{grid-template-columns:1fr;min-height:0}
  /* La pintura sube arriba, con marco de aire a los lados */
  .hero-foto{min-height:0;aspect-ratio:4/5;margin:0 20px;order:-1}
  .hero-texto{padding:48px 24px 64px;text-align:center}
  .hero-p{margin-right:auto}
}

/* ── La terapia ──────────────────────────────────────────────────────────── */

.terapia p{max-width:42em;margin-bottom:12px;font-size:.97rem}

/* ── Puedo ayudarte si… ──────────────────────────────────────────────────── */

.ayuda{
  display:grid;grid-template-columns:.8fr 1.6fr .8fr;gap:44px;align-items:center;
  max-width:1240px;margin:0 auto;padding:30px 28px 96px;
}
.ph-img{aspect-ratio:3/4.6;overflow:hidden;position:relative;background:#E9DCCF}
.ph-img img{width:100%;height:100%;object-fit:cover}
.ayuda-centro{max-width:560px;margin:0 auto}
.lista{border-left:1px solid #D9CFC7;padding-left:26px;margin-bottom:28px}
.lista li{list-style:none;position:relative;padding-left:16px;margin-bottom:12px;font-size:.92rem;line-height:1.65}
.lista li::before{content:"•";position:absolute;left:0;color:var(--acento)}
.lista a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acento)}
.lista a:hover{color:var(--boton)}
.lista-sep{border-top:1px solid #D9CFC7;padding-top:26px}

@media(max-width:920px){
  .ayuda{grid-template-columns:1fr;gap:0;padding:10px 24px 72px}
  .ph-lat{display:none}   /* las láminas laterales solo en escritorio */
}

/* ── Presentación ────────────────────────────────────────────────────────── */

.presenta{max-width:640px;margin:0 auto;padding:70px 28px;text-align:left}
.presenta .lead{font-family:var(--display);font-style:italic;font-weight:600;font-size:1rem;color:var(--negro);margin-bottom:18px}
.presenta p{margin-bottom:14px;font-size:.95rem}
.presenta .empezamos{font-family:var(--display);font-style:italic;font-weight:600;letter-spacing:.06em;color:var(--negro);margin:24px 0 28px}

/* ── Pasos ───────────────────────────────────────────────────────────────── */

.pasos{max-width:1100px;margin:0 auto;padding:60px 28px 96px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px}
.paso{border-top:1px solid #CFC4BB;padding-top:24px}
.paso-cab{display:flex;gap:16px;align-items:baseline;margin-bottom:12px}
.paso-num{font-family:var(--titulos);font-weight:500;font-size:1.7rem;color:var(--negro)}
.paso-cab h3{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:.95rem;letter-spacing:.22em;color:var(--negro)}
.paso p{font-size:.9rem;color:var(--texto-suave)}
@media(max-width:920px){.pasos{grid-template-columns:1fr;gap:36px;padding:40px 24px 72px}}

/* ── Bloque vínculo ──────────────────────────────────────────────────────── */

.vinculo{background-color:var(--arena);background-image:var(--textura)}
.vinculo-grid{max-width:1100px;margin:0 auto;padding:96px 28px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.vinculo-grande{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.55;color:var(--negro);margin-bottom:26px;
}
.vinculo-grande strong{font-weight:600}
.vinculo-detalle p{font-size:.94rem;margin-bottom:16px}
.vinculo-foto{aspect-ratio:4/5;overflow:hidden}
.vinculo-foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:920px){.vinculo-grid{grid-template-columns:1fr;gap:32px;padding:72px 24px}}

/* ── Cita central ────────────────────────────────────────────────────────── */

.cita{max-width:760px;margin:0 auto;padding:104px 28px;text-align:center}
.cita p{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.65;color:var(--negro)}

/* ── Banda CTA (lámina con velo claro) ───────────────────────────────────── */

.banda{
  position:relative;text-align:center;padding:120px 28px;overflow:hidden;
  background:linear-gradient(rgba(251,245,236,.78),rgba(251,245,236,.6)),
             url('/imagenes/lamina-luz-banda.jpg') center/cover;
}
.banda h2{
  font-family:var(--titulos);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.05rem,2.3vw,1.5rem);letter-spacing:.14em;color:var(--negro);margin-bottom:32px;
}
/* Enlace secundario discreto bajo el botón */
.banda-alt{
  margin-top:20px;
  font-family:var(--display);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
}
.banda-alt a{color:var(--boton);text-decoration:none;border-bottom:1px solid var(--borde);padding-bottom:3px}
.banda-alt a:hover,.banda-alt a:focus-visible{color:var(--primario);border-bottom-color:var(--primario)}

/* ── Capítulo fe (lámina con velo ámbar oscuro) ──────────────────────────── */

/* La lámina ya es oscura: el velo se aligera, pero sin bajar de lo que el
   texto blanco y los tonos arena necesitan para leerse sobre el foco de luz. */
.fe{
  color:#F2E4D2;
  background:linear-gradient(rgba(72,43,16,.80),rgba(60,36,13,.88)),
             url('/imagenes/lamina-luz-fe.jpg') center/cover;
}
.fe-grid{max-width:1100px;margin:0 auto;padding:110px 28px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.fe-grande{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.6;color:#fff}
.fe-detalle p{font-size:.93rem;margin-bottom:16px}
.fe-detalle .delimita{font-style:italic;font-weight:500;color:#E4CBAD}
.fe-detalle a{color:#fff;font-weight:500;text-underline-offset:4px}
.fe-insti{display:flex;gap:40px;flex-wrap:wrap;margin-top:26px}
.fe-insti div .n{font-family:var(--titulos);font-weight:500;font-size:1rem;color:#fff}
/* Ligeramente más claro que el #DDBE95 de la maqueta: a .62rem sobre el foco
   de luz de la lámina, aquel se quedaba en 4.2:1 y este llega a 5.05:1 */
.fe-insti div .s{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#E9D2AC;margin-top:2px}
.fe-cierre{margin-top:26px}
@media(max-width:920px){.fe-grid{grid-template-columns:1fr;gap:32px;padding:80px 24px}}

/* ── Hola, soy Blanca ────────────────────────────────────────────────────── */

.hola{max-width:1100px;margin:0 auto;padding:96px 28px;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.hola-fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hola-foto{aspect-ratio:3/4;overflow:hidden;position:relative}
.hola-foto img{width:100%;height:100%;object-fit:cover}
.hola-foto.f2 img{object-position:center 65%}
.hola h2{
  font-family:var(--titulos);font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(1rem,2vw,1.4rem);line-height:1.6;color:var(--negro);margin-bottom:22px;
}
.hola p{font-size:.94rem;margin-bottom:16px}
@media(max-width:920px){.hola{grid-template-columns:1fr;gap:32px;padding:72px 24px}}

/* ── Colaboro con ────────────────────────────────────────────────────────── */

.colaboro{padding:64px 28px;border-top:1px solid var(--borde)}
.colaboro-fila{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:56px;flex-wrap:wrap;justify-content:center}
.colaboro-lab{font-family:var(--titulos);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:.94rem;color:var(--negro)}
.insti{text-align:center}
.insti .n{font-family:var(--titulos);font-weight:500;font-size:1.05rem;color:var(--negro);letter-spacing:.04em}
.insti .s{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--texto-suave);margin-top:2px}