/* ════════════════════════════════════════════════════════════
   ProcesosBI — landing
   Un filamento de luz cálida recorre una página casi monocroma.
   Dos fuentes: Newsreader (serif editorial) y Hanken Grotesk.
   Un solo acento: la luz.
   ════════════════════════════════════════════════════════════ */

:root {
  --bg:     #0b0b0d;
  --bg-2:   #121214;
  --line:   rgba(236, 233, 226, .09);
  --line-2: rgba(236, 233, 226, .2);
  --ink:    #ece9e2;
  --muted:  #97938a;
  --dim:    #67635a;
  --warm:   #e9c388;
  --warm-2: #ffe7bf;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* una sola bruma cálida, muy tenue, que crece hacia el final */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 600px at 50% -8%,   rgba(233, 195, 136, .05), transparent 60%),
    radial-gradient(1100px 800px at 50% 102%,  rgba(233, 195, 136, .07), transparent 60%);
}

/* grano de impresión */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(233, 195, 136, .3); }

img, svg { display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: min(1080px, calc(100% - 48px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  margin: 0 auto;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  position: relative;
  z-index: 2;
}

/* nada de medios que desborden su caja (refuerzo anti-scroll lateral) */
img, svg, video { max-width: 100%; }

/* ── tipografía ─────────────────────────────────────────── */

.h1, .h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.08;
  text-wrap: balance;
}
.h1 { font-size: clamp(2.4rem, 7.5vw, 4.8rem); }
.h2 { font-size: clamp(1.85rem, 5.2vw, 3.1rem); }

.h1 em, .h2 em, .bigquote em {
  font-style: italic;
  font-weight: 450;
  color: var(--warm);
}

.kicker {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 26px;
}
.k-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--warm);
  margin-right: 14px;
}

.lede, .subhead {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  max-width: 58ch;
}

/* ── botones ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
  padding: 14px 34px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
  white-space: nowrap;
}
.btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  transform: translateY(-1px);
}
.btn-quiet { border-color: transparent; color: var(--muted); }
.btn-quiet:hover { background: transparent; border-color: var(--line-2); color: var(--ink); transform: none; }
.btn-sm { padding: 9px 22px; font-size: .86rem; }

/* ── hilo de luz ────────────────────────────────────────── */

#thread {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
#th-dim   { stroke: rgba(236, 233, 226, .06); stroke-width: 1.5; }
#th-glow2 { stroke-width: 22; stroke-linecap: round; opacity: .07; }
#th-glow  { stroke-width: 8;  stroke-linecap: round; opacity: .26; }
#th-core  { stroke-width: 2.1; stroke-linecap: round; }
#th-tip .tip-core { fill: #fff8ea; }
#th-tip .tip-halo { fill: rgba(255, 223, 158, .32); filter: blur(6px); }
#th-tip { opacity: 0; transition: opacity .3s; will-change: transform, opacity; }
#th-tip.on { opacity: 1; }

.th-a { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.th-n::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid rgba(236, 233, 226, .25);
  transition: border-color .5s, box-shadow .5s, background .5s;
}
.th-n .tag {
  position: absolute;
  top: -13px;
  left: 17px;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--warm);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .6s, transform .6s;
}
.th-n[data-side="left"] .tag {
  left: auto;
  right: 17px;
  transform: translateX(6px);
}
.th-n.lit::before {
  background: var(--warm-2);
  border-color: var(--warm-2);
  box-shadow: 0 0 12px 2px rgba(255, 223, 158, .55);
}
.th-n.lit .tag { opacity: 1; transform: translateX(0); }

