/* Amalia J. Alonso · Psicóloga
   Tema oscuro único (verde tinta), un solo acento: el menta de su logo.
   Radios: botones y chips en píldora, paneles e imágenes a 24px, campos a 12px.
   El retrato de Sobre mí lleva arco: es la única excepción y es a propósito. */

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* tinta: fondos del más profundo al más elevado */
  --tinta-0: #0b100f;
  --tinta-1: #101816;
  --tinta-2: #15201d;
  --tinta-3: #1c2a26;
  --tinta-4: #243631;
  --linea: rgba(234, 239, 235, 0.12);
  --linea-fuerte: rgba(234, 239, 235, 0.22);

  --texto: #eaefeb;
  --texto-2: #b5c2bc;
  --texto-3: #8b9a94;

  /* el acento: menta del árbol del logo, y su versión de relleno para botones */
  --acento: #6acfbc;
  --acento-relleno: #1f7d6e;
  --acento-relleno-hover: #238a7a;
  --acento-suave: rgba(106, 207, 188, 0.12);
  --acento-borde: rgba(106, 207, 188, 0.38);

  /* cielo del hero y bandas de amanecer */
  --cielo-1: #6f9aa0;
  --cielo-2: #9fb6ae;
  --cielo-3: #cdb99c;
  --colina-lejos: #7b8d86;
  --colina: #4d605a;
  --amanecer: #2b3f39;

  --error: #f2a28f;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  --radio: 24px;
  --radio-campo: 12px;
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
  --seccion: clamp(88px, 12vw, 168px);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tinta-1);
  color: var(--texto-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* grano fijo: da textura a los fondos sin repintar al hacer scroll */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[hidden] { display: none !important; }

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

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--texto); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 {
  margin: 0 0 0.5em;
  color: var(--texto);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 4.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }
h1 em, h2 em { font-style: italic; color: var(--acento); }

p { margin: 0 0 1em; max-width: 65ch; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--texto); color: var(--tinta-0);
}
.saltar:focus { top: 16px; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icono { width: 1.15em; height: 1.15em; flex: none; }
.icono--grande { width: 44px; height: 44px; color: var(--acento); }

/* --------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 500 0.98rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.3s var(--suave), border-color 0.3s var(--suave), transform 0.3s var(--suave), color 0.3s;
}
.boton:active { transform: translateY(1px) scale(0.985); }
.boton--acento { background: var(--acento-relleno); color: #f4fbf8; }
.boton--acento:hover { background: var(--acento-relleno-hover); color: #fff; }
.boton--cristal {
  background: rgba(16, 24, 22, 0.42); color: var(--texto); border-color: var(--linea-fuerte);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.boton--cristal:hover { border-color: var(--acento-borde); color: var(--texto); }
.boton--ancho { width: 100%; }
.boton--icono { width: 48px; padding: 0; }

.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 24px;
  color: var(--texto); font-weight: 500; text-decoration: none;
}
.enlace-flecha .icono { color: var(--acento); transition: transform 0.4s var(--suave); }
.enlace-flecha:hover .icono { transform: translateX(5px); }

.credencial { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--texto-2); font-size: 0.92rem; }
.credencial .icono { color: var(--acento); width: 20px; height: 20px; }
.credencial strong { color: var(--texto); font-weight: 600; }

.migas { display: flex; gap: 8px; margin-bottom: 22px; font-size: 0.88rem; }
.migas a { color: var(--texto-3); text-decoration: none; }
.migas a:hover { color: var(--texto); }
.migas a + a::before { content: "/"; margin-right: 8px; color: var(--linea-fuerte); }

/* -------------------------------------------------------------- cabecera */

.cabecera { position: fixed; inset: 14px 0 auto; z-index: 50; padding-inline: var(--margen); pointer-events: none; }
.cabecera__barra {
  pointer-events: auto;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  max-width: calc(var(--ancho) - 2 * var(--margen)); margin-inline: auto;
  padding: 8px 8px 8px 10px; border-radius: 999px;
  background: rgba(14, 22, 20, 0.34); border: 1px solid rgba(234, 239, 235, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background-color 0.5s var(--suave);
}
.cabecera.solida .cabecera__barra { background: rgba(12, 18, 17, 0.82); }

.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; }
.marca__logo { width: 36px; height: 36px; border-radius: 50%; background: #f4f6f3; }
.marca__nombre { font-family: var(--serif); font-size: 1.12rem; letter-spacing: 0.01em; }

.nav { display: flex; justify-content: center; gap: 28px; }
.nav a { color: var(--texto-2); font-size: 0.94rem; text-decoration: none; transition: color 0.3s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--texto); }
.cabecera__cta { min-height: 42px; padding-inline: 20px; }

.menu { display: none; }
.menu summary {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--texto); cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary .icono { width: 24px; height: 24px; }
.menu .icono--cerrar, .menu[open] summary .icono:first-child { display: none; }
.menu[open] .icono--cerrar { display: block; }
.menu__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px);
  display: grid; gap: 4px; padding: 16px; border-radius: var(--radio);
  background: rgba(12, 18, 17, 0.96); border: 1px solid var(--linea);
}
.menu__panel a:not(.boton) { padding: 12px 10px; color: var(--texto); font-size: 1.05rem; text-decoration: none; border-radius: 12px; }
.menu__panel a:not(.boton):hover { background: var(--tinta-3); }
.menu__panel .boton { margin-top: 8px; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end; min-height: 100dvh; min-height: max(100dvh, 640px);
}
.hero__cielo {
  position: absolute; inset: 0; z-index: -3;
  background: linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 30%, var(--cielo-3) 47%, #6b746c 57%, var(--amanecer) 66%, var(--tinta-1) 84%);
}
.hero__sol {
  position: absolute; left: 30%; top: 30%; width: 64vw; height: 34vh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 214, 0.75), rgba(255, 238, 214, 0));
  animation: deriva 28s ease-in-out infinite alternate;
}
/* las colinas bajan hasta perderse en el suelo oscuro: sin bordes rectos */
.hero__colina {
  position: absolute; left: -12%; bottom: 8%; width: 70%; height: 38%;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0; filter: blur(1.5px); opacity: 0.9;
  background: linear-gradient(180deg, var(--colina) 0%, var(--amanecer) 45%, var(--tinta-1) 85%);
}
.hero__colina--lejos {
  left: 42%; bottom: 12%; width: 78%; height: 37%; opacity: 0.75;
  background: linear-gradient(180deg, var(--colina-lejos) 0%, var(--colina) 30%, var(--amanecer) 60%, var(--tinta-1) 95%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 58%; z-index: -1;
  background: linear-gradient(180deg, rgba(16, 24, 22, 0) 0%, rgba(16, 24, 22, 0.78) 48%, var(--tinta-1) 88%);
}
.hero__retrato {
  position: absolute; z-index: -2; left: 50%; bottom: 0;
  width: auto; height: min(88dvh, 860px); max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 92%);
  filter: saturate(0.86) contrast(1.03) brightness(0.97);
  animation: asoma 1.8s var(--suave) both 0.15s;
}
.hero__contenido {
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 48px;
  padding-bottom: clamp(48px, 10vh, 112px); padding-top: 140px;
}
.hero__titulo { margin: 18px 0 0; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1.04; text-shadow: 0 2px 30px rgba(11, 16, 15, 0.45); }
.hero__titulo span { display: block; }
.hero__der { justify-self: end; max-width: 380px; }
.hero__der p { color: var(--texto); font-size: 1.05rem; margin-bottom: 24px; text-shadow: 0 1px 18px rgba(11, 16, 15, 0.6); }
.hero__credencial { animation: aparece 1.2s var(--suave) both 0.5s; }
.hero__titulo span { animation: aparece 1.3s var(--suave) both; }
.hero__titulo span:nth-child(1) { animation-delay: 0.35s; }
.hero__titulo span:nth-child(2) { animation-delay: 0.5s; }
.hero__der { animation: aparece 1.3s var(--suave) both 0.75s; }

