@font-face {
  font-family: 'Newsreader';
  src: url('fuentes/newsreader-variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fuentes/newsreader-variable-italica.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
/* Respaldo con las medidas de Newsreader (2026-10-11): mientras llega la buena, el
   texto ocupa lo mismo y nada salta al cambiarla (antes, CLS 0,11 en móvil). El
   ancho (`size-adjust`) y la altura (`*-override`) se midieron con un lienzo en
   Chromium contra el titular de la portada. Iowan en iPhone y Mac; Georgia, el resto. */
@font-face {
  font-family: 'Newsreader Iowan';
  src: local('Iowan Old Style'), local('IowanOldStyle-Roman');
  font-style: normal;
  size-adjust: 99.3%;
  ascent-override: 74%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Iowan';
  src: local('Iowan Old Style Italic'), local('IowanOldStyle-Italic');
  font-style: italic;
  size-adjust: 105.5%;
  ascent-override: 74%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Georgia';
  src: local('Georgia');
  font-style: normal;
  size-adjust: 100.8%;
  ascent-override: 74%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Georgia';
  src: local('Georgia Italic'), local('Georgia-Italic');
  font-style: italic;
  size-adjust: 90.6%;
  ascent-override: 74%;
  descent-override: 26%;
  line-gap-override: 0%;
}
/*
 * Paleta tomada de su Instagram: blanco, granate burdeos, casi negro y rosa
 * palo. Allí el granate ocupa poca superficie —titulares y trazos sobre
 * blanco—, así que aquí tampoco se usa como fondo de secciones enteras: manda
 * el papel, y el granate acentúa.
 *
 * Todos los tonos están comprobados contra su fondo: texto ≥ 4,5:1 y contorno
 * de controles ≥ 3:1. Si se cambia uno, hay que rehacer esa cuenta.
 */
:root {
  color-scheme: light;
  --papel: #faf7f4;
  --papel-rosa: #efe4e3;
  --papel-suave: #f4ece9;
  --tinta: #2b2424;
  --texto: #5c5350;
  --apagado: #6e6359;
  --linea: #e4d9d5;
  --granate: #7a1e28;
  --granate-claro: #8d2b35;
  --borde-control: #8d7a78;
  --error: #8a2f3c;
  --serif: 'Newsreader', 'Newsreader Iowan', 'Newsreader Georgia', Palatino, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --margen: clamp(1.4rem, 5.5vw, 6rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  margin: 0;
  color: var(--tinta);
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.1;
  text-wrap: balance;
}
h1 em, h2 em { font-weight: 400; }
p { margin: 0 0 1.4em; max-width: 39rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--granate-claro); text-underline-offset: .3em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--granate-claro); outline-offset: 5px; }
/* Los títulos que enfoca el menú al saltar (`tabIndex = -1` en interacciones.js) no son
   controles: el foco está para que el lector de pantalla empiece ahí, no para enmarcarlos.
   Sin esto, WebKit dibujaba un recuadro granate en «Pide tu llamada gratuita» al llegar. */
h2[tabindex='-1']:focus, h3[tabindex='-1']:focus { outline: none; }
.saltar { position: absolute; left: -9999px; top: 0; background: var(--granate); color: white; padding: .6rem 1rem; z-index: 10; }
.saltar:focus { left: 0; }
.franja { padding-inline: var(--margen); }
.contenido { max-width: 75rem; margin-inline: auto; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--linea); }
.marca { font-family: var(--serif); line-height: 1.1; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.marca span { display: block; margin-top: .65rem; font-family: var(--sans); font-size: .62rem; font-weight: 500; }
.menu { display: flex; align-items: center; }
.menu a { text-decoration: none; color: var(--texto); }
.menu .menu-cita { border: 1px solid var(--borde-control); color: var(--tinta); }
.rotulo { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); line-height: 1.6; }
.portada-rejilla { display: grid; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; margin-top: 2rem; font-size: .78rem; }
.boton { display: inline-flex; align-items: center; gap: 1.7rem; color: white; text-decoration: none; }
.boton:active { transform: scale(.98); }
.boton span { font-size: 1.1rem; }
.secundaria { text-decoration: none; padding-block: .5rem; border-bottom: 1px solid var(--borde-control); }
.secundaria span { margin-left: .8rem; }
.portada-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--apagado); }
.portada-pie a { text-decoration: none; }
.portada-pie a span { margin-left: 1.5rem; }
.seccion { border-top: 1px solid var(--linea); }
.rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.rail { display: grid; gap: 1.5rem; }
.rail > .rotulo { margin: 0; }
.rejilla h2 { font-size: clamp(2.3rem, 3.5vw, 3.5rem); letter-spacing: -.025em; }
.cuerpo > p:first-child { margin-top: .2rem; }
#proceso { background: var(--papel-rosa); }
.ficha { border-top: 1px solid var(--linea); padding-top: 1.5rem; font-size: .78rem; line-height: 1.6; }
.ficha h3 { font-family: var(--sans); font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.4rem; }
.ficha dl { margin: 0; display: grid; }
.ficha dd { margin: .15rem 0 0; }
.sobre-mi-entrada { font-family: var(--serif); color: var(--tinta); }
.preguntas { border-bottom: 1px solid var(--linea); }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas summary { cursor: pointer; color: var(--tinta); list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas details > p { padding: 0 2rem 1.4rem 0; font-size: .88rem; }
.contacto h2, .contacto a { color: var(--tinta); }
.correo { display: inline-block; font-family: var(--serif); text-decoration: none; border-bottom: 1px solid var(--borde-control); padding-bottom: .5rem; overflow-wrap: anywhere; }
.correo span { font-family: var(--sans); margin-left: .5rem; font-size: 1.2rem; }
.otros-canales { margin-top: 1.8rem; }
.pie { font-size: .78rem; color: var(--apagado); padding-block: 2.2rem; }
.pie .contenido { display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; }
.pie p { max-width: 42rem; margin: 0; }
.pie p span { display: inline-block; margin-top: .35rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.pie a { color: var(--apagado); text-decoration: none; }
.legal { padding-block: 5rem; }
.legal .contenido { max-width: 48rem; }
.legal h1 { font-size: clamp(2.7rem, 5vw, 4rem); margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.7rem; margin: 2.5rem 0 1rem; }
.legal ul { padding-left: 1.1rem; }
.legal li { margin-bottom: .5rem; }
.legal .volver { display: inline-block; margin-top: 2rem; }
@media (hover: hover) and (pointer: fine) {
  .menu a:hover, .pie a:hover { color: var(--granate-claro); text-decoration: underline; }
  .menu .menu-cita:hover { text-decoration: none; }
  .secundaria:hover { border-color: var(--tinta); }
}
@media (max-width: 65rem) {
  .portada-rejilla { grid-template-columns: 1.5fr 1fr; }
  .rejilla { gap: 3rem; grid-template-columns: 1fr 1.5fr; }
}
@media (max-width: 47rem) {
  .menu .menu-cita { font-size: .72rem; }
  .rejilla { grid-template-columns: 1fr; gap: 2rem; }
  .rail { gap: 1rem; }
  .ficha { max-width: none; }
  .contacto .rejilla { gap: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .boton:active, .carrusel-flecha:active { transform: none !important; }
}

/* Dirección editorial: aire de revista, granate de acento. */
::selection { background: #eed7d6; color: var(--tinta); }
.cabecera { padding-block: 1.9rem; border: 0; }
.marca { font-size: 2rem; letter-spacing: -.04em; }
.marca span { color: var(--apagado); letter-spacing: .17em; }
.menu { gap: clamp(.9rem, 1.8vw, 2rem); font-size: .82rem; white-space: nowrap; }
.menu .menu-cita { border-color: var(--borde-control); border-radius: 2px; padding: .7rem 1.15rem; }
.portada { padding-top: 1.2rem; }
.portada-rejilla { grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; }
.portada-texto { padding-block: 2rem; }
/* El titular es una pregunta larga (2026-10-10): más pequeño que el lema de antes,
   pero sigue siendo lo más grande de la página. */
.portada h1 { font-size: clamp(3rem, 4.6vw, 4.6rem); letter-spacing: -.035em; line-height: 1.04; }
.portada h1 em { color: var(--granate); }
.entrada { margin-top: 2rem; font-size: .93rem; max-width: 26rem; }
.acciones { gap: 1.4rem; }
.boton { background: var(--granate); border-radius: 2px; padding: 1rem 1.3rem; }
.secundaria { border-color: var(--borde-control); }
.portada-imagen { position: relative; margin: 0; min-width: 0; align-self: stretch; min-height: 38rem; }
.portada-imagen picture img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover;
  /* El arco recorta arriba y abajo: se sube el encuadre para que la
     cara no quede pegada al borde superior. */
  object-position: 50% 32%; border-radius: 46% 46% 2px 2px;
  /* Antes había aquí una foto de bosque y se apagaba para que no se peleara
     con el granate. Ahora es el retrato de Carlota: un toque justo para que
     case con la paleta cálida, sin llegar a parecer un filtro. */
  filter: saturate(.92) contrast(1.02); }
.sello { position: absolute; top: 9%; right: -1.2rem; width: 5.5rem; height: 5.5rem; border-radius: 50%; border: 1px solid var(--borde-control); outline: 6px solid var(--papel); background: var(--papel); display: flex; align-items: center; justify-content: center; }
/* El monograma RG (logo.svg) es apaisado: el ancho manda y el círculo lo encaja. */
.sello img { width: 84%; height: auto; }
.portada-pie { padding-block: 2.1rem; font-size: .75rem; letter-spacing: .04em; }
.portada-pie a { color: var(--tinta); }
.seccion { padding-block: clamp(4rem, 8vw, 8rem); }
/* Antes era media pantalla de ciruela. Con el granate de su marca, un bloque
   oscuro de este tamaño se vuelve pesado: manda el papel y acentúa el color. */
#proceso { background: var(--papel-rosa); border: 0; }
#proceso .rotulo { color: var(--apagado); }
#proceso h2 em { color: var(--granate); }
@media (min-width: 75.01rem) {
  .acciones-movil, .menu-movil { display: none !important; }
  html { scroll-padding-top: 5rem; }
  header.franja { position: sticky; top: 0; z-index: 15; background: var(--papel); border-bottom: 1px solid transparent; }
  .cabecera { min-height: 6.75rem; transition: min-height 180ms ease-out, padding-block 180ms ease-out; }
  .marca { transition: font-size 180ms ease-out; }
  header.cabecera-compacta { border-bottom-color: var(--linea); }
  .cabecera-compacta .cabecera { min-height: 4.25rem; padding-block: .55rem; }
  .cabecera-compacta .marca { font-size: 1.45rem; }
  .cabecera-compacta .marca span { display: none; }
  .cabecera-compacta .menu .menu-cita { padding-block: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cabecera, .marca { transition: none; }
}
.ficha { border-color: var(--borde-control); margin-top: 1rem; max-width: 24rem; }
.ficha h3 { color: var(--granate); }
#preguntas { background: var(--papel-suave); }
.enlace-texto { font-size: .82rem; width: fit-content; text-decoration: none; border-bottom: 1px solid var(--borde-control); padding-block: .45rem; margin-top: 1rem; }
.enlace-texto span { margin-left: 1rem; }
.preguntas { border-bottom-color: var(--linea); }
.preguntas details { border-top-color: var(--linea); }
.preguntas summary { padding-block: 1.5rem; font-size: .9rem; }
.contacto { background: var(--papel); padding-block: 6rem; }
.contacto h2 { color: var(--tinta); line-height: 1; }
.contacto h2 em { color: var(--granate); }
/* Mismo aire entre rótulo y titular que el resto de secciones (el `gap` de .rail):
   este rail es `display: block` y los tenía pegados. */
.contacto .rotulo { color: var(--apagado); margin-bottom: 1.5rem; }
@media (max-width: 47rem) { .contacto .rotulo { margin-bottom: 1rem; } }
.contacto p { color: var(--texto); }
.contacto a { color: var(--granate); }
.contacto .rejilla { align-items: center; }
.contacto :focus-visible { outline-color: var(--granate); }
.correo { font-size: clamp(1.3rem, 2.2vw, 2rem); border-bottom-color: var(--borde-control); }
.pie { background: var(--papel-suave); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--granate-claro); }
  .menu .menu-cita:hover { background: var(--papel-rosa); }
  .preguntas summary:hover { color: var(--granate-claro); }
}
@media (max-width: 65rem) {
  .portada-rejilla { gap: 2.5rem; }
  .portada-imagen { min-height: 34rem; }
  .portada h1 { font-size: clamp(2.6rem, 5vw, 3.4rem); }
  .acciones { align-items: start; flex-direction: column; gap: .8rem; }
  .menu { gap: 1.4rem; }
  #proceso .rejilla, #sobre-mi .rejilla, .contacto .rejilla { gap: 3rem; }
}
@media (max-width: 47rem) {
  .cabecera { padding-block: 1.5rem; }
  .menu .menu-cita { padding: .65rem .85rem; }
  .portada { padding-top: .5rem; }
  .portada-rejilla { grid-template-columns: 1fr; gap: 1.5rem; }
  .portada-texto { padding-block: 1.5rem .5rem; }
  .entrada { margin-top: 1.7rem; max-width: 30rem; }
  .acciones { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }
  .portada-imagen { min-height: 24rem; margin-top: 1.5rem; margin-inline: .5rem; }
  .portada-imagen picture img { border-radius: 45% 45% 2px 2px; }
  .sello { width: 4rem; height: 4rem; right: -.6rem; }
  #ayuda .rejilla, #proceso .rejilla, #sobre-mi .rejilla, .contacto .rejilla { grid-template-columns: 1fr; gap: 2rem; }
  .contacto { padding-block: 4rem; }
  .correo { font-size: clamp(1.15rem, 5.3vw, 1.8rem); }
}
@media (max-width: 23rem) {
  .marca { font-size: 1.4rem; }
}

/* Movimiento contenido: primera visita y respuesta a una acción. */
:root {
  --curva-entrada: cubic-bezier(0.23, 1, 0.32, 1);
  --duracion-entrada: 480ms;
  --duracion-respuesta: 180ms;
}
.otros-canales { font-size: .8125rem; }
.menu a, .portada-pie a, .secundaria, .enlace-texto, .pie a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.menu a, .secundaria, .enlace-texto, .preguntas summary {
  transition: color 150ms ease, background-color 150ms ease;
}
.boton {
  transition: background-color 150ms ease, transform 160ms var(--curva-entrada);
}
.boton:active { transition-duration: 100ms; }
.boton:focus-visible:active { transform: none; }
.boton > span, .secundaria > span, .enlace-texto > span {
  display: inline-block;
  transition: transform var(--duracion-respuesta) var(--curva-entrada);
}
.preguntas summary::after { content: none; }
.indicador-pregunta {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 1.6rem;
  align-self: center;
  border: 1px solid var(--borde-control);
  border-radius: 50%;
}
.indicador-pregunta > span {
  position: absolute;
  width: .6rem;
  height: 1px;
  background: currentColor;
  top: calc(50% - .5px);
  left: calc(50% - .3rem);
}
.indicador-pregunta > span:last-child {
  transform: rotate(90deg);
  transition: transform var(--duracion-respuesta) var(--curva-entrada), opacity 150ms ease;
}
details[open] .indicador-pregunta > span:last-child { transform: rotate(0); opacity: 0; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .boton:hover > span, .enlace-texto:hover > span { transform: translate(2px, -2px); }
  .secundaria:hover > span { transform: translateY(2px); }
}
html[data-entrada='teclado'] *, html[data-entrada='teclado'] *::before,
html[data-entrada='teclado'] *::after { transition: none !important; }
html[data-entrada='teclado'] .boton:active,
html[data-entrada='teclado'] .carrusel-flecha:active,
html[data-entrada='teclado'] a > span { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .boton > span, .secundaria > span, .enlace-texto > span { transform: none; }
}

/* Formulario de primera cita: mismo lenguaje editorial que el resto. */
.contacto .rejilla { align-items: start; }
.contacto-intro { margin-top: .4rem; }
.contacto-correo { margin: 1.8rem 0 0; }
.aviso-urgencias { color: var(--apagado); }
.formulario {
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--linea);
  padding-top: 1.8rem;
}
#reservar { scroll-margin-top: .5rem; }
.formulario-cabecera {
  margin: 0;
  font: 500 .72rem/1.6 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--apagado);
}
.contacto-resumen {
  margin: 0;
  border-block: 1px solid var(--linea);
}
.contacto-resumen > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding-block: .8rem;
  border-top: 1px solid var(--linea);
}
.contacto-resumen > div:first-child { border-top: 0; }
.contacto-resumen dt { font: 400 1.08rem/1.3 var(--serif); color: var(--tinta); }
.contacto-resumen dd { margin: 0; font-size: .8rem; color: var(--apagado); text-align: right; }
.contacto-resumen-nota {
  margin: -.85rem 0 0;
  max-width: none;
  font-size: .8rem;
  color: var(--apagado);
}
.campo { display: grid; gap: .45rem; }
.campo > label {
  font: 500 .74rem/1.6 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--apagado);
}
.campo input, .campo textarea {
  width: 100%;
  border: 1px solid var(--borde-control);
  border-radius: 2px;
  background: rgba(255, 255, 255, .55);
  color: var(--tinta);
  font: inherit;
  font-size: .92rem;
  padding: .8rem .9rem;
  /* Solo el contorno propio del campo. El anillo de `:focus-visible` entra
     instantáneo a propósito: la señal de accesibilidad no se difumina. */
  transition: border-color 150ms ease;
}
.campo input { min-height: 3.1rem; }
.campo textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--granate);
  outline-offset: 2px;
}
.campo-ayuda { margin: 0; font-size: .8rem; color: var(--apagado); max-width: none; }
.campo-error { margin: 0; font-size: .78rem; color: var(--error); max-width: none; }
.campo-error:empty { display: none; }
.campo-invalido input, .campo-invalido textarea { border-color: var(--error); border-width: 2px; }
.campo-casilla {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .3rem .8rem;
}
.campo-casilla input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin-top: .25rem;
  accent-color: var(--granate);
}
.campo-casilla > label {
  font: inherit;
  font-size: .8rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto);
}
.campo-casilla .campo-error { grid-column: 1 / -1; }
.formulario .boton { border: 0; cursor: pointer; font: inherit; }
.formulario-aviso { margin: 0; font-size: .78rem; color: var(--apagado); max-width: none; }
/* Trampa antispam: fuera de la vista, pero sin `display: none` (los robots lo detectan). */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Banner de cookies: solo aparece si se activa la medición en consentimiento.js. */
.consentimiento {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.2rem var(--margen);
  background: var(--papel);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -6px 24px rgba(57, 44, 49, .1);
}
.consentimiento p { margin: 0; font-size: .8rem; max-width: 48rem; }
.consentimiento-botones { display: flex; align-items: center; gap: 1.2rem; font-size: .78rem; }
.consentimiento .boton { border: 0; cursor: pointer; font: inherit; padding: .8rem 1.2rem; }
.consentimiento .secundaria {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--granate-claro);
  border-bottom: 1px solid var(--borde-control);
  padding: .3rem 0;
}

