/* Rellano · consulta de psicología en el Ensanche de León (concepto WEBO). Seria y cálida.
   Mundo: la escalera de un edificio de vecinos de los años cincuenta. Pared de cal rosada arriba, zócalo granate abajo
   con su moldura, y el rellano como sitio donde pararse antes de llamar a la puerta.
   Paleta: cal rosada, rosa ceniza, tinta ciruela y un granate que ocupa franjas enteras (nunca verdes de bienestar).
   Tipografía: solo Alegreya Sans. 300 para titulares grandes y tranquilos, cursiva para los motivos, 400 y 500 para leer.
   Forma: esquinas de 6 px en todo (fotos, paneles, botones, campos). Filetes de 1,5 px que dibujan la escalera.
   Movimiento (3/10): la frase de portada se completa despacio una sola vez; los peldaños se trazan al entrar. Nada más. */

@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/conceptos/alegreyasans-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/conceptos/alegreyasans-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/conceptos/alegreyasans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/conceptos/alegreyasans-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/conceptos/alegreyasans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --cal: #F3EDEC;
  --cal-2: #EBE2E0;
  --rosa: #E6D5D0;
  --tinta: #2A1E22;
  --tinta-2: #5C4E54;
  --granate: #5A2731;
  --granate-hondo: #461E26;
  --moldura: #6E3542;
  --sobre: #F6EDEA;
  --sobre-2: #DCC6C6;
  --filete: rgb(42 30 34 / .14);
  --filete-fuerte: rgb(42 30 34 / .3);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-lenta: cubic-bezier(.33, 1, .68, 1);
  --ancho: 1240px;
  --margen: clamp(20px, 4.6vw, 72px);
  --hueco: clamp(16px, 1.8vw, 28px);
  --radio: 6px;
  --cab: 74px;
}

html { scroll-padding-top: calc(var(--cab) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--cal);
  color: var(--tinta);
  font: 400 1.1875rem/1.6 "Alegreya Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
}

::selection { background: #E2C3C3; color: var(--tinta); }
:focus-visible { outline: 2px solid var(--granate); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-weight: 300; text-wrap: balance; }
p { text-wrap: pretty; }

.saltar {
  position: absolute; left: 16px; top: -64px; z-index: 60;
  padding: 10px 16px; border-radius: var(--radio);
  background: var(--granate); color: var(--sobre); text-decoration: none;
}
.saltar:focus-visible { top: 12px; outline-color: var(--granate); }

.cabecera__in, .portada__in, .dudas__in, .sesion__in, .motivos__in, .consulta__in, .tarifas__in, .cita__in, .pie__in {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Botones y enlaces: rectángulos de 6 px, sobrios */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border: 0; border-radius: var(--radio);
  background: var(--granate); color: var(--sobre);
  font: 500 1.0625rem/1 "Alegreya Sans", ui-sans-serif, system-ui, sans-serif; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--cabecera { min-height: 42px; padding: 0 18px; font-size: 1rem; background: transparent; color: var(--granate); box-shadow: inset 0 0 0 1px rgb(90 39 49 / .45); }
.enlace {
  color: var(--granate); font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: rgb(90 39 49 / .35);
  transition: text-decoration-color 200ms ease;
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--granate-hondo); }
  .boton--cabecera:hover { background: var(--granate); color: var(--sobre); box-shadow: inset 0 0 0 1px var(--granate); }
  .enlace:hover { text-decoration-color: currentColor; }
  .cabecera__nav a:hover, .pie a:hover { color: var(--granate); }
}

