/* ==========================================================================
   KIO LANDING — V3 (RESPONSIVE)
   Design System + Animaciones + Estilo editorial moderno
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1) CUSTOM PROPERTIES (Kio DS)
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Primitivos */
  --kio-black: #000000;
  --kio-white: #FFFFFF;
  --kio-gray-dark: #1A1A1A;
  --kio-gray-neutral: #737373;
  --kio-gray-light: #D4D4D4;
  --kio-red: #DC2626;
  --kio-green: #16A34A;

  /* Semánticos */
  --kio-bg-primary: var(--kio-white);
  --kio-bg-inverse: var(--kio-black);
  --kio-bg-subtle: #F5F5F5;

  --kio-text-primary: var(--kio-black);
  --kio-text-secondary: var(--kio-gray-dark);
  --kio-text-muted: var(--kio-gray-neutral);
  --kio-text-inverse: var(--kio-white);

  --kio-border-default: var(--kio-gray-light);
  --kio-border-strong: var(--kio-gray-neutral);

  --kio-interactive-default: var(--kio-black);
  --kio-interactive-hover: var(--kio-gray-dark);
  --kio-interactive-inverse: var(--kio-white);

  --kio-feedback-error: var(--kio-red);
  --kio-feedback-success: var(--kio-green);

  /* Spacing */
  --kio-space-xs: 4px;
  --kio-space-sm: 8px;
  --kio-space-md: 16px;
  --kio-space-lg: 24px;
  --kio-space-xl: 32px;
  --kio-space-2xl: 48px;
  --kio-space-3xl: 64px;
  --kio-space-4xl: 96px;
  --kio-space-5xl: 128px;

  /* Radius */
  --kio-radius-sm: 4px;
  --kio-radius-md: 8px;
  --kio-radius-lg: 12px;
  --kio-radius-xl: 16px;
  --kio-radius-full: 9999px;

  /* Animation */
  --kio-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --kio-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --kio-duration-fast: 200ms;
  --kio-duration-normal: 400ms;
  --kio-duration-slow: 700ms;

  /* TAMAÑO de toda la lámpara (bulbo + glow juntos). Escala el conjunto sin
     desalinear nada. Bajalo si tapa texto, subilo si la querés más presente.
     Ajustes por pantalla en la sección RESPONSIVE (mobile más chica, 4K más grande).
     Nota: antes esto era un clamp() que mezclaba número con longitud → CSS
     inválido, así que NO se aplicaba y la lámpara quedaba siempre grande. */
  --lamp-scale: 0.8;

  /* Ajuste fino horizontal de la lámpara para que el bulbo caiga EXACTO
     sobre la "i" del wordmark. Positivo = mueve la lámpara a la derecha,
     negativo = a la izquierda. Tocá solo este número (de a 1px) hasta que
     encaje perfecto en tu pantalla. */
  --lamp-nudge-x: 2px;

  /* ENCAJE VERTICAL lámpara ↔ "i" en mobile (solo aplica en ≤768px).
     Distancia desde el borde superior a la que arranca el "Kio" del hero.
     Como el hero se ancla arriba y el wordmark tiene tamaño fijo en mobile,
     este único número define el encaje y queda IGUAL en todos los celulares.
     Bajalo → el "Kio" sube y el bulbo entra en la parte cóncava de la "i".
     Subilo → se separan. Toca solo este valor hasta que encaje perfecto. */
  --hero-top: 110px;
}

/* ──────────────────────────────────────────────────────────────────────────
   2) RESET & BASE
   ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Jost', sans-serif;
  color: var(--kio-text-primary);
  background: var(--kio-bg-primary);
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

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

/* ──────────────────────────────────────────────────────────────────────────
   3) TYPOGRAPHY (Kio DS)
   ────────────────────────────────────────────────────────────────────────── */
.kio-h1 {
  font-family: 'Jost', sans-serif;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-style: italic;
}

.kio-h2 {
  font-family: 'Jost', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 200;
  letter-spacing: -0.04em;
  font-style: italic;
}

