/* ============================================================
   Portada — el diseño del prototipo, llevado a WordPress
   ------------------------------------------------------------
   Sale de design/prototipo.template.html. Tres cambios respecto
   al original, todos deliberados:

   1. TODO CUELGA DE .ml-home. En el prototipo los estilos iban
      sobre `body` y `:root`, que ahí no molestaba porque era una
      página suelta. Aquí compartimos hoja con Astra y con el
      resto del sitio, así que cada regla se ancla al contenedor.

   2. SIN MODO OSCURO. El prototipo lo traía, pero la cabecera y
      el pie los pinta Astra y no tienen variante oscura: se
      quedaría una portada oscura entre cabecera y pie crema.
      Peor que no tenerlo.

   3. ESPECIFICIDAD CONTRA ASTRA. Astra pinta y subraya todos los
      enlaces del contenido. Sin anclar los botones a
      `.ml-home a.btn`, el texto sale del mismo color que su
      fondo — ya pasó en las páginas de servicio.

   Contrastes medidos sobre cada fondo:
     crema #FBFAF7  → #252B20 13,9:1 · #5B6553 6,0:1 · #4F6245 6,4:1
     salvia #EDF0E8 → #252B20 13,2:1 · #5B6553 5,7:1 · #4F6245 6,1:1
     verde  #333F2C → #FBFAF7 10,7:1 · #CBD3C1 7,2:1 · #D4A574 5,0:1
     botón sólido   → #FBFAF7 sobre #4F6245 = 6,4:1
   El mínimo AA es 4,5:1: todo pasa.
   ============================================================ */

.ml-home{
  --ground:#FBFAF7;
  --surface:#EDF0E8;
  --deep:#333F2C;
  --ink:#252B20;
  --ink-soft:#5B6553;
  --sage:#4F6245;
  --sage-brand:#8B9E7E;   /* solo uso gráfico, nunca texto */
  --clay:#A9663B;
  --clay-on-deep:#D4A574;
  --line:#DDE2D6;
  --shadow:rgba(37,43,32,.09);

  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --pad:clamp(20px,5vw,40px);
  --gap-section:clamp(64px,10vw,132px);
  --measure:63ch;

  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;

  /* Cinturón de seguridad: ningún adorno que se salga por un lado puede
     hacer que la página se desplace en horizontal. Se usa `clip` y no
     `hidden` a propósito: `hidden` convierte el elemento en contenedor de
     scroll y rompería cualquier `position:sticky` que se añada más
     adelante; `clip` recorta sin ese efecto secundario. */
  overflow-x:clip;
}

.ml-home *,.ml-home *::before,.ml-home *::after{box-sizing:border-box}
.ml-home img{max-width:100%;display:block}
.ml-home a{color:inherit}
.ml-home h1,.ml-home h2,.ml-home h3,.ml-home h4{
  font-family:var(--serif);
  font-weight:400;
  text-wrap:balance;
  margin:0;
  line-height:1.16;
  color:var(--ink);
}
.ml-home p{margin:0}
.ml-home :focus-visible{outline:2.5px solid var(--sage);outline-offset:3px;border-radius:2px}

/* Astra mete su propio contenedor y sus márgenes de bloque. */
.ml-home .entry-content > *{margin-block:0}

/* ---------- rejilla base ---------- */
.ml-home .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.ml-home .band{padding-block:var(--gap-section)}
.ml-home .band--surface{background:var(--surface)}
.ml-home .band--deep{background:var(--deep);color:#FBFAF7}
.ml-home .band--deep h2,
.ml-home .band--deep h3,
.ml-home .band--deep h4{color:#FBFAF7}

.ml-home .grid{display:grid;gap:clamp(24px,4vw,48px)}
@media (min-width:900px){
  .ml-home .grid--rail{grid-template-columns:minmax(150px,1fr) minmax(0,3.15fr)}
}

.ml-home .label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sage);
  margin:0 0 4px;
}

