/* =========================================================
   BITS Norte Studio — hoja de estilo principal
   Rejilla de 42px como motivo estructural. Cian solo en acentos.
   ========================================================= */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fondo más profundo que el original: el cian gana contraste */
  --fondo:            #060F1C;
  --fondo-elevado:    #0B1B30;
  --superficie:       rgba(255, 255, 255, 0.035);
  --superficie-alta:  rgba(255, 255, 255, 0.06);

  --acento:           #00D4FF;
  --acento-claro:     #7FE9FF;   /* segundo stop del degradado: CLARO, para que se lea */
  --acento-hondo:     #1E5F87;

  --texto:            #EAF2F9;
  --texto-suave:      #9DB3C8;   /* sube contraste vs. el #a0b4c8 original */
  --texto-tenue:      #6F869C;

  --borde:            rgba(255, 255, 255, 0.10);
  --borde-vivo:       rgba(0, 212, 255, 0.35);

  --peligro:          #FF7B72;
  --exito:            #5BE49B;

  --rejilla:          42px;      /* el módulo del canvas, reutilizado en el layout */
  --ancho:            1160px;
  --radio:            12px;
  --radio-chico:      8px;

  --transicion:       200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-claro); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

.salto-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--acento); color: #04121C;
  padding: 12px 20px; z-index: 200; font-weight: 500;
}
.salto-contenido:focus { left: 12px; top: 12px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Tipografía compartida ---------- */

.etiqueta {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 14px;
}

.acento {
  background: linear-gradient(100deg, var(--acento-claro), var(--acento));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.seccion__titulo {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.seccion__bajada {
  font-size: 1.05rem;
  color: var(--texto-suave);
  max-width: 62ch;
  margin: 0 0 44px;
}

/* ---------- Navegación ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--transicion), border-color var(--transicion);
  border-bottom: 1px solid transparent;
}
.nav.fijo {
  background: rgba(6, 15, 28, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--borde);
}

.nav__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.nav__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.nav__marca b { color: var(--acento); font-weight: 600; }
.nav__marca:hover { color: var(--texto); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__links > a {
  color: var(--texto-suave);
  font-size: 0.95rem;
  transition: color var(--transicion);
}
.nav__links > a:hover { color: var(--texto); }
.nav__links > a.boton { color: #04121C; }

.nav__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  cursor: pointer;
}
.nav__hamburguesa span {
  display: block;
  height: 2px; width: 18px;
  margin-inline: auto;
  background: var(--texto);
  transition: transform var(--transicion), opacity var(--transicion);
}
.nav__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--transicion), background var(--transicion), border-color var(--transicion);
}
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--acento);
  color: #04121C;
}
.boton--primario:hover { background: var(--acento-claro); color: #04121C; }
.boton--primario:disabled { opacity: 0.55; cursor: progress; }

.boton--fantasma {
  background: transparent;
  border-color: var(--borde);
  color: var(--texto);
}
.boton--fantasma:hover { border-color: var(--borde-vivo); color: var(--texto); }

.boton--ancho { width: 100%; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 130px 0 90px;
  overflow: hidden;
}

.hero__lienzo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(6, 15, 28, 0.55), rgba(6, 15, 28, 0.9) 70%),
    linear-gradient(180deg, transparent 40%, var(--fondo) 100%);
}

.hero__interior { position: relative; z-index: 2; }

.hero__titulo {
  font-size: clamp(2.25rem, 6.2vw, 4.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  max-width: 18ch;
}

.hero__bajada {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--texto-suave);
  max-width: 60ch;
  margin: 0 0 32px;
}

.hero__contraste {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 0.95rem;
  margin-bottom: 34px;
}
.contraste__menos  { color: var(--texto-tenue); text-decoration: line-through; text-decoration-color: var(--peligro); }
.contraste__flecha { color: var(--acento); }
.contraste__mas    { color: var(--texto); }

.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__nota { margin: 24px 0 0; font-size: 0.9rem; color: var(--texto-tenue); }

/* ---------- Secciones ---------- */

.seccion {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  border-top: 1px solid var(--borde);
}

.rejilla { display: grid; gap: 20px; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  transition: border-color var(--transicion), transform var(--transicion), background var(--transicion);
}
.tarjeta:hover {
  border-color: var(--borde-vivo);
  background: var(--superficie-alta);
  transform: translateY(-3px);
}

.tarjeta__titulo { font-size: 1.15rem; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
.tarjeta__texto  { color: var(--texto-suave); font-size: 0.95rem; margin: 0 0 16px; }
.tarjeta__texto--claro { color: var(--texto); }

.tarjeta__giro {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 0 14px;
}

.transicion { margin: 0; font-size: 0.88rem; }
.transicion dt {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 10px;
}
.transicion dd { margin: 2px 0 0; }
.transicion__antes   { color: var(--texto-tenue); }
.transicion__despues { color: var(--texto); }

.caso__rotulo {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.caso__rotulo--problema { color: var(--peligro); }
.caso__rotulo--solucion { color: var(--acento); }

/* ---------- Listas ---------- */

.lista-marcada { list-style: none; margin: 0 0 22px; padding: 0; }
.lista-marcada li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  color: var(--texto-suave);
  font-size: 0.95rem;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.62em;
  width: 8px; height: 8px;
  border-left: 1.5px solid var(--acento);
  border-bottom: 1.5px solid var(--acento);
  transform: rotate(-45deg) translateY(-1px);
}
.lista-marcada--compacta li { font-size: 0.9rem; margin-bottom: 6px; }

/* ---------- Servicios (pestañas) ---------- */

.servicios { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 32px; }

.servicios__pestanas { display: flex; flex-direction: column; gap: 8px; }

.pestana {
  text-align: left;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
  font: inherit;
  font-size: 0.98rem;
  cursor: pointer;
  transition: all var(--transicion);
}
.pestana:hover { color: var(--texto); border-color: var(--borde-vivo); }
.pestana.activa {
  color: var(--texto);
  background: var(--superficie-alta);
  border-color: var(--acento);
  border-left-width: 3px;
}

.servicios__paneles {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px;
}
.panel__intro { margin: 0 0 22px; color: var(--texto); font-size: 1.05rem; }

/* ---------- Proceso ---------- */

.proceso {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.proceso__paso {
  padding: 30px 26px;
  border-right: 1px solid var(--borde);
}
.proceso__paso:last-child { border-right: none; }

.proceso__numero {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--acento);
  margin-bottom: 14px;
}
.proceso__titulo { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; }
.proceso__texto  { color: var(--texto-suave); font-size: 0.92rem; margin: 0; }

/* ---------- Métricas ---------- */

.metricas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
}
.metrica { text-align: left; }
.metrica__valor {
  display: block;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--acento-claro);
  font-variant-numeric: tabular-nums;
}
.metrica__etiqueta {
  display: block;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  margin-top: 4px;
}

.enlace-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--borde-vivo);
  padding-bottom: 2px;
}
.enlace-demo::after { content: "↗"; }

