/* ══════════════════════════════════════════════════════════════
   LIGHT.CSS — SOLO lo carga light-preview.html (no enlazado en el
   sitio real). Invierte el sistema de tokens: como casi todo el CSS
   consume las variables, la página completa pasa a claro con estas
   redefiniciones + parches puntuales de colores hardcodeados.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── EL ACENTO DEL LIGHT THEME: el LED del droide ─────────────────
     Muestreado del visor de la androide de traje: #D9A339 (dorado
     ámbar cálido). Sobre marfil da 2.05:1 de contraste → sirve como
     BLOQUE (botones, líneas, LEDs) pero NUNCA como texto.
     Por eso el sistema es de DOS NIVELES, igual que en la app:
       --acento       → bloques y luz (el LED tal cual)
       --acento-texto → el mismo tono bajado a 4.99:1 para TEXTO/cursivas */
  --acento: #E8B923;
  --acento-contraste: #131312;   /* tinta sobre el LED = 8.19:1 ✓ */
  --acento-texto: #8A6A08;       /* AA para texto normal sobre marfil */
  --acento-linea: #C9A227;       /* intermedio: bordes e íconos finos */
  /* el espectro se conserva solo para la firma de la IA (visor, glows) */
  --espectro: linear-gradient(90deg, #4FD4E4 0%, #F2C14B 45%, #F06AAE 100%);

  --negro:  #F4F3EF;   /* fondo principal (antes tinta) */
  --carbon: #EBE9E2;
  --humo:   #D8D6CE;
  --blanco: #131312;   /* texto principal (antes marfil) */
  --puro:   #0B0B0A;
  --gris:   #55544F;
  --gris-tenue: #7C7B75;
  /* --acento (amarillo) se conserva */
}

/* Wordmark POTENCIA: TODO en un solo color — sin acento, sin glow,
   sin encendido de la IA (decisión de Manuel para la versión clara).
   is-on lleva !important en styles.css, por eso se re-pisa aquí. */
.marca-ia,
.marca-ia.is-on,
[data-marca="blanco"] .marca-ia.is-on,
[data-marca="encendido"] .marca-ia.is-on {
  color: inherit !important;
  text-shadow: none !important;
  animation: none !important;
}

/* hero-claro (styles.css) fue escrito cuando var(--negro) ERA oscuro;
   con los tokens invertidos sus referencias literales apuntan al color
   equivocado — se re-mapean aquí (light.css carga después). */
body.hero-claro [data-marca="blanco"] .marca-ia.is-on,
[data-marca="blanco"] body.hero-claro .marca-ia.is-on {
  color: inherit !important;
  text-shadow: none !important;
  animation: none !important;
}
body.hero-claro .hero-payoff { color: var(--blanco); }
body.hero-claro .hero-payoff em { color: var(--blanco); }
body.hero-claro .hero-clock .clock-label { color: var(--blanco); }
body.hero-claro .nav:not(.is-scrolled) .nav-logo { color: var(--blanco); }
body.hero-claro .nav:not(.is-scrolled) .nav-cta { color: var(--blanco); }
body.hero-claro .hero-ctas .btn-solid { background: var(--blanco); color: var(--negro); }
body.hero-claro .hero-ctas .btn-ghost { color: var(--blanco); }

/* Mockups de dispositivos: en dark viven de sombras negras densas que sobre
   marfil se ven sucias. En claro: bisel blanco de device real, hairline fina
   y sombra difusa tenue — lenguaje Apple. */
.browser-frame {
  box-shadow: 0 0 0 1px rgba(19, 19, 18, 0.1), 0 30px 60px -28px rgba(19, 19, 18, 0.35);
  border-color: rgba(19, 19, 18, 0.12);
}
.phone-frame {
  border: 5px solid #FDFCFA;
  border-radius: 26px;
  background: #FDFCFA;
  box-shadow: 0 0 0 1px rgba(19, 19, 18, 0.14), 0 26px 50px -22px rgba(19, 19, 18, 0.4);
}

/* ── EL LED aplicado, con la regla de los dos niveles ────────────────
   BLOQUES (el LED puro brilla): botones, líneas, dots, barras. */
.preloader-fill { background: linear-gradient(90deg, var(--gris), var(--acento)); }
.servicio-etapa::before,
.hero-scrollhint span { background: var(--acento); }
.agenda-dot {
  background: var(--acento);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--acento) 55%, transparent);
}
/* TEXTO (el LED puro sería ilegible → tono bajado a AA) */
/* números GRANDES → gold vivo (bloque tipográfico); textos pequeños → dorado AA */
.destacado-num, .caso-num { color: var(--acento); }
.sp-current, .servicio-etapa, .footer-meta a:hover { color: var(--acento-texto); }
.nav-links a:hover,
body.hero-claro .nav:not(.is-scrolled) .nav-links a:hover { color: var(--acento-texto); }

