/* ==========================================================================
   DowntimeOS - Sistema visual industrial
   Capa 1 / Presentacion. Tipografia tecnica (JetBrains Mono para cifras),
   contraste industrial oscuro, animaciones de ticker.
   Este archivo define TODA la identidad de componente; Tailwind (CDN) solo
   aporta utilidades de espaciado y grid encima, de modo que la pagina sigue
   siendo legible aunque el CDN no cargue.
   ========================================================================== */

:root {
  /* --- Tokens canónicos del PRD §3.2 --------------------------------- */
  --bg-base:         #06080B;   /* fondo principal del body */
  --bg-panel:        #0B0F15;   /* tarjetas, modales y header flotante */
  --bg-panel-alt:    #10151C;   /* inputs, pills inactivas y contenedores */
  --border:          #1F2A36;   /* bordes estructurales sutiles (1px solid) */

  --text-primary:    #E8EEF4;   /* títulos H1-H3 y datos de alto contraste */
  --text-secondary:  #93A0B5;   /* subtítulos, copy de soporte y features */
  --text-muted:      #5D697D;   /* labels técnicos, badges y disclaimers */

  --accent-amber:      #FFB627; /* identidad, CTAs primarios y "OS" */
  --accent-amber-tint: rgba(255, 182, 39, 0.12);
  --accent-red:        #FF4D4F; /* pérdida financiera, contadores en paro */
  --accent-red-tint:   rgba(255, 77, 79, 0.12);
  --accent-green:      #34D399; /* máquina en RUN, ahorro recuperado */
  --accent-cyan:       #35D0E8; /* gráficas de tendencia, Pareto analítico */

  /* --- Alias internos: los componentes de este archivo siguen usando los
     nombres cortos. Un token del PRD cambia y toda la hoja lo hereda. ---- */
  --bg-900:   var(--bg-base);
  --bg-800:   #0a0e13;
  --surface:  var(--bg-panel-alt);
  --surface-2:#161d26;
  --surface-3:#1c2531;
  --line:     var(--border);
  --line-hi:  #2c3b4c;

  --text:     var(--text-primary);
  --text-dim: var(--text-secondary);
  --muted:    var(--text-muted);

  --amber:    var(--accent-amber);
  --amber-dk: #c77f00;
  --red:      var(--accent-red);
  --red-glow: rgba(255, 77, 79, 0.35);
  --green:    var(--accent-green);
  --cyan:     var(--accent-cyan);

  --mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.9);
  --nav-h: 68px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

/* OJO: `scroll-padding-top` (en el scrollport) y `scroll-margin-top` (en el
   destino) SE SUMAN. Con ambos en 92px y los 88px de padding propio de cada
   sección, el ancla aterrizaba 230px por debajo del encabezado, con media
   pantalla vacía. El margen negativo cancela ese padding para que el título
   del módulo quede justo bajo la navbar. */
section[id] { scroll-margin-top: -72px; }
.section--tight[id] { scroll-margin-top: -48px; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Glow ambiental FIJO. Va en una capa propia con `position: fixed` en vez de
   `background-attachment: fixed`, que en Safari de iOS se ignora y en Chrome
   fuerza un repintado del fondo en cada scroll. Así los halos quedan clavados
   al viewport, detrás del contenido y sin capturar clics. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 680px at 50% -14%, rgba(255, 182, 39, 0.13), transparent 60%),
    radial-gradient(980px 560px at 4% 6%,     rgba(53, 208, 232, 0.07), transparent 58%),
    radial-gradient(760px 620px at 96% 46%,   rgba(255, 77, 79, 0.05),  transparent 60%),
    radial-gradient(900px 700px at 18% 96%,   rgba(255, 182, 39, 0.05), transparent 62%);
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--amber); color: var(--bg-base); }

/* ----------------------------------------------------------- layout base */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

