/* Maripaz · psicóloga general sanitaria y terapeuta EMDR
   Formato de la referencia: cada sección es una banda con su propio fondo,
   márgenes laterales de 80 px en escritorio y el título a la izquierda con el texto a la derecha.
   Color: la paleta de la clienta llevada a tonos más hondos. El suelo es casi blanco;
   el verde profundo hace de noche y de mar, y el coral es el sol: el acento que se repite. */

/* ---------- tokens ---------- */
:root {
  /* paleta: el azul del mar en calma (Mari-paz) y el coral del sol */
  --bg: #fdfbf8;          /* blanco cálido: el suelo de casi todas las secciones */
  --tint: #eef1fb;        /* un velo azul muy claro para separar sin cambiar de color */
  --sand: #f6ece3;        /* arena: mandos pequeños */
  --peach: #f7c6a8;
  --coral: #f07a5a;       /* el sol: el acento de toda la web (solo en formas o sobre oscuro) */
  --terra: #b2462a;       /* coral hondo: texto de acento sobre claro */
  --gold: #f5c46a;
  --sky: #a8b9f4;
  --periwinkle: #6c84e4;
  --mist: #e3e9fc;
  --indigo: #3b4bb0;
  --navy: #22306e;        /* títulos, botones y enlaces */
  --deep: #161f4a;        /* las bandas oscuras: el mar de noche */
  --cielo: #4b68d9;       /* el cielo de la lámina del inicio, arriba: la barra y el fondo de la portada lo toman */
  --ink: #141a38;         /* el texto corrido */
  --on-dark: #fff6ee;

  /* nombres por función (el resto de la hoja los usa) */
  --minor: var(--sand);
  --accent: var(--coral);
  --font: var(--navy);
  --ink-strong: var(--deep);
  --muted: var(--navy);
  --shade: var(--deep);
  /* sombra solo al levantar un dibujo: azul, no negra */
  --shadow-hover: 0 2.5rem 3rem -1.75rem rgb(34 48 110 / 0.45);

  --font-display: "Imbue", "Times New Roman", serif;
  --font-text: "Albert Sans", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-statement: clamp(1.5rem, 1.05rem + 1.5vw, 2.25rem);
  --step-head: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);

  --margin: clamp(1.25rem, 5.56vw, 5rem);      /* 80 px a 1440, como la referencia */
  --bar-pad: clamp(1.25rem, 3.4vw, 3rem);      /* la barra va algo más abierta que el contenido */
  --gutter: clamp(1rem, 2.2vw, 2rem);
  --section: clamp(4.5rem, 7vw, 6.25rem);      /* unos 100 px arriba y abajo de cada banda */
  --radius: clamp(1rem, 2.5vw, 2.25rem);
  --radius-s: 0.75rem;
  --bar: 4.5rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; background: var(--mist); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: var(--bar); }
::selection { background: var(--accent); color: var(--ink-strong); }
:focus-visible { outline: 2px solid var(--font); outline-offset: 3px; }
.band--deep :focus-visible { outline-color: var(--gold); }
[hidden] { display: none !important; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
.head { color: var(--font); font-family: var(--font-display); font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.01em; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
p { max-width: 60ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }

/* ---------- layout: bandas y rejilla ---------- */
.wrap { padding-inline: var(--margin); }
.band { padding-block: var(--section); }
.band--tint { background: var(--tint); }
/* La banda honda: la noche y el mar. Los tokens se giran dentro para que todo lo de dentro lea sobre oscuro */
.band--deep { position: relative; background: var(--deep); color: var(--on-dark); --font: #ffe0cc; --ink: var(--on-dark); --minor: rgb(255 246 236 / 0.12); }
.band--deep .button { background: var(--coral); color: var(--deep); }
.band--deep .button--light { background: var(--on-dark); color: var(--deep); }

/* Un antetítulo con el sol delante: el acento que une todas las secciones */
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; color: var(--terra); font-size: var(--step-small); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0.3rem rgb(240 122 90 / 0.18); }
.band--deep .eyebrow { color: var(--gold); }
/* una palabra del título en el color del sol */
.head em, .hero__title em { font-style: normal; color: var(--terra); }
.band--deep .head em { color: var(--coral); }



/* Título a la izquierda y texto a la derecha, como «Nuestros servicios» en la referencia */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.split > :first-child { grid-column: 1 / span 6; }
.split > :last-child { grid-column: 7 / -1; padding-top: 0.5rem; }
@media (max-width: 47.99em) {
  .split { display: block; }
  .split > :last-child { padding-top: 0; margin-top: 1.25rem; }
}

/* ---------- controls ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.6rem; border-radius: 999px;
  background: var(--font); color: var(--on-dark);
  font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button--light { background: var(--bg); color: var(--font); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
/* «Ver más →» de la referencia */
.arrow { display: inline-block; padding-block: 0.6rem; font-weight: 500; text-decoration: none; }
.arrow { transition: color var(--t-hover) ease; }
.arrow::after { content: "→"; display: inline-block; margin-left: 0.5rem; color: var(--coral); transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--ink); transform: translateY(-2px); }
  .button--light:hover { background: var(--accent); color: var(--ink-strong); }
  .band--deep .button:hover { background: var(--gold); }
  .arrow:hover { color: var(--terra); }
  .band--deep .arrow:hover { color: var(--gold); }
  .link:hover { text-decoration-color: currentColor; }
  .arrow:hover::after { transform: translateX(0.35rem); }
}

/* oculto hasta que llega el foco del teclado */
.skip { position: absolute; left: var(--margin); top: var(--margin); z-index: 30; padding: 0.75rem 1rem; background: var(--ink); color: var(--bg); clip-path: inset(50%); white-space: nowrap; }
.skip:focus { clip-path: none; }

/* ---------- barra superior: siempre sólida, menú en el centro ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 2rem;
  height: var(--bar); padding-inline: var(--bar-pad);
  background: var(--bg); color: var(--ink); font-size: var(--step-body);
}
.bar__mark { color: var(--font); font-family: var(--font-display); font-size: var(--step-lead); text-transform: uppercase; text-decoration: none; letter-spacing: 0.02em; }
.bar__nav { display: flex; gap: 1.75rem; margin-inline: auto; white-space: nowrap; }
.bar__nav a[aria-current="page"] { text-decoration-color: currentColor; }
.bar__action { min-height: 2.5rem; font-size: var(--step-small); }
.bar__menu { display: none; min-height: 2.75rem; margin-left: auto; font-size: var(--step-body); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
/* En la portada se funde con la lámina: toma el azul de arriba de su cielo, con todo en claro, y se vuelve blanca al dejarla atrás.
   Sin JavaScript no hay quien lo sepa: se queda blanca siempre. */