.kio-h3 {
  font-family: 'Jost', sans-serif;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-style: italic;
}

.kio-body {
  font-family: 'Jost', sans-serif;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.kio-body-lg {
  font-family: 'Jost', sans-serif;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.kio-detail {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────────
   4) BUTTONS (Kio DS)
   ────────────────────────────────────────────────────────────────────────── */
.kio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kio-space-sm);
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  padding: 12px 32px;
  border-radius: var(--kio-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--kio-duration-fast) var(--kio-ease-out);
  position: relative;
  overflow: hidden;
}

.kio-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity var(--kio-duration-fast) var(--kio-ease-out);
}

.kio-btn:hover::after {
  opacity: 1;
}

.kio-btn:hover {
  transform: scale(1.02);
}

.kio-btn:active {
  transform: scale(0.98);
}

.kio-btn-dark {
  background: var(--kio-black);
  color: var(--kio-white);
}

.kio-btn-dark:hover {
  background: var(--kio-gray-dark);
}

.kio-btn-light {
  background: var(--kio-white);
  color: var(--kio-black);
}

.kio-btn-light:hover {
  background: var(--kio-gray-light);
}

.kio-btn-outline {
  background: transparent;
  border: 1.5px solid currentColor;
  color: inherit;
}

.kio-btn-outline:hover {
  background: var(--kio-black);
  color: var(--kio-white);
  border-color: var(--kio-black);
}

/* ──────────────────────────────────────────────────────────────────────────
   BETA SIGNUP FORM
   ────────────────────────────────────────────────────────────────────────── */
.beta-form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kio-space-md);
  width: 100%;
  margin-top: var(--kio-space-xl);
}

.beta-form {
  display: flex;
  gap: var(--kio-space-sm);
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 480px;
}

.beta-input {
  flex: 1;
  min-width: 220px;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 20px;
  border-radius: var(--kio-radius-md);
  border: 1.5px solid var(--kio-gray-neutral);
  background: transparent;
  color: var(--kio-white);
  transition: border-color var(--kio-duration-fast) var(--kio-ease-out);
}

.beta-input::placeholder {
  color: var(--kio-gray-neutral);
}

.beta-input:focus {
  outline: none;
  border-color: var(--kio-white);
}

.beta-input:invalid:not(:placeholder-shown) {
  border-color: var(--kio-red);
}

.beta-submit {
  white-space: nowrap;
}

.beta-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.beta-message {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  min-height: 20px;
  text-align: center;
}

.beta-message.success {
  color: #4ADE80; 
}

.beta-message.error {
  color: #F87171; 
}


.bg-white .beta-input,
.cta-final .beta-input {
  color: var(--kio-black);
  border-color: var(--kio-border-strong);
}

.bg-white .beta-input::placeholder,
.cta-final .beta-input::placeholder {
  color: var(--kio-gray-neutral);
}

/* ──────────────────────────────────────────────────────────────────────────
   5) SECTIONS & SCROLL-SNAP
   ────────────────────────────────────────────────────────────────────────── */
section {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kio-space-3xl) var(--kio-space-xl);
  position: relative;
  overflow: hidden;
}

section.bg-white {
  background: var(--kio-white);
  color: var(--kio-black);
}