/* ── legibilidad: la palabra recorta la luz ──────────────────
   El filamento y su halo cálido discurren por DETRÁS del texto
   (z-index: 1 bajo el z-index: 2 de .container). Aun así, al
   cruzar por debajo de una línea su resplandor aclara el fondo y
   le resta contraste a la tinta clara. La solución no es subir el
   texto —ya está encima— sino que cada glifo lleve un halo del
   color exacto del lienzo: imperceptible sobre el fondo oscuro
   (oscuro sobre oscuro) y, justo donde pasa la luz, recorta la
   letra y la mantiene nítida. Lee como que la palabra ocluye el
   haz, no al revés. Sin cajas ni cards: la separación vive en la
   propia tipografía. El radio va en `em`, así escala con cada
   cuerpo de letra (titular o cuerpo). Los <em>, .warm-em, .wink,
   etc. lo heredan de su contenedor.

   Dos capas, no tres: el blur es rasterizado en CPU al pintar cada
   tile que entra en pantalla, y un radio grande (×3) encarecía el
   scroll y competía con el rAF del haz. La capa ancha contrarrestaba el
   #th-glow2 de 22px —que va a opacity .07, casi invisible—, así que
   sobra. El contraste real lo da el halo medio. */
.kicker, .lede, .subhead,
.h1, .h2, h3,
.e-num, .entry p,
.bigquote,
.s-num, .step p,
.sector h3, .sx-num, .connect-list li,
.th-n .tag,
.impact-list h3, .impact-list li,
.bignum strong, .bignum span,
.sin-list p,
.fugas > p, .fugas-key,
.about-text p, .about-contact a, .portrait figcaption,
.contact-meta, .contact-meta a {
  text-shadow:
    0 0 .1em  var(--bg),
    0 0 .32em var(--bg);
}

/* ── nav ────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(11, 11, 13, .8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warm-2);
  box-shadow: 0 0 10px 2px rgba(255, 223, 158, .5);
}
.brand-word {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -.01em;
}
.brand-word em { font-style: italic; color: var(--warm); }
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-size: .9rem;
  color: var(--muted);
  transition: color .25s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.only-mobile { display: none; }

.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* compensa el padding visual contra el borde */
  padding: 0;
  cursor: pointer;
}
.nav-burger span {
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s;
}
.nav.open .nav-burger span:first-child { transform: translateY(3.2px) rotate(45deg); }
.nav.open .nav-burger span:last-child  { transform: translateY(-3.2px) rotate(-45deg); }

/* ── hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 155px 0 160px;
  text-align: center;
}
.hero .lede { margin: 30px auto 40px; }
.hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── secciones ──────────────────────────────────────────── */

.section { position: relative; padding: 150px 0; }
.section-head { max-width: 700px; margin-bottom: 70px; }
.section-head .subhead { margin-top: 24px; }

/* ── 01 · libro de cuentas ──────────────────────────────── */

.ledger { border-top: 1px solid var(--line); }
.entry {
  display: grid;
  grid-template-columns: 90px .9fr 1.1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: baseline;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s ease;
}
.entry:hover { padding-left: 14px; }
.e-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--dim);
  transition: color .35s;
}
.entry:hover .e-num { color: var(--warm); }
.entry h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.entry p { color: var(--muted); font-size: .97rem; max-width: 46ch; }

/* ── citas ──────────────────────────────────────────────── */

.bigquote {
  margin: 110px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  letter-spacing: -.01em;
  line-height: 1.35;
  max-width: 760px;
}

/* ── método: pasos numerados (solución · IA) ────────────── */

.steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 7vw, 100px);
  border-top: 1px solid var(--line);
}
.step {
  display: flex;
  gap: 26px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.s-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--dim);
  line-height: 1.2;
  flex-shrink: 0;
  width: 44px;
}
.step h3 { font-size: 1.35rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .95rem; }
.step.ia .s-num, .step.ia h3 { color: var(--warm); }
.ia-note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--warm);
  margin-left: 10px;
}

/* ── 05 · sectores ──────────────────────────────────────────
   Legibilidad primero: los seis sectores no son etiquetas
   menudas en una nube, sino entradas tipográficas de cuerpo
   grande sobre una retícula de finos. Cada nombre respira y se
   lee de un vistazo. */

.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.sector {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 34px 26px 34px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s ease, color .3s;
}
/* hairline vertical entre columnas (no en la última de cada fila) */
.sector:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.sx-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--dim);
  flex-shrink: 0;
  transition: color .35s;
}
.sector h3 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 500;
}
.sector:hover { padding-left: 14px; }
.sector:hover .sx-num { color: var(--warm); }

