/* katiasermeno.com · estilos del sitio (Inicio, Servicios, Contacto y 404) */

/* Fuentes alojadas en el propio sitio */
@font-face { font-family: "Roboto Serif"; src: url("../fonts/roboto-serif-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --a50: #FAF5FF; --a100: #F4E8FF; --a200: #EBD5FF; --a300: #DBB4FE; --a400: #C584FC;
  --a600: #9A33EA; --a700: #8522CE; --a800: #7021A8; --a950: #3F0764;

  --bg: #FFFFFF;
  --surface: var(--a50);
  --tint: var(--a100);
  --line: #ECE6F2;
  --ink: #2B2733;
  --ink-soft: #5E5668;
  --ink-faint: #8E8699;
  --heading: var(--a950);
  --link: var(--a700);
  --accent: var(--a700);
  --accent-hover: var(--a800);
  --on-accent: #FFFFFF;
  --focus: var(--a600);
  --orb: rgba(197, 132, 252, .22);
  --halo-1: var(--a200);
  --halo-2: rgba(244, 232, 255, .6);
  --arch-top: var(--a50);
  --arch-bottom: var(--a100);
  --header-bg: rgba(255, 255, 255, 0.86);
  --shadow-btn: 0 10px 24px -12px rgba(133, 34, 206, 0.6);
  --shadow-pop: 0 18px 40px -18px rgba(63, 7, 100, .28);

  --serif: "Roboto Serif", Georgia, "Times New Roman", serif;

  /* Escala tipográfica: base de 16 px y proporción 1,25 en escritorio (16 · 20 · 25 · 31 · 39 · 49 · 76) */
  --fs-xs: 0.8125rem;                                      /* 13: notas legales */
  --fs-sm: 0.875rem;                                       /* 14: apoyo, etiquetas */
  --fs-base: 1rem;                                         /* 16: texto corrido */
  --fs-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);    /* 17 → 19: introducciones */
  --fs-q: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);       /* 17 → 19: preguntas */
  --fs-h4: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);       /* 18 → 20: títulos de tarjeta */
  --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.5625rem);      /* 22 → 25 */
  --fs-sub: clamp(1.375rem, 1.15rem + .9vw, 1.9375rem);    /* 22 → 31: subtítulo de la primera pantalla */
  --fs-index: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);      /* 24 → 36: índice de servicios */
  --fs-h2: clamp(2rem, 1.45rem + 2.3vw, 3rem);             /* 32 → 48: títulos de sección */
  --fs-h1: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);        /* 44 → 76: titular */
  --fs-price: clamp(3rem, 2.2rem + 3.2vw, 4.5rem);         /* 48 → 72: precio */
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --container: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 76px;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  interpolate-size: allow-keywords;
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
html {
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
@view-transition { navigation: auto; }
/* Lenis (desplazamiento suave) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; font-optical-sizing: auto; color: var(--heading); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }

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

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 11vw, 140px); position: relative; }
.rule { border-top: 1px solid var(--line); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.pendiente { color: var(--ink-soft); font-style: italic; text-decoration: underline dashed var(--a400); text-underline-offset: 4px; }

/* Esferas de color: acentos suaves con parallax */
.orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--orb), transparent); will-change: transform; }

/* Aparición al hacer scroll */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Introducciones de sección: un paso por encima del texto corrido */
.services__head p, .steps__head p, .price__grid > div > p, .faq__grid > div > p, .abroad p {
  font-size: var(--fs-lead); line-height: 1.55;
}
.steps__head p, .price__grid > div > p, .faq__grid > div > p, .abroad h2 + p { margin-top: clamp(18px, 1.6vw, 24px); }
.step h3 { font-size: var(--fs-h4); line-height: 1.3; }