.bar, .bar__mark { transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.js .bar--escena:not(.is-solid) { background: var(--cielo); color: var(--on-dark); }
.js .bar--escena:not(.is-solid) .bar__mark { color: var(--on-dark); }
.js .bar--escena:not(.is-solid) .bar__action { background: var(--bg); color: var(--font); }
.js .bar--escena:not(.is-solid) :focus-visible { outline-color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
  .js .bar--escena:not(.is-solid) .bar__action:hover { background: var(--accent); color: var(--ink-strong); }
}

.sheet { position: fixed; inset: 0; z-index: 25; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; padding: 0 var(--margin) 2rem; overflow-y: auto; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; height: var(--bar); }
.sheet__top .bar__menu { display: inline-flex; align-items: center; margin-left: 0; }
.sheet__mark { color: var(--font); font-family: var(--font-display); font-size: var(--step-lead); text-transform: uppercase; letter-spacing: 0.02em; }
.sheet__nav { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2.5rem; }
.sheet__nav a { color: var(--font); font-family: var(--font-display); font-size: var(--step-head); line-height: 1.1; text-decoration: none; }
.sheet__contact { margin-top: auto; padding-bottom: 1.5rem; line-height: 1.7; }

@media (max-width: 63.99em) {
  .bar__action { display: none; }
  .bar__nav { margin-inline: auto 0; }
}
@media (max-width: 47.99em) {
  .bar__nav { display: none; }
  .bar__menu { display: inline-flex; align-items: center; }
}

/* Botón de llamada fijo, dentro del margen derecho para no tapar nunca el contenido */
.call {
  position: fixed; right: calc((var(--margin) - 3.25rem) / 2); bottom: 2rem; z-index: 15;
  display: none; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--font); color: var(--on-dark);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease, color var(--t-ui) ease;
}
/* cambia de color según lo que tenga detrás (lo decide el JavaScript): crema sobre los azules, naranja sobre la noche */
.call[data-tono="claro"] { background: var(--on-dark); color: var(--deep); }
.call[data-tono="sol"] { background: var(--coral); color: var(--deep); }
.call svg { width: 1.3rem; height: 1.3rem; }
.call:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .call:hover { transform: scale(1.08); } }
@media (min-width: 80em) { .call { display: grid; } }

/* Los dibujos: llegan como <img> y el script los mete en línea dentro de un .art para poder mover sus capas.
   Cada capa lleva --z (0 el cielo, 3 lo más cercano): al aparecer suben y se encienden por orden,
   y al pasar el ratón se separan, las cercanas más que las lejanas. */
.art { display: block; overflow: hidden; }
/* Las láminas dibujadas (imagen) llevan encima un SVG con lo que se mueve: el sol que late, las estrellas, la luz del faro.
   Usa el mismo encuadre que la imagen (cover, centrado), así cada brillo cae en su sitio. */
