/* ==========================================================
   Tu Negocio en Automático · Nibiru AIgency
   Sistema "Nibiru visible" · v4

   Ancla: el planeta está de verdad ahí, detrás de todo, y el
   contenido pasa por delante de él al hacer scroll.
   Todo lo demás se somete a eso: el fondo nunca es opaco, las
   superficies son cristal con luz de canto, y la única fuente
   de luz cálida de la página es la misma que ilumina el planeta.
   ========================================================== */

/* ----------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------- */

:root {
  /* Vacío. Azul muy oscuro, nunca negro puro: el negro puro
     aplana y delata degradado de plantilla. */
  --void:    #060711;
  --void-2:  #0A0C18;

  --bone:    #EDEDF3;
  --dim:     #969CB2;
  --faint:   #5C6178;

  /* Luz cálida: la misma estrella que ilumina Nibiru. */
  --amber:     #FF7A2E;
  --amber-hot: #FFB061;
  --amber-dim: rgba(255, 122, 46, 0.16);

  /* Ion: azul de instrumentación. Se usa con cuentagotas —
     coordenadas, identificadores, nada más. Menos del 1%. */
  --ion:     #7FE6FF;

  --line:    rgba(237, 237, 243, 0.10);
  --line-2:  rgba(237, 237, 243, 0.19);
  --glass:   rgba(237, 237, 243, 0.035);
  --glass-2: rgba(237, 237, 243, 0.055);

  /* Space Grotesk nació de Space Mono: emparejan de fábrica.
     Contraste display/body ≈ 5.3x. */
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, Menlo, monospace;

  --t-display: clamp(2.5rem, 5.4vw, 4.6rem);
  --t-h2:      clamp(1.75rem, 3.2vw, 2.6rem);
  --t-body:    0.9375rem;
  --t-mono:    0.6875rem;
  --t-mono-lg: 0.75rem;

  --shell: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --r-pill: 999px;
  --r-soft: 3px;
}

/* ----------------------------------------------------------
   2. Base
   ---------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--void); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--bone);
  font-family: var(--display);
  font-size: var(--t-body);
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  background: transparent;
  /* Sin overflow-x: hidden a proposito: escondia el desbordamiento cortando el
     contenido en vez de arreglarlo. Si aparece barra horizontal, es un fallo. */
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--amber); color: #12060A; }
:focus-visible { outline: 2px solid var(--amber-hot); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; z-index: 300;
  background: var(--amber); color: #12060A; padding: 0.8rem 1.1rem;
  font-family: var(--mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ----------------------------------------------------------
   3. El planeta
   ---------------------------------------------------------- */

#nibiru {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  /* Respaldo mientras carga y si no hay WebGL: no se ve un hueco negro. */
  background:
    radial-gradient(120% 85% at 78% 12%, rgba(255,122,46,0.16) 0%, rgba(255,122,46,0) 55%),
    radial-gradient(90% 70% at 20% 90%, rgba(60,90,140,0.12) 0%, rgba(60,90,140,0) 60%),
    linear-gradient(180deg, #060711 0%, #0A0C18 100%);
}
.sin-webgl #nibiru { /* el respaldo de arriba se queda tal cual */ }

/* Todo el contenido vive por encima del planeta. */
.capa { position: relative; z-index: 1; }

/* Velo del contenido: semitransparente a propósito. Garantiza contraste
   sin tapar el espacio — las estrellas se siguen viendo a través. */
main {
  background: linear-gradient(
    to bottom,
    rgba(6,7,17,0) 0,
    rgba(6,7,17,0.44) 14vh,
    rgba(6,7,17,0.60) 45%,
    rgba(6,7,17,0.52) 82%,
    rgba(6,7,17,0.18) 100%     /* se abre al final: el planeta vuelve */
  );
}

/* ----------------------------------------------------------
   4. Tipografía
   ---------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 16ch;
  /* El titular se lee sobre el planeta: una sombra ancha y muy suave
     lo despega del limbo iluminado sin que se note que hay sombra. */
  text-shadow: 0 2px 40px rgba(6, 7, 17, 0.85);
}

h2 {
  font-size: var(--t-h2); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.028em;
  text-wrap: balance;
}
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }

.mono {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 400;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--dim);
}
.mono-ion { color: var(--ion); }

.prose { max-width: 60ch; color: var(--dim); text-align: left; }

.num { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

[data-verificar] { position: relative; }
body.verificar [data-verificar]::after {
  content: "?"; position: absolute; top: -0.4em; margin-left: 0.12em;
  font-family: var(--mono); font-size: 0.5em; color: #FF5C5C;
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* ----------------------------------------------------------
   5. Cristal
   Superficie de estación: fondo bajo + blur + canto superior
   encendido, como luz rasante sobre un borde metálico.
   ---------------------------------------------------------- */

.cristal {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
}
.cristal::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,176,97,0.55) 22%, rgba(237,237,243,0.35) 55%, transparent);
  pointer-events: none;
}
@media (prefers-reduced-transparency: reduce) {
  .cristal { background: #10121E; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ----------------------------------------------------------
   6. Barra de estado + navegación
   ---------------------------------------------------------- */

.baliza {
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--dim);
}
.baliza-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 2.4rem; white-space: nowrap; overflow: hidden;
}
.baliza a { color: var(--amber-hot); }
.baliza .oculta-sm { display: none; }
@media (min-width: 760px) { .baliza .oculta-sm { display: inline; } }

.pulso {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); margin-right: 0.6rem; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(255,122,46,0.16);
}

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6, 7, 17, 0.55);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: #080A14; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.5rem; }

.marca { display: flex; align-items: center; gap: 0.8rem; }
.marca-icono { width: 28px; height: 28px; flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1; }
.marca-n { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.01em; text-transform: uppercase; }
.marca-s {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--faint); margin-top: 0.32rem;
}

.nav-links { display: none; gap: 2.1rem; align-items: center; }
@media (min-width: 1000px) { .nav-links { display: flex; } }
.nav-links a, .nav-links button {
  font-family: var(--mono); font-size: var(--t-mono-lg);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  transition: color 140ms ease;
}
.nav-links a:hover, .nav-links button:hover { color: var(--bone); }
.nav-links a[aria-current="page"] { color: var(--bone); }

.nav-drop { position: relative; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav-drop-toggle svg { width: 11px; height: 11px; transition: transform 160ms var(--ease-out); }
.nav-drop[data-open="true"] .nav-drop-toggle svg { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 1rem); left: -1.1rem;
  min-width: 18rem; padding: 0.45rem 0;
  background: rgba(10, 12, 24, 0.90);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--line-2); border-radius: var(--r-soft);
  transform-origin: top left;                   /* nace del botón, no del centro */
  opacity: 0; transform: scale(0.97) translateY(-5px);
  visibility: hidden; pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms;
}
.nav-drop[data-open="true"] .nav-drop-menu {
  opacity: 1; transform: scale(1) translateY(0); visibility: visible; pointer-events: auto;
}
.nav-drop-menu a {
  display: flex; gap: 1rem; padding: 0.68rem 1.15rem;
  font-family: var(--mono); font-size: var(--t-mono-lg);
  letter-spacing: 0.06em; text-transform: none; color: var(--dim);
  transition: color 140ms ease, background-color 140ms ease;
}
.nav-drop-menu a span { color: var(--faint); font-variant-numeric: tabular-nums; }
.nav-drop-menu a:hover { color: var(--bone); background: var(--glass-2); }

/* 44x44 minimo: las barras siguen a 23px y alineadas a la derecha, asi que la
   zona de toque crece hacia dentro sin mover el icono. */
.hamburguesa { display: grid; gap: 5px; padding: 0; width: 44px; height: 44px; flex: none; align-content: center; justify-items: end; transition: transform 140ms var(--ease-out); }
@media (min-width: 1000px) { .hamburguesa { display: none; } }
.hamburguesa span { display: block; width: 23px; height: 1px; background: var(--bone); }
.hamburguesa:active { transform: scale(0.94); }

