/* Myriam Molina · Psicóloga General Sanitaria — diseño de la plantilla `arquitectura` (minimalista y editorial)
   con la paleta y las fuentes que eligió ella (5-oct-2026): blanco roto #F8F7F3, beige arena #DDD3C5,
   verde oliva #7B8368 y gris #8E8E89; Cormorant Garamond + Montserrat.
   El oliva y el gris tal cual no llegan a contraste AA con texto pequeño (3,7 y 3,1 sobre el blanco roto):
   van en filetes, cifras y titulares grandes; el texto pequeño usa sus versiones hondas. */
:root{
  --crema:#F8F7F3;        /* blanco roto: fondo */
  --papel:#EEE9E1;        /* beige arena aclarado: secciones alternas */
  --arena:#DDD3C5;        /* beige arena: «terapia» y marcos de foto */
  --oliva:#7B8368;        /* verde oliva de su marca: acentos grandes */
  --gris:#8E8E89;         /* gris de su marca: filetes */
  --choco:#2E302A;        /* tinta: gris oliva casi negro */
  --choco-hondo:#3D4134;  /* pie */
  --salvia:#5C6349;       /* oliva hondo (AA 5,9:1): etiquetas, botones y contacto */
  --suave:#5F6152;
  --linea:rgba(142,142,137,.42);
  --crema-suave:rgba(248,247,243,.92);
  --crema-linea:rgba(248,247,243,.28);

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Montserrat", "Avenir Next", system-ui, sans-serif;

  /* escala tipográfica */
  --t-h1:clamp(3rem, 6.4vw, 6.6rem);
  --t-h2:clamp(2.5rem, 4.8vw, 4.4rem);
  --t-h3:clamp(2rem, 3.1vw, 3.1rem);
  --t-frase:clamp(1.85rem, 4.4vw, 3.05rem);
  --t-lead:clamp(1.02rem, 1.15vw, 1.12rem);
  --t-etiqueta:.9rem;

  /* espaciado */
  --gut:clamp(20px, 5vw, 72px);
  --ancho:1520px;
  --borde:max(var(--gut), (100vw - var(--ancho)) / 2 + var(--gut));
  --seccion:clamp(96px, 12vw, 176px);
  --nav-h:84px;

  --ease:cubic-bezier(.65, 0, .2, 1);
  --suelta:cubic-bezier(.2, .7, .1, 1);
}

/* ---------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--crema); scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--crema); color:var(--choco);
  font:400 .97rem/1.75 var(--sans); letter-spacing:0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,blockquote,ol,ul,dl,dd{ margin:0; }
ol,ul{ padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:300; letter-spacing:-.012em; text-wrap:balance; }
h2{ font-size:var(--t-h2); line-height:1.02; }
h3{ font-size:var(--t-h3); line-height:1.08; }
p{ text-wrap:pretty; }
::selection{ background:var(--choco); color:var(--crema); }
:focus-visible{ outline:1px solid currentColor; outline-offset:5px; }

.saltar{
  position:absolute; left:var(--gut); top:12px; z-index:60; padding:12px 20px; border-radius:999px;
  background:var(--choco); color:var(--crema); font:400 .9rem/1 var(--sans);
  transform:translateY(-200%); transition:transform .3s var(--ease);
}
.saltar:focus{ transform:none; }

main > section{ padding:var(--seccion) var(--borde); }

/* ---------- piezas comunes */
.etiqueta{ font:400 var(--t-etiqueta)/1.3 var(--sans); color:var(--salvia); }

.marco{ overflow:hidden; background:var(--arena); }
.marco img{ width:100%; height:100%; object-fit:cover; }

.boton{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; white-space:nowrap;
  padding:0 30px; border:1px solid var(--choco); border-radius:999px;
  font:400 .72rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.boton:hover{ background:var(--choco); color:var(--crema); }

.cabecera{ display:grid; gap:20px; max-width:860px; margin-bottom:clamp(64px, 8vw, 112px); }
.cabecera__sub{ font-size:var(--t-lead); color:var(--suave); max-width:46ch; }
.cabecera--doble{ max-width:none; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); align-items:end; gap:20px 8vw; }
.cabecera--doble > div{ display:grid; gap:20px; }