/* Cabecera: cal, con filete cuando ya has bajado */
.centinela { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgb(243 237 236 / .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: box-shadow 300ms ease;
}
.cabecera.es-bajada { box-shadow: 0 1px 0 var(--filete); }
@media (prefers-reduced-transparency: reduce) { .cabecera { background: var(--cal); } }
.cabecera__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--cab); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca__signo { width: 26px; height: 26px; flex: none; color: var(--granate); }
.marca__nombre { font-size: 1.375rem; font-weight: 500; letter-spacing: -.01em; }
.marca__sub { padding-left: 11px; border-left: 1px solid var(--filete-fuerte); color: var(--tinta-2); font-size: 1rem; line-height: 1.1; }
.cabecera__nav ul { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.cabecera__nav a { color: var(--tinta); text-decoration: none; font-size: 1.0625rem; transition: color 200ms ease; }

/* Portada: cal arriba, zócalo granate abajo con su moldura; la foto apoya sobre la línea */
.portada { position: relative; isolation: isolate; --zocalo: clamp(150px, 24vh, 230px); }
/* Dos filas: la pared (texto) y la parte alta del zócalo, donde apoya la foto */
.portada__in {
  min-height: calc(100svh - var(--cab));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr calc(var(--zocalo) * .55);
  column-gap: var(--hueco);
  padding-top: clamp(32px, 6vh, 72px); padding-bottom: calc(var(--zocalo) * .45);
}
.portada__texto { grid-column: 1 / 8; grid-row: 1; align-self: center; padding-bottom: clamp(32px, 5vh, 56px); }
.portada__titulo { font-size: clamp(3rem, 5.6vw, 5.25rem); line-height: 1.04; letter-spacing: -.022em; }
.portada__fijo, .portada__motivo { display: block; }
.portada__motivo { font-style: italic; white-space: nowrap; min-height: 1.06em; color: var(--tinta); }
.portada__motivo .l { display: inline-block; white-space: pre; }
.portada__sub { margin-top: clamp(22px, 3.2vh, 32px); max-width: 38ch; color: var(--tinta-2); font-size: clamp(1.1875rem, 1.45vw, 1.3125rem); line-height: 1.5; }
.portada .acciones { margin-top: clamp(28px, 4.4vh, 40px); }
.portada__dato { grid-column: 1 / 7; grid-row: 2; align-self: center; padding-top: 12px; color: var(--sobre-2); font-size: 1.0625rem; line-height: 1.5; font-variant-numeric: lining-nums; }

.zocalo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: var(--zocalo);
  background:
    linear-gradient(var(--moldura), var(--moldura)) top / 100% 6px no-repeat,
    linear-gradient(rgb(244 241 238 / .22), rgb(244 241 238 / .22)) 0 10px / 100% 1px no-repeat,
    var(--granate);
}

/* Huecos de foto: marcador ilustrado en la paleta, se sustituye por <img> */
.hueco { position: relative; overflow: hidden; margin: 0; border-radius: var(--radio); background: var(--cal-2); }
.hueco > svg, .hueco > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hueco--sala {
  grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; justify-self: end;
  aspect-ratio: 4 / 5; width: 100%; max-height: calc(100svh - var(--cab) - 80px); max-width: 520px;
  box-shadow: 0 26px 44px -30px rgb(42 30 34 / .5);
}

/* Dudas: título fijo a la izquierda, preguntas que se abren a la derecha */
.dudas__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px);
}
.dudas__cab { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--cab) + 32px); }
.dudas h2, .sesion h2, .tarifas h2, .cita h2, .consulta h2 { font-size: clamp(2.25rem, 3.8vw, 3.375rem); line-height: 1.06; letter-spacing: -.02em; }
.dudas__cab p { margin-top: 22px; color: var(--tinta-2); max-width: 38ch; }
.dudas__lista { grid-column: 7 / 13; border-bottom: 1px solid var(--filete-fuerte); }
.duda { border-top: 1px solid var(--filete-fuerte); }
.duda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 76px; padding: 14px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.25rem, 1.6vw, 1.4375rem); line-height: 1.3; font-weight: 400;
}
.duda summary::-webkit-details-marker { display: none; }
.duda summary:focus-visible { outline-offset: -2px; }
.duda__signo { position: relative; flex: none; width: 18px; height: 18px; }
.duda__signo::before, .duda__signo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--granate);
  transition: transform 300ms var(--ease);
}
.duda__signo::after { transform: rotate(90deg); }
.duda[open] .duda__signo::after { transform: rotate(0deg); }
.duda__resp { padding: 0 48px 28px 0; }
.duda__resp p { color: var(--tinta-2); max-width: 52ch; }
@media (prefers-reduced-motion: no-preference) {
  .duda { interpolate-size: allow-keywords; }
  .duda::details-content { block-size: 0; overflow: clip; transition: block-size 380ms var(--ease), content-visibility 380ms allow-discrete; }
  .duda[open]::details-content { block-size: auto; }
}
@media (hover: hover) and (pointer: fine) { .duda summary:hover { color: var(--granate); } }

