/* ============================================================
   MeshPTY — sistema visual
   Registro: manual de campo. No landing, no SaaS.

   Escena: azotea en Ciudad de Panamá, mediodía, sol directo.
   Alguien con el celular en una mano y un nodo en la otra,
   leyendo LONG_FAST sin poder equivocarse.
   → Tema claro, alto contraste, denso, legible bajo reflejo.

   Color:  naranja de torre (#C93A1E) — el naranja internacional
           de obstrucción, el que se pinta en las antenas.
   Tipos:  Newsreader (serif, titulares · autoridad de manual)
           IBM Plex Sans (cuerpo)
           IBM Plex Mono (datos, etiquetas, config)
           Eje de contraste real: serif + sans + mono.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- tipos --- */
  --font-display:"Newsreader", Georgia, serif;
  --font-body:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- superficie: off-white croma 0, sin tinte "cálido" --- */
  --paper:#ffffff;
  --paper-2:#f4f5f6;
  --paper-3:#eceeef;

  /* --- tinta: contraste verificado sobre --paper y --paper-2 --- */
  --ink:#14181c;      /* 16.4:1 */
  --ink-2:#454c53;    /* 8.0:1  */
  --ink-3:#5a6167;    /* 5.9:1  — piso para texto pequeño */

  /* --- reglas --- */
  --rule:#d8dbde;
  --rule-strong:#14181c;

  /* --- señal: naranja de torre --- */
  --signal:#c93a1e;        /* 5.1:1 sobre blanco */
  --signal-deep:#992a13;   /* 7.4:1 */
  --signal-tint:#fdeee9;
  --signal-line:#f0c4b8;

  /* --- vivo --- */
  --live:#1b7f4c;          /* 5.0:1 */
  --live-tint:#e8f4ee;
  --live-line:#b8dcc8;

  /* --- z-index semántico --- */
  --z-sticky:100;
  --z-skip:200;

  /* --- ritmo --- */
  --measure:68ch;
  --max:940px;
  --max-wide:1200px;

  /* --- curva: exponencial, sin rebote --- */
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* permite animar block-size:auto en el FAQ (Chrome/Edge) */
  interpolate-size:allow-keywords;
}

/* la barra es fija: cualquier ancla debe aterrizar DEBAJO de ella,
   no detrás. Sin esto, "#privacidad" deja el titular tapado. */
[id]{scroll-margin-top:84px}

::selection{background:var(--signal);color:#fff}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--max-wide);margin:0 auto;padding:0 24px}

/* medida de línea: la prosa no pasa de ~68ch */
section p,
section ul,
section ol,
.phead p{max-width:var(--measure)}

a{color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--signal),var(--signal));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size .25s var(--ease), color .2s var(--ease);
}
a:hover{color:var(--signal-deep);background-size:100% 2px}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;border-radius:2px;
}

strong{font-weight:600}
em{font-style:italic}

code{
  font-family:var(--font-mono);
  font-weight:500;font-size:.86em;
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:.08em .38em;border-radius:2px;
  color:var(--signal-deep);
  white-space:nowrap;
}

/* ---------- skip ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--ink);color:#fff;padding:12px 18px;font-weight:600;
  background-image:none;
}
.skip:focus{left:0}

/* ============================================================
   NAV — barra de estación. Mono, densa, scroll lateral en móvil.
   ============================================================ */
nav{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--paper);
  border-bottom:1px solid var(--rule-strong);
}
nav .wrap-wide{display:flex;align-items:center;gap:28px;min-height:60px}

.brand{
  display:flex;align-items:center;gap:9px;flex:none;
  font-family:var(--font-mono);
  font-weight:600;font-size:1.02rem;letter-spacing:-.02em;
  color:var(--ink);background-image:none;padding:0;
}
.brand:hover{color:var(--ink)}
.brand .dot{
  width:9px;height:9px;border-radius:50%;background:var(--signal);flex:none;
  box-shadow:0 0 0 3px var(--signal-tint);
}
.brand b{color:var(--signal);font-weight:600}

