/* ══════════════════════════════════════════════════════════════════
   COMPONENTES

   Ningún componente usa un hexadecimal literal ni un token de área
   directamente: siempre --acento / --acento-sobre / --acento-suave /
   --acento-solido / --solido-sobre.

   Todo el estilo vive aquí, en hoja externa. La política de seguridad
   del despliegue declara style-src 'self', que bloquea los atributos
   style= en línea: cualquier estilo incrustado en el HTML no llegaría
   a aplicarse en producción.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   CABECERA  ·  neutra en todas las páginas.
   No lleva color de área: rompería la codificación por servicio.
   ══════════════════════════════════════════════════════════ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--beige-base) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 4.5rem;
}

/* ── Logotipo ── */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: var(--tinta);
  flex: none;
}

/* El monograma es el logotipo REAL, recortado del original del autor
   (img/src/logo-original.jpeg) y con el fondo hecho transparente. No es
   una reconstrucción en vector: se intentó y no daba la textura del
   pincel. Por eso es un PNG y no hereda el color del tema — el verde
   que lleva es el del logotipo. */
.marca .monograma {
  width: auto;
  height: 2.6rem;
  flex: none;
}

@media (max-width: 26em) {
  .marca .monograma { height: 2.2rem; }
}

.marca__nombre {
  font-family: var(--tipo-titulo);
  font-size: 1.2rem;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 26em) {
  .marca__nombre { font-size: 1.05rem; white-space: normal; }
}

/* ── Navegación ── */
.menu-boton {
  display: none;
  align-items: center;
  gap: var(--e-2);
  background: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: var(--e-2) var(--e-3);
  color: var(--tinta-cuerpo);
  font-size: var(--texto-m);
  font-weight: 500;
  cursor: pointer;
}

.menu-boton[hidden] { display: none !important; }

.menu-boton svg { width: 1.25rem; height: 1.25rem; }

.navegacion ul {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
}

/* :not(.boton) es imprescindible. Sin él, `.navegacion a` (0,1,1) gana a
   `.boton--principal` (0,1,0) y el CTA de la cabecera pierde su texto
   blanco: quedaría tinta oscura sobre el acento oscuro, ilegible. */
.navegacion a:not(.boton) {
  color: var(--tinta-cuerpo);
  text-decoration: none;
  font-size: var(--texto-m);
  font-weight: 500;
  border-bottom: 1px solid transparent;
}

.navegacion a:not(.boton):hover,
.navegacion a:not(.boton):focus-visible { border-bottom-color: var(--tinta-cuerpo); }

.navegacion a:not(.boton)[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

/* Sin JavaScript el menú está siempre desplegado y es navegable.
   El script añade .js-menu, que habilita el plegado en móvil. */
@media (max-width: 61.99em) {
  .cabecera__barra { flex-wrap: wrap; padding-block: var(--e-3); }
  .navegacion { width: 100%; }
  .navegacion ul { flex-direction: column; align-items: stretch; gap: 0; }
  .navegacion li { border-top: 1px solid var(--linea); }
  .navegacion a { display: block; padding: var(--e-3) 0; }
  .navegacion li:last-child { margin-top: var(--e-3); border-top: 0; }
  .navegacion .boton { width: 100%; }

  .js-menu .menu-boton { display: inline-flex; }
  .js-menu .navegacion[data-abierto="false"] { display: none; }
}


/* ══════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: var(--texto-m);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion);
}

.boton--principal {
  background: var(--acento);
  color: var(--acento-sobre);
}

.boton--principal:hover {
  background: color-mix(in srgb, var(--acento) 84%, var(--tinta));
}

/* Enlace secundario: sin caja, con filete inferior y flecha. */
.boton--texto {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.75rem 0;
  color: var(--tinta);
  font-size: var(--texto-m);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--tinta);
}

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-6);
}