.cajon {
  position: fixed; inset: 4.5rem 0 auto 0; z-index: 99;
  background: rgba(6, 7, 17, 0.94);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line-2);
  padding: 1.1rem var(--gutter) 2rem;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
}
.cajon[data-open="true"] { opacity: 1; transform: translateY(0); visibility: visible; }
.cajon a {
  display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-mono-lg);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}

/* ----------------------------------------------------------
   7. Botones
   ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--mono); font-size: var(--t-mono-lg); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--r-pill);
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, box-shadow 200ms var(--ease-out),
              transform 140ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-luz {
  background: var(--amber); color: #14070A;
  box-shadow: 0 0 0 0 rgba(255,122,46,0.45), 0 6px 26px -8px rgba(255,122,46,0.65);
}
.btn-luz:hover {
  background: var(--amber-hot);
  box-shadow: 0 0 0 6px rgba(255,122,46,0.13), 0 8px 34px -8px rgba(255,122,46,0.8);
}

.btn-cristal {
  border-color: var(--line-2); color: var(--bone);
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-cristal:hover { border-color: rgba(237,237,243,0.34); background: var(--glass-2); }

.btn-lg { padding: 1.1rem 2rem; }

/* ----------------------------------------------------------
   8. Hero — el planeta manda, el texto se aparta
   ---------------------------------------------------------- */

.hero { position: relative; padding-block: clamp(4rem, 11vh, 8rem) clamp(5rem, 14vh, 10rem); }
.hero-txt { max-width: 46rem; }
.hero .mono { margin-bottom: 2rem; }
.hero h1 { margin-bottom: 1.9rem; }
.hero .prose { font-size: 1.0625rem; max-width: 42ch; margin-bottom: 2.5rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Cinta de métricas: cuatro cápsulas de cristal, no una barra sólida */
.cinta {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: clamp(3.5rem, 9vh, 6rem);
}
.capsula {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  padding: 0.65rem 1.15rem; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.capsula b {
  font-family: var(--mono); font-weight: 700; font-size: 0.9375rem;
  color: var(--amber-hot); font-variant-numeric: tabular-nums;
}
.capsula span {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}

/* ----------------------------------------------------------
   9. Secciones — órbitas
   ---------------------------------------------------------- */

.orbita { position: relative; padding-block: clamp(4rem, 9vw, 7.5rem); }
.orbita + .orbita { border-top: 1px solid var(--line); }
.orbita-abierta { padding-block: clamp(6rem, 14vw, 11rem); }

/* Nodo orbital: círculo hueco sobre la línea divisoria */
.orbita::before {
  content: ""; position: absolute; top: -5px; left: var(--gutter);
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--void);
}
.orbita:first-child::before { display: none; }

.cab { margin-bottom: 2.75rem; }
.cab h2 { margin-top: 1rem; }
.cab .prose { margin-top: 1.15rem; }

.tesis {
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.36; letter-spacing: -0.024em; font-weight: 500;
  max-width: 22ch; color: var(--bone);
}
.tesis em { font-style: normal; color: var(--amber-hot); }
.tesis-pie { margin-top: 1.75rem; font-family: var(--mono); font-size: var(--t-mono-lg); color: var(--dim); letter-spacing: 0.04em; }

/* ----------------------------------------------------------
   10. Sistemas — módulos de cristal, tamaños desiguales
   ---------------------------------------------------------- */

.modulos { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-soft); overflow: hidden; }
@media (min-width: 900px) { .modulos { grid-template-columns: repeat(6, 1fr); } }

