/* ============================================================
   ZONOT — Sistema de Conversión Editorial
   Hero / Superficie del cenote
   ============================================================ */

/* ---- Fuente de marca (subset latín WOFF2 — F6; los TTF fuente viven en /fonts) ---- */
@font-face {
  font-family: "Safiro";
  src: url("../assets/fonts/safiro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Safiro";
  src: url("../assets/fonts/safiro-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Safiro";
  src: url("../assets/fonts/safiro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Safiro";
  src: url("../assets/fonts/safiro-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Safiro";
  src: url("../assets/fonts/safiro-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Safiro";
  src: url("../assets/fonts/safiro-medium-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ---- Fuentes de cuerpo/mono: self-hosted (antes CDN de Google Fonts).
   Requisito legal para la versión alemana: transmitir la IP del visitante a
   Google al cargar fuentes de su CDN viola el DSGVO (LG München I, 2022) —
   self-hostear las quita de la ecuación. Subset latín, cubre ä ö ü ß. ---- */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/plexmono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/plexmono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens de marca ---- */
:root {
  --ink:       #0A0A0B;   /* negro dominante */
  --navy:      #0E1A2B;   /* azul marino abismal */
  --navy-deep: #081320;   /* fondo del cenote */
  --marfil:    #F4F1EA;   /* texto sobre oscuro */
  --turq:      #31D9B0;   /* EL acento: luz de cenote (aqua-esmeralda) */
  --turq-deep: #157E7E;   /* turquesa oscuro — acento sobre fondos claros */

  /* La columna de agua — tonos de tránsito del descenso (no son marca, son agua) */
  --agua-0:    #E9F0EA;   /* la boca: luz de día filtrada */
  --agua-1:    #4FA396;   /* agua somera: esmeralda iluminada */
  --agua-2:    #0E5B63;   /* media agua: teal profundo */

  /* El dorado ya NO es color de UI: solo luz atmosférica (god-rays) */
  --gold:      #E0A23D;

  /* El coral: EL PULSO — respuestas al usuario (hover, focus, selección, profundímetro).
     Turquesa sigue siendo LA LUZ (CTAs, logo). Coral nunca al mismo peso que turquesa. */
  --coral:      #FF6B5B;
  --coral-deep: #D14A38;
  --coral-dim:  rgba(255,107,91,.16);

  --font-display: "Safiro", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Movimiento — DNA de Indigo */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in:  cubic-bezier(.55, .06, .68, .19);
  --t-fast: .25s;
  --t-default: .4s;
  --t-slow: .75s;

  --margin: clamp(20px, 4vw, 72px);
  --maxw: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden SIEMPRE gana, aunque la clase del elemento ponga display:flex/grid */
[hidden] { display: none !important; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--ink);
  overflow-x: hidden;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--coral); color: #1A0E0B; }

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

/* Numerales fantasma: el índice de sección, gigante y casi invisible, detrás del contenido */
.section-ghost {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 20vw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,241,234,.10);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.tesis__inner, .caso__inner, .concept__inner, .nichos__inner,
.casos2__inner, .proceso__inner, .fundador__inner, .cierre__inner {
  position: relative;
  z-index: 2;
}
@media (max-width: 760px) {
  .section-ghost { display: none; }
}

/* Vidrio abisal: cards oscuras translúcidas sobre el fondo animado */
.glass-panel {
  background: rgba(10,16,20,.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
          backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(244,241,234,.08);
  border-radius: 18px;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-panel { background: rgba(10,16,20,.78); }
}

/* ---- Reveal base (GSAP toma el control si hay JS) ---- */
[data-reveal] { will-change: transform, opacity; }

/* ---- Split reveal: títulos que entran palabra por palabra ---- */
.split-title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-title .w > span {
  display: inline-block;
  will-change: transform;
}

/* ---- Luz mágica que respira (cursor en la profundidad) ---- */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 440px; height: 440px;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transition: opacity .6s var(--ease-out), width .45s var(--ease-out), height .45s var(--ease-out);
  mix-blend-mode: screen;
  will-change: transform;
}
/* solo se enciende en las zonas oscuras */
body[data-zone="deep"] .cursor-glow { opacity: 1; }
/* se aviva cerca de lo interactivo */
.cursor-glow.is-hot { width: 600px; height: 600px; }

.cursor-glow__core {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(49,217,176,.20),
    rgba(49,217,176,.06) 45%,
    transparent 70%);
  animation: glowbreathe 5s ease-in-out infinite;
}
.cursor-glow.is-hot .cursor-glow__core {
  background: radial-gradient(closest-side,
    rgba(49,217,176,.30),
    rgba(49,217,176,.09) 45%,
    transparent 70%);
}
@keyframes glowbreathe {
  0%, 100% { opacity: .75; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ---- Cursor dot+ring: acento fino, no reemplaza el cursor del sistema ---- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 96;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.cursor.is-active { opacity: 1; }
.cursor__dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--marfil);
  transform: translate(-50%, -50%);
}
.cursor__ring {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(244,241,234,.45);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  transition: width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s var(--ease-out);
}
.cursor__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--turq);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.cursor.is-ver .cursor__ring { width: 56px; height: 56px; border-color: var(--turq); }
.cursor.is-ver .cursor__label { opacity: 1; }
@media (pointer: coarse) {
  .cursor { display: none; }
}

/* ============================================================
   PRELOADER — ritual de 1.1s + wipe, una vez por sesión
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  clip-path: inset(0 0 0% 0);
  transition: clip-path .7s var(--ease-out);
}
.preloader__logo-slot svg {
  height: 30px; width: auto; display: block;
  fill: var(--turq);
}
.preloader__count {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(244,241,234,.6);
  font-variant-numeric: tabular-nums;
}
.preloader--wipe {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

/* ============================================================
   EL PROFUNDÍMETRO — HUD de profundidad (0 → 36 m, guiño a Ik Kil)
   ============================================================ */
.depth {
  position: fixed;
  top: 50%;
  right: calc(var(--margin) / 2);
  transform: translateY(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.depth__track {
  position: relative;
  width: 1px;
  height: 34vh;
  background: rgba(244,241,234,.14);
}
.depth__fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(var(--descent, 0) * 100%);
  background: var(--coral);
  transition: background .3s var(--ease-out);
}
.depth__read {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(244,241,234,.7);
  white-space: nowrap;
}
.depth__num { font-variant-numeric: tabular-nums; }
.depth__bottom-label { display: none; }
.depth.depth--bottom .depth__bottom-label { display: inline; }
.depth.depth--bottom .depth__read { color: var(--coral); }
.depth.depth--bottom .depth__fill { animation: depthpulse .6s var(--ease-out); }
@keyframes depthpulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@media (max-width: 900px) {
  .depth { display: none; }
}

/* ============================================================
   WHATSAPP PILL — canal directo, aparece tras 25% de scroll
   ============================================================ */
.whatsapp-pill {
  position: fixed;
  left: var(--margin);
  bottom: 32px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 16px;
  color: var(--marfil);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  visibility: hidden; /* fuera del orden de tabulación mientras está oculto */
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out),
              border-color .25s var(--ease-out), background .25s var(--ease-out),
              visibility 0s linear .4s;
}
.whatsapp-pill.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out),
              border-color .25s var(--ease-out), background .25s var(--ease-out),
              visibility 0s linear 0s;
}
.whatsapp-pill:hover {
  border-color: rgba(49,217,176,.4);
  background: rgba(10,16,20,.62);
}
.whatsapp-pill__icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--turq);
}
@media (max-width: 640px) {
  .whatsapp-pill { bottom: 20px; padding: 12px 16px 12px 14px; }
  .whatsapp-pill__label { display: none; }
  .whatsapp-pill__icon { width: 22px; height: 22px; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px var(--margin);
  color: var(--ink); /* color de links/CTA en zona clara */
  transition: color var(--t-default) var(--ease-out);
}
/* En el fondo oscuro, links y CTA pasan a marfil */
body[data-zone="deep"] .nav { color: var(--marfil); }

.nav__logo { display: block; color: var(--turq-deep); transition: color var(--t-default) var(--ease-out); }
/* En el fondo oscuro el logo brilla en turquesa pleno */
body[data-zone="deep"] .nav__logo { color: var(--turq); }
.nav__logo svg {
  height: 22px;
  width: auto;
  display: block;
  fill: currentColor;
}

.nav__links {
  display: flex;
  gap: 28px;
  justify-self: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .01em;
}
.nav__links a { position: relative; padding: 4px 0; opacity: .85; transition: opacity var(--t-fast) var(--ease-out); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor; transition: width var(--t-default) var(--ease-out);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }

.nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__cta {
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .01em;
  padding: 9px 16px;
  border: 1px solid currentColor;
  border-radius: 100px;
  transition: background var(--t-default) var(--ease-out), color var(--t-default) var(--ease-out);
}
.nav__cta:hover { background: var(--turq); border-color: var(--turq); color: #04201f; }

/* Selector de idioma: discreto, mono, junto a SONIDO */
.nav__lang {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  padding: 6px 9px;
  border: 1px solid currentColor;
  border-radius: 100px;
  opacity: .7;
  transition: opacity var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav__lang:hover { opacity: 1; background: var(--turq); border-color: var(--turq); color: #04201f; }
.nav--pill .nav__lang:hover { background: var(--marfil); border-color: var(--marfil); }
.footer__lang { font-weight: 600; }
.footer__lang:hover { color: var(--turq); }

/* Toggle de sonido: ecualizador mono + label. Off por defecto (barras planas). */
.nav__sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  opacity: .62;
  transition: opacity var(--t-fast) var(--ease-out), color var(--t-default) var(--ease-out);
}
.nav__sound:hover { opacity: 1; }
.nav__sound.is-on { opacity: 1; color: var(--turq); }
.nav__sound-label { line-height: 1; }
.nav__sound-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.nav__sound-eq i {
  display: block;
  width: 2px;
  height: 3px;
  background: currentColor;
  border-radius: 1px;
  transition: height var(--t-default) var(--ease-out);
}
/* Encendido: las barras respiran como el agua */
.nav__sound.is-on .nav__sound-eq i { animation: eqbar 1.1s var(--ease-out) infinite; }
.nav__sound.is-on .nav__sound-eq i:nth-child(1) { animation-delay: -.9s; }
.nav__sound.is-on .nav__sound-eq i:nth-child(2) { animation-delay: -.5s; }
.nav__sound.is-on .nav__sound-eq i:nth-child(3) { animation-delay: -.2s; }
.nav__sound.is-on .nav__sound-eq i:nth-child(4) { animation-delay: -.7s; }
@keyframes eqbar {
  0%, 100% { height: 3px; }
  50%      { height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sound.is-on .nav__sound-eq i { animation: none; height: 7px; }
}

/* Toggle hamburguesa (solo móvil) */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;  /* tap target ≥ 44px */
  background: none; border: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink);
  transition: color var(--t-default) var(--ease-out);
}
body[data-zone="deep"] .nav__toggle { color: var(--marfil); }
body.menu-open .nav__toggle { color: var(--marfil); }
.nav__toggle span {
  display: block; width: 24px; height: 2px;
  background: currentColor;
  transition: transform var(--t-default) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
body.menu-open .nav__toggle span { background: var(--marfil); }
body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Overlay del menú */
.navmenu {
  position: fixed; inset: 0;
  z-index: 110;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--margin);
  background: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-default) var(--ease-out), visibility var(--t-default);
}
body.menu-open .navmenu { opacity: 1; visibility: visible; }
.navmenu__list { list-style: none; }
.navmenu__list li {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
body.menu-open .navmenu__list li { opacity: 1; transform: none; }
body.menu-open .navmenu__list li:nth-child(1) { transition-delay: .08s; }
body.menu-open .navmenu__list li:nth-child(2) { transition-delay: .14s; }
body.menu-open .navmenu__list li:nth-child(3) { transition-delay: .20s; }
body.menu-open .navmenu__list li:nth-child(4) { transition-delay: .26s; }
body.menu-open .navmenu__list li:nth-child(5) { transition-delay: .32s; }
.navmenu__list a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 9vw, 44px);
  color: var(--marfil);
  letter-spacing: -.01em;
}
.navmenu__idx {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 400;
  color: var(--turq);
}
.navmenu__cta {
  margin-top: 40px;
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 16px 28px;
  border-radius: 100px;
  background: var(--turq); color: #04201f;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: .01em;
  opacity: 0; transition: opacity var(--t-slow) var(--ease-out) .38s;
}
body.menu-open .navmenu__cta { opacity: 1; }

/* ============================================================
   HERO — 01 Superficie
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 148px var(--margin) 104px;
  background: var(--agua-0);
  overflow: hidden;
}

/* Rayo de sol dorado — la luz de la superficie */
.hero__ray {
  position: absolute;
  top: -20%; right: 8%;
  width: 60vw; height: 130vh;
  background:
    radial-gradient(closest-side at 50% 0%,
      rgba(224, 162, 61, .50),
      rgba(224, 162, 61, .14) 45%,
      transparent 72%);
  transform: rotate(14deg);
  filter: blur(8px);
  pointer-events: none;
  animation: breathe 9s ease-in-out infinite;
}

/* Reflejo del agua — el azul/turquesa ya asoma en la superficie */
.hero__water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42vh;
  background:
    linear-gradient(to top,
      rgba(14, 26, 43, .22) 0%,
      rgba(46, 197, 197, .10) 38%,
      transparent 100%);
  pointer-events: none;
  z-index: 1;
}
@keyframes breathe {
  0%, 100% { opacity: .8; transform: rotate(14deg) scale(1); }
  50%      { opacity: 1;  transform: rotate(14deg) scale(1.04); }
}