/* ══════════════════════════════════════════════════════════
   HERO DE PORTADA
   ══════════════════════════════════════════════════════════ */

.hero__rejilla {
  display: grid;
  gap: var(--e-8);
  align-items: center;
}

@media (min-width: 56em) {
  .hero__rejilla { grid-template-columns: 1.15fr 0.85fr; }
}

.hero__entrada {
  font-size: var(--texto-xl);
  max-width: 36ch;
  margin-top: var(--e-5);
}

.hero__retrato {
  border: 1px solid var(--linea);
  background: var(--superficie);
}

.hero__retrato img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ── Línea de acreditación ── */
.acreditacion {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  font-size: var(--texto-m);
  max-width: 40ch;
}

.acreditacion strong {
  display: block;
  color: var(--tinta);
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════
   TARJETA DE ÁREA  ·  portada
   Franja de color macizo arriba, ejemplos de situación debajo.
   Todo el bloque es pulsable mediante el ::after del título.
   ══════════════════════════════════════════════════════════ */

.rejilla-areas {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}

/* Son cinco áreas. Con columnas automáticas caen 4 + 1 y la quinta queda
   descolgada; en pantalla ancha se reparten 3 + 2 centradas. */
@media (min-width: 64em) {
  .rejilla-areas { grid-template-columns: repeat(6, 1fr); }
  .rejilla-areas > li:nth-child(1) { grid-column: 1 / span 2; }
  .rejilla-areas > li:nth-child(2) { grid-column: 3 / span 2; }
  .rejilla-areas > li:nth-child(3) { grid-column: 5 / span 2; }
  .rejilla-areas > li:nth-child(4) { grid-column: 2 / span 2; }
  .rejilla-areas > li:nth-child(5) { grid-column: 4 / span 2; }
}

.tarjeta-area {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linea);
  transition: border-color var(--transicion);
}

.tarjeta-area:hover { border-color: var(--acento); }

.tarjeta-area__color {
  display: block;
  height: 4px;
  background: var(--acento-solido);
}

.tarjeta-area__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--e-5);
}

.tarjeta-area__titulo {
  font-size: var(--titulo-tarjeta);
  margin-bottom: 0.9rem;
}

.tarjeta-area__titulo a {
  color: inherit;
  text-decoration: none;
}

/* Superficie pulsable: cubre la tarjeta entera sin encerrar los tres
   ejemplos dentro del texto accesible del enlace. */
.tarjeta-area__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tarjeta-area__ejemplos {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  flex: 1;
}

.tarjeta-area__ejemplos li {
  position: relative;
  padding-left: 0.9rem;
  font-size: var(--texto-m);
}

.tarjeta-area__ejemplos li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--acento);
}

.tarjeta-area__cta {
  display: inline-block;
  width: fit-content;
  margin-top: var(--e-5);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--acento);
  color: var(--acento);
  font-size: var(--texto-m);
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════
   DIAGRAMA  ·  situación → conducta → consecuencia
   ══════════════════════════════════════════════════════════ */

.diagrama {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.diagrama__paso {
  flex: 1 1 11rem;
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--linea);
}

.diagrama__paso--destacado {
  background: var(--acento);
  border-color: var(--acento);
}

.diagrama__paso--destacado h3 { color: var(--acento-sobre); }