/* ---------- Links ---------- */
.link-draw {
  color: var(--link); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1.5px;
  transition: background-size .3s var(--ease); padding-bottom: 2px;
}
.link-draw:hover, .link-draw:focus-visible { background-size: 100% 1.5px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border-radius: 999px; border: 0;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--small { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* El destello se mueve con background-position y no con transform: así el navegador no separa el texto del botón
     en una capa propia, que se desfasaba un instante respecto al resto de la caja cuando esta se desplazaba. */
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { box-shadow: var(--shadow-btn); }
  .btn:hover::after { background-position: 0 0; transition: background-position .7s var(--ease); }
}
.btn:active { transform: scale(.98); box-shadow: none; }
.btn .icon-check { display: none; }
.btn.is-opening .icon-chat { display: none; }
.btn.is-opening .icon-check { display: block; }
/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: transparent;
  transition: transform .35s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-compact {
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-110%); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); transition: min-height .3s var(--ease); }
.site-header.is-compact .header__inner { min-height: 64px; }
.logo { display: inline-flex; flex: none; }
.logo img { height: 44px; width: auto; transition: height .3s var(--ease); }
.site-header.is-compact .logo img { height: 38px; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__list a { color: var(--ink); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.nav__list a:hover { color: var(--link); }
.burger {
  display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center;
}
.burger svg { width: 22px; height: 22px; }
.burger .icon-close { display: none; }
.burger[aria-expanded="true"] .icon-open { display: none; }
.burger[aria-expanded="true"] .icon-close { display: block; }
.header__cta-short { display: none; }
@media (max-width: 880px) {
  .logo img { height: 36px; }
  .burger { display: inline-flex; }
  .header__cta-long { display: none; }
  .header__cta-short { display: inline; }
  .nav { gap: 10px; }
  .nav__list {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 20px; background: var(--bg);
    box-shadow: 0 12px 24px -16px rgba(43, 39, 51, .35); border-top: 1px solid var(--line);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .nav__list.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .nav__list a { display: block; padding: 14px 0; font-size: 1.125rem; border-bottom: 1px solid var(--line); }
  .nav__list li:last-child a { border-bottom: 0; }
}
@media (max-width: 380px) { .header__cta { padding-inline: 14px; } }

/* ---------- Primera pantalla ---------- */
.hero {
  position: relative; overflow: clip;
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + clamp(32px, 6vw, 88px)) clamp(72px, 9vw, 120px);
  background:
    radial-gradient(55% 65% at 82% 38%, rgba(219, 180, 254, .45), transparent 70%),
    radial-gradient(40% 50% at 100% 0%, rgba(197, 132, 252, .22), transparent 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(235, 213, 255, .55), transparent 72%),
    radial-gradient(35% 40% at 30% 10%, rgba(244, 232, 255, .7), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FCF9FF 100%);
}
.hero__glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(2px);
  background: radial-gradient(closest-side, rgba(197, 132, 252, .28), transparent); }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__sub { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: var(--fs-sub); line-height: 1.25; letter-spacing: -0.015em; color: var(--a800); max-width: 26ch; text-wrap: balance; }
.hero__lead { margin-top: 22px; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 38px; }
.hero__media { position: relative; justify-self: center; width: min(100%, 470px); display: flex; flex-direction: column; align-items: center; }
.facts {
  position: relative; z-index: 3; width: 100%; margin: -32px 0 0; padding: 18px 8px; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #FFFFFF;
  border: 1px solid var(--a100); border-radius: 24px; box-shadow: 0 22px 48px -24px rgba(63, 7, 100, .38);
}
.facts li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 4px 10px; border-left: 1px solid var(--line); }
.facts li:first-child { border-left: 0; }
.facts__icon { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--a50); color: var(--a700); box-shadow: inset 0 0 0 1px var(--a100); transition: transform .3s var(--ease-out), background-color .3s var(--ease); }
.facts__icon svg { width: 19px; height: 19px; }
.facts li:hover .facts__icon { transform: translateY(-2px); background: var(--a100); }
.facts__text { display: flex; flex-direction: column; }
.facts strong { font-family: var(--serif); font-weight: 500; font-size: 1.0625rem; color: var(--heading); line-height: 1.25; letter-spacing: -0.01em; }
.facts span { font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-soft); }

.arch-wrap { position: relative; width: min(100%, 380px); }
.arch { position: relative; margin: 0; padding-top: 12%; }
.halo-wrap { position: absolute; inset: -6% -20% -16%; z-index: 0; }
.halo { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, var(--halo-1), var(--halo-2) 60%, transparent 100%); }
.arch__frame {
  position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 32px 32px;
  background: linear-gradient(180deg, var(--arch-top), var(--arch-bottom));
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line);
}
.arch__photo {
  position: absolute; z-index: 2; left: 50%; bottom: 0; width: 90%; height: auto; transform: translateX(-55%);
  clip-path: inset(-40% 0 0 0 round 0 0 32px 32px);
  filter: drop-shadow(0 18px 30px rgba(63, 7, 100, .18));
}
@media (prefers-reduced-motion: no-preference) {
  .seq { animation: rise .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  .arch { animation: lift 1s var(--ease-out) both .15s; }
  .halo { animation: breathe 8s ease-in-out infinite alternate; }
  .is-paused .halo { animation-play-state: paused; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lift { from { transform: translateY(18px); } }
@keyframes breathe { from { transform: scale(.92); opacity: .7; } to { transform: scale(1.05); opacity: 1; } }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { margin-top: 8px; } .arch-wrap { width: min(78%, 320px); } }
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; gap: 12px; padding: 18px 20px; margin-top: -40px; }
  .facts li { flex-direction: row; text-align: left; gap: 12px; padding: 0; border-left: 0; }
  .facts strong { font-size: var(--fs-h4); }
  .facts span { font-size: var(--fs-sm); }
  .hero__actions .btn { width: 100%; }
  .btn { padding-inline: 20px; }
  .arch-wrap { width: min(72%, 260px); }
}

/* ---------- Credenciales ---------- */
.creds { background: linear-gradient(90deg, #F7EEFF 0%, #EFE0FF 50%, #F7EEFF 100%); border-block: 1px solid var(--a200); }
.creds__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; list-style: none; margin: 0; padding: 24px 0; }
.creds__list li { padding: 0 22px; font-size: var(--fs-sm); font-weight: 500; color: var(--a800); border-left: 1px solid var(--a300); }
.creds__list li:first-child { border-left: 0; }
@media (max-width: 640px) {
  .creds__list { justify-content: flex-start; flex-direction: column; gap: 6px; }
  .creds__list li { border-left: 0; padding: 0; }
}

/* ---------- Servicios ---------- */
.services { overflow: clip; }
.services__head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.services__head h2 { max-width: 14ch; }
.services__head p { color: var(--ink-soft); }
.svc-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: repeat(5, auto) 1fr; column-gap: clamp(32px, 6vw, 96px);
}
.svc { display: contents; }
.svc__h { grid-column: 1; margin: 0; border-top: 1px solid var(--line); font-size: inherit; }
.svc:last-child .svc__h { border-bottom: 1px solid var(--line); }
.svc__btn {
  appearance: none; background: none; border: 0; margin: 0; width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0 24px 30px; position: relative;
  font: 500 var(--fs-index)/1.12 var(--serif); letter-spacing: -0.015em;
  color: var(--ink-faint);
  transition: color .35s var(--ease);
}
.svc__btn::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px;
  background: var(--accent); transform: translateY(-50%); transition: height .45s var(--ease-out);
}
.svc__btn:hover, .svc.is-active .svc__btn { color: var(--heading); }
.svc.is-active .svc__btn::before { height: 52%; }
.svc__arrow {
  flex: none; width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--link); opacity: 0; transform: translateX(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out), background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.svc__arrow svg { width: 20px; height: 20px; }
