/* ============================================================
   PLATAFORMA — "el ecosistema completo"

   Un banner que enseña el producto en vez de describirlo: chrome de
   ventana, barra lateral de módulos, métricas, gráfica y una línea de
   conversación con el asistente. Todo HTML/CSS: se adapta, se traduce
   y no pesa como una captura.

   Los números del panel son de demostración. No son datos de cliente
   y no deben presentarse como tales.
   ============================================================ */

.platform {
  --pf-plate: rgba(250, 251, 248, 0.05);
  --pf-hair: rgba(250, 251, 248, 0.13);
  --pf-ink: var(--tx-1);
  --pf-ink-2: var(--tx-2);
}

/* ---------- Marco ---------- */
.pf-banner {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 18px;
  border: 1px solid var(--pf-hair);
  background: linear-gradient(160deg, rgba(250, 251, 248, 0.07), rgba(250, 251, 248, 0.025));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.pf-chrome {
  display: flex;
  gap: 0.4375rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pf-hair);
}

.pf-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pf-hair);
}

.pf-chrome span:first-child { background: rgba(169, 220, 92, 0.55); }

.pf-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 320px;
}

/* ---------- Barra lateral ---------- */
.pf-nav {
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--pf-hair);
}

.pf-brand {
  font-family: var(--f-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pf-ink);
}

.pf-brand span {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--pf-ink-2);
}

.pf-nav ul {
  list-style: none;
  margin-top: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.pf-nav li {
  padding: 0.4375rem 0.625rem;
  border-radius: 8px;
  font-family: var(--f-ui);
  font-size: 0.75rem;
  color: var(--pf-ink-2);
}

.pf-nav li.is-active {
  background: rgba(156, 176, 1, 0.20);
  color: var(--pf-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--c-litoria-hi);
}

/* ---------- Panel ---------- */
.pf-main {
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
  align-content: start;
}

.pf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
}

.pf-stat {
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  border: 1px solid var(--pf-hair);
  background: var(--pf-plate);
}

.pf-stat-num {
  display: block;
  font-family: var(--f-ui);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pf-ink);
  font-variant-numeric: tabular-nums;
}

.pf-stat-label {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--pf-ink-2);
}

.pf-chart {
  padding: 0.875rem 1rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--pf-hair);
  background: var(--pf-plate);
}

.pf-chart-label {
  font-size: 0.6875rem;
  color: var(--pf-ink-2);
  margin-bottom: 0.75rem;
}

.pf-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  height: 88px;
}

.pf-bars span {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--c-litoria-hi), rgba(156, 176, 1, 0.35));
  animation: pf-grow 900ms var(--ease-out) both;
}

.pf-bars span:nth-child(n) { animation-delay: calc(var(--i, 0) * 40ms); }

@keyframes pf-grow {
  from { transform: scaleY(0.15); opacity: 0; transform-origin: bottom; }
  to { transform: scaleY(1); opacity: 1; transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-bars span { animation: none; }
}

/* ---------- Línea de asistente ---------- */
.pf-chat {
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--pf-hair);
  background: var(--pf-plate);
}

.pf-chat p {
  font-size: 0.75rem;
  line-height: 1.45;
}

.pf-chat-user {
  justify-self: end;
  max-width: 78%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px 12px 4px 12px;
  background: var(--grad-cta);
  color: #000200;
}

.pf-chat-bot {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 84%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px 12px 12px 4px;
  border: 1px solid var(--pf-hair);
  color: var(--pf-ink);
}

.pf-chat-bot .c-icon { width: 15px; height: 15px; margin-top: 1px; }

/* ---------- Módulos ---------- */
.pf-mods {
  list-style: none;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1rem;
}

.pf-mod {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--sf-hair);
  background: var(--sf-plate);
  transition: border-color 260ms ease, background-color 260ms ease, transform 260ms var(--ease-out);
}

.pf-mod:hover {
  border-color: var(--sf-hair-hi);
  background: var(--sf-plate-hi);
  transform: translateY(-3px);
}

.pf-mod > .c-icon { margin-top: 0.1875rem; }

.pf-mod h3 {
  font-family: var(--f-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tx-1);
}

.pf-mod p {
  margin-top: 0.3125rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--tx-2);
}

/* ---------- Cierre ---------- */
.pf-foot {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.pf-foot p {
  max-width: 52ch;
  color: var(--tx-2);
  font-size: 0.9375rem;
}

/* ---------- Adaptación ---------- */
@media (max-width: 899px) {
  .pf-body { grid-template-columns: 1fr; }
  .pf-nav { border-right: none; border-bottom: 1px solid var(--pf-hair); }
  .pf-nav ul { flex-direction: row; flex-wrap: wrap; }
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 559px) {
  .pf-bars { height: 64px; }
  .pf-bars span:nth-child(n + 9) { display: none; }
}

/* ============================================================
   MARKETING — el ciclo como anillo de fondo

   El diagrama deja de ser una figura en la columna derecha y pasa a
   ocupar el fondo completo de la sección. La copy y su orden no cambian:
   solo cambia la escala y la profundidad del elemento visual.

   El anillo es un cable: base apagada, textura segmentada encima, y un
   arco de luz que lo recorre encendiéndolo. Los cuatro nodos se
   encienden cuando la luz pasa por ellos — los retardos están
   calculados contra la posición real del arco, no a ojo.
   ============================================================ */

#marketing .marketing-grid,
#marketing .container.marketing-grid {
  position: relative;
  grid-template-columns: minmax(0, 620px);
  min-height: clamp(520px, 62vw, 720px);
  align-content: center;
}