section.bg-black {
  background: var(--kio-black);
  color: var(--kio-white);
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.container-narrow {
  max-width: 720px;
  text-align: center;
}

.container-que-es {
  max-width: 1440px;
  text-align: center;
  position: relative;
}

/* ──────────────────────────────────────────────────────────────────────────
   6) HERO
   ────────────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kio-space-3xl) var(--kio-space-xl);
  position: relative;
  overflow: hidden;
  background: var(--kio-black);
  color: var(--kio-white);
  transition: background 1.2s var(--kio-ease-in-out);
}

.hero.room-lit {
  background: var(--kio-white);
  color: var(--kio-black);
}

/* Lamparita SVG colgando del techo — sticky toda la landing.
   El tamaño se controla con --lamp-scale (ver sección 1), así que
   escala de forma continua y proporcional en cualquier resolución. */
.lamp-hanger {
  position: fixed;
  top: 0;
  left: 50%;
  /* Centrado (mitad del ancho) + ajuste fino para clavar el bulbo en la "i".
     Se hace por margin (no por transform) para no mezclar con el scale/swing. */
  margin-left: calc(-70px + var(--lamp-nudge-x));
  width: 140px;
  height: 340px;
  overflow: visible;
  z-index: 1000;
  transform-origin: top center;
  transform: scale(var(--lamp-scale));
  cursor: pointer;
  /* La caja del hanger es casi toda transparente. La hacemos NO clickeable
     y dejamos que solo la lámpara visible (.lamp-img) reciba el toque, así
     no se togglea el tema tocando cerca del título. El click sigue llegando
     al listener del hanger por bubbling desde .lamp-img. */
  pointer-events: none;
  /* Evita el recuadro gris/azul de tap-highlight en mobile al tocar la
     lámpara (Safari/Android pintaban toda el área transparente). */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes lamp-swing {
  0%   { transform: scale(var(--lamp-scale)) rotate(0deg); }
  15%  { transform: scale(var(--lamp-scale)) rotate(-8deg); }
  40%  { transform: scale(var(--lamp-scale)) rotate(5deg); }
  65%  { transform: scale(var(--lamp-scale)) rotate(-3deg); }
  85%  { transform: scale(var(--lamp-scale)) rotate(1deg); }
  100% { transform: scale(var(--lamp-scale)) rotate(0deg); }
}

.lamp-hanger.lamp-swing {
  animation: lamp-swing 1.2s ease-out forwards;
}

.lamp-img {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  transform-origin: top center;
  width: 100px;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* Solo la lámpara visible es clickeable (ver nota en .lamp-hanger). */
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.lamp-on {
  opacity: 0;
}

.lamp-off {
  opacity: 0;
  filter: brightness(0.2) grayscale(1);
}

/* Achicamiento al primer scroll DESACTIVADO a pedido: la lámpara mantiene
   el mismo tamaño (scale 0.7) durante toda la landing, sin salto al scrollear.
   El JS sigue agregando la clase .lamp-shrink pero ya no cambia nada.
   (Para reactivarlo: volver a poner scale(0.56) en .lamp-img y achicar el glow.) */

/* Cool white glow from the bulb only — positioned over the lightbulb */
.lamp-glow {
  position: absolute;
  top: 136px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.15);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.3) 30%, transparent 55%);
  opacity: 0;
  pointer-events: none;
}

.js .hero-content {
  opacity: 0;
  transform: translateY(20px);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  transition: opacity 1s var(--kio-ease-out), transform 1s var(--kio-ease-out);
}

.hero-content.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kio-space-lg);
}

/* Letras Kio desde Figma (oscuro sobre transparente) */
.kio-letters {
  display: block;
  width: min(380px, 70vw);
  height: auto;
  margin-bottom: var(--kio-space-md);
  filter: invert(1);
  transition: filter 1.2s var(--kio-ease-in-out);
}

.kio-letters,
.final-kio-letters {
  /* La "i" del wordmark está a -2,7% del centro del PNG. Usamos un
     porcentaje (relativo al ancho del propio elemento) en vez de un px
     fijo, así la compensación escala sola en todos los breakpoints y la
     "i" siempre cae bajo el bulbo de la lámpara. */
  transform: translateX(2.7%);
}

/* When room lights up, remove invert — dark letters on white bg */
.hero.room-lit .kio-letters {
  filter: invert(0);
}

.hero-text .kio-tagline {
  font-family: 'Jost', sans-serif;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.35;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--kio-gray-light);
  max-width: 480px;
  transition: color 1.2s var(--kio-ease-in-out), opacity 1s var(--kio-ease-out), transform 1s var(--kio-ease-out);
  opacity: 0;
  transform: translateY(10px);
}

.hero-content.visible .hero-text .kio-tagline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

.hero.room-lit .hero-text .kio-tagline {
  color: var(--kio-gray-neutral);
}