@media (max-width: 47rem) {
  .cabecera { gap: .6rem; }
  .marca { white-space: normal; font-size: clamp(.95rem, 4.5vw, 1.25rem); }
  .marca span { margin-top: .3rem; font-size: .58rem; letter-spacing: .06em; }
  .menu { margin-left: auto; }
  .menu a:not(.menu-cita) { display: none; }
  .menu .menu-cita { white-space: nowrap; }
  .contacto-correo { margin-top: 1.4rem; }
  .formulario { gap: 1.2rem; }
  #reservar { scroll-margin-top: .5rem; }
  .consentimiento { padding-block: 1rem; }
  .consentimiento-botones { width: 100%; justify-content: space-between; }
}

/* Página 404. */
.perdida { padding-block: clamp(4rem, 12vw, 9rem) 7rem; }
.perdida h1 { font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: -.04em; margin: 1.5rem 0 2rem; }
.perdida h1 em { color: var(--granate); }
.perdida p { font-size: .95rem; max-width: 32rem; }

/* «¿Por qué online?» */
.ventajas { margin: .2rem 0 0; display: grid; gap: 0; }
.ventajas > div { padding-block: 1.5rem; border-top: 1px solid var(--linea); }
.ventajas > div:first-child { border-top: 0; padding-top: .2rem; }
.ventajas dt {
  font: 400 1.5rem/1.25 var(--serif);
  color: var(--tinta);
  margin-bottom: .6rem;
}
.ventajas dd { margin: 0; font-size: .88rem; line-height: 1.8; }