.section { padding: 88px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- tipografia */
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
p  { margin: 0; color: var(--text-dim); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--amber);
  flex: none;
}

.lead { font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--text-dim); max-width: 62ch; }
.hl { color: var(--amber); }
.hl-red { color: var(--red); }

/* --------------------------------------------------------------- badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  background: var(--bg-panel-alt);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: pulse 2s infinite;
  flex: none;
}
.pulse-dot--red { background: var(--red); box-shadow: 0 0 0 0 var(--red-glow); animation: pulse-red 1.4s infinite; }

@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@keyframes pulse-red {
  70%  { box-shadow: 0 0 0 10px rgba(255, 77, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.btn--primary {
  background: linear-gradient(180deg, #ffc04a, var(--amber));
  color: #100a00;
  box-shadow: 0 10px 26px -12px rgba(255, 182, 39, 0.85);
}
.btn--primary:hover { background: linear-gradient(180deg, #ffd071, #ffbc3c); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line-hi);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--amber); background: rgba(255, 182, 39, 0.07); }

/* Un CTA a todo lo ancho debe poder partirse en varias lineas: con nowrap su
   ancho minimo arrastraba toda la columna de la calculadora en movil. */
.btn--block { width: 100%; white-space: normal; text-align: center; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- tarjetas */
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
}
.card--hover { transition: border-color 0.2s ease, transform 0.2s ease; }
.card--hover:hover { border-color: var(--line-hi); transform: translateY(-3px); }

/* ------------------------------------------------------------------ navbar */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(6, 8, 11, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap { padding-inline: 18px; }
.nav__inner { display: flex; align-items: center; gap: 22px; width: 100%; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 1.06rem; }
.nav__links { display: none; gap: 26px; margin-left: auto; }
.nav__link {
  font-size: 0.86rem;
  color: var(--text-dim);
  font-weight: 500;
  transition: color 0.15s ease;
  position: relative;
}
.nav__link:hover { color: var(--amber); }
.nav__cta { margin-left: auto; }
.nav__cta .cta-corto { display: inline; }
.nav__cta .cta-largo { display: none; }
@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 0; }
  .nav__cta .cta-corto { display: none; }
  .nav__cta .cta-largo { display: inline; }
}
/* En pantallas angostas el trio marca + CTA + burger no cabe con el gap base. */
@media (max-width: 560px) {
  .nav__inner { gap: 10px; }
  .nav__brand { font-size: 0.98rem; }
  .nav__cta { padding: 10px 14px; font-size: 0.86rem; }
}

.nav__burger {
  margin-left: auto;
  display: inline-flex;
  background: none;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
@media (min-width: 1000px) { .nav__burger { display: none; } }

.nav__mobile {
  position: fixed;
  inset: var(--nav-h) 12px auto 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 20px 22px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 55;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a { padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--text-dim); font-size: 0.95rem; }

/* -------------------------------------------------------------------- hero */
.hero { padding: 68px 0 76px; position: relative; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.28;
  mask-image: radial-gradient(760px 400px at 30% 25%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(760px 400px at 30% 25%, #000 20%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
/* `start` y no `center`: el borde superior del widget debe coincidir con el
   del badge izquierdo en pantallas anchas, sin aire residual arriba. */
.hero__grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.02fr 0.98fr; gap: 52px; } }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero__proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
/* Los cuatro indicadores en una sola fila a partir de tablet: bajan la altura
   del hero y equilibran el ancho del contenedor. */
@media (min-width: 720px) {
  .hero__proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

.proof__num { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--text); }
.proof__lbl { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }

/* ------------------------------------------------------- panel SCADA ticker */
.scada {
  background: linear-gradient(180deg, #0e131a, #080b10);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.scada__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #0b0f15;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.scada__dots { display: flex; gap: 6px; margin-left: auto; }
.scada__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-hi); display: block; }

.scada__body { padding: 22px 20px 20px; }

.scada__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 77, 79, 0.35);
  background: rgba(255, 77, 79, 0.08);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  color: #ffb4b5;
  text-transform: uppercase;
}

