/* ═══════════════════════════════════════════════════════════════════════
   Paleta "salvia y arcilla" — clara primero.

   La anterior tenía el verde oscuro como fondo dominante, y un sitio de
   fondo oscuro se lee institucional: banca, derecho. Verde bosque sobre
   crema es además la combinación del cuero encuadernado. De ahí que
   pareciera un estudio de abogados.

   Aquí la jerarquía se invierte: lino cálido de fondo, verde solo en lo
   accionable, arcilla en el aparato editorial, y oscuro reservado a dos
   momentos (publicaciones y pie) que dan ritmo sin dominar.

   Contrastes verificados sobre --papel / --papel-2:
     --tinta    11.10 / 10.17      --membrana  4.97 / 4.55
     --gris      5.30 /  4.86      --arcilla   5.22 / 4.78
   Sobre --tinta: --membrana-cl 5.78 · --arcilla-cl 4.75 · --papel 11.10
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --papel:#FAF7F2;
  --papel-2:#F2EDE4;
  --papel-3:#FFFDFA;
  --salvia:#E7EFE8;
  --tinta:#2E3A34;
  --tinta-2:#26302B;
  --texto:#454F49;
  --membrana:#4F7361;
  --membrana-cl:#9FBCA8;
  --arcilla:#8E5C44;
  --arcilla-cl:#C99A7E;
  --gris:#616963;
  --linea:rgba(46,58,52,.14);
  --linea-cl:rgba(250,247,242,.20);
  --lectura:"Spectral",Georgia,serif;
  --ui:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --margen:132px;
}
*{box-sizing:border-box}
/* Toda la escala tipográfica cuelga del rem, así que subir la raíz agranda
   la página entera de una vez y mantiene las proporciones entre títulos,
   cuerpo y etiquetas. 112.5% = 18px de base en vez de los 16px por defecto.
   Las partes en vw de los clamp() no escalan con esto, y está bien: son las
   que ya crecen solas con la pantalla. */
html{font-size:112.5%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--lectura);font-size:1.11rem;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--lectura);font-weight:300;margin:0;line-height:1.14;letter-spacing:-.005em}
p{margin:0 0 1.15em}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.ph{border-bottom:1px dotted var(--arcilla);opacity:.92}
:focus-visible{outline:2px solid var(--membrana);outline-offset:2px}
.on-dark :focus-visible{outline-color:var(--membrana-cl)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--papel);padding:.6rem 1rem}

/* ───────── barra superior ───────── */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,253,250,.93);backdrop-filter:blur(10px);
  color:var(--tinta);border-bottom:1px solid var(--linea);
}
.nav .wrap{display:flex;align-items:center;gap:1.8rem;height:62px}
.marca-nav{font-family:var(--lectura);font-size:1rem;text-decoration:none;white-space:nowrap;letter-spacing:.01em}
.marca-nav em{font-style:italic;color:var(--membrana)}
.nav ul{display:flex;gap:1.5rem;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{
  font-family:var(--ui);font-size:.82rem;text-decoration:none;color:var(--gris);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.2s;
}
.nav ul a:hover{color:var(--tinta);border-color:var(--membrana)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--ui);
  font-size:.85rem;font-weight:500;letter-spacing:.01em;padding:.75rem 1.4rem;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:.2s;
}
.btn-solid{background:var(--membrana);color:var(--papel-3)}
.btn-solid:hover{background:#3F5D4E}
.btn-line{border-color:var(--linea);color:var(--tinta)}
.btn-line:hover{border-color:var(--membrana);background:rgba(79,115,97,.08)}
.btn-ghost{border-color:var(--linea);color:var(--tinta)}
.btn-ghost:hover{border-color:var(--membrana);color:var(--membrana)}
.nav .btn{padding:.55rem 1.1rem}
@media(max-width:980px){.nav ul{display:none}}

/* ───────── portada: agendamiento primero ───────── */
.portada{background:var(--papel);color:var(--tinta);position:relative;overflow:hidden}
/* Abajo a la derecha, asomando bajo la tarjeta de agenda: es la esquina que
   queda libre cuando la rejilla se equilibra. Arriba la tapaba la tarjeta
   entera, y en el centro flotaba sin pertenecer a nada. */
.membrana-fondo{position:absolute;top:auto;bottom:-26%;right:-5%;width:min(560px,44vw);opacity:.18;pointer-events:none}
.membrana-fondo circle,.membrana-fondo path,.membrana-fondo line{fill:none;stroke:var(--membrana);stroke-width:1;vector-effect:non-scaling-stroke}
.portada .wrap{position:relative;z-index:2}
.portada-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:clamp(2rem,5vw,4.5rem);
  /* Arriba, no centrado: la tarjeta de agenda tiene que quedar a la altura
     del titular. Centrada, y con la apertura fuera de la rejilla, la mitad
     derecha de la primera pantalla quedaba vacía. */
  align-items:start;
  padding:clamp(2.2rem,4.5vw,3.4rem) 0 clamp(2rem,3.8vw,3rem);
}
.col-principal{min-width:0}
.eyebrow{
  font-family:var(--mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--membrana);display:flex;align-items:flex-start;gap:.7rem;
  line-height:1.7;margin:0 0 1.5rem;
}
/* La rayita se alinea con la PRIMERA línea, no con el centro del bloque:
   cuando el texto envuelve, centrada apuntaba al hueco entre las dos. */
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:none;margin-top:.85em}
.on-dark .eyebrow{color:var(--membrana-cl)}
.portada .eyebrow{color:var(--arcilla)}
.portada .bajada{font-size:1.03rem;color:var(--texto);max-width:46ch;margin-bottom:2rem}
.datos-portada{display:flex;flex-wrap:wrap;gap:1.8rem;padding-top:1.5rem;border-top:1px solid var(--linea)}
.datos-portada div{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.datos-portada b{display:block;font-family:var(--lectura);font-size:1.02rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tinta);margin-bottom:.1rem}
@media(max-width:940px){
  .portada-grid{grid-template-columns:1fr;padding-top:1.8rem;gap:2rem}
  .membrana-fondo{width:400px;top:auto;bottom:-140px;right:-120px;opacity:.20}
}