.testimonio-quien {
  margin: 1.4rem 0 0;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* Nota bajo el botón principal: quita hierro a «reservar». */
.acciones-nota { margin: 1rem 0 0; font-size: .8rem; color: var(--apagado); }

/* Desplegable de horario: mismo trazo que el resto de campos. */
.campo select {
  width: 100%;
  min-height: 3.1rem;
  border: 1px solid var(--borde-control);
  border-radius: 2px;
  background: rgba(255, 255, 255, .55);
  color: var(--tinta);
  font: inherit;
  font-size: .92rem;
  padding: .8rem .9rem;
}
.campo select:focus-visible { outline: 2px solid var(--granate); outline-offset: 2px; }

@media (max-width: 47rem) {
  .ventajas dt { font-size: 1.32rem; }
}

/*
 * Movimiento añadido tras revisar la web como paciente. Tres huecos, no más:
 * el error que aparecía de golpe, la pregunta que daba un salto al abrirse y
 * las secciones nuevas, que se habían quedado fuera del observador de entradas.
 * Todo por debajo de 250 ms y con su alternativa para movimiento reducido.
 */

/* El aviso de error pasaba de `display: none` a visible sin puente: en un
   formulario largo es fácil no ver qué ha cambiado. No se puede usar
   `transition` sobre `display`, así que entra con una animación. */
.campo-error:not(:empty) {
  animation: aparece-error 180ms var(--curva-entrada) both;
}
@keyframes aparece-error {
  from { opacity: 0; transform: translateY(-3px); }
}

/* La respuesta ya se desvanecía, pero la caja daba un salto seco. Los
   navegadores sin `::details-content` ignoran el bloque y se quedan como
   estaban, así que esto es mejora progresiva, no requisito. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .preguntas details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 240ms var(--curva-entrada);
  }
  .preguntas details[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* El error sigue apareciendo, pero sin desplazarse. */
  .campo-error:not(:empty) { animation: none; }
}

/* Nota previa y plan B del formulario: ver `mostrarRespaldo` en interacciones.js. */
.formulario-nota { margin: -.4rem 0 0; font-size: .8rem; color: var(--apagado); max-width: 30rem; }
.respaldo {
  margin-top: .4rem;
  border: 1px solid var(--borde-control);
  border-radius: 2px;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, .55);
  animation: aparece-error 200ms var(--curva-entrada) both;
}
.respaldo-cabecera { margin: 0 0 .9rem; display: grid; gap: .35rem; }
.respaldo-cabecera div { display: flex; gap: .6rem; font-size: .78rem; }
.respaldo-cabecera dt { color: var(--apagado); min-width: 4rem; }
.respaldo-cabecera dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.respaldo-cuerpo {
  margin: 0 0 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linea);
  max-width: none;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--tinta);
  white-space: pre-wrap;
}
.respaldo-botones { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .78rem; }
.respaldo-botones .secundaria {
  border: 0;
  border-bottom: 1px solid var(--borde-control);
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--granate-claro);
  padding: .3rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .respaldo { animation: none; }
}

/* Cabecera pegajosa solo en móvil: mantiene la llamada accesible durante la
   lectura sin quitar altura útil en escritorio. */
@media (max-width: 47rem) {
  header.franja {
    position: sticky;
    top: 0;
    z-index: 15;
    /* Opaco: si no, el texto de debajo se lee a través. */
    background: var(--papel);
  }
  /* `scroll-padding-top` tiene que salvar la cabecera al saltar a un ancla. */
  html { scroll-padding-top: 6.5rem; }

  /* Un filete que solo aparece al haber bajado: arriba del todo no hace falta
     y ensuciaría la portada. Sin `scroll()` no se dibuja, que es lo de antes. */
  @supports (animation-timeline: scroll()) {
    header.franja {
      border-bottom: 1px solid transparent;
      animation: filete-cabecera linear both;
      animation-timeline: scroll();
      animation-range: 0 4rem;
    }
    @keyframes filete-cabecera {
      to { border-bottom-color: var(--linea); }
    }
  }
}

/* La ficha de formación invierte el énfasis: manda el título, no el centro. */

/* Primer contacto: presentación editorial y una tarjeta de escritura clara. */
.contacto { background: var(--papel); }
.contacto .rejilla { grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); }
.contacto .rail { display: block; padding-top: 1rem; }
.contacto h2 { font-size: clamp(2.4rem, 3.6vw, 3.5rem); line-height: 1.08; margin-bottom: 1.5rem; }
.contacto-intro { font-size: 1rem; line-height: 1.8; max-width: 29rem; }
.contacto .contacto-correo { margin: 2rem 0 .75rem; }
.contacto .correo { font: 400 clamp(1rem, 1.6vw, 1.35rem)/1.5 var(--serif); overflow-wrap: anywhere; padding-bottom: .4rem; }
.contacto .otros-canales { margin: 0; font-size: .82rem; line-height: 1.7; }
.contacto .aviso-urgencias { border-top: 1px solid var(--linea); margin-top: 1.5rem; padding-top: 1rem; max-width: 29rem; }
.contacto .formulario {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: #fffdfb;
  box-shadow: 0 12px 40px rgba(43, 36, 36, .035);
}
.formulario > * { grid-column: 1 / -1; min-width: 0; }
.formulario > .campo-mitad { grid-column: auto; }
.formulario .campo { align-content: start; }
.formulario-presentacion { margin-bottom: .25rem; }
.contacto .formulario-distintivo { color: var(--granate); font-size: .75rem; font-weight: 600; margin: 0 0 .65rem; }
.contacto .formulario-cabecera { font: 400 clamp(1.7rem, 2.5vw, 2.25rem)/1.15 var(--serif); text-transform: none; letter-spacing: -.025em; color: var(--tinta); }
.formulario-presentacion > p:not(.formulario-distintivo) { font-size: .88rem; line-height: 1.6; margin: .6rem 0 0; }
.formulario .campo > label { font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.formulario .campo-opcional { font-weight: 400; color: var(--apagado); font-size: .8rem; }
.formulario .campo input:not([type="checkbox"]), .formulario .campo textarea, .formulario .campo select { font-size: 1rem; border-radius: 7px; background: #fff; padding: .65rem .8rem; }
.formulario .campo textarea { min-height: 6rem; }
.formulario .campo-ayuda { font-size: .75rem; line-height: 1.55; }
.formulario .campo-casilla { align-items: center; }
.formulario .campo-casilla > label { font-size: .8rem; font-weight: 400; color: var(--texto); cursor: pointer; }
.formulario .campo-casilla input { margin: 0; align-self: start; }
.formulario .boton { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-radius: 7px; padding: .9rem 1.1rem; font-size: .9rem; }
.formulario .formulario-nota { margin: -.25rem 0 0; font-size: .75rem; line-height: 1.6; }
.formulario-aviso:empty { display: none; }
/* El aviso a secas es gris pequeño: vale para «revisa los campos», pero no para
   decir que algo ha fallado al enviar. */
.formulario-aviso.es-error {
  margin-top: .3rem;
  padding: .85rem 1rem;
  border: 1px solid var(--error);
  border-radius: 7px;
  background: var(--papel-rosa);
  color: var(--tinta);
  font-size: .95rem;
  line-height: 1.45;
}

/* `.formulario` es `display: grid`, que gana al `display: none` que trae
   `hidden` por defecto: sin esto, al enviar se quedarían los dos a la vez. */
.formulario[hidden] { display: none; }

/* Confirmación del envío: ocupa el sitio del formulario. Va en blanco, como los
   campos que sustituye: sobre el rosa de la sección se lee como tarjeta, y en
   rosa se fundía con el fondo justo cuando más tiene que destacar. */
.formulario-exito {
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  padding: clamp(1.75rem, 6vw, 2.6rem) clamp(1.25rem, 5vw, 2.2rem);
  text-align: center;
}
.formulario-exito:focus-visible { outline: 2px solid var(--granate); outline-offset: 3px; }
.formulario-exito:focus:not(:focus-visible) { outline: none; }
.formulario-exito-marca {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--granate);
  color: var(--papel);
  font-size: 1.4rem;
  line-height: 1;
}
.formulario-exito h3 {
  margin: 0 0 .6rem;
  font: 400 clamp(1.55rem, 4.5vw, 2rem)/1.2 var(--serif);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--tinta);
}
.formulario-exito p {
  margin: 0 auto;
  max-width: 26rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--texto);
}
.formulario-exito .formulario-exito-nota {
  margin-top: 1.15rem;
  font-size: .85rem;
  color: var(--apagado);
}
/* Solo lo ve quien tiene JavaScript desactivado: ahí el formulario no puede
   funcionar y lo que sirve es la dirección de correo. */