.ticker {
  margin: 20px 0 6px;
  text-align: center;
}
.ticker__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker__value {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.85rem, 5vw, 2.25rem);   /* PRD: 36px */
  color: var(--red);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 0 34px var(--red-glow);
  font-variant-numeric: tabular-nums;
  animation: flicker 3.4s infinite;
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.72; }
  98.5% { opacity: 0.92; }
}
.ticker__rate { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-top: 6px; }

.scada__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: 20px;
}
.scada__stat { background: #0b1016; padding: 13px 12px; text-align: center; }
.scada__stat b { display: block; font-family: var(--mono); font-size: 1.02rem; color: var(--text); }
.scada__stat span { font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }

.scada__bars { display: flex; align-items: flex-end; gap: 4px; height: 42px; margin-top: 18px; }
.scada__bars i {
  flex: 1;
  display: block;
  background: linear-gradient(180deg, var(--amber), rgba(255, 182, 39, 0.15));
  border-radius: 2px 2px 0 0;
  animation: eq 1.6s ease-in-out infinite;
  opacity: 0.75;
}
@keyframes eq {
  0%, 100% { height: 22%; }
  50% { height: 92%; }
}

/* --------------------------------------------------------- matriz comparativa */
.matrix { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.matrix__scroll { overflow-x: auto; }
table.matrix__table { width: 100%; border-collapse: collapse; min-width: 720px; }
.matrix__table th, .matrix__table td { padding: 17px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix__table thead th {
  background: #0b1016;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.matrix__table thead th.is-us { color: var(--amber); background: rgba(255, 182, 39, 0.07); }
.matrix__table tbody tr:last-child td { border-bottom: none; }
.matrix__table td.criterio { color: var(--text); font-weight: 600; width: 24%; }
.matrix__table td.legacy { color: var(--muted); }
.matrix__table td.us { color: var(--text); background: rgba(255, 182, 39, 0.045); border-left: 1px solid rgba(255, 182, 39, 0.22); font-weight: 500; }
.matrix__table td.us strong { color: var(--amber); }

/* ------------------------------------------------------------- calculadora */
.calc { display: grid; gap: 24px; }
/* min-width:0 evita que el contenido mas ancho (cifras monoespaciadas, CTAs)
   estire la columna por encima del viewport. */
.calc > * { min-width: 0; }
@media (min-width: 1000px) { .calc { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }

.field { margin-bottom: 26px; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.field__label { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.field__hint { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); }
.field__value {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--amber);
  background: rgba(255, 182, 39, 0.09);
  border: 1px solid rgba(255, 182, 39, 0.25);
  border-radius: var(--r-sm);
  padding: 3px 10px;
  min-width: 74px;
  text-align: center;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-3);
  outline: none;
  margin: 6px 0 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid #0b0f14;
  box-shadow: 0 0 0 1px var(--amber), 0 4px 14px -3px rgba(255, 182, 39, 0.9);
  cursor: grab;
}
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid #0b0f14;
  box-shadow: 0 0 0 1px var(--amber);
  cursor: grab;
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: var(--surface-3); }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg__btn {
  padding: 11px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-hi);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-size: 0.83rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.seg__btn:hover { border-color: var(--amber); color: var(--text); }
.seg__btn.is-active {
  background: rgba(255, 182, 39, 0.13);
  border-color: var(--amber);
  color: var(--amber);
}

.rate-row { display: flex; gap: 10px; flex-wrap: wrap; }
.input-money {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-800);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  padding: 0 13px;
}
.input-money span { color: var(--muted); font-family: var(--mono); }
.input-money input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
}
.input-money:focus-within { border-color: var(--amber); }

.currency { display: flex; border: 1px solid var(--line-hi); border-radius: var(--r-sm); overflow: hidden; flex: none; }
.currency button {
  padding: 0 15px;
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.15s ease;
}
.currency button.is-active { background: var(--amber); color: #100a00; }

/* --------------------------------------------------------- panel resultados */
.result {
  background:
    radial-gradient(560px 240px at 50% -10%, rgba(255, 77, 79, 0.14), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  box-shadow: var(--shadow);
}
.result__big {
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3rem);   /* PRD: 48px */
  color: var(--red);
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease;
}
.result__big.is-updating { color: #ff7476; }

.result__rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin: 22px 0; }
.result__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; background: #0c1117; }
.result__row span { font-size: 0.82rem; color: var(--muted); }
.result__row b { font-family: var(--mono); font-size: 0.98rem; color: var(--text); font-variant-numeric: tabular-nums; }

.roi {
  border: 1px solid rgba(52, 211, 153, 0.32);
  background: rgba(52, 211, 153, 0.07);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.roi__label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); }
.roi__value { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.roi__text { font-size: 0.83rem; color: var(--text-dim); margin-top: 6px; }

.calc__note { font-size: 0.72rem; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.calc__note code { font-family: var(--mono); color: var(--text-dim); }

/* -------------------------------------------------------------- despliegue */
.steps { counter-reset: paso; display: grid; gap: 18px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 26px; }
.step::before {
  counter-increment: paso;
  content: "0" counter(paso);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  color: var(--amber);
}
.step h3 { margin-bottom: 8px; font-size: 1.06rem; }
.step p { font-size: 0.92rem; }
.step__bar { height: 2px; background: var(--line); margin: 16px 0 0; position: relative; overflow: hidden; }
.step__bar i { position: absolute; inset: 0 auto 0 0; width: 42%; background: var(--amber); display: block; }

/* -------------------------------------------------------------------- casos */
.caso__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.caso__logo {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-sm);
  background: rgba(255, 182, 39, 0.1);
  border: 1px solid rgba(255, 182, 39, 0.3);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem; color: var(--amber);
}
.caso__name { font-weight: 700; font-size: 0.98rem; }
.caso__meta { font-size: 0.74rem; color: var(--muted); font-family: var(--mono); }

.pilar { padding: 13px 0; border-bottom: 1px dashed var(--line); }
.pilar:last-of-type { border-bottom: none; }
.pilar__tag {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
}
.pilar--dolor .pilar__tag { color: var(--red); }
.pilar--impl .pilar__tag { color: var(--cyan); }
.pilar--impacto .pilar__tag { color: var(--green); }
.pilar p { font-size: 0.9rem; color: var(--text-dim); }
.pilar b { color: var(--text); font-family: var(--mono); }

/* ---------------------------------------------------------------- formulario */
.form { display: grid; gap: 16px; }
@media (min-width: 700px) { .form--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__full { grid-column: 1 / -1; }

.input-group { display: flex; flex-direction: column; gap: 7px; }
.input-group > label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; }
.input-group > label span { color: var(--red); }

.input, select.input {
  background: var(--bg-800);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
.input::placeholder { color: #55636f; }
.input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 182, 39, 0.12); }
.input.is-error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.12); }