/* ── lo que conectamos: lista escaneable de dos columnas ── */

.connects { margin-top: 84px; }
.connects-label { margin-top: 0; margin-bottom: 30px; }
.connect-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.connect-list li {
  position: relative;
  padding: 16px 0 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 1.02rem;
  transition: color .3s;
}
.connect-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(233, 195, 136, .4);
  transition: background .3s, box-shadow .3s;
}
.connect-list li:hover { color: var(--ink); }
.connect-list li:hover::before {
  background: var(--warm-2);
  box-shadow: 0 0 10px 1px rgba(255, 223, 158, .5);
}
.connect-list .wink {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--dim);
}
.connect-list .wink::before { background: none; box-shadow: none; }

/* ── 04 · impacto ───────────────────────────────────────── */

.impact {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.impact-list h3 {
  font-size: 1.5rem;
  margin-bottom: 18px;
}
.impact-list h3 em { font-style: italic; font-weight: 450; color: var(--ink); }
.impact-list ul { list-style: none; }
.impact-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .97rem;
}
.impact-list li:last-child { border-bottom: 0; }

.impact-nums {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding-top: 6px;
}
.bignum strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bignum span { font-size: .85rem; color: var(--dim); }

/* ── quién está detrás ──────────────────────────────────── */

.about {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
}
.portrait { margin: 0; }
.portrait .ph {
  position: relative;
  display: block;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(.8) contrast(1.03) brightness(.94);
}
/* baño de luz cálida sobre la foto, coherente con el filamento */
.portrait .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 60% at 50% 0%, rgba(233, 195, 136, .12), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(11, 11, 13, .35));
  pointer-events: none;
}
.portrait figcaption {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--dim);
}
.about-text > p:not(.kicker) {
  color: var(--muted);
  max-width: 52ch;
  margin-top: 20px;
}
.about-text .h2 + p { margin-top: 28px; }
.warm-em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08em;
  color: var(--warm);
}
.about-contact {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.about-contact a {
  color: var(--ink);
  font-size: .95rem;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: color .3s, border-color .3s;
}
.about-contact a:hover { color: var(--warm); border-color: var(--warm); }

/* ── contacto: el botón que se enciende ─────────────────── */

.contact {
  position: relative;
  min-height: 96vh;
  min-height: 96dvh; /* dvh: descuenta la barra de direcciones móvil/iPad sin saltos */
  display: flex;
  align-items: center;
  padding: 120px 0 140px;
}
.contact-inner { text-align: center; }
.contact .subhead { margin: 26px auto 0; }

.ignite {
  position: relative;
  display: inline-block;
  margin-top: 90px;
}

/* el interruptor: una cápsula (pill) cuya forma la define la luz, no
   un borde duro. El hilo se funde en el terminal superior-centro y, al
   encenderse, la corriente recorre el contorno e inunda la placa. */
.talk-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing: -.01em;
  color: var(--muted);
  padding: 34px 92px;
  border-radius: 999px;
  border: 0;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(233, 195, 136, .07), transparent 58%),
    rgba(16, 16, 18, .5);
  box-shadow:
    inset 0 1px 0 rgba(236, 233, 226, .05),
    inset 0 0 0 1px rgba(236, 233, 226, .07);
  transition: color .45s, background .45s, box-shadow .45s, transform .45s;
}
.talk-btn:hover {
  color: var(--ink);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(233, 195, 136, .12), transparent 58%),
    rgba(20, 19, 21, .58);
  box-shadow:
    inset 0 1px 0 rgba(236, 233, 226, .08),
    inset 0 0 0 1px rgba(236, 233, 226, .14),
    0 0 28px -6px rgba(233, 195, 136, .22);
}
.tb-text { position: relative; z-index: 2; }

/* contorno luminoso: trazo de 1px tipo "máscara de borde", invisible en
   reposo, que se ilumina al encenderse como un filamento recorriendo el
   perímetro de la cápsula */