#marketing .marketing-copy {
  position: relative;
  z-index: 2;
}

/* La figura se despega del grid y se va al fondo */
#marketing .diagram {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(132%, 1180px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  margin: 0;
}

#marketing .diagram-svg { width: 100%; }

/* ---------- El cable ---------- */
.mk-ring circle { fill: none; }

.mk-halo {
  stroke: rgba(156, 176, 1, 0.16);
  stroke-width: 16;
  filter: blur(9px);
}

.mk-base {
  stroke: rgba(169, 220, 92, 0.20);
  stroke-width: 2.5;
}

/* Segmentación: da la lectura de cable, no de línea plana */
.mk-texture {
  stroke: rgba(169, 220, 92, 0.30);
  stroke-width: 4;
  stroke-dasharray: 0.0055 0.0075;
  stroke-linecap: round;
}

/* Arco de luz: el ancho difuso va debajo, el filo encima */
.mk-trace-wide {
  stroke: rgba(169, 220, 92, 0.55);
  stroke-width: 13;
  stroke-dasharray: 0.18 0.82;
  stroke-linecap: round;
  filter: blur(7px);
  animation: mk-travel 9s linear infinite;
}

.mk-trace {
  stroke: var(--c-chartreuse);
  stroke-width: 3;
  stroke-dasharray: 0.18 0.82;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(220, 220, 98, 0.9));
  animation: mk-travel 9s linear infinite;
}

/* Chispa en la cabeza del arco */
.mk-spark {
  fill: var(--c-chartreuse);
  filter: drop-shadow(0 0 10px rgba(220, 220, 98, 0.95));
  transform-box: fill-box;
  transform-origin: 180px 180px;
  animation: mk-spark-orbit 9s linear infinite;
}

@keyframes mk-travel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1; }
}

/* La chispa arranca 0.18 de vuelta por delante: 0.18 × 360° = 64.8° */
@keyframes mk-spark-orbit {
  from { transform: rotate(64.8deg); }
  to { transform: rotate(424.8deg); }
}

/* ---------- Nodos: se encienden al paso de la luz ---------- */
#marketing .mk-node .d-ring,
#marketing .mk-node .d-dot {
  animation: mk-node-lit 9s linear infinite;
  animation-delay: calc((var(--f, 0) - 0.18) * 9s - 9s);
}

@keyframes mk-node-lit {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(220, 220, 98, 0.95)); }
  9%, 91%  { filter: drop-shadow(0 0 0 rgba(220, 220, 98, 0)); }
}

#marketing .mk-node .d-dot { fill: var(--c-litoria-hi); }

#marketing .mk-node text {
  font-size: 15px;
  letter-spacing: 0.1em;
}

/* ---------- "repeat": el halo blanco que quedaba ---------- */
.d-center {
  fill: var(--c-litoria-hi);
  stroke: var(--sf-band-a);
  stroke-width: 5;
  font-size: 30px;
}

/* ---------- Flechas del ciclo ---------- */
#marketing .d-arrow { stroke: var(--c-litoria-hi); stroke-width: 2.5; }

/* ---------- Modo claro: cable de tinta, no de neón ---------- */

/* ---------- Quietud y pantallas pequeñas ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-trace, .mk-trace-wide, .mk-spark,
  #marketing .mk-node .d-ring,
  #marketing .mk-node .d-dot { animation: none; }
  .mk-trace, .mk-trace-wide { stroke-dasharray: none; }
}

@media (max-width: 899px) {
  #marketing .marketing-grid,
  #marketing .container.marketing-grid { min-height: 0; }
  #marketing .diagram {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: 2.5rem;
  }
}

/* ============================================================
   GROWTH — embudo de cristal con piel de rana

   Cambia la dirección del componente: la copy pasa a la derecha y el
   embudo entra desde la izquierda, saliéndose del container. Es la
   imagen espejo de Marketing, para que las dos secciones de ciclo no
   se lean iguales al bajar.

   El anillo deja de ser una línea: ahora es una banda con relleno de
   cristal, textura orgánica generada con feTurbulence (mota irregular,
   no un patrón repetido) y dos filos de luz. Encima corre un pulso
   rápido que va encendiendo los nodos uno tras otro.

   Las fracciones de los nodos están calculadas sobre la longitud de
   arco real de la elipse, no repartidas por igual: rx=280 y ry=170
   comprimen el arco en los extremos, así que un reparto uniforme
   desincronizaría el pulso.
   ============================================================ */

#growth .growth-inner,
#ciclo .growth-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px);
  justify-content: end;
  min-height: clamp(540px, 60vw, 760px);
  align-content: center;
}

#growth .section-head,
#ciclo .section-head {
  position: relative;
  z-index: 2;
  max-width: 560px;
  text-align: right;
  margin-left: auto;
}

#growth .section-head .section-sub,
#ciclo .section-head .section-sub { margin-left: auto; }

/* El embudo entra desde la izquierda y se sale del container */
#growth .diagram,
#ciclo .diagram {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: min(105%, 1080px);
  max-width: none;
  margin: 0;
  transform: translate(-16%, -50%);
  pointer-events: none;
}