nav .links{
  margin-left:auto;display:flex;gap:22px;align-items:center;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
nav .links::-webkit-scrollbar{display:none}
nav .links a{
  font-family:var(--font-mono);
  font-size:.78rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--ink-2);background-image:none;padding:20px 0;
  border-bottom:2px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
nav .links a:hover{color:var(--ink);border-bottom-color:var(--rule)}
nav .links a[aria-current="page"]{color:var(--signal);border-bottom-color:var(--signal)}

@media(max-width:900px){
  nav .wrap-wide{gap:16px;padding-right:0}
  nav .links{gap:18px;padding-right:24px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav .links a{padding:18px 0;font-size:.74rem}
}

/* ============================================================
   CABECERAS
   ============================================================ */
.phead{
  padding:64px 0 44px;
  border-bottom:1px solid var(--rule);
}
.phead .eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);
  margin-bottom:18px;
}
.phead h1{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5.6vw,3.8rem);
  line-height:1.05;letter-spacing:-.025em;font-weight:500;
  text-wrap:balance;
}
.phead p{margin:0;color:var(--ink-2);font-size:1.15rem;line-height:1.55}

/* ---------- hero (portada) ---------- */
.hero{
  padding:88px 0 72px;
  border-bottom:1px solid var(--rule-strong);
  position:relative;overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:56px;align-items:center;
}
.hero-copy{min-width:0}
@media(max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero .mesh{max-width:320px;margin:0 auto}
}

/* ============================================================
   LA MALLA — no es decoración. Es el mecanismo del sitio.

   Meshtastic funciona por ALMACENAMIENTO Y REENVÍO: un nodo
   recibe el paquete, lo guarda, y entonces lo retransmite.
   Por eso el paquete no se desliza: SALTA, se detiene en cada
   nodo, y vuelve a salir. Al llegar, el nodo se enciende y el
   enlace que usó se ilumina.

   Dos rutas simultáneas, porque una malla no tiene un camino
   único — tiene todos los caminos a la vez.
   ============================================================ */
.hero .mesh{width:100%;height:auto;overflow:visible}
.mesh-links line{stroke:var(--rule);stroke-width:1}
.mesh-nodes circle{fill:var(--ink-3)}
.mesh-hub{fill:var(--signal)}
.packet{fill:var(--signal);opacity:0}

@media (prefers-reduced-motion: no-preference){

  /* --- los paquetes: saltan y descansan en cada nodo --- */
  .packet.p1{
    offset-path:path("M 70 340 L 120 220 L 260 200 L 340 110");
    animation:hop-1 4.6s linear infinite;
  }
  .packet.p2{
    offset-path:path("M 60 90 L 200 50 L 260 200 L 320 320");
    animation:hop-2 5.8s linear infinite;
    animation-delay:1.9s;
  }

  /* --- los enlaces se encienden justo cuando el paquete pasa --- */
  .mesh-links .r1a{animation:lit-r1a 4.6s linear infinite}
  .mesh-links .r1b{animation:lit-r1b 4.6s linear infinite}
  .mesh-links .r1c{animation:lit-r1c 4.6s linear infinite}
  .mesh-links .r2a{animation:lit-r2a 5.8s linear infinite 1.9s}
  .mesh-links .r2b{animation:lit-r2b 5.8s linear infinite 1.9s}
  .mesh-links .r2c{animation:lit-r2c 5.8s linear infinite 1.9s}

  /* --- los nodos: el que recibe se enciende. El resto respira --- */
  .mesh-nodes .n-d{animation:recv-1-hop 4.6s linear infinite}
  .mesh-nodes .n-c{animation:recv-1-end 4.6s linear infinite}
  .mesh-nodes .n-b{animation:recv-2-hop 5.8s linear infinite 1.9s}
  .mesh-nodes .n-g{animation:recv-2-end 5.8s linear infinite 1.9s}
  .mesh-nodes .n-f,
  .mesh-nodes .n-a{animation:node-breathe 4s var(--ease) infinite}
  .mesh-nodes .n-a{animation-delay:1.4s}

  /* el hub está en las dos rutas: nunca descansa */
  .mesh-hub{animation:hub-pulse 2.6s var(--ease) infinite}
}