.tb-rim {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 231, 191, .9), rgba(233, 195, 136, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
.talk-btn:hover .tb-rim { opacity: .25; }

/* terminal de contacto: donde el hilo aterriza (borde superior-centro).
   En reposo es un punto apagado fundido en el trazo; al encenderse, flamea. */
.tb-node {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  z-index: 3;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background .4s, box-shadow .4s, transform .4s;
}

/* halo de luz tras el botón */
.ig-bloom {
  position: absolute;
  inset: -170px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 231, 191, .55), rgba(255, 210, 140, .16) 40%, transparent 70%);
  opacity: 0;
  transform: scale(.2);
  filter: blur(8px);
  pointer-events: none;
}

/* ondas expansivas */
.ig-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 223, 158, .8);
  opacity: 0;
  pointer-events: none;
}

/* chispas */
.ig-sparks { position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none; }
.ig-sparks i {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: var(--warm-2);
  opacity: 0;
}

/* ─ secuencia de encendido (clase .lit en #contacto) ─ */

/* 1º se enciende el punto de contacto, 2º la placa se inunda de luz */
.contact.lit .tb-node {
  animation: node-on .55s cubic-bezier(.3, .8, .3, 1.4) forwards;
}
@keyframes node-on {
  0% {
    background: var(--bg);
    box-shadow: inset 0 0 0 1.5px var(--line-2);
    transform: scale(1);
  }
  45% {
    background: #fff8ea;
    transform: scale(2);
    box-shadow: inset 0 0 0 1.5px #fff8ea, 0 0 28px 8px rgba(255, 223, 158, .9);
  }
  100% {
    background: var(--warm-2);
    transform: scale(1.25);
    box-shadow: inset 0 0 0 1.5px #fff3da, 0 0 14px 3px rgba(255, 223, 158, .7);
  }
}

.contact.lit .talk-btn {
  animation: plate-on 1.1s cubic-bezier(.22, .9, .3, 1.12) .18s forwards,
             breathe 3.6s ease-in-out 1.7s infinite;
}
@keyframes plate-on {
  0% {
    color: var(--muted);
    background: rgba(16, 16, 18, .5);
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(236, 233, 226, .05),
      inset 0 0 0 1px rgba(236, 233, 226, .07);
  }
  38% {
    color: #241808;
    background: #fff3da;
    transform: scale(1.045);
    box-shadow:
      inset 0 0 0 1px rgba(255, 243, 218, .9),
      0 0 70px 14px rgba(255, 215, 150, .65),
      0 0 200px 60px rgba(255, 200, 120, .28);
  }
  100% {
    color: #241808;
    background: linear-gradient(180deg, #ffefcf, #eec88b);
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .35),
      inset 0 0 0 1px rgba(243, 216, 168, .9),
      0 0 50px 8px rgba(255, 215, 150, .5),
      0 0 160px 44px rgba(255, 200, 120, .22);
  }
}
/* la corriente recorre el contorno antes de inundar la placa */
.contact.lit .tb-rim { animation: rim-on .7s ease .12s forwards; }
@keyframes rim-on {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .35),
      inset 0 0 0 1px rgba(243, 216, 168, .9),
      0 0 50px 8px rgba(255, 215, 150, .5),
      0 0 160px 44px rgba(255, 200, 120, .22);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .4),
      inset 0 0 0 1px rgba(243, 216, 168, .95),
      0 0 64px 12px rgba(255, 215, 150, .62),
      0 0 200px 56px rgba(255, 200, 120, .3);
  }
}

.contact.lit .ig-bloom { animation: bloom 1s cubic-bezier(.2, .7, .25, 1) forwards; }
@keyframes bloom {
  0%   { opacity: 0;   transform: scale(.2); }
  35%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: .5;  transform: scale(1); }
}

.contact.lit .r1 { animation: ring .9s  cubic-bezier(.2, .6, .3, 1) .1s  forwards; }
.contact.lit .r2 { animation: ring 1.1s cubic-bezier(.2, .6, .3, 1) .26s forwards; }
.contact.lit .r3 { animation: ring 1.3s cubic-bezier(.2, .6, .3, 1) .44s forwards; }
@keyframes ring {
  0%   { opacity: .85; transform: scale(.3); }
  100% { opacity: 0;   transform: scale(13); }
}

