/* ═══════════════════════════════════════════════════════════════
   Creación Consciente · Landing v2 — Design System
   Concepto: "De la saturación a la claridad"
   Paleta (manual de identidad): 60% base dark/light · 30% turquesa
   #0ABAB5 · 10% celeste #1EA7FD · esmeralda #1DB954 SOLO CTAs.
   Animación: únicamente transform + opacity (60fps budget).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cc-dark:      #0A0A0B;
  --cc-dark-2:    #101013;
  --cc-light:     #FAFBFB;
  --cc-white:     #FFFFFF;
  --cc-teal:      #0ABAB5;
  --cc-sky:       #1EA7FD;
  --cc-green:     #1DB954;
  --cc-green-dk:  #17A34A;

  --ink:          #0F172A;   /* texto principal sobre claro */
  --ink-2:        #475569;   /* texto secundario sobre claro (≥4.5:1) */
  --ink-3:        #64748B;   /* labels sobre claro */

  --paper:        rgba(255,255,255,.92);  /* texto principal sobre dark */
  --paper-2:      rgba(255,255,255,.68);  /* texto secundario sobre dark */
  --paper-3:      rgba(255,255,255,.45);  /* labels sobre dark */

  --line-dark:    rgba(255,255,255,.08);
  --line-teal-dk: rgba(10,186,181,.22);
  --line-light:   #E4E9EA;

  --radius:       1.25rem;
  --shadow-light: 0 1px 2px rgba(15,23,42,.04), 0 8px 32px rgba(15,23,42,.07);
  --shadow-pill:  0 2px 8px rgba(15,23,42,.08), 0 12px 40px rgba(15,23,42,.10);

  --ease-out:     cubic-bezier(.22,1,.36,1);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--cc-dark);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.jb { font-family: 'JetBrains Mono', monospace; }

::selection { background: rgba(10,186,181,.30); }

/* Focus visible — accesibilidad teclado */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Video de fondo del hero ─────────────────────────────────── */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .40;                /* legibilidad del texto encima */
  pointer-events: none;
  z-index: 0;
}
.hero-bg-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* refuerza contraste: más oscuro arriba (navbar) y abajo (transición) */
  background:
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.25) 30%, rgba(10,10,11,.35) 70%, rgba(10,10,11,.75) 100%);
}

/* ── Secciones y puentes de luz ─────────────────────────────── */
.section-dark  { background: var(--cc-dark);  color: var(--paper); }
.section-light { background: var(--cc-light); color: var(--ink); }