.formulario-sin-js {
  margin: 0;
  max-width: none;
  padding: .85rem 1rem;
  border: 1px solid var(--borde-control);
  border-radius: 7px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--tinta);
}
@media (max-width: 60rem) {
  .contacto .rejilla { grid-template-columns: 1fr; gap: 2rem; max-width: 42rem; }
  .contacto .rail { padding-top: 0; }
  .contacto-intro, .contacto .aviso-urgencias { max-width: none; }
}
@media (max-width: 35rem) {
  .contacto { padding-inline: 1.1rem; padding-block: 3rem; }
  .contacto h2 { font-size: 2.4rem; }
  .formulario > .campo-mitad { grid-column: 1 / -1; }
  .contacto .formulario { padding: 1.2rem; border-radius: 12px; }
}

/* Móvil: el mismo lenguaje editorial, con lectura por apartados. */
.acciones-movil, .menu-movil { display: none; }
/* `hidden` debe prevalecer sobre las rejillas y display: contents existentes. */
[hidden] { display: none !important; }

/* Menú desplegable hasta 75rem: con los siete apartados, el menú en línea no cabe
   por debajo de ~1180 px y se salía de la pantalla. */
@media (max-width: 75rem) {
  header.franja { z-index: 15; background: var(--papel); }
  .saltar { z-index: 20; }
  .cabecera { position: relative; flex-wrap: wrap; gap: .5rem; padding-block: .75rem; }
  .cabecera .marca { flex: 1; min-width: 0; white-space: normal; max-width: 14rem; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.025em; }
  .cabecera .marca span { font-size: .5rem; letter-spacing: .07em; margin-top: .3rem; }
  .cabecera .menu { display: none; }
  .acciones-movil { display: flex; align-items: center; gap: .5rem; }
  .acciones-movil a, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .25rem; font: 500 .8rem/1.3 var(--sans); color: var(--granate); background: none; border: 0; text-decoration: none; cursor: pointer; }
  .acciones-movil a { border-bottom: 1px solid var(--borde-control); }
  /* Sin JavaScript, los enlaces siguen disponibles en una sola fila desplazable,
     no como un bloque que se come la primera pantalla. */
  .menu-movil { display: flex; width: 100%; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--linea); padding: .35rem 0; }
  .menu-movil::-webkit-scrollbar { display: none; }
  .menu-movil a { display: flex; flex: 0 0 auto; align-items: center; min-height: 40px; color: var(--tinta); font-size: .78rem; text-decoration: none; white-space: nowrap; }
  .movil-mejorado .menu-movil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: absolute; top: 100%; left: calc(-1 * var(--margen)); right: calc(-1 * var(--margen)); width: auto; column-gap: 1.25rem; row-gap: 0; padding: .5rem var(--margen) 1rem; background: var(--papel); border-bottom: 1px solid var(--linea); max-height: calc(100dvh - 6rem); overflow-y: auto; }
  .movil-mejorado .menu-movil[data-despliegue='animado'] {
    transform-origin: top right;
    transition: opacity var(--duracion-respuesta) var(--curva-entrada), transform var(--duracion-respuesta) var(--curva-entrada);
  }
  .movil-mejorado .menu-movil[data-estado='cerrado'] { opacity: 0; transform: translateY(-4px) scale(.98); }
  .movil-mejorado .menu-movil[data-estado='abierto'] { opacity: 1; transform: translateY(0) scale(1); }
  .movil-mejorado .menu-movil a { min-height: 44px; font-size: 1rem; }
  /* Con JavaScript se transforma en el desplegable accesible de arriba. */
  html:not(.movil-mejorado) header.franja { position: static; }
}
@media (min-width: 47.01rem) and (max-width: 75rem) {
  header.franja { position: sticky; top: 0; }
  /* En tableta el desplegable deja sitio de sobra: el nombre no tiene por qué
     ir al tamaño del móvil. */
  .cabecera .marca { max-width: none; font-size: 1.5rem; }
  .cabecera .marca span { font-size: .6rem; letter-spacing: .12em; }
  .acciones-movil { gap: 1rem; }
  .acciones-movil a, .menu-toggle { font-size: .875rem; }
  html { scroll-padding-top: 5rem; }
}

@media (max-width: 47rem) {
  :root { --margen: 20px; }
  html { scroll-padding-top: 6rem; }
  .portada { padding-top: .5rem; padding-bottom: 2.5rem; }
  .portada-texto { padding-block: 2rem 0; }
  /* El titular conserva las tres líneas del ordenador: es la composición. */
  .portada h1 { font-size: clamp(3.25rem, 15vw, 4.25rem); line-height: .98; letter-spacing: -.045em; }
  .entrada { margin-top: 1.25rem; font-size: 1rem; line-height: 1.65; }
  /* El nombre ya lo dice la cabecera. El título y la colegiación sí se ven aquí,
     bajo el titular, como en el ordenador (ver «Cabecera» al final del archivo). */
  /* «Cómo trabajo ↓» solo navega (está en el menú) y en móvil empujaba el retrato
     fuera de la primera pantalla. */
  /* El sello con el logo también en móvil (Carlota, 2026-09-23), más pequeño. */
  .sello { width: 4.25rem; height: 4.25rem; top: 7%; right: -.5rem; outline-width: 4px; }
  .acciones { margin-top: 1.5rem; }
  /* Botón a su medida, como en el ordenador. */
  .acciones .boton { gap: 1.1rem; min-height: 48px; padding: .85rem 1.2rem; font-size: .875rem; }
  .acciones-nota { font-size: .875rem; line-height: 1.5; margin-top: .75rem; }
  .portada-rejilla { gap: 1.5rem; }
  /* Arco esbelto, con la proporción del ordenador (3:4), no casi cuadrado. Se probó
     cuadrado el 2026-09-25 (ahorraba 117 px) y se descartó: la foto quedaba mal cortada. */
  .portada-imagen { width: 100%; height: auto; aspect-ratio: 3 / 4; min-height: 0; margin: .5rem 0 0; }
  .portada-imagen picture img { object-position: 50% 32%; }
  .seccion, .contacto { padding: 3rem 20px; }
  .rejilla, #ayuda .rejilla, #proceso .rejilla, #sobre-mi .rejilla, .contacto .rejilla { gap: 1.5rem; }
  .rail { gap: .75rem; }
  .ventajas dd,
  #sobre-mi .cuerpo > p,
  .ficha, .preguntas summary, .preguntas details > p, .contacto .otros-canales,
  .contacto-resumen dd, .formulario-presentacion > p:not(.formulario-distintivo) { font-size: 1rem; line-height: 1.7; }
  .ficha { margin-top: 0; max-width: none; }
  .preguntas summary { min-height: 44px; padding-block: 1rem; }
  .preguntas details > p { padding-right: 0; }
  /* La tarjeta del ordenador, con menos relleno. */
  .contacto .formulario { padding: 1.5rem 1.25rem; border-radius: 12px; grid-template-columns: 1fr; }
  .formulario > .campo-mitad { grid-column: 1 / -1; }
  /* Campos y desplegable a la misma altura (el desplegable se quedaba en 44). */
  .formulario .campo input:not([type='checkbox']), .formulario .campo select { min-height: 3.25rem; }
  .formulario .campo-casilla { min-height: 44px; }
  .formulario .campo-casilla label { padding-block: .5rem; }
  .contacto .correo, .contacto .otros-canales a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Escritorio: el texto de las secciones iba a .82–.93rem y en gris apagado, y
   costaba leerlo, sobre todo encima del rosa. Se iguala al cuerpo (1rem), como
   ya estaba en móvil. */
@media (min-width: 47.01rem) {
  .ventajas dd, .preguntas summary, .preguntas details > p { font-size: 1rem; }
}


/* Colegiación en la cabecera, pedida por Carlota. Va anidada en el subtítulo, así
   que se deshace el `display: block` de `.marca span`. */
.marca .marca-colegiada { display: inline; margin: 0; font: inherit; letter-spacing: inherit; }
.marca .marca-colegiada::before { content: ' · '; }

/* Con los siete apartados, justo por encima del corte del desplegable el menú en
   línea no cabía por pocos píxeles: se acercan los enlaces solo en esa franja. */
@media (min-width: 75.01rem) and (max-width: 85rem) {
  .menu { gap: clamp(.9rem, 1.3vw, 2rem); }
}

/* Foto de «Sobre mí». */
.foto-sobre-mi { display: block; width: clamp(9rem, 14vw, 13rem); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--linea); margin: .75rem 0 .5rem; }
@media (max-width: 47rem) {
  .foto-sobre-mi { width: 8.5rem; margin: .25rem 0 .25rem; }
}