.hero-cta {
  margin-top: var(--kio-space-md);
}

/* ──────────────────────────────────────────────────────────────────────────
   7) SECTION STYLES
   ────────────────────────────────────────────────────────────────────────── */
.section-label {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kio-gray-neutral);
  margin-bottom: var(--kio-space-md);
}

.section-title {
  margin-bottom: var(--kio-space-lg);
}

.section-text {
  color: var(--kio-gray-neutral);
  max-width: 600px;
  margin: 0 auto var(--kio-space-md);
}

.bg-black .section-text {
  color: var(--kio-gray-light);
}

.bg-black .section-label {
  color: var(--kio-gray-neutral);
}

/* ¿Kio? title + texto (antes estaban con estilos inline en el HTML) */
.section-kio-title {
  font-family: 'Jost', sans-serif;
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--kio-white);
}

.que-es-title {
  text-align: center;
  margin-bottom: var(--kio-space-sm);
}

.que-es-text {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  color: var(--kio-gray-light);
  font-size: 20px;
  text-align: center;
  line-height: 1.6;
}

.construccion-text {
  color: var(--kio-gray-light);
}

/* Feature cards grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--kio-space-xl);
  max-width: 1188px;
  margin: var(--kio-space-3xl) auto 0;
}

.feature-card {
  position: relative;
  background: rgba(255,255,255,0.07);
  border-radius: var(--kio-radius-lg);
  padding: var(--kio-space-lg);
  overflow: hidden;
  transition: background 0.3s var(--kio-ease-out);
}

/* Top edge reflection — matches Figma export gradient */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0.06) 40%,
    transparent 100%
  );
  border-radius: var(--kio-radius-lg) var(--kio-radius-lg) 0 0;
  pointer-events: none;
  transition: opacity 0.3s var(--kio-ease-out);
}

.feature-card:hover {
  background: rgba(255,255,255,0.10);
}

.feature-card:hover::before {
  opacity: 0.7;
}

.feature-card h3 {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--kio-white);
  margin-bottom: var(--kio-space-sm);
}

.feature-card p {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--kio-gray-neutral);
}

/* Split layout (text + phone) */
.split-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kio-space-2xl);
  max-width: 1100px;
}

.split-text {
  flex: 1;
  text-align: center;
}

.split-quote {
  font-family: 'Jost', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--kio-gray-dark);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.split-phones {
  flex-shrink: 0;
}

.split-phone {
  /* Los dos PNG tienen aspect ratios distintos (maker 0,51 / lector 0,48).
     Con una caja de ancho fijo + object-fit:contain cada uno se encogía
     distinto y quedaban de tamaños diferentes. Fijando la ALTURA (y ancho
     auto) ambos quedan igual de altos = mismo tamaño visual. */
  height: 480px;
  width: auto;
  flex-shrink: 0;
  transition: transform 1.2s var(--kio-ease-out), opacity 1.2s var(--kio-ease-out);
}

.split-phone img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
}

/* El mockup de la izquierda (maker) está más inclinado, así que su
   dispositivo entra ~2,5% más chico dentro del mismo alto de lienzo.
   Lo compensamos escalando SOLO la imagen (no el div, que ya usa transform
   para la animación de entrada) para que ambos celus se vean del mismo tamaño.
   Tocá este número si querés afinar. */
.phone-maker img {
  transform: scale(1.03);
  transform-origin: center;
}

.phone-maker {
  transform: translateX(-120%) rotate(-6deg);
  opacity: 0;
}

.phone-lector {
  transform: translateX(120%) rotate(6deg);
  opacity: 0;
}

.split-phones.visible .phone-maker,
.split-phones.visible .phone-lector {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

.bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--kio-space-md);
  max-width: 500px;
  margin: var(--kio-space-xl) auto 0;
  text-align: left;
}

.bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--kio-space-md);
  font-family: 'Jost', sans-serif;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.4;
  font-weight: 300;
}

.bullets li::before {
  content: '—';
  font-weight: 600;
  font-style: italic;
  flex-shrink: 0;
  color: var(--kio-gray-neutral);
}