/* ── módulo de agenda ── */
.agenda-card{background:var(--papel-3);color:var(--tinta);padding:clamp(1.35rem,2.4vw,1.8rem);border:1px solid var(--linea);box-shadow:0 18px 44px -28px rgba(46,58,52,.30)}
.agenda-card h2{font-size:1.28rem;margin-bottom:.15rem}
.agenda-card .sub{font-family:var(--ui);font-size:.8rem;color:var(--gris);margin-bottom:1.15rem}
.rot{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:.45rem}
/* Lo que se reserva es una sesión presencial. Decirlo antes de la lista, no
   después: quien elige un servicio ya tiene que saber a qué se compromete. */
.aviso-modalidad{
  font-family:var(--ui);font-size:.76rem;line-height:1.5;color:var(--texto);
  border-left:2px solid var(--membrana);padding:.15rem 0 .15rem .7rem;margin:0 0 1.1rem;
}
.aviso-modalidad b{font-weight:600}

/* Lista de servicios de la tarjeta de agenda: cada uno abre Cal.com en popup. */
.cal-servicios{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.cal-servicio{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.85rem .2rem;border-bottom:1px solid var(--linea);text-decoration:none;
  color:var(--tinta);transition:.18s;
}
.cal-servicio:hover,.cal-servicio:focus-visible{background:rgba(79,115,97,.07);padding-left:.6rem}
.cal-servicio .n{font-family:var(--ui);font-size:.88rem;font-weight:500;line-height:1.35}
.cal-servicio .edad{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:400;color:var(--gris);margin-top:.15rem;
}
.cal-servicio .m{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap;flex:none;
}
.cal-servicio:hover .m{color:var(--membrana)}
@media(prefers-reduced-motion:reduce){
  .cal-servicio{transition:none}
  .cal-servicio:hover,.cal-servicio:focus-visible{padding-left:.2rem}
}
.nota-agenda{font-family:var(--ui);font-size:.74rem;color:var(--gris);margin:.85rem 0 0;line-height:1.5}
.nota-agenda a{color:var(--membrana)}

/* ───────── franja de datos ───────── */
.franja{background:var(--salvia);color:var(--tinta);border-top:1px solid var(--linea)}
/* Las reglas de columna van al hijo directo. Escritas como ".franja div"
   alcanzaban también al propio .wrap —que es un div— y le anulaban el
   margen lateral: el texto terminaba pegado al borde de la pantalla
   mientras el resto de la página respetaba el suyo. */
.franja .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.5rem,4vw,3.5rem);margin:0 auto}
.franja .wrap > div{padding:1.6rem 0;border-left:1px solid var(--linea);padding-left:clamp(1.2rem,3vw,2.4rem)}
.franja .wrap > div:first-child{padding-left:0;border-left:none}
.franja dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--arcilla);margin-bottom:.3rem}
.franja dd{margin:0;font-size:.95rem;color:var(--texto)}
.franja a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(79,115,97,.45)}
@media(max-width:820px){
  .franja .wrap{grid-template-columns:1fr;gap:0}
  .franja .wrap > div{padding:1.3rem 0;border-left:none;border-top:1px solid var(--linea)}
  .franja .wrap > div:first-child{border-top:none}
}

