/* ===========================================================================
   Amanda Rodríguez Adán · Psicoterapia
   Hoja de estilo única del sitio.

   Sustituye a las 25 hojas heredadas del theme antiguo (Bootstrap 3,
   Font Awesome, animate.css, swiper, isotope, owl-carousel, camera...),
   de las que la web solo usaba una fracción mínima.

   Índice
     01 Tipografías
     02 Variables
     03 Base y accesibilidad
     04 Retícula y utilidades
     05 Tipografía editorial
     06 Botones y enlaces
     07 Cabecera y navegación
     08 Portada (hero)
     09 Secciones de contenido
     10 Psicoterapias
     11 Cita destacada
     12 Bloque de contacto y formulario
     13 Pie de página
     14 WhatsApp
     15 Movimiento y revelado
     16 Impresión
   =========================================================================== */

/* == 01 Tipografías ======================================================= */
/* Auto-alojadas: la web no hace ninguna petición a servidores de terceros. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/newsreader-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/sourcesans3-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/sourcesans3-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sourcesans3-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* == 02 Variables ========================================================= */

:root {
  /* Papel y tinta: nada de blanco puro ni negro puro. Los tres tonos de papel
     son arena, no blanco: la web se lee como una hoja cálida, no como una
     pantalla. Todos los tonos de tinta llegan a 4,5:1 sobre --papel-3, que es
     el fondo más oscuro sobre el que se escribe. */
  --papel:        #F6EEE1;
  --papel-2:      #EEE3D1;
  --papel-3:      #E4D6BF;
  --noche:        #241F18;
  --noche-2:      #2F2921;

  --tinta:        #2B2621;
  --tinta-2:      #5D544A;
  --tinta-3:      #665D54;

  --linea:        #DBCDB6;
  --linea-suave:  #E7DAC5;

  --salvia:       #6C7E69;
  --salvia-honda: #4C5A4A;
  --salvia-clara: #E1E7DD;
  --arcilla:      #84513C;

  /* Retícula */
  --margen:       clamp(1.25rem, 5vw, 4.5rem);
  --ancho:        1220px;
  --prosa:        68ch;

  /* Ritmo vertical */
  --aire:         clamp(4.5rem, 9vw, 9rem);
  --aire-corto:   clamp(2.5rem, 5vw, 4.5rem);

  /* Movimiento */
  --curva:        cubic-bezier(.22, .61, .36, 1);
  --lento:        .6s var(--curva);

  --radio:        2px;
}


/* == 03 Base y accesibilidad ============================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1rem + .28vw, 1.1875rem);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

::selection { background: var(--salvia-clara); color: var(--tinta); }

/* Foco visible y sobrio, nunca eliminado. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--salvia-honda);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.saltar {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--noche);
  color: var(--papel);
  padding: .75rem 1.25rem;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .25s var(--curva);
}
.saltar:focus { transform: translate(-50%, 0); }

.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* == 04 Retícula y utilidades ============================================= */

.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.prosa { max-width: var(--prosa); }

.seccion { padding-block: var(--aire); }
.seccion--corta { padding-block: var(--aire-corto); }
.seccion--arena { background: var(--papel-2); }
.seccion--linea-arriba { border-top: 1px solid var(--linea); }

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

/* Filete corto: sustituye a los `divider` del theme antiguo. */
.filete {
  width: 3.5rem;
  height: 1px;
  background: var(--salvia);
  border: 0;
  margin: 1.75rem 0;
}
.filete--centrado { margin-inline: auto; }


/* == 05 Tipografía editorial ============================================== */

h1, h2, h3, h4, .display {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--tinta);
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
}

h1, .h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.6rem);
  line-height: 1.05;
}
h2, .h2 {
  font-size: clamp(1.95rem, 1.4rem + 2vw, 3.05rem);
  line-height: 1.14;
}
h3, .h3 {
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem);
  line-height: 1.25;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.entradilla {
  font-size: clamp(1.2rem, 1.08rem + .55vw, 1.45rem);
  line-height: 1.62;
  color: var(--tinta-2);
  font-weight: 300;
}