.bg-black .bullets li {
  color: var(--kio-gray-light);
}

/* Timeline (versión horizontal — desktop/tablet ancho) */
.timeline {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--kio-space-xl);
  margin: var(--kio-space-2xl) 0;
  flex-wrap: wrap;
}

/* Solid connecting line — spans first 60% */
.timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  height: 1px;
  width: 55%;
  background: var(--kio-gray-neutral);
  z-index: 0;
}

/* Dashed line — last 40%, covers julio→lanzamiento */
.timeline::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 0;
  height: 1px;
  width: 45%;
  background: repeating-linear-gradient(
    to right,
    var(--kio-gray-neutral) 0px,
    var(--kio-gray-neutral) 4px,
    transparent 4px,
    transparent 8px
  );
  z-index: 0;
}

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kio-space-sm);
  font-family: 'Jost', sans-serif;
  z-index: 1;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kio-gray-light);
  transition: background var(--kio-duration-normal) var(--kio-ease-out);
}

.timeline-item.visible .timeline-dot {
  background: var(--kio-black);
}

.bg-black .timeline-item.visible .timeline-dot {
  background: var(--kio-white);
}

.timeline-future .timeline-dot {
  background: transparent;
  border: 1.5px dashed var(--kio-gray-neutral);
}

.timeline-future.visible .timeline-dot {
  border-color: var(--kio-black);
}

.bg-black .timeline-future.visible .timeline-dot {
  border-color: var(--kio-white);
}

.timeline-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--kio-gray-neutral);
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   8) CTA FINAL
   ────────────────────────────────────────────────────────────────────────── */
.cta-final {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kio-space-3xl) var(--kio-space-xl);
  position: relative;
  overflow: hidden;
  background: var(--kio-white);
  color: var(--kio-black);
}

.cta-final .section-text {
  color: var(--kio-gray-neutral);
}

.cta-btn-wrap {
  margin-top: var(--kio-space-xl);
}

/* Footer */
.footer {
  margin-top: var(--kio-space-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kio-space-md);
}

.footer-logo {
  font-family: 'Jost', sans-serif;
  font-size: 24px;
  font-weight: 600;
  font-style: italic;
}

.footer-links {
  display: flex;
  gap: var(--kio-space-lg);
}

.footer-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--kio-gray-light);
  transition: color var(--kio-duration-fast) var(--kio-ease-out);
}

.footer-links a:hover {
  color: var(--kio-white);
}

/* ──────────────────────────────────────────────────────────────────────────
   8b) FINAL SECTION — se apaga la luz
   ────────────────────────────────────────────────────────────────────────── */
.final-section {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--kio-space-2xl) var(--kio-space-lg);
  background: var(--kio-white);
  color: var(--kio-black);
  transition: background 1.5s ease, color 1.5s ease;
}

.final-section.ending-dark {
  background: var(--kio-black);
  color: var(--kio-white);
}

.final-kio-letters {
  width: min(380px, 70vw);
  height: auto;
  opacity: 0;
  /* Mantiene la compensación horizontal de la "i" (2.7%) igual que el Kio
     del hero, además del desplazamiento vertical de la animación. */
  transform: translateX(2.7%) translateY(20px);
  transition: opacity 1.2s var(--kio-ease-out), transform 1.2s var(--kio-ease-out);
  filter: invert(1) brightness(0.5);
}

.final-section.ending-dark .final-kio-letters {
  opacity: 1;
  transform: translateX(2.7%) translateY(0);
}

.final-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kio-space-xl);
}

.final-slogan {
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kio-white);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1.2s ease 2s, transform 1.2s ease 2s;
}

.final-section.ending-dark .final-slogan {
  opacity: 0.7;
  transform: translateY(0);
}

.final-socials {
  display: flex;
  gap: var(--kio-space-xl);
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 300;
}