/* 5.69 y 7.50 sobre --acento en portada · AA ✓ */
.diagrama__paso--destacado .antetitulo {
  color: color-mix(in srgb, #FFFFFF 70%, var(--acento));
}

.diagrama__paso--destacado p {
  color: color-mix(in srgb, #FFFFFF 85%, var(--acento));
}

.diagrama__paso h3 { font-size: var(--titulo-menor); }
.diagrama__paso p  { font-size: var(--texto-m); margin-top: var(--e-2); }

.diagrama__flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-inline: var(--e-3);
  color: var(--acento);
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 48em) {
  .diagrama { flex-direction: column; }
  .diagrama__flecha { transform: rotate(90deg); padding: var(--e-2) 0; }
}


/* ══════════════════════════════════════════════════════════
   PRINCIPIO DE MARCA  ·  cita destacada
   ══════════════════════════════════════════════════════════ */

.principio { max-width: var(--ancho-estrecho); margin-inline: auto; }

.principio blockquote {
  font-family: var(--tipo-titulo);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.3;
  color: var(--tinta);
}

.principio blockquote p { max-width: none; }

.principio__nota { margin-top: var(--e-5); }


/* ══════════════════════════════════════════════════════════
   PASOS DE LA METODOLOGÍA
   ══════════════════════════════════════════════════════════ */

.rejilla-pasos {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.paso {
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: var(--e-5);
}

.paso__numero {
  font-family: var(--tipo-titulo);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--acento);
}

.paso h3 { font-size: 1.05rem; margin-top: var(--e-3); }
.paso p  { font-size: var(--texto-s); margin-top: var(--e-2); }


/* ══════════════════════════════════════════════════════════
   FICHAS  ·  perfil profesional
   ══════════════════════════════════════════════════════════ */

/* Seis fichas: con 18rem de mínimo salen 3 + 3 en escritorio. */
.rejilla-fichas {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.ficha {
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: var(--e-5);
}

.ficha h3 {
  font-size: var(--texto);
  font-family: var(--tipo-texto);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e-3);
}

.ficha p { font-size: var(--texto-m); }


/* ══════════════════════════════════════════════════════════
   ACORDEÓN (FAQ)
   Sin JavaScript los paneles quedan abiertos y legibles.
   El script los pliega y gestiona aria-expanded.
   ══════════════════════════════════════════════════════════ */

.acordeon {
  border-top: 1px solid var(--linea);
  max-width: var(--ancho-texto);
}

.acordeon__item { border-bottom: 1px solid var(--linea); }

.acordeon__titulo { margin: 0; }

.acordeon__disparador {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--tipo-titulo);
  font-size: var(--titulo-menor);
  line-height: 1.3;
  color: var(--tinta);
}

.acordeon__disparador:hover { color: var(--acento); }

.acordeon__signo {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.25em;
  color: var(--acento);
  transition: transform var(--transicion);
}

.acordeon__disparador[aria-expanded="true"] .acordeon__signo { transform: rotate(45deg); }

.acordeon__panel { padding-bottom: var(--e-5); }
.acordeon__panel[hidden] { display: none; }


/* ══════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════ */

.contacto__rejilla {
  display: grid;
  gap: var(--e-8);
}

@media (min-width: 56em) {
  .contacto__rejilla { grid-template-columns: 1.2fr 0.8fr; }
}

/* ── Formulario ──
   Los bordes usan --linea-fuerte (3.14): los componentes de interfaz
   no textuales exigen 3:1 y --linea se queda muy por debajo. */

.formulario { max-width: 32rem; }

.campos { display: flex; flex-direction: column; gap: var(--e-5); }

.campo { display: flex; flex-direction: column; gap: var(--e-2); }

.campo label {
  font-size: var(--texto-m);
  font-weight: 500;
  color: var(--tinta);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--tinta);
  /* 1rem exacto: por debajo de 16 px, iOS hace zoom al enfocar. */
  font-size: var(--texto);
}

.campo textarea { min-height: 7rem; line-height: 1.55; }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 1px;
  border-color: var(--tinta);
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4944' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--texto-s);
}

/* 1.5rem = 24 px, que es el mínimo de objetivo táctil del criterio 2.5.8 de
   WCAG 2.2. Con 1.1rem se quedaba en 18 px: en un móvil, marcar la casilla
   exigía puntería. La etiqueta también es pulsable, pero eso no sustituye a
   que la casilla en sí tenga un tamaño decente. */
.consentimiento input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05em;
  flex: none;
  accent-color: var(--acento);
}