.contact.lit .ig-sparks i { animation: spark .85s cubic-bezier(.15, .6, .35, 1) forwards; }
.ig-sparks i:nth-child(1)  { --tx:  130px; --ty: -52px;  animation-delay: .14s; }
.ig-sparks i:nth-child(2)  { --tx: -118px; --ty: -74px;  animation-delay: .18s; }
.ig-sparks i:nth-child(3)  { --tx:   96px; --ty:  66px;  animation-delay: .12s; }
.ig-sparks i:nth-child(4)  { --tx:  -86px; --ty:  92px;  animation-delay: .2s; }
.ig-sparks i:nth-child(5)  { --tx:  158px; --ty:  28px;  animation-delay: .16s; }
.ig-sparks i:nth-child(6)  { --tx: -162px; --ty: -12px;  animation-delay: .22s; }
.ig-sparks i:nth-child(7)  { --tx:   44px; --ty: -120px; animation-delay: .1s; }
.ig-sparks i:nth-child(8)  { --tx:  -52px; --ty: -132px; animation-delay: .24s; }
.ig-sparks i:nth-child(9)  { --tx:   64px; --ty:  118px; animation-delay: .18s; }
.ig-sparks i:nth-child(10) { --tx:  -72px; --ty:  126px; animation-delay: .14s; }
.ig-sparks i:nth-child(11) { --tx:  184px; --ty: -84px;  animation-delay: .26s; }
.ig-sparks i:nth-child(12) { --tx: -178px; --ty:  58px;  animation-delay: .2s; }
@keyframes spark {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3); }
}

/* datos de contacto: aparecen cuando el botón se enciende */
.contact-meta {
  display: flex;
  flex-direction: column;
  align-items: center; /* fix: en móvil los <a> pasan a inline-flex y se encogían a la izquierda; centramos todo el bloque */
  gap: 4px;
  margin-top: 60px;
  font-size: .92rem;
  color: var(--dim);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s ease .8s, transform .8s ease .8s;
}
.contact.lit .contact-meta { opacity: 1; transform: none; }
.contact-meta a { color: var(--muted); transition: color .25s; }
.contact-meta a:hover { color: var(--warm); }

/* ── footer ─────────────────────────────────────────────── */

.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  padding: 70px 0 calc(40px + env(safe-area-inset-bottom));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.footer-tag { margin-top: 18px; color: var(--dim); font-size: .92rem; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col h5 {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}
.footer-col a, .footer-col span { font-size: .92rem; color: var(--muted); transition: color .25s; }
.footer-col a:hover { color: var(--ink); }
.footer-bot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  font-size: .8rem;
  color: var(--dim);
}
.footer-bot a { color: var(--muted); transition: color .25s; }
.footer-bot a:hover { color: var(--warm); }

/* ── reveal ─────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.2, .65, .25, 1), transform .9s cubic-bezier(.2, .65, .25, 1);
}
.reveal.in { opacity: 1; transform: none; }
.ledger .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: .07s; }
.ledger .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: .14s; }
.ledger .reveal:nth-child(4), .steps .reveal:nth-child(4) { transition-delay: .21s; }
.steps .reveal:nth-child(5) { transition-delay: .28s; }
.steps .reveal:nth-child(6) { transition-delay: .35s; }

/* ── responsive ─────────────────────────────────────────── */

/* tablet ancho: las etiquetas del hilo ya no tienen márgenes
   despejados garantizados; se quedan los nodos como puntos */
