/* ============================================================
   Páginas de servicio — terapia para adolescentes y para adultos
   ------------------------------------------------------------
   Mismo lenguaje visual que el prototipo de rediseño: etiqueta de
   sección colgada a la izquierda en escritorio, mucho aire, una
   sola familia serif para titulares y todo el texto por encima
   del mínimo AA.

   Contrastes sobre el crema #FAF8F4:
     #2C3325 12,5:1 · #4A5443 7,4:1 · #4F6245 6,4:1 · #5B6553 5,7:1
   Sobre la banda verde #333F2C:
     #FBFAF7 10,7:1 · #CBD3C1 7,2:1 · #D4A574 5,0:1
   ============================================================ */

.ml-page{
  --ml-ground:#FAF8F4;
  --ml-surface:#EFF1EA;
  --ml-deep:#333F2C;
  --ml-ink:#2C3325;
  --ml-ink-2:#4A5443;
  --ml-soft:#5B6553;
  --ml-sage:#4F6245;
  --ml-sage-brand:#8B9E7E;
  --ml-clay:#D4A574;
  --ml-line:#DDE2D6;
  --ml-serif:'DM Serif Display',Georgia,serif;
  --ml-sans:'Inter',system-ui,-apple-system,sans-serif;

  background:var(--ml-ground);
  color:var(--ml-ink-2);
  font-family:var(--ml-sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
}

/* Astra mete su propio contenedor; lo neutralizamos para poder
   controlar el ancho desde aquí. */
.ml-page .entry-content > *{ margin-block:0 }
.ml-page h1,.ml-page h2,.ml-page h3,.ml-page h4{
  font-family:var(--ml-serif);
  font-weight:400;
  color:var(--ml-ink);
  line-height:1.16;
  margin:0;
  text-wrap:balance;
}
.ml-page p{ margin:0 }
.ml-page a{ color:var(--ml-sage) }

.ml-wrap{
  max-width:1120px;
  margin:0 auto;
  padding-inline:clamp(20px,5vw,40px);
}
.ml-band{ padding-block:clamp(56px,9vw,112px) }
.ml-band--surface{ background:var(--ml-surface) }
.ml-band--deep{ background:var(--ml-deep); color:#CBD3C1 }
.ml-band--deep h2,.ml-band--deep h3{ color:#FBFAF7 }

.ml-grid{ display:grid; gap:clamp(22px,4vw,44px) }
@media (min-width:900px){
  .ml-grid--rail{ grid-template-columns:minmax(140px,1fr) minmax(0,3.2fr) }
}

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

.ml-h2{ font-size:clamp(27px,4vw,40px); margin-bottom:16px }
.ml-h3{ font-size:clamp(21px,2.8vw,27px) }
.ml-lede{
  font-size:clamp(17px,2vw,19px);
  color:var(--ml-soft);
  max-width:62ch;
}
.ml-band--deep .ml-lede{ color:#CBD3C1 }
.ml-prose{ display:grid; gap:18px; max-width:62ch }
.ml-prose p{ font-size:17px }

/* ---------- Portada de la página ---------- */
.ml-hero{ padding-block:clamp(44px,7vw,86px) clamp(40px,6vw,72px) }
.ml-hero h1{
  font-size:clamp(33px,5.6vw,58px);
  letter-spacing:-.012em;
  margin:14px 0 20px;
}
.ml-hero .ml-lede{ font-size:clamp(17px,2.2vw,20px) }
.ml-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }

/* ---------- Botones ---------- */
.ml-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--ml-sans);
  font-size:15px;
  font-weight:500;
  line-height:1;
  padding:15px 27px;
  border-radius:999px;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,
             color .2s ease,border-color .2s ease;
}
.ml-btn:hover,.ml-btn:focus-visible{ transform:translateY(-2px) }
.ml-page a.ml-btn--wa{
  background:var(--ml-sage);
  color:#FBFAF7;
  box-shadow:0 6px 20px rgba(44,51,37,.13);
}
.ml-page a.ml-btn--wa:hover,.ml-page a.ml-btn--wa:focus-visible{ background:#3A4733; color:#FBFAF7 }
.ml-page a.ml-btn--ghost{ border-color:var(--ml-line); color:var(--ml-ink) }
.ml-page a.ml-btn--ghost:hover,.ml-page a.ml-btn--ghost:focus-visible{
  border-color:var(--ml-sage); color:var(--ml-sage);
}
.ml-page a.ml-btn--clay{ background:var(--ml-clay); color:#20260F }
.ml-page a.ml-btn--clay:hover,.ml-page a.ml-btn--clay:focus-visible{ background:#E0B98D; color:#20260F }
.ml-btn svg{ width:17px; height:17px; flex:0 0 auto }

/* Astra subraya los enlaces dentro del contenido y gana por especificidad
   sobre `.ml-btn`. Los botones no deben ir subrayados: el subrayado es para
   enlaces de texto, no para elementos con forma de botón. */
.ml-page a.ml-btn,
.ml-page a.ml-btn:hover,
.ml-page a.ml-btn:focus-visible{ text-decoration:none }
.ml-page .ml-sibling a{ text-decoration:none }


/* ============================================================
   SISTEMA DE DIBUJO — «trazo continuo»
   ------------------------------------------------------------
   El mismo de la portada. Los trazados están definidos una sola
   vez en tools/iconos.py y se sustituyen al desplegar; aquí solo
   viven las reglas comunes.

   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. Comprobado midiendo antes y
   después, sección por sección.
   ============================================================ */
.ml-page .ml-ico{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

/* ---------- Marca del raíl ----------
   Oculta por debajo de 900 px a propósito: ahí las columnas se apilan y esto
   sí alargaría la página en móvil. Los `display:none` van ANTES del media
   query; al final, con la misma especificidad, anularían el bloque. */
.ml-page .ml-rail-mark,
.ml-page .ml-rail-rule{ display:none }

@media (min-width:900px){
  .ml-page .ml-rail-mark{ display:block; margin-bottom:16px }
  .ml-page .ml-rail-mark .ml-ico{ width:38px; height:38px; color:var(--ml-sage-brand) }
  .ml-page .ml-rail-rule{
    display:block;
    width:1px;
    height:56px;
    background:var(--ml-line);
    margin-top:16px;
  }
}

/* ---------- Lista de señales ----------
   Lista tipográfica con filete, no tarjetas: son nueve o diez
   entradas y en tarjetas se convierten en ruido visual. El
   dibujo sustituye al punto. */
.ml-signals{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ml-line);
}
.ml-signals li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:15px 2px;
  border-bottom:1px solid var(--ml-line);
  font-size:17px;
  color:var(--ml-ink-2);
}
/* `flex-start` y no `center` porque aquí muchas entradas ocupan dos líneas:
   centrado, el dibujo quedaría flotando en mitad del párrafo. El desplazamiento
   de 3 px lo alinea ópticamente con la altura de mayúscula de la primera línea.
   24 px caben en la caja de línea (17 px × 1,75 ≈ 30), así que no crece. */
.ml-signals .ml-ico{ width:24px; height:24px; margin-top:3px; color:var(--ml-sage) }
@media (min-width:760px){
  .ml-signals{ columns:2; column-gap:52px }
  .ml-signals li{ break-inside:avoid }
}

/* ---------- Tarjetas ---------- */
.ml-cards{ display:grid; gap:18px }
@media (min-width:800px){ .ml-cards--2{ grid-template-columns:1fr 1fr } }
@media (min-width:900px){ .ml-cards--3{ grid-template-columns:repeat(3,1fr) } }
.ml-card{
  background:var(--ml-ground);
  border:1px solid var(--ml-line);
  border-radius:18px;
  padding:clamp(22px,3vw,30px);
  display:grid;
  gap:10px;
  align-content:start;
  transition:transform .3s ease,box-shadow .3s ease;
}
.ml-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(44,51,37,.08) }
.ml-card h3{ font-size:20px }
.ml-card p{ font-size:15.5px; color:var(--ml-soft) }
.ml-card__tag{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--ml-sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ml-sage);
}
/* Dentro de la etiqueta, no encima: a 20 px cabe en su línea y la tarjeta
   mide exactamente lo mismo que antes. */
.ml-card__tag .ml-ico{ width:20px; height:20px }
/* En las tarjetas de tarifa la etiqueta va sobre fondo oscuro o junto al
   precio; ahí no lleva dibujo, y el flex no debe alterar nada. */
.ml-fee .ml-card__tag{ display:block }

/* ---------- Proceso numerado ----------
   La numeración se usa porque aquí el orden sí es información:
   es una secuencia real, no una decoración. */
.ml-steps{ display:grid; gap:24px; counter-reset:mlstep }
@media (min-width:840px){ .ml-steps{ grid-template-columns:repeat(3,1fr); gap:34px } }
.ml-step{
  counter-increment:mlstep;
  display:grid;
  gap:8px;
  align-content:start;
  padding-top:15px;
  border-top:2px solid var(--ml-sage-brand);
}
.ml-step::before{
  content:counter(mlstep,decimal-leading-zero);
  font-family:var(--ml-sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--ml-sage);
}
.ml-step{ position:relative }
.ml-step h3{ font-size:19px }
.ml-step p{ font-size:15px; color:var(--ml-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.

   OJO CON WPAUTOP: en el HTML el `<svg>` va DENTRO del `<h3>`, no suelto entre
   etiquetas. Suelto, WordPress lo envuelve en un `<p>` que mide cero pero
   cuenta como celda de la rejilla del paso y se lleva un `gap` entero. Y nada
   de comentarios HTML dentro de `.ml-steps`: se convierten en otra celda y
   abren una segunda fila. Las dos trampas ya costaron una vuelta en la
   portada. */
.ml-step .ml-ico{
  position:absolute;
  top:14px;
  right:0;
  width:22px;
  height:22px;
  color:var(--ml-sage-brand);
}

/* El hilo que une los pasos: continúa en punteado el borde superior de cada
   uno a través del hueco que los separa. Cero altura añadida, y los tres dejan
   de leerse como bloques sueltos. Solo en fila; apilados no hay nada que unir. */
@media (min-width:840px){
  .ml-step:not(:last-child)::after{
    content:'';
    position:absolute;
    top:-2px;
    left:100%;
    width:34px;            /* el `gap` de .ml-steps en este tramo */
    border-top:2px dashed var(--ml-sage-brand);
    opacity:.5;
  }
}

/* ---------- Tarifas ---------- */
.ml-fees{ display:grid; gap:18px }
@media (min-width:800px){ .ml-fees{ grid-template-columns:1fr 1fr } }
.ml-fee{ border-radius:20px; padding:clamp(24px,3.4vw,34px); display:grid; gap:8px; align-content:start }
.ml-fee--free{ background:var(--ml-deep); color:#CBD3C1 }
.ml-fee--free .ml-card__tag{ color:var(--ml-clay) }
.ml-fee--std{ background:var(--ml-ground); border:1px solid var(--ml-line) }
.ml-fee__price{ font-family:var(--ml-serif); font-size:clamp(33px,5vw,46px); line-height:1 }
.ml-fee--free .ml-fee__price{ color:var(--ml-clay) }
.ml-fee--std .ml-fee__price{ color:#A9663B }
.ml-fee__meta{ font-size:14px; color:var(--ml-soft) }
.ml-fee--free .ml-fee__meta{ color:#CBD3C1 }
.ml-fee .ml-btn{ margin-top:12px; justify-self:start }

/* ---------- Preguntas ---------- */
.ml-faq{ max-width:62ch }
.ml-faq details{ border-bottom:1px solid var(--ml-line) }
.ml-band--deep .ml-faq details{ border-color:rgba(203,211,193,.22) }
.ml-faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 0;
  display:flex;
  gap:16px;
  align-items:baseline;
  justify-content:space-between;
  font-family:var(--ml-serif);
  font-size:18px;
  color:var(--ml-ink);
}
.ml-band--deep .ml-faq summary{ color:#FBFAF7 }
.ml-faq summary::-webkit-details-marker{ display:none }
.ml-faq summary::after{
  content:'+';
  font-family:var(--ml-sans);
  font-size:21px;
  color:var(--ml-sage);
  flex:0 0 auto;
  transition:transform .25s ease;
}
.ml-band--deep .ml-faq summary::after{ color:var(--ml-clay) }
.ml-faq details[open] summary::after{ transform:rotate(45deg) }
.ml-faq details > p{ padding:0 0 18px; font-size:15.5px; color:var(--ml-soft) }
.ml-band--deep .ml-faq details > p{ color:#CBD3C1 }

/* ---------- Nota lateral ---------- */
.ml-note{
  margin-top:16px;
  padding-left:16px;
  border-left:2px solid var(--ml-sage-brand);
  font-size:14px;
  line-height:1.7;
  color:var(--ml-soft);
  max-width:58ch;
}
.ml-note--clay{ border-color:var(--ml-clay) }
.ml-band--deep .ml-note{ color:#CBD3C1 }

/* ---------- Cierre ---------- */
.ml-cta{ text-align:center }
.ml-cta h2{ margin-bottom:14px }
.ml-cta .ml-lede{ margin:0 auto 28px }
.ml-cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }

/* ---------- Enlaces entre páginas hermanas ---------- */
.ml-sibling{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px;
  border:1px solid var(--ml-line);
  border-radius:16px;
  margin-top:8px;
}
.ml-sibling p{ margin:0; font-size:16px }
.ml-sibling strong{ font-family:var(--ml-serif); font-weight:400; font-size:19px; color:var(--ml-ink) }

@media (max-width:600px){
  .ml-hero__cta .ml-btn,
  .ml-cta__actions .ml-btn{ width:100% }
  .ml-sibling{ flex-direction:column; align-items:flex-start }
}