.ilus { position: relative; display: block; overflow: hidden; }
.ilus > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: inherit; }
.brillo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.brillo-aro { fill: none; stroke: #ffd9c9; stroke-width: 10; opacity: 0; transform-box: fill-box; transform-origin: center; }
.brillo-estrella { fill: #fff6ee; opacity: 0; }
.brillo-haz { fill: #fff3d9; opacity: 0; }
.brillo-luz { fill: #fff3d0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .brillo-aro { animation: brillo-aro 4.4s ease-out infinite; }
  .brillo-estrella { animation: brillo-estrella 3.6s ease-in-out infinite; }
  .brillo-haz { animation: brillo-haz 4s ease-in-out infinite alternate; }
  .brillo-luz { animation: brillo-luz 2.4s ease-in-out infinite; }
}
@keyframes brillo-aro { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes brillo-estrella { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }
@keyframes brillo-haz { from { opacity: 0; } to { opacity: .45; } }
@keyframes brillo-luz { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }
.art > svg { display: block; width: 100%; height: 100%; }
.art .capa {
  transform: translate(calc(var(--mx, 0) * var(--z, 0) * 7px), calc(var(--my, 0) * var(--z, 0) * 5px + var(--ey, 0px)));
  transition: transform 900ms var(--ease-out), opacity 700ms ease;
  transition-delay: var(--ed, 0ms);
}
@media (prefers-reduced-motion: no-preference) {
  .art.is-waiting .capa { --ey: calc(1.5rem + var(--z, 0) * 1rem); opacity: 0; }
  .art .capa { --ed: calc(var(--z, 0) * 110ms + 80ms); }
  .art.is-settled .capa { --ed: 0ms; transition-duration: 500ms; }
}

/* El arco: la forma de un sol que sale, la misma en todos los dibujos del sitio */
.arch { border-radius: 50% 50% var(--radius-s) var(--radius-s) / 40% 40% var(--radius-s) var(--radius-s); }
.rings { pointer-events: none; }

/* ---------- 1. inicio: texto a la izquierda, el mar en un arco a la derecha ---------- */
/* casi blanco, con la luz del sol entrando por la derecha */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: calc(100svh - var(--bar)); padding-block: clamp(2.5rem, 7vh, 5rem); }
.hero__text { grid-column: 1 / span 6; position: relative; z-index: 1; }
.hero__name {
  color: var(--font); font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  /* «MARIPAZ» mide 2,29 em en Imbue: ocupa el ancho en el móvil y se queda en 184 px en pantallas grandes */
  font-size: min(calc((100vw - 2 * var(--margin)) / 2.29), 11.5rem);
  line-height: 0.8; letter-spacing: -0.01em;
  margin-left: -0.035em; white-space: nowrap;
  transform-origin: 0 100%;
}
.hero__name .line, .hero__title .line { padding-top: 0.06em; }
.hero__title { color: var(--font); font-family: var(--font-display); font-size: clamp(3.5rem, 1.5rem + 6vw, 7.5rem); line-height: 0.9; letter-spacing: -0.01em; }
.hero__role { margin-top: 1.75rem; font-size: var(--step-lead); line-height: 1.3; }
.hero__intro { margin-top: 0.75rem; max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.hero__media { grid-column: 7 / -1; position: relative; display: grid; place-items: center; align-self: stretch; }
.hero__rings { position: absolute; top: 50%; left: 50%; width: 125%; max-width: none; transform: translate(-50%, -50%); color: var(--mist); }
/* El escenario: el arco y lo que se sale de él (la nube y los pájaros), cada cosa a su profundidad */
.hero__stage { position: relative; width: min(100%, 32rem); }
.hero__arch {
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist);
  border-radius: 50% 50% var(--radius-s) var(--radius-s) / 40% 40% var(--radius-s) var(--radius-s);
  translate: calc(var(--px, 0) * -8px) calc(var(--py, 0) * -6px); transition: translate 700ms var(--ease-out);
}
.float { position: absolute; z-index: 2; pointer-events: none; translate: calc(var(--px, 0) * var(--d, 1) * 22px) calc(var(--py, 0) * var(--d, 1) * 16px); transition: translate 700ms var(--ease-out); }
.float--cloud { --d: 0.8; top: 24%; left: -5%; width: clamp(6rem, 12vw, 10rem); }
.float--birds { --d: 2; top: 12%; left: 8%; width: clamp(3.5rem, 6vw, 5rem); color: var(--deep); }
.float--birds path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .float--cloud { animation: sail 11s ease-in-out infinite alternate; }
  .float--birds path { animation: flap 0.9s ease-in-out infinite alternate; }
  .float--birds path + path { animation-delay: -0.4s; }
}
@keyframes sail { from { transform: translateX(-12px); } to { transform: translateX(16px); } }
@keyframes flap { to { transform: scaleY(0.35); } }
.hero__drift { position: relative; }
.hero__drift, .hero__drift > * { width: 100%; height: 100%; }
.hero__drift > img { display: block; object-fit: cover; background: var(--mist); }

@media (max-width: 47.99em) {
  .hero__grid { display: block; min-height: 0; padding-block: 2.5rem 3rem; }
  .hero__role { margin-top: 1.25rem; }
  .hero__media { margin-top: 2.75rem; }
  .hero__stage { width: min(100% - 2rem, 22rem); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero__text { grid-column: 1 / span 7; }
  .hero__media { grid-column: 8 / -1; }
}

/* La portada: la lámina del mar de fondo entero, también bajo la barra, y el texto en claro encima del cielo.
   En la lámina el cielo pasó a un azul hondo para que el texto se lea; el sol, las nubes, la mujer y el mar siguen como eran. */
.hero--escena { margin-top: calc(-1 * var(--bar)); background: var(--cielo); color: var(--on-dark); isolation: isolate; }
.hero--escena .hero__grid { min-height: 100svh; padding-top: calc(var(--bar) + clamp(2.5rem, 7vh, 5rem)); }
.hero--escena .hero__name { color: var(--on-dark); }
.hero--escena :focus-visible { outline-color: var(--on-dark); }
/* Un «cover» hecho a mano, para que el brillo del sol y la nube caigan siempre en su sitio:
   la lámina (de 1672 × 941) mide --w de ancho y --fx / --fy eligen con qué parte se queda (0 = izquierda o arriba, 1 = derecha o abajo) */
.hero__fondo {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size;
  --w: max(100cqw, 100cqh * 1672 / 941); --fx: 0.8; --fy: 0.7;
  --x: calc((100cqw - var(--w)) * var(--fx));
  --y: calc((100cqh - var(--w) * 941 / 1672) * var(--fy));
}
.hero__lamina { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1672 / 941; }
.hero__lamina > img, .hero__lamina > .brillo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__lamina > img { background: var(--cielo); }
/* La nube grande: en su sitio de la lámina, salvo que fuera a quedar detrás del nombre; entonces se aparta a su derecha */
.hero__nube {
  --tras-nombre: calc(var(--margin) + min(100cqw - 2 * var(--margin), 26.4rem) + 1.5rem);
  position: absolute; width: calc(var(--w) * 0.1794); height: auto; background: none;
  left: max(calc(var(--x) + var(--w) * 0.4498), var(--tras-nombre));
  top: calc(var(--y) + var(--w) * 0.1471);
}
@media (prefers-reduced-motion: no-preference) { .hero__nube { animation: sail 11s ease-in-out infinite alternate; } }
/* En vertical (el móvil y la tableta de pie) no hay sitio al lado del texto: el texto va arriba, sobre el cielo liso,
   y la escena debajo, apoyada en el borde de abajo, con la mujer y el sol a la vista. --k es cuántas veces el ancho de la
   pantalla mide la lámina; el hueco de abajo deja ver su 80 % inferior y su cielo de arriba, liso, se funde con el fondo. */
@media (max-width: 47.99em), (max-width: 63.99em) and (orientation: portrait) {
  .hero--escena { --k: 2.4; }
  .hero--escena .hero__grid { display: block; padding-top: calc(var(--bar) + 1.75rem); padding-bottom: calc(100vw * var(--k) * 941 / 1672 * 0.8); }
  .hero--escena .hero__fondo { --w: calc(100cqw * var(--k)); --fx: 0.79; --fy: 1; }
  .hero--escena .hero__nube { --tras-nombre: -100vw; }
}
@media (min-width: 48em) and (max-width: 63.99em) and (orientation: portrait) {
  .hero--escena { --k: 1.8; }
  .hero--escena .hero__fondo { --fx: 0.94; }
}

/* ---------- 3. terapia: tres columnas, como en la referencia ---------- */
.services__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(2rem, 4.4vw, 4rem); margin-top: clamp(3rem, 5vw, 4.5rem); }
/* cada dibujo sale como un sol: arco arriba, horizonte recto abajo. El arco copia el de las láminas */
.service__photo { width: 100%; aspect-ratio: 616 / 546; object-fit: cover; border-radius: 50% 50% var(--radius-s) var(--radius-s) / 48% 48% var(--radius-s) var(--radius-s); transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .service:hover .service__photo { transform: translateY(-12px) rotate(-1.5deg); box-shadow: var(--shadow-hover); }
  .service:nth-child(2):hover .service__photo { transform: translateY(-12px) rotate(1.5deg); }
  /* lo mismo en el resto de dibujos que se pueden señalar */
  .about__frame, .faq__photo, .page-what__photo, .page-pair__photo, .start__photo, .help__media { transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
  .about__frame:hover, .faq__photo:hover, .page-what__photo:hover, .page-pair__photo:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
  .start__photo:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
  /* en las láminas, el dibujo se acerca un poco dentro de su marco (con sus brillos encima) */
  .ilus > img, .ilus > .brillo { transition: transform 1200ms var(--ease-out); }
  .faq__photo.ilus:hover > *, .start__photo.ilus:hover > * { transform: scale(1.045); }
}
.service__title { margin-top: 1.5rem; color: var(--font); font-family: var(--font-display); font-size: var(--step-statement); line-height: 1.05; }
.service p { margin-top: 0.6rem; max-width: 36ch; }
.service .arrow { margin-top: 0.5rem; }

@media (max-width: 47.99em) {
  .services__list { grid-template-columns: 1fr; gap: 3.5rem; }
}

/* ---------- 4. sobre mí, en breve ---------- */
/* la lámina de detrás se sale del marco: se recorta en el borde para que el móvil no se desplace de lado */
.about { overflow-x: clip; }
.about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.about__media { grid-column: 1 / span 5; margin: 0; position: relative; isolation: isolate; }
/* detrás, el sol asomando por el hombro de la ventana; al bajar se mueve más despacio que ella */
.about__media::before { content: ""; position: absolute; z-index: -1; top: -5%; right: -7%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }
/* Su retrato en una ventana en arco, como la del dibujo que había: el marco azul cielo la despega del gris claro de la pared.
   Marco y foto se mueven juntos al bajar y al pasar el ratón. */
.about__frame { --mat: clamp(0.55rem, 0.9vw, 0.85rem); display: block; padding: var(--mat); background: var(--sky); border-radius: 50% 50% calc(var(--radius-s) + var(--mat)) calc(var(--radius-s) + var(--mat)) / 40% 40% calc(var(--radius-s) + var(--mat)) calc(var(--radius-s) + var(--mat)); }
.about__photo { display: block; width: 100%; aspect-ratio: 4 / 5.1; object-fit: cover; object-position: 50% 12%; border-radius: 50% 50% var(--radius-s) var(--radius-s) / 40% 40% var(--radius-s) var(--radius-s); background: #e3e4e8; }
.about__body { grid-column: 7 / -1; }
.about__text { margin-top: 1.5rem; }
.about__quote { position: relative; margin-top: 1.75rem; padding-left: 3.25rem; }
.about__quote::before { content: "“"; position: absolute; left: 0; top: -0.2em; color: var(--coral); font-family: var(--font-display); font-size: var(--step-head); line-height: 1; }
.about__quote p { font-weight: 500; }
.about__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--gutter); margin-top: 2.25rem; }
.about__facts dt { font-size: var(--step-small); color: var(--terra); }
.about__facts dd { font-weight: 500; }

@media (max-width: 47.99em) {
  .about__grid { display: block; }
  .about__media { width: min(100%, 22rem); }
  .about__body { margin-top: 2.5rem; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .about__body { grid-column: 6 / -1; }
}
/* en tableta y móvil el sol se queda dentro de su columna, sin rozar el texto ni el borde */
@media (max-width: 63.99em) {
  .about__media::before { right: -3%; }
}

/* ---------- 5. en qué puedo ayudarte: dibujo fijo en arco y la lista que lo cambia ---------- */
.help__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin-top: clamp(3rem, 5vw, 4.5rem); }
/* una tarjeta de esquinas suaves con una lámina plana detrás, desplazada: profundidad sin sombras */
.help__media { grid-column: 1 / span 5; position: sticky; top: calc(var(--bar) + 2rem); aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--bg); box-shadow: 1rem 1rem 0 color-mix(in srgb, var(--sky) 55%, var(--tint)); }
.help__media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 450ms ease, transform 1100ms var(--ease-out); background: var(--bg); }
.help__media > .is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .help__media > * { transform: none; } }
.help__rows { grid-column: 7 / -1; }
.help__row { position: relative; padding-block: 1.1rem; padding-left: 1.25rem; cursor: default; }
/* la fila activa lleva el sol al lado */
.help__row::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--coral); opacity: 0; transform: scale(0.3); transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.help__row:first-child::before { top: 0.45rem; }
.help__row.is-active::before { opacity: 1; transform: none; }
.help__row:first-child { padding-top: 0; }
.help__row h3 { color: var(--font); font-size: var(--step-lead); line-height: 1.25; transition: color var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
.help__row p { margin-top: 0.4rem; max-width: 46ch; line-height: 1.5; }
.help__row.is-active h3 { color: var(--terra); transform: translateX(0.5rem); }
/* por debajo de 24 px el verde Font no llega al contraste: las filas van en el verde hondo */
@media (max-width: 63.99em) { .help__row h3 { color: var(--ink); } .help__row.is-active h3 { color: var(--terra); } }

@media (max-width: 47.99em) {
  .help__grid { display: block; }
  .help__media { top: var(--bar); z-index: 1; aspect-ratio: auto; height: 34svh; border-radius: var(--radius-s); box-shadow: none; }
  .help__rows { margin-top: 2rem; }
  .help__row.is-active h3 { transform: none; }
}

/* Fija: al llegar, la rejilla se queda quieta y cada tramo de scroll pasa al motivo siguiente; tras el último, la página sigue.
   La lista se pliega (solo el motivo activo enseña su texto) para caber entera junto al dibujo.
   La pone el JavaScript solo si cabe en la pantalla; si no, todo va suelto como arriba. */
.help.is-fijo .help__pista { height: calc(100svh - var(--bar) + var(--extra, 0px)); margin-top: clamp(1rem, 3vw, 2rem); }
.help.is-fijo .help__grid { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); margin-top: 0; align-items: center; align-content: center; }
.help.is-fijo .help__media { position: relative; top: auto; }
.help.is-fijo .help__row { display: grid; grid-template-rows: auto 0fr; cursor: pointer; transition: grid-template-rows 500ms var(--ease-out); }
.help.is-fijo .help__row.is-active { grid-template-rows: auto 1fr; }
.help.is-fijo .help__row p { margin-top: 0; min-height: 0; overflow: hidden; opacity: 0; transition: opacity 250ms ease; }
.help.is-fijo .help__row.is-active p { opacity: 1; transition-delay: 150ms; }
.help.is-fijo .help__row h3 { transition: color var(--t-hover) ease, transform var(--t-ui) var(--ease-out), margin var(--t-ui) var(--ease-out); }
.help.is-fijo .help__row.is-active h3 { margin-bottom: 0.4rem; }
.help.is-midiendo .help__row, .help.is-midiendo .help__row > * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .help.is-fijo .help__row, .help.is-fijo .help__row > * { transition: none; } }
@media (hover: hover) and (pointer: fine) { .help.is-fijo .help__row:not(.is-active):hover h3 { color: var(--terra); } }
/* en el móvil, el dibujo arriba y la lista debajo, más apretada */
@media (max-width: 47.99em) {
  .help.is-fijo .help__grid { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 1.25rem; }
  .help.is-fijo .help__media { flex: none; height: 30svh; z-index: auto; }
  .help.is-fijo .help__rows { margin-top: 0; }
  .help.is-fijo .help__row { padding-block: 0.45rem; }
  .help.is-fijo .help__row::before { top: 0.95rem; }
  .help.is-fijo .help__row:first-child::before { top: 0.5rem; }
  .help.is-fijo .help__row h3 { font-size: var(--step-body); font-weight: 500; }
}
/* móviles bajos: el dibujo más corto y las filas más juntas, para que también quepa fija */
@media (max-width: 47.99em) and (max-height: 46em) {
  .help.is-fijo .help__grid { gap: 0.9rem; }
  .help.is-fijo .help__media { height: 24svh; }
  .help.is-fijo .help__row { padding-block: 0.3rem; }
  .help.is-fijo .help__row::before { top: 0.8rem; }
  .help.is-fijo .help__row:first-child::before { top: 0.45rem; }
  .help.is-fijo .help__row p { line-height: 1.45; }
}