/*
 * Móvil, limpieza editorial (2026-09-23). En el ordenador la web se ve limpia por
 * tres cosas: mucho contraste de tamaños, mucho aire y casi ningún control. En
 * móvil se perdían las tres: cinco «+», una raya en cada bloque, textos de lectura
 * tan grandes como los titulares y 48 px entre secciones. Todo esto vive solo por
 * debajo de 47rem; el ordenador y la tableta no cambian.
 */
@media (max-width: 47rem) {
  /* Margen lateral y aire: en el ordenador el texto tiene 120 px a cada lado y
     más de 100 entre secciones; con 20 y 48 el móvil se veía apretado. */
  /* 24 px en las pantallas pequeñas y 28 desde unos 400 px: con más, a 360–375
     el nombre de la cabecera ya no cabe en una línea. */
  :root { --margen: clamp(1.5rem, 7vw, 1.75rem); }
  /* 4.5rem desde el 2026-09-25 (antes 5.5): 0,4 pantallas menos y el mismo aire a
     la vista; 4rem ya apretaba. */
  .seccion, .contacto { padding: 4.5rem var(--margen); }
  .rail { gap: 1rem; }
  .rejilla, #sobre-mi .rejilla { gap: 2.25rem; }

  /* Titulares algo mayores y textos de lectura más contenidos: vuelve la jerarquía. */
  .rejilla h2, #ayuda h2, #proceso h2, #testimonios h2 { font-size: clamp(2.25rem, 9.5vw, 2.75rem); }
  /* «Empezamos por hablar.» cierra la página: en el ordenador es el titular más
     grande, y aquí también. */
  .contacto h2 { font-size: clamp(2.25rem, 9.5vw, 2.75rem); }

  /* Menos rayas: los bloques se separan con espacio, como en el ordenador. Se
     quedan las que ordenan de verdad: tarifas, preguntas y el formulario. */
  .ventajas dd { line-height: 1.8; }


  /* Notas pequeñas: un solo tamaño en lugar de cuatro. */
  .acciones-nota, .campo-ayuda, .formulario .campo-ayuda, .formulario .formulario-nota,
  .contacto-resumen-nota { font-size: .8125rem; line-height: 1.55; }

  /* Cabecera como la del ordenador: el nombre con el título y la colegiación
     debajo; al bajar se queda solo con el nombre. */
  .cabecera { padding-block: .5rem; }
  .cabecera-compacta .marca > span { display: none; }
  /* Título y colegiación en dos líneas limpias: con el « · » se partía por el punto. */
  .cabecera .marca .marca-colegiada { display: block; margin-top: .2rem; }
  .cabecera .marca .marca-colegiada::before { content: none; }
  /* «Pedir llamada» subrayado junto al texto: el borde inferior del área táctil de
     44 px lo dejaba despegado. */
  .acciones-movil a { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--borde-control); text-decoration-thickness: 1px; text-underline-offset: .45em; }
  /* En una línea el enlace medía 17–21 px de alto: se amplía la zona táctil a
     44 px sin mover nada (el margen negativo compensa el relleno). */
  .cabecera .marca { padding-block: 14px; margin-block: -14px; }
  .acciones-movil { gap: .5rem; }
  .acciones-movil a { order: -1; padding-inline: 0; }
  /* El icono mide 20 px dentro de un área táctil de 44: el margen negativo lo
     alinea con el borde del texto sin recortar el área. */
  .menu-toggle { position: relative; width: 44px; margin-right: -12px; font-size: 0; }
  .menu-toggle::before, .menu-toggle::after {
    content: '';
    position: absolute;
    left: calc(50% - 10px);
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--duracion-respuesta) var(--curva-entrada), top var(--duracion-respuesta) var(--curva-entrada);
  }
  .menu-toggle::before { top: calc(50% - 4px); }
  .menu-toggle::after { top: calc(50% + 3px); }
  .menu-toggle[aria-expanded='true']::before { top: calc(50% - .75px); transform: rotate(45deg); }
  .menu-toggle[aria-expanded='true']::after { top: calc(50% - .75px); transform: rotate(-45deg); }
}

/* Nombre de la cabecera en una sola línea junto a «Pedir llamada» y el menú.
   Va después del bloque móvil para que el tamaño pequeño gane. A 320 px se
   parte en dos, y se acepta. */
@media (max-width: 25rem) {
  .cabecera .marca { font-size: 1.1rem; }
}
@media (max-width: 24rem) {
  .cabecera .marca { font-size: 1.02rem; }
}
@media (max-width: 23rem) {
  .cabecera .marca { font-size: .95rem; }
  .acciones-movil { gap: .5rem; }
}

/* Detalles de acabado en móvil (2026-09-23). */
@media (max-width: 47rem) {
  /* Filete bajo la cabecera al bajar también en Safari (iPhone): el de
     `animation-timeline` solo lo dibuja Chrome. La clase la pone interacciones.js. */
  header.franja { border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
  header.franja.cabecera-compacta { border-bottom-color: var(--linea); }
  /* Sin palabras sueltas en la última línea de los párrafos, donde el navegador lo admite. */
  p, dd { text-wrap: pretty; }
  /* A los campos de texto se les quita la sombra interior que añade iOS. El
     desplegable ya va sin aspecto nativo en todos los tamaños. */
  .formulario .campo input:not([type='checkbox']), .formulario .campo textarea {
    -webkit-appearance: none;
    appearance: none;
  }
}

@media (max-width: 47rem) {
  /* Al saltar a «Pedir llamada», el formulario empieza arriba, justo bajo la
     cabecera (decisión del usuario, 2026-09-25). Antes se paraba encima del aviso
     de urgencias y «Pide tu llamada gratuita» quedaba a un tercio de la pantalla.
     El aviso sigue justo encima, y lo ve quien llega bajando. Este margen se suma
     al `scroll-padding-top` de 6rem: con −.5rem, el filete del formulario cae a
     27 px de la cabecera y el aviso, que acaba 36 px antes que el formulario,
     queda entero detrás de ella. Si cambia ese hueco o la cabecera, se vuelve
     a medir. */
  #reservar { scroll-margin-top: -.5rem; }

}

@media (prefers-reduced-motion: reduce) {
  .movil-mejorado .menu-movil[data-despliegue='animado'] {
    transform: none;
    transition: opacity 120ms var(--curva-entrada) !important;
  }
}

/* Portada algo más compacta (móvil, 2026-09-25). */
@media (max-width: 47rem) {
  /* 40 px menos de aire en la portada, sin tocar el titular ni los textos: la cara entra
     en la primera pantalla en los móviles grandes y asoma en los medianos. */
  .portada-texto { padding-top: 1rem; }
  .portada .acciones { margin-top: 1rem; }
  .portada-rejilla { gap: 1rem; }
  .portada-imagen { margin-top: 0; }
}

/*
 * Estructura «paciente ideal» (2026-10-10). La primera mitad habla de ella y de su
 * duda; Carlota, el método y los precios van después. Se reutiliza lo de la casa:
 * la tarjeta del formulario, los números en cursiva granate, el rosa de fondo y los
 * filetes. Lo que hay aquí es para el ordenador y la tableta; el móvil solo apila.
 */

/* Tarjeta: el mismo tratamiento que el formulario de contacto. */
.tarjetas > li, .testimonios-pista > li {
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: #fffdfb;
  box-shadow: 0 12px 40px rgba(43, 36, 36, .035);
}

/* 2 · Identificación: cuatro tarjetas en 2 × 2, numeradas como antes las áreas. */
#ayuda h2 { font-size: clamp(2.5rem, 3.6vw, 3.6rem); letter-spacing: -.025em; }
.tarjetas {
  list-style: none;
  margin: 3.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  counter-reset: tarjeta;
}
.tarjetas > li { padding: clamp(1.6rem, 2.6vw, 2.4rem); counter-increment: tarjeta; }
.tarjetas > li::before {
  content: '0' counter(tarjeta);
  content: '0' counter(tarjeta) / '';
  display: block;
  margin-bottom: 1.2rem;
  font: italic 1.25rem/1.4 var(--serif);
  color: var(--granate);
}
.tarjetas h3 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.22; margin-bottom: .9rem; }
.tarjetas p { margin: 0; }