.antetitulo {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--salvia-honda);
  font-weight: 600;
  margin: 0 0 1rem;
}
.antetitulo--claro { color: #B9C4B4; }

/* Numeración editorial de los apartados */
.ordinal {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

strong, b { font-weight: 600; color: var(--tinta); }

.prosa a,
.texto-legal a {
  color: var(--salvia-honda);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linea);
  transition: text-decoration-color .25s var(--curva), color .25s var(--curva);
}
.prosa a:hover,
.texto-legal a:hover { text-decoration-color: currentColor; color: var(--arcilla); }


/* == 06 Botones y enlaces ================================================= */

.boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background-color .3s var(--curva), color .3s var(--curva),
              border-color .3s var(--curva), transform .3s var(--curva);
}

.boton--principal {
  background: var(--salvia-honda);
  color: #F7F5F0;
}
.boton--principal:hover { background: var(--noche); transform: translateY(-2px); }

.boton--contorno {
  background: transparent;
  border-color: var(--linea);
  color: var(--tinta);
}
.boton--contorno:hover { border-color: var(--tinta); transform: translateY(-2px); }

.boton--claro {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.boton--claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; transform: translateY(-2px); }

/* Enlace con subrayado que crece */
.enlace-fino {
  display: inline-block;
  color: var(--tinta);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--curva), color .35s var(--curva);
}
.enlace-fino:hover { background-size: 100% 1px; color: var(--salvia-honda); }

.enlace-grande {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  transition: border-color .3s var(--curva), color .3s var(--curva);
  line-height: 1.4;
  display: inline-block;
  overflow-wrap: anywhere;
}
.enlace-grande:hover { color: var(--salvia-honda); border-color: var(--salvia); }


/* == 07 Cabecera y navegación ============================================= */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  transition: background-color .4s var(--curva), border-color .4s var(--curva),
              transform .45s var(--curva);
}

/* Sobre la portada la cabecera flota transparente hasta que se hace scroll. */
.cabecera--sobre-hero {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom-color: transparent;
}
.cabecera--sobre-hero .marca,
.cabecera--sobre-hero .menu__enlace,
.cabecera--sobre-hero .menu__contacto a { color: #fff; }
.cabecera--sobre-hero .marca__oficio { color: rgba(255, 255, 255, .72); }
.cabecera--sobre-hero .hamburguesa__linea { background: #fff; }

/* Estado tras hacer scroll: recupera el papel en cualquier página. */
.cabecera.es-solida {
  background: rgba(246, 238, 225, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linea);
}
.cabecera.es-solida .marca,
.cabecera.es-solida .menu__enlace,
.cabecera.es-solida .menu__contacto a { color: var(--tinta); }
.cabecera.es-solida .marca__oficio { color: var(--tinta-3); }
.cabecera.es-solida .hamburguesa__linea { background: var(--tinta); }

/* Se retira al bajar y vuelve al subir: deja el texto respirar. */
.cabecera.es-retirada { transform: translateY(-100%); }

.cabecera__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 1.1rem var(--margen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: padding .4s var(--curva);
}
.cabecera.es-solida .cabecera__interior { padding-block: .8rem; }

.marca {
  text-decoration: none;
  color: var(--tinta);
  display: grid;
  line-height: 1.15;
  transition: color .4s var(--curva);
}
.marca__nombre {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: -.01em;
}
.marca__oficio {
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-top: .28rem;
  transition: color .4s var(--curva);
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__enlace {
  position: relative;
  color: var(--tinta);
  text-decoration: none;
  font-size: .96rem;
  letter-spacing: .01em;
  padding-block: .35rem;
  transition: color .3s var(--curva);
  white-space: nowrap;
}
.menu__enlace::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--curva);
}
.menu__enlace:hover::after,
.menu__enlace.es-activo::after { transform: scaleX(1); }
.menu__enlace.es-activo { color: var(--salvia-honda); }
.cabecera--sobre-hero .menu__enlace.es-activo { color: #fff; }

.menu__contacto { display: none; }

.hamburguesa {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.hamburguesa__linea {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 1.5px;
  background: var(--tinta);
  transition: transform .4s var(--curva), opacity .25s var(--curva), background-color .4s var(--curva);
}
.hamburguesa__linea:nth-child(1) { top: 15px; }
.hamburguesa__linea:nth-child(2) { top: 21px; }
.hamburguesa__linea:nth-child(3) { top: 27px; }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .hamburguesa { display: block; z-index: 2; }

  /* El panel del menú cubre toda la pantalla; la marca debe quedar por
     encima para que no desaparezca al abrirlo. */
  .marca { position: relative; z-index: 2; }

  .menu {
    position: fixed;
    inset: 0;
    background: var(--papel);
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 2.5rem;
    padding: 6rem var(--margen) 3rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--curva), visibility .4s;
    /* Si el menú no cabe (móvil apaisado), se desplaza él, sin arrastrar
       el scroll de la página que hay detrás. */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu.es-abierto { opacity: 1; visibility: visible; }

  .menu__lista {
    flex-direction: column;
    align-items: start;
    gap: .35rem;
  }
  .menu__enlace {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    color: var(--tinta);
    line-height: 1.25;
    opacity: 0;
    transform: translateY(14px);
  }
  .menu.es-abierto .menu__enlace {
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--curva), transform .5s var(--curva);
    transition-delay: calc(120ms + var(--i) * 60ms);
  }
  .menu__enlace::after { display: none; }
  .menu__enlace.es-activo { color: var(--salvia-honda); font-style: italic; }

  .menu__contacto {
    display: grid;
    gap: .3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--linea);
    width: min(100%, 28rem);
  }
  .menu__contacto a {
    color: var(--tinta-2);
    text-decoration: none;
    font-size: 1.05rem;
  }

  body.menu-abierto { overflow: hidden; }
}