.err { font-size: 0.74rem; color: var(--red); min-height: 1em; display: none; }
.err.is-visible { display: block; }

.form__foot { font-size: 0.74rem; color: var(--muted); }

/* --------------------------------------------------------------------- modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 9, 0.82);
  backdrop-filter: blur(6px);
}
.modal.is-open { display: flex; animation: fade 0.18s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal__box {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 28px;
  animation: rise 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.modal__box--wide { max-width: 720px; }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.modal__close {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  width: 32px; height: 32px;
  color: var(--muted);
  flex: none;
  line-height: 1;
}
.modal__close:hover { border-color: var(--red); color: var(--red); }

.modal__resumen {
  border: 1px solid var(--line);
  background: #0c1117;
  border-radius: var(--r-sm);
  padding: 13px 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.modal__resumen span { font-size: 0.76rem; color: var(--muted); }
.modal__resumen b { font-family: var(--mono); color: var(--red); font-size: 1.12rem; }

/* video placeholder */
.video-box {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(45deg, #0c1117 0 12px, #0e141b 12px 24px);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px;
}

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  max-width: 380px;
  background: var(--surface-2);
  border: 1px solid var(--line-hi);
  border-left: 3px solid var(--green);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  transform: translateY(140%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.toast.is-visible { transform: translateY(0); }
.toast--error { border-left-color: var(--red); }
.toast__title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
.toast__msg { font-size: 0.82rem; color: var(--text-dim); }

/* -------------------------------------------------------------------- faq */
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: none;
  text-align: left;
  font-weight: 600;
  font-size: 0.98rem;
}
.faq__q i { margin-left: auto; color: var(--amber); font-style: normal; font-family: var(--mono); transition: transform 0.2s ease; }
.faq__item.is-open .faq__q i { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.faq__a p { padding-bottom: 18px; font-size: 0.92rem; max-width: 80ch; }

/* ----------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); padding: 40px 0; background: var(--bg-800); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.footer small { color: var(--muted); font-size: 0.78rem; }
.footer a:hover { color: var(--amber); }

/* --------------------------------------------------------- reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* pequenas utilidades propias (independientes de Tailwind) */
.u-center { text-align: center; }
.u-mx-auto { margin-inline: auto; }
.u-mt-8 { margin-top: 8px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-40 { margin-top: 40px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-32 { margin-bottom: 32px; }
.u-maxw-720 { max-width: 720px; }
.u-flex { display: flex; }
.u-gap-12 { gap: 12px; }
.u-wrap { flex-wrap: wrap; }

/* ==========================================================================
   BLOQUES DEL PRD v1.0.0 — RBAC, caso DowntimeCO, precios y Zero-Trust
   ========================================================================== */

/* ------------------------------------------------------------ CTA en pill */
/* PRD Seccion 0: el CTA del header es un pill ambar, no un boton cuadrado. */
.btn--pill { border-radius: 999px; padding: 9px 20px; font-size: 0.88rem; }

/* ------------------------------------------------- presets de tarifa hora */
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.preset {
  padding: 7px 12px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  background: var(--bg-panel-alt);
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.preset:hover { border-color: var(--amber); color: var(--text); }
.preset.is-active { border-color: var(--amber); background: var(--accent-amber-tint); color: var(--amber); }

/* Callout conservador del PRD: recuperar el 15% ya paga la suscripcion. */
.callout {
  border: 1px dashed var(--line-hi);
  border-left: 3px solid var(--accent-cyan);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.callout b { color: var(--accent-cyan); font-family: var(--mono); }

/* ------------------------------------------------------------- RBAC tabs */
.roles__tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin-bottom: 24px;
}
@media (min-width: 760px) { .roles__tabs { grid-template-columns: repeat(3, 1fr); } }
.roles__tab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel-alt);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.roles__tab b { font-size: 0.94rem; font-weight: 600; color: var(--text-secondary); }
.roles__tab span { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }
.roles__tab:hover { border-color: var(--line-hi); }
.roles__tab.is-active { border-color: var(--amber); background: var(--accent-amber-tint); }
.roles__tab.is-active b { color: var(--amber); }

.roles__panel { display: none; }
.roles__panel.is-active { display: grid; gap: 24px; animation: fade 0.22s ease; }
@media (min-width: 900px) { .roles__panel.is-active { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }

.vista { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.vista__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-alt);
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.vista__body { padding: 18px; display: grid; gap: 12px; }

/* Mini-Pareto del panel de direccion: barras puras en CSS, sin librerias. */
.pareto { display: grid; gap: 9px; }
.pareto__fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.pareto__fila span { font-size: 0.8rem; color: var(--text-secondary); }
.pareto__fila b { font-family: var(--mono); font-size: 0.82rem; color: var(--text); }
.pareto__barra { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--bg-panel-alt); overflow: hidden; }
.pareto__barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-red), var(--accent-amber)); }

/* Semaforo tactil del operador: cero cifras de dinero en pantalla. */
.semaforo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.semaforo button {
  padding: 22px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: grid; gap: 8px; justify-items: center;
}
.semaforo button i { width: 26px; height: 26px; border-radius: 50%; background: currentColor; display: block; }
.semaforo .sf--run   { color: var(--accent-green); border-color: rgba(52, 211, 153, 0.4); }
.semaforo .sf--setup { color: var(--accent-amber); border-color: rgba(255, 182, 39, 0.4); }
.semaforo .sf--stop  { color: var(--accent-red);   border-color: rgba(255, 77, 79, 0.4); background: var(--accent-red-tint); }

/* -------------------------------------------------- caso demo DowntimeCO */
.linea { display: grid; gap: 12px; }
@media (min-width: 860px) { .linea { grid-template-columns: repeat(4, 1fr); } }
.etapa {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  padding: 16px;
  position: relative;
}
.etapa--cuello { border-color: var(--accent-red); background: linear-gradient(180deg, var(--accent-red-tint), var(--bg-panel)); }
.etapa__ids { font-family: var(--mono); font-size: 0.74rem; color: var(--amber); letter-spacing: 0.08em; }
.etapa h4 { margin: 6px 0 4px; font-size: 0.96rem; font-weight: 600; }
.etapa p { font-size: 0.8rem; color: var(--text-muted); }
.etapa__flag {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent-red-tint); color: var(--accent-red);
}