/* ---------- cabecera de la página */
.nav{
  position:fixed; inset:0 0 auto; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-inline:var(--borde);
  transition:transform .6s var(--ease), background-color .4s ease, box-shadow .4s ease;
}
.nav.en-cima{ position:absolute; }
.nav.is-solida{ background:rgba(248,247,243,.9); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 var(--linea); }
.nav.is-oculta{ transform:translateY(-100%); }
.nav__marca{ display:flex; align-items:center; gap:14px; padding-block:8px; font:300 clamp(1.35rem, 1.6vw, 1.6rem)/1 var(--serif); letter-spacing:-.005em; }
.nav__marca img{ width:clamp(44px, 4vw, 54px); }
.nav__enlaces{ display:flex; gap:clamp(22px, 2.6vw, 40px); }
.nav__enlaces a{
  font:400 .95rem/1 var(--sans); padding:10px 0;
  background:linear-gradient(currentColor, currentColor) left calc(100% - 2px) / 0 1px no-repeat; transition:background-size .45s var(--ease);
}
.nav__enlaces a:hover, .nav__enlaces a[aria-current="true"]{ background-size:100% 1px; }
.nav__boton{ display:none; }

/* ---------- portada */
.portada{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap:clamp(40px, 6vw, 112px); align-items:center;
  padding-top:calc(var(--nav-h) + clamp(24px, 4vw, 56px)) !important; padding-bottom:clamp(40px, 5vw, 72px) !important;
}
.portada__texto{ display:grid; gap:30px; justify-items:start; }
.portada h1{ font-size:var(--t-h1); line-height:.98; letter-spacing:-.025em; }
.portada h1 span{ display:block; }
.portada__intro{ font-size:var(--t-lead); max-width:38ch; color:var(--suave); }
.portada__acciones{ margin-top:6px; }
.portada__foto .marco{ margin-left:auto; aspect-ratio:4/5; max-height:calc(100svh - var(--nav-h) - 140px); min-height:420px; }

/* ---------- proyecto */
.proyecto{ background:var(--arena); display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 96px); align-items:end; }
.proyecto__foto{ min-width:0; }
.proyecto .marco{ aspect-ratio:720/495; background:var(--papel); }
.proyecto__texto{ display:grid; gap:22px; max-width:440px; }
.proyecto h2{ font-size:clamp(2.4rem, 4.2vw, 4rem); }
.proyecto__lema{ font:400 clamp(1.4rem, 1.9vw, 1.7rem)/1.3 var(--serif); }

/* ---------- contacto */
.contacto{ background:var(--salvia); color:var(--crema); display:grid; gap:28px; justify-items:start; }
.contacto .etiqueta{ color:var(--crema-suave); }
.contacto h2{ font-size:clamp(2.8rem, 6.6vw, 6.2rem); line-height:1; letter-spacing:-.02em; }
.contacto h2 span{ display:block; }
.contacto__intro{ max-width:44ch; font-size:var(--t-lead); color:var(--crema-suave); }
.contacto__datos{ width:100%; margin-top:clamp(48px, 6vw, 88px); display:grid; grid-template-columns:repeat(3, 1fr); gap:0 24px; border-top:1px solid var(--crema-linea); }
.contacto__datos div{ padding-top:24px; display:grid; gap:6px; align-content:start; }
.contacto__datos dt{ font:400 var(--t-etiqueta)/1.3 var(--sans); color:var(--crema-suave); }
.contacto__datos dd{ font:300 1.35rem/1.3 var(--serif); }
.contacto__datos a{ background:linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition:background-size .45s var(--ease); }
.contacto__datos a:hover{ background-size:100% 1px; }