/* ---------------------------------------------------------------- órbita */

.orbita-seccion {
  padding: calc(var(--seccion) * 0.7) var(--margen) var(--seccion);
  background:
    radial-gradient(50% 45% at 50% 50%, rgba(106, 207, 188, 0.07), transparent 70%),
    var(--tinta-1);
  overflow: hidden;
}
.orbita { position: relative; width: min(740px, 100%, 90dvh); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; container-type: inline-size; }
.orbita__anillos { position: absolute; inset: 0; }
.orbita__anillos span {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--linea);
  transform: translate(-50%, -50%) scale(0.85); opacity: 0;
  transition: transform 1.6s var(--suave), opacity 1.6s var(--suave);
}
.orbita__anillos span:nth-child(1) { width: 34%; height: 34%; transition-delay: 0.1s; }
.orbita__anillos span:nth-child(2) { width: 66%; height: 66%; transition-delay: 0.25s; border-style: dashed; border-color: rgba(234, 239, 235, 0.08); }
.orbita__anillos span:nth-child(3) { width: 96%; height: 96%; transition-delay: 0.4s; }
.orbita.visible .orbita__anillos span, html:not(.js) .orbita__anillos span { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.orbita__centro { position: relative; z-index: 2; margin: 0; max-width: 13ch; text-align: center; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.22; }

.orbita__chips { position: absolute; inset: 0; animation: giro 165s linear infinite; }
.orbita__chips li {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  --r: 37;
  transform: rotate(var(--a)) translateX(calc(var(--r) * 1cqw)) rotate(calc(var(--a) * -1));
}
.orbita__chips li:nth-child(even) { --r: 47; }
.chip {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  display: block; width: max-content; max-width: 200px; padding: 10px 16px;
  border-radius: 999px; border: 1px solid var(--linea);
  background: rgba(28, 42, 38, 0.82); color: var(--texto-2);
  font-size: 0.86rem; line-height: 1.35; text-align: center; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: giro 165s linear infinite reverse;
  transition: border-color 0.4s, color 0.4s, background-color 0.4s;
}
.chip:hover { border-color: var(--acento-borde); color: var(--texto); background: rgba(31, 125, 110, 0.35); }
.js .orbita .chip { opacity: 0; transition: opacity 1s var(--suave), border-color 0.4s, color 0.4s, background-color 0.4s; }
.js .orbita.visible .chip { opacity: 1; }
.orbita__chips li:nth-child(1) .chip { transition-delay: 0.5s; }
.orbita__chips li:nth-child(2) .chip { transition-delay: 0.7s; }
.orbita__chips li:nth-child(3) .chip { transition-delay: 0.9s; }
.orbita__chips li:nth-child(4) .chip { transition-delay: 1.1s; }
.orbita__chips li:nth-child(5) .chip { transition-delay: 1.3s; }
.orbita__chips li:nth-child(6) .chip { transition-delay: 1.5s; }

/* ---------------------------------------------------------- índice portada */

.indice {
  padding: var(--seccion) 0;
  background: linear-gradient(180deg, var(--tinta-1) 0%, var(--tinta-2) 22%, var(--tinta-2) 78%, var(--tinta-1) 100%);
}
.indice h2 { margin-bottom: 48px; }
.indice__lista { border-top: 1px solid var(--linea); }
.indice__fila a {
  position: relative; display: grid; align-items: baseline; gap: 24px;
  grid-template-columns: 150px minmax(0, 1.1fr) minmax(0, 1fr) 32px;
  padding: 30px 8px; border-bottom: 1px solid var(--linea);
  color: inherit; text-decoration: none; isolation: isolate;
}
.indice__fila a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px;
  background: linear-gradient(90deg, var(--acento-suave), transparent 80%);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--suave);
}
.indice__fila a:hover::before, .indice__fila a:focus-visible::before { transform: scaleX(1); }
.indice__para { color: var(--acento); font-size: 0.9rem; }
.indice__nombre { color: var(--texto); font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; }
.indice__texto { color: var(--texto-3); font-size: 0.98rem; }
.indice__flecha { justify-self: end; color: var(--texto-3); transition: transform 0.5s var(--suave), color 0.3s; }
.indice__fila a:hover .indice__flecha { transform: translateX(6px); color: var(--acento); }

/* -------------------------------------------------------------- quién soy */

.quien {
  padding: var(--seccion) 0;
  background:
    radial-gradient(45% 55% at 18% 45%, rgba(205, 185, 156, 0.08), transparent 70%),
    var(--tinta-1);
}
.quien__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.quien__foto { margin: 0; position: relative; }
.quien__foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%;
  border-radius: var(--radio); filter: saturate(0.85);
}
.quien__foto::after {
  content: ""; position: absolute; inset: auto -18px -18px auto; width: 46%; height: 40%;
  border: 1px solid var(--acento-borde); border-radius: var(--radio); z-index: -1;
}
.quien__entrada { color: var(--texto); font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.4; }
.datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 40px; margin: 34px 0 0; }
.datos div { padding-top: 14px; border-top: 1px solid var(--acento-borde); }
.datos dt { color: var(--texto-3); font-size: 0.82rem; }
.datos dd { margin: 2px 0 0; color: var(--texto); font-size: 1rem; }

/* ------------------------------------------------------------- recorrido */