/* ---------- 6. una pausa: el dibujo ancho con la invitación en medio ---------- */
.pause { padding-block: clamp(0.75rem, 2.3vw, 2.1rem); }
.pause__frame { position: relative; display: grid; place-items: center; min-height: clamp(24rem, 38vw, 34rem); margin-inline: clamp(0.75rem, 2.3vw, 2.1rem); overflow: hidden; border-radius: var(--radius); background: var(--shade); }
.pause__photo { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--font); container-type: size; --encuadre: 0.15; }
/* la lámina es muy ancha (3:1): se encuadra a mano, igual para la imagen y para sus brillos,
   con la persona siempre dentro (--encuadre: 0 es el borde izquierdo, 1 el derecho) */
.pause__photo > img, .pause__photo > .brillo {
  position: absolute; top: 50%; left: calc((100cqw - max(100cqw, 300cqh)) * var(--encuadre));
  width: max(100cqw, 300cqh); max-width: none; height: auto; aspect-ratio: 3 / 1; translate: 0 -50%;
}
/* el cielo dibujado ya es oscuro: el texto crema lee sin velo; en pantallas estrechas el sol puede quedar debajo y se apaga un poco */
@media (max-width: 63.99em) { .pause__frame::after { content: ""; position: absolute; inset: 0; background: rgb(22 31 74 / 0.35); } }
/* en el móvil solo cabe una parte del dibujo: la de la persona en la orilla */
@media (max-width: 47.99em) { .pause__photo { --encuadre: 0.02; } }
.pause__body { position: relative; z-index: 1; max-width: 50rem; padding: 3rem var(--margin); text-align: center; color: var(--on-dark); }
.pause__body .head { color: var(--on-dark); }
.pause__body .head em { color: var(--gold); }
.pause__body .lead { margin: 1rem auto 0; }
.pause__body .button { margin-top: 2rem; }