/* == 08 Portada (hero) ==================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--noche);
  isolation: isolate;
}

.hero__fondos { position: absolute; inset: 0; z-index: -2; }

.hero__fondo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
  will-change: opacity;
}
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
  /* Retoque mínimo y común a todas. La foto del diván, que era la única
     realmente oscura, se aclaró al generarla: subirle el brillo aquí a todas
     por igual lavaba la de la cuerda. */
  filter: brightness(1.04) contrast(.97) saturate(1.03);
}
/* Encuadre por fotografía. En móvil el recorte de object-fit:cover es muy
   agresivo (a 390 px de ancho sobran más de 1.100 px de imagen), así que el
   punto de anclaje decide qué se ve. En la foto de la consulta, centrada
   dejaba a la vista solo la ventana; desplazada al 85 % manda el diván y la
   luz de la ventana sigue entrando por la izquierda. */
.hero__fondo--consulta img { object-position: 85% center; }

.hero__fondo.es-visible { opacity: 1; }
.hero__fondo.es-visible img { animation: deriva 16s linear forwards; }

@keyframes deriva {
  from { transform: scale(1.03); }
  to   { transform: scale(1.11); }
}

/* Velo cálido: unifica fotografías de tonos muy distintos y asegura el
   contraste del texto blanco sin apagar del todo la imagen. */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Sombra suave hacia la izquierda, solo la necesaria para que el texto
       blanco se lea. La fotografía tiene que seguir viéndose. */
    linear-gradient(to right, rgba(40, 27, 16, .70) 0%, rgba(40, 27, 16, .46) 34%,
                              rgba(40, 27, 16, .16) 64%, rgba(40, 27, 16, .06) 100%),
    /* Base inferior, para el bloque de botones. */
    linear-gradient(to top, rgba(40, 27, 16, .52) 0%, rgba(40, 27, 16, .10) 48%, transparent 100%),
    /* Franja superior: el menú va en blanco y necesita apoyo cuando la
       fotografía es clara por arriba. */
    linear-gradient(to bottom, rgba(40, 27, 16, .56) 0%, rgba(40, 27, 16, .20) 16%,
                               transparent 32%),
    /* Tinte cálido que unifica fotografías de tonos muy distintos. */
    linear-gradient(135deg, rgba(104, 70, 38, .18), rgba(72, 50, 30, .16));
}

.hero__interior {
  position: relative;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 9rem var(--margen) clamp(4.5rem, 9vh, 7rem);
  color: #fff;
}