.svc__btn:hover .svc__arrow { opacity: 1; transform: none; }
.svc.is-active .svc__arrow { opacity: 1; transform: none; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.svc__panel {
  grid-column: 2; grid-row: 1 / -1; align-self: start;
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 28px);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .45s var(--ease), transform .55s var(--ease-out), visibility 0s linear .45s;
}
.svc.is-active .svc__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .06s, transform .55s var(--ease-out) .06s, visibility 0s; }
.svc__card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; background: var(--bg); box-shadow: var(--shadow-pop); }
.svc__card::before {
  content: ""; position: absolute; width: 280px; height: 280px; right: -110px; top: -120px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--orb), transparent); pointer-events: none;
}
.svc__inner { position: relative; padding: clamp(28px, 3.6vw, 48px); }
.svc__lead { font-family: var(--serif); font-size: var(--fs-h4); line-height: 1.4; letter-spacing: -0.005em; color: var(--heading); }
.svc__signs-title { margin-top: 28px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.svc__signs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.svc__signs li { position: relative; padding-left: 22px; color: var(--ink-soft); }
.svc__signs li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--a400); }
.svc__link { display: inline-block; margin-top: 30px; font-weight: 600; color: var(--link); text-decoration: none; }
.svc__link svg { display: inline-block; width: 20px; height: 20px; margin-left: 8px; vertical-align: -4px; transition: transform .3s var(--ease-out); }
.svc__link:hover svg, .svc__link:focus-visible svg { transform: translateX(5px); }
.svc__inner .btn { margin-top: 28px; }

@media (max-width: 860px) {
  .services__head { grid-template-columns: 1fr; }
  .svc-grid { display: block; }
  .svc { display: block; border-top: 1px solid var(--line); }
  .svc:last-child { border-bottom: 1px solid var(--line); }
  .svc__h, .svc:last-child .svc__h { border: 0; }
  .svc__btn { padding: 20px 0 20px 20px; }
  .svc__arrow { opacity: 1; transform: rotate(90deg); width: 40px; height: 40px; }
  .svc.is-active .svc__arrow { transform: rotate(-90deg); }
  .svc__panel {
    position: static; opacity: 1; transform: none; visibility: hidden;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .45s var(--ease-out), visibility 0s linear .45s;
  }
  .svc.is-active .svc__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--ease-out), visibility 0s; }
  .svc__card { min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .svc__card::before { display: none; }
  .svc__inner { padding: 0 0 30px 20px; }
}