/* ---------- marca del raíl ----------
   En escritorio cada sección reserva una columna entera a la izquierda para
   una etiqueta de once píxeles: casi un quinto del ancho, en blanco, seis
   veces seguidas. Ahí caben la marca y una línea de anclaje sin empujar nada,
   porque la columna de contenido siempre es mucho más alta.

   Oculta por debajo de 900 px A PROPÓSITO: ahí las dos columnas se apilan y
   cualquier cosa añadida aquí sí alargaría la página en móvil. */
/* Los dos `display:none` van ANTES del media query: con la misma
   especificidad gana la regla que se declara después, y puestos al final
   anularían el bloque de escritorio entero. */
.ml-home .rail-mark,
.ml-home .rail-rule{display:none}

@media (min-width:900px){
  .ml-home .rail-mark{
    display:grid;
    justify-items:start;
    gap:14px;
    margin-bottom:14px;
  }
  .ml-home .rail-mark .ml-ico{width:38px;height:38px;color:var(--sage-brand)}
  .ml-home .rail-rule{
    display:block;
    width:1px;
    height:56px;
    background:var(--line);
    margin-top:16px;
  }
}
.ml-home .band--deep .label{color:var(--clay-on-deep)}
.ml-home .lede{color:var(--ink-soft);max-width:var(--measure)}
.ml-home .band--deep .lede{color:#CBD3C1}

/* ---------- botones ----------
   Anclados con `a.btn` para ganarle a Astra. */
.ml-home a.btn,
.ml-home a.btn:hover,
.ml-home a.btn:focus-visible{text-decoration:none}

.ml-home a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  line-height:1;
  padding:15px 26px;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.ml-home a.btn:hover{transform:translateY(-2px)}
.ml-home a.btn--wa{background:var(--sage);color:#FBFAF7;box-shadow:0 6px 20px var(--shadow)}
.ml-home a.btn--wa:hover{background:#43543B;box-shadow:0 10px 28px var(--shadow)}
.ml-home a.btn--ghost{border-color:var(--line);color:var(--ink)}
.ml-home a.btn--ghost:hover{border-color:var(--sage);color:var(--sage)}
.ml-home a.btn--onDeep{background:var(--clay-on-deep);color:#20260F}
.ml-home a.btn--onDeep:hover{background:#E0B78A}
.ml-home a.btn svg{width:17px;height:17px;flex:0 0 auto}

/* ---------- hero ---------- */
.ml-home .hero{padding-block:clamp(48px,8vw,96px) clamp(56px,9vw,110px)}
.ml-home .hero__grid{display:grid;gap:clamp(32px,5vw,60px);align-items:center}
@media (min-width:900px){
  .ml-home .hero__grid{grid-template-columns:1.08fr .92fr}
}
.ml-home .hero h1{font-size:clamp(40px,7.4vw,74px);letter-spacing:-.015em}
.ml-home .hero__role{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sage);
  margin:0 0 18px;
}
.ml-home .hero__claim{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(19px,2.4vw,24px);
  color:var(--ink-soft);
  margin:22px 0 0;
  max-width:34ch;
}
.ml-home .hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.ml-home .hero__col{position:relative}
.ml-home .hero__photo{
  border-radius:170px 170px 16px 16px;
  overflow:hidden;
  box-shadow:0 22px 60px var(--shadow);
}
.ml-home .hero__photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}

/* ---------- sobre mí ---------- */
.ml-home .about__body{display:grid;gap:20px;max-width:var(--measure)}
.ml-home .about__body p{font-size:17.5px}
.ml-home .cred{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0}
.ml-home .cred li{
  list-style:none;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.03em;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 14px;
  color:var(--ink-soft);
}

/* El número de colegiada no es una credencial más entre cuatro: es la prueba
   de que Marta puede ejercer legalmente. Se le da fondo sólido para que se lea
   como sello, manteniendo exactamente la altura de las otras píldoras para no
   mover la fila. Crema sobre salvia son 6,4:1, muy por encima del mínimo AA. */
.ml-home .cred li.cred--sello{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--sage);
  border-color:var(--sage);
  color:#FBFAF7;
  padding-left:11px;
}
.ml-home .cred li.cred--sello .ml-ico{width:17px;height:17px}

/* ============================================================
   SISTEMA DE DIBUJO — «trazo continuo»
   ------------------------------------------------------------
   Reglas comunes en CSS y no en cada etiqueta: el HTML se queda
   en `<svg class="ml-ico" viewBox="0 0 24 24">` y ahorra unos
   90 bytes por dibujo repetidos quince veces.

   Lienzo 24 con 2 de aire, trazo 1,5, extremos redondeados, sin
   relleno. Color salvia #4F6245, 6,4:1 sobre el crema.

   REGLA QUE NO SE ROMPE: ningún dibujo alarga la página. Cada
   uno cabe dentro de la caja de texto que ya existía, o vive en
   un hueco que ya estaba vacío (la columna del raíl, el espacio
   entre pasos). Si un adorno empuja algo hacia abajo, sobra.
   ============================================================ */
.ml-home .ml-ico{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

/* ---------- áreas: lista tipográfica, no tarjetas ---------- */
.ml-home .areas{border-top:1px solid var(--line);margin:0;padding:0}
.ml-home .areas li{
  list-style:none;
  display:flex;
  align-items:center;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding:15px 2px;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(19px,2.6vw,25px);
  color:var(--ink);
}
/* El dibujo sustituye al punto: 26 px caben dentro de la caja de línea que ya
   tenía el texto (29 px a tamaño máximo), así que la fila no crece. */
.ml-home .areas .ml-ico{width:26px;height:26px;color:var(--sage)}
@media (min-width:720px){
  .ml-home .areas{columns:2;column-gap:56px}
  .ml-home .areas li{break-inside:avoid}
}

/* ---------- servicios ---------- */
.ml-home .cards{display:grid;gap:20px}
@media (min-width:800px){
  .ml-home .cards--2{grid-template-columns:1fr 1fr}
}
.ml-home .card{
  background:var(--ground);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(24px,3.4vw,34px);
  display:grid;
  gap:12px;
  align-content:start;
}
/* Las dos tarjetas de «Terapia por etapas» cuelgan de un h2 y llevan h3; las
   de «Elige tu modalidad» cuelgan de un h3 y llevan h4. Mismo aspecto, nivel
   distinto: el nivel lo decide dónde está la tarjeta, no cómo se ve. */
.ml-home .card h3,
.ml-home .card h4{font-size:22px}
.ml-home .card p{font-size:15.5px;color:var(--ink-soft)}
.ml-home .card__tag{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage);
}
/* Dentro de la etiqueta, no encima: a 20 px el dibujo cabe en la línea de la
   etiqueta y la tarjeta mide exactamente lo mismo que antes. */
.ml-home .card__tag .ml-ico{width:20px;height:20px}

/* Las dos tarjetas de «Terapia por etapas» llevan a su página.
   Sin este enlace interno, las páginas de servicio quedan
   colgadas: ni Google llega bien ni las personas tampoco. */
.ml-home a.card__more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:4px;
  font-size:14.5px;
  font-weight:500;
  color:var(--sage);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s,gap .2s;
}
.ml-home a.card__more:hover{border-bottom-color:var(--sage);gap:11px}
.ml-home a.card__more::after{content:'→'}

/* ---------- tarifas ---------- */
.ml-home .fees{display:grid;gap:20px}
@media (min-width:800px){
  .ml-home .fees{grid-template-columns:1fr 1fr;align-items:stretch}
}
.ml-home .fee{border-radius:20px;padding:clamp(26px,3.6vw,38px);display:grid;gap:9px;align-content:start}
.ml-home .fee--free{background:var(--deep);color:#FBFAF7}
.ml-home .fee--free .card__tag{color:var(--clay-on-deep)}
.ml-home .fee--free .fee__meta{color:#CBD3C1}
.ml-home .fee--std{background:var(--ground);border:1px solid var(--line)}
.ml-home .fee__price{
  font-family:var(--serif);
  font-size:clamp(38px,6vw,54px);
  line-height:1;
  letter-spacing:-.02em;
}
.ml-home .fee--free .fee__price{color:var(--clay-on-deep)}
.ml-home .fee--std .fee__price{color:var(--clay)}
.ml-home .fee__meta{font-size:14px;color:var(--ink-soft)}
.ml-home .fee a.btn{margin-top:14px;justify-self:start}

/* ---------- proceso ---------- */
.ml-home .steps{display:grid;gap:26px;counter-reset:s}
@media (min-width:840px){
  .ml-home .steps{grid-template-columns:repeat(3,1fr);gap:38px}
}
.ml-home .step{
  display:grid;
  gap:9px;
  align-content:start;
  counter-increment:s;
  position:relative;
  padding-top:16px;
  border-top:2px solid var(--sage-brand);
}
.ml-home .step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--sage);
}
.ml-home .step h3{font-size:19px}
.ml-home .step p{font-size:15px;color:var(--ink-soft)}

/* El dibujo del paso va absoluto, al otro extremo de la línea del número: no
   ocupa flujo, así que no empuja nada.

   DOS TRAMPAS DE WPAUTOP, las dos costaron una vuelta:
   1. En el HTML el `<svg>` va DENTRO del `<h3>`, no suelto entre etiquetas.
      Suelto, wpautop lo envuelve en un `<p>` que aquí mide cero pero cuenta
      como celda de la rejilla del paso y se lleva un `gap` de 9 px.
   2. Nada de comentarios HTML dentro de `.steps`: wpautop los convierte en
      otro párrafo, que entra como cuarta celda y abre una segunda fila de
      rejilla. Son 219 px de la nada. Los comentarios, aquí en el CSS. */
.ml-home .step .ml-ico{
  position:absolute;
  top:15px;
  right:0;
  width:22px;
  height:22px;
  color:var(--sage-brand);
}

/* El hilo que une los tres pasos. Es el mismo borde superior de cada paso,
   continuado en punteado por el hueco que los separa: cero altura añadida, y
   los tres dejan de leerse como tres bloques sueltos para leerse como un
   recorrido. Solo cuando están en fila; apilados no habría nada que unir. */
@media (min-width:840px){
  .ml-home .step:not(:last-child)::after{
    content:'';
    position:absolute;
    top:-2px;
    left:100%;
    width:38px;               /* el `gap` de .steps en este tramo */
    border-top:2px dashed var(--sage-brand);
    opacity:.5;
  }
}

/* ---------- faq ---------- */
.ml-home .faq{max-width:var(--measure)}
.ml-home .faq details{border-bottom:1px solid var(--line)}
.ml-home .faq summary{
  cursor:pointer;
  list-style:none;
  padding:19px 0;
  display:flex;
  gap:16px;
  align-items:baseline;
  justify-content:space-between;
  font-family:var(--serif);
  font-size:18.5px;
  color:var(--ink);
}
.ml-home .faq summary::-webkit-details-marker{display:none}
.ml-home .faq summary::after{
  content:'+';
  font-family:var(--sans);
  font-weight:400;
  font-size:21px;
  color:var(--sage);
  flex:0 0 auto;
  transition:transform .25s;
}
.ml-home .faq details[open] summary::after{transform:rotate(45deg)}
.ml-home .faq p{padding:0 0 20px;font-size:15.5px;color:var(--ink-soft);max-width:58ch}

/* ---------- contacto ---------- */
.ml-home .contact{display:grid;gap:clamp(28px,4vw,52px)}
@media (min-width:880px){
  .ml-home .contact{grid-template-columns:1fr 1fr;align-items:start}
}
.ml-home .contact__list{display:grid;gap:2px;margin:0;padding:0}
.ml-home a.contact__row{
  display:flex;
  gap:15px;
  align-items:flex-start;
  padding:15px 0;
  border-bottom:1px solid rgba(203,211,193,.22);
  text-decoration:none;
}
.ml-home a.contact__row:hover .contact__val{color:var(--clay-on-deep)}
.ml-home a.contact__row svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px;color:var(--clay-on-deep)}