/* ── Panel «qué ocurre después» ── */
.despues {
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: var(--e-5);
}

.despues h2 {
  font-family: var(--tipo-texto);
  font-size: var(--texto);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e-4);
}

.despues ol { display: flex; flex-direction: column; gap: var(--e-4); }
.despues li { display: flex; gap: var(--e-3); font-size: var(--texto-m); }

.despues li > span:first-child {
  font-family: var(--tipo-titulo);
  color: var(--acento);
  flex: none;
}

/* ── Canales directos ── */
.canales {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.canales a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.9rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  text-decoration: none;
  color: var(--tinta);
  font-size: var(--texto-m);
  transition: border-color var(--transicion);
}

.canales a:hover { border-color: var(--acento); }

.canales svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--acento); }

.nota-deontologica { font-size: var(--texto-s); margin-top: var(--e-5); }


/* ══════════════════════════════════════════════════════════
   MIGAS DE PAN
   ══════════════════════════════════════════════════════════ */

.migas { margin-bottom: var(--e-5); }

.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--texto-m);
}

.migas [aria-current="page"] { opacity: 0.75; }

.migas__separador { color: var(--tinta-tenue); }


/* ══════════════════════════════════════════════════════════
   PÁGINAS DE SERVICIO
   ══════════════════════════════════════════════════════════ */

.entradilla {
  font-size: var(--texto-l);
  max-width: 52ch;
  margin-top: var(--e-5);
}

/* ── Lista con filete ── */
.lista-filete {
  max-width: var(--ancho-texto);
  border-top: 1px solid var(--linea);
}

.lista-filete > li {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--linea);
}

.lista-filete--holgada > li { padding-block: var(--e-4); }

.lista-filete strong { color: var(--tinta); font-weight: 600; }

/* ── Tarifas ── */
.tarifas {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tarifa {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: var(--e-5);
}

.tarifa--sola { max-width: 20rem; }

.tarifa h3 { font-size: var(--titulo-ficha); margin-top: var(--e-1); }

.tarifa__importe {
  font-family: var(--tipo-titulo);
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--tinta);
  margin-top: var(--e-3);
}

.tarifa__unidad {
  display: block;
  font-family: var(--tipo-texto);
  font-size: var(--texto-s);
  color: var(--tinta-cuerpo);
  margin-top: var(--e-1);
}

.tarifa__lista { margin-top: var(--e-3); }

.tarifa__lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--linea);
  font-size: var(--texto-m);
}

.tarifa__lista li:last-child { border-bottom: 0; }

.tarifa__lista b {
  font-family: var(--tipo-titulo);
  font-weight: 400;
  color: var(--tinta);
  white-space: nowrap;
}

.tarifa__nota {
  margin-top: auto;
  padding-top: var(--e-4);
  font-size: var(--texto-s);
}

/* ── Aviso enmarcado ── */
.aviso {
  border: 1px solid var(--linea-fuerte);
  background: var(--superficie);
  padding: var(--e-5);
  max-width: var(--ancho-texto);
}