/* 3 · Punto de quiebre: pausa de color y lectura continua. */
.quiebre { background: var(--papel-rosa); border-top: 0; }
.quiebre-contenido { max-width: 46rem; text-align: left; }
.quiebre h2 { font-size: clamp(2.2rem, 3.2vw, 3.2rem); letter-spacing: -.025em; line-height: 1.15; margin-bottom: 1.8rem; }
.quiebre h2 em { color: var(--granate); }
.quiebre-contenido > p { max-width: 36rem; font-size: 1.05rem; }
.quiebre-contenido > .quiebre-giro { font: italic 400 1.35rem/1.3 var(--serif); color: var(--granate); }
.quiebre-contenido > .quiebre-pregunta {
  margin: 1.8rem 0 0;
  padding-top: 1.3rem;
  max-width: 36rem;
  border-top: 1px solid var(--granate);
  font: italic 400 clamp(1.55rem, 2.2vw, 1.9rem)/1.3 var(--serif);
  color: var(--granate);
}
.quiebre + .seccion { border-top: 0; }
/* La transformación es la segunda mitad del mismo apartado: la respuesta va sobre
   papel, como las tarjetas de #ayuda, con su titular a tamaño de subtítulo. */
.quiebre-apartado { max-width: 75rem; }
.quiebre-respuesta {
  margin-top: 2.8rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: #fffdfb;
  box-shadow: 0 12px 40px rgba(43, 36, 36, .035);
}
/* Subtítulo sereno, en tinta: el único pico en granate del apartado es la pregunta. */
.quiebre-respuesta h3 {
  margin: 0 0 1.4rem;
  font: 400 clamp(1.4rem, 1.8vw, 1.65rem)/1.25 var(--serif);
  letter-spacing: -.01em;
  color: var(--tinta);
}
.objetivos li { text-wrap: pretty; }
.quiebre-respuesta .objetivos { margin-top: 1.8rem; }
/* Dentro del panel el borde del panel ya cierra la lista. */
.quiebre-respuesta .objetivos li:last-child { border-bottom: 0; padding-bottom: 0; }
/* La llamada cierra el panel, separada de la lista por un filete. */
.quiebre-accion { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--linea); }
.quiebre-accion .acciones-nota { margin-top: .9rem; }

/* 4 · Transformación: cuatro objetivos con un check suave. */
.objetivos { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 0; }
.objetivos li {
  position: relative;
  padding: 1.1rem 0 1.1rem 3rem;
  border-top: 1px solid var(--linea);
  font: 400 1.2rem/1.45 var(--serif);
  color: var(--tinta);
}
.objetivos li:last-child { border-bottom: 1px solid var(--linea); }
.objetivos li::before {
  content: '✓';
  content: '✓' / '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--borde-control);
  border-radius: 50%;
  font: 400 .8rem/1 var(--sans);
  color: var(--granate);
}

/* 6 · Sobre mí: foto a un lado; primero lo humano, la formación en segundo plano. */
#sobre-mi .rejilla { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
#sobre-mi .foto-sobre-mi { width: clamp(12rem, 18vw, 15rem); margin: 0; }
#sobre-mi .cuerpo > .rotulo { margin: 0 0 1.2rem; }
#sobre-mi h2 { font-size: clamp(2rem, 2.8vw, 2.7rem); line-height: 1.15; margin-bottom: 2rem; }
#sobre-mi .sobre-mi-entrada { font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.35; }
.ficha-formacion { margin-top: 2.6rem; max-width: 34rem; border-top-color: var(--linea); }
.ficha-formacion ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ficha-formacion li { color: var(--apagado); }

/* 7 · Cómo funciona: tres pasos en fila, numerados. */
#proceso h2 { font-size: clamp(2.4rem, 3.5vw, 3.5rem); letter-spacing: -.025em; }
.pasos {
  list-style: none;
  margin: 3.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  counter-reset: paso;
}
.pasos > li { padding-top: 1.4rem; border-top: 1px solid var(--borde-control); counter-increment: paso; }
.pasos > li::before {
  content: '0' counter(paso);
  content: '0' counter(paso) / '';
  display: block;
  margin-bottom: 1rem;
  font: italic 1.25rem/1.4 var(--serif);
  color: var(--granate);
}
.pasos h3 { font-size: 1.5rem; line-height: 1.25; margin-bottom: .8rem; }
.pasos p { margin: 0; }
.pasos-nota { margin: 3rem 0 0; max-width: none; font-size: .9rem; letter-spacing: .02em; color: var(--apagado); }

/* 8 · Testimonios: carrusel de tres a la vista, con flechas a los lados. */
#testimonios h2 { font-size: clamp(2.4rem, 3.5vw, 3.5rem); letter-spacing: -.025em; }
#testimonios h2 em { color: var(--granate); }
.carrusel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}
/* Sin JavaScript no hay flechas: la pista ocupa toda la fila. */
.carrusel > .testimonios-pista { grid-column: 2; }
.carrusel:not(.carrusel-activo) > .testimonios-pista { grid-column: 1 / -1; }
.testimonios-pista {
  --visibles: 3;
  --hueco: 1.5rem;
  list-style: none;
  margin: 0;
  padding: .25rem .25rem 1rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--visibles) - 1) * var(--hueco)) / var(--visibles));
  gap: var(--hueco);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
}
.testimonios-pista:focus-visible { outline-offset: 2px; border-radius: 16px; }
/* Con flechas la barra sobra; sin JavaScript se queda, que es la única pista. */
.carrusel-activo .testimonios-pista { scrollbar-width: none; }
/* La sombra de las tarjetas no cabe en el relleno de una pista con scroll, que
   recorta también en vertical: más relleno abajo y el mismo margen negativo. */
.carrusel-activo .testimonios-pista { padding-bottom: 2.75rem; margin-bottom: -1.75rem; }
.carrusel-activo .testimonios-pista::-webkit-scrollbar { display: none; }
.testimonios-pista > li {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.2vw, 2rem);
}
.testimonios-pista blockquote { margin: 0; flex: 1; }
.testimonios-pista blockquote p {
  margin: 0 0 1em;
  max-width: none;
  font: 400 1.05rem/1.6 var(--serif);
  color: var(--tinta);
}
.testimonios-pista blockquote p:last-child { margin-bottom: 0; }
.carrusel-flecha {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--borde-control);
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.1rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
}
.carrusel-flecha[aria-disabled='true'] { opacity: .35; cursor: default; }
/* Las flechas ceden al pulsar, como los botones; antes no respondían a nada. */
.carrusel-flecha { transition: background-color 150ms ease, opacity 150ms ease, transform 160ms var(--curva-entrada); }
.carrusel-flecha:not([aria-disabled='true']):active { transform: scale(.94); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) {
  .carrusel-flecha:not([aria-disabled='true']):hover { background: var(--papel-rosa); }
}

/* 9 · Terapia online. */
#online h2 em { color: var(--granate); }

/* 10 · Tarifas: la lista de precios, algo mayor, y un solo botón. */
#tarifas .contacto-resumen { max-width: 34rem; }
#tarifas .contacto-resumen > div { padding-block: 1.1rem; }
#tarifas .contacto-resumen dt { font-size: 1.35rem; }
#tarifas .contacto-resumen dd { font-size: 1.1rem; color: var(--tinta); }
#tarifas .contacto-resumen-nota { margin: .8rem 0 2.2rem; }

/* 12 · Contacto: el botón va entre el texto y el correo. */
.contacto .acciones { margin: 1.8rem 0 0; }
.contacto .acciones .boton { color: white; }