/* ---------- 7. opiniones ---------- */
.reviews { text-align: center; }
.reviews__stars { width: 7.5rem; height: auto; margin: 0 auto 1.5rem; color: var(--coral); }
.reviews__title { max-width: 20ch; margin-inline: auto; }
.reviews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 72rem; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; text-align: left; }
.review { padding: 1.75rem 1.75rem 2.25rem; border-radius: var(--radius); background: var(--bg); color: var(--ink); border: 1px solid rgb(34 48 110 / 0.1); transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .review:hover { transform: translateY(-6px); } }
.review__who { font-weight: 500; }
.review__stars { width: 5rem; height: auto; margin-top: 0.4rem; color: var(--accent); }
.review__text { margin-top: 1.25rem; }
.reviews__action { margin-top: 2.5rem; }

@media (max-width: 63.99em) {
  .reviews__list { grid-template-columns: 1fr; max-width: 36rem; }
}

/* ---------- 8. EMDR en la portada: una sola pantalla ---------- */
/* Como la referencia: el texto a la izquierda, con el título en dos líneas, y la lámina grande a la derecha
   con los mandos flotando sobre el mar. La columna del texto ocupa un tercio y la lámina, dos. */
.emdr-intro { position: relative; overflow-x: clip; min-height: calc(100svh - var(--bar)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.5rem, 6vh, 4rem); }
.emdr-intro__grid { display: grid; grid-template-columns: minmax(19.5rem, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.emdr-intro__title { width: fit-content; font-size: min(clamp(3.25rem, 1.6rem + 5.2vw, 7rem), 12.5svh); line-height: 0.92; }
.emdr-intro__title em { display: block; }
.emdr-intro__sub { margin-top: clamp(1.25rem, 3vh, 2rem); }
.emdr-intro__brief { margin-top: 1rem; max-width: 40ch; }
/* «Qué es y cómo funciona»: solo subrayado y la flecha, sin marco, a la izquierda */
.emdr-intro__more { justify-self: start; margin-top: clamp(1.25rem, 3.5vh, 2.25rem); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.07em; }

/* El sello de la OMS: ahora solo en la entrada de la página EMDR, en la esquina de arriba del arco */
.seal {
  position: absolute; z-index: 2; top: -2.75rem; right: calc(var(--margin) * -0.45);
  width: 11rem; max-width: none; aspect-ratio: 1; padding: 1.4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--ink-strong); transform: rotate(-10deg);
  transition: transform var(--t-ui) var(--ease-out);
}
.seal__shape { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: var(--accent); }
.seal__small { font-size: var(--step-small); line-height: 1.25; font-weight: 500; }
.seal__big { font-family: var(--font-display); font-size: var(--step-statement); line-height: 1; margin-bottom: 0.2rem; }
@media (hover: hover) and (pointer: fine) { .seal:hover, .js .seal[data-reveal].is-in:hover { transform: rotate(-4deg) scale(1.04); } }
.seal--hero { top: -1.5rem; left: -12%; right: auto; bottom: auto; }
@media (max-width: 63.99em) { .seal--hero { top: -0.5rem; left: -0.25rem; } }

/* El escenario: cielo crema sobre un mar dibujado, y el sol que recorre el horizonte, a media altura como en la referencia */
.luz { --ink: #141a38; --font: #22306e; --pad: clamp(1rem, 2.6vw, 2.25rem); --sky: 50%; position: relative; height: clamp(25rem, 37vw, calc(100svh - var(--bar) - 8rem)); overflow: hidden; border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.luz__label { position: absolute; z-index: 1; top: var(--pad); left: var(--pad); right: var(--pad); }
.luz__title { color: var(--font); font-family: var(--font-display); font-size: var(--step-statement); line-height: 1; }
.luz__count { margin-top: 0.4rem; font-size: var(--step-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.luz__sea { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - var(--sky)); background: var(--ink); }
.luz__waves { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.luz__track { position: absolute; z-index: 1; left: var(--pad); right: var(--pad); top: 0; height: 0; }
.luz__dot { --sun: clamp(3rem, 5.5vw, 5rem); position: absolute; left: calc(50% - var(--sun) / 2); top: calc(var(--sun) * -1 - 0.25rem); width: var(--sun); height: var(--sun); border-radius: 50%; background: var(--accent); will-change: transform; }
.is-ready .luz__dot { left: 0; }
.luz__nota { margin-top: 0.9rem; max-width: none; font-size: var(--step-small); color: rgb(255 246 238 / 0.75); }

/* Los mandos flotan abajo, sobre el mar: el botón redondo empieza o pausa, y al lado van las dos velocidades.
   Sin JavaScript no hacen nada, así que no se ven. */
.luz__controls { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(0.75rem, 2.4vw, 1.75rem); width: max-content; max-width: calc(100% - 1.5rem); margin-inline: auto; display: none; align-items: center; gap: clamp(0.5rem, 1.2vw, 0.9rem); padding: 0.4rem; border-radius: 999px; background: rgb(11 16 42 / 0.6); color: var(--on-dark); }
.js .luz__controls { display: flex; }
.luz__play { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--coral); color: var(--deep); transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.luz__play svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.luz__play[data-state="play"] .luz__icon-pause, .luz__play[data-state="pause"] .luz__icon-play { display: none; }
.luz__play:active { transform: scale(0.93); }
.luz__speed { display: flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: rgb(255 246 238 / 0.1); }
.luz__speed button { min-height: 2.75rem; padding: 0 1.4rem; border-radius: 999px; color: var(--on-dark); font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.luz__speed button[aria-pressed="true"] { background: var(--coral); color: var(--deep); }
.luz__speed button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .luz__play:hover { background: var(--gold); }
  .luz__speed button[aria-pressed="false"]:hover { background: rgb(255 246 238 / 0.14); }
}

/* En tableta y móvil va en una columna: el texto arriba y la lámina debajo, a todo el ancho */
@media (max-width: 63.99em) {
  .emdr-intro__grid { display: flex; flex-direction: column; align-items: stretch; }
  .luz-frame { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
  .luz { height: auto; aspect-ratio: 16 / 10; }
  .seal { width: 8.5rem; padding: 0.9rem; top: -3.25rem; right: -0.5rem; }
}
/* En tableta, el título a la izquierda y lo demás a su derecha, empezando a la misma altura */
@media (min-width: 48em) and (max-width: 63.99em) {
  .emdr-intro__text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "eyebrow eyebrow" "title sub" "title brief" "title more"; grid-template-rows: auto auto auto 1fr; column-gap: var(--gutter); align-items: start; }
  .emdr-intro__text .eyebrow { grid-area: eyebrow; justify-self: start; }
  .emdr-intro__title { grid-area: title; }
  .emdr-intro__sub { grid-area: sub; margin-top: 0; }
  .emdr-intro__brief { grid-area: brief; }
  .emdr-intro__more { grid-area: more; justify-self: start; margin-top: 1.25rem; }
}
@media (max-width: 47.99em) {
  .emdr-intro { padding-block: 1.5rem; }
  .emdr-intro__sub { font-size: var(--step-body); line-height: 1.5; margin-top: 0.9rem; }
  .emdr-intro__brief { margin-top: 0.5rem; }
  .emdr-intro__more { margin-top: 1.25rem; }
  .luz-frame { margin-top: 1.5rem; }
  .luz { aspect-ratio: 1.15 / 1; }
  .luz__title { font-size: var(--step-lead); }
  .luz__count { margin-top: 0.2rem; }
  .seal { width: 8.25rem; padding: 0.5rem; top: -3.4rem; }
  .luz__dot { --sun: 2.75rem; }
  .luz__controls { bottom: 0.75rem; }
  .luz__play { width: 3rem; height: 3rem; }
  .luz__speed button { padding: 0 1.15rem; }
}
/* Móviles bajos: el título en una línea y fuera la frase de apoyo y la nota, para seguir cabiendo en una pantalla */
@media (max-width: 47.99em) and (max-height: 46em) {
  .emdr-intro__title em { display: inline; }
  .emdr-intro__brief, .luz__nota { display: none; }
  .luz { --sky: 46%; aspect-ratio: 1.25 / 1; }
}

/* ---------- página de contacto ---------- */
/* Arriba, una franja con su propio fondo: el título a la izquierda y, a la derecha, teléfono, correo y dirección */
.cabecera { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cabecera__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.cabecera__texto { grid-column: 1 / span 7; }
.cabecera__lead { margin-top: 1.25rem; max-width: 40ch; }
.cabecera__datos { grid-column: 9 / -1; display: grid; gap: 1.5rem; }
.cabecera__datos dt { color: var(--gold); font-size: var(--step-small); font-weight: 500; letter-spacing: 0.02em; }
.cabecera__datos dd { margin-top: 0.2rem; font-size: var(--step-lead); line-height: 1.35; }
.cabecera__datos a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; overflow-wrap: anywhere; }
.cabecera__datos div:first-child dd { font-family: var(--font-display); font-size: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); line-height: 1; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .cabecera__datos a:hover { color: var(--gold); text-decoration-color: currentColor; } }
@media (max-width: 63.99em) {
  .cabecera__grid { display: block; }
  .cabecera__datos { margin-top: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--gutter); }
  .cabecera__datos div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 47.99em) { .cabecera__datos { grid-template-columns: 1fr; } }

/* Debajo, el formulario a lo ancho: los datos en una fila de cuatro, las preferencias en una de tres
   y el mensaje con la privacidad y el envío al lado. Campos blancos sobre un velo azul, sin líneas de más. */
.formulario { padding-block: clamp(3rem, 6vw, 5rem); }
.form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.75rem var(--gutter); align-items: start; padding: clamp(1.25rem, 3.2vw, 2.75rem); border-radius: var(--radius); background: var(--tint); }
.campo--cuarto { grid-column: span 3; }
/* la fila de preferencias: las píldoras ocupan lo que necesitan y el motivo, el resto */
.form__preferencias { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.75rem var(--gutter); align-items: start; }
@media (max-width: 79.99em) {
  .form__preferencias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__preferencias > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 47.99em) { .form__preferencias { grid-template-columns: 1fr; } }
.campo--mensaje { grid-column: 1 / span 7; }
.form__cierre { grid-column: 8 / -1; align-self: end; display: grid; gap: 1.5rem; padding-bottom: 1.6rem; }
@media (max-width: 63.99em) {
  .campo--cuarto { grid-column: span 6; }
  .campo--mensaje, .form__cierre { grid-column: 1 / -1; }
  .form__cierre { padding-bottom: 0; }
}
@media (max-width: 47.99em) {
  .campo--cuarto { grid-column: 1 / -1; }
  .form__boton { width: 100%; }
}
.campo { display: grid; gap: 0.45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo > label, .campo > legend { padding: 0; color: var(--font); font-weight: 500; }
.campo__opcional { font-weight: 400; }
.campo input:not([type="radio"]):not([type="checkbox"]), .campo select, .campo textarea {
  width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem;
  border: 1.5px solid rgb(34 48 110 / 0.22); border-radius: var(--radius-s); background: #fff;
  color: var(--ink); font: inherit; line-height: 1.4;
  transition: border-color var(--t-hover) ease;
}
.campo textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.campo select { appearance: none; padding-right: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2322306e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 0.8rem; }
@media (hover: hover) and (pointer: fine) { .campo input:not([type="radio"]):not([type="checkbox"]):hover, .campo select:hover, .campo textarea:hover { border-color: rgb(34 48 110 / 0.45); } }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--font); outline: 3px solid rgb(240 122 90 / 0.5); outline-offset: 1px; }
.campo [aria-invalid="true"] { border-color: var(--terra) !important; }
.campo__ayuda { font-size: var(--step-small); }
.campo__error { color: var(--terra); font-size: var(--step-small); font-weight: 500; }