/* ── Otras áreas ── */
.otras-areas {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.otra-area {
  display: block;
  padding: var(--e-4);
  background: var(--acento-solido);
  color: var(--solido-sobre);
  text-decoration: none;
  font-size: var(--texto-m);
  font-weight: 500;
}

.otra-area:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════
   PIE  ·  neutro, sin color de área
   ══════════════════════════════════════════════════════════ */

.pie {
  margin-top: var(--e-6);
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  padding-block: var(--e-8) var(--e-6);
}

.pie__rejilla {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.pie h2 {
  font-family: var(--tipo-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e-4);
}

.pie ul { display: flex; flex-direction: column; gap: var(--e-3); }

.pie a {
  color: var(--tinta-cuerpo);
  text-decoration: none;
  font-size: var(--texto-m);
}

.pie a:hover { text-decoration: underline; }

.pie address {
  font-style: normal;
  font-size: var(--texto-m);
  color: var(--tinta-cuerpo);
}

.pie__legal {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
  font-size: var(--texto-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
}

.pie__legal ul { flex-direction: row; flex-wrap: wrap; gap: var(--e-5); }


/* ══════════════════════════════════════════════════════════
   PÁGINAS LEGALES
   ══════════════════════════════════════════════════════════ */

.legal__cuerpo { max-width: var(--ancho-texto); }
.legal__cuerpo h2 { margin-top: var(--e-6); }
.legal__cuerpo p,
.legal__cuerpo ul { margin-top: var(--e-4); }
.legal__cuerpo ul { padding-left: var(--e-5); list-style: disc; }
.legal__cuerpo li { margin-top: var(--e-2); }


/* ══════════════════════════════════════════════════════════
   ▓▓ AMPLIACIÓN DE AGOSTO DE 2026 ▓▓

   Componentes de las páginas de servicio. Cada área tiene su propia
   pieza estructural, distinta de las demás y elegida por lo que ese
   servicio ES, no por rellenar:

     familias        .itinerario   el proceso tiene fechas reales
     terapia         .contraste    el argumento es «esto, no aquello»
     formación       .temas        el contenido es un menú que se adapta
     centros         .disonancia   el problema es la falta de criterio común
     organizaciones  .ciclo        el valor está en medir antes y después

   Ninguna se repite en otra página, a propósito.
   ══════════════════════════════════════════════════════════ */


/* ── Cabecera de servicio, con el icono del área ─────────── */

.cabecera-servicio {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

/* minmax(0, …) y no 1fr a secas: sin él, el titular largo impone su anchura
   mínima y la ilustración se queda sin sitio en pantallas intermedias. */
@media (min-width: 52em) {
  .cabecera-servicio {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--e-7);
    align-items: center;
  }
}

/* ── Escena: la ilustración grande de cada servicio ──────
   No es un icono. Es un diagrama de contingencia dibujado con un
   vocabulario común a las cinco páginas —círculos para personas y
   eventos, líneas para relaciones, un área para el contexto y un solo
   elemento en acento para lo que se busca cambiar— de modo que las
   cinco se reconozcan como una familia sin ser la misma imagen.

   Se dibuja sola al cargar. Como todos los trazos llevan pathLength="1",
   el recorrido se normaliza y una misma animación sirve para líneas de
   longitudes muy distintas. */

.escena {
  width: 100%;
  max-width: 22rem;
  height: auto;
  color: var(--acento);
  justify-self: center;
  /* Los trazos son finos y algunos rozan el borde del viewBox: sin esto,
     el navegador los recortaría al escalar. */
  overflow: visible;
}

@media (min-width: 52em) {
  .escena { max-width: 30rem; justify-self: end; }
}

@media (min-width: 68em) {
  .escena { max-width: 34rem; }
}

.escena__area {
  fill: var(--acento-suave);
  stroke: var(--linea-fuerte);
}

.escena__nodo  { fill: var(--acento); stroke: none; }
.escena__hueco { fill: var(--superficie); }
.escena__tenue { stroke: var(--linea-fuerte); }

.escena__etiqueta {
  font-family: var(--tipo-texto);
  font-size: 13px;
  font-weight: 600;
  fill: var(--tinta-tenue);
  stroke: none;
}

/* Pie de la ilustración: lo que se ve, dicho en una línea. */
.escena-pie {
  margin-top: var(--e-4);
  font-size: var(--texto-s);
  color: var(--tinta-tenue);
  max-width: 32ch;
}

@media (min-width: 52em) {
  .escena-pie { text-align: right; margin-left: auto; }
}


/* ── Tira de cifras ──────────────────────────────────────── */

.cifras {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--linea);
  padding-top: var(--e-5);
}

.cifras__dato {
  display: block;
  font-family: var(--tipo-titulo);
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  line-height: 1.1;
  color: var(--acento);
}

.cifras__nota {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--texto-m);
  max-width: 22ch;
}


/* ── FAMILIAS · itinerario con fechas ────────────────────── */

.itinerario {
  position: relative;
  max-width: var(--ancho-texto);
  padding-left: var(--e-6);
}

/* El hilo vertical que une los hitos. */
.itinerario::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--linea);
}