/* ---------- Cuerpo del embudo ---------- */
.gr-glass { fill: url(#glassband); }

.gr-skin {
  fill: rgba(169, 220, 92, 0.16);
  opacity: 0.85;
}

.gr-rim { fill: none; stroke-width: 1.25; }
.gr-rim-out { stroke: rgba(169, 220, 92, 0.42); }
.gr-rim-in { stroke: rgba(169, 220, 92, 0.30); }

.gr-halo {
  fill: none;
  stroke: rgba(156, 176, 1, 0.20);
  stroke-width: 20;
  filter: blur(12px);
}

/* ---------- Pulso rápido ---------- */
.gr-trace-wide,
.gr-trace {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 0.085 0.915;
  animation: gr-run 3.6s linear infinite;
}

.gr-trace-wide {
  stroke: rgba(169, 220, 92, 0.65);
  stroke-width: 22;
  filter: blur(10px);
}

.gr-trace {
  stroke: var(--c-chartreuse);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 8px rgba(220, 220, 98, 0.95));
}

@keyframes gr-run {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1; }
}

/* ---------- Nodos: se encienden al paso del pulso ----------
   El pulso mide 0.085; su cabeza va en t/3.6 + 0.085. */
#growth .gr-node .d-ring,
#growth .gr-node .d-dot,
#ciclo .gr-node .d-ring,
#ciclo .gr-node .d-dot {
  animation: gr-node-lit 3.6s linear infinite;
  animation-delay: calc((var(--f, 0) - 0.085) * 3.6s - 3.6s);
}

@keyframes gr-node-lit {
  0%, 100% {
    filter: drop-shadow(0 0 16px rgba(220, 220, 98, 1));
    transform: scale(1.22);
  }
  7%, 93% {
    filter: drop-shadow(0 0 0 rgba(220, 220, 98, 0));
    transform: scale(1);
  }
}

#growth .gr-node .d-ring,
#growth .gr-node .d-dot,
#ciclo .gr-node .d-ring,
#ciclo .gr-node .d-dot {
  transform-box: fill-box;
  transform-origin: center;
}

#growth .gr-node .d-dot,
#ciclo .gr-node .d-dot { fill: var(--c-litoria-hi); }

#growth .d-arrow, #ciclo .d-arrow { stroke: var(--c-litoria-hi); stroke-width: 2.5; }

/* ---------- Modo claro ---------- */

/* ---------- Quietud y pantallas pequeñas ---------- */
@media (prefers-reduced-motion: reduce) {
  .gr-trace, .gr-trace-wide,
  #growth .gr-node .d-ring, #growth .gr-node .d-dot,
  #ciclo .gr-node .d-ring, #ciclo .gr-node .d-dot { animation: none; }
  .gr-trace, .gr-trace-wide { stroke-dasharray: none; opacity: 0.5; }
}

@media (max-width: 899px) {
  #growth .growth-inner, #ciclo .growth-inner {
    grid-template-columns: 1fr;
    justify-content: stretch;
    min-height: 0;
  }
  #growth .section-head, #ciclo .section-head { text-align: left; margin-left: 0; }
  #growth .diagram, #ciclo .diagram {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
    margin-top: 2.5rem;
  }
}

/* ============================================================
   PROOF — rótulo luminoso

   La cita se convierte en un letrero de neón: apagado hasta que entra
   en pantalla, y entonces enciende línea por línea con el parpadeo de
   un tubo real arrancando.

   Sobre el estado apagado: un neón de verdad, sin corriente, es casi
   invisible. Aquí no puede serlo — el texto tiene que leerse igual.
   #929a84 es el gris más apagado que todavía da 4.74:1 sobre la banda,
   así que se lee como vidrio sin encender sin dejar de cumplir AA.
   ============================================================ */

.sign {
  --sign-off: #929a84;
  --sign-on: #fafbf8;
  text-align: center;
  margin-inline: auto;
  max-width: 22ch;
}

.sign p {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.125rem, 1rem + 5.4vw, 5.75rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.sign-line {
  display: block;
  color: var(--sign-off);
  text-shadow: none;
  transition: color 420ms ease, text-shadow 420ms ease;
}

/* Encendido: núcleo casi blanco, tres halos de bloom en verde.
   El bloom vive en text-shadow, no en filter: no cuesta repintado. */
.sign.is-lit .sign-line {
  color: var(--sign-on);
  text-shadow:
    0 0 6px rgba(250, 251, 248, 0.55),
    0 0 18px rgba(220, 220, 98, 0.85),
    0 0 42px rgba(169, 220, 92, 0.75),
    0 0 88px rgba(156, 176, 1, 0.55);
}

/* Arranque con parpadeo, escalonado por línea */
html.js .sign.is-lit .sign-line {
  animation: sign-strike 1100ms steps(1, end) both;
  animation-delay: calc(var(--l, 0) * 260ms);
}

/* (el arranque del neón se define más abajo, con tiempos irregulares) */


/* Zumbido leve del tubo, ya encendido */
html.js .sign.is-lit .sign-line::after { content: none; }

/* El zumbido regular se sustituye por un parpadeo irregular (ver abajo) */

/* Bajo el rótulo */
.sign-sub {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
  color: var(--tx-2);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
}

/* Sin JS el rótulo nace encendido: nadie debe quedarse con el texto apagado */
html:not(.js) .sign .sign-line {
  color: var(--sign-on);
  text-shadow:
    0 0 6px rgba(250, 251, 248, 0.55),
    0 0 18px rgba(220, 220, 98, 0.85),
    0 0 42px rgba(169, 220, 92, 0.75);
}

/* Modo claro: no hay neón sobre papel. El rótulo se comporta como tinta
   que gana peso y color al entrar, sin halo. */

@media (prefers-reduced-motion: reduce) {
  html.js .sign.is-lit .sign-line { animation: none; }
  .sign.is-lit { animation: none; }
}

/* ============================================================
   PORTFOLIO — tres filas a ancho completo

   Cada caso ocupa su propia banda y alterna el lado de la imagen, así
   el ojo hace zigzag al bajar en vez de comparar tres miniaturas. Se
   gana espacio para el índice, la disciplina, el resumen y las piezas
   entregadas — información que en formato tarjeta no cabía.
   ============================================================ */

.work-rows {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1rem, 1.6vw, 1.5rem);
  border-radius: 24px;
  border: 1px solid var(--sf-hair);
  background: var(--sf-plate);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 320ms ease, background-color 320ms ease, transform 320ms var(--ease-out);
}