.hero__oficios {
  /* Necesario: la regla general de h1..h4 fija el color de tinta oscura y
     ganaría a la herencia del blanco de .hero__interior. */
  color: #fff;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(2.7rem, 1.4rem + 5.4vw, 5.4rem);
  line-height: 1.04;
  font-weight: 400;
  margin: 0 0 1.6rem;
  letter-spacing: -.02em;
  max-width: 16ch;
  text-shadow: 0 2px 26px rgba(24, 14, 6, .72);
}
.hero__oficios span { display: block; }
.hero__oficios em {
  font-style: italic;
  font-weight: 300;
  color: #EFE7D9;
}

.hero__nombre {
  text-shadow: 0 1px 18px rgba(24, 14, 6, .75);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  margin: 0 0 2.2rem;
  font-weight: 500;
}

.hero__lugar {
  text-shadow: 0 1px 18px rgba(24, 14, 6, .75);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 2.4rem;
  max-width: 42ch;
  font-weight: 300;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

/* En pantalla estrecha el texto ocupa todo el ancho, así que el degradado
   lateral (pensado para que el texto se apoye en el tercio izquierdo) apagaba
   la fotografía entera. Aquí la sombra sube desde abajo, que es donde está el
   texto, y la parte alta de la imagen se ve casi limpia. */
@media (max-width: 760px) {
  .hero__velo {
    background:
      linear-gradient(to top, rgba(40, 27, 16, .60) 0%, rgba(40, 27, 16, .36) 42%,
                              rgba(40, 27, 16, .10) 72%, rgba(40, 27, 16, .04) 100%),
      linear-gradient(to bottom, rgba(40, 27, 16, .38) 0%, rgba(40, 27, 16, .11) 15%,
                                 transparent 30%),
      linear-gradient(135deg, rgba(104, 70, 38, .10), rgba(72, 50, 30, .09));
  }
  /* En móvil se sirve un recorte vertical propio, ya encuadrado sobre el
     diván: no hay que desplazarlo. */
  .hero__fondo--consulta img { object-position: center; }
}

/* Indicador de scroll: una línea que baja despacio. */
.hero__baja {
  position: absolute;
  right: var(--margen);
  bottom: clamp(4.5rem, 9vh, 7rem);
  display: grid;
  justify-items: center;
  gap: .8rem;
  color: rgba(255, 255, 255, .6);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__baja::after {
  content: '';
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .7));
  transform-origin: top;
  animation: baja 2.6s var(--curva) infinite;
}
@keyframes baja {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (max-width: 900px) { .hero__baja { display: none; } }

/* Cabecera de las páginas interiores: mismo lenguaje, más contenida. */
.portadilla {
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem);
}
.portadilla__titulo { max-width: 18ch; }
.portadilla .entradilla { margin-top: 1.6rem; max-width: 56ch; }


/* == 09 Secciones de contenido ============================================ */

/* Dos columnas: rótulo que se queda fijo a la izquierda, texto a la derecha. */
.dosdos {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .dosdos { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .dosdos__rotulo { position: sticky; top: 8rem; align-self: start; }
}
.dosdos__rotulo h2 { margin-bottom: .8rem; }

.texto-largo > p { margin-bottom: 1.5em; }
.texto-largo > p:first-of-type {
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  line-height: 1.65;
  color: var(--tinta-2);
  font-weight: 300;
}

/* Lista de trayectoria: mismo contenido, legible de un vistazo. */
.trayectoria {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--linea);
}
.trayectoria li {
  display: grid;
  gap: .2rem .5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linea);
}
.trayectoria b {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.005em;
}
.trayectoria span { color: var(--tinta-2); font-size: .98rem; line-height: 1.6; }

.nota-pie {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: .92rem;
  line-height: 1.65;
  color: var(--tinta-3);
}

/* Franja de imagen a sangre entre secciones */
.franja {
  position: relative;
  height: clamp(15rem, 40vh, 28rem);
  overflow: hidden;
  background: var(--papel-3);
}
.franja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.franja::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(35, 27, 20, .22), rgba(35, 27, 20, .42));
}
/* Texto opcional sobre la franja */
.franja__texto {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 3rem) var(--margen);
  max-width: var(--ancho);
  margin-inline: auto;
  color: #fff;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.7rem);
  line-height: 1.35;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
  max-width: 34ch;
}


/* == 10 Psicoterapias ===================================================== */