/* La primera sesión: la escalera */
.sesion { background: var(--cal-2); }
.sesion__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px);
}
.sesion__cab { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--cab) + 32px); }
.sesion__cab p { margin-top: 22px; color: var(--tinta-2); max-width: 34ch; }
.hueco--rellano { margin-top: clamp(32px, 4vw, 48px); aspect-ratio: 4 / 3; width: 100%; background: var(--rosa); }

.escalera { --d: clamp(36px, 4.2vw, 60px); --trazo: 1.5px; grid-column: 6 / 13; padding-top: 8px; }
.peldano {
  position: relative;
  margin-left: calc(var(--n) * var(--d));
  padding: 26px 0 clamp(40px, 4.6vw, 64px) clamp(22px, 2.2vw, 32px);
}
/* Huella (horizontal, viene del peldaño anterior) y tabica (vertical, baja hasta el siguiente) */
.peldano::before, .peldano::after { content: ""; position: absolute; background: var(--granate); }
.peldano::before { top: 0; left: calc(-1 * var(--d)); width: calc(var(--d) + var(--trazo)); height: var(--trazo); transform-origin: 0 50%; }
.peldano::after { top: 0; left: 0; width: var(--trazo); height: 100%; transform-origin: 50% 0; }
.peldano__cuando { color: var(--granate); font-size: 1rem; font-weight: 500; letter-spacing: .01em; }
.peldano h3 { margin-top: 4px; font-size: clamp(1.625rem, 2.3vw, 2.125rem); line-height: 1.12; letter-spacing: -.015em; }
.peldano > p:not(.peldano__cuando) { margin-top: 10px; max-width: 40ch; color: var(--tinta-2); }
/* El rellano: el último tramo es largo y se queda en horizontal */
.peldano--rellano { padding-bottom: 0; }
.peldano--rellano::after { height: calc(100% + 34px); }
.peldano--rellano .boton { margin-top: 26px; }
.escalera::after { content: ""; display: block; height: var(--trazo); margin-left: calc(4 * var(--d)); margin-top: 34px; background: var(--granate); transform-origin: 0 50%; }

/* Motivos: franja granate */
.motivos { background: var(--granate); color: var(--sobre); }
.motivos ::selection { background: #8A4A57; color: var(--sobre); }
.motivos :focus-visible { outline-color: var(--sobre); }
.motivos__in { padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px); }
.motivos__cab { max-width: 720px; }
.motivos h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.02em; }
.motivos__cab p { margin-top: 22px; color: var(--sobre-2); max-width: 56ch; }
.motivos__lista {
  margin-top: clamp(56px, 6vw, 88px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) var(--hueco);
}
.motivos__lista li { padding-top: 18px; border-top: 1px solid rgb(246 237 234 / .24); }
.motivos__lista h3 { font-size: clamp(1.625rem, 2.2vw, 2rem); font-style: italic; line-height: 1.1; }
.motivos__lista p { margin-top: 8px; color: var(--sobre-2); font-size: 1.0625rem; line-height: 1.55; max-width: 32ch; }

/* La consulta: banda rosa */
.consulta { background: var(--rosa); }
.consulta__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: center;
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px);
}
.hueco--detalle { grid-column: 1 / 6; aspect-ratio: 4 / 5; width: 100%; max-width: 480px; background: var(--cal-2); }
.consulta__texto { grid-column: 7 / 13; }
.consulta h2 { max-width: 16ch; }
.consulta__entrada { margin-top: 22px; color: var(--tinta-2); max-width: 44ch; }
.ficha { margin-top: clamp(36px, 4vw, 52px); display: grid; gap: 0; }
.ficha div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--filete-fuerte); }
.ficha dt { font-weight: 500; color: var(--granate); }
.ficha dd { margin: 0; color: var(--tinta); font-size: 1.125rem; line-height: 1.55; }