/* las opciones van en píldoras: se marca la elegida en el azul de los títulos */
.opciones__lista { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.opcion { position: relative; display: inline-flex; }
.opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid rgb(34 48 110 / 0.22); border-radius: 999px; background: #fff; color: var(--font); font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.opcion input:checked + span { background: var(--font); border-color: var(--font); color: var(--on-dark); }
.opcion input:focus-visible + span { outline: 2px solid var(--font); outline-offset: 3px; }
.opcion input:active + span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .opcion input:not(:checked):hover + span { border-color: rgb(34 48 110 / 0.5); } }

.campo--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.75rem; }
.campo--check input { width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--font); cursor: pointer; }
.campo--check > label { color: var(--ink); font-weight: 400; }
.campo--check .campo__error { grid-column: 1 / -1; }
.form__envio { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__boton { min-height: 3.5rem; padding-inline: 2rem; }
.form__boton:disabled { opacity: 0.6; cursor: progress; }
.form__estado { max-width: 46ch; color: var(--font); font-weight: 500; }
.form__estado:empty { display: none; }

/* el mapa: los planos en el azul de la web y la consulta marcada con un sol que late */
.mapa { position: relative; isolation: isolate; margin-top: clamp(2.5rem, 5vw, 4rem); overflow: hidden; border-radius: var(--radius); background: var(--mist); }
.mapa__lienzo { height: clamp(22rem, 42vw, 34rem); background: var(--mist); }
.mapa__lienzo.leaflet-container { font: inherit; background: var(--mist); }
.mapa__lienzo .leaflet-tile-pane { filter: grayscale(1) sepia(0.3) hue-rotate(190deg) saturate(1.7) brightness(1.04) contrast(0.92); }
.mapa__lienzo .leaflet-control-attribution { font-size: 0.6875rem; }
.mapa__lienzo .leaflet-popup-content { margin: 0.9rem 1.1rem; font-size: var(--step-small); line-height: 1.45; color: var(--ink); }
.mapa__punto span { position: absolute; inset: 0; border: 3px solid var(--bg); border-radius: 50%; background: var(--coral); }
.mapa__punto::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: rgb(240 122 90 / 0.35); animation: latido 2.4s ease-out infinite; }
@keyframes latido { from { transform: scale(0.55); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapa__punto::before { animation: none; } }
.mapa__ficha { position: absolute; z-index: 500; left: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); max-width: 21rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-s); background: var(--bg); }
.mapa__nombre { color: var(--font); font-family: var(--font-display); font-size: var(--step-statement); line-height: 1.05; margin-bottom: 0.35rem; }
.mapa__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; margin-top: 0.5rem; }
@media (max-width: 47.99em) {
  .mapa__lienzo { height: 19rem; }
  .mapa__ficha { position: static; max-width: none; border-radius: 0; }
}