/* ───────── estructura de sección: columna de margen ───────── */
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
.sec>.wrap{display:grid;grid-template-columns:var(--margen) minmax(0,1fr);gap:0 clamp(1.5rem,4vw,3.5rem)}
.margen{position:sticky;top:96px;align-self:start;height:0}
.margen .sig{font-family:var(--lectura);font-size:1.6rem;color:var(--arcilla);display:block;line-height:1;margin-bottom:.5rem}
.margen .rot{color:var(--gris);border-top:1px solid var(--linea);padding-top:.5rem}
/* El cuerpo se ancla a la segunda columna en vez de confiar en el orden de
   los hijos. «Sobre mí» perdió su <aside class="margen"> y, sin nadie que
   ocupara la primera columna, el texto entero cayó en los 132px del margen:
   una palabra por línea. Con esto da igual que la sección lleve rótulo. */
.cuerpo{min-width:0;grid-column:2}
@media(max-width:900px){
  .sec>.wrap{grid-template-columns:1fr}
  .cuerpo{grid-column:1}
  .margen{position:static;height:auto;display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.5rem}
  .margen .sig{margin:0;font-size:1.2rem}
  .margen .rot{border:none;padding:0;margin:0}
}
.sec h2{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-bottom:1.4rem;max-width:21ch}
.sec h2 em{font-style:italic;color:var(--membrana)}
.intro{max-width:60ch;color:var(--texto)}
.sec-papel-2{background:var(--papel-2)}

/* ───────── sobre mí ───────── */
/* El retrato flota y el texto lo envuelve. Antes esto era una rejilla de dos
   columnas: la foto ocupaba una celda fija de 300px y el texto —que es cuatro
   veces más largo— no podía pasar por debajo, así que quedaba media columna
   vacía bajo la cara de Matías durante toda la biografía.
   flow-root para contener el float: sin eso el acordeón de abajo se le monta. */
/* La medida de lectura se limita en el bloque, no en cada párrafo: con el
   `max-width:58ch` que tenían los <p>, el float comía por la izquierda y las
   líneas de al lado de la foto quedaban en 236px — cuatro palabras por línea.
   Ahora el ancho total da ~42ch junto al retrato y ~72ch por debajo, que es
   la banda legible en los dos tramos. */
.bio{display:flow-root;max-width:72ch}
.retrato{
  position:relative;margin:.35rem clamp(1.5rem,3vw,2.2rem) 1.7rem 0;
  float:left;width:260px;
}
@media(max-width:760px){
  .retrato{float:none;width:100%;max-width:320px;margin:0 0 1.6rem}
}
.retrato img{width:100%;height:auto;aspect-ratio:1125/1280;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.04)}
.retrato::after{content:"";position:absolute;right:-11px;bottom:-11px;width:62%;height:52%;border:1px solid var(--membrana);border-left:none;border-top:none}
.retrato figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);margin-top:.9rem;line-height:1.7}
.bio p{max-width:none;color:var(--texto)}
.cita-margen{
  border-left:2px solid var(--membrana);padding-left:1.15rem;margin:1.9rem 0;max-width:42ch;
  font-style:italic;font-weight:300;font-size:1.16rem;line-height:1.55;color:var(--tinta);
}
.cita-margen cite{display:block;font-style:normal;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-top:.7rem}
.acordeon{margin-top:2.4rem;border-top:1px solid var(--linea)}
.acordeon details{border-bottom:1px solid var(--linea)}
.acordeon summary{list-style:none;cursor:pointer;padding:1.05rem 0;display:flex;align-items:center;gap:.9rem;font-family:var(--ui);font-weight:500;font-size:.9rem}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:1.05rem;color:var(--arcilla)}
.acordeon details[open] summary::after{content:"–"}
.acordeon summary .n{font-family:var(--mono);font-size:.68rem;color:var(--arcilla);letter-spacing:.08em}
.det-body{padding:0 0 1.5rem;font-size:.97rem;color:var(--texto);max-width:62ch}
.det-body ul{margin:0;padding-left:1.05rem}
.det-body li{margin-bottom:.75rem}
.det-body .ref{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--gris);margin-top:.15rem}