.final-socials a {
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.final-socials a:hover {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   DARK LANDING MODE — triggered when lamp goes off at the end
   ────────────────────────────────────────────────────────────────────────── */
body.dark-landing .hero,
body.dark-landing .hero.room-lit {
  background: var(--kio-black);
  color: var(--kio-white);
}

body.dark-landing .hero.room-lit .kio-letters,
body.dark-landing .kio-letters {
  filter: invert(1);
}

body.dark-landing .hero-text .kio-tagline,
body.dark-landing .hero.room-lit .hero-text .kio-tagline {
  color: var(--kio-gray-light);
}

body.dark-landing section.bg-white {
  background: var(--kio-black);
  color: var(--kio-white);
}

body.dark-landing .split-quote {
  color: var(--kio-gray-light);
}

body.dark-landing .split-phone img {
  filter: drop-shadow(0 20px 40px rgba(255,255,255,0.08));
}

body.dark-landing .final-section,
body.dark-landing .final-section.ending-dark {
  background: var(--kio-black);
  color: var(--kio-white);
}

body.dark-landing .lamp-on {
  opacity: 0;
}

body.dark-landing .lamp-off {
  opacity: 0.5;
  filter: brightness(0.2) grayscale(1) drop-shadow(0 0 3px rgba(255,255,255,0.35));
}

body.dark-landing .lamp-glow {
  opacity: 0;
}

body.dark-landing .kio-btn-light {
  background: var(--kio-white);
  color: var(--kio-black);
}

/* CTA section (white → dark on lamp off) */
body.dark-landing .cta-final {
  background: var(--kio-black);
  color: var(--kio-white);
}

body.dark-landing .cta-final .section-text {
  color: var(--kio-gray-light);
}

body.dark-landing .cta-final .kio-btn-dark {
  background: var(--kio-white);
  color: var(--kio-black);
}

/* ──────────────────────────────────────────────────────────────────────────
   9) SCROLL REVEAL ANIMATIONS
   ────────────────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--kio-ease-out), transform 0.8s var(--kio-ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Focus states */
a:focus-visible,
.kio-btn:focus-visible {
  outline: 2px solid var(--kio-black);
  outline-offset: 3px;
}

.bg-black a:focus-visible,
.bg-black .kio-btn:focus-visible,
.cta-final a:focus-visible,
.cta-final .kio-btn:focus-visible {
  outline-color: var(--kio-white);
}

/* ──────────────────────────────────────────────────────────────────────────
   10) EASTER EGG: Dark mode toggle easter egg (click "Kio" brand 3 times)
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   11) PRELUDE STATE (room dark, lamp flicker)
   ────────────────────────────────────────────────────────────────────────── */
body.prelude {
  background: #000;
}

/* ──────────────────────────────────────────────────────────────────────────
   12) RESPONSIVE
   Orden: base (desktop) → 1600px+ (grande/4K) → 1024px (tablet)
          → 768px (mobile) → 380px (mobile chico)
   El scroll-snap "mandatory" (definido en la sección 2, en <html>) se
   mantiene SIEMPRE activo, en todas las resoluciones — eso es lo que
   ustedes querían: bajar/subir siempre mueve exactamente un bloque.
   ────────────────────────────────────────────────────────────────────────── */

/* ---- 12.1) Pantallas grandes / 4K (≥1600px) ----
   Bloques más "llenos": más padding, elementos más grandes,
   tipografía por encima del tope de los clamp() base. */
@media (min-width: 1600px) {
  :root {
    --kio-space-3xl: 96px;
    --kio-space-4xl: 140px;
    --kio-space-5xl: 180px;
    /* En pantallas grandes/4K la lámpara puede ser un poco más presente. */
    --lamp-scale: 0.95;
  }

  .container { max-width: 1500px; }
  .container-narrow { max-width: 900px; }
  .container-que-es { max-width: 1700px; }

  .kio-h1 { font-size: 120px; }
  .kio-h2 { font-size: 76px; }
  .kio-h3 { font-size: 48px; }
  .kio-body-lg { font-size: 26px; }
  .section-kio-title { font-size: 76px; }
  .que-es-text { font-size: 22px; }

  .feature-grid {
    max-width: 1600px;
    gap: var(--kio-space-2xl);
  }
  .feature-card { padding: var(--kio-space-xl); }
  .feature-card h3 { font-size: 20px; }
  .feature-card p { font-size: 16px; }

  .kio-letters,
  .final-kio-letters { width: min(460px, 30vw); }

  .split-layout { gap: var(--kio-space-4xl); max-width: 1400px; }
  .split-phone { height: 600px; }
  .split-quote { font-size: 44px; max-width: 620px; }

  .kio-btn { padding: 16px 40px; font-size: 18px; }

  .timeline { gap: var(--kio-space-2xl); margin: var(--kio-space-3xl) 0; }
  .timeline-label { font-size: 15px; }
}

/* ---- 12.2) Tablet (hasta 1024px) ---- */
@media (max-width: 1024px) {
  /* Un solo contexto de scroll (el documento). Si un bloque no entra en
     una pantalla, crece y se scrollea con el resto de la página en vez
     de tener su propio scroll interno — eso es lo que rompía el touch
     de un dedo en celulares reales (dos scrolls anidados compitiendo). */
  section, .hero, .cta-final {
    padding: var(--kio-space-2xl) var(--kio-space-md);
    min-height: 100vh;
    min-height: 100dvh;
    scroll-snap-stop: always;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kio-space-lg);
  }

  .split-layout {
    gap: var(--kio-space-lg);
  }

  .split-phone {
    height: 400px;
  }

  .container {
    max-width: 900px;
  }
}

/* ---- 12.3) Mobile (hasta 768px) ---- */
@media (max-width: 768px) {
  /* La lamparita se achica un poco más en mobile (el piso del clamp
     general es 0.4; acá lo bajamos a 0.3 solo para pantallas chicas)
     para reducir las chances de que tape el texto de arriba. */
  :root {
    /* En mobile la achicamos más para que no tape el texto. */
    --lamp-scale: 0.55;
  }
  
  /* Anclamos arriba (en vez de centrar vertical) por dos motivos:
     - .hero: la lámpara está fija arriba; si el "Kio" se centra
       verticalmente, la distancia lámpara↔"i" cambia con el alto de la
       pantalla. Anclado arriba + wordmark de tamaño fijo (ver .kio-letters
       más abajo), el encaje queda idéntico en todos los celulares y se
       controla con --hero-top.
     - #que-es / #construccion: su contenido "alto", al centrarse, empuja
       el título hasta la zona donde cuelga la lámpara. */
  .hero {
    align-items: flex-start;
    padding-top: var(--hero-top);
  }

  #que-es,
  #construccion {
    align-items: flex-start;
    padding-top: 110px;
  }

  /* Tamaño FIJO del wordmark en mobile: con esto la "i" cae siempre en la
     misma posición y el bulbo encaja igual en todos los celulares. El
     min() con 80vw es solo un seguro para pantallas <313px (rarísimas).
     Si se toca, mantener un valor fijo (no fluido) para no romper el encaje. */
  .kio-letters {
    width: min(250px, 80vw);
  }

  /* Colchón de aire arriba para que el título/tagline nunca arranquen
     pegados al borde superior, donde cuelga la lamparita */
  .hero-text {
    padding-top: var(--kio-space-xl);
  }

  .que-es-title {
    margin-top: var(--kio-space-md);
  }

  .hero-text .kio-tagline {
    max-width: 100%;
    font-size: clamp(18px, 5vw, 24px);
  }

  /* ¿Kio? — título y párrafo comprimidos para que entren en un bloque */
  .section-kio-title {
    font-size: 34px;
    margin-bottom: var(--kio-space-xs);
  }

  .que-es-text {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Feature grid: 1 columna (4 filas) en pantalla chica — el bloque
     puede scrollear internamente si no entra completo (ver 12.2),
     así que no hace falta comprimir tanto como antes */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: var(--kio-space-md);
    margin-top: var(--kio-space-lg);
  }

  .feature-card {
    padding: var(--kio-space-md);
  }

  .feature-card h3 {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .feature-card p {
    font-size: 13px;
    line-height: 1.4;
  }

  /* Split layout: el texto ocupa toda la fila arriba, las dos imágenes
     de teléfono quedan juntas, una al lado de la otra, abajo */
  .split-layout {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--kio-space-md);
    text-align: center;
  }

  .split-text {
    order: 1;
    flex: 1 1 100%;
  }

  .split-phones {
    order: 2;
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
  }

  .split-quote {
    max-width: 100%;
    font-size: clamp(18px, 4.5vw, 24px);
  }

  .split-phone {
    height: 320px;
  }

  .phone-maker {
    transform: translateX(-30%) rotate(-4deg);
    opacity: 0;
  }

  .phone-lector {
    transform: translateX(30%) rotate(4deg);
    opacity: 0;
  }

  .phone-maker.visible,
  .phone-lector.visible {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }

  .bullets {
    max-width: 100%;
  }

  /* Timeline: pasa de horizontal a vertical, con línea a la izquierda,
     y el bloque completo centrado horizontalmente en la sección */
  .timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kio-space-lg);
    padding-left: 28px;
    width: fit-content;
    margin: var(--kio-space-2xl) auto;
  }

  .timeline::before {
    top: 6px;
    left: 5px;
    width: 1px;
    height: 55%;
  }

  .timeline::after {
    top: calc(55% + 6px);
    right: auto;
    left: 5px;
    width: 1px;
    height: calc(45% - 6px);
    background: repeating-linear-gradient(
      to bottom,
      var(--kio-gray-neutral) 0px,
      var(--kio-gray-neutral) 4px,
      transparent 4px,
      transparent 8px
    );
  }

  .timeline-item {
    flex-direction: row;
    align-items: center;
    gap: var(--kio-space-md);
  }

  .timeline-label {
    text-align: left;
  }

  .kio-btn {
    padding: 14px 28px;
    font-size: 15px;
  }

  .final-socials {
    flex-direction: column;
    gap: var(--kio-space-md);
  }

  .beta-form {
    flex-direction: column;
    align-items: stretch;
  }

  .beta-submit {
    width: 100%;
  }
}