/* ---------- página EMDR ---------- */
.page-what__photo { width: 100%; max-width: 34rem; aspect-ratio: 4 / 3; object-fit: cover; margin-top: clamp(2rem, 4vw, 3rem); border-radius: var(--radius); }
.page-what__text .arrow { margin-top: 1rem; }

.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.5rem var(--gutter); margin-top: clamp(3rem, 5vw, 4.5rem); counter-reset: fase; }
/* cada fase lleva su número en el color del sol */
.phases li { counter-increment: fase; }
.phases li::before { content: counter(fase, decimal-leading-zero); display: block; margin-bottom: 0.6rem; color: var(--terra); font-family: var(--font-display); font-size: var(--step-statement); line-height: 1; }
.phases h3 { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; }
.phases p { margin-top: 0.6rem; line-height: 1.5; max-width: 32ch; }

.page-pair__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.page-pair__photo { grid-column: 1 / span 5; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 50% 50% var(--radius-s) var(--radius-s) / 40% 40% var(--radius-s) var(--radius-s); }
.page-pair__text { grid-column: 7 / -1; }
.page-pair__text > div + div { margin-top: clamp(3.5rem, 6vw, 5rem); }
.page-pair__text p { margin-top: 1.25rem; }

@media (max-width: 47.99em) {
  .phases { grid-template-columns: 1fr; gap: 2rem; }
  .page-pair__grid { display: block; }
  .page-pair__photo { aspect-ratio: 4 / 3; }
  .page-pair__text { margin-top: 2.5rem; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 8. preguntas frecuentes ---------- */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.faq__side { grid-column: 1 / span 5; }
.faq__facts { margin-top: 1.75rem; line-height: 1.7; }
.faq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.faq__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 3rem; border-radius: var(--radius); }
.faq__list { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 1.25rem; padding-top: 0.5rem; }
.faq__list details { padding-bottom: 1.25rem; border-bottom: 1px solid rgb(34 48 110 / 0.14); }
.faq__list summary { transition: color var(--t-hover) ease; }
.faq__list details[open] summary, .faq__list summary:hover { color: var(--terra); }
.faq__list summary { position: relative; list-style: none; cursor: pointer; padding-right: 2.5rem; min-height: 2.75rem; display: flex; align-items: center; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; position: absolute; right: 0.6rem; top: calc(50% - 0.45rem); width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); transform: rotate(45deg); transition: transform var(--t-ui) var(--ease-out); }
.faq__list details[open] summary::after { transform: translateY(0.25rem) rotate(-135deg); }
.faq__list details p { margin-top: 0.75rem; }