/* Retícula visible — parte del mensaje del mecanismo */
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(10,10,11,.045) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}

/* Eyebrow mono */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(10,10,11,.6);
  margin-bottom: 26px;
}
.eyebrow__idx { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
.eyebrow__line { width: 48px; height: 1px; background: rgba(10,10,11,.3); }
.eyebrow--light { color: rgba(244,241,234,.6); }
.eyebrow--light .eyebrow__idx { color: var(--marfil); }
.eyebrow--light .eyebrow__line { background: rgba(244,241,234,.3); }
.eyebrow__idx--turq { color: var(--turq) !important; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 66px);
  line-height: 1.08;
  letter-spacing: -.005em;
  max-width: 18ch;
}
.hero__title span { display: block; }
.hero__title--accent {
  color: var(--ink);
  margin-top: .14em;
}
.hero__title--accent em {
  font-style: italic;           /* Safiro Bold Italic — el momento editorial */
  color: var(--turq-deep);      /* esmeralda profunda: legible sobre la luz */
}

.hero__sub {
  margin-top: 24px;
  max-width: 52ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(10,10,11,.74);
}
.hero__sub strong { color: var(--ink); font-weight: 500; }

/* CTA escalonado */
.hero__cta {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .03em;
  transition: transform var(--t-default) var(--ease-out), background var(--t-default) var(--ease-out), color var(--t-default) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.btn--primary {
  background: var(--ink);
  color: var(--marfil);
  padding: 15px 26px;
  border-radius: 100px;
}
.btn--primary:hover { transform: translateY(-2px); background: var(--navy); }
.btn--ghost { color: rgba(10,10,11,.78); padding: 15px 0; }
.btn--ghost span { display: inline-block; transition: transform var(--t-default) var(--ease-out); }
.btn--ghost:hover { color: var(--ink); }
.btn--ghost:hover span { transform: translateX(5px); }

.btn--turq {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 48px;
  padding: 15px 26px;
  border: 1px solid rgba(49,217,176,.45);
  border-radius: 100px;
  color: var(--turq);
}
.btn--turq span { transition: transform var(--t-default) var(--ease-out); }
.btn--turq:hover { background: rgba(49,217,176,.10); border-color: var(--turq); }
.btn--turq:hover span { transform: translateX(5px); }

/* Scroll cue */
.scrollcue {
  position: absolute;
  bottom: 30px; right: var(--margin);
  z-index: 2;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(10,10,11,.55);
}
.scrollcue__track {
  width: 1px; height: 46px; background: rgba(10,10,11,.2);
  position: relative; overflow: hidden;
}
.scrollcue__dot {
  position: absolute; top: 0; left: 0; width: 1px; height: 14px;
  background: var(--turq-deep);
  animation: descend 2.2s var(--ease-out) infinite;
}
@keyframes descend {
  0%   { transform: translateY(-14px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* ============================================================
   02 — El borde del agua (transición al descenso)
   ============================================================ */
.tesis {
  position: relative;
  overflow: hidden;
  min-height: 90svh;
  display: flex; align-items: center;
  padding: 0 var(--margin);
  /* el abismo continúa: arranca TRANSPARENTE (se funde con el canvas del hero,
     sin costura de color) y va oscureciendo hacia la primera luz azul */
  background: linear-gradient(to bottom, rgba(8,19,32,0) 0%, rgba(8,19,32,.28) 45%, rgba(51,80,95,.42) 100%);
  color: var(--marfil);
}
.tesis__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; }
.tesis__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.005em;
  max-width: 22ch;
  margin-top: 28px;
  color: var(--marfil);
  text-shadow: 0 1px 18px rgba(4,10,12,.5);
}
.tesis__title em { font-style: italic; color: var(--coral); }
.tesis__body {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 15px; letter-spacing: .01em;
  color: rgba(244,241,234,.85);
}

/* ============================================================
   03 — Caso Conkal (la primera luz, profundidad azul)
   ============================================================ */
.caso {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 140px var(--margin);
  background: linear-gradient(to bottom, rgba(51,80,95,.45) 0%, rgba(14,26,43,.55) 45%, rgba(8,19,32,.6) 100%);
  color: var(--marfil);
  overflow: hidden;
}
/* haz de luz turquesa que cae desde arriba */
.caso__beam {
  position: absolute;
  top: -10%; left: 14%;
  width: 34vw; height: 120vh;
  background:
    radial-gradient(closest-side at 50% 0%,
      rgba(49,217,176,.18),
      rgba(49,217,176,.05) 50%,
      transparent 74%);
  transform: rotate(-10deg);
  filter: blur(10px);
  pointer-events: none;
  animation: breathe 11s ease-in-out infinite;
}
/* Cáusticas sutiles: luz submarina drifteando sobre la escena */
.caso::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 30% 20%, rgba(49,217,176,.06), transparent 60%),
    radial-gradient(closest-side at 75% 70%, rgba(49,217,176,.04), transparent 65%);
  background-size: 140% 140%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: caustics-drift-a 16s ease-in-out infinite alternate;
}
@keyframes caustics-drift-a {
  0%   { background-position: 0% 0%, 100% 100%; }
  100% { background-position: 12% 8%, 88% 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .caso::after { animation: none; }
}
.caso__inner { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; }
.caso__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.2vw, 80px);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin-top: 26px;
  text-shadow: 0 1px 18px rgba(4,10,12,.5);
}
.caso__lead {
  margin-top: 24px;
  max-width: 48ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(244,241,234,.74);
}
.caso__stats {
  margin-top: 56px;
  display: flex; flex-wrap: wrap; gap: 18px 64px;
}
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease-out);
}
.stat__num--turq { color: var(--turq); }
.stat__num.is-flash { color: var(--coral); }
.stat__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12.5px; letter-spacing: .02em;
  color: rgba(244,241,234,.62);  /* AA: ≥4.5:1 en texto pequeño */
  text-transform: lowercase;
}
.caso__projection {
  margin-top: 48px;
  padding: 22px 26px;
  border-radius: 14px;
  border: 1px solid rgba(244,241,234,.1);
  background: rgba(6,14,20,.4);
}
.caso__projection-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(244,241,234,.58);
}
.caso__projection-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin-top: 18px;
}
.caso__projection-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 22ch;
}
.caso__projection-list b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--turq);
  letter-spacing: -.01em;
}
.caso__projection-list span {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(244,241,234,.55);
}
/* Showcase del caso: mockup + qué construimos, lado a lado (le da mensaje) */
.caso__showcase {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.caso__image { max-width: 100%; }
.caso__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(4,10,12,.6);
}
.caso__built-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turq);
}
.caso__built-list {
  list-style: none;
  margin: 20px 0 28px;
  display: grid;
  gap: 16px;
}
.caso__built-list li {
  display: grid;
  gap: 3px;
  padding-left: 16px;
  border-left: 2px solid rgba(49,217,176,.4);
}
.caso__built-list b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.01em;
}
.caso__built-list span {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(244,241,234,.62);
}
@media (max-width: 860px) {
  .caso__showcase { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   04 — Concept Wellness (demostración del método, profundidad)
   ============================================================ */
.concept {
  position: relative;
  overflow: hidden;
  padding: 150px var(--margin);
  background: linear-gradient(to bottom, rgba(8,19,32,.6) 0%, rgba(6,11,20,.62) 60%, rgba(10,10,11,.6) 100%);
  color: var(--marfil);
}
.concept__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; }
.concept__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
}