/* --------------------------------------------------------------- precios */
.planes { display: grid; gap: 20px; }
@media (min-width: 940px) { .planes { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.plan { display: flex; flex-direction: column; }
.plan--destacado { border-color: var(--amber); box-shadow: 0 22px 60px -30px rgba(255, 182, 39, 0.6); }
.plan__tag {
  position: absolute; top: -11px; left: 26px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  padding: 4px 11px; border-radius: 999px;
  background: var(--amber); color: var(--bg-base); font-weight: 700;
}
.plan__nombre { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.plan__precio { font-family: var(--mono); font-size: 2.3rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.plan__precio small { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.plan__lista { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; }
.plan__lista li { display: flex; gap: 9px; font-size: 0.86rem; color: var(--text-dim); }
.plan__lista li::before { content: "\25B8"; color: var(--amber); flex: none; }
.plan .btn { margin-top: auto; }

.banner-oc {
  margin-top: 26px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  background: var(--bg-panel-alt);
  padding: 16px 18px;
  font-size: 0.87rem;
  color: var(--text-dim);
}
.banner-oc b { color: var(--text); }

/* --------------------------------------------------- Zero-Trust industrial */
.zt { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .zt { grid-template-columns: 1fr auto 1fr; } }
.zt__col { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); padding: 22px; }
.zt__col h4 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.zt__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 0.85rem; color: var(--text-dim); }
.zt__col li::before { content: "\00B7 "; color: var(--amber); }
.zt__col--ot { border-color: rgba(255, 77, 79, 0.3); }
.zt__col--cloud { border-color: rgba(52, 211, 153, 0.3); }

.zt__gap {
  display: grid; place-items: center; gap: 8px;
  padding: 18px 14px;
  border: 1px dashed var(--line-hi);
  border-radius: var(--r-lg);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-align: center;
  color: var(--accent-red);
  background: var(--accent-red-tint);
}
.zt__gap b { font-size: 1.5rem; color: var(--accent-red); }

/* --------------------------------------------------------- footer tecnico */
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 4px; }
.footer__links a { font-size: 0.78rem; color: var(--text-secondary); }
.footer__links a:hover { color: var(--amber); }
.footer__tag { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em; }

/* Desglose mano de obra vs margen de contribucion (calculadora). */
.desglose { margin-top: 18px; }
.desglose__ttl {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.desglose .result__row { border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 6px; }
.desglose .result__row span i { display: block; font-style: normal; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* Subtitulo de cada plan (enfoque + precio mensual sin compromiso). */
.plan__sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; line-height: 1.45; }
/* La comparativa de infraestructura reusa .matrix con cuatro columnas. */
.matrix__table thead th:nth-child(n+2) { text-align: center; }
.matrix__table td.legacy, .matrix__table td.us { text-align: center; }
.matrix__table td.criterio { text-align: left; width: 34%; }

/* ==========================================================================
   CONTROLES UNIFICADOS DE LA CALCULADORA
   ========================================================================== */

/* Selector de divisa: pill segmentado compacto, no un contenedor alargado. */
.currency--pill {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel-alt);
  width: auto;
  overflow: visible;
}
.currency--pill button {
  padding: 6px 18px;
  border-radius: 999px;
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: background 0.16s ease, color 0.16s ease;
}
.currency--pill button:hover { color: var(--text-primary); }
.currency--pill button.is-active { background: var(--accent-amber); color: var(--bg-base); }

/* Stepper unificado de activos críticos: un solo control con los botones, la
   cifra y el deslizador dentro del mismo marco. Sustituye al par
   slider + recuadro numérico, que duplicaba el mismo dato en pantalla. */
.stepper {
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  background: var(--bg-panel-alt);
  padding: 10px 14px 12px;
  max-width: 340px;
}
.stepper__fila { display: flex; align-items: center; justify-content: center; gap: 14px; }
.stepper__btn {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-amber);
  background: var(--accent-amber-tint);
  color: var(--accent-amber);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s ease, transform 0.1s ease;
}
.stepper__btn:hover { background: var(--accent-amber); color: var(--bg-base); }
.stepper__btn:active { transform: scale(0.94); }
.stepper__btn[disabled] { opacity: 0.35; cursor: not-allowed; border-color: var(--line-hi); background: transparent; color: var(--text-muted); }
.stepper__valor {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-amber);
  letter-spacing: -0.02em;
  min-width: 3ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stepper__unidad { font-family: var(--sans); font-size: 0.7rem; color: var(--text-muted); display: block; margin-top: 1px; letter-spacing: 0; }
.stepper input[type="range"] { margin-top: 10px; }
.stepper__rango { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.62rem; color: var(--text-muted); margin-top: 4px; }

/* Eco de la calculadora en el formulario del piloto: confirma al visitante que
   no le estamos pidiendo dos veces el mismo dato. */
.eco-calc {
  border: 1px dashed var(--line-hi);
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  margin: 16px 0 26px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.eco-calc b { color: var(--accent-amber); }

/* Tarjetas de garantía de infraestructura: se distinguen de la matriz de
   precios con un acento propio por tipo de arquitectura. */
.infra-card { border-top: 3px solid var(--line-hi); }
.infra-card--base { border-top-color: var(--accent-green); }
.infra-card--enterprise { border-top-color: var(--accent-cyan); }

/* Las dos tarjetas de infraestructura llenan la misma altura aunque una tenga
   la mitad de texto: un desfase ahí se lee como si a una le faltara algo. */
.infra-grid { align-items: stretch; }
.infra-grid > .card { height: 100%; display: flex; flex-direction: column; }
.infra-grid > .card > p { margin-top: auto; padding-top: 16px; }

/* El wordmark va dentro de UN solo elemento. Sin este envoltorio, el `gap`
   del contenedor flex —pensado para separar el ícono del texto— se colaba
   también entre "Downtime" y "OS", que flex trata como dos ítems distintos. */
.wordmark { display: inline; white-space: nowrap; letter-spacing: -0.02em; }