@media (max-width: 1020px) {
  /* En móvil/tablet no hay sitio para la etiqueta, así que el punto del
     recorrido se encendería sin mostrar ninguna información: se elimina
     por completo (punto + etiqueta). El trazo del hilo no se ve afectado,
     porque su geometría vive en el elemento .th-a (0×0), no en ::before. */
  .th-n .tag { display: none; }
  .th-n::before { display: none; }
  .hero { padding: 140px 0 120px; }
  .section { padding: 120px 0; }
}

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .impact { grid-template-columns: 1fr 1fr; }
  .impact-nums {
    grid-column: 1 / -1;
    order: -1;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  .about { grid-template-columns: 1fr; gap: 44px; }
  .portrait { max-width: 360px; width: 100%; margin: 0 auto; }
  .portrait figcaption { text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* sectores: de 3 a 2 columnas; el hairline vertical pasa a separar
     solo la columna izquierda de la derecha */
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .sector { border-right: 0; }
  .sector:nth-child(odd) { border-right: 1px solid var(--line); }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }

  /* Por debajo de la presentación de escritorio, los <br> manuales de los
     titulares (pensados para anchos amplios) chocan con el ancho real y
     dejan líneas sueltas/huérfanas tanto en h1/h2 como en las citas.
     Los neutralizamos y dejamos que text-wrap:balance reparta. No tocamos
     el copy. */
  br.lb { display: none; }

  .section { padding: 96px 0; }
  .hero { padding: 125px 0 100px; }
  /* la cita pierde el <br>: que el reparto sea fino y el aire superior
     baje de forma graduada (110 → 84 → 64) */
  .bigquote { margin-top: 84px; text-wrap: pretty; }
  .entry { grid-template-columns: 48px 1fr; row-gap: 10px; }
  .entry p { grid-column: 2; }
  .entry:hover { padding-left: 0; }
  .impact { grid-template-columns: 1fr; }
  .impact-nums { flex-direction: column; gap: 26px; }
  .talk-btn { padding: 26px 56px; }
  .ig-bloom { inset: -110px; }
  .contact { min-height: 0; padding: 110px 0 130px; }
  .contact-meta { margin-top: 48px; }

  /* sectores: las entradas pierden el padding lateral grande para
     ganar ancho de lectura en pantallas estrechas */
  .sector { padding: 28px 16px 28px 4px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .nav-links {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(11, 11, 13, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 8px max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left));
    /* si entrasen muchos enlaces o en horizontal, el menú hace scroll
       en lugar de tapar contenido o desbordar la pantalla */
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-10px);
    opacity: 0;
    /* visibility:hidden saca los enlaces del orden de tabulación cuando el
       menú está cerrado (pointer-events:none NO lo hace: el teclado/lector de
       pantalla podía tabular dentro de un menú invisible). Se retrasa hasta
       que termina el fundido para no cortar la animación de cierre. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s, transform .25s, visibility 0s linear .25s;
  }
  .nav.open .nav-links {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s, transform .25s, visibility 0s;
  }
  .nav-links a { padding: 14px 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-burger { display: flex; }
  .nav-cta .btn { display: none; }
  .only-mobile { display: block; }
}

/* móvil estrecho: ajustes finos de densidad. La neutralización de los
   <br> manuales y text-wrap:balance/pretty ya operan desde ≤760. */
@media (max-width: 520px) {
  /* el <br> y text-wrap:pretty de las citas ya se aplican en ≤760;
     aquí solo cerramos el aire superior de la cita */
  .bigquote { margin-top: 64px; }

  .container { width: calc(100% - 36px - env(safe-area-inset-left) - env(safe-area-inset-right)); }

  .hero { padding: 116px 0 88px; }
  .section { padding: 80px 0; }
  .section-head { margin-bottom: 52px; }

  /* sectores: una sola columna de nombres, lectura sin compromisos;
     "lo que conectamos" también apila en columna única */
  .sector-grid { grid-template-columns: 1fr; }
  .sector, .sector:nth-child(odd) { border-right: 0; }
  .connect-list { grid-template-columns: 1fr; }

  /* el interruptor: márgenes y tap target a salvo en pantallas mínimas */
  .talk-btn { padding: 22px 40px; font-size: clamp(1.4rem, 7vw, 1.7rem); }
  .ignite { margin-top: 72px; }
  /* halo y chispas más contenidos: nada de salirse de la pantalla */
  .ig-bloom { inset: -80px; }
  .ig-sparks i:nth-child(1)  { --tx:   78px; --ty: -34px; }
  .ig-sparks i:nth-child(2)  { --tx:  -70px; --ty: -46px; }
  .ig-sparks i:nth-child(3)  { --tx:   60px; --ty:  42px; }
  .ig-sparks i:nth-child(4)  { --tx:  -54px; --ty:  56px; }
  .ig-sparks i:nth-child(5)  { --tx:   94px; --ty:  18px; }
  .ig-sparks i:nth-child(6)  { --tx:  -96px; --ty:  -8px; }
  .ig-sparks i:nth-child(7)  { --tx:   28px; --ty: -72px; }
  .ig-sparks i:nth-child(8)  { --tx:  -34px; --ty: -80px; }
  .ig-sparks i:nth-child(9)  { --tx:   40px; --ty:  72px; }
  .ig-sparks i:nth-child(10) { --tx:  -46px; --ty:  78px; }
  .ig-sparks i:nth-child(11) { --tx:  108px; --ty: -50px; }
  .ig-sparks i:nth-child(12) { --tx: -104px; --ty:  36px; }
}

/* ── tap targets en dispositivos táctiles ───────────────────────────
   El área pulsable no debe depender del ancho de viewport: un iPad de
   768/834 px o un portátil táctil siguen necesitando dianas ≥44px aunque
   muestren la maqueta "de escritorio". Lo decidimos por el TIPO de puntero
   (coarse = dedo), así el ratón no se ve afectado. Estas reglas cubren
   cualquier ancho (incluido el móvil, que también es coarse). */
@media (pointer: coarse) {
  .footer-col a,
  .footer-bot a,
  .contact-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col { gap: 4px; } /* compensa el alto extra de las dianas */
  /* el logotipo (nav y footer) como diana ≥44px sin desplazar el texto:
     ya es inline-flex centrado, el alto mínimo solo agranda el área */
  .brand { min-height: 44px; }
  /* en about el subrayado marca la diana: ≥44px de alto sin despegar el
     subrayado del texto (inline-flex + alineación inferior) */
  .about-contact { gap: 14px 30px; }
  .about-contact a {
    display: inline-flex;
    align-items: flex-end;
    min-height: 44px;
    padding-bottom: 3px;
  }

  /* el desplazamiento de hover (padding-left) es afordancia de ratón; en
     táctil se queda "pegado" tras el tap y salta la fila (no son enlaces).
     Lo neutralizamos manteniendo cada fila en su sangría de reposo. */
  .entry:hover  { padding-left: 0; }
  .sector:hover { padding-left: 4px; }
}

/* Sólo donde la nav se muestra horizontal (tablet/escritorio táctil, >760):
   en ≤760 el menú es un desplegable que YA tiene filas de ≥44px, y
   convertir sus enlaces en inline-flex rompería el ancho completo y las
   hairlines. Aquí agrandamos los enlaces horizontales y el botón pequeño. */
@media (pointer: coarse) and (min-width: 761px) {
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* padding 12+12 + texto (~17px) se quedaba en ~41px: forzamos la
     diana a 44px (el botón ya es inline-flex centrado, no descoloca) */
  .btn-sm { padding-top: 12px; padding-bottom: 12px; min-height: 44px; }
}

/* ── solución: lista de negaciones ─────────────────────── */

.sin-list {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.sin-list p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--muted);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: color .3s;
}
.sin-list p:last-child { border-bottom: 0; }
.sin-list p:hover { color: var(--ink); }

/* ── impacto: narrativa de fugas ─────────────────────────── */

.fugas {
  max-width: 640px;
  margin-bottom: 60px;
}
.fugas > p { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.1rem); margin-bottom: 16px; }
.fugas-key {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 500;
  color: var(--warm);
  margin-bottom: 0 !important;
}

/* ── reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .contact.lit .talk-btn {
    color: #241808;
    background: linear-gradient(180deg, #ffefcf, #eec88b);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .35),
      inset 0 0 0 1px rgba(243, 216, 168, .9),
      0 0 50px 8px rgba(255, 215, 150, .5);
  }
  .contact.lit .tb-node {
    background: var(--warm-2);
    box-shadow: inset 0 0 0 1.5px #fff3da, 0 0 14px 3px rgba(255, 223, 158, .7);
  }
  .contact.lit .tb-rim { opacity: 0; }
  .contact.lit .contact-meta { opacity: 1; transform: none; }
}