.primera {
  padding: var(--seccion) 0 calc(var(--seccion) * 0.9);
  background: linear-gradient(180deg, var(--tinta-1) 0%, #13201d 45%, #1c2d28 80%, var(--amanecer) 100%);
}
.primera h2 { margin-bottom: 56px; }

.recorrido { --gap: clamp(20px, 3vw, 40px); }
.recorrido__lista { display: grid; grid-template-columns: repeat(var(--total), minmax(0, 1fr)); gap: var(--gap); }
.recorrido__paso { position: relative; }
.recorrido__nodo {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--acento); background: var(--acento); color: var(--tinta-0);
  font-weight: 600; font-size: 0.95rem;
  transition: background-color 0.6s var(--suave), color 0.6s var(--suave), border-color 0.6s, box-shadow 0.6s;
}
.recorrido__paso:not(:last-child)::before,
.recorrido__paso:not(:last-child)::after {
  content: ""; position: absolute; top: 21px; left: 56px; right: calc(var(--gap) * -1 + 12px); height: 2px;
  background: var(--linea);
}
.recorrido__paso:not(:last-child)::after { background: var(--acento); transform-origin: left; transition: transform 0.9s var(--suave); }
.recorrido__texto { margin-top: 22px; }
.recorrido__cuando { margin-bottom: 4px; color: var(--acento); font-size: 0.86rem; font-weight: 500; }
.recorrido__texto h3 { margin-bottom: 8px; font-size: 1.4rem; }
.recorrido__texto p:last-child { color: var(--texto-3); font-size: 0.98rem; }

/* horizontal: al entrar en pantalla se encienden los pasos uno detrás de otro */
.js .recorrido--horizontal:not(.visible) .recorrido__nodo { background: var(--tinta-1); color: var(--texto-3); border-color: var(--linea-fuerte); }
.js .recorrido--horizontal:not(.visible) .recorrido__paso::after { transform: scaleX(0); }
.js .recorrido--horizontal:not(.visible) .recorrido__texto { opacity: 0.35; }
.recorrido--horizontal .recorrido__texto { transition: opacity 0.8s var(--suave); }
.recorrido--horizontal .recorrido__nodo,
.recorrido--horizontal .recorrido__texto { transition-delay: calc(var(--i) * 0.7s + 0.2s); }
.recorrido--horizontal .recorrido__paso::after { transition-delay: calc(var(--i) * 0.7s + 0.55s); }
.js .recorrido--horizontal.revela { opacity: 1; transform: none; }

/* vertical: cada paso se activa al pasar por el centro de la pantalla */
.recorrido--vertical .recorrido__lista { grid-template-columns: 1fr; gap: 0; max-width: 760px; }
.recorrido--vertical .recorrido__paso { display: grid; grid-template-columns: 44px 1fr; gap: 28px; min-height: 42vh; padding-bottom: 40px; }
.recorrido--vertical .recorrido__paso:last-child { min-height: 0; }
.recorrido--vertical .recorrido__paso:not(:last-child)::before,
.recorrido--vertical .recorrido__paso:not(:last-child)::after { top: 56px; bottom: 12px; left: 21px; right: auto; width: 2px; height: auto; }
.recorrido--vertical .recorrido__paso::after { transform-origin: top; }
.recorrido--vertical .recorrido__texto { margin-top: 2px; transition: opacity 0.7s var(--suave), transform 0.7s var(--suave); }
.recorrido--vertical .recorrido__texto h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.recorrido--vertical .recorrido__texto p:last-child { font-size: 1.08rem; color: var(--texto-2); }
.js .recorrido--vertical .recorrido__paso:not(.activo) .recorrido__nodo { background: var(--tinta-1); color: var(--texto-3); border-color: var(--linea-fuerte); }
.js .recorrido--vertical .recorrido__paso:not(.activo) .recorrido__texto { opacity: 0.3; transform: translateX(-6px); }
.js .recorrido--vertical .recorrido__paso:not(.hecho)::after { transform: scaleY(0); }
.recorrido--vertical .recorrido__paso.activo .recorrido__nodo { box-shadow: 0 0 0 8px var(--acento-suave); }
.js .recorrido--vertical.revela { opacity: 1; transform: none; }


/* ------------------------------------------------------- especialidad: hero */

.esp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center; min-height: min(92dvh, 900px); padding: 140px 0 90px;
  background: radial-gradient(48% 55% at 74% 45%, rgba(106, 207, 188, 0.1), transparent 72%), var(--tinta-1);
}
.esp-hero__motivo { position: absolute; z-index: -1; top: 50%; right: 5vw; width: min(44vw, 560px); transform: translateY(-46%); }
.esp-hero__texto > * { max-width: 620px; }
.esp-hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); }
.esp-hero__entrada { color: var(--texto); font-size: 1.18rem; }
.esp-hero__credencial { margin-top: 36px; }

.esp-hero--invertido { background: radial-gradient(48% 55% at 26% 50%, rgba(106, 207, 188, 0.1), transparent 72%), var(--tinta-1); }
.esp-hero--invertido .esp-hero__motivo { right: auto; left: 5vw; }
.esp-hero--invertido .esp-hero__texto { display: grid; justify-items: start; padding-left: max(var(--margen), 45%); }
.esp-hero--invertido h1 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); }

.esp-hero--fondo { background: linear-gradient(180deg, var(--tinta-0), var(--tinta-1)); }
/* las ondas ocupan la mitad derecha a sangre y se desvanecen hacia el texto */
.esp-hero--fondo .esp-hero__motivo {
  left: 46%; right: 0; width: auto; transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.esp-hero--fondo .esp-hero__motivo .motivo { width: 100%; height: 56vh; }

/* ----------------------------------------------------- motivos gráficos */

.motivo { width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--acento); stroke-width: 1.3; stroke-linecap: round; }

.m-anillo { stroke-opacity: calc(0.8 - var(--i) * 0.14); transform-box: view-box; transform-origin: 200px 200px; animation: respira 10s ease-in-out infinite; animation-delay: calc(var(--i) * -1.6s); }
.m-nucleo { fill: var(--acento); stroke: none; }

.m-onda { vector-effect: non-scaling-stroke; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-opacity: calc(0.95 - var(--i) * 0.11); animation: dibuja 3.2s var(--suave) forwards; animation-delay: calc(var(--i) * 0.18s + 0.3s); }

.m-orbita circle { stroke-opacity: 0.75; }
.m-lente { fill: var(--acento-suave); stroke: none; animation: late 7s ease-in-out infinite; }
.m-punto { fill: var(--acento); stroke: none; }
.m-giro--a { transform-box: view-box; transform-origin: 160px 200px; animation: giro 22s linear infinite; }
.m-giro--b { transform-box: view-box; transform-origin: 240px 200px; animation: giro 22s linear infinite reverse; }