/* En una pantalla de 320 px el correo no cabe de una pieza. Por defecto un
   hijo de flex no baja de su ancho de contenido (`min-width:auto`), así que
   la fila entera se ensanchaba y se salía de la pantalla. Con `min-width:0`
   puede encoger, y con `overflow-wrap:anywhere` el correo parte donde haga
   falta en vez de empujar. */
.ml-home a.contact__row > span{min-width:0}
.ml-home .contact__val,
.ml-home .contact__k{overflow-wrap:anywhere}

/* El correo iba en la serif de titulares, que es bastante más ancha: en un
   móvil de 390 px no entraba y partía a mitad de palabra («gmail.co / m»).
   En sans y algo más pequeño cabe entero, y para una dirección de correo se
   lee mejor de todos modos. */
/* Doble clase a propósito: `.contact__val` se declara más abajo en este mismo
   archivo con la misma especificidad, así que a igualdad ganaría la última.
   Encadenando las dos clases esta regla queda por encima sin depender del
   orden. */
.ml-home .contact__val.contact__val--mail{
  font-family:var(--sans);
  font-size:15.5px;
  font-weight:400;
  letter-spacing:.005em;
}
.ml-home .contact__k{
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#B6C0AB;
  display:block;
  margin-bottom:2px;
}
.ml-home .contact__val{font-family:var(--serif);font-size:20px;color:#FBFAF7;transition:color .2s}
.ml-home .contact__note{font-size:13.5px;color:#B6C0AB;margin-top:20px;max-width:44ch;line-height:1.6}
.ml-home .contact__photo{border-radius:18px;overflow:hidden}
.ml-home .contact__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- nota al margen ---------- */
.ml-home .note{
  margin-top:14px;
  font-size:13px;
  color:var(--ink-soft);
  border-left:2px solid var(--sage-brand);
  padding-left:14px;
  max-width:52ch;
  line-height:1.6;
}

/* ---------- barra fija de móvil y burbuja de escritorio ----------
   Es el arreglo de conversión: en móvil el contacto deja de estar
   al final de una página larga y pasa a estar siempre a un dedo. */
.ml-home .dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:flex;
  gap:10px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:#FBFAF7;
  border-top:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .ml-home .dock{background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(12px)}
}
.ml-home .dock a.btn{flex:1;padding-block:14px}
@media (min-width:760px){
  .ml-home .dock{display:none}
}

.ml-home a.wa-float{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:55;
  display:none;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--sage);
  color:#FBFAF7;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 26px var(--shadow);
  transition:transform .25s;
  text-decoration:none;
}
.ml-home a.wa-float:hover{transform:scale(1.07)}
.ml-home a.wa-float svg{width:27px;height:27px}
@media (min-width:760px){
  .ml-home a.wa-float{display:flex}
}

/* La barra fija taparía el final del pie en móvil. */
@media (max-width:759px){
  body.home .site-footer,
  body.home .ast-footer-copyright{padding-bottom:86px}

  /* El botón «subir» de Astra vive a 30 px del borde inferior, justo
     encima del botón «Llamar» de la barra. Se sube por encima de ella.
     Solo en la portada, que es la única página con barra fija. */
  body.home #ast-scroll-top{bottom:92px}
}

/* En escritorio no hay barra, pero sí la burbuja de WhatsApp a 26 px del
   borde: el botón «subir» de Astra caería justo encima. */
@media (min-width:760px){
  body.home #ast-scroll-top{bottom:98px}
}

@media (prefers-reduced-motion:reduce){
  .ml-home a.btn,
  .ml-home a.wa-float,
  .ml-home a.card__more,
  .ml-home .contact__val,
  .ml-home .faq summary::after{transition:none}
  .ml-home a.btn:hover,
  .ml-home a.wa-float:hover{transform:none}
}