/* ---------- pie */
.pie{
  background:var(--choco-hondo); color:var(--crema-suave);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px 56px;
  padding:56px var(--borde) calc(56px + env(safe-area-inset-bottom));
  font-size:.85rem; line-height:1.6;
}
.pie__logo{ width:84px; }
.pie__datos{ display:grid; gap:2px; }
.pie a{ color:var(--crema); }
.pie__datos a, .pie__arriba{ background:linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition:background-size .45s var(--ease); }
.pie__datos a:hover, .pie__arriba:hover{ background-size:100% 1px; }
.pie__arriba{ padding:10px 0; }

/* ---------- movimiento (solo con JS; sin JS todo se ve) */
.js .sube{ opacity:0; transform:translateY(26px); animation:sube 1.2s var(--suelta) forwards; }
.js .portada__texto .sube:nth-child(2){ animation-delay:.1s; }
.js .portada__texto .sube:nth-child(3){ animation-delay:.2s; }
.js .portada__texto .sube:nth-child(4){ animation-delay:.3s; }
@keyframes sube{ to{ opacity:1; transform:none; } }
.js .portada .abre{ clip-path:inset(16% 0 16% 0); animation:abre 1.6s var(--ease) .05s forwards; }
.js .portada .abre img{ transform:scale(1.12); animation:acerca 2.2s var(--suelta) .05s forwards; }
@keyframes abre{ to{ clip-path:inset(0 0 0 0); } }
@keyframes acerca{ to{ transform:scale(1); } }

.js .revela{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--suelta), transform 1s var(--suelta); }
.js .revela.visto{ opacity:1; transform:none; }
/* las fotos no se desvanecen: se abren de arriba abajo. El recorte va en la imagen y NO en el marco
   observado: con el marco recortado a cero, IntersectionObserver no lo ve nunca y la foto no aparece */
.js .abre.revela{ opacity:1; transform:none; }
.js .abre.revela img{ clip-path:inset(0 0 100% 0); transform:scale(1.1); transition:clip-path 1.3s var(--ease), transform 1.8s var(--suelta); }
.js .abre.revela.visto img{ clip-path:inset(0 0 0 0); transform:scale(1); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .sube, .js .revela, .js .abre, .js .abre img{ opacity:1 !important; transform:none !important; clip-path:none !important; animation:none !important; transition:none !important; }
}

/* ---------- tablet */
@media (max-width:1020px){
  .proyecto{ grid-template-columns:1fr; align-items:start; }
  .proyecto__texto{ max-width:600px; }
}

