/* ==========================================================================
   NucleoIA · Sistema de marca "Tinta + Chispa" v2.1
   --------------------------------------------------------------------------
   Capa visual compartida por todas las paginas publicas del sitio.
   El CSS especifico de cada pagina sigue viviendo inline en esa pagina.

   Sistema dual: la estructura del logo y los textos cambian de piel
   (tinta #2E2E33 en fondos claros, blanco humo #F5F5F2 en fondos oscuros).
   La chispa naranja #F05C12 es constante en las dos pieles.

   Requiere: Poppins (400-800 + italica) y Geist Mono 500.
   ========================================================================== */

/* ============ TOKENS DE TEMA ============ */
body[data-theme="day"],
body:not([data-theme]) {   /* fallback: sin JS la pagina queda en piel dia */
  --bg: #F7F6F3;
  --card: #FFFFFF;
  --card2: #F1EFEB;
  --ink: #26262B;
  /* --mut era #8A8A8F y reprobaba WCAG AA en las CINCO superficies claras
     (2.99:1 sobre --card2, 3.18:1 sobre --bg; el minimo es 4.5:1). No es un
     detalle: 43 parrafos de la home usan este token a 14px — los 43
     reprobaban — y el tema dia es el que viene por defecto.
     #6C6C71 es el gris MAS CLARO que pasa 4.5:1 en las cinco — se eligio asi
     a proposito, para corregir el contraste moviendo el diseno lo minimo.
     Margen real: 4.55:1 sobre --card2 (la mas exigente) y 5.22:1 sobre --card.
     En piel noche --mut NO se toca: ya daba 6.0:1 o mas en todas. */
  --mut: #6C6C71;
  --line: #E8E6E1;
  --structure: #2E2E33;
  --grid: #E4E2DD;
  --navbg: rgba(247, 246, 243, .85);

  /* Superficies tintadas. Llevan texto en --ink, asi que tienen que
     cambiar de piel con el tema: si se quedaran claras en modo noche,
     el texto blanco sobre crema seria ilegible. */
  --tint-accent: #FFF1E6;
  --tint-accent2: #F6EDFC;
}

body[data-theme="night"] {
  --bg: #0E0E10;
  --card: #161619;
  --card2: #1D1D21;
  --ink: #F5F5F2;
  --mut: #9A9A9F;
  --line: #2A2A2E;
  --structure: #F5F5F2;
  --grid: #26262B;
  --navbg: rgba(14, 14, 16, .85);

  --tint-accent: #2A1710;
  --tint-accent2: #1F1729;
}

html { scroll-behavior: smooth; }

body {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  transition: background .45s ease, color .45s ease;
}

section { scroll-margin-top: 96px; }

/* ============ UTILIDADES DE TEMA ============ */
.bg-app { background: var(--bg); }
.bg-card { background: var(--card); transition: background .45s ease; }
.bg-card2 { background: var(--card2); transition: background .45s ease; }
.bd { border-color: var(--line) !important; transition: border-color .45s ease; }
.tx { color: var(--ink); transition: color .45s ease; }
.txm { color: var(--mut); transition: color .45s ease; }