/* Badge obligatoria: concept work */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--turq);
  padding: 7px 14px;
  border: 1px solid rgba(49,217,176,.4);
  border-radius: 100px;
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--turq);
  box-shadow: 0 0 10px rgba(49,217,176,.8);
}

.concept__kicker {
  margin-top: 52px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244,241,234,.58);
}
.concept__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -.02em;
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 14px;
  text-shadow: 0 1px 18px rgba(4,10,12,.5);
}
.concept__title-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0;
  color: rgba(244,241,234,.6);
}
.concept__lead {
  margin-top: 28px;
  max-width: 56ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(244,241,234,.74);
}

.concept__grid {
  margin-top: 64px;
  display: grid;
  /* Columnas fijas por breakpoint (no auto-fit): con 6 piezas nunca queda
     una fila a medio llenar como pasaba con auto-fit a 4 columnas. */
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(244,241,234,.10);
  border: 1px solid rgba(244,241,234,.10);
}
@media (min-width: 640px) {
  .concept__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .concept__grid { grid-template-columns: repeat(3, 1fr); }
}
.piece {
  background: var(--navy-deep);
  padding: 30px 26px 36px;
  transition: background var(--t-default) var(--ease-out);
}
.piece:hover { background: #0C1726; }
.piece__idx {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .04em;
  color: var(--turq);
}
.piece__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  margin-top: 18px;
  letter-spacing: -.005em;
}
.piece__desc {
  margin-top: 10px;
  font-size: 14px; line-height: 1.5;
  color: rgba(244,241,234,.55);
}
.concept .btn--turq { margin-top: 52px; }