/* ---------- móvil grande / tablet vertical */
@media (max-width:820px){
  :root{ --nav-h:68px; }
  .nav__boton{
    display:grid; place-content:center; gap:7px; width:48px; height:48px; margin-right:-12px;
    background:none; border:0; color:var(--choco); cursor:pointer; position:relative; z-index:2;
  }
  .nav__boton span{ display:block; width:24px; height:1px; background:currentColor; transition:transform .4s var(--ease); }
  .nav__boton[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
  .nav__boton[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }
  .nav__enlaces{
    position:fixed; inset:0; z-index:1; height:100dvh; flex-direction:column; justify-content:center; gap:6px;
    padding:var(--nav-h) var(--gut); background:var(--crema);
    opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s;
  }
  .nav__enlaces a{ font:300 clamp(2.4rem, 9vw, 3rem)/1.2 var(--serif); letter-spacing:-.01em; padding:6px 0; background-position:left calc(100% - 10px); }
  .nav__marca{ position:relative; z-index:2; }
  .menu-abierto{ overflow:hidden; }
  .menu-abierto .nav__enlaces{ opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
  /* backdrop-filter y transform convierten la nav en el contenedor de los fixed: el menú se quedaría en 68 px */
  .menu-abierto .nav{ -webkit-backdrop-filter:none; backdrop-filter:none; transform:none; background:transparent; box-shadow:none; }

  .portada{ grid-template-columns:1fr; min-height:0; row-gap:48px; }
  .portada h1{ font-size:clamp(2.6rem, 11.6vw, 5.4rem); }
  .portada__foto .marco{ max-height:none; min-height:0; aspect-ratio:4/3; }

}

/* ---------- móvil */
@media (max-width:640px){
  .portada__foto .marco{ aspect-ratio:4/5; }


  .cabecera--doble{ grid-template-columns:1fr; }

  .contacto__datos{ grid-template-columns:1fr; }
  .contacto__datos div{ padding:20px 0; border-bottom:1px solid var(--crema-linea); }

  .pie{ grid-template-columns:1fr; justify-items:start; gap:20px; }
}
/* en 320 px «Solicitar una primera sesión» no cabe en una línea con el espaciado de la plantilla */
@media (max-width:400px){
  .portada__texto{ min-width:0; }
  .boton{ padding:12px 22px; letter-spacing:.14em; white-space:normal; text-align:center; line-height:1.4; }
}

/* ---------- añadidos para Myriam */
/* sobre mí: foto fija a la izquierda y texto a la derecha (la rejilla del «equipo» de la plantilla, para una persona) */
.sobre{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(16px, 2.4vw, 32px); }
.sobre .cabecera{ grid-column:1 / -1; }
.sobre__foto{ grid-column:1 / 6; align-self:start; position:sticky; top:calc(var(--nav-h) + 24px); }
.sobre__foto .marco{ aspect-ratio:4/5; }
.sobre__texto{ grid-column:7 / -1; display:grid; gap:28px; align-content:start; max-width:560px; }
.sobre__texto p{ font-size:var(--t-lead); color:var(--suave); }
.sobre__texto .sobre__cierre{ margin-top:clamp(24px, 4vw, 56px); font:300 clamp(1.55rem, 2.2vw, 2rem)/1.28 var(--serif); color:var(--choco); }

/* aviso legal y privacidad, plegados en el pie */
.pie__legal{ grid-column:1 / -1; display:grid; gap:8px; padding-top:24px; border-top:1px solid var(--crema-linea); }
.pie__legal summary{ cursor:pointer; color:var(--crema); width:max-content; }
.pie__legal p{ max-width:70ch; margin-top:8px; }

@media (max-width:1020px){
  .sobre__foto{ grid-column:1 / -1; position:static; }
  .sobre__foto .marco{ aspect-ratio:4/3; }
  .sobre__foto img{ object-position:50% 30%; }
  .sobre__texto{ grid-column:1 / -1; margin-top:clamp(40px, 6vw, 56px); }
}
@media (max-width:640px){
  .sobre__foto .marco{ aspect-ratio:4/5; }
}
/* ---------- 5-oct-2026: estructura nueva con los textos de Myriam */
/* portada: su nombre como titular y el título profesional debajo, como lo escribió ella */
.portada h1 .portada__cargo{ margin-top:18px; font:400 clamp(.95rem, 1.2vw, 1.1rem)/1.3 var(--sans); letter-spacing:.02em; color:var(--salvia); }
.portada__intro{ max-width:42ch; }
.portada__modalidad{ font:400 1.15rem/1.3 var(--serif); color:var(--choco); padding-top:22px; border-top:1px solid var(--linea); }

/* terapia: sobre el beige arena el oliva hondo no llega a AA en letra pequeña */
.proyecto .etiqueta{ color:var(--choco); }
/* el gris oliva del resto de la web se queda en 4,3:1 sobre el beige arena: aquí el texto va en tinta */
.proyecto__texto p{ color:var(--choco); }
.proyecto__texto .proyecto__lema{ margin-top:8px; }

/* consulta y tarifas */
.consulta{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px clamp(40px, 8vw, 140px); align-items:end; }
.consulta__cabecera{ display:grid; gap:20px; }
.consulta h2{ font-size:clamp(2.3rem, 3.8vw, 3.7rem); max-width:16ch; }
.tarifas{ border-top:1px solid var(--linea); }
.tarifas div{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:22px 0; border-bottom:1px solid var(--linea); }
.tarifas dt{ font:400 1.02rem/1.35 var(--sans); }
.consulta__accion{ grid-column:2; }
.tarifas dd{ font:300 clamp(2.4rem, 4vw, 3.4rem)/1 var(--serif); color:var(--oliva); white-space:nowrap; }

/* contacto: dos botones, como los pidió ella */
.contacto h2{ font-size:clamp(2.6rem, 5.6vw, 5.4rem); }
.contacto__acciones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }
.boton--claro{ border-color:var(--crema); color:var(--crema); }
.boton--claro:hover{ background:var(--crema); color:var(--salvia); }
.boton--relleno{ background:var(--crema); border-color:var(--crema); color:var(--salvia); }
.boton--relleno:hover{ background:transparent; color:var(--crema); }
.contacto__datos dd{ overflow-wrap:normal; }

/* frase de cierre */
.cierre{ display:grid; gap:28px; justify-items:start; }
.cierre__frase{ max-width:24ch; font:300 var(--t-frase)/1.18 var(--serif); letter-spacing:-.01em; }
.cierre__firma{ font:400 var(--t-etiqueta)/1.3 var(--sans); color:var(--salvia); padding-top:20px; border-top:1px solid var(--oliva); }

@media (max-width:1020px){
  .consulta__accion{ grid-column:auto; }
  .consulta{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .contacto__acciones{ flex-direction:column; align-items:stretch; width:100%; }
  .contacto__acciones .boton{ white-space:normal; text-align:center; }
}

/* ---------- 5-oct-2026 (tarde): fotos, logo y fondo de seda que mandó ella */
/* cierre sobre su fondo de seda, con el logo completo (sin «Psicología clínica»: ver generar.py) */
.cierre{
  justify-items:center; text-align:center; gap:32px;
  background:linear-gradient(rgba(248,247,243,.42), rgba(248,247,243,.42)), url("../img/seda-ancho.jpg") center 40% / cover no-repeat var(--papel);
}
.cierre__logo{ width:clamp(150px, 15vw, 210px); }
.cierre__frase{ max-width:26ch; }
.cierre__firma{ color:var(--choco); }
@media (max-width:820px){
  .cierre{ background-image:linear-gradient(rgba(248,247,243,.42), rgba(248,247,243,.42)), url("../img/seda-movil.jpg"); background-position:center; }
}
.pie__logo{ width:96px; }
/* el selfi de la portada tiene la cara en el tercio de arriba; la foto de estudio, también */
.portada__foto img{ object-position:50% 30%; }

/* ---------- 5-oct-2026 (noche): web acortada a lo que mandó ella; solo sus dos fotos (portada y sobre mí) */
/* terapia individual + consulta + tarifas, en una sola sección sobre el beige arena */
.consulta{ background:var(--arena); align-items:end; }
.consulta__texto{ display:grid; gap:22px; max-width:520px; }
.consulta .etiqueta{ color:var(--choco); }
.consulta h2{ font-size:clamp(2.4rem, 4.2vw, 4rem); max-width:none; }
.consulta__texto p{ color:var(--choco); }
.consulta__texto .consulta__lema{ margin-top:8px; font:400 clamp(1.4rem, 1.9vw, 1.7rem)/1.3 var(--serif); }
.consulta .tarifas{ border-color:rgba(46,48,42,.25); }
.consulta .tarifas div{ border-color:rgba(46,48,42,.25); }
.consulta .tarifas dd{ color:var(--salvia); }

/* contacto: teléfono y correo */
.contacto__datos{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:900px; }
@media (max-width:640px){ .contacto__datos{ grid-template-columns:1fr; } }

/* móvil: secciones algo más juntas */
@media (max-width:640px){
  :root{ --seccion:72px; }
  .cabecera{ margin-bottom:40px; }
}

/* ---------- 5-oct-2026 (noche, 3): tres apartados (sanitaria, maternidad, forense), cada enunciado con su desplegable */
.area{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:48px clamp(40px, 8vw, 140px); align-items:start; }
.area--papel{ background:var(--papel); }
.area__cabecera{ display:grid; gap:20px; position:sticky; top:calc(var(--nav-h) + 32px); }
.area h2{ font-size:clamp(2.3rem, 3.8vw, 3.7rem); }
.desplegables{ border-top:1px solid var(--linea); }
.desplegable{ border-bottom:1px solid var(--linea); }
.desplegable summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 0; cursor:pointer; list-style:none;
}
.desplegable summary::-webkit-details-marker{ display:none; }
.desplegable h3{ font-size:clamp(1.5rem, 2vw, 2rem); line-height:1.15; transition:color .3s ease; }
.desplegable summary:hover h3{ color:var(--salvia); }
/* + que se vuelve − al abrir */
.desplegable__signo{ position:relative; flex:none; width:16px; height:16px; color:var(--salvia); }
.desplegable__signo::before, .desplegable__signo::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background:currentColor; transition:transform .4s var(--ease); }
.desplegable__signo::after{ transform:rotate(90deg); }
.desplegable[open] .desplegable__signo::after{ transform:rotate(0); }
.desplegable__cuerpo{ padding:0 40px 28px 0; color:var(--suave); max-width:60ch; }
.desplegable__cuerpo li{ position:relative; padding:6px 0 6px 26px; }
.desplegable__cuerpo li::before{ content:""; position:absolute; left:0; top:1.3em; width:12px; height:1px; background:var(--oliva); }
/* apertura suave donde el navegador sabe animar a height:auto; en el resto se abre de golpe */
@supports (interpolate-size:allow-keywords){
  .desplegable{ interpolate-size:allow-keywords; }
  .desplegable::details-content{ height:0; overflow:hidden; transition:height .45s var(--ease), content-visibility .45s allow-discrete; }
  .desplegable[open]::details-content{ height:auto; }
}
@media (prefers-reduced-motion:reduce){ .desplegable::details-content, .desplegable__signo::before, .desplegable__signo::after{ transition:none !important; } }
@media (max-width:1020px){
  .area{ grid-template-columns:1fr; }
  .area__cabecera{ position:static; }
}
@media (max-width:640px){
  .desplegable summary{ padding:20px 0; }
  .desplegable__cuerpo{ padding-right:0; }
}