.grid-dots {
  background-image: radial-gradient(var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Misma grilla, pero para bloques que son oscuros siempre (no siguen el tema):
   el CTA de Nuclito, el footer y las tarjetas en piel noche. */
.grid-dots-night {
  background-image: radial-gradient(#2A2A2E 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ============ WORDMARK ============ */
/* "nucleoia" en minusculas, italica 800, con "ia" en naranja al 65%. */
.wordmark { font-weight: 800; letter-spacing: -0.03em; font-style: italic; }

/* ============ LOGO ANIMADO (El Vortice) ============ */
.pulse-core {
  animation: pulseCore 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes pulseCore {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: .9; }
}

.rotate-orbit {
  animation: rotateOrbit 12s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes rotateOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes skinIn {
  from { opacity: .15; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.skin-pop svg { animation: skinIn .45s cubic-bezier(.34, 1.56, .64, 1); }

/* ============ BOTONES ============ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #F05C12;
  color: #fff;
  font-weight: 600;
  padding: .85rem 1.6rem;
  border-radius: 50px;
  transition: all .25s ease;
  box-shadow: 0 12px 26px -10px rgba(240, 92, 18, .5);
}
.btn-primary:hover { background: #C5470A; transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  padding: .85rem 1.6rem;
  border-radius: 50px;
  border: 2px solid var(--line);
  color: var(--ink);
  transition: all .25s ease;
  background: transparent;
}
.btn-ghost:hover { border-color: #F05C12; color: #F05C12; transform: translateY(-2px); }

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  padding: .8rem 1.5rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  background: rgba(255, 255, 255, .06);
  transition: all .25s ease;
}
.btn-dark:hover { background: rgba(255, 255, 255, .14); }

/* ============ ETIQUETAS Y TITULOS ============ */
.sec-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #F05C12;
}

.h-display { font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }

/* ============ NAV ============ */
nav {
  background: var(--navbg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: all .45s ease;
}

.nav-link {
  position: relative;
  font-weight: 500;
  font-size: .9rem;
  color: var(--mut);
  transition: color .25s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link.is-active { color: #F05C12; }

/* ============ DROPDOWNS ============ */
.dd-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 290px;
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
  z-index: 60;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 25px 50px -15px rgba(0, 0, 0, .18);
  padding: .6rem;
}
.dd.open .dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dd.open .dd-caret { transform: rotate(180deg); }
.dd-caret { transition: transform .25s ease; }

.dd-item {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .7rem .8rem;
  border-radius: 14px;
  transition: background .2s ease;
}
.dd-item:hover { background: var(--card2); }

/* ============ CARDS ============ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: all .35s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 45px -18px rgba(30, 30, 35, .18);
  border-color: #F05C12;
}

.icon-bubble {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* Nuclito usado como icono dentro de una burbuja.
   Su viewBox es 240x270 y reserva aire arriba (la antena) y abajo (la
   sombra), asi que a tamanio de icono queda diminuto si se deja tal cual:
   se lo agranda y se recorta para que la carita llene la burbuja.
   El encuadre esta calibrado para que la chispa de la antena entre entera:
   agrandarlo mas la recorta, y la chispa es lo que lo identifica. */
.icon-bubble.is-nuclito { overflow: hidden; }
.icon-bubble.is-nuclito > [data-nuclito] {
  width: 132%;
  height: 148%;
  margin-top: 7%;
  flex: none;
}

/* ============ STEPPER ============ */
.step-line {
  position: absolute;
  top: 23px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}

/* ============ FAQ ============ */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-icon { transform: rotate(45deg); color: #F05C12; }
.faq-icon { transition: transform .3s ease; }

/* ============ HERO ============ */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.floaty { animation: floaty 5s ease-in-out infinite; }
.floaty-2 { animation: floaty 6s ease-in-out 1s infinite; }
.floaty-3 { animation: floaty 7s ease-in-out .5s infinite; }

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

/* ============ REVEAL AL SCROLL ============ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* Si el JS no corre, el contenido no puede quedar invisible. */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ============ ACCESIBILIDAD ============ */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }

/* Area tactil de los enlaces del pie.
   Medido a 375px sobre produccion: los enlaces de servicios miden 20px de
   alto y los legales 16px. WCAG 2.2 SC 2.5.8 (nivel AA) exige 24x24 CSS px,
   asi que los 10 reprueban. Se llevan a 44px, que es el tamano comodo real
   para un dedo, no el minimo para aprobar.

   Solo abajo de 768px: en escritorio se apunta con el mouse y agrandarlos
   estiraria el pie sin motivo. La tipografia y el color no se tocan — el
   contraste del pie ya esta bien (19.3:1 los de servicios, 6.9:1 los
   legales sobre el fondo noche).

   El space-y-2.5 de Tailwind se recorta a 4px: el alto nuevo ya separa, y sin
   esto el pie movil crecia ~240px. Va con !important porque la utilidad de
   Tailwind (.space-y-2\.5 > :not([hidden]) ~ :not([hidden])) tiene
   especificidad 0,3,0 y no se le gana con selectores de tipo. Quedan 4px de
   aire para que dos objetivos de 44px no queden pegados. */
@media (max-width: 767px) {
  footer li > a,
  footer .border-t a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  footer ul > li + li { margin-top: 4px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}