/* ============================================================
   Marquee infinito — transición hacia los nichos
   ============================================================ */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 32px 0;
  background: rgba(10,10,11,.3);
  border-top: 1px solid rgba(244,241,234,.08);
  border-bottom: 1px solid rgba(244,241,234,.08);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__group span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.marquee__group > span:not(.marquee__dot) {
  padding: 0 26px;
}
/* Los sectores alternan entre marfil sólido y turquesa — sin outline (se veía frágil) */
.marquee__group > span:not(.marquee__dot):not(.marquee__outline) {
  color: rgba(244,241,234,.72);
}
.marquee__dot { color: var(--turq); opacity: .5; }
.marquee__outline {
  color: var(--turq);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ============================================================
   05 — Los 4 nichos (el fondo del cenote)
   ============================================================ */
.nichos {
  position: relative;
  overflow: hidden;
  padding: 150px var(--margin);
  background: rgba(10,10,11,.58);
  color: var(--marfil);
}
.nichos__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; }
.nichos__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -.01em;
  max-width: 20ch;
  margin-top: 26px;
  text-shadow: 0 1px 18px rgba(4,10,12,.5);
}
.nichos__list {
  list-style: none;
  margin-top: 64px;
  border-top: 1px solid rgba(244,241,234,.12);
}
.nicho {
  display: grid;
  grid-template-columns: 44px 76px 1fr auto;
  align-items: center;
  gap: 24px 32px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(244,241,234,.12);
  border-left: 2px solid transparent;
  transition: padding-left var(--t-default) var(--ease-out),
              border-left-color var(--t-default) var(--ease-out);
}
.nicho:hover {
  padding-left: 16px;
  border-left-color: var(--coral);
}
.nicho:hover .nicho__num { color: var(--coral); }
.nicho__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--turq);
  transition: color var(--t-default) var(--ease-out);
}
.nicho__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -.01em;
}
.nicho__pain {
  margin-top: 8px;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
  color: rgba(244,241,234,.6);
  max-width: 46ch;
}
.nicho__fix {
  justify-self: end;
  text-align: right;
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.5;
  letter-spacing: .02em;
  color: var(--turq);
  max-width: 24ch;
}
.nicho__image {
  width: 76px; height: 94px;
  overflow: hidden;
  border-radius: 10px;
  filter: grayscale(.35) brightness(.9);
  transition: filter var(--t-default) var(--ease-out), transform var(--t-default) var(--ease-out);
}
.nicho:hover .nicho__image {
  filter: grayscale(0) brightness(1);
  transform: scale(1.04);
}
.nicho__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  .nicho {
    grid-template-columns: 64px 1fr;
    gap: 6px 16px;
    position: relative;
  }
  .nicho__image {
    width: 64px;
    height: 80px;
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
  }
  .nicho__num  { grid-column: 2; grid-row: 1; }
  .nicho__body { grid-column: 2; grid-row: 2; }
  .nicho__fix {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    text-align: left;
    margin-top: 6px;
    max-width: none;
  }
}