.terapias {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 800px) { .terapias { grid-template-columns: 1fr 1fr; } }

.terapia {
  background: var(--papel);
  padding: clamp(1.9rem, 3.5vw, 3.2rem);
  display: grid;
  align-content: start;
  gap: .9rem;
  transition: background-color .45s var(--curva);
}
.terapia:hover { background: var(--papel-2); }
.terapia:hover .terapia__ordinal { color: var(--salvia); }

.terapia__ordinal {
  font-family: 'Newsreader', Georgia, serif;
  font-size: .95rem;
  color: var(--tinta-3);
  letter-spacing: .1em;
  transition: color .45s var(--curva);
}
.terapia h3 { max-width: 22ch; }
.terapia p { color: var(--tinta-2); margin: 0; }


/* == 11 Cita destacada ==================================================== */

.cita {
  background: var(--noche);
  color: #EDE6DB;
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
}
.cita blockquote { margin: 0; }
.cita__texto {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.6rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0;
  color: #F2EBE0;
  /* En em, no en ch: la medida acompaña al tamaño del propio titular
     (con ch, a 3,6rem, la columna salía altísima y estrechísima). */
  max-width: 15em;
}
.cita cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9C948A;
}
.cita--arena {
  background: var(--papel-2);
  color: var(--tinta);
  border-block: 1px solid var(--linea);
}
.cita--arena .cita__texto { color: var(--tinta); }
.cita--arena cite { color: var(--tinta-3); }


/* == 12 Bloque de contacto y formulario =================================== */

.cierre {
  /* Un tono más hondo que .seccion--arena: si una página termina en arena,
     el bloque de contacto tiene que distinguirse igualmente. */
  background: var(--papel-3);
  border-top: 1px solid var(--linea);
  padding-block: var(--aire);
}
.cierre__rejilla {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .cierre__rejilla { grid-template-columns: 1fr 1fr; }
}
.cierre__titulo { max-width: 16ch; }
.cierre__nota {
  margin-top: 1.6rem;
  color: var(--tinta-2);
  max-width: 46ch;
}

.datos { margin: 0 0 2.2rem; }
.datos__fila {
  display: grid;
  gap: .2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linea);
}
.datos__fila:first-child { border-top: 1px solid var(--linea); }
.datos dt {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 600;
}
.datos dd { margin: 0; }

/* --- Formulario --------------------------------------------------------- */

.formulario {
  display: grid;
  gap: 1.4rem;
  max-width: 38rem;
}
.campo { display: grid; gap: .45rem; }
.campo label {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  font-weight: 600;
}
.campo input,
.campo textarea {
  font: inherit;
  font-size: 1.05rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .85rem 1rem;
  width: 100%;
  transition: border-color .3s var(--curva), background-color .3s var(--curva);
}
.campo textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }
.campo input:hover,
.campo textarea:hover { border-color: var(--tinta-3); }
.campo input:focus,
.campo textarea:focus {
  border-color: var(--salvia-honda);
  outline: none;
  box-shadow: 0 0 0 3px var(--salvia-clara);
}
.campo .ayuda { font-size: .9rem; color: var(--tinta-3); }
.campo--error input,
.campo--error textarea { border-color: var(--arcilla); }
.campo .error { font-size: .9rem; color: var(--arcilla); }

/* Trampa antispam: invisible para las personas, tentadora para los robots. */
.trampa {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--linea);
}
.consentimiento input {
  width: 1.15rem; height: 1.15rem;
  margin-top: .38rem;
  accent-color: var(--salvia-honda);
}
.consentimiento label {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta-2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.aviso {
  padding: 1.1rem 1.3rem;
  border-radius: var(--radio);
  font-size: 1rem;
  line-height: 1.6;
}
.aviso--bien { background: var(--salvia-clara); border-left: 3px solid var(--salvia-honda); }
.aviso--mal  { background: #F6E7E1; border-left: 3px solid var(--arcilla); }

/* Cómo llegar: la consulta se sitúa por las bocas de metro, no por el portal. */
.llegar {
  margin-top: 2.5rem;
  padding: 1.8rem;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.llegar__titulo {
  font-size: 1.15rem;
  margin: 0 0 1.2rem;
}
.metros {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: .1rem;
}
.metros li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
}
.metros li:last-child { border-bottom: 0; }
.metros__nombre {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.15rem;
  color: var(--tinta);
}
.metros__lineas {
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--tinta-3);
  margin-left: auto;
}
.llegar__nota {
  margin: 0;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--tinta-2);
}