/* ───────── servicios ───────── */
.servicios{border-top:1px solid var(--linea);margin-top:2.6rem}
.servicio{
  display:grid;grid-template-columns:76px minmax(0,1fr) 168px;gap:clamp(1rem,2.5vw,2rem);
  align-items:start;padding:1.7rem 0;border-bottom:1px solid var(--linea);transition:background .25s;
}
.servicio:hover{background:rgba(79,115,97,.055)}
.servicio .glifo{margin-top:.3rem}
.servicio h3{font-size:1.32rem;margin-bottom:.25rem}
.servicio .quien{font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--membrana);margin:0 0 .7rem}
.servicio p{margin:0;font-size:.97rem;color:var(--texto);max-width:56ch}
.precio{text-align:right}
.precio .valor{font-family:var(--lectura);font-size:1.5rem;font-weight:300;display:block;line-height:1.2}
.precio .detalle{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);display:block;margin-top:.25rem}
.precio .btn{margin-top:.75rem;padding:.45rem .95rem;font-size:.76rem}
@media(max-width:820px){
  .servicio{grid-template-columns:44px minmax(0,1fr);gap:1rem}
  .servicio .glifo{width:34px;height:auto}
  .precio{grid-column:2;text-align:left;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.9rem}
  .precio .detalle{margin-top:0}
  .precio .btn{margin-top:0}
}
.motivos{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.motivos p{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:1rem}
.tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tags span{font-family:var(--ui);font-size:.8rem;border:1px solid var(--linea);padding:.32rem .75rem;color:var(--texto)}

/* ───────── opiniones ─────────
   La nota grande a la izquierda y el contexto a la derecha: el número es lo
   que se mira, el texto explica por qué vale. */
.valoracion{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:start;margin-top:2.2rem;padding-bottom:2.2rem;border-bottom:1px solid var(--linea);
}
.val-nota{text-align:center;border-right:1px solid var(--linea);padding-right:clamp(1.5rem,4vw,3rem)}
.val-numero{display:block;font-family:var(--lectura);font-size:clamp(3rem,7vw,4.4rem);font-weight:200;line-height:1;color:var(--tinta)}
.val-detalle{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-top:.6rem;white-space:nowrap}
.estrellas{display:flex;gap:.22rem;justify-content:center;margin-top:.7rem}
.estrellas svg{width:17px;height:16px;fill:var(--arcilla)}
.val-texto{font-size:.98rem;color:var(--texto);margin:0 0 1.2rem;max-width:54ch}
.val-atributos{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.val-atributos li{font-family:var(--ui);font-size:.8rem;border:1px solid var(--linea);padding:.32rem .75rem;color:var(--texto);background:var(--papel-3)}
@media(max-width:700px){
  .valoracion{grid-template-columns:1fr}
  .val-nota{border-right:none;border-bottom:1px solid var(--linea);padding:0 0 1.4rem}
  .val-detalle{max-width:none}
}

/* Dejar una opinión: formulario propio, recogido por Netlify Forms. */
.dejar-opinion{margin-top:2.4rem}
.do-rot{font-family:var(--ui);font-weight:500;font-size:1.05rem;color:var(--tinta);margin:0 0 .35rem}
.do-txt{font-size:.94rem;color:var(--texto);margin:0 0 1.6rem;max-width:52ch}
.form-opinion{max-width:34rem}
.trampa{position:absolute;left:-9999px}
.campo{margin-bottom:1.4rem;display:flex;flex-direction:column}
.campo label,.campo-estrellas legend{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);margin-bottom:.5rem;padding:0;
}
.campo .opcional{text-transform:none;letter-spacing:0;font-size:.66rem}
.campo input,.campo textarea{
  font-family:var(--ui);font-size:.95rem;color:var(--tinta);background:var(--papel-3);
  border:1px solid var(--linea);padding:.7rem .85rem;width:100%;border-radius:0;
}
.campo textarea{resize:vertical;line-height:1.5}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--membrana);box-shadow:0 0 0 2px rgba(79,115,97,.16)}
.ayuda{font-size:.8rem;color:var(--gris);margin-top:.45rem;line-height:1.45}

/* Estrellas del formulario: radios de verdad. Van del 5 al 1 en el HTML y se
   invierten aquí, que es lo que permite rellenar «hasta la que señalas» con
   el selector ~ y sin JavaScript. Funcionan con teclado por ser radios. */
.campo-estrellas{border:none;padding:0;margin:0 0 1.6rem;min-width:0}
.estrellas-radio{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.3rem}
.estrellas-radio input{position:absolute;opacity:0;width:0;height:0}
.estrellas-radio label{margin:0;padding:.2rem;cursor:pointer;line-height:0}
.estrellas-radio svg{width:31px;height:30px;fill:none;stroke:var(--arcilla);stroke-width:1.4;transition:fill .15s ease}
.estrellas-radio .vo{position:absolute;left:-9999px}
.estrellas-radio input:checked ~ label svg,
.estrellas-radio label:hover svg,
.estrellas-radio label:hover ~ label svg{fill:var(--arcilla)}
.estrellas-radio input:focus-visible + label{outline:2px solid var(--membrana);outline-offset:2px}
/* En un teléfono se pulsan con el dedo: 44px de lado, que es el mínimo. */
@media(max-width:700px){
  .estrellas-radio label{padding:.42rem}
  .estrellas-radio svg{width:33px;height:32px}
}