@media (max-width: 65rem) {
  .testimonios-pista { --visibles: 2; }
  .pasos { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 47rem) {
  .tarjetas { grid-template-columns: 1fr; margin-top: 2rem; gap: 1rem; }
  .quiebre-contenido { text-align: left; }
  #sobre-mi .rejilla { grid-template-columns: 1fr; }
  .testimonios-pista { --visibles: 1; grid-auto-columns: 85%; }
  .carrusel { gap: .5rem; }
}
.portada .entrada { max-width: 32rem; font-size: 1.05rem; }
/* Los CTA principales, algo mayores: `.acciones` los dejaba a .78rem. */
.portada .boton, .quiebre-accion .boton, #tarifas .boton, .contacto .acciones .boton { font-size: .95rem; padding: 1.1rem 1.5rem; }

/*
 * Móvil — estructura «paciente ideal» (2026-10-10). Va después del bloque de
 * escritorio y solo pisa lo que en pantallas estrechas no funcionaba apilado.
 */
@media (max-width: 47rem) {
  /* 1 · Portada: el titular es una pregunta de seis líneas; a 375 × 667 el botón y
     su nota tienen que caber en la primera pantalla, antes del retrato. */
  .portada-texto { padding-block: 1.5rem 0; }
  .portada h1 { font-size: clamp(2.2rem, 10vw, 2.75rem); line-height: 1.06; letter-spacing: -.03em; }
  .portada .entrada { margin-top: 1rem; font-size: 1rem; line-height: 1.6; }
  .portada .acciones { margin-top: 1.4rem; }
  /* El botón de la portada, a su medida como en el ordenador: a todo lo ancho era un
     bloque granate que rompía la portada (2026-10-11). */
  .portada .acciones .boton { gap: 1.6rem; }
  .portada .acciones-nota { margin-top: .6rem; }

  /* 2 · Tarjetas: menos relleno, que a 375 px cada una ocupaba media pantalla. */
  .tarjetas > li { padding: 1.4rem 1.35rem; border-radius: 12px; }
  .tarjetas > li::before { margin-bottom: .6rem; font-size: 1.05rem; }
  .tarjetas h3 { font-size: 1.35rem; margin-bottom: .6rem; }
  .tarjetas p { font-size: 1rem; line-height: 1.7; }

  /* 3 · Punto de quiebre. */
  .quiebre { padding-block: 3.5rem; }
  .quiebre h2 { font-size: clamp(1.9rem, 8.4vw, 2.3rem); margin-bottom: 1.5rem; }
  .quiebre-contenido > p { font-size: 1rem; line-height: 1.7; }
  .quiebre-contenido > .quiebre-pregunta { margin-top: 1.4rem; padding-top: 1rem; font-size: clamp(1.55rem, 7vw, 1.85rem); line-height: 1.3; }

  /* 4 · Objetivos. */
  .objetivos { margin-top: 1.8rem; }
  .objetivos li { padding-left: 2.6rem; font-size: 1.1rem; }

  /* 6 · Sobre mí: la foto encima del texto, y la formación abierta y legible, como en
     el ordenador: es lo que da confianza. */
  #sobre-mi .rejilla { gap: 1.75rem; }
  #sobre-mi .foto-sobre-mi { width: 12rem; }
  #sobre-mi .ficha-formacion { margin-top: 2.5rem; padding-top: 1.5rem; font-size: 1rem; line-height: 1.6; }
  #sobre-mi .ficha-formacion h3 { font-size: .72rem; margin-bottom: 1.1rem; }
  #sobre-mi .ficha-formacion li { color: var(--texto); }
  #sobre-mi .ficha-formacion ul { gap: .55rem; }
  #sobre-mi h2 { font-size: clamp(1.75rem, 7.6vw, 2.1rem); margin-bottom: 1.4rem; }
  /* Con `.cuerpo >` delante: si no, la regla general de móvil para los párrafos de
     #sobre-mi la dejaba a 16 px, igual que el resto. */
  #sobre-mi .cuerpo > .sobre-mi-entrada { font-size: 1.35rem; line-height: 1.4; }

  /* 7 · Pasos. */
  .pasos { margin-top: 2rem; gap: 1.75rem; }
  .pasos h3 { font-size: 1.35rem; }
  .pasos-nota { margin-top: 2rem; font-size: .875rem; line-height: 1.6; }

  /* 8 · Carrusel: una tarjeta entera, como las tres del ordenador. A los lados las
     flechas la dejaban en 175 px: bajan a una fila propia, a los extremos, y los
     puntos de página van entre ellas (ver «Puntos de página del carrusel»). */
  .carrusel { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem .75rem; margin-top: 2rem; }
  .carrusel > .testimonios-pista,
  .carrusel:not(.carrusel-activo) > .testimonios-pista { grid-column: 1 / -1; grid-row: 1; }
  .carrusel > [data-carrusel-anterior] { grid-column: 1; grid-row: 2; }
  .carrusel > [data-carrusel-siguiente] { grid-column: 3; grid-row: 2; }
  .testimonios-pista {
    --hueco: var(--margen);
    grid-auto-columns: 100%;
    margin-inline: calc(-1 * var(--margen));
    padding: .25rem var(--margen) .5rem;
    scroll-padding-inline: var(--margen);
    /* Cada tarjeta a su altura: con una sola a la vista, igualarlas a la más larga
       dejaba la de dos líneas con media pantalla en blanco. */
    align-items: start;
  }
  .testimonios-pista > li { padding: 1.4rem 1.35rem; border-radius: 12px; }
  .testimonios-pista blockquote p { font-size: 1.05rem; line-height: 1.6; }

  /* 10 · Tarifas. */
  #tarifas .contacto-resumen { max-width: none; }
  #tarifas .contacto-resumen dt { font-size: 1.2rem; }
  #tarifas .contacto-resumen dd { font-size: 1rem; }
  #tarifas .contacto-resumen-nota { margin-bottom: 1.6rem; }

  /* 5 · El botón de la tarjeta, a lo ancho como el de la portada: a 360 px se partía
     en dos líneas. */
  .quiebre-accion .boton { width: 100%; justify-content: space-between; white-space: nowrap; }

  /* 9 · Online y tarifas: el filete vertical del ordenador, en horizontal al apilarse. */
  #online .ventajas > div:last-child { padding-bottom: 0; }
  .bloque-tarifas { margin-top: 1.75rem; padding-top: 3rem; border-top: 1px solid var(--linea); }

  /* 12 · Cierre: como en el ordenador, sin el segundo botón; el formulario va debajo. */
  .contacto .acciones { display: none; }

  /* El resaltado azul que Android pone al tocar no es de la paleta. Los botones ya
     responden al toque (`.boton:active` encoge); los enlaces, cambiando de color. */
  a, button, summary { -webkit-tap-highlight-color: transparent; }
  a:active { color: var(--granate-claro); }
}

/* Los mensajes de error de cada campo salían en gris: `.contacto p` (más específica)
   les pisaba el granate de error. Vale para todos los tamaños. */
.contacto .campo-error { color: var(--error); }
/* Desplegable con la flecha propia en todos los tamaños: la nativa del ordenador era
   la única pieza del formulario con el aspecto del sistema. Safari de iPhone, además,
   ignora alto, relleno y radios de un desplegable con aspecto nativo. */
.formulario .campo select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232b2424' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 1rem center / 12px 8px;
}
/* `text-wrap: pretty` partía estos avisos cortos por la mitad («…para que / pueda
   llamarte.»): se leen de un tirón, a lo ancho del campo. */
.campo-error, .formulario-aviso { text-wrap: wrap; }
/* El cursor de escritura, del color de la casa y no el negro del navegador. */
.formulario input, .formulario textarea { caret-color: var(--granate); }

/* Escritorio: un solo apartado. El titular arriba, a lo ancho; debajo, la duda a la
   izquierda y la respuesta, sobre papel, a la derecha. */
@media (min-width: 60.01rem) {
  .quiebre { padding-block: clamp(4.5rem, 6vw, 6rem); }
  .quiebre-apartado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .quiebre h2 {
    grid-column: 1 / -1;
    max-width: 52rem;
    margin-bottom: clamp(2.6rem, 4vw, 3.6rem);
    font-size: clamp(2.6rem, 3.6vw, 3.6rem);
  }
  /* La duda acompaña mientras se lee el panel, más largo: sin cuadrante vacío. */
  .quiebre-contenido {
    position: sticky;
    top: 8rem;
    max-width: none;
    padding-top: clamp(2.2rem, 3vw, 2.8rem);
  }
  .quiebre-contenido > p { max-width: 32rem; }
  .quiebre-contenido > .quiebre-pregunta { max-width: 32rem; font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
  .quiebre-contenido > .quiebre-giro { margin-bottom: 1rem; }
  .quiebre-respuesta { margin-top: 0; padding: clamp(2.2rem, 3vw, 2.8rem); border-radius: 16px; }
}

/* Online y tarifas (escritorio): un pliego a dos columnas con un filete vertical en
   medio, como una doble página. A la izquierda, lo que se gana dicho en la serif de
   lectura; a la derecha, la carta de precios con puntos guía. */
@media (min-width: 60.01rem) {
  .online-tarifas-pliego {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .bloque-online { padding-right: clamp(3rem, 5vw, 5.5rem); }
  .bloque-tarifas {
    padding-left: clamp(3rem, 5vw, 5.5rem);
    border-left: 1px solid var(--linea);
    align-self: stretch;
  }

  /* Preguntas y transformación: el titular acompaña mientras se lee la columna larga. */
  #preguntas .rail { position: sticky; top: 7rem; }
}

/* Retoques tras la crítica (2026-10-10). */
/* «tus dudas» era el único `em` de titular sin granate. */
#preguntas h2 em { color: var(--granate); }
/* La formación es lo que da confianza: a .78rem quedaba por debajo del suelo legible. */
.ficha-formacion { font-size: .875rem; }
/* En escritorio el formulario está al lado: un segundo botón granate que lleva a él
   solo obliga a elegir entre dos iguales. En móvil tampoco se pone (va justo debajo). */
@media (min-width: 60.01rem) {
  .contacto .acciones { display: none; }
}

/* Online y tarifas: los dos titulares a la misma escala; la ventaja se nombra en
   cursiva pequeña y se cuenta en la serif de lectura. */
.online-tarifas h2 { font-size: clamp(2.3rem, 3.4vw, 3.4rem); letter-spacing: -.025em; margin-bottom: 2rem; }
.online-tarifas h2 em { color: var(--granate); }
.bloque-tarifas { margin-top: 3.5rem; }
#online .ventajas { margin: 0; }
#online .ventajas > div { padding-block: 1.25rem; }
#online .ventajas > div:first-child { padding-top: 0; border-top: 0; }
#online .ventajas dt { margin-bottom: .4rem; font: italic 400 1.1rem/1.3 var(--serif); color: var(--granate); }
#online .ventajas dd { font: 400 1.25rem/1.45 var(--serif); color: var(--tinta); }
/* La carta: entre filetes dobles, con puntos guía entre concepto e importe. */
#tarifas .contacto-resumen { max-width: none; padding-block: .6rem; border-block: 3px double var(--linea); }
#tarifas .contacto-resumen > div,
#tarifas .contacto-resumen > div:first-child { display: flex; align-items: baseline; gap: .75rem; padding-block: .8rem; border: 0; }
#tarifas .contacto-resumen > div::after {
  content: '';
  order: 1;
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--borde-control);
  transform: translateY(-.3em);
}
#tarifas .contacto-resumen dt { font: 400 1.3rem/1.3 var(--serif); }
#tarifas .contacto-resumen dd {
  order: 2;
  font: 400 1.3rem/1.3 var(--serif);
  color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
}
#tarifas .contacto-resumen > div:first-child dd { font-style: italic; color: var(--granate); }
#tarifas .contacto-resumen-nota { margin: 1rem 0 2rem; font: italic .95rem/1.5 var(--serif); }
@media (min-width: 60.01rem) {
  .bloque-tarifas { margin-top: 0; }
  #online .ventajas dd { font-size: clamp(1.25rem, 1.6vw, 1.45rem); }
  #tarifas .contacto-resumen dt, #tarifas .contacto-resumen dd { font-size: clamp(1.3rem, 1.6vw, 1.45rem); }
}

