/* ============================================================
   PatagoniaFlow — design tokens
   Dirección: aurora austral sobre la cordillera patagónica.
   Una sola fuente de luz en toda la página: arriba-izquierda.
   ============================================================ */
:root {
  /* --- Fondos --- */
  --color-bg:        #05121A;
  --color-bg-deep:   #040E14;
  --color-bg-alt:    #071C2B;
  --color-surface:   #0B2430;
  --color-surface-2: #081D27;

  /* --- Texto --- */
  --color-ink:       #B8D4CC;
  --color-muted:     #8FB3AC;
  --color-ink-dark:  #032018;

  /* --- Acentos --- */
  --color-neon:      #00E58F;
  --color-neon-soft: #6BFFB8;
  --color-cyan:      #3BA9FF;
  --color-cyan-soft: #4DD8FF;
  --color-cyan-pale: #9BDCFF;
  --color-mint-pale: #7FF0C4;
  --color-warn:      #FFB454;

  /* Alias de compatibilidad: usados en todo el archivo, no borrar */
  --color-current:   var(--color-neon);
  --color-fiordo:    var(--color-cyan);

  /* --- Degradados --- */
  --grad-title:  linear-gradient(168deg, #6BFFB8 0%, #5AF0D8 46%, #4DD8FF 100%);
  --grad-accent: linear-gradient(100deg, #00E58F 0%, #3BA9FF 92%);
  --grad-btn:    linear-gradient(135deg, #00E58F 0%, #23F2C0 52%, #3BA9FF 145%);
  --grad-hair:   linear-gradient(90deg, transparent 0%, rgba(0, 229, 143, 0.22) 28%,
                                 rgba(59, 169, 255, 0.24) 68%, transparent 100%);
  --grad-border: linear-gradient(142deg,
                   rgba(107, 255, 184, 0.58) 0%,
                   rgba(59, 169, 255, 0.32) 38%,
                   rgba(59, 169, 255, 0.08) 66%,
                   rgba(143, 179, 172, 0.05) 100%);

  /* --- Glow --- */
  --shadow-lift: 0 26px 52px -30px rgba(0, 0, 0, 0.92);

  /* --- Tipografía --- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Karla', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* --- Ritmo --- */
  --measure: 68ch;
  --section-pad: clamp(5.5rem, 11vw, 10rem);
  --edge-pad: clamp(1.25rem, 5vw, 3.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
}

/* ============================================================
   Fonts
   ============================================================ */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 350 650;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('assets/fonts/karla-variable.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('assets/fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('assets/fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

::selection { background: rgba(0, 229, 143, 0.28); color: #E6FFF4; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--grad-btn);
  color: var(--color-ink-dark);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  z-index: 100;
  box-shadow: 0 8px 26px -12px rgba(0, 229, 143, 0.7);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Cyan y no verde: se distingue incluso sobre el botón primario */
:focus-visible {
  outline: 2px solid var(--color-cyan-pale);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Type scale
   ============================================================ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--color-cyan-soft);
  text-shadow: 0 0 20px rgba(77, 216, 255, 0.35);
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 229, 143, 0.95), rgba(59, 169, 255, 0.35));
  box-shadow: 0 0 10px rgba(0, 229, 143, 0.65);
}

.section__title {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 18ch;
  margin-bottom: clamp(2.5rem, 5.5vw, 4rem);
}

/* Degradado solo en los títulos grandes: a tamaño chico se lee como
   un color mal renderizado, y repetirlo ocho veces anula el efecto. */
.hero__title,
.section__title,
.nav__brand span {
  color: var(--color-mint-pale);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero__title,
  .section__title,
  .nav__brand span {
    background-image: var(--grad-title);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.section__inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--edge-pad);
}

section:not(.hero) {
  position: relative;
  padding-block: var(--section-pad);
}

/* Filo luminoso al inicio de cada sección: estructura sin ocupar espacio */
.beneficios::before,
.proceso::before,
.contacto::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad-hair);
  pointer-events: none;
}

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 1.1rem;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.nav.is-scrolled {
  background-color: rgba(5, 18, 26, 0.74);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: transparent;
  box-shadow: 0 16px 44px -32px rgba(0, 0, 0, 0.95);
}
.nav.is-scrolled::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0, 229, 143, 0.6) 24%,
    rgba(59, 169, 255, 0.6) 64%, transparent 100%);
}
.nav__inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--edge-pad);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.15rem;
  text-decoration: none;
  margin-right: auto;
}
.nav__links {
  display: flex;
  gap: 1.75rem;
  font-size: 0.95rem;
}
.nav__links a {
  position: relative;
  text-decoration: none;
  color: var(--color-muted);
  padding-block: 0.25rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 1px;
  background: var(--grad-accent);
  box-shadow: 0 0 8px rgba(0, 229, 143, 0.6);
  transition: left var(--dur-med) var(--ease-out), right var(--dur-med) var(--ease-out);
}
.nav__links a:hover { color: var(--color-neon-soft); }
.nav__links a:hover::after { left: 0; right: 0; }

