/* =========================================================================
   Zavyniq — sistema visual «Cuadro de mando»
   Chasis de gris hueso, placas grabadas montadas con bisel, lámparas piloto.
   Dos temas: por defecto claro; el oscuro se activa con data-theme="dark".
   Las placas (verde grabado) no cambian entre temas: son la identidad. Lo que
   se invierte es el chasis —el panel de fondo— y el texto que va sobre él.
   ========================================================================= */

@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  --chasis:       #E6E3DA;
  --chasis-alto:  #F1EEE6;
  --chasis-hondo: #D4CFC2;
  --placa:        #2B3A32;
  --placa-alta:   #3A4B41;
  --placa-honda:  #18211C;
  --grabado:      #F2EFE6;
  --grabado-suave:#AEB9B1;
  --tinta:        #1C2420;
  --tinta-suave:  #4E5852;
  /* señal teal: alejada a conciencia del azul #1A9DD9 de Nanobytes (199°).
     Esta familia vive a 172°, territorio que ninguna referencia del sector ocupa.
     El cian #19C3D1 nunca fue marca: era el acento de la plantilla del .docx. */
  --senal-alta:   #5FE6D3;
  --senal:        #12C2AC;
  --senal-honda:  #0FA593;
  --senal-borde:  #0C897B;
  --senal-canto:  #0A6E63;
  --senal-texto:  #086054;
  --senal-tinta:  #05231F;
  /* el ámbar se desdobla por fondo: un solo tono no llega a AA en los dos.
     claro para leerse sobre placa, hondo para leerse sobre chasis. */
  --ambar:        #B85F17;
  --ambar-claro:  #E0A25C;
  --ambar-hondo:  #8A4210;
  --bisel:        #B4AF9F;
  --bisel-luz:    #FCFAF5;

  --grabar: "Barlow Condensed", "Arial Narrow", sans-serif;
  --prosa:  "Barlow", system-ui, sans-serif;

  --u: 0.5rem;
  --marco: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --ancho: 68rem;

  --sombra-placa: 0 1px 0 var(--bisel-luz), 0 2px 4px rgba(28, 36, 32, 0.14), 0 12px 28px rgba(28, 36, 32, 0.10);
  --sombra-hunde: inset 0 2px 5px rgba(24, 33, 28, 0.30), inset 0 -1px 0 var(--bisel-luz);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- tema oscuro: el panel bajo luz baja ---------------------------------
   Solo cambia el chasis (fondo) y lo que se apoya en él. Las placas verdes,
   su texto grabado y la señal teal se mantienen idénticos entre temas. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --chasis:       #101714;
  --chasis-alto:  #172019;
  --chasis-hondo: #0B100E;
  --tinta:        #E4EAE7;
  --tinta-suave:  #9AAAA3;
  --senal-texto:  #33D2BF;   /* teal legible sobre panel oscuro */
  --ambar-hondo:  #E0A25C;   /* el ámbar sobre chasis se aclara con el panel */
  --bisel:        #2E3A34;   /* divisor visible sobre oscuro */

  /* las placas necesitan sombra real para separarse del panel oscuro:
     su caída sobre chasis claro era casi invisible aquí. */
  --sombra-placa: 0 1px 0 rgba(255, 255, 255, 0.05), 0 3px 8px rgba(0, 0, 0, 0.45), 0 16px 34px rgba(0, 0, 0, 0.4);
  --sombra-hunde: inset 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--chasis);
  background-image:
    repeating-linear-gradient(0deg, rgba(28,36,32,0.014) 0 1px, transparent 1px 3px);
  color: var(--tinta);
  font-family: var(--prosa);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--grabar);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

a { color: var(--senal-texto); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--senal-texto);
  outline-offset: 3px;
  border-radius: 2px;
}

.limite { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--marco); }

.salta {
  position: absolute; left: -9999px; top: 0;
  background: var(--placa); color: var(--grabado);
  padding: 0.75rem 1.25rem; z-index: 50;
  font-family: var(--grabar); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; text-decoration: none;
}
.salta:focus { left: var(--marco); top: 0.5rem; }

/* --- rótulo grabado: la etiqueta funcional de una placa ------------------ */

.rotulo {
  font-family: var(--grabar);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tinta-suave);
}
.placa .rotulo { color: var(--grabado-suave); }