.bridge-to-light {
  height: clamp(90px, 12vw, 150px);
  background: linear-gradient(to bottom, var(--cc-dark) 0%, #3d4747 55%, var(--cc-light) 100%);
  pointer-events: none;
}
.bridge-to-dark {
  height: clamp(90px, 12vw, 150px);
  background: linear-gradient(to bottom, var(--cc-light) 0%, #3d4747 45%, var(--cc-dark) 100%);
  pointer-events: none;
}

/* ── Tipografía display ─────────────────────────────────────── */
.display-xl {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.display-lg {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.display-md {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Eyebrow — etiqueta mono de sección */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cc-teal);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2rem; height: 1px;
  background: var(--cc-teal);
  opacity: .6;
}
.section-light .eyebrow-num, .section-dark .eyebrow-num { opacity: .55; }

/* ── Navbar píldora ─────────────────────────────────────────── */
.navbar-pill {
  background: var(--cc-white);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 9999px;
  box-shadow: var(--shadow-pill);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.nav-link {
  position: relative;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: .5rem .85rem;
  border-radius: 9999px;
  transition: color .2s, background-color .2s;
  cursor: pointer;
}
.nav-link:hover { color: var(--ink); background: rgba(10,186,181,.08); }
.nav-link.active { color: var(--cc-teal); }

/* Menú móvil */
.mobile-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 84px);
  left: 1rem; right: 1rem;
  z-index: 60;
  background: var(--cc-white);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-pill);
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.mobile-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.mm-link {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem;
  min-height: 44px;
  border-radius: 1rem;
  color: var(--ink-2);
  font-weight: 500;
  font-size: .95rem;
  transition: background-color .2s, color .2s;
}
.mm-link:hover { background: rgba(10,186,181,.08); color: var(--ink); }
.mm-link svg { width: 18px; height: 18px; stroke: var(--cc-teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 9999px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              background-color .18s, border-color .18s, color .18s;
  will-change: transform;
}
.btn:active { transform: translateY(0) scale(.99); }

/* CTA del navbar: oculto en móvil (el menú móvil ya lo incluye).
   Necesario porque .btn pisa el display de la utilidad .hidden. */
@media (max-width: 639.98px) {
  .nav-cta { display: none; }
}

/* CTA — esmeralda, uso exclusivo conversión */
.btn-cta {
  background: linear-gradient(180deg, var(--cc-green) 0%, var(--cc-green-dk) 100%);
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 10px rgba(29,185,84,.28);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px rgba(29,185,84,.38);
}

/* Ghost sobre dark */
.btn-ghost-dark {
  background: rgba(10,186,181,.06);
  color: var(--cc-teal);
  border: 1px solid rgba(10,186,181,.35);
}
.btn-ghost-dark:hover {
  transform: translateY(-2px);
  background: rgba(10,186,181,.12);
  border-color: rgba(10,186,181,.6);
}

/* Ghost sobre claro */
.btn-ghost-light {
  background: rgba(10,186,181,.06);
  color: #067d79;
  border: 1px solid rgba(10,186,181,.4);
}
.btn-ghost-light:hover {
  transform: translateY(-2px);
  background: rgba(10,186,181,.12);
  border-color: var(--cc-teal);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card-dark {
  background: var(--cc-dark-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: border-color .25s, transform .25s var(--ease-out);
}
.card-dark:hover { border-color: var(--line-teal-dk); }

.card-dark-teal {
  background: linear-gradient(160deg, rgba(10,186,181,.07) 0%, rgba(10,186,181,.02) 100%);
  border: 1px solid var(--line-teal-dk);
  border-radius: var(--radius);
}

.card-light {
  background: var(--cc-white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  transition: border-color .25s, transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.card-light:hover {
  border-color: rgba(10,186,181,.45);
  box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 16px 48px rgba(15,23,42,.10);
}

/* Barra de progreso (sección problema) */
.meter { height: 6px; border-radius: 9999px; background: rgba(255,255,255,.06); overflow: hidden; }
.meter > span {
  display: block; height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--cc-sky), var(--cc-teal));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) .25s;
}
.reveal.in .meter > span { transform: scaleX(1); }

/* ── Soundwave — firma de marca (CSS puro) ──────────────────── */
.soundwave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, .8vw, 8px);
}
.sw-bar {
  width: clamp(3px, .5vw, 5px);
  border-radius: 9999px;
  background: var(--cc-teal);
  animation: sw-breathe 4.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
/* alturas y fases — silueta de onda */
.sw-bar:nth-child(1)  { height: 18px; animation-delay: 0s;    opacity: .35; }
.sw-bar:nth-child(2)  { height: 30px; animation-delay: .15s;  opacity: .45; }
.sw-bar:nth-child(3)  { height: 46px; animation-delay: .3s;   opacity: .55; }
.sw-bar:nth-child(4)  { height: 64px; animation-delay: .45s;  opacity: .7;  }
.sw-bar:nth-child(5)  { height: 84px; animation-delay: .6s;   opacity: .85; }
.sw-bar:nth-child(6)  { height: 100px;animation-delay: .75s;  opacity: 1;   }
.sw-bar:nth-child(7)  { height: 84px; animation-delay: .9s;   opacity: .85; }
.sw-bar:nth-child(8)  { height: 64px; animation-delay: 1.05s; opacity: .7;  }
.sw-bar:nth-child(9)  { height: 46px; animation-delay: 1.2s;  opacity: .55; }
.sw-bar:nth-child(10) { height: 30px; animation-delay: 1.35s; opacity: .45; }
.sw-bar:nth-child(11) { height: 18px; animation-delay: 1.5s;  opacity: .35; }
@keyframes sw-breathe {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
.soundwave--sm .sw-bar { width: 3px; }
.soundwave--sm .sw-bar:nth-child(1)  { height: 8px; }
.soundwave--sm .sw-bar:nth-child(2)  { height: 14px; }
.soundwave--sm .sw-bar:nth-child(3)  { height: 22px; }
.soundwave--sm .sw-bar:nth-child(4)  { height: 30px; }
.soundwave--sm .sw-bar:nth-child(5)  { height: 40px; }
.soundwave--sm .sw-bar:nth-child(6)  { height: 48px; }
.soundwave--sm .sw-bar:nth-child(7)  { height: 40px; }
.soundwave--sm .sw-bar:nth-child(8)  { height: 30px; }
.soundwave--sm .sw-bar:nth-child(9)  { height: 22px; }
.soundwave--sm .sw-bar:nth-child(10) { height: 14px; }
.soundwave--sm .sw-bar:nth-child(11) { height: 8px; }

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

/* ── Logo sobre fondos oscuros: chip claro ──────────────────── */
.logo-chip {
  display: inline-flex;
  align-items: center;
  background: var(--cc-white);
  border-radius: 9999px;
  padding: .55rem 1.15rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* ── Video panels (método) ──────────────────────────────────── */
.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cc-dark-2);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-light);
}
.media-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Reduced motion — congela todo ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sw-bar, .breath-rings .ring, .breath-rings .core { animation: none; }
  .sw-bar { transform: scaleY(.7); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .meter > span, .reveal.in .meter > span { transform: scaleX(1); transition: none; }
  .btn, .card-light, .card-dark { transition-property: background-color, border-color, box-shadow, color; }
  .btn:hover { transform: none; }
}