.campo-check{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.6rem}
.campo-check input{margin-top:.25rem;accent-color:var(--membrana);flex:none;width:16px;height:16px}
.campo-check label{font-size:.88rem;color:var(--texto);line-height:1.5}
.do-nota{font-size:.8rem;color:var(--gris);margin:1.1rem 0 0;line-height:1.5;max-width:46ch}
.do-nota a{color:var(--membrana)}

/* El respaldo de Doctoralia va DESPUÉS del formulario: primero la acción,
   después la justificación. Se separa con una raya para que se lea como otro
   momento y no como parte de lo que hay que rellenar. */
.respaldo{margin-top:3.2rem;padding-top:2.2rem;border-top:1px solid var(--linea)}
.respaldo h2{font-size:clamp(1.2rem,2.2vw,1.5rem);margin-bottom:.7rem}
.respaldo-txt{font-size:.98rem;color:var(--texto);max-width:56ch;margin:0}
.respaldo .valoracion{margin-top:1.6rem;padding-bottom:0;border-bottom:none}

/* Opiniones publicadas: se pegan a mano cuando se aprueban. */
.opinion{border-top:1px solid var(--linea);padding:1.4rem 0}
.opinion .estrellas{justify-content:flex-start;margin:0 0 .6rem}
.opinion p{font-size:1rem;color:var(--texto);margin:0 0 .7rem;max-width:58ch}
.opinion footer{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

/* ───────── contacto ───────── */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.5rem);margin-top:2.2rem}
@media(max-width:820px){.contacto-grid{grid-template-columns:1fr}}
.lista-contacto{list-style:none;padding:0;margin:0;font-size:1rem}
.lista-contacto li{padding:1.05rem 0;border-top:1px solid var(--linea);display:flex;gap:1.2rem}
.lista-contacto li:first-child{border-top:none;padding-top:0}
.lista-contacto .k{font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);flex:none;width:92px;padding-top:.3rem}
.lista-contacto a{color:var(--membrana);text-decoration:none;border-bottom:1px solid rgba(79,115,97,.35)}
.lista-contacto a:hover{border-color:var(--membrana)}
.mapa{height:100%;min-height:320px;border:1px solid var(--linea);position:relative;overflow:hidden;background:var(--papel-3)}
.mapa iframe{
  width:100%;height:100%;min-height:320px;border:0;display:block;
  /* Desatura el mapa para que no pelee con la paleta, pero sin llegar al
     gris puro: las calles y el pin tienen que seguir leyéndose. */
  filter:grayscale(.6) contrast(1.03);
}
.mapa-link{
  position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--papel);color:var(--tinta);text-decoration:none;
  padding:.5rem .85rem;border-top:1px solid var(--linea);border-right:1px solid var(--linea);transition:.2s;
}
.mapa-link:hover{color:var(--membrana)}

/* ───────── pie ───────── */
.pie{background:var(--tinta-2);color:rgba(250,247,242,.6);font-size:.88rem;padding:3rem 0 2.4rem}
.pie-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.pie .n{display:block;font-family:var(--lectura);font-size:1.15rem;color:var(--papel);margin-bottom:.35rem}
.pie a{color:var(--membrana-cl);text-decoration:none}
.urgencia{border:1px solid rgba(159,188,168,.32);padding:1rem 1.15rem;max-width:430px;font-size:.84rem;color:rgba(250,247,242,.74)}
.urgencia b{color:var(--membrana-cl);font-weight:500}
.legal{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(250,247,242,.12);font-family:var(--mono);font-size:.65rem;letter-spacing:.07em;display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between}

/* ───────── enlace "leer más" dentro de un párrafo ───────── */
.enlace-mas{
  display:inline-block;font-family:var(--ui);font-size:.84rem;font-weight:500;
  color:var(--membrana);text-decoration:none;border-bottom:1px solid rgba(79,115,97,.35);
}
.enlace-mas:hover{border-color:var(--membrana)}