/* ---------- Módulos con fondo morado: Precio y Lejos de casa ---------- */
.band-purple {
  overflow: clip; color: #FFFFFF;
  background:
    radial-gradient(60% 80% at 12% 10%, rgba(154, 51, 234, .55), transparent 60%),
    radial-gradient(50% 70% at 92% 90%, rgba(197, 132, 252, .35), transparent 65%),
    linear-gradient(135deg, #3F0764 0%, #5C1C87 55%, #7021A8 100%);
}
.band-purple .orb { background: radial-gradient(closest-side, rgba(219, 180, 254, .35), transparent); mix-blend-mode: screen; }
.band-purple h2 { color: #FFFFFF; }
.abroad__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.abroad p { margin-top: 20px; color: #E9DAFB; }
.abroad .btn { margin-top: 34px; }
.btn--light { background: #FFFFFF; color: var(--a950); }
.btn--light:hover { background: var(--a100); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .btn--light:hover { box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45); } }
.band-purple :focus-visible { outline-color: #FFFFFF; }
.band-purple .price__grid > div > p { color: #E9DAFB; }
.band-purple .price-card { color: var(--ink); border-color: transparent; box-shadow: 0 34px 70px -30px rgba(20, 0, 40, .75); }
.band-purple .price-card :focus-visible { outline-color: var(--focus); }
.tz {
  position: relative; border-radius: 28px; padding: clamp(24px, 3vw, 36px);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -30px rgba(20, 0, 40, .7);
}
.tz__label { display: block; font-weight: 600; font-size: var(--fs-base); color: #FFFFFF; }
.combo { position: relative; margin-top: 12px; }
.combo__input {
  width: 100%; min-height: 54px; padding: 12px 52px 12px 18px; border-radius: 16px;
  border: 1px solid transparent; background: #FFFFFF; color: var(--ink);
  font: 500 1rem var(--sans); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.combo__input::placeholder { color: var(--ink-faint); }
.combo__input:focus { outline: none; border-color: var(--a300); box-shadow: 0 0 0 4px rgba(219, 180, 254, .45); }
.combo__toggle {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 12px;
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center;
}
.combo__toggle svg { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.combo.is-open .combo__toggle svg { transform: rotate(180deg); }
.combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  max-height: 288px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(20, 0, 40, .55);
  opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.combo.is-open .combo__list { opacity: 1; transform: none; visibility: visible; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s; }
.combo__option { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.combo__option strong { font-weight: 600; font-size: 1rem; color: var(--ink); }
.combo__option span { font-size: var(--fs-xs); color: var(--ink-soft); }
.combo__option mark { background: var(--a100); color: inherit; border-radius: 4px; padding: 0 1px; }
.combo__option.is-active { background: var(--a50); }
.combo__option[aria-selected="true"] strong { color: var(--a700); }
.combo__empty { padding: 14px 12px; font-size: .95rem; color: var(--ink-soft); }
.tz__hint { margin-top: 10px; font-size: var(--fs-sm); color: #D9C6EE; }
.tz__out { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tz__clock { display: flex; flex-direction: column; gap: 2px; }
.tz__clock span { font-size: var(--fs-sm); color: #D9C6EE; }
.tz__clock strong { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tz__clock--local strong { color: var(--a300); }
.tz__diff { margin-top: 14px; font-size: var(--fs-sm); color: #E9DAFB; min-height: 1.6em; }
.tz__clock strong.is-updating { animation: tick .4s var(--ease-out); }
@keyframes tick { from { opacity: .2; transform: translateY(6px); } }
@media (max-width: 860px) { .abroad__grid { grid-template-columns: 1fr; } }

/* ---------- Confidencialidad ---------- */
.confid { margin-top: 64px; display: flex; align-items: flex-start; gap: 18px; padding: 24px 28px; border-radius: 24px; background: var(--a50); box-shadow: inset 0 0 0 1px var(--a100); max-width: 760px; }
.confid p { color: var(--ink-soft); max-width: none; }
.confid strong { color: var(--heading); font-weight: 600; }
.confid__icon { flex: none; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: #FFFFFF; color: var(--a700); box-shadow: 0 6px 16px -8px rgba(63, 7, 100, .35); }
.confid__icon svg { width: 20px; height: 20px; }

/* ---------- Cómo empezar ---------- */
.steps__head { max-width: 680px; }
.steps__head p { margin-top: 18px; color: var(--ink-soft); }
.steps { --p: 0; position: relative; margin-top: 60px; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps__track, .steps__fill { position: absolute; top: 27px; left: 28px; right: calc(33.333% - 28px - 26px); height: 2px; border-radius: 2px; }
.steps__track { background: var(--line); }
.steps__fill { background: var(--accent); transform-origin: left center; transform: scaleX(var(--p)); }
.step { position: relative; }
.step__num {
  width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center;
  background: var(--bg); border: 2px solid var(--line);
  font-family: var(--serif); font-size: var(--fs-h4); color: var(--ink-soft); position: relative; z-index: 1;
  transition: border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.step.is-active .step__num { border-color: var(--accent); background: var(--accent); color: var(--on-accent); transform: scale(1.04); }
.step h3 { margin-top: 22px; }
.step p { margin-top: 10px; color: var(--ink-soft); }
@media (max-width: 860px) {
  .steps__list { grid-template-columns: 1fr; gap: 32px; }
  .steps__track, .steps__fill { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; }
  .steps__fill { transform-origin: top center; transform: scaleY(var(--p)); }
  .step { padding-left: 80px; min-height: 56px; }
  .step__num { position: absolute; left: 0; top: 0; }
  .step h3 { margin-top: 10px; }
}

/* ---------- Sobre mí ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about__quote { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; color: var(--heading); margin: 22px 0 0; max-width: 22ch; }
.about__body p + p { margin-top: 18px; }
.about__sign { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.about__sign img { width: 44px; height: 44px; }
.about__sign strong { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--fs-base); color: var(--heading); }
.about__sign span { font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } }

/* ---------- Precio ---------- */
.price__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.price__grid > div > p { margin-top: 18px; color: var(--ink-soft); }
.price-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; padding: clamp(26px, 4vw, 44px); background: var(--bg); box-shadow: var(--shadow-pop); }
.price-card::before { content: ""; position: absolute; width: 260px; height: 260px; left: -120px; bottom: -140px; border-radius: 50%; background: radial-gradient(closest-side, var(--orb), transparent); pointer-events: none; }
.price-card > * { position: relative; }
.price-card__amount { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-card__amount strong { font-family: var(--serif); font-weight: 500; font-size: var(--fs-price); line-height: 1; letter-spacing: -0.03em; color: var(--heading); }
.price-card__amount span { color: var(--ink-soft); }
.price-card dl { margin: 28px 0 0; display: grid; }
.price-card dl div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.price-card dt { font-weight: 600; color: var(--ink); }
.price-card dd { margin: 0; color: var(--ink); }
.price-card .btn { margin-top: 28px; }
@media (max-width: 860px) { .price__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .price-card dl div { grid-template-columns: 1fr; gap: 2px; } .price-card .btn { width: 100%; } }

/* ---------- Preguntas frecuentes ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__grid > div > p { margin-top: 16px; color: var(--ink-soft); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-weight: 600; font-size: var(--fs-q); line-height: 1.4; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--link); }
.faq__chev { flex: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--link); transition: transform .25s var(--ease), background-color .25s var(--ease); }
.faq__chev svg { width: 18px; height: 18px; }
.faq details[open] .faq__chev { transform: rotate(180deg); background: var(--surface); }
.faq__answer { padding: 0 52px 24px 0; color: var(--ink-soft); }
/* La apertura y el cierre de la respuesta se animan en js/site.js (funciona igual en todos los navegadores).
   Mientras se cierra, el chevron ya vuelve a su sitio, aunque [open] siga puesto hasta que termine el movimiento. */
.faq details.is-closing .faq__chev { transform: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .faq summary:hover .faq__chev { transform: scale(1.08); } .faq details[open] summary:hover .faq__chev { transform: rotate(180deg) scale(1.08); } .faq details.is-closing summary:hover .faq__chev { transform: scale(1.08); } }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } .faq__answer { padding-right: 0; } }

/* ---------- Contacto ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__intro { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 32px); }
.contact__intro > p { margin-top: clamp(18px, 1.6vw, 24px); color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.6; }
.contact__points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.contact__points li { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.contact__points span { flex: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--a50); color: var(--a700); }
.contact__points svg { width: 18px; height: 18px; }
.contact .crisis { margin-top: 36px; }
.form-card { position: relative; border: 1px solid var(--line); border-radius: 32px; padding: clamp(24px, 3.6vw, 44px); background: #FFFFFF; box-shadow: var(--shadow-pop); }
.cform { display: grid; gap: 20px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); padding: 0; }
.field__opt { font-weight: 400; color: var(--ink-faint); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: #FFFFFF; color: var(--ink); font: 400 1rem/1.4 var(--sans);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--a200); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--a600); box-shadow: 0 0 0 4px var(--a100); }
.cform .field [aria-invalid="true"] { border-color: #B42318; background: #FFFBFA; }
.cform .field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px #FEE4E2; }
.field__error { margin: 0; font-size: var(--fs-sm); color: #B42318; min-height: 0; overflow: clip; transition: height .3s var(--ease-out), opacity .25s var(--ease), transform .3s var(--ease-out), display .3s allow-discrete; }
.field__error:empty { display: none; height: 0; opacity: 0; transform: translateY(-4px); }
@starting-style { .cform.is-ready .field__error { height: 0; opacity: 0; transform: translateY(-4px); } }
.field__hint { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.select { position: relative; }
.select select { appearance: none; padding-right: 44px; cursor: pointer; }
.select svg { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-soft); pointer-events: none; }
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 16px; background: var(--a50); box-shadow: inset 0 0 0 1px var(--a100); }
.seg__opt { position: relative; z-index: 1; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg__opt span { display: grid; place-items: center; min-height: 44px; border-radius: 12px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-soft); transition: color .25s var(--ease); }
.seg__opt input:checked + span { color: var(--a800); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 12px; background: #FFFFFF; box-shadow: 0 4px 12px -6px rgba(63, 7, 100, .35); transform: translateX(calc(var(--seg, 0) * 100%)); transition: transform .35s var(--ease-out); }
/* Teléfono y correo: al cambiar de canal uno se pliega y el otro se despliega, sin saltos de altura.
   El margen negativo anula el hueco de 20px del formulario mientras el campo está plegado. Los estados iniciales solo
   rigen cuando el formulario ya está listo (.is-ready), para que no se animen al cargar la página. */
.field--reveal {
  overflow: clip; overflow-clip-margin: 6px;
  transition: height .35s var(--ease-out), margin-bottom .35s var(--ease-out), opacity .25s var(--ease), transform .35s var(--ease-out), display .35s allow-discrete, overflow .35s allow-discrete;
}
.field--reveal[hidden] { display: none; height: 0; margin-bottom: -20px; opacity: 0; transform: translateY(-6px); }
@starting-style { .cform.is-ready .field--reveal { height: 0; margin-bottom: -20px; opacity: 0; transform: translateY(-6px); } }
.check { display: flex; align-items: center; gap: 12px; font-weight: 400 !important; font-size: var(--fs-base) !important; cursor: pointer; }
.check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.5px solid var(--a300); background: #FFFFFF; display: grid; place-items: center; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.check input::after { content: ""; width: 10px; height: 6px; border: 2px solid #FFFFFF; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform .2s var(--ease-out); margin-top: -2px; }
.check input:checked { background: var(--a700); border-color: var(--a700); }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check input[aria-invalid="true"] { border-color: #B42318; }
.cform__submit { width: 100%; margin-top: 4px; }
.cform__submit .icon-mail { display: none; }
.cform.is-mail .cform__submit .icon-mail { display: block; }
.cform.is-mail .cform__submit .icon-chat { display: none; }
.cform__note { margin: -6px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-soft); max-width: none; }
.cform.is-shake { animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.cform__done { text-align: center; padding: clamp(24px, 4vw, 48px) 0; transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
@starting-style { .cform__done { opacity: 0; transform: translateY(14px); } }
.cform__done:focus { outline: none; }
.cform__done-icon { width: 72px; height: 72px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; background: var(--a700); color: #FFFFFF; animation: pop .5s var(--ease-out); }
.cform__done-icon svg { width: 34px; height: 34px; }
.cform__done h3 { margin-top: 22px; }
.cform__done p { margin: 12px auto 0; color: var(--ink-soft); }
.cform__done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
@media (max-width: 520px) { .cform__done-actions { flex-direction: column; } .cform__done-actions .btn { width: 100%; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } }
@media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; } .contact__intro { position: static; } }
@media (max-width: 520px) { .cform__row { grid-template-columns: 1fr; } }

.crisis { margin-top: 48px; border-radius: 20px; border: 1px solid var(--line); }
.crisis summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 22px; font-weight: 600; color: var(--ink); }
.crisis summary::-webkit-details-marker { display: none; }
.crisis summary svg { width: 22px; height: 22px; color: var(--link); flex: none; }
.crisis__body { padding: 0 22px 22px 56px; color: var(--ink); }
.crisis__body p + p { margin-top: 10px; }
.crisis::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease-out), content-visibility .3s allow-discrete; }
.crisis[open]::details-content { block-size: auto; }

/* ---------- Pie ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 32px; font-size: var(--fs-sm); }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
.footer__grid h2 { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: 0; }
.footer__grid ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.footer__iconlist a { display: inline-flex; align-items: center; gap: 10px; }
.footer__iconlist svg { flex: none; width: 18px; height: 18px; color: var(--a400); transition: color .2s var(--ease); }
.footer__iconlist a:hover svg { color: var(--link); }
.footer__grid a { color: var(--ink-soft); text-decoration: none; }
.footer__grid a:hover { color: var(--link); }
.footer__brand img { height: 40px; width: auto; }
.footer__brand p { margin-top: 14px; color: var(--ink-soft); font-size: var(--fs-sm); }
.footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: var(--fs-xs); }
.footer__bottom a { color: var(--ink-soft); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 880px) { .site-footer { padding-bottom: calc(32px + 64px); } }

/* ---------- Burbuja fija de WhatsApp ---------- */
.wa-bubble {
  position: fixed; z-index: 60; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: flex-end;
  opacity: 0; transform: translateY(24px) scale(.6); pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease-out);
}
.wa-bubble.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-bubble__btn {
  position: relative; display: flex; align-items: center; gap: 0; height: 60px; min-width: 60px; padding: 0 18px;
  border-radius: 999px; background: var(--a700); color: #FFFFFF; text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(63, 7, 100, .65); overflow: hidden;
  transition: background-color .25s var(--ease), gap .35s var(--ease-out), padding .35s var(--ease-out);
}
.wa-bubble__btn svg { flex: none; width: 24px; height: 24px; }
.wa-bubble__label { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; font-size: var(--fs-base); transition: max-width .4s var(--ease-out); }
.wa-bubble__btn:hover, .wa-bubble__btn:focus-visible, .wa-bubble.is-peek .wa-bubble__btn { background: var(--a800); gap: 10px; padding: 0 22px 0 18px; }
.wa-bubble__btn:hover .wa-bubble__label, .wa-bubble__btn:focus-visible .wa-bubble__label, .wa-bubble.is-peek .wa-bubble__label { max-width: 220px; }
.wa-bubble__ring { position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(154, 51, 234, .55); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .wa-bubble.is-visible .wa-bubble__ring { animation: ring 2.4s var(--ease-out) 2; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(154, 51, 234, .5); } 100% { box-shadow: 0 0 0 18px rgba(154, 51, 234, 0); } }
@media (max-width: 520px) { .wa-bubble__btn { height: 56px; min-width: 56px; padding: 0 16px; } }

/* ---------- Aviso breve ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 16px;
  background: var(--heading); color: var(--bg); font-size: var(--fs-sm); text-align: center;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: inherit; }
@media (max-width: 880px) { .toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .steps { --p: 1 !important; }
}


/* =================== Página de servicios =================== */
.nav__list a[aria-current="page"] { color: var(--a700); }

/* Primera pantalla */
.shero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.shero h1 { font-size: clamp(2.25rem, 1.45rem + 3.1vw, 3.875rem); line-height: 1.06; max-width: 17ch; }
.shero .hero__lead { margin-top: 26px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--a300); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--link); }
.chips { margin-top: 38px; }
.chips__label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.chips ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; }
.chips a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid var(--a200); color: var(--a800);
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.chips a svg { width: 18px; height: 18px; }
.chips a:hover, .chips a:focus-visible { transform: translateY(-2px); background: var(--a50); border-color: var(--a400); box-shadow: 0 10px 20px -14px rgba(63, 7, 100, .5); }

.pcard { background: #FFFFFF; border: 1px solid var(--a100); border-radius: 28px; padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-pop); }
.pcard__head { display: flex; gap: 16px; align-items: center; }
.pcard__photo { flex: none; width: 84px; height: 84px; border-radius: 999px; overflow: hidden; background: linear-gradient(180deg, var(--a100), var(--a200)); }
.pcard__photo img { width: 130%; max-width: none; margin: 6px 0 0 -12%; }
.pcard__name { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h4); color: var(--heading); line-height: 1.2; }
.pcard__role { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.45; }
.pcard__facts { list-style: none; margin: 22px 0 0; padding: 0; }
.pcard__facts li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.pcard__facts li > span { grid-row: span 2; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--a50); color: var(--a700); }
.pcard__facts svg { width: 19px; height: 19px; }
.pcard__facts strong { font-weight: 600; color: var(--ink); line-height: 1.3; }
.pcard__facts em { font-style: normal; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.35; }
.pcard__lock { margin-top: 14px; display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--a800); max-width: none; }
.pcard__lock svg { width: 18px; height: 18px; flex: none; }

/* Navegación fija entre servicios */
.subnav {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 40;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-block: 1px solid var(--line);
}
.subnav__list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a {
  display: block; white-space: nowrap; padding: 8px 15px; border-radius: 999px;
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink-soft); text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.subnav__list a:hover { color: var(--a800); background: var(--a50); }
.subnav__list a.is-active { color: var(--a800); background: var(--a100); }
/* El documento ya reserva el alto de la cabecera (scroll-padding); aquí se suma la barra de servicios */
.svc-mod, #como-empezar, #precio, #preguntas, #agenda { scroll-margin-top: 52px; }

/* Módulo de servicio */
.svc-mod { overflow: clip; padding-top: clamp(56px, 6vw, 84px); }
.svc-mod--tint { background: linear-gradient(180deg, #FCF9FF 0%, #F6EDFF 100%); }
.svc-mod__top { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.svc-mod__icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--a50); color: var(--a700); box-shadow: inset 0 0 0 1px var(--a100); margin-bottom: 18px; }
.svc-mod__icon svg { width: 24px; height: 24px; }
.svc-mod h2 { max-width: 20ch; }
/* Al llegar desde un anuncio, el módulo destino se marca un instante */
.svc-mod.is-target .svc-mod__icon { animation: target-pulse 1.6s var(--ease-out) 2; }
@keyframes target-pulse { 0% { box-shadow: 0 0 0 0 rgba(154, 51, 234, .45); } 100% { box-shadow: 0 0 0 16px rgba(154, 51, 234, 0); } }
.svc-mod__def { margin-top: 18px; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.svc-mod__intro > p:not(.svc-mod__def):not(.safety) { margin-top: 22px; color: var(--ink-soft); }
.svc-mod__cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.svc-mod__note { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.stat { margin: 36px 0 0; padding: 20px 24px; border-left: 3px solid var(--a400); background: var(--a50); border-radius: 0 18px 18px 0; }
.stat__num { margin: 0; font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); color: var(--heading); line-height: 1.2; }
.stat figcaption { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }
.safety { margin-top: 24px; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--a50); font-size: var(--fs-sm); color: var(--ink-soft); }
.safety svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--a700); }

/* Tarjeta «¿Te identificas con algo de esto?» */
.check-card { color: var(--ink); background: #FFFFFF; border: 1px solid var(--a100); border-radius: 28px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-pop); }
.check-card h3 { font-size: var(--fs-h4); color: var(--heading); }
.check-card__hint { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-soft); }
.sigs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.sigs label {
  position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--line); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease-out);
}
.sigs label:hover { border-color: var(--a200); background: var(--a50); }
.sigs label:active { transform: scale(.99); }
.sigs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sigs__box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--a300); background: #FFFFFF; display: grid; place-items: center; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.sigs__box::after { content: ""; width: 10px; height: 6px; border: 2px solid #FFFFFF; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform .22s var(--ease-out); margin-top: -2px; }
.sigs input:checked + .sigs__box { background: var(--a700); border-color: var(--a700); }
.sigs input:checked + .sigs__box::after { transform: rotate(-45deg) scale(1); }
.sigs input:focus-visible + .sigs__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.sigs label:has(input:checked) { background: var(--a50); border-color: var(--a300); }
.sigs label > span:last-child { color: var(--ink); line-height: 1.5; }
.check-card__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.check-card__count { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.js-sig-send:not([hidden]) { animation: fieldIn .35s var(--ease-out); }

/* Cómo te acompaño */
.svc-mod__how { position: relative; z-index: 1; margin-top: clamp(56px, 7vw, 88px); }
.svc-mod__how > h3 { font-size: var(--fs-h3); }
.how { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.how li { padding: 24px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--line); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease); }
@media (hover: hover) { .how li:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); } }
.how__dot { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--a50); color: var(--a700); }
.how__dot svg { width: 21px; height: 21px; }
.how h4 { margin: 16px 0 0; font-family: var(--serif); font-weight: 500; font-size: var(--fs-h4); line-height: 1.3; color: var(--heading); }
.how p { margin-top: 8px; color: var(--ink-soft); }
.svc-mod__faq { position: relative; z-index: 1; margin-top: 40px; max-width: 820px; border-top: 1px solid var(--line); }