/* ============================================================
   06 — Casos secundarios
   ============================================================ */
.casos2 {
  position: relative;
  overflow: hidden;
  padding: 140px var(--margin);
  background: rgba(10,10,11,.55);
  color: var(--marfil);
}
.casos2__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; }
.casos2__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-top: 26px;
  max-width: 18ch;
  text-shadow: 0 1px 18px rgba(4,10,12,.5);
}
.casos2__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.card2 {
  display: block; /* las cards son links: ocupan su celda del grid */
  background: rgba(10,16,20,.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
          backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(244,241,234,.08);
  border-radius: 18px;
  padding: 34px 30px 40px;
  transition: border-color var(--t-default) var(--ease-out), transform var(--t-default) var(--ease-out);
}
@supports not (backdrop-filter: blur(1px)) {
  .card2 { background: rgba(10,16,20,.78); }
}
.card2:hover { border-color: rgba(49,217,176,.4); transform: translateY(-3px); }
.card2__tag {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--turq);
}
.card2__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 36px);
  margin-top: 16px;
  letter-spacing: -.01em;
}
.card2__desc {
  margin-top: 14px;
  font-size: 16px; line-height: 1.55;
  color: rgba(244,241,234,.6);
  max-width: 42ch;
}
/* Afordancia del link (el cursor VER solo existe en desktop fino) */
.card2__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--turq);
  opacity: .65;
  transition: opacity var(--t-fast) var(--ease-out);
}
.card2:hover .card2__go { opacity: 1; }

/* ============================================================
   07 — Proceso
   ============================================================ */
.proceso {
  position: relative;
  overflow: hidden;
  padding: 140px var(--margin);
  background: linear-gradient(to bottom, rgba(10,10,11,.55), rgba(8,19,32,.5));
  color: var(--marfil);
}
.proceso__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; }
.proceso__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-top: 26px;
  max-width: 18ch;
  text-shadow: 0 1px 18px rgba(4,10,12,.5);
}
.proceso__steps {
  list-style: none;
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px 32px;
}
.step { position: relative; padding-top: 26px; border-top: 1px solid rgba(49,217,176,.3); }
.step__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--turq);
}
.step__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px);
  margin-top: 16px;
  letter-spacing: -.005em;
}
.step__desc {
  margin-top: 12px;
  font-size: 15px; line-height: 1.55;
  color: rgba(244,241,234,.58);
}

/* ============================================================
   08 — Fundador (agua quieta)
   ============================================================ */
.fundador {
  position: relative;
  overflow: hidden;
  padding: 150px var(--margin);
  background: rgba(8,19,32,.55);
  color: var(--marfil);
}
.fundador__inner {
  max-width: 920px; width: 100%; margin: 0 auto;
  padding: 48px clamp(24px, 4vw, 64px);
}
.fundador__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 56px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-top: 26px;
  max-width: 22ch;
  text-shadow: 0 1px 18px rgba(4,10,12,.5);
}
.fundador__body {
  margin-top: 30px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.6;
  color: rgba(244,241,234,.72);
  max-width: 58ch;
}
.fundador__sign {
  margin-top: 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px; letter-spacing: .01em;
  color: var(--turq);
}

/* ============================================================
   09 — Cierre: el haz de luz (la salida del cenote)
   ============================================================ */
.cierre {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 140px var(--margin);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(10,31,36,.55) 0%, rgba(10,10,11,.6) 55%);
  color: var(--marfil);
  overflow: hidden;
}

/* Capa de luz (detrás del contenido) */
.cierre__light { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

/* Rayo volumétrico que desciende desde la superficie */
.cierre__shaft {
  position: absolute;
  left: 50%; top: -8%;
  width: 62vw; height: 128%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    rgba(120,240,240,.42) 0%,
    rgba(49,217,176,.20) 38%,
    rgba(49,217,176,.05) 70%,
    transparent 100%);
  clip-path: polygon(43% 0, 57% 0, 92% 100%, 8% 100%);
  filter: blur(14px);
  transform-origin: 50% 0;
  animation: shaftsway 9s ease-in-out infinite;
}
@keyframes shaftsway {
  0%, 100% { opacity: .8;  transform: translateX(-50%) scaleX(.96); }
  50%      { opacity: 1;   transform: translateX(-50%) scaleX(1.05); }
}

/* Halo detrás del título */
.cierre__halo {
  position: absolute;
  left: 50%; top: 42%;
  width: 760px; height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(49,217,176,.18), transparent 70%);
  filter: blur(8px);
  animation: breathe 7s ease-in-out infinite;
}

/* Partículas flotando en la luz */
.cierre__particles span {
  position: absolute;
  bottom: -10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(140,240,240,.9);
  box-shadow: 0 0 8px rgba(49,217,176,.9);
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-94vh) translateX(18px); opacity: 0; }
}
.cierre__particles span:nth-child(1){ left: 38%; animation-duration: 14s; animation-delay: 0s; }
.cierre__particles span:nth-child(2){ left: 46%; animation-duration: 18s; animation-delay: 3s; width:3px;height:3px; }
.cierre__particles span:nth-child(3){ left: 52%; animation-duration: 12s; animation-delay: 1.5s; }
.cierre__particles span:nth-child(4){ left: 58%; animation-duration: 20s; animation-delay: 5s; width:3px;height:3px; }
.cierre__particles span:nth-child(5){ left: 63%; animation-duration: 16s; animation-delay: 2s; }
.cierre__particles span:nth-child(6){ left: 42%; animation-duration: 22s; animation-delay: 6s; width:2px;height:2px; }
.cierre__particles span:nth-child(7){ left: 55%; animation-duration: 15s; animation-delay: 4s; }
.cierre__particles span:nth-child(8){ left: 48%; animation-duration: 19s; animation-delay: 7.5s; width:3px;height:3px; }
.cierre__particles span:nth-child(9){ left: 60%; animation-duration: 13s; animation-delay: 2.8s; width:2px;height:2px; }
.cierre__particles span:nth-child(10){ left: 50%; animation-duration: 17s; animation-delay: 9s; }