/* --- barra superior ------------------------------------------------------ */

.barra {
  border-bottom: 1px solid var(--bisel);
  background: linear-gradient(180deg, var(--chasis-alto), var(--chasis));
}
.barra > .limite {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4rem; flex-wrap: wrap;
}

.marca {
  font-family: var(--grabar);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  margin-right: auto;
}
.marca .punto { color: var(--senal-texto); }

.barra nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.barra nav a {
  font-family: var(--grabar); font-weight: 600; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tinta-suave); text-decoration: none;
}
.barra nav a:hover { color: var(--tinta); }

.idioma {
  font-family: var(--grabar); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid var(--bisel); border-radius: 2px;
  padding: 0.25rem 0.6rem; color: var(--tinta-suave); text-decoration: none;
  background: var(--chasis-alto);
}
.idioma:hover { color: var(--tinta); border-color: var(--tinta-suave); }

/* conmutador de tema: muestra la luna en claro (pulsar → oscuro) y el sol en
   oscuro (pulsar → claro). Sin JS el botón no aparece: no haría nada. */
.tema {
  display: none;
  align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  padding: 0; border: 1px solid var(--bisel); border-radius: 2px;
  background: var(--chasis-alto); color: var(--tinta-suave);
  cursor: pointer;
  transition: color 0.15s var(--curva), border-color 0.15s var(--curva);
}
.js .tema { display: inline-flex; }
.tema:hover { color: var(--tinta); border-color: var(--tinta-suave); }
.tema svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema .tema-sol { display: none; }
:root[data-theme="dark"] .tema .tema-luna { display: none; }
:root[data-theme="dark"] .tema .tema-sol  { display: block; }

/* --- placas -------------------------------------------------------------- */

.seccion { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.placa {
  background: linear-gradient(180deg, var(--placa-alta), var(--placa));
  color: var(--grabado);
  border-radius: 3px;
  box-shadow: var(--sombra-placa);
  position: relative;
}

.placa h1, .placa h2, .placa h3 { color: var(--grabado); }

/* el rebaje: la placa se asienta grabada en su fresado. Material real del
   mundo — una línea hundida — en vez de tornillos de metal fingido. */
.placa::before {
  content: "";
  position: absolute; inset: 7px;
  border-radius: 2px;
  border: 1px solid rgba(24, 33, 28, 0.38);
  box-shadow: inset 0 1px 0 rgba(242, 239, 230, 0.07);
  pointer-events: none;
}

/* --- primer viewport ----------------------------------------------------- */

.cabecera { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

.principal { padding: clamp(2rem, 1.2rem + 3.5vw, 4rem) clamp(1.5rem, 1rem + 3vw, 3.5rem); }

/* 34ch: cada síntoma cabe en una línea en escritorio, que es lo que le da
   ritmo de tres golpes; en móvil rompe solo y sigue funcionando. */
.sintoma {
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.6rem);
  letter-spacing: -0.025em;
  max-width: 34ch;
}
.sintoma span { display: block; color: var(--grabado-suave); }
.sintoma span:last-child { color: var(--grabado); }

.remate {
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
  color: var(--grabado);
  max-width: 46ch;
  margin-top: 1.5rem;
  line-height: 1.5;
}
.remate b { font-weight: 600; }

/* --- esquema de instrumentos --------------------------------------------- */

.hero-cols {
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.25rem);
  align-items: center;
}
.hero-texto { min-width: 0; }

.hero-grafico { margin: 0; min-width: 0; width: 100%; max-width: 26rem; justify-self: end; }
.esquema { width: 100%; height: auto; display: block; overflow: visible; }

/* remate del esquema: «todo fluye» va en teal porque el flujo es señal viva */
.eq-lema {
  margin-top: 1.25rem; text-align: center;
  font-family: var(--grabar); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: 0.03em;
  color: var(--grabado);
}
.eq-flujo { color: var(--senal); }

/* placas de instrumento: caras con degradado y relieve real (sombra), como el
   resto de placas del sitio — dejan de ser rectángulos planos. */