.itinerario__hito { position: relative; padding-bottom: var(--e-6); }

.itinerario__hito:last-child { padding-bottom: 0; }

.itinerario__hito::before {
  content: "";
  position: absolute;
  left: calc(var(--e-6) * -1);
  top: 0.55rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acento);
}

.itinerario__cuando {
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-tenue);
}

.itinerario__hito h3 { font-size: var(--titulo-menor); margin-top: var(--e-2); }
.itinerario__hito p  { font-size: var(--texto-m); margin-top: var(--e-2); }


/* ── TERAPIA · contraste de dos columnas ─────────────────── */

.contraste {
  display: grid;
  gap: var(--e-5);
  max-width: var(--ancho-texto);
}

@media (min-width: 46em) {
  .contraste { grid-template-columns: 1fr 1fr; }
}

.contraste__lado { padding: var(--e-5); border: 1px solid var(--linea); }

/* El lado «de siempre» va apagado; el propio, teñido y con filete de
   acento. La jerarquía la marca el color, no el tamaño. */
.contraste__lado--otro { background: transparent; }
.contraste__lado--otro li { color: var(--tinta-tenue); }

.contraste__lado--propio {
  background: var(--superficie);
  border-top: 3px solid var(--acento);
}

.contraste__lado ul {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-4);
  font-size: var(--texto-m);
}

.contraste__lado li { position: relative; padding-left: 1.1rem; }

.contraste__lado--otro li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--tinta-tenue);
}

.contraste__lado--propio li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--acento);
}


/* ── FORMACIÓN · temas y formatos ────────────────────────── */

.temas {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.tema {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  padding: var(--e-4) var(--e-5);
}

.tema h3 { font-size: var(--titulo-menor); }
.tema p  { font-size: var(--texto-m); margin-top: var(--e-2); }

.formatos {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  max-width: var(--ancho-texto);
}

.formato {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: var(--e-5);
}

.formato svg { width: 1.75rem; height: 1.75rem; color: var(--acento); }
.formato h3  { font-size: var(--titulo-ficha); }
.formato p   { font-size: var(--texto-m); }


/* ── CENTROS · la misma conducta, respuestas distintas ───── */

.disonancia { max-width: var(--ancho-texto); }

.disonancia__origen {
  background: var(--acento);
  color: var(--acento-sobre);
  padding: var(--e-4) var(--e-5);
  font-weight: 600;
  text-align: center;
}

/* Conector: un tallo baja del origen hasta un raíl horizontal, y de ahí
   salen las cinco derivaciones. Se dibuja con pseudoelementos, no con un
   SVG, porque tiene que estirarse con el ancho de la retícula.

   El raíl va del 10 % al 90 %, que es donde caen los centros de la
   primera y la última columna cuando son cinco iguales. */
.disonancia__conector {
  position: relative;
  height: 3rem;
}

.disonancia__conector::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 1.5rem;
  background: var(--linea-fuerte);
  transform-origin: top center;
}

.disonancia__conector::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 1.5rem;
  height: 1px;
  background: var(--linea-fuerte);
  transform-origin: center;
}

/* Cinco columnas exactas a partir de 62em, y una sola por debajo. Con
   repeat(auto-fit, …) quedaba una celda huérfana en las anchuras
   intermedias: cuatro arriba y una descolgada abajo. */
.disonancia__abanico {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
}

@media (min-width: 62em) {
  .disonancia__abanico { grid-template-columns: repeat(5, 1fr); }
}