/* maternidad: el texto (título + desplegables) a la izquierda y sus tres fotos al lado, a la misma altura, para que se lean
   juntos. En tablet y móvil las fotos van justo debajo del título. Etalonadas igual (menos saturación, algo más cálidas,
   negros levantados) para que casen entre sí y con el oliva. */
.area--maternidad{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows:auto 1fr; grid-template-areas:"cab fotos" "lista fotos"; row-gap:clamp(40px, 5vw, 64px); }
.area--maternidad .area__cabecera{ grid-area:cab; position:static; }
.area--maternidad .desplegables{ grid-area:lista; align-self:start; }
.collage{ grid-area:fotos; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:clamp(10px, 1.4vw, 18px); }
.collage .marco{ aspect-ratio:4/5; }
/* la del embarazo, alta, ocupa las dos filas: ella de cuerpo entero entre el mar y el monte */
.collage .marco:first-child{ grid-row:1 / 3; aspect-ratio:auto; }
.js .collage .marco:nth-child(2) img{ transition-delay:.15s; }
.js .collage .marco:nth-child(3) img{ transition-delay:.3s; }
@media (max-width:1020px){
  .area--maternidad{ grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"cab" "fotos" "lista"; row-gap:clamp(32px, 6vw, 48px); }
  /* en tablet, a todo el ancho el collage pasaba de 1000 px de alto */
  .collage{ max-width:640px; }
}