.eq-tile { fill: url(#eqTile); stroke: rgba(174, 185, 177, 0.14); stroke-width: 1; filter: url(#eqLift); }
.eq-icon { fill: none; stroke: var(--grabado); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eq-live { fill: var(--senal); stroke: none; filter: url(#eqGlow); }
.eq-dot  { fill: var(--grabado); stroke: none; }
.eq-label { fill: var(--grabado); font-family: var(--grabar); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.eq-tag   { fill: var(--grabado-suave); font-family: var(--grabar); font-weight: 600; font-size: 12.5px; letter-spacing: 0.12em; }

/* cableado de señal hacia el núcleo: degradado y brillo = señal viva */
.eq-cable { fill: none; stroke: url(#eqCable); stroke-width: 2.4; stroke-linecap: round; filter: url(#eqGlow); }
.eq-node  { fill: var(--senal); }
.eq-lamp  { fill: var(--senal); filter: url(#eqGlow); }
.eq-lamp--ambar { fill: var(--ambar-claro); filter: url(#eqGlow); }
.eq-halo  { fill: var(--senal); opacity: 0.16; }
.eq-halo--ambar { fill: var(--ambar-claro); opacity: 0.16; }

/* núcleo Zavyniq: disco abombado (degradado radial) con relieve y anillo vivo */
.eq-hub-disc { fill: url(#eqHub); stroke: rgba(174, 185, 177, 0.22); stroke-width: 1; filter: url(#eqLift); }
.eq-hub-ring { fill: none; stroke: var(--senal); stroke-width: 1.5; filter: url(#eqGlow); }
.eq-hub-name { fill: var(--grabado); font-family: var(--grabar); font-weight: 700; font-size: 18px; letter-spacing: 0.12em; text-anchor: middle; }
.eq-hub-dot  { fill: var(--senal); }
.eq-hub-sub  { fill: var(--grabado-suave); font-family: var(--grabar); font-weight: 600; font-size: 9.5px; letter-spacing: 0.16em; text-anchor: middle; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* reposo bajo JS: instrumentos atenuados, cables sin trazar, núcleo tenue —
   si el guion se retrasa o falla, el esquema se lee igual, en reposo. */
.js .eq-cable { stroke-dasharray: 60; stroke-dashoffset: 60; }
.js .eq-node { opacity: 0; }
.js .eq-lamp, .js .eq-lamp--ambar { opacity: 0.22; }
.js .eq-halo, .js .eq-halo--ambar { opacity: 0; }
.js .eq-hub-ring { opacity: 0.25; }

/* el momento autorizado: los cuatro instrumentos se encienden y su cable
   llega hasta el núcleo, que cierra la secuencia iluminándose. */
.esquema.encendido .eq-lamp,
.esquema.encendido .eq-lamp--ambar { animation: eq-on 0.4s var(--curva) forwards; }
.esquema.encendido .eq-halo,
.esquema.encendido .eq-halo--ambar { animation: eq-halo 0.5s var(--curva) forwards; }
.esquema.encendido .eq-cable { animation: eq-draw 0.55s var(--curva) forwards; }
.esquema.encendido .eq-node  { animation: eq-pop 0.3s var(--curva) forwards; }
.esquema.encendido .eq-hub-ring { animation: eq-ring 0.6s var(--curva) forwards; animation-delay: 0.9s; }

.esquema.encendido .eq-g1 .eq-lamp, .esquema.encendido .eq-g1 .eq-halo { animation-delay: 0.10s; }
.esquema.encendido .eq-g2 .eq-lamp, .esquema.encendido .eq-g2 .eq-halo { animation-delay: 0.22s; }
.esquema.encendido .eq-g3 .eq-lamp, .esquema.encendido .eq-g3 .eq-halo { animation-delay: 0.34s; }
.esquema.encendido .eq-g4 .eq-lamp, .esquema.encendido .eq-g4 .eq-halo { animation-delay: 0.46s; }
.esquema.encendido .eq-c1 { animation-delay: 0.30s; }
.esquema.encendido .eq-c2 { animation-delay: 0.42s; }
.esquema.encendido .eq-c3 { animation-delay: 0.54s; }
.esquema.encendido .eq-c4 { animation-delay: 0.66s; }
.esquema.encendido .eq-n1 { animation-delay: 0.44s; }
.esquema.encendido .eq-n2 { animation-delay: 0.56s; }
.esquema.encendido .eq-n3 { animation-delay: 0.68s; }
.esquema.encendido .eq-n4 { animation-delay: 0.80s; }

@keyframes eq-on   { from { opacity: 0.22; } to { opacity: 1; } }
@keyframes eq-halo { from { opacity: 0; } to { opacity: 0.16; } }
@keyframes eq-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes eq-pop  { from { opacity: 0; } to { opacity: 1; } }
@keyframes eq-ring { from { opacity: 0.25; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .eq-cable { stroke-dashoffset: 0; }
  .js .eq-node { opacity: 1; }
  .js .eq-lamp, .js .eq-lamp--ambar { opacity: 1; }
  .js .eq-halo, .js .eq-halo--ambar { opacity: 0.16; }
  .js .eq-hub-ring { opacity: 1; }
  .esquema.encendido * { animation: none !important; }
}

/* --- acciones ------------------------------------------------------------ */

.acciones { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; margin-top: 2.25rem; }

.pulsador {
  font-family: var(--grabar); font-weight: 700; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--placa-honda);
  background: linear-gradient(180deg, var(--senal-alta), var(--senal) 55%, var(--senal-honda));
  border: 1px solid var(--senal-borde);
  border-radius: 3px;
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 3px 0 var(--senal-canto), 0 6px 12px rgba(24,33,28,0.35);
  transition: transform 0.12s var(--curva), box-shadow 0.12s var(--curva);
}
.pulsador:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 3px 0 var(--senal-canto), 0 8px 18px rgba(24,33,28,0.4); }
.pulsador:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 0 0 var(--senal-canto), 0 2px 6px rgba(24,33,28,0.3);
}

.secundaria {
  font-family: var(--grabar); font-weight: 600; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--grabado); text-decoration: none;
  border-bottom: 1px solid rgba(242, 239, 230, 0.4);
  padding-bottom: 2px;
}
.secundaria:hover { border-bottom-color: var(--senal); }

/* pulsador sobre chasis */
.sobre-chasis .pulsador { color: var(--senal-tinta); }

/* --- títulos de sección sobre chasis ------------------------------------- */

.titulo {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  max-width: 24ch;
  margin-bottom: 0.9rem;
}
.entrada { color: var(--tinta-suave); max-width: 62ch; font-size: 1.0625rem; }

/* --- recorrido ----------------------------------------------------------- */

.recorrido { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--bisel); border: 1px solid var(--bisel); border-radius: 3px; overflow: hidden; }
.paso { background: var(--chasis-alto); padding: 1.35rem 1.5rem; display: grid; grid-template-columns: 5.5rem minmax(0,1fr); gap: 0.4rem 1.5rem; align-items: baseline; position: relative; }
/* el mismo cable del hero, recorriendo el trazado: aquí es donde el argumento
   dice que las tres capas están conectadas, así que aquí vuelve el device. */
.paso::before {
  content: ""; position: absolute;
  left: 7.05rem; top: 0; bottom: 0; width: 1px;
  background: var(--bisel);
}
.paso:first-child::before { top: 1.5rem; }
.paso:last-child::before  { bottom: calc(100% - 1.5rem); }
.paso::after {
  content: ""; position: absolute;
  left: calc(7.05rem - 3.5px); top: 1.2rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chasis-alto);
  border: 1px solid var(--senal-texto);
}
.paso .hora { font-family: var(--grabar); font-weight: 700; font-size: 1.0625rem; color: var(--senal-texto); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.paso .capa { grid-column: 1; font-family: var(--grabar); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinta-suave); }
.paso .que { grid-column: 2; }
.paso .que b { font-weight: 600; }
.paso:nth-child(even) { background: var(--chasis); }
.paso:nth-child(even)::after { background: var(--chasis); }

/* acción todavía sin conectar: se marca sola y la marca desaparece en cuanto
   se sustituye el href. Evita publicar un botón muerto sin darse cuenta. */
a[data-reemplazar][href="#"]::after {
  content: " · pendiente de conectar";
  font-family: var(--grabar); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ambar-claro);
}
.pulsador[data-reemplazar][href="#"] {
  background: var(--chasis-hondo);
  border-color: var(--bisel);
  color: var(--tinta-suave);
  box-shadow: var(--sombra-hunde);
  cursor: not-allowed;
}
.pulsador[data-reemplazar][href="#"]::after { color: var(--ambar-hondo); display: block; }

.ejemplo {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  font-family: var(--grabar);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* --- bastidor de líneas -------------------------------------------------- */

.bastidor { margin-top: 2.5rem; display: grid; gap: 1.25rem; }

.linea { padding: 1.75rem clamp(1.25rem, 1rem + 1.5vw, 2.25rem); display: grid; gap: 1.25rem; }
.linea .cabeza { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; }
.linea h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); letter-spacing: -0.01em; }
.linea .desde {
  margin-left: auto; font-family: var(--grabar); font-weight: 700;
  font-size: 1.25rem; color: var(--senal); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.linea .desde small { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grabado-suave); }
.linea p { color: var(--grabado-suave); max-width: 68ch; }
.linea ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; color: var(--grabado-suave); font-size: 0.95rem; }
.linea ul li::marker { color: var(--senal); }

.linea.futura .desde { color: var(--ambar-claro); }
.aviso-linea {
  font-family: var(--grabar); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ambar-claro);
  border: 1px solid rgba(224, 162, 92, 0.55);
  border-radius: 2px; padding: 0.2rem 0.5rem;
  display: inline-block;
}

/* --- tarifas ------------------------------------------------------------- */

/* la placa de tarifas: es el diferenciador del proyecto, va grabada */
.tarifas {
  margin-top: 2.5rem;
  border-radius: 3px;
  overflow-x: auto;
  background: linear-gradient(180deg, var(--placa-alta), var(--placa));
  box-shadow: var(--sombra-placa);
  color: var(--grabado);
}
.tarifas table { border-collapse: collapse; width: 100%; min-width: 38rem; }
.tarifas caption {
  text-align: left; padding: 1.15rem 1.35rem 0.35rem;
  font-family: var(--grabar); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--grabado-suave);
}
.tarifas th, .tarifas td {
  text-align: left; padding: 0.9rem 1.35rem;
  border-bottom: 1px solid rgba(174, 185, 177, 0.18);
}
.tarifas thead th {
  font-family: var(--grabar); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--grabado-suave);
}
.tarifas tbody th { font-weight: 600; font-family: var(--prosa); font-size: 1.0625rem; color: var(--grabado); }
.tarifas tbody td { color: var(--grabado-suave); font-size: 0.95rem; }
.tarifas td.importe {
  font-family: var(--grabar); font-weight: 700; font-size: 1.25rem;
  color: var(--senal); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tarifas tbody tr:last-child th, .tarifas tbody tr:last-child td { border-bottom: none; }

.desglose { margin-top: 1.75rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.desglose > div { border-top: 2px solid var(--bisel); padding-top: 0.9rem; }
.desglose h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.desglose p, .desglose ul { font-size: 0.95rem; color: var(--tinta-suave); }
.desglose ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }

/* --- método -------------------------------------------------------------- */

.fases { margin-top: 2.5rem; counter-reset: f; display: grid; gap: 1px; background: var(--bisel); border: 1px solid var(--bisel); border-radius: 3px; overflow: hidden; }
.fase { background: var(--chasis-alto); padding: 1.25rem 1.5rem; display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: 0.35rem 1.25rem; }
.fase::before {
  counter-increment: f; content: counter(f, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--grabar); font-weight: 700; font-size: 1.25rem;
  color: var(--senal-texto); font-variant-numeric: tabular-nums; line-height: 1;
}
.fase h3 { font-size: 1.25rem; letter-spacing: 0.01em; }
.fase .entregable { font-size: 0.95rem; color: var(--tinta-suave); }
.fase .salida { font-size: 0.85rem; color: var(--tinta); font-family: var(--grabar); font-weight: 600; letter-spacing: 0.04em; }
.fase .salida::before { content: "Sale cuando: "; color: var(--tinta-suave); font-weight: 500; }

/* --- caso ---------------------------------------------------------------- */

.caso { margin-top: 2.5rem; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
.caso h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); margin-bottom: 1rem; }
.caso ul { margin: 1.25rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--grabado-suave); }
.caso ul li::marker { color: var(--senal); }
.caso p { color: var(--grabado-suave); max-width: 62ch; }
.pendiente {
  margin-top: 1.5rem; padding: 0.85rem 1rem;
  border: 1px solid rgba(224, 162, 92, 0.5);
  border-radius: 2px;
  color: #E9C9A8; font-size: 0.95rem;
}

/* --- socios -------------------------------------------------------------- */

.socios { margin-top: 2.5rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.socio { border-top: 2px solid var(--bisel); padding-top: 1rem; }
.socio h3 { font-size: 1.25rem; margin-bottom: 0.15rem; }
.socio .cargo { font-family: var(--grabar); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--senal-texto); margin-bottom: 0.6rem; }
.socio p { font-size: 0.95rem; color: var(--tinta-suave); }

/* --- preguntas ----------------------------------------------------------- */

.preguntas { margin-top: 2.5rem; border-top: 1px solid var(--bisel); }
details { border-bottom: 1px solid var(--bisel); }
summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-family: var(--grabar); font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
  position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.5rem;
  width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--senal-texto); border-bottom: 2px solid var(--senal-texto);
  transform: rotate(45deg); transition: transform 0.2s var(--curva);
}
details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
details .respuesta { padding: 0 0 1.25rem; color: var(--tinta-suave); max-width: 68ch; }
details .respuesta p + p { margin-top: 0.75rem; }

/* --- cierre -------------------------------------------------------------- */

.cierre { padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 3rem); text-align: left; }
.cierre h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); max-width: 20ch; margin-bottom: 1rem; }
.cierre p { color: var(--grabado-suave); max-width: 54ch; }

