/* ═══════════════════════════════════════════════════════════════
   /seguridad — va SOBRE site.css y sections.css.
   Las capas las dibuja security.js en un <canvas> manejado por el
   scroll, igual que /llamadas: acá el escenario, el velo, los pilares,
   el cifrado que se escribe solo y las preguntas.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════ LAS CAPAS ═══════════════ */

.layers {
  position: relative;
  height: calc(var(--chapters, 6) * 100dvh);
}

.layers__stage {
  position: sticky; top: 0;
  height: 100dvh; width: 100%;
  overflow: hidden;
  background: var(--ink);
}

.layers__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* En escritorio el texto va a la izquierda y los anillos a la derecha
   (security.js los centra en el 63% del ancho): el velo sólo cubre la
   columna del texto. */
.layers__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(10,11,13,.9) 0%,
    rgba(10,11,13,.66) 26%,
    rgba(10,11,13,.1) 44%,
    rgba(10,11,13,0) 54%);
}

@media (max-width: 860px) {
  /* en vertical el texto va abajo y los anillos arriba */
  .layers__veil {
    background: linear-gradient(to top,
      rgba(10,11,13,.97) 0%,
      rgba(10,11,13,.86) 30%,
      rgba(10,11,13,.2) 46%,
      rgba(10,11,13,0) 56%);
  }
}

.layers__chapters {
  position: absolute; inset: 0; z-index: 4;
  width: 100%;
}

.layers .display { max-width: 13ch; }
.layers .lede { max-width: 32ch; }
.layers__title { font-size: clamp(2.25rem, 4.3vw, 4.25rem); max-width: 13ch; }

@media (max-width: 860px) {
  .layers .chapter { padding-bottom: max(5rem, env(safe-area-inset-bottom)); }
  .layers .display, .layers__title { font-size: clamp(1.875rem, 8.6vw, 2.75rem); }
  .layers .lede { margin-top: 1rem; }
}

/* ═══════════════ LOS PILARES ═══════════════ */

.pillars {
  position: relative; z-index: 5;
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 14vh, 9rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}
.pillars__head { margin-bottom: clamp(3rem, 8vh, 5rem); }
.pillars__head .display { max-width: 18ch; }

/* el pilar a la izquierda, fijo mientras se leen sus puntos */
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  padding: clamp(3rem, 8vh, 4.5rem) 0;
  border-top: 1px solid var(--line);
}

.pillar__side {
  position: sticky;
  top: 6.5rem;
  align-self: start;
}

.pillar__idx {
  margin: 0 0 1.5rem;
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--amber);
}

/* los iconos se dibujan solos al entrar: pathLength=1 en cada trazo */
.pillar__icon {
  display: block;
  width: 3.25rem; height: 3.25rem;
  fill: none;
  stroke: var(--paper); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.pillar__icon .hot { stroke: var(--amber-hot); filter: drop-shadow(0 0 .35rem rgba(240,149,74,.7)); }
html[data-motion] .pillar__icon > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
html[data-motion] .is-in .pillar__icon > * {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1) .2s;
}
html[data-motion] .is-in .pillar__icon > .hot { transition-delay: .9s; }

.pillar__h {
  margin: 1.5rem 0 0;
  max-width: 16ch;
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  font-weight: 600; line-height: 1.06; letter-spacing: -.03em;
  text-wrap: balance;
}
.pillar__lede {
  margin: .875rem 0 0; max-width: 30ch;
  font-size: 1rem; line-height: 1.55;
  color: var(--fog);
}

.pillar__list { margin: 0; }
.pillar__list > div {
  padding: 1.375rem 0 1.5rem;
  border-top: 1px solid var(--line);
}
.pillar__list > div:first-child { border-top: 0; padding-top: .25rem; }
.pillar__list dt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem .875rem;
  font-size: 1.1875rem; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.25;
  color: var(--paper);
}
/* el término técnico: chico, en mono, al lado de lo que significa */
.pillar__tech {
  font: 500 .6875rem/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-hot);
  padding: .3125rem .5rem;
  border: 1px solid rgba(240,149,74,.4);
  background: rgba(122,61,20,.16);
  white-space: nowrap;
}
.pillar__list dd {
  margin: .625rem 0 0; max-width: 54ch;
  font-size: 1rem; line-height: 1.6;
  color: var(--fog);
}