/* Cáusticas sutiles: luz submarina drifteando sobre la escena */
.cierre::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 25% 30%, rgba(49,217,176,.06), transparent 60%),
    radial-gradient(closest-side at 70% 65%, rgba(49,217,176,.04), transparent 65%);
  background-size: 140% 140%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: caustics-drift-b 23s ease-in-out infinite alternate;
}
@keyframes caustics-drift-b {
  0%   { background-position: 0% 0%, 100% 100%; }
  100% { background-position: -10% 10%, 110% 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .cierre::before { animation: none; }
}

/* Viñeteado: oscurece los bordes para que la luz pegue por contraste */
.cierre::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 40%, transparent 42%, rgba(5,5,6,.6) 100%);
  pointer-events: none;
  z-index: 1;
}

.cierre__inner { position: relative; z-index: 2; max-width: 880px; }
.cierre__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 16ch;
  margin: 0 auto;
  text-shadow: 0 1px 18px rgba(4,10,12,.5);
}
/* En el fondo del cenote la palabra ancla late en coral: el pulso, no la luz.
   Espeja al em coral de la tesis — coral abre y cierra el descenso. */
.cierre__title em { font-style: italic; color: var(--coral); }
.cierre__sub {
  margin: 28px auto 0;
  max-width: 50ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(244,241,234,.72);
}
.cierre__sub strong { color: var(--turq); font-weight: 500; }
.cierre__routes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 44px;
}
.btn--light {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 32px;
  border-radius: 100px;
  background: var(--turq);
  color: #04201f;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px; letter-spacing: .01em;
  animation: ctapulse 3.5s ease-in-out infinite;
}
@keyframes ctapulse {
  0%, 100% { box-shadow: 0 0 0 rgba(49,217,176,0), 0 8px 30px rgba(49,217,176,.25); }
  50%      { box-shadow: 0 0 36px rgba(49,217,176,.55), 0 8px 30px rgba(49,217,176,.35); }
}
.btn--light span { transition: transform var(--t-default) var(--ease-out); }
.btn--light:hover { transform: translateY(-2px); }
.btn--light:hover span { transform: translateX(5px); }
.cierre__note {
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 13px; letter-spacing: .01em;
  color: rgba(244,241,234,.58);
}

/* ---- La oferta: precio publicado + garantía + capacidad honesta ---- */
.cierre__offer {
  margin: 40px auto 0;
  max-width: 640px;
  padding: 30px 32px;
  text-align: left;
}
.cierre__offer-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turq);
}
.cierre__offer-list {
  list-style: none;
  margin: 18px 0 22px;
  display: grid;
  gap: 10px;
}
.cierre__offer-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: rgba(244,241,234,.82);
}
.cierre__offer-list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--turq);
}
.cierre__offer-scope {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244,241,234,.78);
}
.cierre__offer-scope b { color: var(--turq); font-weight: 500; }
.cierre__offer-guarantee {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244,241,234,.66);
  border-left: 2px solid rgba(49,217,176,.4);
  padding-left: 14px;
}
.cierre__offer-capacity {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--coral);
}
@media (max-width: 560px) {
  .cierre__offer { padding: 22px 18px; }
}

/* ---- Formulario de diagnóstico ---- */
.cierre__form {
  margin: 40px auto 0;
  max-width: 640px;
  padding: 32px;
  text-align: left;
}
.cierre__hp { position: absolute; left: -9999px; }
.cierre__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,241,234,.6);
}
.field__input {
  width: 100%;
  padding: 13px 15px;
  background: rgba(4,10,12,.55);
  border: 1px solid rgba(244,241,234,.14);
  border-radius: 12px;
  color: var(--marfil);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.field__input::placeholder { color: rgba(244,241,234,.34); }
.field__input:focus { outline: none; border-color: var(--turq); }
.field__textarea { resize: vertical; min-height: 76px; }
.cierre__submit { margin-top: 24px; border: none; cursor: pointer; width: 100%; justify-content: center; }
.cierre__form .cierre__note { text-align: center; }

/* Estado de éxito */
.cierre__thanks {
  margin: 40px auto 0;
  max-width: 560px;
  padding: 44px 32px;
  text-align: center;
}
.cierre__thanks-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--turq);
  color: #04201f;
  font-size: 26px;
  margin-bottom: 18px;
}
.cierre__thanks-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
}
.cierre__thanks-body {
  margin-top: 12px;
  font-size: 16px; line-height: 1.6;
  color: rgba(244,241,234,.72);
}
@media (max-width: 560px) {
  .cierre__grid { grid-template-columns: 1fr; }
  .cierre__form { padding: 24px 18px; }
}

/* ============================================================
   Páginas legales (privacidad, términos) — sin JS, sin abismo,
   prosa simple sobre fondo oscuro. El <body> base pone color:var(--ink)
   sobre background:var(--ink) (texto invisible por diseño, cada sección
   del sitio principal lo sobreescribe) así que aquí SÍ hay que fijar
   el color explícito o el texto desaparece.
   ============================================================ */
body.legal-page {
  color: var(--marfil);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.legal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--margin);
  border-bottom: 1px solid rgba(244,241,234,.08);
}
.legal__logo { color: var(--turq); display: block; }
.legal__logo svg { height: 20px; width: auto; display: block; fill: currentColor; }
.legal__back {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(244,241,234,.72);
  transition: color var(--t-fast) var(--ease-out);
}
.legal__back:hover { color: var(--turq); }

.legal__inner {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 64px var(--margin) 90px;
}
.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turq);
}
.legal__inner h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  margin-top: 14px;
  letter-spacing: -.01em;
}
.legal__updated {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(244,241,234,.5);
}
.legal__inner h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 24px);
  margin-top: 44px;
  margin-bottom: 14px;
  letter-spacing: -.005em;
}
.legal__inner p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(244,241,234,.78);
  margin-top: 14px;
}
.legal__inner p:first-of-type { margin-top: 26px; }
.legal__inner ul {
  margin-top: 14px;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}