/* Ruta 1 · F → D → E → C  (tramos: 33% / 69% / 100% del recorrido) */
@keyframes hop-1{
  0%{offset-distance:0%;opacity:0}
  4%{opacity:1}
  8%{offset-distance:0%}
  30%{offset-distance:33%;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  38%{offset-distance:33%}
  62%{offset-distance:69%;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  70%{offset-distance:69%}
  93%{offset-distance:100%;opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  100%{offset-distance:100%;opacity:0}
}
/* Ruta 2 · A → B → E → G */
@keyframes hop-2{
  0%{offset-distance:0%;opacity:0}
  4%{opacity:1}
  8%{offset-distance:0%}
  30%{offset-distance:33%;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  38%{offset-distance:33%}
  62%{offset-distance:70%;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  70%{offset-distance:70%}
  93%{offset-distance:100%;opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  100%{offset-distance:100%;opacity:0}
}

/* enlaces encendidos — cada uno solo durante su tramo */
@keyframes lit-r1a{
  0%,7%{stroke:var(--rule);stroke-width:1}
  10%{stroke:var(--signal);stroke-width:1.6}
  30%{stroke:var(--signal);stroke-width:1.6}
  46%,100%{stroke:var(--rule);stroke-width:1}
}
@keyframes lit-r1b{
  0%,37%{stroke:var(--rule);stroke-width:1}
  40%{stroke:var(--signal);stroke-width:1.6}
  62%{stroke:var(--signal);stroke-width:1.6}
  78%,100%{stroke:var(--rule);stroke-width:1}
}
@keyframes lit-r1c{
  0%,69%{stroke:var(--rule);stroke-width:1}
  72%{stroke:var(--signal);stroke-width:1.6}
  93%{stroke:var(--signal);stroke-width:1.6}
  100%{stroke:var(--rule);stroke-width:1}
}
@keyframes lit-r2a{
  0%,7%{stroke:var(--rule);stroke-width:1}
  10%{stroke:var(--signal);stroke-width:1.6}
  30%{stroke:var(--signal);stroke-width:1.6}
  46%,100%{stroke:var(--rule);stroke-width:1}
}
@keyframes lit-r2b{
  0%,37%{stroke:var(--rule);stroke-width:1}
  40%{stroke:var(--signal);stroke-width:1.6}
  62%{stroke:var(--signal);stroke-width:1.6}
  78%,100%{stroke:var(--rule);stroke-width:1}
}
@keyframes lit-r2c{
  0%,69%{stroke:var(--rule);stroke-width:1}
  72%{stroke:var(--signal);stroke-width:1.6}
  93%{stroke:var(--signal);stroke-width:1.6}
  100%{stroke:var(--rule);stroke-width:1}
}

/* nodos que reciben: se encienden al llegar el paquete */
@keyframes recv-1-hop{
  0%,29%{r:4;fill:var(--ink-3)}
  32%{r:7;fill:var(--signal)}
  44%{r:4.5;fill:var(--signal)}
  58%,100%{r:4;fill:var(--ink-3)}
}
@keyframes recv-1-end{
  0%,92%{r:4;fill:var(--ink-3)}
  95%{r:7;fill:var(--signal)}
  100%{r:5;fill:var(--signal)}
}
@keyframes recv-2-hop{
  0%,29%{r:4;fill:var(--ink-3)}
  32%{r:7;fill:var(--signal)}
  44%{r:4.5;fill:var(--signal)}
  58%,100%{r:4;fill:var(--ink-3)}
}
@keyframes recv-2-end{
  0%,92%{r:4;fill:var(--ink-3)}
  95%{r:7;fill:var(--signal)}
  100%{r:5;fill:var(--signal)}
}
@keyframes node-breathe{
  0%,100%{r:4;fill:var(--ink-3)}
  50%{r:5;fill:var(--ink-2)}
}
@keyframes hub-pulse{
  0%,100%{r:7;opacity:1}
  50%{r:8.6;opacity:.8}
}

.hero .badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);
  font-size:.76rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--live);
  border:1px solid var(--live-line);background:var(--live-tint);
  padding:6px 13px;border-radius:2px;margin-bottom:28px;
}
.hero .badge .live{
  width:7px;height:7px;border-radius:50%;background:var(--live);flex:none;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(27,127,76,.4)}
  50%{opacity:.75;box-shadow:0 0 0 5px rgba(27,127,76,0)}
}

.hero h1{
  margin:0 0 26px;
  font-family:var(--font-display);
  font-size:clamp(2.8rem,7vw,5rem);
  line-height:1;letter-spacing:-.03em;font-weight:500;
  max-width:14ch;text-wrap:balance;
}
.hero .lede{
  font-size:clamp(1.08rem,2vw,1.25rem);color:var(--ink-2);
  max-width:56ch;margin:0 0 36px;line-height:1.6;text-wrap:pretty;
}

/* ============================================================
   BOTONES — rectos, sin radio grande. Herramienta, no producto.
   ============================================================ */
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-block;padding:14px 26px;border-radius:2px;
  font-family:var(--font-mono);
  font-weight:500;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  background-image:none;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.primary:hover{background:var(--signal-deep);border-color:var(--signal-deep);color:#fff}

/* ============================================================
   SECCIONES Y TITULARES
   ============================================================ */
section{padding:64px 0}
section + section{border-top:1px solid var(--rule)}

h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.4vw,2.2rem);
  letter-spacing:-.02em;font-weight:500;line-height:1.18;
  margin:0 0 14px;text-wrap:balance;
}
h3{
  font-family:var(--font-display);
  font-size:1.22rem;font-weight:600;letter-spacing:-.012em;
  margin:34px 0 8px;line-height:1.3;text-wrap:balance;
}
h3:first-child{margin-top:0}

p{margin:0 0 17px;text-wrap:pretty}
.sub{color:var(--ink-2);margin:0 0 34px;font-size:1.06rem;line-height:1.6}
.muted{color:var(--ink-2)}
.small{font-size:.92rem}

/* ============================================================
   ENTRADAS EN REJILLA — no son tarjetas.
   Regla superior gruesa + texto. Índice editorial, no card grid.
   ============================================================ */
.grid{display:grid;gap:0}
.g2,.g3{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  column-gap:38px;row-gap:0;
}

.card{
  position:relative;
  background:none;border:0;border-radius:0;
  padding:20px 0 34px;margin:0;
}
/* la regla es un pseudo-elemento para poder dibujarla */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--rule-strong);transform-origin:left center;
}
.card h3{
  margin:0 0 10px;
  font-family:var(--font-body);
  font-size:1.02rem;font-weight:600;letter-spacing:-.005em;
}
.card p{color:var(--ink-2);font-size:.97rem;margin-bottom:12px;max-width:none}
.card p:last-child{margin-bottom:0}
.card.soft{background:none}