/* ───────── página de niños y adolescentes ───────── */
.portada-articulo{background:var(--salvia);color:var(--tinta);padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.portada-articulo h1{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:200;line-height:1.1;margin-bottom:1.2rem;max-width:16ch}
.portada-articulo h1 em{font-style:italic;font-weight:300;color:var(--membrana)}
.portada-articulo .bajada{font-size:1.05rem;color:var(--texto);max-width:52ch;margin:0}
.portada-articulo .eyebrow{color:var(--arcilla)}

.articulo{max-width:66ch}
.articulo p{color:var(--texto)}
.articulo .entrada{font-size:1.16rem;line-height:1.6;font-weight:300;color:var(--tinta)}
.articulo h2{
  font-size:clamp(1.35rem,2.4vw,1.75rem);margin:2.6rem 0 1rem;
  padding-top:1.4rem;border-top:1px solid var(--linea);
}
.articulo .cita-margen{font-size:1.1rem}
.articulo b{font-weight:600}
/* Los documentos legales enumeran mucho (excepciones al secreto, derechos).
   Sin esto las listas heredan la sangría del navegador y se despegan del
   texto: la viñeta queda fuera de la columna de lectura. */
.articulo ul{margin:0 0 1.5rem;padding-left:1.15rem}
.articulo li{color:var(--texto);margin-bottom:.7rem;padding-left:.2rem}
.articulo li::marker{color:var(--arcilla)}
.articulo li a{color:var(--membrana)}

/* Bloque de contacto: es el destino de toda la página, así que se separa
   del cuerpo del texto en vez de disolverse en él. */
.llamado{background:var(--papel-3);border:1px solid var(--linea);padding:clamp(1.5rem,3vw,2.2rem);margin:3rem 0 2rem}
.llamado h2{margin:0 0 .7rem;padding:0;border:none}
.llamado p{margin:0 0 1.3rem;max-width:52ch}
.dato-llamado{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;line-height:2;
  text-transform:uppercase;color:var(--gris);margin:1.3rem 0 0 !important;
}
.dato-llamado a{color:var(--membrana);text-transform:none;letter-spacing:0;font-size:.78rem}
.volver a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);text-decoration:none;
}
.volver a:hover{color:var(--membrana)}

/* ───────── motion ───────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .75s ease}
.rv.in{opacity:1;transform:none}
.dibujo{stroke-dasharray:1600;stroke-dashoffset:1600;animation:trazo 3s ease forwards .25s}
@keyframes trazo{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .dibujo{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   MÓVIL

   En un teléfono la página abre con él —retrato, nombre, dos líneas de
   quién es— y con el botón de agendar, que además queda fijo abajo. El
   titular sobre el lenguaje funciona como declaración en escritorio, pero
   no es lo primero que alguien necesita saber en una pantalla de 375px.
   ═══════════════════════════════════════════════════════════════════════ */

/* Bloque de identidad: existe solo en móvil. */
.id-movil{display:none}

/* Menú desplegable. Va con <details>, sin JavaScript: si el script falla,
   la navegación tiene que seguir existiendo. */
.menu-movil{display:none;margin-left:auto;position:relative}
.menu-movil summary{
  list-style:none;cursor:pointer;width:44px;height:44px;display:flex;
  align-items:center;justify-content:center;color:var(--tinta);
}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil summary span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.menu-movil summary span::before,.menu-movil summary span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;
}
.menu-movil summary span::before{top:-6px}
.menu-movil summary span::after{top:6px}
.menu-movil[open] summary span{background:transparent}
.menu-movil[open] summary span::before{top:0;transform:rotate(45deg)}
.menu-movil[open] summary span::after{top:0;transform:rotate(-45deg)}
.menu-movil ul{
  /* display explícito: este <ul> vive dentro de .nav, y la regla que esconde
     el menú de escritorio en pantallas chicas lo alcanzaba también. */
  display:block;
  position:absolute;right:0;top:48px;min-width:200px;list-style:none;margin:0;padding:.4rem 0;
  background:var(--papel-3);border:1px solid var(--linea);box-shadow:0 14px 34px -18px rgba(46,58,52,.35);
}
.menu-movil li a{
  display:block;padding:.75rem 1.1rem;font-family:var(--ui);font-size:.9rem;
  text-decoration:none;color:var(--tinta);
}
.menu-movil li a:hover{background:var(--salvia);color:var(--membrana)}

/* Botón fijo: agendar siempre a un pulgar de distancia. */
.cta-fija{display:none}