.legal__inner li {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(244,241,234,.78);
}
.legal__inner b { color: var(--marfil); font-weight: 600; }
.legal__inner a {
  color: var(--turq);
  text-decoration: underline;
  text-decoration-color: rgba(49,217,176,.35);
  text-underline-offset: 3px;
}
.legal__inner a:hover { text-decoration-color: var(--turq); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  /* CRÍTICO: el .abyss (canvas fijo del cenote, z-index:0) se pinta ENCIMA
     de cualquier elemento sin posición. main tiene z-index:1; el footer vive
     fuera de main y sin esto queda enterrado bajo el fondo — invisible. */
  position: relative;
  z-index: 1;
  padding: 60px var(--margin);
  background: rgba(10,10,11,.85);
  border-top: 1px solid rgba(244,241,234,.10);
}
.footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px;
}
.footer__logo { color: var(--turq); display: block; }
.footer__logo svg { height: 20px; width: auto; display: block; fill: currentColor; }
.footer__tag, .footer__copy {
  font-family: var(--font-body);
  font-size: 13px; letter-spacing: .01em;
  color: rgba(244,241,234,.58);
}
.footer__legal {
  display: flex;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 13px; letter-spacing: .01em;
}
.footer__legal a {
  color: rgba(244,241,234,.58);
  transition: color var(--t-fast) var(--ease-out);
}
.footer__legal a:hover { color: var(--turq); }
@media (max-width: 640px) {
  .footer__inner { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__toggle {
    display: flex;
    position: fixed;
    top: 20px; right: var(--margin);
    z-index: 130;
  }
  .hero__grid { background-size: 50% 100%; }
}
@media (min-width: 861px) {
  .navmenu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ray, .scrollcue__dot { animation: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .descent { height: 100svh !important; }
  .abyss__particles { display: none; }
}

/* ============================================================
   EL DESCENSO — hero cinematográfico atado al scroll
   Superficie (marfil + rayo dorado) → abismo (negro + turquesa)
   ============================================================ */
.descent {
  position: relative;
  height: 220vh;               /* el hero pinnea ~2 pantallas; el descenso del fondo es global */
  background: transparent;     /* el abismo fijo vive detrás de todo */
}
.descent__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;   /* el contenido fluye desde el padding, jamas invade el nav */
  padding: max(14vh, 130px) var(--margin) 150px;
  background: transparent;     /* la boca del cenote se ve detras */
}



.descent .hero__grid { z-index: 2; }

/* La copia flota sobre el agua y emerge vía máscara de gradiente */
.descent__copy {
  z-index: 3;
  /* la máscara revela el contenido "desde el agua"; --m lo controla el scroll */
  -webkit-mask-image: linear-gradient(to top, transparent var(--m, 0%), #000 calc(var(--m, 0%) + 8%));
          mask-image: linear-gradient(to top, transparent var(--m, 0%), #000 calc(var(--m, 0%) + 8%));
}

/* El texto pasa de tinta (sobre la luz) a marfil (sobre abismo) al descender */
.descent__copy .hero__title span,
.descent__copy .eyebrow > span:last-child,
.descent__copy .hero__sub {
  color: color-mix(in srgb, var(--ink) calc((1 - var(--descent, 0)) * 100%), var(--marfil));
}
/* La palabra editorial: esmeralda profunda en la luz -> luz de cenote en el abismo */
.descent__copy .hero__title--accent em {
  color: color-mix(in srgb, var(--turq-deep) calc((1 - var(--descent, 0)) * 100%), var(--turq));
}
.descent__copy .eyebrow { color: color-mix(in srgb, rgba(10,10,11,.6) calc((1 - var(--descent,0)) * 100%), rgba(244,241,234,.6)); }

/* La copia se hunde y desvanece ligeramente en la parte final del descenso */
.descent__copy {
  transform: translateY(calc(var(--descent, 0) * -40px));
  opacity: calc(1 - var(--descent, 0) * var(--descent, 0) * .85);
}

.descent__cue {
  z-index: 4;
  opacity: calc(1 - var(--descent, 0) * 1.6);
  transition: opacity .3s var(--ease-out);
}
.descent__cue .scrollcue__label {
  color: color-mix(in srgb, var(--ink) calc((1 - var(--descent, 0)) * 100%), var(--turq));
}

/* ESCALA TIPOGRÁFICA EXTREMA — de "timid" (66px) a display real awwwards */
.descent .hero__title {
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 16ch;
}

@media (max-width: 860px) {
  .descent { height: 180vh; }
  .descent .hero__title { font-size: clamp(34px, 11vw, 60px); }
}

/* ============================================================
   NAV → PILL: el nav se sumerge y se vuelve burbuja de vidrio
   ============================================================ */
.nav {
  /* centrado con max-width para que la transición a pill sea puramente numérica
     (sin saltos de transform/left) → interpolación sedosa */
  max-width: 1680px;
  margin-inline: auto;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  transition: color .5s var(--ease-out),
              background .9s var(--ease-out),
              backdrop-filter .9s var(--ease-out),
              -webkit-backdrop-filter .9s var(--ease-out),
              padding .9s var(--ease-out),
              gap .9s var(--ease-out),
              max-width 1s var(--ease-out),
              border-radius .9s var(--ease-out),
              border-color .9s var(--ease-out),
              top .9s var(--ease-out),
              box-shadow .9s var(--ease-out);
}
.nav--pill {
  top: 14px;
  max-width: 940px;
  padding: 9px 10px 9px 22px;
  border-radius: 100px;
  background: rgba(10, 10, 11, .58);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
          backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(244, 241, 234, .08);
  box-shadow: 0 12px 40px rgba(4, 10, 12, .35);
  color: var(--marfil);
  gap: 16px;
}
.nav--pill .nav__logo { color: var(--turq); }
.nav--pill .nav__logo svg { height: 16px; }
.nav--pill .nav__links { gap: 4px; font-size: 13px; }
/* Todos los links con la MISMA caja (padding + line-height) → alineados y
   centrados; el activo solo cambia el fondo, sin mover a los demás */
.nav--pill .nav__links a {
  opacity: .72;
  padding: 7px 14px;
  border-radius: 100px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: opacity var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav--pill .nav__links a:hover { opacity: 1; }
.nav--pill .nav__links a.is-active {
  opacity: 1;
  background: var(--marfil);
  color: var(--ink);
}
.nav--pill .nav__links a::after { display: none; }
.nav--pill .nav__cta {
  background: var(--turq);
  border-color: var(--turq);
  color: #04201f;
  padding: 9px 18px;
}
.nav--pill .nav__cta:hover { background: var(--marfil); border-color: var(--marfil); }
/* en pill, el color por zona ya no aplica: el vidrio manda */
body[data-zone] .nav--pill { color: var(--marfil); }

@media (max-width: 860px) {
  .nav--pill {
    width: auto;
    padding: 8px 8px 8px 18px;
  }
  .nav--pill .nav__toggle { position: static; }
}


/* Sobre la foto, el texto vive en marfil desde el inicio */
.descent--bg .descent__stage { background: transparent; }
.descent--bg .descent__copy .hero__title span,
.descent--bg .descent__copy .eyebrow > span:last-child,
.descent--bg .descent__copy .hero__sub { color: var(--marfil); }
.descent--bg .descent__copy .eyebrow { color: rgba(244,241,234,.72); }
.descent--bg .descent__copy .eyebrow__line { background: rgba(244,241,234,.35); }
.descent--bg .descent__copy .eyebrow__idx { color: var(--turq); }
.descent--bg .descent__copy .hero__title--accent em { color: var(--turq); }
.descent--bg .scrollcue { color: var(--marfil); }
.descent--bg .scrollcue__label { color: var(--marfil) !important; }
.descent--bg .scrollcue__dot { background: var(--turq); }

/* Botón fantasma legible sobre foto */
.descent--bg .btn--ghost { color: var(--marfil); }







/* ============================================================
   EL ABISMO — fondo fijo de toda la página
   El video del descenso vive aquí: scrubbea con el hero y luego
   se queda en el fondo del cenote para el resto del sitio.
   ============================================================ */
.abyss {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ink);
  overflow: hidden;
}
.abyss__frames {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
}
/* aparece en cuanto el primer frame esta dibujado (poster) */
.abyss__frames { opacity: 1; }

.abyss__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* El velo: casi transparente en la boca, denso en el fondo.
   Después del descenso se queda en su punto máximo (el abismo). */
.abyss__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(4,10,12,  calc(.10 + var(--descent, 0) * .30)) 0%,
      rgba(6,14,20,  calc(.16 + var(--descent, 0) * .42)) 48%,
      rgba(10,10,11, calc(.26 + var(--descent, 0) * .56)) 100%);
}

/* Todo el contenido va por encima del abismo */
main { position: relative; z-index: 1; }
.nav, .navmenu, .cursor-glow { z-index: 100; }
.navmenu { z-index: 110; }

/* Las reglas viejas de capas dentro del hero ya no aplican (capas movidas al abismo) */
.descent--bg .descent__stage::before { display: none; }

/* Viñeta superior global: ancla el nav sobre cualquier luz del video */
.abyss::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18vh;
  background: linear-gradient(to bottom, rgba(4,10,12,.55), rgba(4,10,12,.22) 60%, transparent);
}