/* ESTANDARIZACIÓN del énfasis (2026-07-26): `.m-punch em` ("responderles",
   "vuelvan") usaba color + glow del acento mientras que el resto del sitio
   ("cinco segundos") usa la cursiva serif. Dos lenguajes de énfasis distintos
   en la MISMA sección. Se unifica: TODO el énfasis es cursiva serif + el
   subrayado de luz; el glow de color queda solo para la marca IA. */
.m-punch em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
}

/* CURSIVAS (Instrument Serif): el caso más delicado — texto grande pero de
   trazo FINO, donde el dorado se rompe. Solución elegida: se quedan en
   TINTA y el acento entra por debajo, como subrayado de luz. Así el énfasis
   se ve y se lee. */
.hero-payoff em, .m-line em, .m-punch em, .servicio-payoff em, .casos-titulo em,
.sistema-humano em, .contacto-titulo em, .destacado-nombre em {
  color: var(--blanco);
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 92%;
  padding-bottom: 0.06em;
}

/* BOTONES: fondo LED + tinta encima (8.19:1) */
.btn-solid:hover { background: var(--acento); color: var(--acento-contraste); }
/* "VER LOS CASOS" al pasar el mouse: styles.css lo pinta con var(--negro)
   —que en light ES el marfil— y el texto desaparecía. Aquí el hover se
   resuelve como un botón sólido gold: fondo de acento + tinta encima. */
.btn-ghost:hover,
body.hero-claro .hero-ctas .btn-ghost:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-contraste);
}
.nav-cta:hover { background: var(--acento); color: var(--acento-contraste); border-color: var(--acento); }
::selection { background: var(--acento); color: var(--acento-contraste); }

/* ══════════════════════════════════════════════════════════════
   MÓVIL: el CTA quedaba bajo el pliegue en un iPhone 15 Pro Max.
   Se comprime la escena (androide −10%), se recorta el copy y se
   suben los botones para que "AGENDAR UNA LLAMADA" entre completo.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.hero-claro .hero { min-height: 100svh; padding-bottom: 1.2rem; }
  /* el kicker y el reloj en una sola fila compacta */
  body.hero-claro .hero-top { padding-top: .4rem; gap: .5rem; }
  body.hero-claro .hero-kicker { font-size: .58rem; }
  /* androide 10% más chico, centrado real (en móvil el ancho de la imagen
     supera el viewport, por eso hay que fijar left y ancho máximo) */
  /* el androide se centra EN la escena (como en desktop), no debajo */
  /* centrado absoluto dentro de la escena: los 4 inset a 0 + margin auto
     centran en ambos ejes sin depender de transform (que en desktop ya
     lleva el translateX y aquí se pisaba) */
  /* centrado explícito: con inset:0 + margin auto, si la imagen es más
     ancha que el contenedor el navegador la ancla a la izquierda. Se fija
     left:50% + translateX y se centra vertical con top:50%. */
  body.hero-claro .droide {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    height: auto;
    width: auto;
    /* 2026-08-16: era 76vw/48vh y tapaba el carrusel; más chico y un poco
       más abajo para que las tarjetas asomen a los lados del traje */
    max-width: 58vw;
    max-height: 40vh;
    transform: translate(-50%, -46%) !important;
    object-fit: contain;
  }
  body.hero-claro .droide-slot {
    transform: scale(1.13) translateY(0.35cm);
    transform-origin: 50% 28%;
  }
  body.hero-claro .droide.es-tinta {
    left: 0;
    right: 0;
    top: -4%;
    bottom: 10%;
    margin: auto;
    max-width: 68vw;
    max-height: 46vh;
    transform: none !important;
    object-position: center 8%;
  }
  body.hero-claro .hero-escena { min-height: clamp(300px, 42vh, 420px); }
  /* tarjetas más chicas y el anillo más abierto: se ven varias a la vez */
  body.hero-claro .carrusel { --th: clamp(70px, 11vh, 96px); }
  /* el anillo baja para que las tarjetas asomen bajo el casco */
  body.hero-claro .carrusel-track { transform: translateY(26px); }
  body.hero-claro .tarjeta { opacity: .92; }
  /* payoff más contenido: 2 líneas, no 3 */
  body.hero-claro .hero-payoff {
    font-size: clamp(1.35rem, 5.2vw, 1.8rem);
    line-height: 1.16;
    max-width: 100%;
  }
  /* la bajada larga se oculta: en móvil el titular + botón bastan */
  body.hero-claro .hero-sub { display: none; }
  body.hero-claro .hero-bottom { gap: 1rem; padding-bottom: .6rem; padding-top: .8rem; }
  /* velo bajo el texto: el androide llega hasta el payoff */
  /* 2026-08-16: se ELIMINA el velo de ancho completo bajo el payoff (con color
     plano desentonaba; con backdrop-filter Safari iOS dejaba el borde del blur).
     La legibilidad la da la propia máscara del androide, que se desvanece
     antes de llegar al texto (ver .droide más abajo). */
  body.hero-claro .hero-bottom::before { content: none; }
  body.hero-claro .droide {
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 68%,
      rgba(0,0,0,.88) 78%,
      rgba(0,0,0,.55) 88%,
      rgba(0,0,0,.18) 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 68%,
      rgba(0,0,0,.88) 78%,
      rgba(0,0,0,.55) 88%,
      rgba(0,0,0,.18) 95%,
      transparent 100%
    );
  }
  .contacto-andes {
    width: 96%;
    height: clamp(14.5rem, 52vw, 18rem);
    margin-top: 1.6rem;
  }
  .contacto-andes img {
    width: 100%;
    height: 100%;
    max-height: none;
  }
  body.hero-claro .hero-bottom { position: relative; }
  body.hero-claro .hero-ctas { gap: .5rem; }
  body.hero-claro .hero-ctas .btn { padding: .85rem 1.3rem; font-size: .64rem; }
  /* el hint de scroll estorba cuando el espacio es justo */
  body.hero-claro .hero-scrollhint { display: none; }
}