/* == 13 Pie de página ===================================================== */

.pie {
  background: var(--noche);
  color: #C9C1B6;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  font-size: 1rem;
}
.pie__rejilla {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 760px) {
  .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
}
.pie__nombre {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.55rem;
  color: #F2EBE0;
  margin: 0 0 .35rem;
}
.pie__oficio { margin: 0 0 .8rem; color: #A79E92; }
.pie__colegiada { margin: 0; font-size: .92rem; color: #90867A; max-width: 32ch; line-height: 1.6; }

.pie__epigrafe {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #90867A;
  margin: 0 0 1rem;
  font-weight: 600;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie a {
  color: #C9C1B6;
  text-decoration: none;
  transition: color .3s var(--curva);
  overflow-wrap: anywhere;
}
.pie a:hover { color: #fff; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .88rem;
  color: #90867A;
}
.pie__legal p { margin: 0; }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }


/* == 14 WhatsApp ========================================================== */

.whatsapp {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(20, 17, 15, .22);
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .45s var(--curva), transform .45s var(--curva),
              box-shadow .3s var(--curva);
}
.whatsapp.es-visible { opacity: 1; transform: none; pointer-events: auto; }
.whatsapp:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 17, 15, .3); }
.whatsapp svg { width: 30px; height: 30px; fill: #fff; }


/* == 15 Movimiento y revelado ============================================= */

.revelar {
  opacity: 0;
  transform: translateY(18px);
}
.revelar.es-dentro {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--curva), transform .8s var(--curva);
  transition-delay: var(--retraso, 0ms);
}

/* Sin JavaScript nada queda invisible. */
.sin-js .revelar,
.sin-js .hero__fondo:first-child { opacity: 1; transform: none; }

/* Respeta a quien pide menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  .hero__fondo.es-visible img { animation: none; transform: none; }
}


/* == 16 Impresión ========================================================= */

@media print {
  .cabecera, .whatsapp, .hero__baja, .cierre, .saltar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { min-height: auto; color: #000; background: none; }
  .hero__velo, .hero__fondos { display: none; }
  .hero__oficios, .hero__nombre, .hero__lugar { color: #000; }
  .pie { background: none; color: #000; }
  .pie a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* == 17 Índice de página y textos legales ================================= */

.indice {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}
.indice ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
}
.indice a {
  color: var(--tinta-2);
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--curva), border-color .3s var(--curva);
}
.indice a:hover { color: var(--tinta); border-color: var(--salvia); }

/* Páginas legales: columna estrecha, jerarquía tranquila, cómoda de leer. */
.texto-legal { font-size: 1.02rem; line-height: 1.8; color: var(--tinta-2); }
.texto-legal h2 {
  font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  color: var(--tinta);
  margin: 3rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}
.texto-legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texto-legal ul { padding-left: 1.2rem; margin: 0 0 1.2em; }
.texto-legal li { margin-bottom: .6em; }
.texto-legal .destacado {
  background: var(--salvia-clara);
  border-left: 3px solid var(--salvia-honda);
  padding: 1.1rem 1.3rem;
  color: var(--tinta);
}

/* Ficha de datos del titular */
.ficha { margin: 1.6rem 0 2rem; border-top: 1px solid var(--linea); }
.ficha > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 620px) {
  .ficha > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: baseline; }
}
.ficha dt {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 600;
}
.ficha dd { margin: 0; color: var(--tinta); }


/* == 18 Ajustes finos ===================================================== */

/* <picture> es un elemento en línea: para que la imagen llene el contenedor
   hace falta que el propio <picture> se estire. */
.hero__fondo picture,
.franja picture { position: absolute; inset: 0; display: block; }

/* Reserva de altura mientras carga (evita saltos de maquetación). */
.hero { min-height: 100vh; min-height: 100svh; }

/* Menú abierto sobre la portada: el panel es de color papel, así que el
   texto blanco de la cabecera transparente tiene que volverse oscuro. */