/* 2 · «Quizá estés aquí porque…»: sin numerar (no es una secuencia) y sin tarjeta.
   Cuatro entradas sobre filete, como los pasos; la tarjeta queda para la respuesta
   del quiebre y el formulario. */
#ayuda .tarjetas { column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: clamp(2rem, 3.5vw, 3rem); }
#ayuda .tarjetas > li {
  padding: 1.5rem 0 0;
  border: 0;
  border-top: 1px solid var(--borde-control);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#ayuda .tarjetas > li::before { content: none; }

/* 3 · Las flechas de las anclas internas bajan (↓): al pasar el ratón, bajan un poco. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .boton[href^="#"]:hover > span, .enlace-texto[href^="#"]:hover > span { transform: translateY(2px); }
  button.boton:hover > span { transform: translateX(2px); }
}

/* Escritorio, tras el recorrido como paciente (2026-10-10). */
@media (min-width: 60.01rem) {
  /* 1 · Entre preguntas y contacto, con el margen de cada una sumado, quedaban ~250 px
     vacíos. Ahora el cambio lo marca el fondo (rosa suave → papel), sin filete. */
  #preguntas { padding-bottom: clamp(3rem, 4.5vw, 4.5rem); }
  #preguntas + .contacto { padding-top: clamp(3.5rem, 5vw, 5rem); }

  /* 3 · Sobre mí con más presencia: la foto algo mayor, los párrafos al tamaño de
     lectura de la página y la formación legible, que es lo que da confianza. */
  #sobre-mi .foto-sobre-mi { width: clamp(14rem, 20vw, 17.5rem); }
  #sobre-mi .cuerpo > p:not(.sobre-mi-entrada) { max-width: 38rem; font-size: 1.1rem; line-height: 1.75; }
  #sobre-mi .ficha-formacion { margin-top: 3rem; padding-top: 1.8rem; font-size: 1rem; }
  #sobre-mi .ficha-formacion h3 { font-size: .72rem; }
  #sobre-mi .ficha-formacion li { color: var(--texto); }
  #sobre-mi .ficha-formacion ul { gap: .55rem; }
}

/* Puntos de página del carrusel (los crea interacciones.js): en escritorio, donde se
   ven tres testimonios y no había nada que dijera que hay más, y en móvil, entre las
   flechas. En tableta no (no se ha tocado). */
.carrusel-puntos { display: none; }
@media (min-width: 60.01rem), (max-width: 47rem) {
  .carrusel-puntos:not([hidden]) { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; }
  .carrusel-puntos > span {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--linea);
    transition: background-color 200ms ease, transform 200ms var(--curva-entrada);
  }
  .carrusel-puntos > span.activo { background: var(--granate); transform: scale(1.15); }
}
@media (max-width: 47rem) {
  /* Los puntos suben a la fila de las flechas (2,9rem), centrados entre ellas. */
  .carrusel-puntos:not([hidden]) { margin-top: calc(-1.45rem - .225rem); pointer-events: none; }
}

/* Formulario: llamada o correo, como dos opciones visibles y no como un desplegable.
   La radio nativa queda dentro de cada etiqueta (accesible y pulsable), teñida de
   granate; la etiqueta entera es el objetivo, de 44 px de alto. */
.campo-contacto { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo-contacto > legend {
  margin-bottom: .45rem;
  padding: 0;
  font: 500 .875rem/1.6 var(--sans);
  color: var(--tinta);
}
.opciones-contacto { display: flex; flex-wrap: wrap; gap: .6rem; }
.opciones-contacto > label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  border: 1px solid var(--borde-control);
  border-radius: 7px;
  background: #fff;
  color: var(--tinta);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
/* Más específico que las reglas de campos de texto (`.formulario .campo input…`),
   que en móvil convertían la radio en una caja de 44 px. */
.formulario .opciones-contacto input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: radio;
  appearance: auto;
  accent-color: var(--granate);
}
.opciones-contacto > label:has(input:checked) { border-color: var(--granate); background: var(--papel-suave); }
.opciones-contacto > label:has(input:focus-visible) { outline: 2px solid var(--granate); outline-offset: 2px; }
.opciones-contacto input:focus-visible { outline: none; }

/*
 * Móvil, tras simular la visita de una paciente que llega desde Instagram (2026-10-11).
 * Cinco ajustes: Instagram como alternativa a la llamada, la respuesta del quiebre
 * plegada, testimonios recortados, el aviso de urgencias tras el formulario y sin el
 * pie de la portada. Nada cambia por encima de 47rem.
 */
.solo-movil { display: none; }
@media (max-width: 47rem) {
  .solo-movil { display: block; }

  /* «Prefiero escribirte por Instagram»: discreto bajo el botón, pero a mano. */
  .via-instagram { margin: .5rem 0 0; font-size: .9375rem; }
  .via-instagram a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--granate);
    text-underline-offset: .25em;
  }
  /* La flecha fuera del subrayado. */
  .via-instagram a span { display: inline-block; margin-left: .4rem; text-decoration: none; }
  .formulario-presentacion .via-instagram { margin-top: .25rem; }

  /* El pie de la portada no aportaba nada que la portada no dijera ya. */
  .portada-pie { display: none; }

  /* Respuesta del quiebre plegada: titular, «Seguir leyendo» y la llamada. */
  .desplegar-movil {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    margin: .75rem 0 .25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--granate);
    font: 400 1.05rem/1.35 var(--serif);
    cursor: pointer;
  }
  .desplegar-movil::after { content: '+'; font: 400 1.1rem/1 var(--sans); }
  .quiebre-detalle[data-despliegue='animado'] {
    transition: opacity var(--duracion-respuesta) var(--curva-entrada), transform var(--duracion-respuesta) var(--curva-entrada);
  }
  .quiebre-detalle[data-estado='cerrado'] { opacity: 0; transform: translateY(-4px); }
  .quiebre-detalle[data-estado='abierto'] { opacity: 1; transform: translateY(0); }
  .quiebre-detalle > p[tabindex='-1']:focus { outline: none; }
  /* Plegada, el botón queda justo encima de la llamada: la línea de separación de la
     lista ya no está, así que la pone la acción. */
  .desplegar-movil + .quiebre-detalle[hidden] + .quiebre-accion { margin-top: 1.25rem; }

  /* Testimonios a unas siete líneas, con un fundido que dice «sigue». */
  .testimonios-pista > li.recortado blockquote {
    max-height: 11.8rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
    mask-image: linear-gradient(to bottom, #000 65%, transparent);
  }
  .testimonios-pista blockquote:focus { outline: none; }
  .leer-entero {
    align-self: flex-start;
    min-height: 44px;
    margin-top: .25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--granate);
    font: 500 .875rem/1.3 var(--sans);
    text-decoration: underline;
    text-decoration-color: var(--borde-control);
    text-underline-offset: .3em;
    cursor: pointer;
  }
  .leer-entero + .testimonio-quien { margin-top: .5rem; }

  /* El aviso de urgencias, después del formulario: justo antes, a quien solo tiene
     dudas sobre su relación le frenaba. Sigue a la vista de quien llega bajando. */
  .contacto .rejilla { display: flex; flex-direction: column; gap: 0; }
  .contacto .rail { display: contents; }
  .contacto h2 { margin-bottom: 1.25rem; }
  .contacto-intro { margin: 0; }
  .contacto-intro + .contacto-intro { margin-top: 1rem; }
  .contacto .contacto-correo { margin: 1.5rem 0 0; }
  /* Instagram ya está en el formulario, justo debajo: dos enlaces seguidos sobraban. */
  .contacto .otros-canales:not(.aviso-urgencias) { display: none; }
  .contacto .cuerpo { order: 1; margin-top: 2rem; }
  .contacto .aviso-urgencias { order: 2; margin: 2rem 0 0; font-size: .8125rem; line-height: 1.55; }
}
/* Revisión crítica de la visita desde Instagram (2026-10-11). Solo móvil. */
@media (max-width: 47rem) {
  .oculto-en-movil { display: none; }

  /* «Online · » dentro de la nota de la portada, en la misma línea. */
  span.solo-movil { display: inline; }

  /* Ningún texto por debajo de 13 px (salvo el subtítulo de la cabecera, 9 px en
     mayúsculas espaciadas, que a más no cabe junto a «Pedir llamada»). */
  .cabecera .marca span { font-size: .5625rem; }
  .testimonio-quien, .contacto .formulario-distintivo, .campo-opcional,
  .campo-casilla > label, .pie, .pie p, .pie a { font-size: .8125rem; }
  #sobre-mi .ficha-formacion h3 { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .quiebre-detalle[data-despliegue='animado'] { transform: none !important; transition: opacity 120ms var(--curva-entrada) !important; }
}