/* el icono deja de ser emoji decorativo: se oculta.
   La jerarquía la lleva la regla y el titular. */
.card .ico,
section > .wrap > .grid .ico{display:none}

/* ============================================================
   PASOS — número colgado en el margen, mono. Sin chip redondeado.
   ============================================================ */
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:block}
ol.steps > li{
  counter-increment:s;position:relative;
  background:none;border:0;border-top:1px solid var(--rule);
  border-radius:0;
  padding:28px 0 30px 62px;
}
ol.steps > li:first-child{border-top:2px solid var(--rule-strong)}
ol.steps > li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:29px;
  width:auto;height:auto;background:none;border:0;
  font-family:var(--font-mono);
  font-size:.86rem;font-weight:500;letter-spacing:.02em;
  color:var(--signal);
  display:block;
}
ol.steps > li h3{
  margin:0 0 10px;
  font-family:var(--font-body);
  font-size:1.06rem;font-weight:600;
}
ol.steps > li p{color:var(--ink-2);font-size:.98rem;max-width:62ch}
ol.steps > li p:last-child{margin-bottom:0}

/* ============================================================
   TABLAS — densas, regladas, cabecera mono. Hoja de datos.
   ============================================================ */
.tbl-wrap{overflow-x:auto;margin:0 0 24px}
table.tbl{
  width:100%;border-collapse:collapse;
  border:0;border-top:2px solid var(--rule-strong);
  border-bottom:2px solid var(--rule-strong);
  font-size:.96rem;background:none;
}
table.tbl th,table.tbl td{
  padding:14px 20px 14px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);
}
table.tbl th:last-child,table.tbl td:last-child{padding-right:0}
table.tbl thead th{
  background:none;color:var(--ink-3);
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  padding-top:10px;padding-bottom:10px;
  border-bottom:1px solid var(--rule-strong);
}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl td:first-child{color:var(--ink-2)}
table.tbl td strong{color:var(--ink)}

/* ============================================================
   AVISOS — sin franja lateral. Etiqueta mono colgada del borde.
   ============================================================ */
.box{
  position:relative;
  border:1px solid var(--rule);
  border-radius:0;
  padding:30px 26px 24px;
  margin:34px 0;
  background:var(--paper);
}
.box::before{
  position:absolute;top:-8px;left:22px;
  font-family:var(--font-mono);
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:0 8px;background:var(--paper);
}
.box h3{
  margin:0 0 10px;
  font-family:var(--font-body);
  font-size:1.04rem;font-weight:600;
}
.box p{font-size:.97rem;margin-bottom:14px;max-width:64ch}
.box p:last-child{margin-bottom:0}
.box ul{margin-bottom:0}
.box code{background:var(--paper-2)}