/* Zigzag: la imagen cambia de lado en la fila del medio */
.work-row:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.work-row:nth-child(even) .work-visual { order: 2; }
.work-row:nth-child(even) .work-body { order: 1; }

.work-row:hover {
  transform: translateY(-3px);
  border-color: var(--sf-hair-hi);
  background: var(--sf-plate-hi);
}

.work-row:focus-visible {
  outline: 2px solid var(--c-litoria-hi);
  outline-offset: 3px;
}

/* ---------- Imagen ---------- */
.work-row .work-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: clamp(240px, 26vw, 380px);
  background: var(--sf-band-b);
}

.work-row .work-visual > img,
.work-row .work-visual > .mock-espiritus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.work-row:hover .work-visual > img { transform: scale(1.045); }

/* Filo de luz que recorre el borde al pasar el cursor */
.work-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    inset 0 0 0 1px rgba(169, 220, 92, 0.75),
    inset 0 0 32px rgba(156, 176, 1, 0.32);
  transition: opacity 320ms ease;
}

.work-row:hover .work-rim { opacity: 1; }

/* ---------- Contenido ---------- */
.work-row .work-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.5rem, 1.5vw, 1.75rem) clamp(0.5rem, 1.5vw, 1.25rem);
}

.work-index {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: 1;
  color: var(--c-litoria-hi);
  opacity: 0.34;
  margin-bottom: 0.5rem;
  transition: opacity 320ms ease;
}

.work-row:hover .work-index { opacity: 0.85; }

.work-row .cat {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tx-2);
}

.work-row h3 {
  margin-top: 0.5rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  color: var(--tx-1);
}

.work-row .work-blurb {
  margin-top: 0.75rem;
  max-width: 46ch;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  color: var(--tx-2);
}

/* Piezas entregadas: el detalle que la tarjeta no dejaba contar */
.work-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1.125rem;
}

.work-tags li {
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--sf-hair);
  font-family: var(--f-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--tx-2);
}

.work-row .work-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.375rem;
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-litoria-hi);
}