.modulo {
  position: relative; padding: 1.9rem 1.6rem 1.7rem;
  background: rgba(10, 12, 24, 0.55);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: background-color 220ms ease;
}
@media (prefers-reduced-transparency: reduce) { .modulo { background: #0D0F1C; backdrop-filter: none; } }
/* Desiguales a propósito: el primero ocupa media fila. */
@media (min-width: 900px) {
  .modulo:nth-child(1) { grid-column: span 3; padding: 2.5rem 2.1rem 2.2rem; }
  .modulo:nth-child(2) { grid-column: span 3; }
  .modulo:nth-child(3) { grid-column: span 2; }
  .modulo:nth-child(4) { grid-column: span 2; }
  .modulo:nth-child(5) { grid-column: span 2; }
}
@media (hover: hover) and (pointer: fine) {
  .modulo:hover { background: rgba(18, 21, 38, 0.62); }
}
.modulo-n {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.20em;
  color: var(--faint); display: block; margin-bottom: 1.1rem;
}
.modulo h3 { margin-bottom: 0.7rem; }
.modulo:nth-child(1) h3 { font-size: 1.375rem; letter-spacing: -0.025em; }
.modulo .prose { font-size: 0.875rem; max-width: 40ch; }
.modulo-go {
  display: inline-block; margin-top: 1.25rem;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  transition: color 140ms ease;
}
.modulo:hover .modulo-go { color: var(--amber-hot); }

/* ----------------------------------------------------------
   11. Trayectoria — las 4 fases
   ---------------------------------------------------------- */

.tray { position: relative; }
.tray::before {
  content: ""; position: absolute; left: 5px; top: 0.75rem; bottom: 0.75rem; width: 1px;
  background: linear-gradient(to bottom, var(--amber), rgba(255,122,46,0.15));
}
@media (min-width: 900px) {
  .tray::before { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(to right, var(--amber), rgba(255,122,46,0.12)); }
  .tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.fase { position: relative; padding-left: 2rem; padding-bottom: 2.25rem; }
@media (min-width: 900px) { .fase { padding-left: 0; padding-top: 2.25rem; padding-bottom: 0; } }
.fase::before {
  content: ""; position: absolute; left: 0; top: 0.55rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--void); border: 1px solid var(--amber);
}
@media (min-width: 900px) { .fase::before { top: 0; left: 0; } }
.fase-t {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amber-hot); display: block; margin-bottom: 0.75rem;
}
.fase h3 { margin-bottom: 0.55rem; }
.fase .prose { font-size: 0.875rem; }

/* ----------------------------------------------------------
   12. Registro — cuerpos catalogados
   ---------------------------------------------------------- */

.reg { border-top: 1px solid var(--line); }
.reg-cab { display: none; }
@media (min-width: 880px) {
  .reg-cab {
    display: grid; grid-template-columns: 4rem minmax(0,1fr) 9rem 9rem 8.5rem 2rem; gap: 1.5rem;
    padding: 0.85rem 0; border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: var(--t-mono);
    letter-spacing: 0.20em; text-transform: uppercase; color: var(--faint);
  }
}
.reg-fila {
  display: grid; gap: 0.65rem 1.5rem; grid-template-columns: 4rem 1fr;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
  position: relative; transition: background-color 180ms ease;
}
@media (min-width: 880px) {
  .reg-fila { grid-template-columns: 4rem minmax(0,1fr) 9rem 9rem 8.5rem 2rem; align-items: center; }
}
@media (hover: hover) and (pointer: fine) {
  .reg-fila:hover { background: rgba(237,237,243,0.035); }
}
.reg-img {
  width: 4rem; height: 2.6rem; object-fit: cover; border-radius: 2px;
  filter: grayscale(1) contrast(1.1) brightness(0.62);
  transition: filter 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .reg-fila:hover .reg-img { filter: grayscale(0) contrast(1.02) brightness(0.95); }
}
.reg-n { font-weight: 600; font-size: 1rem; letter-spacing: -0.015em; }
.reg-tag { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.reg-v {
  font-family: var(--mono); font-weight: 700; font-size: 1.1875rem;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--amber-hot);
}
.reg-k { display: block; margin-top: 0.15rem; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.reg-fl { color: var(--faint); justify-self: end; transition: color 140ms ease, transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .reg-fila:hover .reg-fl { color: var(--amber-hot); transform: translateX(4px); }
}

/* ----------------------------------------------------------
   13. Transmisiones
   ---------------------------------------------------------- */

.tx { display: grid; gap: 1.25rem; }
@media (min-width: 920px) { .tx { grid-template-columns: repeat(3, 1fr); } }
.tx-item { padding: 1.9rem 1.7rem; }
.tx-id {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.20em;
  text-transform: uppercase; color: var(--ion); margin-bottom: 1.15rem;
}
.tx-item blockquote { font-size: 1rem; line-height: 1.6; color: var(--bone); margin-bottom: 1.4rem; }
.tx-quien { font-family: var(--mono); font-size: var(--t-mono-lg); letter-spacing: 0.04em; }
.tx-quien b { display: block; font-weight: 700; }
.tx-quien span { color: var(--faint); }

/* ----------------------------------------------------------
   14. Preguntas
   ---------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-weight: 500; font-size: 1rem; letter-spacing: -0.012em;
  transition: color 140ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--amber-hot); }
.faq summary i { flex: none; width: 12px; height: 12px; position: relative; transition: transform 180ms var(--ease-out); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; background: currentColor; }
.faq summary i::before { inset: 5.5px 0 5.5px 0; height: 1px; }
.faq summary i::after  { inset: 0 5.5px 0 5.5px; width: 1px; }
.faq details[open] summary i { transform: rotate(135deg); }
.faq .prose { padding-bottom: 1.6rem; max-width: 68ch; }

/* ----------------------------------------------------------
   15. Cierre y pie
   ---------------------------------------------------------- */

.cierre { text-align: left; }
.cierre h2 { max-width: 16ch; }
.cierre .prose { margin: 1.35rem 0 2.4rem; }
.cierre-meta { display: grid; gap: 1.5rem; margin-top: 4rem; padding-top: 1.9rem; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .cierre-meta { grid-template-columns: repeat(3, 1fr); } }
.cierre-meta b {
  display: block; font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--faint);
  font-weight: 400; margin-bottom: 0.5rem;
}

.pie { position: relative; z-index: 1; background: rgba(4, 5, 12, 0.62); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); border-top: 1px solid var(--line); padding-block: 3.75rem 2.5rem; }
@media (prefers-reduced-transparency: reduce) { .pie { background: #04050C; backdrop-filter: none; } }
.pie-grid { display: grid; gap: 2.5rem; }
@media (min-width: 880px) { .pie-grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; } }
.pie h4 {
  margin: 0 0 1.1rem; font-family: var(--mono); font-size: var(--t-mono); font-weight: 400;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--faint);
}
.pie li { margin-bottom: 0.6rem; }
.pie a { color: var(--dim); transition: color 140ms ease; }
.pie a:hover { color: var(--bone); }
.pie-bajo {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: 3.25rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.12em; color: var(--faint);
}