.box.info{border-color:var(--rule);background:var(--paper-2)}
.box.info::before{content:"Nota";color:var(--ink-3);background:var(--paper-2)}
.box.info h3{color:var(--ink)}

.box.ok{border-color:var(--live-line);background:var(--live-tint)}
.box.ok::before{content:"Clave";color:var(--live);background:var(--live-tint)}
.box.ok h3{color:#14563a}
.box.ok code{background:#fff}

.box.warn{border-color:var(--rule-strong);background:var(--paper)}
.box.warn::before{content:"Ojo";color:var(--ink);background:var(--paper)}

/* crítico: inversión total. Es el único que grita, y por eso funciona. */
.box.stop{
  border-color:var(--signal);border-width:2px;
  background:var(--signal-tint);
}
.box.stop::before{content:"Crítico";color:#fff;background:var(--signal)}
.box.stop h3{color:var(--signal-deep)}
.box.stop p{color:#6d2413}
.box.stop strong{color:var(--signal-deep)}
.box.stop code{background:#fff;border-color:var(--signal-line)}

/* ============================================================
   LISTAS
   ============================================================ */
ul.plain,ol.plain{padding-left:20px;margin:0 0 20px;color:var(--ink-2)}
ul.plain li,ol.plain li{margin-bottom:10px;padding-left:4px}
ul.plain li::marker{color:var(--signal)}
ol.plain li::marker{color:var(--signal);font-family:var(--font-mono);font-size:.9em}
ul.plain li:last-child,ol.plain li:last-child{margin-bottom:0}
ul.plain strong,ol.plain strong{color:var(--ink)}

ul.check,ul.cross{list-style:none;padding:0;margin:0 0 20px}
ul.check li,ul.cross li{
  position:relative;padding-left:26px;margin-bottom:11px;color:var(--ink-2);
}
ul.check li::before{
  content:"+";position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-weight:600;color:var(--live);
}
ul.cross li::before{
  content:"×";position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-weight:600;color:var(--signal);
}
ul.check li:last-child,ul.cross li:last-child{margin-bottom:0}
ul.check strong,ul.cross strong{color:var(--ink)}

/* ============================================================
   LEDGER — sustituye el panel de métricas tipo SaaS.
   La etiqueta manda; el valor va en mono, alineado. Bitácora.
   ============================================================ */
.ledger{
  border-top:2px solid var(--rule-strong);
  border-bottom:2px solid var(--rule-strong);
  margin:0 0 8px;
}
.ledger dl{display:block;margin:0}
.ledger .row{
  display:flex;align-items:baseline;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.ledger .row:last-child{border-bottom:none}
.ledger dt{
  flex:1;color:var(--ink-2);font-size:.99rem;
}
.ledger dd{
  margin:0;flex:none;
  font-family:var(--font-mono);
  font-size:1.18rem;font-weight:600;letter-spacing:-.02em;
  color:var(--signal);font-variant-numeric:tabular-nums;
}
.ledger .row .lead{
  flex:1;border-bottom:1px dotted var(--rule);
  transform:translateY(-4px);min-width:20px;
  transform-origin:left center;
}
@media(max-width:560px){
  .ledger .row{flex-wrap:wrap;gap:6px}
  .ledger .row .lead{display:none}
  .ledger dt{flex:1 1 100%}
}

/* ============================================================
   FAQ
   ============================================================ */
details.faq{
  border:0;border-top:1px solid var(--rule);border-radius:0;
  padding:0;margin:0;background:none;
}
details.faq:first-of-type{border-top:2px solid var(--rule-strong)}
details.faq summary{
  cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-family:var(--font-display);
  font-weight:600;font-size:1.16rem;letter-spacing:-.012em;line-height:1.35;
  list-style:none;display:block;
  transition:color .18s var(--ease);
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+";position:absolute;right:0;top:19px;
  font-family:var(--font-mono);font-weight:500;font-size:1.2rem;
  color:var(--signal);line-height:1.3;
  transition:transform .3s var(--ease);
}
details.faq[open] summary::after{content:"–";transform:rotate(180deg)}
details.faq summary:hover{color:var(--signal-deep)}
details.faq .body{
  padding:0 0 26px;color:var(--ink-2);font-size:1rem;border-top:0;
}
details.faq .body p:last-child{margin-bottom:0}
details.faq .body > .box:first-child{margin-top:8px}

/* ============================================================
   CANALES (comunidad)
   ============================================================ */
.chans{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:38px}
.chan{
  position:relative;
  display:block;background:none;border:0;border-radius:0;
  padding:18px 0 26px;color:var(--ink);
  background-image:none;
}
.chan::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--rule-strong);transform-origin:left center;
  transition:background-color .2s var(--ease);
}
.chan:hover::before{background:var(--signal)}
.chan:hover{color:var(--ink);box-shadow:none}
.chan .ico{display:none}
.chan .t{
  display:block;font-weight:600;font-size:1.02rem;margin-bottom:4px;
}
.chan:hover .t{color:var(--signal-deep)}
.chan .d{display:block;color:var(--ink-2);font-size:.93rem;line-height:1.5}
/* canal aún no disponible: se ve, pero no engaña — no es clicable */
.chan.quiet{opacity:.55;pointer-events:none;cursor:default}
.chan.quiet::before{background:var(--rule)}

/* ============================================================
   FLASHER — la dirección más importante del sitio.
   ============================================================ */
.flasher-url{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(1.15rem,3.2vw,1.6rem);
  letter-spacing:-.03em;
  margin:16px 0 18px;word-break:break-all;max-width:none;
}
.flasher-url a{
  color:var(--signal-deep);
  background-image:linear-gradient(var(--signal-line),var(--signal-line));
  background-size:100% 6px;background-position:0 92%;
  padding:0 2px;
}
.flasher-url a:hover{background-size:100% 100%;color:var(--signal-deep)}

/* ============================================================
   CAPTURAS
   ============================================================ */
figure.shot{margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
figure.shot img{
  display:block;width:100%;max-width:330px;height:auto;
  border:1px solid var(--rule-strong);border-radius:4px;background:#0f1620;
}
figure.shot figcaption{
  font-size:.88rem;color:var(--ink-3);line-height:1.5;max-width:46ch;
  padding-left:14px;border-left:1px solid var(--rule);
}
figure.shot figcaption strong{color:var(--ink-2)}
.shots{display:flex;flex-wrap:wrap;gap:26px;margin:22px 0 0;align-items:flex-start}
.shots figure.shot{margin:0;flex:1 1 240px;max-width:330px}
ol.steps figure.shot img{max-width:300px}
@media(max-width:640px){
  figure.shot img,.shots figure.shot{max-width:100%}
  .shots figure.shot{flex-basis:100%}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--ink);color:#c9ced3;
  padding:64px 0 72px;margin-top:0;
  border-top:0;
}
footer .cols{display:flex;gap:56px;flex-wrap:wrap;margin-bottom:44px}
footer .col{min-width:180px}
footer .col h4{
  font-family:var(--font-mono);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;
  color:#7b848c;margin:0 0 16px;font-weight:500;
}
footer .col a{
  display:block;color:#c9ced3;font-size:.95rem;margin-bottom:9px;
  background-image:none;padding:0;
}
footer .col a:hover{color:#fff}
footer .fine{
  border-top:1px solid #2b3238;padding-top:28px;
  color:#8d959c;font-size:.85rem;line-height:1.7;max-width:78ch;
}
footer .fine strong{color:#c9ced3;font-weight:500}
footer .fine p{margin:0 0 12px;max-width:none}
footer .fine p:last-child{margin-bottom:0}
footer .fine a{color:#c9ced3;background-image:none;border-bottom:1px solid #4a5259}
footer .fine a:hover{color:#fff;border-bottom-color:#fff}

/* ============================================================
   UTILIDADES
   ============================================================ */
.mt0{margin-top:0}
.mb0{margin-bottom:0}
hr.rule{border:0;border-top:1px solid var(--rule);margin:48px 0}

/* ============================================================
   MOTION
   ------------------------------------------------------------
   Principio: la animación toca la ESTRUCTURA, nunca el TEXTO.
   Las reglas se dibujan, las líneas de puntos se extienden, los
   marcadores entran, los paquetes viajan. Las palabras están ahí
   desde el primer frame — siempre, en cualquier navegador, con o
   sin JS, en impresión y en un rastreador headless.

   Consecuencia práctica: nada de "fade-up" en cada sección.
   Ese reflejo uniforme es justo lo que delata una plantilla.
   ============================================================ */

/* --- entrada del hero: sí lleva texto, porque es el primer frame
       de la página y no hay riesgo de que quede oculto abajo --- */
@media (prefers-reduced-motion: no-preference){
  .hero .badge,
  .hero h1,
  .hero .lede,
  .hero .cta{animation:rise .7s var(--ease) both}
  .hero h1{animation-delay:.06s}
  .hero .lede{animation-delay:.12s}
  .hero .cta{animation-delay:.18s}
  .hero .mesh{animation:fade 1.1s var(--ease) .2s both}

  .phead .eyebrow,
  .phead h1,
  .phead p{animation:rise .55s var(--ease) both}
  .phead h1{animation-delay:.05s}
  .phead p{animation-delay:.1s}
}

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw-lead{
  from{transform:translateY(-4px) scaleX(0)}
  to{transform:translateY(-4px) scaleX(1)}
}
@keyframes marker-in{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:none}
}

/* --- al hacer scroll: solo estructura, y solo donde el navegador
       soporta timelines nativos. Sin JS, sin gating de contenido.
       Si no hay soporte: todo se ve, sin animación. --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* la regla de cada entrada se dibuja de izquierda a derecha */
    .card::before,
    .chan::before{
      animation:draw-x .6s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 8% cover 20%;
    }

    /* la línea de puntos de la bitácora se extiende hasta el valor */
    .ledger .row .lead{
      animation:draw-lead .7s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 12% cover 26%;
    }

    /* el número del paso entra desde el margen — el texto ya está ahí */
    ol.steps > li::before{
      animation:marker-in .5s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 10% cover 24%;
    }
  }
}

/* --- FAQ: apertura suave donde el navegador lo permite.
       Degrada a apertura instantánea, que es perfectamente válida. --- */
@media (prefers-reduced-motion: no-preference){
  details.faq::details-content{
    block-size:0;
    overflow:clip;
    opacity:0;
    transition:
      block-size .38s var(--ease),
      content-visibility .38s allow-discrete,
      opacity .3s var(--ease);
  }
  details.faq[open]::details-content{
    block-size:auto;
    opacity:1;
  }
}

/* --- micro-interacciones --- */
figure.shot img{transition:border-color .25s var(--ease), transform .35s var(--ease)}
figure.shot:hover img{border-color:var(--signal);transform:translateY(-2px)}

/* ============================================================
   CARTA MODELO — permiso de azotea
   ============================================================ */
.carta{
  border:1px solid var(--rule);
  border-top:3px solid var(--rule-strong);
  border-radius:4px;
  background:var(--paper);
  padding:clamp(24px,5vw,44px);
  margin:26px 0 0;
  max-width:var(--measure);
}
.carta .meta{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3);margin:0 0 22px}
.carta > p{margin:0 0 15px;color:var(--ink-2);line-height:1.65}
.carta h3{margin:24px 0 10px}
.carta ul{margin:0 0 15px;padding:0;list-style:none}
.carta ul li{position:relative;padding-left:22px;margin:0 0 11px;color:var(--ink-2);line-height:1.6}
.carta ul li::before{content:"—";position:absolute;left:0;color:var(--signal);font-weight:600}
.carta .sign{margin-top:26px}
.carta .sign p{margin:0 0 5px;color:var(--ink-2)}
.fill{
  font-family:var(--font-mono);font-size:.9em;
  background:var(--signal-tint);color:var(--signal-deep);
  padding:.06em .34em;border-radius:3px;
}

/* ============================================================
   REDUCED MOTION — no es opcional.
   Todo queda quieto y completamente visible.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .card::before,
  .chan::before,
  ol.steps > li::before{transform:none !important;opacity:1 !important}
  .ledger .row .lead{transform:translateY(-4px) !important;opacity:1 !important}
  .packet{display:none}
}

/* ============================================================
   IMPRESIÓN — es un manual de campo. Que se pueda imprimir.
   ============================================================ */
@media print{
  nav,footer,.cta,.skip,.noprint{display:none}
  body{font-size:11pt;color:#000}
  .box{break-inside:avoid;border-color:#000}
  a{background-image:none;color:#000}
  .carta{border:0;border-radius:0;padding:0;margin:0;max-width:none}
  .carta .fill{background:none;color:#000;padding:0}
  .carta ul li::before{color:#000}
}