@media (max-width: 47.99em) {
  .faq__grid { display: block; }
  .faq__list { margin-top: 3rem; padding-top: 0; }
  .faq__actions .button { width: 100%; }
}

/* ---------- 10. cierre antes del pie: la invitación a empezar ---------- */
/* El dibujo sale del borde de abajo como un sol del horizonte */
.start { padding-bottom: 0; }
.start__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.start__text { grid-column: 1 / span 6; align-self: center; padding-bottom: var(--section); }
.start__text .lead { margin-top: 1rem; }
.start__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.start__media { grid-column: 8 / -1; margin: 0; }
.start__photo { width: 100%; aspect-ratio: 1 / 0.82; object-fit: cover; border-radius: 50% 50% 0 0 / 60% 60% 0 0; }

@media (max-width: 47.99em) {
  .start__grid { display: block; }
  .start__text { padding-bottom: 2.5rem; }
}

/* ---------- 11. información y contacto: el pie ---------- */
.foot { padding-top: clamp(3.5rem, 5vw, 4.5rem); padding-bottom: 2rem; }
.foot__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }
.foot__mark { color: var(--gold); font-family: var(--font-display); font-size: var(--step-statement); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.foot__title { font-size: var(--step-body); }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.foot__grid h3 { font-size: var(--step-body); font-weight: 500; margin-bottom: 0.4rem; }
.foot__col:nth-child(1) { grid-column: 1 / span 4; }
.foot__col:nth-child(2) { grid-column: 5 / span 3; }
.foot__lines { margin-top: 1.75rem; font-size: var(--step-lead); line-height: 1.6; }
.foot__menu { grid-column: 8 / span 4; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 0.25rem var(--gutter); }
.foot__menu a { display: flex; align-items: center; min-height: 2.75rem; font-weight: 500; text-decoration: none; width: fit-content; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot__menu a:hover { transform: translateX(0.35rem); } }
.foot__social { grid-column: 12 / -1; justify-self: end; text-align: right; line-height: 2; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(3rem, 5vw, 4.5rem); font-size: var(--step-small); }
.foot__copy { font-weight: 500; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }

@media (max-width: 47.99em) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__col:nth-child(1), .foot__col:nth-child(2), .foot__menu { grid-column: 1 / -1; }
  .foot__social { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .foot__legal { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .foot__col:nth-child(1) { grid-column: 1 / span 6; }
  .foot__col:nth-child(2) { grid-column: 7 / -1; }
  .foot__menu { grid-column: 1 / span 8; }
  .foot__social { grid-column: 9 / -1; }
}

/* ---------- movimiento (el contenido se ve sin JavaScript) ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.lines [data-line] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* entrada del primer pantallazo */
  .js .hero__drift > *, .js .hero__lamina > * { animation: settle 1800ms var(--ease-soft) both; }
  .js .hero__arch { animation: arch-up 1300ms var(--ease-in-out) both; }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 420ms); }
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 1100ms var(--ease-out) forwards; animation-delay: 160ms; }

  /* entradas por sección, una vez */
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* el sello de la OMS se estampa al entrar */
  .js .seal[data-reveal] { transform: rotate(-28deg) scale(1.35); transition: opacity 500ms var(--ease-out), transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 500ms; }
  .js .seal[data-reveal].is-in { transform: rotate(-10deg); }
  .js .seal--hero { animation: stamp 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 900ms both; }
  /* la cortina va en la imagen, no en la figura: un elemento recortado entero nunca «entra» en pantalla para el observador */
  .js .about__media[data-reveal], .js .start__media[data-reveal] { opacity: 1; transform: none; }
  .js .help__row[data-reveal] { transform: translateY(16px); }

  /* el gesto principal: el nombre pesa y se hunde un poco al salir; el sol de la frase de presentación sube al entrar */
  @supports (animation-timeline: view()) {
    .hero__name { animation: sink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .hero__drift, .hero__lamina { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .pause__photo { animation: drift-in linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    .hero__rings { animation: turn linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    /* los dibujos suben un poco más despacio que el texto: la página gana fondo */
    .about__frame, .faq__photo, .page-what__photo, .page-pair__photo, .service__photo { animation: parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .about__media::before { animation: parallax-hondo linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-28deg) scale(1.35); } to { opacity: 1; transform: rotate(-10deg); } }
@keyframes line-up { to { transform: none; } }
@keyframes sink { to { transform: scale(0.93); } }
@keyframes drift { to { transform: translateY(6%); } }
@keyframes arch-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-5rem); } }
@keyframes turn { to { transform: translate(-50%, -50%) scale(1.12); } }
@keyframes drift-in { from { transform: scale(1.1); } to { transform: none; } }
@keyframes parallax { from { translate: 0 2.5rem; } to { translate: 0 -2.5rem; } }
@keyframes parallax-hondo { from { translate: 0 -3rem; } to { translate: 0 3rem; } }