/* Variante morada */
.svc-mod--purple .svc-mod__icon { background: rgba(255, 255, 255, .12); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.svc-mod--purple .svc-mod__def { color: #FFFFFF; }
.svc-mod--purple .svc-mod__intro > p:not(.svc-mod__def):not(.safety) { color: #E9DAFB; }
.svc-mod--purple .svc-mod__note { color: #D9C6EE; }
.svc-mod--purple .svc-mod__how > h3 { color: #FFFFFF; }
.svc-mod--purple .how li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.svc-mod--purple .how h4 { color: #FFFFFF; }
.svc-mod--purple .how p { color: #E9DAFB; }
.svc-mod--purple .how__dot { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.svc-mod--purple .svc-mod__faq, .svc-mod--purple .faq details { border-color: rgba(255, 255, 255, .2); }
.svc-mod--purple .faq summary { color: #FFFFFF; }
.svc-mod--purple .faq summary:hover { color: var(--a200); }
.svc-mod--purple .faq__answer { color: #E9DAFB; }
.svc-mod--purple .faq__chev { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; }
.svc-mod--purple .faq details[open] .faq__chev { background: rgba(255, 255, 255, .12); }

/* Cierre */
.cta-final, .faq--glow {
  overflow: clip;
  background:
    radial-gradient(50% 70% at 85% 30%, rgba(219, 180, 254, .4), transparent 70%),
    radial-gradient(45% 60% at 5% 100%, rgba(235, 213, 255, .5), transparent 72%),
    linear-gradient(180deg, #FFFFFF 0%, #FCF9FF 100%);
  border-top: 1px solid var(--line);
}
.cta-final__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 980px; }
.cta-final__photo { width: 220px; height: 220px; border-radius: 999px; overflow: hidden; background: linear-gradient(180deg, var(--a100), var(--a300)); box-shadow: 0 24px 50px -24px rgba(63, 7, 100, .5); }
.cta-final__photo img { width: 118%; max-width: none; margin: 12px 0 0 -8%; }
.cta-final p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); }
.cta-final__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cta-final__alt { color: var(--ink-soft); }
.cta-final .crisis { margin-top: 32px; background: #FFFFFF; }
.svc-meta { margin-top: 24px !important; font-size: var(--fs-xs) !important; color: var(--ink-faint) !important; }

@media (max-width: 960px) {
  .shero__grid { grid-template-columns: 1fr; }
  .pcard { max-width: 520px; }
}
@media (max-width: 860px) {
  .svc-mod__top { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .cta-final__grid { grid-template-columns: 1fr; }
  .cta-final__photo { width: 140px; height: 140px; }
}
@media (max-width: 520px) {
  .svc-mod__cta .btn, .cta-final__actions .btn { width: 100%; }
  .check-card__foot .btn { width: 100%; }
}


/* =================== Página de contacto =================== */
.nav__list a[aria-current="page"] { color: var(--a700); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--a300); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--link); }

/* Botones secundarios */
.btn--outline { background: #FFFFFF; color: var(--a800); box-shadow: inset 0 0 0 1.5px var(--a300); }
.btn--outline:hover { background: var(--a50); box-shadow: inset 0 0 0 1.5px var(--a600); }
.btn--ghost { background: transparent; color: var(--a800); padding-inline: 16px; }
.btn--ghost:hover { background: var(--a50); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .btn--outline:hover, .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--a600), 0 10px 22px -14px rgba(63, 7, 100, .45); } }

/* Primera pantalla */
.chero__inner { position: relative; z-index: 1; }
.chero h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); max-width: 14ch; }
.chero .hero__lead { max-width: 38rem; margin-top: 24px; }

.channels { list-style: none; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; }
.channel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(24px, 3vw, 32px); border-radius: 28px; background: #FFFFFF; border: 1px solid var(--a100);
  box-shadow: 0 18px 40px -26px rgba(63, 7, 100, .35);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .channel:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--a200); } }
.channel__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--a50); color: var(--a700); transition: background-color .35s var(--ease), transform .45s var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .channel:hover .channel__icon { background: var(--a100); transform: scale(1.06); } .channel--wa:hover .channel__icon { background: rgba(255, 255, 255, .22); } }
.channel__icon svg { width: 24px; height: 24px; }
.channel__title { margin-top: 20px; font-size: var(--fs-h3); }
.channel__text { margin-top: 8px; color: var(--ink-soft); flex: 1; }
.channel__value { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.channel__value:hover { color: var(--link); }
.channel .btn, .channel__actions { margin-top: 22px; }
.channel__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.channel__actions .btn { margin-top: 0; }
.channel--wa {
  color: #FFFFFF; border-color: transparent;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(154, 51, 234, .65), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(197, 132, 252, .45), transparent 65%),
    linear-gradient(135deg, #3F0764 0%, #5C1C87 55%, #7021A8 100%);
  box-shadow: 0 24px 50px -24px rgba(63, 7, 100, .7);
}
.channel--wa .channel__icon { background: rgba(255, 255, 255, .14); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.channel--wa .channel__title { color: #FFFFFF; }
.channel--wa .channel__text { color: #E9DAFB; }
.channel--wa :focus-visible { outline-color: #FFFFFF; }

.assure { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.assure li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--a800); font-weight: 500; }
.assure svg { width: 18px; height: 18px; flex: none; }

/* Formulario */
.contact__intro > p { margin-top: clamp(18px, 1.6vw, 24px); color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.6; }
.next { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.next li { display: flex; gap: 14px; align-items: flex-start; }
.next span { flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--a50); color: var(--a700); font-family: var(--serif); font-weight: 600; box-shadow: inset 0 0 0 1px var(--a100); }
.next p { margin: 4px 0 0; color: var(--ink-soft); }
.next strong { color: var(--ink); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.cform__actions .btn { width: 100%; }
.cform__send .cform__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #FFFFFF; animation: spin .8s linear infinite; }
.cform__send.is-loading .cform__spinner { display: block; }
.cform__send.is-loading { pointer-events: none; opacity: .9; }
@keyframes spin { to { transform: rotate(360deg); } }
.cform__status { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FEF3F2; color: #B42318; font-size: var(--fs-sm); max-width: none; transition: opacity .3s var(--ease), transform .35s var(--ease-out); }
@starting-style { .cform__status { opacity: 0; transform: translateY(-6px); } }
.cform__note { margin: -4px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-soft); max-width: none; }

@media (max-width: 960px) {
  .channels { grid-template-columns: 1fr 1fr; }
  .channel--wa { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .channels { grid-template-columns: 1fr; }
  .channel .btn { width: 100%; }
  .channel__actions { width: 100%; }
  .channel__actions .btn { flex: 1; }
  .cform__actions { grid-template-columns: 1fr; }
}

/* =================== Página 404 =================== */
.e404 { min-height: 70vh; display: grid; align-items: center; }
.e404__inner { position: relative; z-index: 1; max-width: 720px; }
.e404 .e404__code { margin: 0; font-family: var(--serif); font-size: clamp(4.5rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--a200); letter-spacing: -0.04em; }
.e404 h1 { margin-top: 8px; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.e404 p { margin-top: 18px; font-size: var(--fs-lead); color: var(--ink-soft); }
.e404__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* =================== Aviso de privacidad =================== */
.legal-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.legal__meta { margin-top: 18px; font-size: var(--fs-sm); color: var(--ink-soft); }
.section.legal { padding-block: clamp(32px, 5vw, 64px) clamp(72px, 9vw, 120px); }
.legal__grid { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

.legal__toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 32px); font-size: var(--fs-sm); }
.legal__toc-title { margin: 0 0 12px; font-weight: 600; color: var(--ink); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.legal__toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease); }
.legal__toc a:hover, .legal__toc a:focus-visible { color: var(--link); border-left-color: var(--a400); }

.legal__body { max-width: 46rem; }
.legal__sec { padding-top: 28px; margin-top: 44px; border-top: 1px solid var(--line); }
.legal__sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__sec h2 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
.legal__sec p, .legal__sec li { font-size: var(--fs-base); line-height: 1.7; color: var(--ink); }
.legal__sec p { max-width: none; margin-top: 14px; }
.legal__sec ul { margin: 14px 0 0; padding-left: 1.25rem; }
.legal__sec li + li { margin-top: 8px; }
.legal__sec li::marker { color: var(--a400); }
.legal__sec code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--a50); box-shadow: inset 0 0 0 1px var(--a100); overflow-wrap: anywhere; }

.legal__summary { margin-top: 18px; padding: 24px 28px 24px calc(28px + 1.25rem); border-radius: 24px; background: var(--a50); box-shadow: inset 0 0 0 1px var(--a100); }
.legal__summary li { color: var(--ink); }

.legal__data { margin: 18px 0 0; border-bottom: 1px solid var(--line); }
.legal__data > div { padding: 22px 0; border-top: 1px solid var(--line); }
.legal__data dt { font-weight: 600; font-size: var(--fs-q); color: var(--heading); }
.legal__data dd { margin: 0; }
.legal__data dd p:first-child { margin-top: 8px; }

.legal__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 860px) {
  .legal__grid { grid-template-columns: 1fr; gap: 28px; }
  .legal__toc { position: static; padding: 20px 22px; border-radius: 20px; background: var(--a50); box-shadow: inset 0 0 0 1px var(--a100); }
  .legal__toc ol { border-left: 0; columns: 2; column-gap: 24px; }
  .legal__toc li { break-inside: avoid; }
  .legal__toc a { padding-left: 0; margin-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .legal__toc ol { columns: 1; }
  .legal__summary { padding: 20px 20px 20px calc(20px + 1.25rem); }
  .legal__actions .btn { width: 100%; }
}