.work-row .work-link span {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.work-row:hover .work-link span { transform: translateX(5px); }

/* ---------- Adaptación ---------- */
@media (max-width: 899px) {
  .work-row,
  .work-row:nth-child(even) { grid-template-columns: 1fr; }
  .work-row:nth-child(even) .work-visual { order: 0; }
  .work-row:nth-child(even) .work-body { order: 0; }
  .work-row .work-visual { min-height: clamp(200px, 52vw, 300px); }
}

/* ---------- Los Espíritus: el mockup se adapta al panel grande ----------
   Las botellas estaban en px fijos, calibradas para la tarjeta de 190px
   de alto. En una fila de hasta 380px quedaban diminutas. Ahora escalan
   con el contenedor. Sigue siendo un placeholder: falta la foto real
   del packaging. */
.work-row .mock-espiritus {
  gap: clamp(14px, 2.2cqw, 26px);
  padding-bottom: clamp(26px, 9%, 54px);
  container-type: inline-size;
}

.work-row .esp-bottle {
  width: clamp(40px, 11%, 72px);
  border-radius: 7px 7px 16px 16px;
}

.work-row .esp-bottle::before {
  top: -22px;
  width: clamp(13px, 32%, 22px);
  height: 24px;
}

.work-row .esp-bottle.b1 { height: 46%; }
.work-row .esp-bottle.b2 { height: 58%; }
.work-row .esp-bottle.b3 { height: 41%; }

/* ============================================================
   FAQ — panel filtrable por tema

   El padding roto venía de mí: al convertir .faq-item en tarjeta de
   cristal, el <summary> conservó `padding: 1.125rem 0` del diseño
   anterior, que era una fila con borde inferior y sin caja. Sin margen
   lateral, el texto quedaba pegado al filo.
   ============================================================ */

.faq-item {
  border-radius: 16px;
  overflow: hidden;
}

/* El borde de la maqueta antigua ya no aplica: ahora es tarjeta */
.faq-item,
.faq-item:first-child { border-top: 1px solid var(--sf-hair); }

.faq-item summary {
  padding: 1.125rem clamp(1.125rem, 2vw, 1.625rem);
  line-height: 1.4;
}

.faq-item p {
  padding: 0 clamp(1.125rem, 2vw, 1.625rem) 1.25rem;
  max-width: 62ch;
  line-height: 1.6;
}

.faq-item summary::after { color: var(--c-litoria-hi); }

.faq-item[open] {
  border-color: var(--sf-hair-hi);
  background: var(--sf-plate-hi);
}

.faq-list {
  display: grid;
  gap: 0.625rem;
}

/* ---------- Filtros ---------- */
.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.9375rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--sf-hair);
  background: var(--sf-plate);
  color: var(--tx-2);
  font-family: var(--f-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease,
              color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.faq-chip:hover {
  border-color: var(--sf-hair-hi);
  color: var(--tx-1);
  transform: translateY(-1px);
}

.faq-chip:focus-visible { outline: 2px solid var(--c-litoria-hi); outline-offset: 2px; }

/* Activo: verde de marca con texto ink — 8.5:1, regla intacta */
.faq-chip.is-on {
  background: var(--grad-cta);
  border-color: transparent;
  color: #000200;
  box-shadow: var(--glow-cta);
}

.faq-count {
  min-width: 1.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-pill);
  background: rgba(250, 251, 248, 0.10);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.faq-chip.is-on .faq-count { background: rgba(0, 2, 0, 0.16); }

/* Ocultas por filtro: fuera del flujo y fuera del foco de teclado */
.faq-item[hidden] { display: none; }

@media (max-width: 899px) {
  .faq-filters { margin-bottom: 1rem; }
}



/* ============================================================
   HEADER Y LOGO — correcciones #1 a #8

   El solape venía de dos cosas a la vez: el gap entre logo y wordmark
   era de 12px, y la caja del SVG lleva aire propio dentro del viewBox
   (la pata no toca el borde, pero la caja sí). El texto quedaba dentro
   de esa holgura invisible. Se corrige subiendo el gap y ajustando el
   tamaño, no moviendo el logo de sitio.
   ============================================================ */

/* #4 — el header baja para no pegarse al borde del viewport */
.site-header { padding-top: 1.25rem; }

/* #2 — desborda 7px por arriba y por abajo (78 = 64 + 7 + 7) */
.nav-logo {
  width: 78px;
  height: 78px;
  flex: none;
  display: block;
  margin: -7px 0;
  overflow: visible;
  filter: drop-shadow(0 4px 16px rgba(156, 176, 1, 0.42));
}

/* #1 — separación real entre marca y wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.site-header .nav,
.site-header { overflow: visible; }

/* #3 — se mantiene el destello; fuera la elevación y el giro */
.bj-glint {
  opacity: 0;
  transform: translateX(-60%);
  transition: opacity 200ms ease;
}

.wordmark:hover .bj-glint {
  opacity: 1;
  animation: bj-sweep 900ms var(--ease-out);
}

@keyframes bj-sweep {
  from { transform: translateX(-70%); }
  to { transform: translateX(70%); }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark:hover .bj-glint { animation: none; opacity: 0; }
}

/* ---------- #5, #6, #7 — tablet ----------
   Por debajo de 1024px el menú pasa al burger. La píldora deja de
   ocupar todo el ancho: 50px de margen a cada lado como mínimo. */
@media (max-width: 1023px) {
  .site-header .nav {
    width: calc(100% - 100px);
    margin-inline: auto;
    padding-right: 0.5rem;
  }
  .nav-links { display: none; }
  .nav-toggle { display: flex; margin-left: 0.5rem; }
  .nav-right { gap: 0.5rem; }
}

@media (max-width: 719px) {
  .site-header { padding-top: 0.875rem; }
  .site-header .nav { width: calc(100% - 2rem); }
  .nav-logo { width: 66px; height: 66px; margin: -1px 0; }
  .wordmark { gap: 0.75rem; }
}

/* Footer */
.footer-logo { width: 56px; height: 56px; display: block; }

/* ---------- #8 — idioma en el dock ---------- */
.dock-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.375rem;
  font-family: var(--f-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.dock-lang a {
  padding: 0.25rem 0.1875rem;
  color: var(--tx-2);
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--dur-fast) ease;
}

.dock-lang a:hover { color: var(--tx-1); }
.dock-lang a[aria-current="true"] { color: var(--c-litoria-hi); }
.dock-lang a:focus-visible { outline: 2px solid var(--c-litoria-hi); outline-offset: 1px; }
.dock-lang span { color: var(--dock-track); }

@media (max-width: 479px) {
  .dock-lang { display: none; }
}

/* ============================================================
   #10 · Tornado: la tarjeta encendida se vuelve opaca

   Estaba en rgba(16,19,2,0.80). Ese 20% de transparencia era por donde
   se colaban las citas de las tarjetas de detrás. Ahora es opaca, con
   textura propia de ruido fino para que se lea como material.

   Efecto secundario aprovechado: con la placa opaca el fondo bajo el
   texto es más oscuro, así que el láser sube de 0.294/0.196 a
   0.382/0.255 — un 30% más brillante — y la cita sigue en 5.01:1.
   ============================================================ */
.tornado-card.is-lit {
  background-color: #101302;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(169, 220, 92, 0.055) 0 1px, transparent 1px),
    radial-gradient(circle at 62% 48%, rgba(169, 220, 92, 0.045) 0 1px, transparent 1px),
    radial-gradient(circle at 38% 78%, rgba(220, 220, 98, 0.04) 0 1px, transparent 1px),
    radial-gradient(circle at 84% 86%, rgba(169, 220, 92, 0.05) 0 1px, transparent 1px);
  background-size: 23px 19px, 31px 27px, 17px 23px, 29px 21px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tornado-card.is-lit::before {
  background:
    radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
      rgba(220, 220, 98, 0.382) 0%,
      rgba(156, 176, 1, 0.255) 30%,
      rgba(156, 176, 1, 0) 62%);
}

/* (en claro la tarjeta encendida NO se aclara: ver el bloque de abajo) */

/* ============================================================
   #16 · El rótulo dejaba de ser rótulo

   La causa era `max-width: 22ch`: la línea más larga tiene 24 caracteres,
   así que no cabía, se partía, y cada trozo volvía a partirse. Salía una
   columna. Ahora el ancho lo marca la línea más larga sin partirse, y el
   tamaño se calcula para que quepa.
   ============================================================ */
.sign {
  max-width: min(100%, 1040px);
  width: 100%;
}

.sign p { font-size: clamp(1.75rem, 0.6rem + 4.4vw, 4.75rem); }

.sign-line { white-space: nowrap; }

/* En pantallas estrechas forzar la línea entera la dejaría diminuta:
   ahí se permite que fluya. */
@media (max-width: 599px) {
  .sign-line { white-space: normal; }
  .sign p { font-size: clamp(1.5rem, 1rem + 5vw, 2.25rem); }
}

/* #15 — reencendido sin parpadeo: solo la primera vez tartamudea */
html.js .sign.is-lit.no-strike .sign-line { animation: none; }

/* ============================================================
   #12 · Dashboard con pestañas
   ============================================================ */
.pf-tabs { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 1.125rem; }

.pf-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--pf-ink-2);
  font-family: var(--f-ui);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.pf-tab .c-icon { width: 15px; height: 15px; filter: none; }