.muelle {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 1px;
  background: var(--line-2);
  border-top: 1px solid var(--line-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 1000px) { .muelle { display: none; } }
.muelle > * {
  background: rgba(6, 7, 17, 0.92); padding: 1rem 0.75rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 140ms ease, transform 140ms var(--ease-out);
}
.muelle > *:active { transform: scale(0.97); }
.muelle .es-luz { background: var(--amber); color: #14070A; }
@media (max-width: 999px) { .pie { padding-bottom: 6.5rem; } }

/* ----------------------------------------------------------
   16. Entrada al scroll
   El estado inicial solo se aplica cuando el JS confirma que
   va a observar el grupo: si el script falla, se ve todo.
   ---------------------------------------------------------- */

.ap.armado > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.ap.armado.visible > * { opacity: 1; transform: translateY(0); }
.ap.armado.visible > *:nth-child(2) { transition-delay: 60ms; }
.ap.armado.visible > *:nth-child(3) { transition-delay: 120ms; }
.ap.armado.visible > *:nth-child(4) { transition-delay: 180ms; }
.ap.armado.visible > *:nth-child(5) { transition-delay: 240ms; }
.ap.armado.visible > *:nth-child(n+6) { transition-delay: 300ms; }

/* ----------------------------------------------------------
   17. Sistemas · ficha larga (/servicios/)
   Filas y no tarjetas: son cinco y hay que poder compararlas
   bajando en línea recta. La promesa a la izquierda, lo que
   entra en el precio a la derecha.
   ---------------------------------------------------------- */

.sistemas { border-top: 1px solid var(--line); }

.sistema {
  display: grid;
  gap: 1.6rem;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--line);
  /* La barra de navegación es fija: sin esto el ancla deja el
     título escondido debajo de ella. */
  scroll-margin-top: 6rem;
}
@media (min-width: 900px) {
  .sistema { grid-template-columns: 1.08fr 1fr; gap: 3.5rem; align-items: start; }
}

.sistema-n {
  display: block;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--amber-hot);
  margin-bottom: 0.95rem;
}
.sistema h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  margin-bottom: 0.95rem;
}
.sistema .prose { margin-bottom: 1.7rem; }
.sistema-pie { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.sistema-dato {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}

.entrega { padding: 1.7rem 1.6rem; }
.entrega h3 {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 1.15rem;
}

.chk li {
  position: relative;
  padding-left: 1.55rem;
  margin-bottom: 0.85rem;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.5;
}
.chk li:last-child { margin-bottom: 0; }
.chk li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--amber); font-weight: 700;
}