.m-arista { stroke-opacity: 0.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibuja 1.6s var(--suave) forwards; animation-delay: calc(var(--i) * 0.16s + 0.3s); }
.m-nodo { fill: var(--tinta-1); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: pulso 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1.1s); }

.m-rama { stroke-width: 1.7; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibuja 1.8s var(--suave) forwards; animation-delay: calc(var(--i) * 0.32s + 0.2s); }
.m-hoja { fill: var(--acento-suave); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: brota 1s var(--suave) forwards; animation-delay: calc(var(--i) * 0.22s + 2.2s); }

/* ------------------------------------------------- especialidad: cuerpo */

/* ideas que salen de la cabeza: aparecen una a una y luego flotan despacio */
.pensar { padding-block: var(--seccion) calc(var(--seccion) * 0.4); overflow: hidden; }
.pensar h2 { margin-bottom: 12px; }
.pensar__escena { position: relative; height: 560px; }
.js .pensar__escena.revela { opacity: 1; transform: none; }
.cabeza { position: absolute; left: 0; bottom: 0; width: 230px; height: auto; overflow: visible; }
.cabeza__perfil { fill: rgba(106, 207, 188, 0.05); stroke: var(--acento); stroke-width: 1.4; stroke-linejoin: round; }
.cabeza__mente { fill: url(#mente); }
.cabeza__chispa { fill: var(--acento); transform-box: fill-box; transform-origin: center; animation: pulso 4s ease-in-out infinite; }
.pensar__ideas { position: absolute; inset: 0; }
.idea { position: absolute; left: var(--x); top: var(--y); animation: flota 9s ease-in-out infinite; animation-delay: calc(var(--i) * -1.5s); }
.idea__burbuja {
  position: relative; display: block; max-width: 280px; padding: 16px 22px; border-radius: 28px;
  background: rgba(28, 42, 38, 0.92); border: 1px solid var(--linea-fuerte); color: var(--texto);
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.38; box-shadow: 0 18px 40px rgba(5, 10, 9, 0.35);
  transition: opacity 0.8s var(--suave), transform 0.8s var(--suave);
  transition-delay: calc(var(--i) * 0.45s + 0.35s);
}
.idea:nth-child(odd) .idea__burbuja { border-color: var(--acento-borde); }
.idea__estela { position: absolute; left: 10px; bottom: -34px; width: 40px; height: 34px; }
.idea__estela i {
  position: absolute; border-radius: 50%; background: rgba(28, 42, 38, 0.95); border: 1px solid var(--linea-fuerte);
  transition: opacity 0.4s var(--suave);
}
.idea__estela i:nth-child(1) { width: 12px; height: 12px; left: 6px; top: 2px; transition-delay: calc(var(--i) * 0.45s + 0.25s); }
.idea__estela i:nth-child(2) { width: 8px; height: 8px; left: -5px; top: 17px; transition-delay: calc(var(--i) * 0.45s + 0.15s); }
.idea__estela i:nth-child(3) { width: 5px; height: 5px; left: -13px; top: 28px; transition-delay: calc(var(--i) * 0.45s + 0.05s); }
.js .pensar__escena:not(.visible) .idea__burbuja { opacity: 0; transform: scale(0.8) translateY(14px); }
.js .pensar__escena:not(.visible) .idea__estela i { opacity: 0; }
.pensar--derecha .cabeza { left: auto; right: 0; transform: scaleX(-1); }
.pensar--derecha .idea { left: auto; right: var(--x); }
.pensar--derecha .idea__estela { left: auto; right: 10px; transform: scaleX(-1); }

/* cómo lo trabajo: tres claves en un hilo, y el texto largo plegado */
.esp-como { padding-block: calc(var(--seccion) * 0.6) var(--seccion); background: linear-gradient(180deg, var(--tinta-1), var(--tinta-2) 40%, var(--tinta-1)); }
.esp-como__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.esp-como__entrada { color: var(--texto); font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.45; }
.mas { margin-top: 26px; }
.mas summary { display: inline-flex; align-items: center; gap: 10px; color: var(--acento); font-weight: 500; cursor: pointer; list-style: none; }
.mas summary::-webkit-details-marker { display: none; }
.mas summary .icono { transition: transform 0.5s var(--suave); }
.mas[open] summary .icono { transform: rotate(45deg); }
.mas p { margin-top: 16px; }
.claves { position: relative; display: grid; gap: 36px; }
.claves::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(var(--acento), rgba(106, 207, 188, 0.1)); }
.clave { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; }
.clave__icono {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--tinta-1); border: 1px solid var(--acento-borde); color: var(--acento);
}
.clave__icono .icono { width: 26px; height: 26px; }
.clave h3 { margin: 6px 0 4px; font-size: 1.45rem; }

/* situaciones: un icono y dos o tres palabras, para entender de un vistazo */
.esp-temas { padding-bottom: var(--seccion); }
.esp-temas h2 { margin-bottom: 34px; }
.temas-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.tema {
  display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; border-radius: var(--radio);
  background: var(--tinta-2); border: 1px solid var(--linea); color: var(--texto); line-height: 1.3;
  transition: border-color 0.4s, background-color 0.4s, opacity 1s var(--suave), transform 1s var(--suave);
}
.tema:hover { border-color: var(--acento-borde); background: var(--tinta-3); }
.tema__icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); }
.tema__icono .icono { width: 24px; height: 24px; }

.temas--nube { display: flex; flex-wrap: wrap; gap: 10px; }
.temas--nube li { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea); color: var(--texto-2); font-size: 0.95rem; }
.temas--nube a { text-decoration: none; }

/* ----------------------------------------------------------- bloque de cita */

.cita { padding-block: calc(var(--seccion) * 0.5) var(--seccion); }
.cita__panel {
  position: relative; isolation: isolate; overflow: hidden; max-width: 900px; margin-inline: auto;
  border-radius: var(--radio); border: 1px solid var(--acento-borde);
  background: linear-gradient(160deg, #1f3832 0%, #152521 60%, #111a18 100%);
}
.cita__luz {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 90% at 100% 100%, rgba(205, 185, 156, 0.32), rgba(205, 185, 156, 0) 70%),
    radial-gradient(40% 60% at 0% 0%, rgba(106, 207, 188, 0.12), transparent 70%);
  animation: respira-luz 14s ease-in-out infinite alternate;
}
.cita__texto { padding: clamp(32px, 5vw, 60px); }
.cita h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 14px; }
.cita__entrada { color: var(--texto); font-size: 1.15rem; max-width: 48ch; }
.cita__datos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cita__datos li {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--acento-borde); background: rgba(31, 125, 110, 0.14); color: var(--texto); font-size: 0.95rem;
}
.cita__datos .icono { color: var(--acento); }
.cita .botones { margin-top: 30px; }
.boton--grande { min-height: 58px; padding-inline: 30px; font-size: 1.05rem; }
.cita__nota { margin-top: 22px; color: var(--texto-3); font-size: 0.95rem; }
.cita__nota a { color: var(--texto-2); }