.pf-tab:hover { background: rgba(156, 176, 1, 0.10); color: var(--pf-ink); }
.pf-tab:focus-visible { outline: 2px solid var(--c-litoria-hi); outline-offset: -2px; }

.pf-tab.is-on {
  background: rgba(156, 176, 1, 0.20);
  color: var(--pf-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--c-litoria-hi);
}

.pf-panel { display: grid; gap: 1rem; align-content: start; }
.pf-panel[hidden] { display: none; }
.pf-panel:focus-visible { outline: 2px solid var(--c-litoria-hi); outline-offset: 4px; }

.pf-panel-foot { font-size: 0.6875rem; color: var(--pf-ink-2); }

/* Filas de datos */
.pf-rows, .pf-board {
  padding: 0.875rem 1rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--pf-hair);
  background: var(--pf-plate);
}

.pf-rows ul { list-style: none; display: grid; gap: 0.4375rem; }

.pf-rows li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--pf-hair);
  font-size: 0.75rem;
}
.pf-rows li:last-child { border-bottom: none; }
.pf-rows li span:first-child { color: var(--pf-ink); }
.pf-rows li span:last-child { color: var(--pf-ink-2); white-space: nowrap; }

/* Tablero */
.pf-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }

.pf-col {
  padding: 0.625rem 0.6875rem;
  border-radius: 10px;
  border: 1px solid var(--pf-hair);
  background: var(--pf-plate);
}
.pf-col p { font-size: 0.6875rem; font-weight: 700; color: var(--pf-ink); margin-bottom: 0.25rem; }
.pf-col span { font-size: 0.6875rem; line-height: 1.45; color: var(--pf-ink-2); }

@media (max-width: 899px) {
  .pf-tabs { flex-direction: row; flex-wrap: wrap; }
  .pf-tab { width: auto; }
  .pf-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   #14 · Glosario en lista

   El marcado sigue siendo <dl>/<dt>/<dd>: solo cambia la presentación.
   En tarjetas, catorce términos ocupaban cinco pantallas; en filas se
   escanean de un vistazo, que es lo que un glosario necesita.
   ============================================================ */
.glossary-grid {
  display: block;
  border-top: 1px solid var(--sf-hair);
}

.glossary-card,
.glossary-card--wide {
  display: grid;
  grid-template-columns: 26px minmax(140px, 200px) 1fr;
  align-items: baseline;
  gap: 0 1.25rem;
  padding: 0.9375rem 0.5rem;
  border: none;
  border-bottom: 1px solid var(--sf-hair);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 220ms ease;
}

.glossary-card:hover {
  background: var(--sf-plate);
  border-color: var(--sf-hair-hi);
  box-shadow: none;
  transform: none;
}

.glossary-icon {
  margin: 0;
  width: 20px;
  height: 20px;
  align-self: center;
}

.glossary-card dt {
  font-family: var(--f-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-litoria-hi);
}

.glossary-card dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--tx-2);
}

@media (max-width: 719px) {
  .glossary-card,
  .glossary-card--wide {
    grid-template-columns: 20px 1fr;
    gap: 0.25rem 0.75rem;
  }
  .glossary-card dd { grid-column: 2; }
}

/* ============================================================
   #13 · Anillo de Marketing: mayor y desplazado a la derecha
   ============================================================ */
@media (min-width: 900px) {
  #marketing .diagram {
    left: auto;
    right: 0;
    width: min(150%, 1420px);
    transform: translate(18%, -50%);
  }
  /* La aurora de esta banda se va al lado contrario: si se acumula con
     el anillo, la zona se lava y DATA pierde contraste. */
  #marketing { --a1x: 18%; --a2x: 34%; --a3x: 12%; --a4x: 40%; }
}

/* ============================================================
   #17 · Las tarjetas FAQ ocupan el bloque entero
   ============================================================ */
.faq-inner {
  display: block;
}