/* Tarifas */
.tarifas__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: clamp(48px, 5vw, 72px);
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px);
}
.tarifas__cab { grid-column: 1 / 13; max-width: 760px; }
.tarifas__cab p { margin-top: 20px; color: var(--tinta-2); max-width: 46ch; }
.precios { grid-column: 1 / 8; border-top: 1.5px solid var(--granate); }
.precio { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--filete-fuerte); }
.precio dt { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; }
.precio dt span { display: block; margin-top: 2px; color: var(--tinta-2); font-size: 1rem; }
.precio dd { margin: 0; font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.precio:last-child dd { font-size: clamp(1.25rem, 1.7vw, 1.5rem); color: var(--tinta-2); }
.tarifas__notas { grid-column: 9 / 13; display: grid; gap: 30px; align-content: start; }
.nota h3 { font-size: 1.25rem; font-weight: 500; }
.nota p { margin-top: 6px; color: var(--tinta-2); }
.horario { margin-top: 8px; }
.horario div { display: grid; gap: 0; padding: 6px 0; }
.horario dt { color: var(--tinta-2); font-size: 1rem; }
.horario dd { margin: 0; font-variant-numeric: lining-nums tabular-nums; }

/* Cita: cal arriba, zócalo abajo y el formulario apoyado en la línea */
.cita { position: relative; isolation: isolate; background: var(--cal-2); }
.cita::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 46%;
  background:
    linear-gradient(var(--moldura), var(--moldura)) top / 100% 6px no-repeat,
    linear-gradient(rgb(244 241 238 / .22), rgb(244 241 238 / .22)) 0 10px / 100% 1px no-repeat,
    var(--granate);
}
.cita__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: start;
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(72px, 8vw, 120px);
}
.cita__texto { grid-column: 1 / 6; }
.cita__texto > p { margin-top: 22px; color: var(--tinta-2); max-width: 40ch; }
.cita__urgente { margin-top: 28px !important; padding-top: 18px; border-top: 1px solid var(--filete-fuerte); font-size: 1.0625rem; }
.cita__urgente a { color: var(--tinta); font-weight: 500; }
a[href^="tel:"] { white-space: nowrap; }
.formulario {
  grid-column: 7 / 13;
  display: grid; gap: 20px;
  padding: clamp(28px, 3.2vw, 44px);
  border-radius: var(--radio);
  background: var(--cal);
  box-shadow: 0 1px 0 rgb(42 30 34 / .06), 0 34px 70px -40px rgb(42 30 34 / .6);
}
.campo { display: grid; gap: 8px; }
.campo label, .opciones legend { font-size: 1.0625rem; font-weight: 500; }
.campo label span { font-weight: 400; color: var(--tinta-2); }
.campo input, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--filete-fuerte); border-radius: var(--radio);
  background: #FBF8F7; color: var(--tinta); font-size: 1.125rem; line-height: 1.4;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--granate); box-shadow: 0 0 0 3px rgb(90 39 49 / .16); }
.campo input[aria-invalid="true"] { border-color: #A3283A; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.opciones { margin: 0; padding: 0; border: 0; min-width: 0; }
.opciones legend { padding: 0; margin-bottom: 8px; }
.opcion { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.opcion input, .consentimiento input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--granate); }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: 1.0625rem; line-height: 1.45; color: var(--tinta-2); cursor: pointer; }
.consentimiento input { margin-top: 2px; }
.formulario .boton { justify-self: start; }
.formulario__aviso { min-height: 1.5em; font-size: 1.0625rem; color: var(--granate); }
.formulario__aviso.es-error { color: #A3283A; }

/* Pie */
.pie { background: var(--granate-hondo); color: var(--sobre-2); }
.pie :focus-visible { outline-color: var(--sobre); }
.pie__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 40px; padding-bottom: 88px; font-size: 1.0625rem; }
.pie__marca { color: var(--sobre); font-weight: 500; }
.pie nav { margin-left: auto; }
.pie ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pie a { color: inherit; text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: var(--sobre); } }

/* ---------- Movimiento (solo con html.mov) ---------- */
/* Portada: la frase se escribe sola (el JS la vacía y la va completando); la foto aparece una vez */
.mov:not(.mov-listo) .portada__motivo { visibility: hidden; }
.mov .portada__motivo .l { opacity: 0; filter: blur(5px); animation: rellano-letra 900ms var(--ease-lenta) forwards; animation-delay: calc(var(--i) * 34ms); }
.mov .portada__motivo.sale { opacity: 0; filter: blur(3px); transition: opacity 420ms ease, filter 420ms ease; }
.mov .hueco--sala { animation: rellano-aparece 1400ms var(--ease) 150ms both; }
@keyframes rellano-letra { to { opacity: 1; filter: blur(0); } }
@keyframes rellano-aparece { from { opacity: 0; transform: translateY(14px); } }