/* ---- 12.4) Phones muy chicos (≤380px) ---- */
@media (max-width: 380px) {
  /* Nota: el ancho del wordmark NO se toca acá a propósito — hereda el
     tamaño fijo del bloque ≤768px para que la "i" y la lámpara encajen
     igual que en el resto de los celulares (incluido el iPhone SE). */
  .hero-text .kio-tagline { font-size: 16px; }
  .kio-btn { padding: 12px 20px; font-size: 14px; }
  section, .hero, .cta-final { padding: var(--kio-space-lg) var(--kio-space-sm); }
  /* OJO: el shorthand de arriba resetea el padding-top. Re-afirmamos el
     anclado superior para que la lámpara no se pegue a la "i" ni al título
     en pantallas muy angostas (fue el bug del iPhone SE). El encaje sigue
     controlado por --hero-top, igual que en el resto de los celulares. */
  .hero { padding-top: var(--hero-top); }
  #que-es,
  #construccion { padding-top: 110px; }
  .beta-input { min-width: 0; font-size: 16px; }
  .section-kio-title { font-size: 28px; }
  .que-es-text { font-size: 13px; }
  /* Los dos celulares van lado a lado; en pantallas muy angostas bajamos
     un poco la altura para que no se desborden horizontalmente. */
  .split-phone { height: 280px; }
}
/* No-JS fallback: show all content immediately */
html:not(.js) .reveal,
html:not(.js) .hero-content,
html:not(.js) .phone-maker,
html:not(.js) .phone-lector {
  opacity: 1;
  transform: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   13) REDUCED MOTION — must be last to override all animations
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
  .reveal,
  .hero-content,
  .split-phone,
  .lamp-img,
  .lamp-glow,
  .hero,
  .final-section {
    transition: none !important;
    animation: none !important;
  }
  .js .hero-content,
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .phone-maker,
  .phone-lector {
    transform: none;
    opacity: 1;
  }
}