.faq-head {
  max-width: 46ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.faq-filters { justify-content: flex-start; }
.faq-list { width: 100%; }

/* ============================================================
   #19 · Footer: logo y wordmark alineados

   Estaban apilados con márgenes sueltos, así que el eje óptico del
   hexágono no coincidía con el de la primera letra. Ahora comparten
   una fila con alineación de línea base y un solo origen.
   ============================================================ */
.footer-brand {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.footer-logo-card {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
}

.footer-brand .wordmark-footer {
  margin: 0;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.16em;
  line-height: 1;
}

.footer-brand .footer-tagline { margin: 0; }

/* El wordmark entra dentro del bloque del logo, en la misma línea */
/* (el wordmark ya vive dentro de .footer-logo-card) */

/* ============================================================
   Header · centrado y márgenes (ronda de revisión)

   El logo sí estaba centrado: medí el trazado y la forma cae exacta en
   el centro de su viewBox (holgura 55px arriba y 54 abajo sobre 1668).
   El desajuste venía de otras dos cosas:

   1. La sombra iba con desplazamiento vertical (0 4px), y el ojo lee el
      halo como parte de la pieza: parecía subida.
   2. El wordmark heredaba line-height 1.6 del body. Su caja de línea
      incluye el hueco de los descendentes, y como el texto va en
      versalitas —sin descendentes reales— la masa visual quedaba
      desplazada respecto al centro de esa caja.
   ============================================================ */
.nav-logo { filter: drop-shadow(0 0 16px rgba(156, 176, 1, 0.42)); }

.wordmark {
  align-items: center;
  line-height: 1;
}

.site-header .nav-brand-text,
.wordmark > span,
.wordmark-footer {
  line-height: 1;
  display: inline-block;
}

/* Más aire respecto al borde del navegador */
.site-header .nav {
  width: min(var(--container), 100% - clamp(2.5rem, 5vw, 5rem));
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .site-header .nav { width: calc(100% - 100px); }
}

@media (max-width: 719px) {
  .site-header .nav { width: calc(100% - 2.5rem); }
}

/* ============================================================
   La barra es el ancla del centrado

   Hasta ahora el centrado dependía de una cadena: el logo con margen
   negativo dentro de .wordmark, .wordmark dentro de .nav. Cualquier
   cosa que alterara la altura de un eslabón intermedio —la caja de
   línea del texto, un padding heredado— movía el logo.

   Ahora cada pieza se ancla por sí misma al centro de la barra con
   align-self, sin depender del contenedor intermedio.
   ============================================================ */
.site-header .nav > * { align-self: center; }

.wordmark {
  align-self: center;
  align-items: center;
  line-height: 1;
}

.nav-logo {
  align-self: center;
  margin-block: -7px;
  margin-inline: 0;
}

.site-header .nav-brand-text { align-self: center; }

/* Mismo criterio en las páginas de caso */

/* ============================================================
   El rótulo como neón real: arranque con defectos y apagado suave

   Un tubo de neón no enciende: lo intenta. El gas tarda en ionizarse,
   el arranque falla una o dos veces, hay un momento a media luz antes
   de estabilizarse, y ningún tubo del rótulo arranca a la vez.

   Por eso los tiempos de sign-strike son deliberadamente IRREGULARES:
   una pauta uniforme se lee como animación, no como electricidad.
   ============================================================ */
@keyframes sign-strike {
  0%, 6%     { color: var(--sign-off); text-shadow: none; }
  /* primer intento: chispazo corto que no prende */
  7%, 9%     { color: var(--sign-on);
               text-shadow: 0 0 7px rgba(250,251,248,.5), 0 0 20px rgba(220,220,98,.7); }
  10%, 19%   { color: var(--sign-off); text-shadow: none; }
  /* segundo intento: aguanta un poco más y cae */
  20%, 26%   { color: var(--sign-on);
               text-shadow: 0 0 8px rgba(250,251,248,.6), 0 0 26px rgba(220,220,98,.85); }
  27%, 31%   { color: var(--sign-off); text-shadow: none; }
  /* tartamudeo rápido: el gas ya está ionizándose */
  32%, 34%   { color: var(--sign-on);
               text-shadow: 0 0 8px rgba(250,251,248,.6), 0 0 26px rgba(220,220,98,.85); }
  35%, 37%   { color: var(--sign-off); text-shadow: none; }
  38%, 41%   { color: var(--sign-on);
               text-shadow: 0 0 8px rgba(250,251,248,.6), 0 0 26px rgba(220,220,98,.85); }
  42%, 46%   { color: var(--sign-off); text-shadow: none; }
  /* prende a media luz y sube: el tubo termina de cargar */
  47%, 62%   { color: var(--sign-on);
               text-shadow: 0 0 5px rgba(250,251,248,.4), 0 0 14px rgba(220,220,98,.5),
                            0 0 30px rgba(169,220,92,.4); }
  /* un último fallo cuando ya parecía estable */
  63%, 65%   { color: var(--sign-off); text-shadow: none; }
  66%, 100%  { color: var(--sign-on);
               text-shadow: 0 0 6px rgba(250,251,248,.55), 0 0 18px rgba(220,220,98,.85),
                            0 0 42px rgba(169,220,92,.75), 0 0 88px rgba(156,176,1,.55); }
}

html.js .sign.is-lit .sign-line {
  animation: sign-strike 1450ms steps(1, end) both;
  animation-delay: calc(var(--l, 0) * 190ms);
}

/* La línea del medio arranca peor que las otras: ningún rótulo real
   tiene todos los tubos en el mismo estado. */
html.js .sign.is-lit .sign-line:nth-child(2) {
  animation-duration: 1720ms;
  animation-delay: calc(var(--l, 0) * 190ms + 120ms);
}

/* Ya encendido, la corriente nunca es perfectamente estable */
html.js .sign.is-lit .sign-line {
  animation-name: sign-strike, sign-unstable;
  animation-duration: 1450ms, 7.3s;
  animation-timing-function: steps(1, end), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-delay: calc(var(--l, 0) * 190ms), calc(1600ms + var(--l, 0) * 900ms);
}

@keyframes sign-unstable {
  0%, 46%, 52%, 79%, 84%, 100% { opacity: 1; }
  48%, 50%   { opacity: 0.93; }
  81%        { opacity: 0.88; }
}

/* ---------- Apagado suave al salir de pantalla ----------
   Sin animación de por medio: solo el color y el halo bajando. */
.sign-line {
  transition: color 620ms cubic-bezier(0.4, 0, 0.6, 1),
              text-shadow 620ms cubic-bezier(0.4, 0, 0.6, 1);
}

.sign:not(.is-lit) .sign-line { animation: none; }

/* ---------- Bajada del rótulo ---------- */
.sign-sub {
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.4375rem);
  max-width: 52ch;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  html.js .sign.is-lit .sign-line { animation: none; }
}

/* ============================================================
   ECOSISTEMAS — el diagrama gana presencia

   La sección pasa a ser el complemento de la plataforma, así que el
   diagrama deja de ser una figura lateral pequeña y ocupa la mitad
   derecha entera, saliéndose del container por ese lado.
   ============================================================ */
@media (min-width: 900px) {
  #systems .systems-grid,
  #sistemas .systems-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }

  #systems .diagram,
  #sistemas .diagram {
    width: min(128%, 780px);
    max-width: none;
    margin-right: clamp(-4rem, -3vw, 0rem);
    justify-self: end;
  }
}