/* Escalera: el JS marca los peldaños por ver; al entrar se traza la huella, luego la tabica y aparece el texto */
.mov .peldano.por-ver::before { transform: scaleX(0); }
.mov .peldano.por-ver::after { transform: scaleY(0); }
.mov .peldano.por-ver > * { opacity: 0; }
.mov .peldano.por-ver::before { transition: transform 700ms var(--ease); }
.mov .peldano.por-ver::after { transition: transform 1100ms var(--ease-lenta) 450ms; }
.mov .peldano.por-ver > * { transition: opacity 900ms ease 260ms; }
.mov .peldano.por-ver.es-visto::before { transform: none; }
.mov .peldano.por-ver.es-visto::after { transform: none; }
.mov .peldano.por-ver.es-visto > * { opacity: 1; }
.mov .escalera.por-ver::after { transform: scaleX(0); transition: transform 1200ms var(--ease) 600ms; }
.mov .escalera.por-ver.es-visto::after { transform: none; }

/* ---------- Tableta ---------- */
@media (max-width: 1080px) {
  .cabecera__nav { display: none; }
  .portada__texto { grid-column: 1 / 8; }
  .hueco--sala { grid-column: 8 / 13; }
  .portada__in { min-height: 0; }
  .sesion__cab { grid-column: 1 / 13; position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--hueco); align-items: start; }
  .sesion__cab h2, .sesion__cab > p { grid-column: 1; }
  .hueco--rellano { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .escalera { grid-column: 1 / 13; margin-top: 56px; }
  .motivos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .precios { grid-column: 1 / 13; }
  .tarifas__notas { grid-column: 1 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--hueco); }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  body { font-size: 1.125rem; }
  :root { --cab: 64px; }
  .marca__sub { display: none; }
  .boton--cabecera { min-height: 40px; padding: 0 14px; font-size: .9375rem; }
  .portada { --zocalo: 150px; }
  .portada__in { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: 36px; padding-top: 28px; padding-bottom: 40px; }
  .portada__texto { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .portada__titulo { font-size: clamp(2.5rem, 11.4vw, 3.25rem); line-height: 1.06; }
  .hueco--sala { grid-column: 1; grid-row: 2; width: 82%; max-height: none; justify-self: end; aspect-ratio: 4 / 4.4; }
  .portada__dato { grid-column: 1; grid-row: 3; padding-top: 0; }
  .dudas__in, .sesion__in, .consulta__in, .tarifas__in, .cita__in { grid-template-columns: 1fr; }
  .dudas__cab, .dudas__lista, .consulta__texto, .hueco--detalle, .precios, .tarifas__notas, .cita__texto, .formulario { grid-column: 1; }
  .dudas__cab { position: static; }
  .dudas__lista { margin-top: 40px; }
  .duda summary { min-height: 68px; }
  .duda__resp { padding-right: 8px; }
  .sesion__cab { grid-template-columns: 1fr; }
  .hueco--rellano { grid-column: 1; grid-row: auto; margin-top: 32px; }
  .escalera { --d: 16px; margin-top: 48px; }
  .peldano { padding-left: 20px; }
  .motivos__lista { grid-template-columns: 1fr; gap: 28px; }
  .hueco--detalle { max-width: none; aspect-ratio: 4 / 3.4; }
  .consulta__texto { margin-top: 44px; }
  .ficha div { grid-template-columns: 1fr; gap: 4px; }
  .tarifas__notas { grid-template-columns: 1fr; }
  .precio { flex-wrap: wrap; gap: 6px 24px; }
  .cita::after { height: 38%; }
  .formulario { margin-top: 40px; padding: 24px 20px; }
  .formulario__fila { grid-template-columns: 1fr; }
  .pie nav { margin-left: 0; }
  /* Una sola columna: nadie abarca 1 / 13 (crearía columnas implícitas) */
  .portada__in > *, .dudas__in > *, .sesion__in > *, .consulta__in > *, .tarifas__in > *, .cita__in > * { grid-column: 1 / -1; }
}