/* ----------------------------------------------------------
   18. Contacto · canales y formulario
   El formulario es el único sitio de la web donde el visitante
   escribe. Va sobre cristal, con el foco en ámbar, y nada más
   compite con él en la pantalla.
   ---------------------------------------------------------- */

.contacto-grid { display: grid; gap: 2.75rem; }
@media (min-width: 940px) {
  .contacto-grid { grid-template-columns: 0.82fr 1fr; gap: 4rem; align-items: start; }
}

.canal {
  display: flex; gap: 0.95rem; align-items: flex-start;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
}
.canal:first-of-type { border-top: 1px solid var(--line); }
.canal svg { width: 17px; height: 17px; flex: none; margin-top: 0.28rem; color: var(--amber); }
.canal b {
  display: block;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 0.25rem;
}
.canal a:hover { color: var(--amber-hot); }

.formu-caja { padding: clamp(1.5rem, 3.2vw, 2.35rem); }
.formu { display: grid; gap: 1.2rem; }
@media (min-width: 620px) {
  .formu-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}

.campo { display: grid; gap: 0.5rem; }
.campo > label {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit; font-size: 0.9375rem;
  color: var(--bone);
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: var(--r-soft);
  transition: border-color 140ms ease, background 140ms ease;
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--faint); }
.campo input:hover, .campo select:hover, .campo textarea:hover { background: var(--glass-2); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--glass-2);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--amber-hot); outline-offset: 2px;
}
/* El desplegable nativo hereda el tema del sistema: sin esto, en
   Windows las opciones salen en blanco sobre blanco. */
.campo select option { background: var(--void-2); color: var(--bone); }
/* Y el autorrelleno de Chrome pinta el campo de amarillo si no se
   le tapa con una sombra interior del tamaño del campo. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bone);
  -webkit-box-shadow: 0 0 0 1000px #0E1120 inset;
  caret-color: var(--bone);
}
.campo .malo, .campo input.malo, .campo select.malo, .campo textarea.malo {
  border-color: #FF6B6B;
}

.estado {
  display: none;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-soft);
  font-size: 0.875rem;
}
.estado.visible { display: block; }
.estado.bien { border-color: rgba(255,122,46,0.45); background: var(--amber-dim); color: var(--bone); }
.estado.mal  { border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.10); color: #FFD3D3; }

.formu button[type="submit"] { width: 100%; justify-content: center; }
.formu.enviando button[type="submit"] { opacity: 0.6; pointer-events: none; }

.nota {
  font-family: var(--mono); font-size: var(--t-mono);
  line-height: 1.7; letter-spacing: 0.04em; color: var(--faint);
}
.nota a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.nota a:hover { color: var(--bone); }

/* Marca de confirmacion de /gracias/. El visto va en ambar, no en ion:
   el azul de instrumentacion esta reservado a identificadores. */
