/* ═══════════════════════════════════════════════════════════
   SHARED.CSS — Kora
   Extraído de index.html en la Fase 2 de separar Kora AI / Insights /
   Equipo en páginas HTML reales. Único punto de verdad para lo que
   usan las 4 páginas del sitio (index.html, kora-ai.html,
   insights.html, equipo.html): variables de marca, nav, el chrome
   compartido de "página con header" (.tab-page/.tab-hero/...), el
   componente de transición entre páginas (.story-bridge*), el
   sistema de scroll-reveal, y el footer.
   NO se duplica en ningún archivo — cada página lo enlaza con
   <link rel="stylesheet" href="/shared.css">.
═══════════════════════════════════════════════════════════ */

:root {
  --bg-light: #FFFFFF;
  --bg-dark: #1C342C;
  --text-dark: #1C342C;
  --text-light: #FFFFFF;
  --accent: #435B4D;
  --accent-bright: #508F57;
  --card-light: #ffffff;
  --card-dark: #435B4D;
  --border: #A9CD8E;
  --red: #c03830;
  --yellow: #e5de00;
  --green: #508F57;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --nav-h: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Hero premium palette */
  --green-deep:   #0a1a12;
  --green-mid:    #1a3d2b;
  --green-sage:   #2d6a47;
  --green-accent: #4caf7d;
  --white:        #ffffff;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-light);
  color: var(--text-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── NAVIGATION ─────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
nav.light {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-color: var(--border);
}
nav.dark {
  background: rgba(10,26,18,0.70);
  backdrop-filter: blur(20px);
  border-color: rgba(76,175,125,0.10);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.nav-logo { cursor: pointer; flex-shrink: 0; display: flex; align-items: center; }
.nav-logo-wordmark {
  font-family: 'Playfair Display', 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  color: #1C342C;
  letter-spacing: 0.1em;
  line-height: 1;
  transition: color 0.4s;
  user-select: none;
}
nav.dark .nav-logo-wordmark { color: #FFFFFF; }
.nav-tabs {
  display: none;
  align-items: center;
  gap: 4px;
}
.nav-tab {
  position: relative;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s;
  border-radius: 6px;
}
nav.dark .nav-tab { color: var(--text-light); }
.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 16px; right: 16px;
  height: 2px;
  background: var(--accent-bright);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease-out);
}
.nav-tab.active::after { transform: scaleX(1); }
.nav-tab.active { color: var(--accent); font-weight: 600; }
nav.dark .nav-tab.active { color: var(--accent-bright); }
.nav-cta {
  padding: 10px 20px;
  background: var(--accent-bright);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(67,91,77,0.35); }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: all 0.3s;
}
nav.dark .hamburger span { background: var(--text-light); }
.mobile-menu {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--bg-dark);
  padding: 32px;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}