@media(max-width:940px){
  .menu-movil{display:block}
  .nav .btn{display:none}          /* el botón vive abajo, fijo */
  .nav .wrap{gap:.6rem}

  /* La columna de texto de escritorio se va entera: su bajada repetía la
     biografía del bloque de identidad, y sus datos de contacto repetían la
     franja que viene justo debajo. Tres veces la misma dirección en dos
     pantallas de scroll. */
  .col-texto{display:none}

  /* Orden en el teléfono: la frase de apertura, quién es, y agendar. Ya no
     hace falta reordenar con `order` — desde que la apertura y el bloque de
     identidad viven dentro de .col-principal, el orden del documento es el
     correcto. El `order:-1` que tenía la tarjeta la mandaba al primer lugar
     de la pantalla, por delante de la apertura. */
  .portada-grid{display:flex;flex-direction:column;gap:1.6rem}
  .id-movil{display:block;text-align:center;margin-top:1.8rem}

  .id-movil img{
    width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 18%;
    margin:0 auto .85rem;border:1px solid var(--linea);
  }
  .id-nombre{font-family:var(--lectura);font-size:1.5rem;line-height:1.2;margin:0 0 .2rem}
  .id-rol{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--arcilla);margin:0 0 .9rem;
  }
  .id-bio{font-size:.97rem;line-height:1.6;color:var(--texto);max-width:38ch;margin:0 auto}

  /* El titular pasa a segundo plano, sin desaparecer. */
  .portada .bajada{font-size:.95rem}

  /* Barra fija inferior. */
  body{padding-bottom:66px}
  .cta-fija{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:70;min-height:58px;
    background:var(--membrana);color:var(--papel-3);text-decoration:none;
    font-family:var(--ui);font-size:.95rem;font-weight:600;
    box-shadow:0 -6px 22px -12px rgba(46,58,52,.45);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .cta-fija:active{background:#3F5D4E}
}

@media(max-width:520px){
  .id-movil img{width:96px;height:96px}
  .id-nombre{font-size:1.32rem}
  /* Sin scroll horizontal: la tabla de precios se apila. */
  .cal-servicio{flex-direction:column;align-items:flex-start;gap:.2rem}
  .cal-servicio .m{white-space:normal}
}

/* Señal que recorre la membrana de la portada.
   El selector lleva .membrana-fondo delante a propósito: la regla que pinta
   el dibujo hace `circle{fill:none}` y, con más especificidad que .pulso a
   secas, dejaba el punto invisible. */
.membrana-fondo .pulso{fill:var(--membrana);stroke:none;opacity:.95}

/* ───────── frase de apertura ─────────
   Va a todo el ancho y antes de la rejilla, para que sea lo primero que se
   lee tanto en escritorio como en teléfono. No es el <h1>: el titular de
   posicionamiento sigue siendo el de abajo, y dos encabezados compitiendo
   por el mismo rango confunden a lectores de pantalla y a buscadores. */
.intervencion{
  padding:0;
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.int-1{
  font-family:var(--lectura);font-weight:200;line-height:1.16;
  font-size:clamp(1.85rem,3.9vw,3rem);
  letter-spacing:-.01em;margin:0 0 .75rem;max-width:30ch;
}
/* La frase va uniforme: un solo tipo, un solo color, un solo peso. Partirla
   en dos tratamientos la hacía leer como dos frases distintas. El contraste
   se lo lleva entero la pregunta de abajo, que es la que llama a actuar. */
.int-2{
  font-family:var(--ui);font-size:clamp(.95rem,1.5vw,1.08rem);font-weight:500;
  color:var(--arcilla);margin:0;max-width:30ch;line-height:1.5;
}
@media(max-width:940px){
  .intervencion{max-width:none;text-align:center;padding-top:2rem}
  .portada-grid{padding-top:1.4rem}
  /* Algo más contenida que en escritorio: si la frase ocupa la pantalla
     entera, el retrato queda tan abajo que nada invita a seguir bajando. */
  .int-1{font-size:1.55rem;max-width:none;margin-bottom:.9rem}
  .int-2{margin-left:auto;margin-right:auto;font-size:.95rem}
}

/* ───────── credenciales de portada ─────────
   Refuerzan el perfil profesional sin convertir la portada en un currículum:
   cuatro líneas, no una lista de logros. */
.credenciales{
  list-style:none;margin:0 0 1.8rem;padding:0;
  display:grid;gap:.5rem;max-width:44ch;
}
.credenciales li{
  font-family:var(--ui);font-size:.92rem;line-height:1.45;color:var(--texto);
  padding-left:1.1rem;position:relative;
}
.credenciales li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--arcilla);
}
.credenciales b{color:var(--tinta);font-weight:600}
@media(max-width:940px){
  .credenciales{display:none}   /* en móvil ya van resumidas en la biografía */
}

/* La pregunta cierra la apertura y es la que interpela: se separa del
   enunciado entrecomillado para que no se lean como una sola frase corrida. */
.int-preg{display:block;margin-top:.25rem;font-style:italic;font-weight:400}

/* Entradilla de «Sobre mí»: es la segunda mitad de la frase con que Matías
   abre el texto, y el h2 se queda con la primera. Va más grande que el
   cuerpo para que se lean como una sola declaración partida en dos. */