.pillar__link {
  color: var(--amber-hot);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(240,149,74,.45);
  transition: color .2s ease, border-color .2s ease;
}
.pillar__link:hover { color: var(--paper); border-color: var(--paper); }
.pillar__link:focus-visible { outline: 1px solid var(--amber-hot); outline-offset: 3px; }

/* ── El cifrado que se escribe solo (pilar 2) ── */

.cipher {
  margin-top: 2rem; max-width: 24rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(240,149,74,.06), transparent 60%),
    var(--ink-soft);
}
.cipher__k {
  margin: 0;
  display: flex; justify-content: space-between; gap: 1rem;
  font: 500 .625rem/1 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fog);
}
.cipher__state { display: inline-flex; align-items: center; gap: .5rem; color: var(--amber); }
.cipher__state::before {
  content: ""; width: .375rem; height: .375rem; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 .5rem currentColor;
}
.cipher__v {
  margin: .875rem 0 0;
  min-height: 2.9em;
  font: 500 .875rem/1.45 var(--font-mono);
  letter-spacing: .02em;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.cipher[data-state="locked"] .cipher__v { color: var(--amber-hot); }

/* ── Teléfono: el pilar arriba, sus puntos abajo, nada fijo ── */

@media (max-width: 860px) {
  .pillar { grid-template-columns: 1fr; }
  .pillar__side { position: static; }
  .pillar__icon { width: 2.75rem; height: 2.75rem; }
  .pillar__list > div:first-child { padding-top: 1.375rem; border-top: 1px solid var(--line); }
}

/* ═══════════════ PREGUNTAS ═══════════════ */

.faq {
  position: relative; z-index: 5;
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 14vh, 8rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.faq__head .display { max-width: 14ch; }

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25;
  color: var(--paper);
  transition: color .2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* el signo: una cruz que se vuelve raya al abrir */
.faq__item summary::after {
  content: "";
  flex: none; width: 1rem; height: 1rem;
  background:
    linear-gradient(var(--amber), var(--amber)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--amber), var(--amber)) center / 1.5px 100% no-repeat;
  transition: transform .3s ease, background-size .3s ease;
}
.faq__item[open] summary::after {
  transform: rotate(180deg);
  background-size: 100% 1.5px, 1.5px 0;
}
.faq__item summary:hover { color: var(--amber-hot); }
.faq__item summary:focus-visible { outline: 1px solid var(--amber-hot); outline-offset: 4px; }

.faq__item p {
  margin: 0; padding: 0 0 1.75rem;
  max-width: 56ch;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--fog);
}
.faq__item[open] p { animation: drop .45s cubic-bezier(.2,.7,.2,1); }
@keyframes drop { from { opacity: 0; translate: 0 -.5rem; } }

@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
}

/* ─────────────── Accesibilidad ─────────────── */

@media (prefers-reduced-motion: reduce) {
  /* igual que /llamadas: sin recorrido. Un cuadro fijo arriba (las cuatro
     capas encendidas) y los capítulos se leen enteros. */
  .layers { height: auto; }
  .layers__stage { position: relative; height: 60dvh; }
  .layers__chapters { position: relative; inset: auto; }
  .layers__veil { opacity: .35; }
  .faq__item[open] p { animation: none; }
}

/* las palabras largas («TLS+SRTP», «Firmados») bajan un punto: al tamaño
   de un número tocaban el borde de la celda */
.num__big--long { font-size: clamp(2.5rem, 4.2vw, 4rem); }

/* «TLS+SRTP»: el signo más baja de peso, como la ~ de los números */
.num__plus { color: var(--amber); font-weight: 400; margin-inline: .04em; }