/* ---------- Contacto ---------- */

.seccion--contacto { background: var(--fondo-elevado); }

.contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 48px;
  align-items: start;
}

.contacto__datos { list-style: none; margin: 32px 0 0; padding: 0; }
.contacto__datos li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
}
.contacto__rotulo {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  min-width: 90px;
}
.contacto__datos a { font-size: 1.05rem; }

/* ---------- Formulario ---------- */

.formulario {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px;
}
.formulario__titulo { font-size: 1.15rem; font-weight: 600; margin: 0 0 22px; }

.campo { margin-bottom: 18px; }
.campo--doble { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 18px; }

.campo label {
  display: block;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 7px;
}
.campo label span { color: var(--acento); }

.campo input,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color var(--transicion), background var(--transicion);
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input::placeholder { color: var(--texto-tenue); }
.campo input:focus,
.campo textarea:focus {
  border-color: var(--acento);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--peligro); }

.campo__error {
  display: block;
  min-height: 0;
  font-size: 0.82rem;
  color: var(--peligro);
  margin-top: 5px;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulario__aviso { margin: 16px 0 0; font-size: 0.92rem; min-height: 1.4em; }
.formulario__aviso.exito  { color: var(--exito); }
.formulario__aviso.error  { color: var(--peligro); }

.formulario__legal {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  text-align: center;
}

/* ---------- Pie ---------- */

.pie { border-top: 1px solid var(--borde); padding: 40px 0; }
.pie__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pie__links { display: flex; flex-wrap: wrap; gap: 22px; }
.pie__links a { color: var(--texto-suave); font-size: 0.9rem; }
.pie__links a:hover { color: var(--acento); }
.pie__legal { color: var(--texto-tenue); font-size: 0.85rem; margin: 0; width: 100%; }

/* ---------- Revelado al hacer scroll ---------- */

.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.revelar.visible { opacity: 1; transform: none; }

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .servicios { grid-template-columns: 1fr; }
  .servicios__pestanas { flex-direction: row; flex-wrap: wrap; }
  .pestana { flex: 1 1 auto; }
  .proceso__paso { border-right: none; border-bottom: 1px solid var(--borde); }
  .proceso__paso:last-child { border-bottom: none; }
}

@media (max-width: 780px) {
  .nav__hamburguesa { display: flex; }

  .nav__links {
    position: absolute;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 24px;
    background: rgba(6, 15, 28, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
    display: none;
  }
  .nav__links.abierto { display: flex; }
  .nav__links > a { padding: 14px 0; border-bottom: 1px solid var(--borde); font-size: 1rem; }
  .nav__links > a.boton { margin-top: 16px; border-bottom: none; justify-content: center; }

  .hero { min-height: auto; padding: 120px 0 72px; }
  .metricas { grid-template-columns: 1fr; }
  .contacto__datos li { flex-direction: column; gap: 2px; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* ---------- Impresión ---------- */

@media print {
  .nav, .hero__lienzo, .hero__velo, .formulario { display: none; }
  body { background: #fff; color: #000; }
}