.mobile-menu.open { display: flex; }
.mobile-tab {
  padding: 16px 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-light);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.2s;
}
.mobile-tab:hover { background: var(--card-dark); }
.mobile-cta {
  margin-top: 16px;
  padding: 16px;
  background: var(--accent-bright);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/* ── NAV RESPONSIVE ──────────────────────────────────────────
   Faltaba en el corte original del Paso 1: vivía suelta dentro de un
   @media "RESPONSIVE" en index.html que mezclaba selectores de nav
   con selectores de varias páginas distintas por breakpoint en vez
   de por componente. Detectado en el checkpoint de kora-ai.html (el
   hamburger no aparecía en mobile) y corregido acá, co-ubicado con
   el resto del nav en vez de repetir el mismo problema. ── */
@media (max-width: 900px) {
  .nav-tabs { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 600px) {
  .nav-cta { display: none; }
}

/* #nav-tabs-container (no .nav-tabs): así no toca #nav-tabs-personal,
   que solo existe en index.html y sigue dependiendo 100% de
   updateNavTabs()/xpState como hasta ahora. */
@media (min-width: 901px) {
  #nav-tabs-container { display: flex; }
}

/* ── TAB PAGE CHROME — wrapper compartido por kora-ai.html,
   insights.html, equipo.html (y el tab Planes que se queda en
   index.html). page-inicio NO lo usa, tiene su propio hero. ── */
/* ── INVENTARIO TAB ──────────────────────────────────────── */
.tab-page {
  min-height: 100vh;
  padding: calc(var(--nav-h) + 48px) 24px 80px;
}
.tab-page.dark-tab { background: var(--bg-dark); }
.tab-page.light-tab { background: var(--bg-light); }
.tab-inner { max-width: 1100px; margin: 0 auto; }
.tab-hero {
  margin-bottom: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.tab-hero.dark { border-color: rgba(169,205,142,0.12); }
.tab-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1C342C;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tab-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: #1C342C;
  border-radius: 2px;
  flex-shrink: 0;
}
.tab-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.tab-h1.dark { color: var(--text-light); }
.tab-h1.light { color: var(--text-dark); }
.tab-h1--korai {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.14;
  margin-bottom: 0;
}
.tab-h1--korai .kais-h1-light {
  font-weight: 400;
}
.tab-h1--korai .kais-h1-strong {
  font-weight: 900;
}
.tab-h1--korai .kais-h1-accent {
  display: block;
  margin-top: 0.3em;
  font-size: 0.82em;
  font-style: italic;
  font-weight: 400;
  color: #2c5c34;
}
.tab-h1--insights {
  line-height: 1.10;
  margin-bottom: 28px;
}
.tab-p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 640px;
}
.tab-p.dark { color: rgba(255,255,255,0.65); }
.tab-p.light { color: #526B65; }

/* ── STORY BRIDGE — el componente "siguiente página" reusado
   en index.html, kora-ai.html, insights.html y equipo.html. ── */
.story-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 64px;
  opacity: 0.75;
}
/* keep these shared button/cta classes unchanged */
.story-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.story-cta-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.story-cta-label.light { color: #8FA98A; }
.story-cta-label.dark  { color: rgba(169,205,142,0.55); }
.story-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 44px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.22s var(--ease-out), box-shadow 0.25s, background 0.2s;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.story-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.story-cta-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.story-cta-label.light { color: #8FA98A; }
.story-cta-label.dark  { color: rgba(169,205,142,0.55); }
.story-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 44px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.22s var(--ease-out), box-shadow 0.25s, background 0.2s;
  letter-spacing: 0.01em;
}
.story-btn.dark-solid {
  background: var(--text-dark);
  color: #fff;
}
.story-btn.dark-solid:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(28,52,44,0.22);
}
.story-btn.dark-solid:active {
  background: var(--accent);
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(28,52,44,0.18);
  transition-duration: 0.08s;
}
.story-btn.green-solid {
  background: var(--accent-bright);
  color: #fff;
}
.story-btn.green-solid:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(80,143,87,0.3);
}
.story-btn.green-solid:active {
  background: var(--accent);
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(80,143,87,0.22);
  transition-duration: 0.08s;
}
.story-btn.white-outline {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.22);
}
.story-btn.white-outline:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
  box-shadow: none;
}
.story-btn.white-outline:active {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(0);
  transition-duration: 0.08s;
}
/* Section 3 & 5 — Bridge sections (dark) */
.story-bridge {
  background: var(--bg-dark);
  padding: 140px 24px 160px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.story-bridge::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(80,143,87,0.055) 0%, transparent 60%);
  pointer-events: none;
}
.story-bridge-inner { max-width: 680px; margin: 0 auto; }
.story-bridge-phrases { margin-bottom: 64px; }
.story-phrase-lg {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.story-phrase-lg.dim    { color: rgba(255,255,255,0.28); }
.story-phrase-lg.mid    { color: rgba(255,255,255,0.60); }
.story-phrase-lg.bright { color: var(--text-light); }
.story-phrase-lg em     { color: var(--accent-bright); font-style: normal; }

/* Section 4 — Equipo bridge (light) — original text-only style */
.story-bridge-light {
  background: var(--bg-light);
  padding: 140px 24px 160px;
  text-align: center;
}
.story-bridge-light-inner { max-width: 680px; margin: 0 auto; }
.story-bridge-light .story-eyebrow { color: var(--accent); }
.story-bridge-light .story-phrase-lg.dim    { color: rgba(28,52,44,0.28); }
.story-bridge-light .story-phrase-lg.mid    { color: rgba(28,52,44,0.60); }
.story-bridge-light .story-phrase-lg.bright { color: var(--text-dark); }
.story-bridge-light .story-phrase-lg em     { color: var(--accent-bright); }
/* Scroll-progress indicator inside tab transitions */
.story-next-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 56px;
  opacity: 0.45;
}
.story-next-arrow {
  width: 14px;
  height: 14px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: bounce 2.4s ease-in-out infinite;
}
.story-bridge-light .story-next-hint { color: var(--accent); }
.story-bridge      .story-next-hint { color: rgba(169,205,142,0.6); }