/* --------------------------------------------------------------- zonas */

.zona-hero { padding: 150px 0 calc(var(--seccion) * 0.5); background: radial-gradient(45% 55% at 75% 45%, rgba(106, 207, 188, 0.08), transparent 70%), var(--tinta-1); }
.zona-hero__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.zona-hero h1 { font-size: clamp(2.3rem, 4vw, 3.6rem); }
.zona-mapa { margin: 0; }
.zona-mapa figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 14px; color: var(--texto-2); font-size: 0.92rem; }
.zona-mapa figcaption > span:first-child { display: inline-flex; gap: 8px; align-items: flex-start; }
.zona-mapa figcaption .icono { color: var(--acento); margin-top: 3px; }
.zona-mapa__fuente { color: var(--texto-3); font-size: 0.8rem; }

/* mapa con límites municipales reales; los nombres llevan un halo del color del fondo */
.mapa { display: block; width: 100%; height: auto; border-radius: var(--radio); border: 1px solid var(--linea); font-family: var(--sans); box-shadow: 0 30px 60px rgba(5, 10, 9, 0.35); }
.mapa__fondo { fill: #0d1513; }
.mapa__municipio { fill: #16211e; stroke: rgba(234, 239, 235, 0.16); stroke-width: 1; stroke-linejoin: round; }
.mapa__municipio:nth-of-type(3n) { fill: #18241f; }
.mapa__municipio:nth-of-type(3n + 1) { fill: #141e1b; }
.mapa__municipio--consulta { fill: #1c2b26; stroke: rgba(205, 185, 156, 0.4); }
.mapa__municipio--zona { fill: rgba(106, 207, 188, 0.16); stroke: var(--acento); stroke-width: 1.6; transition: fill 1.2s var(--suave); }
.js .zona-mapa:not(.visible) .mapa__municipio--zona { fill: #16211e; }
.mapa__via { fill: none; stroke: rgba(234, 239, 235, 0.13); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mapa__nombre { fill: var(--texto-3); font-size: 15px; paint-order: stroke; stroke: #0f1715; stroke-width: 5px; stroke-linejoin: round; }
.mapa__nombre--zona { fill: var(--texto); font-size: 21px; font-weight: 600; font-family: var(--serif); }
.mapa__nombre--consulta { fill: var(--acento); font-size: 16px; font-weight: 600; }
.mapa__nombre--pueblo { fill: var(--texto-2); font-size: 15px; }
.mapa__lugar circle { fill: var(--texto-3); }
.mapa__lugar--zona circle { fill: var(--acento); stroke: #0f1715; stroke-width: 3; }
.mapa__consulta circle { fill: var(--acento); stroke: #0f1715; stroke-width: 3; }
.mapa__consulta .mapa__onda { fill: var(--acento-suave); stroke: var(--acento-borde); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: onda 3.2s ease-out infinite; }
.mapa__camino { fill: none; stroke: var(--acento); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--suave) 0.5s; }
.js .zona-mapa:not(.visible) .mapa__camino { stroke-dashoffset: 1; }

/* las dos formas de hacer terapia, cada una con su fondo */
.zona-modos { padding-block: calc(var(--seccion) * 0.7) calc(var(--seccion) * 0.4); }
.zona-modos h2 { margin-bottom: 30px; }
.modos-zona { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.modo-zona { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: clamp(28px, 4vw, 44px); border-radius: var(--radio); min-height: 300px; }
.modo-zona h3 { margin: 20px 0 6px; font-size: 1.9rem; }
.modo-zona p { font-size: 1.05rem; }
.modo-zona__dato { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 18px; font-size: 0.95rem !important; }
.modo-zona--presencial { color: #20302b; background: linear-gradient(170deg, var(--cielo-1) 0%, var(--cielo-2) 45%, var(--cielo-3) 100%); }
.modo-zona--presencial h3, .modo-zona--presencial .icono, .modo-zona--presencial a { color: #0f1a17; }
.modo-zona--presencial a { font-weight: 500; }
.modo-zona--online { border: 1px solid var(--linea); background: radial-gradient(70% 80% at 85% 10%, rgba(106, 207, 188, 0.16), transparent 70%), var(--tinta-2); }
.modo-zona--online .modo-zona__dato .icono { color: var(--acento); }

.zona-destacado { padding-block: calc(var(--seccion) * 0.5); }
.zona-destacado > p { font-size: 1.1rem; margin-bottom: 28px; }
.zona-terapias { padding-block: calc(var(--seccion) * 0.5) calc(var(--seccion) * 0.2); }
.zona-terapias h2 { margin-bottom: 30px; }
.esp-indice--par { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(220px, auto); }
.esp-indice--par .esp-indice__item:first-child { grid-row: auto; }
.esp-indice--par .esp-indice__item:first-child .esp-indice__nombre { font-size: 1.7rem; }
.esp-indice--par .esp-indice__item:first-child .esp-indice__motivo { width: 70%; right: -14%; top: -18%; }

.faq { padding-block: var(--seccion) calc(var(--seccion) * 0.6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.faq__lista { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-family: var(--sans); font-size: 1.12rem; font-weight: 500; color: var(--texto); }
.faq__item summary .icono { color: var(--acento); transition: transform 0.5s var(--suave); }
.faq__item[open] summary .icono { transform: rotate(45deg); }
.faq__item p { padding: 0 48px 26px 0; }

.rel { padding-bottom: var(--seccion); }
.rel h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 26px; }
.rel__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rel__lista a {
  position: relative; display: grid; gap: 6px; padding: 30px 64px 30px 30px; height: 100%;
  border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tinta-2);
  color: inherit; text-decoration: none; transition: border-color 0.4s, background-color 0.4s;
}
.rel__lista a:hover { border-color: var(--acento-borde); background: var(--tinta-3); }
.rel__lista .icono { position: absolute; right: 28px; top: 30px; color: var(--acento); }
.rel__para { color: var(--acento); font-size: 0.86rem; }
.rel__nombre { color: var(--texto); font-family: var(--serif); font-size: 1.5rem; }
.rel__texto { color: var(--texto-3); font-size: 0.98rem; }
.rel__zonas, .firma { margin-top: 28px; color: var(--texto-3); font-size: 0.92rem; }

/* ------------------------------------------------------------- sobre mí */

.sm-hero { padding: 150px 0 var(--seccion); background: radial-gradient(40% 50% at 78% 40%, rgba(205, 185, 156, 0.09), transparent 70%), var(--tinta-1); }
.sm-hero__rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.sm-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.sm-hero__lema { color: var(--texto); font-size: 1.2rem; }
.sm-hero__foto { margin: 0; }
.sm-hero__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 15%; border-radius: 999px 999px var(--radio) var(--radio); filter: saturate(0.85); }

.tarjeta-credenciales {
  display: grid; grid-template-columns: 1fr 1fr; margin: 40px 0 0; max-width: 620px;
  border-radius: var(--radio); border: 1px solid var(--acento-borde); background: rgba(31, 125, 110, 0.08); overflow: hidden;
}
.tarjeta-credenciales div { padding: 20px 24px; border-bottom: 1px solid var(--linea); }
.tarjeta-credenciales div:nth-child(odd) { border-right: 1px solid var(--linea); }
.tarjeta-credenciales div:nth-last-child(-n + 2) { border-bottom: 0; }
.tarjeta-credenciales dt { color: var(--texto-3); font-size: 0.82rem; }
.tarjeta-credenciales dd { margin: 4px 0 0; color: var(--texto); }
.tarjeta-credenciales div:first-child dd { color: var(--acento); font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; }

.historia { padding-bottom: var(--seccion); }
.historia h2 { margin-bottom: 40px; }
.historia__columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.historia__grande { color: var(--texto); font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.45; }

.enfoque { padding-block: var(--seccion); background: linear-gradient(180deg, var(--tinta-1), var(--tinta-2) 25%, var(--tinta-2) 75%, var(--tinta-1)); }
.enfoque__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.enfoque__grafico { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; }
.enfoque__grafico span {
  position: absolute; display: grid; place-items: center; border-radius: 50%; text-align: center;
  font-size: 0.95rem; color: var(--texto);
}
.enfoque__base { inset: 14% 14% 14% 14%; border: 1px solid var(--acento); background: var(--acento-suave); font-family: var(--serif); font-size: 1.6rem !important; }
.enfoque__sat { width: 38%; height: 38%; border: 1px solid var(--linea-fuerte); background: rgba(16, 24, 22, 0.85); padding: 10px; line-height: 1.3; }
.enfoque__sat--a { left: 0; top: 2%; animation: flota 9s ease-in-out infinite; }
.enfoque__sat--b { right: 0; bottom: 2%; animation: flota 9s ease-in-out infinite -4.5s; }

.formacion { padding-block: var(--seccion) calc(var(--seccion) * 0.5); }
.formacion h2 { margin-bottom: 40px; }
.formacion__lista { position: relative; display: grid; gap: 0; max-width: 880px; }
.formacion__lista::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--linea-fuerte); }
.formacion__item { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 4px 32px; padding: 18px 0 18px 40px; }
.formacion__item::before { content: ""; position: absolute; left: 2px; top: 27px; width: 11px; height: 11px; border-radius: 50%; background: var(--tinta-1); border: 1px solid var(--texto-3); }
.formacion__item--psicologia::before { background: var(--acento); border-color: var(--acento); }
.formacion__grupo { grid-row: span 2; color: var(--texto-3); font-size: 0.86rem; padding-top: 3px; }
.formacion__item--psicologia .formacion__grupo { color: var(--acento); }
.formacion__titulo { margin: 0; color: var(--texto); font-size: 1.12rem; font-weight: 500; }
.formacion__centro { margin: 0; color: var(--texto-3); font-size: 0.96rem; }

/* --------------------------------------------------------- cómo trabajo */

.ct-hero { padding-top: 160px; padding-bottom: calc(var(--seccion) * 0.6); }
.ct-hero__entrada { color: var(--texto); font-size: 1.2rem; }
.ct-recorrido { padding-bottom: var(--seccion); }

.ct-primera { padding-block: var(--seccion); background: linear-gradient(180deg, var(--tinta-1), #142420 40%, #1b2f29 100%); }
.ct-primera h2 { margin-bottom: 48px; }
.ct-minutos { display: grid; grid-template-columns: 1.1fr 3fr 1.4fr; gap: 6px; }
.ct-minutos li { position: relative; padding-top: 30px; }
.ct-minutos li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 999px;
  background: var(--acento); transform-origin: left; transition: transform 1.1s var(--suave);
}
.ct-minutos li:nth-child(1)::before { opacity: 0.55; }
.ct-minutos li:nth-child(3)::before { opacity: 0.75; }
.ct-minutos li:nth-child(2)::before { transition-delay: 0.6s; }
.ct-minutos li:nth-child(3)::before { transition-delay: 1.2s; }
.js .ct-minutos:not(.visible) li::before { transform: scaleX(0); }
.ct-minutos span { display: block; margin-bottom: 8px; color: var(--texto); font-family: var(--serif); font-size: 1.35rem; }
.ct-minutos p { padding-right: 18px; font-size: 1rem; }
.ct-primera__nota { margin-top: 48px; color: var(--texto); }

.ct-modos { padding-block: var(--seccion) 0; }
.ct-modos h2 { margin-bottom: 40px; }
.ct-modos__rejilla { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.modo { position: relative; overflow: hidden; padding: 36px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tinta-2); }
.modo h3 { font-size: 1.8rem; }
.modo > *:not(.modo__motivo) { position: relative; }
.modo__motivo { position: absolute; right: -8%; top: -22%; width: 46%; opacity: 0.4; pointer-events: none; }
.modo--grande .modo__motivo { right: 6%; top: 6%; width: 72%; opacity: 0.6; }
.modo--grande { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; background: radial-gradient(70% 60% at 70% 20%, rgba(106, 207, 188, 0.16), transparent 70%), var(--tinta-3); }
.modo--ancho { background: linear-gradient(135deg, var(--tinta-2), #1d332d); }

/* ------------------------------------------------------------- sesiones */

.ses-hero { padding: 160px 0 calc(var(--seccion) * 0.6); }
.ses-hero__dato { display: flex; align-items: baseline; gap: 18px; color: var(--texto); font-size: 1.2rem; }
.ses-hero__numero { color: var(--acento); font-family: var(--serif); font-size: clamp(5rem, 12vw, 9rem); line-height: 0.9; }
.ses-modos { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.ses-modo { padding: 44px; border-radius: var(--radio); }
.ses-modo h2 { margin-top: 26px; }
.ses-modo--presencial { color: #20302b; background: linear-gradient(170deg, var(--cielo-1) 0%, var(--cielo-2) 45%, var(--cielo-3) 100%); }
.ses-modo--presencial h2 { color: #0f1a17; }
.ses-modo--presencial .icono--grande { color: #0f1a17; }
.ses-modo--presencial a { color: #0f1a17; font-weight: 500; }
.ses-modo--online { border: 1px solid var(--linea); background: repeating-linear-gradient(90deg, transparent 0 47px, rgba(234, 239, 235, 0.04) 47px 48px), var(--tinta-2); }

/* ------------------------------------------------------- especialidades */

.ei-hero { padding-top: 160px; padding-bottom: 60px; }
.ei-hero__entrada { color: var(--texto); font-size: 1.2rem; }
.esp-indice { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-auto-rows: minmax(240px, auto); gap: 18px; }
.esp-indice__item:first-child { grid-row: span 2; }
.esp-indice__item a {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%;
  padding: 30px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tinta-2);
  color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; transition: border-color 0.4s, background-color 0.4s;
}
.esp-indice__item a:hover { border-color: var(--acento-borde); background: var(--tinta-3); }
.esp-indice__motivo { position: absolute; z-index: -1; right: -14%; top: -18%; width: 70%; opacity: 0.55; transition: opacity 0.5s; }
.esp-indice__item:first-child .esp-indice__motivo { width: 95%; right: -10%; top: -6%; }
.esp-indice__item a:hover .esp-indice__motivo { opacity: 0.9; }
.esp-indice__para { color: var(--acento); font-size: 0.86rem; }
.esp-indice__nombre { color: var(--texto); font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; }
.esp-indice__item:first-child .esp-indice__nombre { font-size: clamp(2rem, 3vw, 2.6rem); }
.esp-indice__texto { color: var(--texto-3); font-size: 0.98rem; max-width: 34ch; }
.otros { padding-block: var(--seccion); }
.otros .temas--nube { margin-block: 28px; }

/* ------------------------------------------------------------- contacto */

.co { padding: 150px 0 var(--seccion); background: radial-gradient(40% 50% at 20% 30%, rgba(106, 207, 188, 0.08), transparent 70%), var(--tinta-1); }
.co__rejilla { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.co__entrada { color: var(--texto); font-size: 1.15rem; margin-bottom: 30px; }
.co__info .boton--ancho { max-width: 380px; }
.co__vias { display: grid; gap: 4px; margin: 28px 0 32px; }
.co__vias a { display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--texto); text-decoration: none; }
.co__vias .icono { width: 22px; height: 22px; color: var(--acento); }
.co__vias a:hover span { text-decoration: underline; text-underline-offset: 4px; }

.co__formulario { padding: clamp(26px, 4vw, 44px); border-radius: var(--radio); background: var(--tinta-2); border: 1px solid var(--linea); }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.formulario h2 { grid-column: 1 / -1; font-size: 1.7rem; margin-bottom: 4px; }
.campo { grid-column: 1 / -1; display: grid; gap: 8px; }
.campo--medio { grid-column: span 1; }
.campo label { color: var(--texto); font-size: 0.95rem; font-weight: 500; }
.opcional { color: var(--texto-3); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radio-campo);
  border: 1px solid var(--linea-fuerte); background: var(--tinta-0); color: var(--texto);
  font: inherit; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s;
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo__ayuda { margin: 0; color: var(--texto-3); font-size: 0.86rem; }
.campo__error { display: none; margin: 0; color: var(--error); font-size: 0.88rem; }
.campo.con-error .campo__error { display: block; }
.campo.con-error input, .campo.con-error select { border-color: var(--error); }
.campo--check { grid-template-columns: 22px 1fr; align-items: start; gap: 12px; }
.campo--check input { width: 20px; height: 20px; min-height: 0; margin: 3px 0 0; accent-color: var(--acento-relleno); }
.campo--check label { font-weight: 400; font-size: 0.92rem; color: var(--texto-2); }
.campo--check .campo__error { grid-column: 2; }
.formulario .boton { grid-column: 1 / -1; margin-top: 6px; }
.formulario__estado { grid-column: 1 / -1; margin: 0; color: var(--texto-2); font-size: 0.92rem; }
.formulario__estado.error { color: var(--error); }
.formulario.enviando .boton { opacity: 0.6; pointer-events: none; }
.confirmacion { padding: 12px 0; }
.confirmacion h2 { margin-top: 22px; }
.confirmacion:focus { outline: none; }

/* ---------------------------------------------------- simples y legales */

.simple { padding-top: 180px; padding-bottom: var(--seccion); min-height: 70dvh; }
.simple .temas--nube { margin-top: 24px; }
.legal { padding-top: 160px; padding-bottom: var(--seccion); max-width: 820px; }
.legal h2 { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; margin-top: 36px; }

/* ------------------------------------------------------------------- pie */

.pie { padding: 80px 0 40px; background: var(--tinta-0); border-top: 1px solid var(--linea); font-size: 0.94rem; }
.pie__rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.pie__nombre { color: var(--texto); font-family: var(--serif); font-size: 1.5rem; margin-bottom: 10px; }
.pie__titulo { color: var(--texto); font-weight: 600; margin-bottom: 14px; }
.pie ul { display: grid; gap: 8px; }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--texto); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linea); color: var(--texto-3); font-size: 0.86rem; }
.pie__legal a { color: var(--texto-3); margin-right: 16px; }

.barra-cita { display: none; }

/* -------------------------------------------------------------- aparición */

.js .revela { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--suave), transform 1s var(--suave); transition-delay: calc(var(--i, 0) * 90ms); }
.js .revela.visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------ animaciones */

@keyframes deriva { from { transform: translateX(-7vw); } to { transform: translateX(7vw); } }
@keyframes asoma { from { opacity: 0; transform: translate(-50%, 40px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes aparece { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes giro { to { transform: rotate(360deg); } }
@keyframes respira { 50% { transform: scale(1.045); } }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes late { 50% { opacity: 0.45; } }
@keyframes pulso { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.35); } }
@keyframes brota { to { transform: scale(1); } }
@keyframes flota { 50% { transform: translateY(-10px); } }
@keyframes onda { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes respira-luz { from { opacity: 0.75; } to { opacity: 1; } }

/* ---------------------------------------------------------------- tablet */

@media (max-width: 1080px) {
  .nav { gap: 18px; }
  .nav a { font-size: 0.9rem; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .nav, .cabecera__cta { display: none; }
  .menu { display: block; }
  .cabecera__barra { grid-template-columns: 1fr auto; position: relative; }

  .barra-cita {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px;
    display: flex; gap: 10px; padding: 8px; border-radius: 999px;
    background: rgba(12, 18, 17, 0.86); border: 1px solid var(--linea);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .barra-cita .boton--acento { flex: 1; }
  .pagina-contacto .barra-cita { display: none; }
  body { padding-bottom: 76px; }
  .pagina-contacto { padding-bottom: 0; }
  .hero__der .boton { display: none; }

  .indice__fila a { grid-template-columns: minmax(0, 1fr) 28px; gap: 4px 16px; padding: 24px 4px; }
  .indice__para { grid-column: 1; }
  .indice__nombre { grid-column: 1; }
  .indice__texto { grid-column: 1; }
  .indice__flecha { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

  .recorrido--horizontal .recorrido__lista { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .recorrido--horizontal .recorrido__paso:nth-child(2)::before,
  .recorrido--horizontal .recorrido__paso:nth-child(2)::after { display: none; }

  .esp-como__rejilla, .co__rejilla, .enfoque__rejilla, .zona-hero__rejilla { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------------------------------------------------------------- móvil */

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .cabecera { inset: 10px 0 auto; padding-inline: 12px; }
  .marca__nombre { font-size: 1.02rem; }

  .hero { min-height: 100dvh; }
  .hero__retrato { height: 68dvh; left: 56%; }
  .hero__cielo { background: linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 24%, var(--cielo-3) 38%, #6b746c 46%, var(--amanecer) 54%, var(--tinta-1) 70%); }
  .hero__colina { bottom: 20%; height: 34%; }
  .hero__colina--lejos { bottom: 24%; height: 31%; }
  .hero::after { height: 62%; }
  .hero__contenido { grid-template-columns: 1fr; gap: 18px; padding-top: 0; padding-bottom: 36px; }
  .hero__titulo { font-size: clamp(2.2rem, 10.5vw, 3rem); margin-top: 12px; }
  .hero__der { justify-self: start; max-width: none; }
  .hero__der p { font-size: 1rem; margin-bottom: 18px; }
  .hero__credencial { font-size: 0.85rem; }

  .orbita-seccion { padding-top: 72px; }
  .orbita { aspect-ratio: auto; display: block; }
  .orbita__anillos span { width: 300px !important; height: 300px !important; top: 90px; }
  .orbita__anillos span:nth-child(1) { width: 140px !important; height: 140px !important; }
  .orbita__anillos span:nth-child(2) { width: 220px !important; height: 220px !important; }
  .orbita__centro { margin: 0 auto 0; padding-top: 34px; min-height: 180px; max-width: 17ch; }
  .orbita__chips, .chip { animation: none; }
  .orbita__chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 70px; }
  .orbita__chips li { position: static; width: auto; height: auto; transform: none; }
  .chip { position: static; translate: none; max-width: none; }

  .quien__rejilla, .sm-hero__rejilla, .historia__columnas { grid-template-columns: 1fr; }
  .quien__foto { max-width: 420px; }
  .quien__foto::after { display: none; }
  .datos { grid-template-columns: 1fr 1fr; }

  .recorrido--horizontal .recorrido__lista { grid-template-columns: 1fr; row-gap: 0; }
  .recorrido--horizontal .recorrido__paso { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding-bottom: 32px; }
  .recorrido--horizontal .recorrido__paso:nth-child(2)::before,
  .recorrido--horizontal .recorrido__paso:nth-child(2)::after { display: block; }
  .recorrido--horizontal .recorrido__paso:not(:last-child)::before,
  .recorrido--horizontal .recorrido__paso:not(:last-child)::after { top: 52px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; }
  .recorrido--horizontal .recorrido__paso::after { transform-origin: top; }
  .js .recorrido--horizontal:not(.visible) .recorrido__paso::after { transform: scaleY(0); }
  .recorrido__texto { margin-top: 2px; }
  .recorrido--vertical .recorrido__paso { gap: 20px; min-height: 34vh; }

  .esp-hero { min-height: 0; padding: 112px 0 64px; align-items: start; }
  .esp-hero__motivo, .esp-hero--invertido .esp-hero__motivo { position: relative; left: auto; right: auto; top: auto; transform: none; width: 64%; max-width: 280px; margin: 0 0 18px auto; }
  .esp-hero--invertido .esp-hero__motivo { margin: 0 auto 18px 0; }
  .esp-hero--invertido .esp-hero__texto { padding-left: var(--margen); }
  .esp-hero--fondo .esp-hero__motivo { left: auto; right: auto; transform: none; width: 100%; max-width: none; margin: 0 0 12px; opacity: 0.8; }
  .esp-hero--fondo .esp-hero__motivo .motivo { height: 180px; }
  .esp-hero__motivo { order: -1; }
  .esp-hero { display: flex; flex-direction: column; }

  .pensar__escena { height: auto; display: grid; gap: 18px; }
  .cabeza { position: relative; width: 120px; }
  .pensar--derecha .cabeza { justify-self: end; }
  .pensar__ideas { position: static; display: grid; gap: 14px; }
  .idea, .pensar--derecha .idea { position: relative; left: auto; right: auto; top: auto; animation: none; }
  .idea:nth-child(even) { padding-left: 34px; }
  .pensar--derecha .idea:nth-child(even) { padding-left: 0; padding-right: 34px; }
  .idea__estela { display: none; }
  .idea__burbuja { max-width: none; font-size: 1.05rem; }
  .temas-iconos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tema { padding: 18px 16px; font-size: 0.95rem; }
  .cita__texto { padding: 30px 22px 32px; }
  .cita .botones .boton { width: 100%; }
  .modos-zona, .esp-indice--par { grid-template-columns: 1fr; }
  .modo-zona { min-height: 0; }
  .mapa__nombre { font-size: 17px; }
  .mapa__nombre--zona { font-size: 24px; }
  .rel__lista { grid-template-columns: 1fr; }

  .tarjeta-credenciales { grid-template-columns: 1fr; }
  .tarjeta-credenciales div:nth-child(odd) { border-right: 0; }
  .tarjeta-credenciales div:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
  .sm-hero__foto { max-width: 360px; }
  .formacion__item { grid-template-columns: 1fr; padding-left: 34px; }
  .formacion__grupo { grid-row: auto; }

  .ct-minutos { grid-template-columns: 1fr; gap: 26px; }
  .ct-modos__rejilla, .ses-modos { grid-template-columns: 1fr; }
  .modo--grande { min-height: 340px; grid-row: auto; }
  .ses-modo { padding: 30px; }

  .esp-indice { grid-template-columns: 1fr; grid-auto-rows: minmax(200px, auto); }
  .esp-indice__item:first-child { grid-row: auto; }
  .esp-indice__item:first-child .esp-indice__motivo { width: 70%; right: -14%; top: -18%; }

  .formulario { grid-template-columns: 1fr; }
  .campo--medio { grid-column: 1 / -1; }

  .pie__rejilla { grid-template-columns: 1fr; gap: 32px; }
}

/* -------------------------------------------------- movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revela { opacity: 1; transform: none; }
  .m-onda, .m-arista, .m-rama { stroke-dashoffset: 0; }
  .m-hoja { transform: none; }
  .js .recorrido .recorrido__texto { opacity: 1 !important; transform: none !important; }
}