/* --- pie ----------------------------------------------------------------- */

.pie { border-top: 1px solid var(--bisel); background: var(--chasis-hondo); padding-block: 2.5rem; margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.pie .limite { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pie h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tinta-suave); font-weight: 600; margin-bottom: 0.7rem; }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: 0.95rem; }
.pie a { color: var(--tinta); text-decoration: none; }
.pie a:hover { color: var(--senal-texto); text-decoration: underline; }
.pie .nota { font-size: 0.85rem; color: var(--tinta-suave); line-height: 1.6; }
.pie .nota strong { color: var(--tinta); font-weight: 600; }

/* eslogan de marca: lockup bajo el wordmark. «automatizamos oportunidades» en
   teal —la señal marca la acción viva—, adaptado a los dos temas. */
.lema-marca {
  font-family: var(--grabar); font-weight: 600;
  font-size: 1.25rem; line-height: 1.2; letter-spacing: 0.01em;
  color: var(--tinta); margin: -0.2rem 0 0.7rem;
  max-width: 22ch;
}
.lema-marca span { color: var(--senal-texto); }

/* --- páginas legales ----------------------------------------------------- */

.legal { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.legal .limite { max-width: 46rem; }
.legal h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom: 1.5rem; }
.legal h2 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); margin-top: 2.5rem; margin-bottom: 0.6rem; }
.legal p, .legal li { color: var(--tinta-suave); }
.legal p + p { margin-top: 0.9rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; margin: 0.9rem 0 0; }
.legal .reemplazar {
  border: 1px solid var(--ambar-hondo);
  background: rgba(138, 66, 16, 0.07);
  border-radius: 2px; padding: 0.9rem 1.1rem; margin-top: 1rem;
  font-size: 0.95rem; color: var(--tinta);
}
.legal .reemplazar b { font-family: var(--grabar); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; display: block; margin-bottom: 0.3rem; color: var(--ambar-hondo); }

/* --- adaptación ---------------------------------------------------------- */

/* el esquema baja debajo del texto y se centra en una sola columna */
@media (max-width: 60rem) {
  .hero-cols { grid-template-columns: 1fr; gap: 2rem; }
  .hero-grafico { max-width: 24rem; margin-inline: auto; justify-self: center; }
}

@media (max-width: 46rem) {
  .paso { grid-template-columns: 1fr; gap: 0.2rem; }
  .paso .que { grid-column: 1; }
  .paso::before, .paso::after { display: none; }
  .linea .desde { margin-left: 0; }
  .fase { grid-template-columns: 2rem minmax(0,1fr); gap: 0.3rem 0.9rem; }
}

@media (max-width: 30rem) {
  .barra > .limite { min-height: 3.5rem; padding-block: 0.6rem; gap: 0.75rem; }
  /* la navegación cabe en una fila: tres filas de cabecera se comían el pliegue */
  .barra nav { gap: 0.7rem; width: 100%; }
  .barra nav a { font-size: 0.72rem; letter-spacing: 0.06em; }
  .idioma { padding: 0.2rem 0.45rem; font-size: 0.72rem; }
  .marca { margin-right: 0; font-size: 1.25rem; }
}