/* El núcleo pesa más: es el nombre del producto */
#systems .d-node--core text,
#sistemas .d-node--core text {
  font-size: 15px;
  letter-spacing: 0.14em;
}

#systems .d-node--core .d-ring,
#sistemas .d-node--core .d-ring {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 12px rgba(169, 220, 92, 0.7));
}

#systems .d-node text,
#sistemas .d-node text { font-size: 13px; }

/* Halo de fondo que sostiene el diagrama */
#systems .diagram::before,
#sistemas .diagram::before {
  content: "";
  position: absolute;
  inset: 6% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156, 176, 1, 0.16) 0%, rgba(156, 176, 1, 0) 68%);
  filter: blur(30px);
}

#systems .diagram,
#sistemas .diagram { position: relative; }

@media (max-width: 899px) {
  #systems .diagram,
  #sistemas .diagram { width: 100%; margin-right: 0; }
}

/* ============================================================
   CIERRE — el rótulo sustituye al formulario

   El formulario simple competía con la entrevista de discovery, que es
   la que llega con el contexto del proyecto ya redactado. Ahora el
   cierre es una sola puerta.

   La línea de contacto directo se queda por dos razones: es la salida
   para quien no quiere entrevistarse, y `discovery-form.js` lee de ahí
   el número de WhatsApp y el correo con querySelector — sin ella,
   caería a valores de respaldo.
   ============================================================ */
.closer {
  text-align: center;
  padding-block: clamp(5rem, 10vw, 9rem);
}

.closer-inner {
  display: grid;
  justify-items: center;
  gap: 0;
}

.closer-sign {
  max-width: min(100%, 1180px);
  width: 100%;
  margin: 0;
}

.closer-sign .sign-line {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 0.7rem + 6.4vw, 6.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.closer-note {
  max-width: 54ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--tx-2);
}

.closer-cta {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: 1rem;
  padding: 1rem 2rem;
}

.closer-cta svg { width: 17px; height: 17px; }

.closer-alt {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--tx-3);
}

.closer-alt a { color: var(--tx-2); }
.closer-alt a:hover { color: var(--tx-1); }

@media (max-width: 719px) {
  .closer-sign .sign-line { white-space: normal; font-size: clamp(1.75rem, 1rem + 6vw, 2.75rem); }
}

/* ============================================================
   Centrado del logo — corrección definitiva

   Medido sobre el render: el logo caía 7,5 px por encima del centro de
   la barra, y desbordaba 13,5 px arriba contra 1,5 abajo cuando debería
   ser simétrico.

   Causa: base.css lo declara `position: absolute; top: 50%` con
   `translateY(-50%)`, es decir, centrado respecto a .wordmark —cuya
   altura la marca la caja de línea del texto— y no respecto a la barra.
   Mis reglas de align-self no podían corregirlo: un elemento absoluto
   sale del flujo y align-self no lo alcanza.

   Se devuelve al flujo. Así el `align-items: center` de la píldora lo
   centra de verdad, y el margen negativo reparte el desborde por igual.
   ============================================================ */
.site-header .nav-logo {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  align-self: center;
  width: 78px;
  height: 78px;
  margin-block: -7px;
  margin-inline: 0;
  flex: none;
}

/* .wordmark deja de necesitar hueco reservado para un logo absoluto */
.site-header .wordmark {
  padding-left: 0;
  min-height: 0;
}

@media (max-width: 719px) {
  .site-header .nav-logo { width: 66px; height: 66px; margin-block: -1px; }
}

/* ============================================================
   Tornado: superficie nocturna en los dos modos

   Es el único bloque del sitio que no cambia con el tema. La razón es
   física: el láser verde que sigue al cursor solo se lee como láser
   sobre oscuro; sobre papel se convierte en una mancha lavada. En modo
   claro las tarjetas oscuras contrastan 13.99:1 contra la banda, así
   que además se separan mejor del fondo que antes.
   ============================================================ */

/* Encendida: idéntica al modo oscuro, incluida la textura y el láser */

/* El punto de luz y el filo NO se redefinen en claro: al no existir regla
   de tema, heredan la del modo oscuro tal cual, que es justo lo que se
   busca. Redefinirlos con `inherit` habría copiado el fondo de la tarjeta
   y tapado el láser. */