.bio .entrada{
  font-size:1.16rem;line-height:1.55;font-weight:300;color:var(--tinta);
  margin-bottom:1.6rem;
}
.bio .entrada em{font-style:italic;color:var(--membrana)}

/* Coda: el puente a la página de niños. Va separado del texto de Matías
   porque cambia de tema y no debe competir con su frase de cierre. */
.coda{
  margin-top:2rem !important;padding-top:1.3rem;border-top:1px solid var(--linea);
  font-family:var(--ui);font-size:.92rem;line-height:1.55;color:var(--texto);
}

/* Botón al cierre del texto de «Sobre mí». Solo escritorio: en móvil la barra
   fija ya acompaña todo el scroll y un segundo botón sería ruido. */
.cta-bio{margin:2.4rem 0 0}
@media(max-width:940px){ .cta-bio{display:none} }

/* Matiz dentro de la franja: la modalidad online, que antes vivía en el
   bloque de datos de la portada. */
.franja .matiz{display:inline-block;margin-top:.25rem;font-size:.86rem;color:var(--gris)}

/* ───────── epígrafe de capítulo ─────────
   Abre el texto de la página de niños como el exergo de un libro: centrado,
   sin comillas, separado por aire y no por caja. */
.epigrafe{
  margin:0 0 2.6rem;padding:0 0 1.8rem;border-bottom:1px solid var(--linea);
  font-family:var(--lectura);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.5;
  color:var(--membrana);max-width:40ch;
}


/* ───────── apertura en dos cuadros ─────────
   La declaración y el epígrafe dejan de ser un bloque corrido. Cada uno en
   su caja, para que se lean como dos voces y no como una frase larga. */
.caja-apertura{
  border:1px solid var(--linea);border-left:3px solid var(--membrana);
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.3rem,3vw,2.4rem);
  background:var(--papel-3);
}
.caja-apertura .int-1{margin:0;max-width:none}
.caja-epigrafe{
  border:1px solid var(--linea);border-left:3px solid var(--arcilla);
  padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.3rem,3vw,2.4rem);
  margin-top:1rem;background:var(--papel-3);
}
.caja-epigrafe .int-2{margin:0 0 .3rem}
.caja-epigrafe .int-preg{margin:0}
@media(max-width:940px){
  .caja-apertura,.caja-epigrafe{max-width:none;text-align:left}
  .caja-epigrafe .int-preg{margin-left:0}
}

/* ───────── láminas entre capítulos ─────────
   Ilustración a página completa, como las planchas de un libro. */
.lamina{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(2.6rem,6vw,4.6rem) var(--pad);background:var(--papel);
}
.lamina img{opacity:.9}
.lamina-encuentro img{width:min(340px,62vw);height:auto}
.lamina-farol img{width:min(700px,92vw);height:auto}
@media(prefers-reduced-motion:no-preference){
  .lamina img{transition:opacity .8s ease}
}

/* ───────── bloque para madres y padres ───────── */
.para-padres{
  margin:2.8rem 0 0;padding:clamp(1.3rem,3vw,1.9rem);
  background:var(--salvia);border-left:3px solid var(--arcilla);
}
.pp-rot{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--arcilla);margin:0 0 .6rem;
}
.pp-txt{font-size:1rem;line-height:1.6;color:var(--texto);max-width:58ch;margin:0 0 1.2rem}
.pp-txt b{color:var(--tinta);font-weight:600}

/* ───────── cierre: la foto de la consulta ─────────
   Va al final de la página, a lo ancho, como última imagen antes del pie.
   Antes vivía junto al mapa, arriba; ahora se ve cuando ya se recorrió todo. */
.cierre-consulta{
  /* Centrada y acotada: la foto se muestra, no se luce. A 769px de ancho y
     pegada al margen izquierdo competía con la portada; en el medio, con el
     texto debajo, cierra la página sin pedir protagonismo. */
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.3rem,3vw,2rem);
  padding:clamp(2rem,4.5vw,3.2rem) var(--pad);background:var(--papel-2);
}
.cierre-consulta .foto-consulta{max-width:400px;width:100%}
.cierre-txt{text-align:center}
.cierre-consulta[hidden]{display:none}
.foto-consulta{margin:0}
.foto-consulta img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--linea)}
.foto-consulta figcaption{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);margin-top:.6rem;
}
.cierre-txt p{font-family:var(--lectura);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:300;color:var(--tinta);margin:0 0 1.2rem}
.foto-consulta figcaption{text-align:center}
@media(max-width:760px){
  .cierre-consulta .foto-consulta{max-width:340px}
}