/* 6-oct: sus dos titulaciones en «Sobre mí», cada una en su línea */
.titulos{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.titulos li{ position:relative; padding-left:34px; font:400 clamp(1.35rem, 1.9vw, 1.7rem)/1.25 var(--serif); color:var(--choco); }
.titulos li::before{ content:""; position:absolute; left:0; top:.68em; width:20px; height:1px; background:var(--oliva); }

/* 6-oct: párrafos justificados (lo pidió ella: «que el final del párrafo se vea recto»). Con guiones para que no queden huecos. */
.portada__intro, .sobre__texto p:not(.sobre__cierre), .desplegable__cuerpo p, .consulta__texto p:not(.consulta__lema){
  text-align:justify; hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:6 3 3;
}

/* 6-oct: «Cómo trabajo» resumido dentro de «Sobre mí» (antes era sección propia y repetía «Entiendo la terapia…»); sus negritas en Montserrat 600 */
.metodo__texto{ display:grid; gap:22px; max-width:62ch; }
.metodo__texto p{ font-size:var(--t-lead); color:var(--suave); }
.metodo__texto strong, .desplegable__cuerpo strong{ font-weight:600; color:var(--choco); }
.metodo__texto .metodo__entrada{ font:300 clamp(1.45rem, 2vw, 1.85rem)/1.3 var(--serif); color:var(--choco); }
.metodo__entrada strong, .metodo__cierre strong{ font-weight:500; }
.metodo__texto .metodo__destacado{ margin:14px 0; padding-left:28px; border-left:1px solid var(--oliva); font:300 clamp(1.4rem, 1.9vw, 1.75rem)/1.32 var(--serif); color:var(--choco); }
.metodo__texto .metodo__cierre{ margin-top:10px; font:300 clamp(1.45rem, 2vw, 1.85rem)/1.3 var(--serif); color:var(--choco); }
.metodo__texto p:not(.metodo__entrada):not(.metodo__destacado):not(.metodo__cierre){ text-align:justify; hyphens:auto; -webkit-hyphens:auto; }

/* desplegables con su texto: párrafo de entrada, viñetas y subapartados (maternidad) */
.desplegable__cuerpo{ display:grid; gap:16px; }
.desplegable__cuerpo ul{ margin:0; padding:0; list-style:none; }
.subtema{ display:grid; gap:6px; padding-top:6px; }
.subtema h4{ font:500 1.3rem/1.2 var(--serif); color:var(--choco); }
.desplegable__cuerpo .subtema p{ font-size:.97rem; }
.area__cabecera .cabecera__sub + .cabecera__sub{ margin-top:-4px; }
.area__cabecera .cabecera__sub{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.subtema h4{ margin:0; }
.subtema + .subtema{ padding-top:14px; }
/* con «Deporte» son siete enlaces: entre 821 y 1100 px no cabían al lado del logo */
@media (min-width:821px) and (max-width:1100px){
  .nav__enlaces{ gap:16px; }
  .nav__enlaces a{ font-size:.86rem; }
}

/* 6-oct: sus fotos de pareja dentro de «Relación de pareja», entre la entrada y los subapartados */
.desplegable__fotos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px, 1.4vw, 16px); margin:6px 0 4px; }
.desplegable__fotos .marco{ aspect-ratio:4/5; background:var(--arena); }
.desplegable__fotos img{ width:100%; height:100%; object-fit:cover; display:block; }

/* en «Sobre mí» las frases en serif no se justifican (la regla general de .sobre__texto p las cogía) */
.sobre__texto p.metodo__entrada, .sobre__texto p.metodo__destacado, .sobre__texto p.metodo__cierre{ text-align:left; hyphens:manual; -webkit-hyphens:manual; }
/* 6-oct: cierre más corto (ocupaba una pantalla entera justo después de Contacto) */
main > section.cierre{ padding-block:clamp(64px, 7vw, 104px); gap:22px; }
.cierre__logo{ width:clamp(110px, 10vw, 150px); }