/* Por debajo de 62em el abanico se convierte en una lista con espina
   dorsal a la izquierda: el conector horizontal ahí no tendría sentido. */
@media (max-width: 61.99em) {
  .disonancia__conector { height: 1.5rem; }
  .disonancia__conector::after { display: none; }
  .disonancia__conector::before { left: 1.25rem; height: 1.5rem; }
  .disonancia__abanico { position: relative; padding-left: var(--e-6); }
  .disonancia__abanico::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 0;
    bottom: 50%;
    width: 1px;
    background: var(--linea-fuerte);
  }
}

.disonancia__respuesta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--linea-fuerte);
  padding: var(--e-4);
  text-align: center;
}

/* Derivación desde el raíl hasta cada tarjeta. */
@media (min-width: 62em) {
  .disonancia__respuesta::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1.5rem;
    width: 1px;
    height: 1.5rem;
    background: var(--linea-fuerte);
    transform-origin: top center;
  }
}

@media (max-width: 61.99em) {
  .disonancia__respuesta { text-align: left; }
  .disonancia__respuesta::before {
    content: "";
    position: absolute;
    left: calc(var(--e-6) * -1 + 1.25rem);
    top: 1.4rem;
    width: calc(var(--e-6) - 1.25rem);
    height: 1px;
    background: var(--linea-fuerte);
    transform-origin: left center;
  }
}

.disonancia__que {
  font-weight: 600;
  color: var(--tinta);
  font-size: var(--texto-m);
}

/* La consecuencia que entrega esa respuesta: es el dato que explica por
   qué la conducta no se debilita. Va en acento para que se lea como la
   conclusión, no como un pie de foto. */
.disonancia__efecto {
  font-size: var(--texto-s);
  color: var(--acento);
  line-height: 1.4;
}

.disonancia__moraleja {
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
  font-size: var(--texto-l);
  color: var(--tinta);
}


/* ── ORGANIZACIONES · ciclo de medida ────────────────────── */

.ciclo {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  counter-reset: fase;
}

.ciclo__fase {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: var(--e-5);
  counter-increment: fase;
}

.ciclo__fase::before {
  content: counter(fase);
  display: block;
  font-family: var(--tipo-titulo);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--acento);
  margin-bottom: var(--e-3);
}

.ciclo__fase h3 { font-size: var(--titulo-menor); }
.ciclo__fase p  { font-size: var(--texto-m); margin-top: var(--e-2); }

/* La última fase cierra el ciclo: vuelve a medir. Se marca con el borde
   punteado en vez de con una flecha, que en móvil no cabría. */
.ciclo__fase--cierra { border-style: dashed; border-color: var(--linea-fuerte); }


/* ── Qué incluye, dentro de una tarifa ───────────────────── */

.tarifa__incluye {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-4);
  font-size: var(--texto-m);
}

.tarifa__incluye li { position: relative; padding-left: 1.4rem; }

.tarifa__incluye li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 0.55rem; height: 0.3rem;
  border-left: 2px solid var(--acento);
  border-bottom: 2px solid var(--acento);
  rotate: -45deg;
}


/* ── Bloque de contacto al pie de cada servicio ──────────── */

.contacto-servicio {
  display: grid;
  gap: var(--e-6);
}

@media (min-width: 56em) {
  .contacto-servicio { grid-template-columns: 1.15fr 0.85fr; gap: var(--e-8); }
}

.contacto-servicio .formulario { max-width: none; }

.contacto-servicio__aparte {
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: var(--e-5);
  align-self: start;
}

.contacto-servicio__aparte h3 {
  font-family: var(--tipo-texto);
  font-size: var(--texto);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e-4);
}