.btn--nav { font-size: 0.9rem; padding: 0.55rem 1.2rem; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 0.5rem;
}
.nav__toggle span {
  width: 20px;
  height: 2px;
  background: var(--color-neon-soft);
  border-radius: 2px;
}

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem var(--edge-pad) 2rem;
}
.nav__mobile a {
  text-decoration: none;
  color: var(--color-ink);
  font-size: 1.05rem;
}
.nav.is-open .nav__mobile {
  display: flex;
  background: linear-gradient(180deg, rgba(5, 18, 26, 0.96), rgba(4, 14, 20, 0.98));
  border-top: 1px solid rgba(0, 229, 143, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ============================================================
   Buttons
   Glow en reposo SOLO en el primario. Los secundarios llegan al
   glow en hover, para que nunca haya dos luces adyacentes.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--primary {
  background: var(--grad-btn);
  color: var(--color-ink-dark);
  box-shadow:
    0 0 0 1px rgba(0, 229, 143, 0.45),
    0 8px 24px -10px rgba(0, 229, 143, 0.55),
    0 0 44px -16px rgba(59, 169, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover {
  transform: scale(1.03);
  box-shadow:
    0 0 0 1px rgba(107, 255, 184, 0.85),
    0 12px 32px -8px rgba(0, 229, 143, 0.75),
    0 0 68px -14px rgba(59, 169, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn--primary:active { transform: scale(0.98); }

.btn--text {
  background: transparent;
  color: var(--color-cyan-pale);
  padding: 0.85rem 0.5rem;
  font-weight: 500;
}
.btn--text:hover { color: var(--color-cyan-soft); }
.btn--text span { transition: transform var(--dur-fast) var(--ease-out); display: inline-block; }
.btn--text:hover span { transform: translateX(4px); }

.btn--whatsapp {
  background: transparent;
  color: var(--color-cyan-soft);
  border: 1px solid rgba(59, 169, 255, 0.42);
}
.btn--whatsapp:hover {
  background: rgba(59, 169, 255, 0.1);
  border-color: rgba(77, 216, 255, 0.72);
  box-shadow: 0 0 28px -14px rgba(59, 169, 255, 0.85);
  transform: scale(1.02);
}
.btn--whatsapp[hidden] { display: none; }

/* ============================================================
   Hero — aurora austral sobre la cordillera
   4 capas, sin markup extra:
     .hero          → estrellas + glow profundo + base
     .hero::before  → cortina de aurora
     .hero::after   → silueta de cordillera con luz de filo
     .hero__inner::before → scrim de legibilidad
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate; /* acota el mix-blend-mode de la aurora al hero */
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -5.4rem;
  padding-top: 5.4rem;
  background:
    radial-gradient(1.4px 1.4px at 45% 8%, rgba(107, 255, 184, 0.38), transparent 60%),
    radial-gradient(1.2px 1.2px at 18% 21%, rgba(184, 212, 204, 0.42), transparent 60%),
    radial-gradient(1px 1px at 62% 13%, rgba(155, 220, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 84% 27%, rgba(184, 212, 204, 0.28), transparent 60%),
    radial-gradient(1px 1px at 71% 41%, rgba(155, 220, 255, 0.22), transparent 60%),
    radial-gradient(120% 78% at 78% 4%, rgba(0, 229, 143, 0.3), transparent 58%),
    radial-gradient(92% 66% at 97% 32%, rgba(59, 169, 255, 0.32), transparent 62%),
    radial-gradient(72% 52% at 6% 84%, rgba(59, 169, 255, 0.14), transparent 66%),
    linear-gradient(178deg, #061A22 0%, #05121A 54%, #04101A 100%);
}

.hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -28%; left: -15%; right: -15%; height: 96%;
  pointer-events: none;
  background: repeating-linear-gradient(101deg,
    transparent 0 22px,
    rgba(0, 229, 143, 0.46) 22px 34px,
    transparent 34px 62px,
    rgba(59, 169, 255, 0.38) 62px 74px,
    transparent 74px 118px,
    rgba(107, 255, 184, 0.3) 118px 126px,
    transparent 126px 190px);
  filter: blur(34px) saturate(165%);
  mix-blend-mode: screen;
  opacity: 0.78;
  -webkit-mask-image: radial-gradient(74% 64% at 74% 20%, #000 0%, rgba(0, 0, 0, 0.78) 42%, transparent 79%);
          mask-image: radial-gradient(74% 64% at 74% 20%, #000 0%, rgba(0, 0, 0, 0.78) 42%, transparent 79%);
  animation: aurora-breathe 22s ease-in-out infinite;
}

/* Respiración de opacidad, ±0.04. Nada se desplaza. */
@keyframes aurora-breathe {
  0%, 100% { opacity: 0.74; }
  50%      { opacity: 0.84; }
}

.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -2%; right: -2%; bottom: -1px;
  height: clamp(92px, 17vh, 200px);
  pointer-events: none;
  background: linear-gradient(180deg, #04101A 0%, #05121A 62%, #05121A 100%);
  clip-path: polygon(
    0% 100%, 0% 63%, 6% 47%, 11% 58%, 17% 33%, 23% 46%, 29% 39%,
    36% 67%, 43% 51%, 49% 20%, 56% 43%, 62% 35%, 69% 59%, 75% 45%,
    82% 61%, 88% 41%, 94% 57%, 100% 45%, 100% 100%);
  filter: drop-shadow(0 -1px 0 rgba(107, 255, 184, 0.3))
          drop-shadow(0 -10px 26px rgba(0, 229, 143, 0.2));
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--edge-pad);
  width: 100%;
}
.hero__inner::before {
  content: '';
  position: absolute;
  z-index: -1; /* detrás del texto, delante de la aurora */
  inset: -20% -6% -16% -48%;
  pointer-events: none;
  background:
    radial-gradient(58% 72% at 26% 46%,
      rgba(4, 14, 20, 0.9) 0%, rgba(4, 14, 20, 0.62) 46%, transparent 76%),
    radial-gradient(46% 46% at 20% 32%, rgba(0, 229, 143, 0.1), transparent 70%);
}

.hero [data-hero-el] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
body.is-loaded .hero [data-hero-el] { opacity: 1; transform: translateY(0); }
body.is-loaded .eyebrow[data-hero-el] { transition-delay: 120ms; }
body.is-loaded .line[data-hero-el] { transition-delay: 260ms; }
body.is-loaded .line--accent[data-hero-el] { transition-delay: 400ms; }
body.is-loaded .hero__sub[data-hero-el] { transition-delay: 560ms; }
body.is-loaded .hero__cta[data-hero-el] { transition-delay: 720ms; }

.hero .eyebrow { margin-bottom: 1.75rem; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}
/* overflow:clip conserva la máscara del reveal pero deja respirar el glow */
.line-wrap {
  display: block;
  overflow: clip;
  overflow-clip-margin: 0.4em;
}
.line { display: block; }

/* -webkit-text-fill-color se hereda: la línea acento necesita su
   propio background-image o saldría con el degradado del padre cortado */
.line--accent {
  font-style: italic;
  color: var(--color-neon);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .line--accent {
    background-image: var(--grad-accent);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(0, 229, 143, 0.38))
            drop-shadow(0 0 60px rgba(0, 229, 143, 0.14));
  }
}

.hero__sub {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--color-muted);
  margin-bottom: 2.5rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Beneficios
   ============================================================ */
.beneficios__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
/* Borde degradado sin markup extra: padding-box + border-box */
.card {
  border: 1px solid transparent;
  border-radius: 1.25rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background:
    linear-gradient(168deg, var(--color-surface) 0%, var(--color-surface-2) 100%) padding-box,
    var(--grad-border) border-box;
  box-shadow:
    inset 0 1px 0 rgba(107, 255, 184, 0.09),
    var(--shadow-lift);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.card:hover {
  transform: translateY(-5px);
  background:
    linear-gradient(168deg, #0D2A37 0%, #0A2230 100%) padding-box,
    linear-gradient(142deg,
      rgba(107, 255, 184, 0.92) 0%,
      rgba(59, 169, 255, 0.55) 38%,
      rgba(59, 169, 255, 0.14) 68%,
      rgba(143, 179, 172, 0.06) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(107, 255, 184, 0.18),
    0 30px 60px -34px rgba(0, 0, 0, 0.95),
    0 0 46px -22px rgba(0, 229, 143, 0.55);
}
.card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 560;
  color: var(--color-mint-pale);
  margin-bottom: 0.75rem;
}
.card p { color: var(--color-muted); }

/* ============================================================
   Proceso — los pasos son nodos conectados por un riel,
   no una lista numerada: es el diagrama de flujo que vende la marca.
   ============================================================ */
.proceso {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(62% 70% at 88% 26%, rgba(59, 169, 255, 0.11), transparent 66%),
    radial-gradient(50% 60% at 4% 82%, rgba(0, 229, 143, 0.07), transparent 66%),
    linear-gradient(180deg, #061621 0%, #0A2430 46%, #061621 100%);
  box-shadow:
    inset 0 1px 0 rgba(107, 255, 184, 0.08),
    inset 0 -1px 0 rgba(59, 169, 255, 0.08);
}
.proceso__list {
  display: flex;
  flex-direction: column;
}
.proceso__step {
  position: relative;
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
}
/* El riel arranca debajo del nodo y atraviesa el divisor hasta el
   nodo siguiente: si viviera en el divisor quedaría flotando suelto. */
.proceso__step::before {
  content: '';
  position: absolute;
  left: 1.375rem;
  transform: translateX(-0.5px);
  top: 3.3rem;
  bottom: -2.5rem;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(0, 229, 143, 0.55) 0%, rgba(59, 169, 255, 0.42) 55%, rgba(59, 169, 255, 0.18) 100%);
}
.proceso__step:last-child::before { display: none; }
.proceso__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-neon-soft);
  border: 1px solid rgba(0, 229, 143, 0.38);
  background: radial-gradient(circle at 50% 34%,
    rgba(0, 229, 143, 0.18) 0%, rgba(0, 229, 143, 0.04) 58%, transparent 72%);
  box-shadow:
    0 0 26px -8px rgba(0, 229, 143, 0.55),
    inset 0 0 18px -8px rgba(0, 229, 143, 0.85);
  text-shadow: 0 0 12px rgba(0, 229, 143, 0.55);
}
.proceso__step h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 560;
  color: var(--color-cyan-pale);
  margin-bottom: 0.55rem;
}
.proceso__step p { color: var(--color-muted); max-width: 52ch; }

.proceso__divider {
  position: relative;
  height: 2.5rem;
  margin: 0;
  padding: 0;
}
.proceso__divider svg {
  position: absolute;
  left: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 76px;
  height: 8px;
  overflow: visible;
  opacity: 0.55;
}
.proceso__divider path {
  fill: none;
  stroke: var(--color-cyan);
  stroke-opacity: 0.9;
  stroke-width: 1.25;
  filter: drop-shadow(0 0 5px rgba(59, 169, 255, 0.55));
}

/* ============================================================
   Contacto
   ============================================================ */
.contacto {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 84% 6%, rgba(59, 169, 255, 0.17), transparent 62%),
    radial-gradient(64% 80% at 5% 94%, rgba(0, 229, 143, 0.12), transparent 62%),
    linear-gradient(200deg, #05121A 0%, #071C2B 100%);
}

.contacto__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contacto__info p { color: var(--color-muted); margin-block: 1.25rem; max-width: 42ch; }
.contacto__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-neon-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 255, 184, 0.35);
  padding-bottom: 0.15rem;
  transition: text-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.contacto__email:hover {
  border-bottom-color: rgba(107, 255, 184, 0.85);
  text-shadow: 0 0 20px rgba(107, 255, 184, 0.6);
}
/* Deliberadamente sobria y sin glow: es la línea de "esto es real" */
.contacto__credibilidad {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
  letter-spacing: 0.05em;
  border-left: 1px solid rgba(0, 229, 143, 0.42);
  padding-left: 0.85rem;
  margin-top: 1.75rem;
}

.contacto__form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.85rem; color: var(--color-muted); letter-spacing: 0.01em; }
.field input,
.field textarea {
  background: rgba(59, 169, 255, 0.045);
  border: 1px solid rgba(143, 179, 172, 0.22);
  border-radius: 0.7rem;
  padding: 0.8rem 0.95rem;
  color: var(--color-ink);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(143, 179, 172, 0.55); }
.field input:hover,
.field textarea:hover { border-color: rgba(143, 179, 172, 0.38); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-neon);
  background: rgba(0, 229, 143, 0.06);
  box-shadow:
    0 0 0 3px rgba(0, 229, 143, 0.17),
    0 0 24px -6px rgba(0, 229, 143, 0.5);
}
.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contacto__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.contacto__status {
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--color-neon-soft);
}
.contacto__status[data-state="error"] { color: var(--color-warn); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative;
  padding-block: 4rem 3rem;
  border-top: none;
  background: linear-gradient(180deg, #05121A 0%, var(--color-bg-deep) 100%);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.footer__inner a {
  text-decoration: none;
  color: var(--color-cyan-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__inner a:hover { color: var(--color-neon-soft); }
.footer__tagline {
  flex-basis: 100%;
  order: 3;
  margin-top: 0.5rem;
  color: rgba(143, 179, 172, 0.78);
}
.footer__copy {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .btn--nav { display: none; }
  .nav__toggle { display: flex; }

  /* La aurora sube y se atenúa: en mobile el texto ocupa todo el ancho.
     mix-blend-mode + blur a pantalla completa es caro en gama baja. */
  .hero::before {
    height: 62%;
    top: -18%;
    filter: blur(30px) saturate(140%);
    mix-blend-mode: normal;
    opacity: 0.55;
    -webkit-mask-image: radial-gradient(90% 70% at 62% 8%, #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 78%);
            mask-image: radial-gradient(90% 70% at 62% 8%, #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 78%);
  }
  .hero::after { height: clamp(70px, 12vh, 120px); }
  .hero__inner::before { inset: -14% -12% -12% -12%; }

  .eyebrow { align-items: flex-start; }
  .eyebrow::before { margin-top: 0.58rem; width: 24px; }

  .beneficios__grid { grid-template-columns: 1fr; }

  .contacto__inner { grid-template-columns: 1fr; }

  .proceso__step { gap: 1.15rem; }
  .proceso__num { width: 2.4rem; height: 2.4rem; font-size: 0.85rem; }
  .proceso__step::before { left: 1.2rem; top: 2.95rem; }
  .proceso__divider svg { left: 2.2rem; width: 58px; }

  .footer__copy { margin-left: 0; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero [data-hero-el] {
    transition: opacity 200ms linear;
    transform: none;
  }
  body.is-loaded .hero [data-hero-el] { transform: none; }

  [data-reveal] {
    transition: opacity 200ms linear;
    transform: none;
    transition-delay: 0ms;
  }
  [data-reveal].is-visible { transform: none; }

  .hero::before { animation: none; opacity: 0.78; }

  .card:hover,
  .btn:hover,
  .btn--primary:hover,
  .btn--whatsapp:hover { transform: none; }
  .btn--text:hover span { transform: none; }
  .nav__links a::after { transition: none; }

  .card, .btn, .field input, .field textarea, .contacto__email {
    transition-duration: 1ms;
  }
}

/* ============================================================
   Alto contraste de Windows: sin esto el clip de texto deja
   los títulos invisibles.
   ============================================================ */
@media (forced-colors: active) {
  .hero__title,
  .section__title,
  .nav__brand span,
  .line--accent {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
    filter: none;
  }
  .hero::before,
  .hero::after,
  .hero__inner::before { display: none; }
}