/* ============================================================
   REDUCED MOTION — red de seguridad global (F6)
   Los bloques específicos de arriba siguen; esto ataja cualquier
   animación/transición CSS restante (ctapulse, breathe, depthpulse…).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   09 — SONAR: escáner de presencia online (lead magnet)
   ============================================================ */
.sonar {
  position: relative;
  padding: clamp(90px, 14vh, 160px) var(--margin);
  color: var(--marfil);
}
.sonar__inner { position: relative; z-index: 2; max-width: 880px; margin-inline: auto; }
.sonar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -.015em;
  max-width: 20ch;
  margin-top: 26px;
}
.sonar__lead {
  margin-top: 20px;
  max-width: 52ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(244,241,234,.66);
}

/* Estado 1: form */
.sonar__form { margin-top: 40px; padding: 28px; }
.sonar__fields { display: flex; gap: 16px; flex-wrap: wrap; }
.sonar__field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.sonar__field--sector { flex: 0 1 220px; }
.sonar__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,241,234,.62);
}
.sonar__input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(4,10,12,.55);
  border: 1px solid rgba(244,241,234,.14);
  border-radius: 12px;
  color: var(--marfil);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.sonar__input::placeholder { color: rgba(244,241,234,.35); }
.sonar__input:focus { outline: none; border-color: var(--turq); }
.sonar__select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.sonar__submit { margin-top: 22px; border: none; cursor: pointer; }
.sonar__hint {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(244,241,234,.45);
}

/* Estado 2: escaneo */
.sonar__scan { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.sonar__ping { position: relative; width: 90px; height: 90px; display: block; }
.sonar__ping i {
  position: absolute; inset: 0;
  border: 1px solid var(--turq);
  border-radius: 50%;
  opacity: 0;
  animation: sonarping 2.2s var(--ease-out) infinite;
}
.sonar__ping i:nth-child(2) { animation-delay: .7s; }
.sonar__ping i:nth-child(3) { animation-delay: 1.4s; }
@keyframes sonarping {
  0%   { transform: scale(.15); opacity: .9; }
  100% { transform: scale(1);   opacity: 0; }
}
.sonar__status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(244,241,234,.7);
}

/* Estado 3: resultado */
.sonar__result { margin-top: 40px; padding: 32px 30px 36px; }
.sonar__reading { display: flex; align-items: center; gap: 26px; }
.sonar__gauge {
  width: 10px; height: 150px;
  border: 1px solid rgba(244,241,234,.2);
  border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  flex: 0 0 auto;
}
.sonar__gauge-fill {
  display: block; width: 100%; height: 0%;
  background: linear-gradient(to top, var(--coral), var(--turq));
  transition: height 1.4s var(--ease-out);
}
.sonar__site {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(244,241,234,.62);
}
.sonar__depth { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(46px, 6vw, 76px); line-height: 1; margin-top: 6px; }
.sonar__depth b { font-weight: 600; color: var(--coral); }
.sonar__depthnote { display: block; margin-top: 6px; font-size: 14px; color: rgba(244,241,234,.66); }
.sonar__findings { list-style: none; margin-top: 28px; display: grid; gap: 12px; }
.sonar__findings li {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 15px; line-height: 1.5;
  color: rgba(244,241,234,.78);
  border-left: 2px solid rgba(49,217,176,.5);
  padding-left: 14px;
}
.sonar__findings b { font-family: var(--font-mono); font-size: 12px; color: var(--turq); white-space: nowrap; }
.sonar__apreciacion {
  margin-top: 26px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: rgba(244,241,234,.85);
  border-top: 1px solid rgba(244,241,234,.1);
  padding-top: 22px;
}
.sonar__cta { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sonar__again {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244,241,234,.55);
  transition: color var(--t-fast) var(--ease-out);
}
.sonar__again:hover { color: var(--coral); }
.sonar__error {
  margin-top: 26px;
  font-size: 15px;
  color: var(--coral);
}
@media (max-width: 640px) {
  .sonar__form { padding: 22px 18px; }
  .sonar__reading { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sonar__ping i { animation: none; opacity: .5; transform: scale(.6); }
  .sonar__gauge-fill { transition: none; }
}