/* El manifiesto se centra en el viewport (el contenedor ya tiene
   margin auto, pero el texto quedaba pegado a la izquierda). */
.manifiesto-text { align-items: center; text-align: center; }
.m-line { margin-inline: auto; }
@media (max-width: 900px) {
  .manifiesto { padding-inline: 1.4rem; }
  .m-line { font-size: clamp(1.3rem, 5.6vw, 2rem); }
}

/* Parches de colores que no eran variables */
.from-cliente { background: #E3E1D9; }              /* burbuja chat demo */
/* Salón de atención: el mensaje del negocio va en el verde de WhatsApp
   (#D9FDD3, el mismo de la app), con texto tinta — el negro no decía
   "WhatsApp" y competía con el resto de la página clara. */
/* burbuja del agente: en dark era marfil con texto tinta; invertida quedaba
   negro sobre negro. En claro va como burbuja "tinta": fondo oscuro, texto
   marfil (mismo lenguaje que la app en light). */
.from-agente { background: #D9FDD3; color: #16110F; border: 1px solid #C5EDBE; }
.from-agente .chat-meta { color: #16110F; }

/* "AGENDA ABIERTA": en claro el gris quedaba lavado junto al reloj mono.
   Se sube a tinta media y el dot LED gana peso. */
body.hero-claro .hero-agenda { color: #3A3935; font-weight: 500; }
body.hero-claro .agenda-dot {
  width: 7px; height: 7px;
  background: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

/* Mockup del teléfono: bisel a la mitad (5px → 2.5px) */
.phone-frame {
  border-width: 2.5px;
  border-radius: 20px;
}
.hero-status .hero-agenda,
.chip { background: rgba(19, 19, 18, 0.05); }        /* chips translúcidos */

/* Contacto en light: handshake HIGH-KEY propio (handshake-cta-light.webp,
   el src lo cambia light-preview.html) — texto tinta sobre foto clara, con
   un velo marfil radial para asegurar la lectura. */
.contacto-andes img { opacity: 0.95; filter: none; }
.contacto-mail a, .contacto-mail { color: #403F3B; }
.contacto-andes::after {
  background: radial-gradient(ellipse 62% 54% at 50% 52%, rgba(244, 243, 239, 0.55), transparent 72%);
}

/* El hero claro ya lo maneja body.hero-claro (styles.css) + los ajustes
   inline del preview; aquí solo se garantiza que el fundido final del
   hero aterrice en el nuevo fondo claro, no en negro. */
body.hero-claro .hero {
  background: linear-gradient(
    180deg,
    #EDEBE4 0%,
    #E8E6DF 45%,
    #E2E0D8 76%,
    #DCDAD2 92%,
    var(--negro) 100%
  );
}