/* ── SCROLL REVEAL ────────────────────────────────────────
   Consolidado en la extracción a shared.css (Fase 2). Antes vivía
   declarado DOS VECES en index.html (~línea 9089 y ~9774), con reglas
   que se pisaban por cascada — un merge por propiedad, no un bloque
   entero ganando sobre el otro. Esta es la versión que efectivamente
   ganaba hoy, confirmada con getComputedStyle real antes de tocar
   nada (Paso 0 de la Fase 2): opacity de la 1ra declaración,
   transform/transition de la 2da (ninguna de las dos reemplazaba
   TODAS las propiedades de la otra), prefers-reduced-motion solo
   existía en la 2da declaración. ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-right.revealed { opacity: 1; transform: translateX(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.55s; }
.delay-6 { transition-delay: 0.7s; }
.delay-7 { transition-delay: 0.85s; }
.delay-8 { transition-delay: 1.0s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FOOTER — único, fuera de todos los <div class="page">

   Recreación en HTML/CSS del componente de referencia (era React +
   motion + lucide, que no aplican acá: este sitio es HTML plano).
   Se conserva su lenguaje: glow radial arriba al centro, el filete
   difuminado sobre el borde, la retícula de marca + columnas de
   enlaces, y la entrada escalonada con desenfoque.

   La entrada usa las clases .reveal/.delay-N que ya tiene el sitio
   (mismo IntersectionObserver), y le suma el blur del original.

   Verde más profundo que --bg-dark a propósito: las páginas de
   Inicio/Kora AI/Insights terminan en .story-bridge (#1C342C) y las
   de Equipo/Planes en .story-bridge-light (blanco), así que el footer
   tiene que leerse como bloque de cierre bajo los dos casos.
═══════════════════════════════════════════════════════════ */
.kf {
  position: relative;
  overflow: hidden;
  background: #12241B;
  border-top: 1px solid rgba(169,205,142,0.14);
  padding: 72px 48px 40px;
  font-family: var(--font-body);
}
/* Glow radial arriba al centro, como el radial-gradient del original. */
.kf::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 70%; max-width: 760px; height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(169,205,142,0.10), transparent 70%);
  pointer-events: none;
}
/* Filete difuminado montado sobre el borde superior. */
.kf::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 33%; height: 1px;
  transform: translate(-50%, -50%);
  background: rgba(169,205,142,0.55);
  border-radius: 999px;
  filter: blur(1.5px);
  pointer-events: none;
}
.kf-inner { position: relative; max-width: 1280px; margin: 0 auto; }

.kf-grid {
  display: grid;
  /* Tres columnas, no cuatro: los destinos reales del sitio son las tres
     pestañas más /waitlist, y /waitlist ya vive en el botón de la marca. */
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 56px;
}

/* ── Marca ── */
.kf-wordmark {
  display: inline-block;
  font-family: 'Playfair Display', 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  user-select: none;
}
.kf-tagline {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.82);
  margin-top: 18px;
  max-width: 22ch;
}
.kf-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: #A9CD8E;
  color: #12241B;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.kf-cta:hover { background: #bcdaa2; transform: translateY(-1px); }

/* ── Columnas de enlaces ── */
.kf-col-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: 16px;
}
.kf-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.kf-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: color 0.25s;
}
.kf-link:hover { color: #fff; }
/* Términos y privacidad todavía no existen como página: van como texto
   plano, no como enlace muerto. */
.kf-soon { font-size: 14px; color: rgba(255,255,255,0.34); }
.kf-soon-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(169,205,142,0.10);
  border: 1px solid rgba(169,205,142,0.18);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A9CD8E;
}

/* ── Barra inferior ── */
.kf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.kf-copy, .kf-made { font-size: 12.5px; color: rgba(255,255,255,0.40); }

/* Entrada con desenfoque, como el AnimatedContainer del original.
   El bloque global de prefers-reduced-motion ya neutraliza opacity y
   transform de .reveal; acá se le suma el filter. */
.kf .reveal { filter: blur(4px); }
.kf .reveal.revealed { filter: blur(0); }
.kf .reveal, .kf .reveal.revealed {
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1),
              filter 0.8s cubic-bezier(0.22,1,0.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .kf .reveal { filter: none !important; transition: none !important; }
}

@media (max-width: 900px) {
  .kf-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .kf-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .kf { padding: 56px 20px 32px; }
  .kf-grid { grid-template-columns: 1fr; gap: 34px; }
  .kf-tagline { font-size: 17px; max-width: none; }
  .kf-bottom { margin-top: 40px; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   VIEW TRANSITIONS — crossfade default de raíz entre navegaciones
   (kora-ai.html / insights.html / equipo.html / index.html).
   Solo el @view-transition de raíz: sin view-transition-name por
   elemento todavía. Bloque separado de los dos prefers-reduced-motion:
   reduce de arriba (~483, ~651) a propósito — este es el caso opuesto.
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}