@media (max-width: 900px) {
  body.menu-abierto .cabecera--sobre-hero .marca,
  body.menu-abierto .cabecera--sobre-hero .menu__enlace,
  body.menu-abierto .cabecera--sobre-hero .menu__contacto a { color: var(--tinta); }
  body.menu-abierto .cabecera--sobre-hero .marca__oficio    { color: var(--tinta-3); }
  body.menu-abierto .cabecera--sobre-hero .hamburguesa__linea { background: var(--tinta); }
  body.menu-abierto .cabecera--sobre-hero .menu__enlace.es-activo { color: var(--salvia-honda); }
  body.menu-abierto .cabecera { background: var(--papel); }
}

/* En pantallas bajas la portada no debe obligar a hacer scroll para leerla. */
@media (max-height: 640px) and (min-width: 901px) {
  .hero__interior { padding-top: 7rem; }
  .hero__oficios  { font-size: clamp(2.2rem, 5vw, 3.4rem); }
}

/* Sobre la fotografía, el botón principal en papel destaca mucho más que en
   salvia y mantiene el tono sobrio. */
.hero .boton--principal { background: #F1E9DC; color: var(--noche); }
.hero .boton--principal:hover { background: #fff; color: var(--noche); }


/* == 19 Clases de apoyo =================================================== */
/* Sustituyen a los atributos style="" que había en las plantillas. Sin
   estilos en línea, la política de seguridad de contenidos (CSP) del
   .htaccess puede prohibir todo lo que no venga de este mismo dominio. */

.revelar--tras  { --retraso: 100ms; }   /* la columna de texto entra después del rótulo */
.revelar--tras2 { --retraso: 120ms; }

/* Escalonado del menú móvil y de las tarjetas de psicoterapias. */
.menu__item:nth-child(1) { --i: 0; }
.menu__item:nth-child(2) { --i: 1; }
.menu__item:nth-child(3) { --i: 2; }
.menu__item:nth-child(4) { --i: 3; }
.menu__item:nth-child(5) { --i: 4; }
.menu__item:nth-child(6) { --i: 5; }

.terapias .terapia:nth-child(1) { --retraso: 0ms; }
.terapias .terapia:nth-child(2) { --retraso: 90ms; }
.terapias .terapia:nth-child(3) { --retraso: 180ms; }
.terapias .terapia:nth-child(4) { --retraso: 270ms; }

.intro-seccion  { max-width: 46rem; }
.lista-estrecha { max-width: 40rem; }
.titulo-bloque  { margin-bottom: 1.6rem; }
.aviso-arriba   { margin-bottom: 1.6rem; }
.tras-titular   { margin-top: 1.4rem; }
.tras-texto     { margin-top: 2rem; }
.tras-bloque    { margin-top: 2.5rem; }
.nota-rotulo    { font-size: .98rem; }


/* == 20 Motivos de consulta =============================================== */

/* Portada: los motivos agrupados en cuatro columnas de enlaces. Enlazan a la
   página completa, así que cada término es además un enlace interno. */
.nube {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea);
}
@media (min-width: 640px) { .nube { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .nube { grid-template-columns: repeat(4, 1fr); } }

.nube__titulo {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--salvia-honda);
  font-weight: 600;
  margin: 0 0 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--linea);
}
.nube__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.nube__lista a {
  color: var(--tinta);
  text-decoration: none;
  font-size: 1.02rem;
  line-height: 1.4;
  display: inline-block;
  background-image: linear-gradient(var(--salvia), var(--salvia));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--curva), color .3s var(--curva);
}
.nube__lista a:hover { background-size: 100% 1px; color: var(--salvia-honda); }

/* Página completa: cada motivo con su propio encabezado y su ancla. */
.motivos {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea);
}
.motivo {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linea);
  scroll-margin-top: 7rem;          /* la cabecera fija no tapa el ancla */
}
.motivo__nombre {
  font-size: clamp(1.25rem, 1.12rem + .55vw, 1.55rem);
  margin: 0 0 .5rem;
}
.motivo__texto {
  margin: 0;
  color: var(--tinta-2);
  max-width: 58ch;
}
/* Al llegar desde un enlace con ancla, el motivo se señala un instante. */
.motivo:target .motivo__nombre { color: var(--salvia-honda); }
.motivo:target {
  background: var(--salvia-clara);
  box-shadow: -1.2rem 0 0 var(--salvia-clara), 1.2rem 0 0 var(--salvia-clara);
}