.visto { width: 72px; height: 72px; margin-bottom: 2rem; }

/* ----------------------------------------------------------
   20. Bitácora de caso (/casos/*.html)
   Un caso es un registro de vuelo: pasos numerados, uno por
   fila, con el título a la izquierda y lo que pasó a la
   derecha. Sirve igual para los casos narrados en cinco etapas
   que para los de tres bloques.
   ---------------------------------------------------------- */

.bitacora { border-top: 1px solid var(--line); }

.paso {
  display: grid;
  gap: 0.9rem;
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .paso { grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem; align-items: start; }
}
.paso-n {
  display: block;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--amber-hot);
  margin-bottom: 0.5rem;
}
.paso h3 { font-size: 1.1875rem; letter-spacing: -0.02em; }
.paso .prose { max-width: 68ch; }
.paso .prose + .chk { margin-top: 1.1rem; }

/* Cita del cliente. Una por caso: si hubiera dos dejaría de ser
   una cita y sería una sección de testimonios. */
.cita { padding: clamp(1.6rem, 3vw, 2.2rem); }
.cita blockquote {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.5; color: var(--bone);
  letter-spacing: -0.015em;
}
.cita cite {
  display: block; margin-top: 1.2rem;
  font-family: var(--mono); font-size: var(--t-mono-lg); font-style: normal;
  letter-spacing: 0.04em; color: var(--dim);
}

/* Fila del registro que aún no tiene caso escrito: misma
   retícula, sin flecha y sin hover de enlace. */
/* En /casos/ la clave del resultado es una frase ("Leads para lanzamiento
   de curso"), no una palabra suelta como en la home. Sin mas sitio la fila
   se va a tres lineas y la tabla queda dentada. */
@media (min-width: 880px) {
  .reg-largo .reg-cab,
  .reg-largo .reg-fila { grid-template-columns: 4rem minmax(0, 1fr) 8.5rem 11.5rem 8.5rem 2rem; }
}

.reg-pronto {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  justify-self: end; white-space: nowrap;
}
@media (max-width: 879px) {
  .reg-pronto { justify-self: start; }
}

/* ----------------------------------------------------------
   21. Documentos legales (/privacidad, /aviso-legal, /cookies)
   Texto largo que nadie lee por gusto: medida cómoda, jerarquía
   clara y ningún adorno que estorbe al que busca una cláusula.
   ---------------------------------------------------------- */

.doc { max-width: 74ch; }
.doc h2 {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  margin: 2.75rem 0 0.9rem;
  scroll-margin-top: 6rem;
}
.doc > h2:first-child { margin-top: 0; }
.doc h3 { margin: 1.9rem 0 0.6rem; }
.doc p { color: var(--dim); line-height: 1.72; margin-bottom: 1.05rem; }
.doc ul { margin-bottom: 1.4rem; }
.doc li {
  position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem;
  color: var(--dim); line-height: 1.6;
}
.doc li::before { content: "·"; position: absolute; left: 0.4rem; color: var(--amber); font-weight: 700; }
.doc strong { color: var(--bone); font-weight: 600; }
.doc a { color: var(--amber-hot); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--bone); }

/* ----------------------------------------------------------
   22. Movimiento reducido
   El planeta se queda: lo que se va es el movimiento.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ap.armado > *, .ap.armado.visible > * { opacity: 1; transform: none; transition: none; }
  .btn:active, .muelle > *:active, .hamburguesa:active { transform: none; }
  .reg-fl, .faq summary i, .nav-drop-toggle svg, .reg-img { transition: none; }
  .nav-drop-menu { transition: opacity 140ms ease, visibility 140ms; transform: none; }
  .nav-drop[data-open="true"] .nav-drop-menu { transform: none; }
  .cajon { transition: opacity 140ms ease, visibility 140ms; transform: none; }
  .cajon[data-open="true"] { transform: none; }
  .btn-luz, .btn-luz:hover { box-shadow: 0 6px 26px -8px rgba(255,122,46,0.6); }
}