.contacto-servicio__aparte ol {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.contacto-servicio__aparte li {
  display: flex;
  gap: var(--e-3);
  font-size: var(--texto-m);
}

.contacto-servicio__aparte li > span:first-child {
  font-family: var(--tipo-titulo);
  color: var(--acento);
  flex: none;
}

.contacto-servicio__aparte .canales { margin-top: var(--e-5); }

/* Va DENTRO de .grupo-botones, no debajo: así se lee como una coletilla
   del botón —«pulsa aquí, y por cierto, es gratis»— y no como un aviso
   suelto flotando bajo cada cabecera. En pantalla estrecha cae a la línea
   siguiente por el flex-wrap del propio grupo, sin regla adicional. */
/* ── Caso de ejemplo ─────────────────────────────────────
   Inventado y sin datos de nadie. El rótulo de arriba lo dice sin
   rodeos y no es opcional: un caso ilustrativo que pudiera leerse como
   real sería un problema deontológico, no un detalle de estilo. */

.caso {
  max-width: var(--ancho-texto);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  padding: var(--e-5) var(--e-5) var(--e-4);
}

.caso__marca {
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e-4);
}

.caso h3 { font-size: var(--titulo-menor); margin-bottom: var(--e-3); }

.caso dl { display: flex; flex-direction: column; gap: var(--e-3); }

.caso dt {
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acento);
}

.caso dd { margin: var(--e-1) 0 0; font-size: var(--texto-m); }

/* Desglose técnico dentro del caso: nombra los procedimientos por su nombre
   y explica por qué se eligieron. Va sangrado y con filete lateral para que
   se lea como un aparte, sin romper el hilo del relato. */
.caso__tecnica {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin: var(--e-4) 0;
  padding-left: var(--e-4);
  border-left: 2px solid var(--acento-suave);
}

.caso__tecnica li { font-size: var(--texto-m); }

.caso__tecnica strong { color: var(--tinta); }

.caso__aviso {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  font-size: var(--texto-s);
  color: var(--tinta-tenue);
}

/* ── Por qué a domicilio ─────────────────────────────────── */

.domicilio {
  max-width: var(--ancho-texto);
  border-top: 1px solid var(--linea);
  padding-top: var(--e-5);
  margin-top: var(--e-5);
}

.domicilio p + p { margin-top: var(--e-4); }

.gratuito {
  margin: 0;
  font-size: var(--texto-s);
  line-height: 1.35;
  color: var(--tinta-tenue);
  max-width: 22ch;
}


/* ══════════════════════════════════════════════════════════
   BARRA FIJA DE MÓVIL

   Solo por debajo de 62em y solo cuando el primer botón de la página ya
   ha pasado de largo: mientras se ve el botón de arriba, la barra
   sobraría. La muestra js/sitio.js.

   Va oculta con [hidden] en el marcado, de modo que sin JavaScript no
   aparece nunca y no tapa nada.
   ══════════════════════════════════════════════════════════ */

.barra-movil { display: none; }

@media (max-width: 61.99em) {
  .barra-movil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    padding-bottom: max(var(--e-3), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--superficie) 96%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea);
  }

  .barra-movil[hidden] { display: none; }

  /* A 375 px sobra poco sitio: el texto va en el escalón más pequeño y con
     el interlineado apretado, para que la barra no se coma la pantalla. */
  .barra-movil__nota {
    flex: 1 1 6rem;
    margin: 0;
    font-size: var(--texto-xs);
    line-height: 1.25;
    color: var(--tinta-tenue);
  }

  /* Por debajo de 22em no cabe con dignidad: manda el botón. */
  @media (max-width: 22em) {
    .barra-movil__nota { display: none; }
  }

  .barra-movil .boton { padding: 0.65rem 0.9rem; }

  .barra-movil__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    flex: none;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    color: var(--acento);
  }

  .barra-movil__icono svg { width: 1.25rem; height: 1.25rem; }

  /* Que la barra no tape el final de la página. */
  .con-barra-movil .pie { padding-bottom: 5.5rem; }
}