/* El menú tiene seis entradas: entre 900 y 1150 px hay que apretar un poco. */
@media (min-width: 901px) and (max-width: 1150px) {
  .menu__lista { gap: 1.15rem; }
  .menu__enlace { font-size: .89rem; }
  .marca__nombre { font-size: 1.15rem; }
}



/* == 21 Menú móvil: el panel tiene que cubrir la pantalla ================== */
/*
   BUG QUE ARREGLA ESTO
   --------------------
   El panel del menú es un `position: fixed; inset: 0` que cuelga de la
   cabecera. Al hacer scroll, la cabecera recibe la clase .es-solida, que le
   ponía `backdrop-filter: blur(10px)`.

   Y ahí está el problema: backdrop-filter (igual que transform, filter o
   perspective) convierte al elemento en BLOQUE CONTENEDOR de sus hijos
   `position: fixed`. Es decir, el panel dejaba de medirse contra la ventana
   y pasaba a medirse contra la cabecera: se encogía a la altura de la barra,
   se superponía al contenido y el menú quedaba inservible.

   Solo se notaba al abrir el menú DESPUÉS de haber hecho scroll, que es
   justo lo normal.

   Solución: en móvil, la cabecera sólida usa un fondo opaco y ningún efecto
   que cree bloque contenedor. El desenfoque se mantiene en escritorio, donde
   el menú no es un panel a pantalla completa.
*/
@media (max-width: 900px) {
  .cabecera.es-solida {
    background: var(--papel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Y lo mismo con el transform de la cabecera retraída. */
  body.menu-abierto .cabecera,
  body.menu-abierto .cabecera.es-retirada {
    transform: none;
  }
}

/* Pantalla baja (móvil apaisado): el menú no cabe centrado. Con `center` a
   secas el desbordamiento se reparte arriba y abajo, y las primeras entradas
   quedaban fuera de la pantalla, pisando la marca. `safe center` deja el
   desbordamiento solo por abajo, que sí se puede alcanzar con scroll. */
@media (max-width: 900px) {
  .menu {
    align-content: center;
    align-content: safe center;
  }
}
@media (max-width: 900px) and (max-height: 520px) {
  .menu { gap: 1.4rem; padding-top: 5rem; padding-bottom: 2rem; }
  .menu__lista { gap: .1rem; }
  .menu__enlace { font-size: clamp(1.25rem, 4.6vw, 1.7rem); }
  .menu__contacto { padding-top: 1.2rem; }
}


/* == 22 Menú móvil: la cabecera tapa lo que pasa por debajo ================ */
/*
   BUG QUE ARREGLA ESTO
   --------------------
   Con el menú abierto, la marca y la X van por encima del panel
   (z-index: 2) para que no desaparezcan. Pero el panel es desplazable:
   en cuanto no cabe —móvil apaisado, sobre todo— sus entradas se deslizan
   por debajo de la marca, y como entre medias no había nada opaco, las
   letras se superponían: «PSICÓLOGA · PSICOTERAPEUTA» encima de «Inicio».

   Se resuelve con una banda opaca del ancho de la cabecera, colocada en la
   capa intermedia: por encima del panel, por debajo de la marca y la X.

   Además, en pantalla baja el menú deja de centrarse. Se centraba con
   `align-content: safe center`, pero la palabra clave `safe` no existe en
   navegadores algo antiguos (Safari anterior a 15.4, por ejemplo): allí
   quedaba un `center` a secas y el desbordamiento se repartía arriba y
   abajo, dejando las primeras entradas fuera de la pantalla. Alineado
   arriba no hay nada que adivinar y se comporta igual en todas partes.
*/
@media (max-width: 900px) {
  body.menu-abierto .cabecera::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--papel);
    z-index: 1;
  }
}

@media (max-width: 900px) and (max-height: 560px) {
  .menu {
    align-content: start;
    padding-top: 5.5rem;
  }
}