/* ============================================================
   Showglass — hoja de estilos única
   Borrador de migración WordPress → Vercel · v0.2
   Paleta: carbón profundo + cristal cian + ámbar de acento
   v0.2 — capa "tech/LED": matriz de píxeles, scanlines, prisma
   ============================================================ */

:root{
  --bg:#07090C;
  --bg-2:#0C1016;
  --bg-3:#11161E;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --txt:#EAF0F5;
  --txt-2:#98A6B5;
  --txt-3:#66748A;
  --cyan:#64E3F2;
  --cyan-d:#26B9CD;
  --amber:#F5B942;
  --ok:#48D597;
  --r:14px;
  --r-lg:22px;
  --wrap:1200px;
  --fs:clamp(15px,.5vw + 14px,17px);
  --ease:cubic-bezier(.22,.9,.28,1);
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* ── Capa tech/LED ──────────────────────────────────────── */
  --violet:#9B7BFF;      /* segundo primario del prisma RGB   */
  --magenta:#F45CC8;     /* tercer punto del subpíxel          */
  --grid:40px;           /* paso de la matriz de píxeles       */
  --glow-cyan:0 0 22px -4px rgba(100,227,242,.55);
  --glow-violet:0 0 22px -4px rgba(155,123,255,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font);font-size:var(--fs);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.025em;font-weight:650}
p{margin:0 0 1em}
ul,ol,dl{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--cyan);color:#06181C}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}

/* Marca de dato provisional: el repo usa ° para todo valor que aún
   no ha confirmado dirección. No quitarla sin confirmar el dato. */
.ref{color:var(--amber);font-weight:700;font-size:.8em;vertical-align:super;margin-left:1px}

/* ── Progreso de scroll ────────────────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan-d),var(--cyan))}

/* ── Navegación ────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(7,9,12,.72);border-bottom:1px solid transparent;transition:.35s var(--ease)}
.nav.is-stuck{border-bottom-color:var(--line);background:rgba(7,9,12,.92)}
.nav-inner{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.03em;font-weight:600;color:var(--txt)}
.logo svg{width:30px;height:23px;fill:none;stroke:var(--cyan);stroke-width:1.6;flex:none}
.logo b{font-weight:750;color:var(--cyan)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--txt-2)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--cyan);transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--txt)}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:10px}

/* ── Botones ───────────────────────────────────────────────── */
.btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:100px;border:1px solid transparent;font-size:14.5px;
  font-weight:560;cursor:pointer;transition:.25s var(--ease);white-space:nowrap;background:none}
.btn-primary{background:var(--cyan);color:#04171B;border-color:var(--cyan)}
.btn-primary:hover{background:#8DEEFA;transform:translateY(-1px);box-shadow:0 10px 26px -12px rgba(100,227,242,.7)}
.btn-line{border-color:var(--line-2);color:var(--txt)}
.btn-line:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(100,227,242,.06)}
.btn-ghost{color:var(--txt-2);padding:11px 14px}
.btn-ghost:hover{color:var(--txt)}
.btn-lg{padding:14px 26px;font-size:15.5px}
.btn-block{width:100%}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer}
.burger i{width:20px;height:1.6px;background:var(--txt);transition:.3s var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* ── Reveal ────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{position:relative;padding:72px 0 0;overflow:hidden}
.hero-glow{position:absolute;inset:-30% -10% auto -10%;height:80vh;pointer-events:none;
  background:radial-gradient(48% 46% at 62% 30%,rgba(100,227,242,.17),transparent 70%),
             radial-gradient(38% 40% at 18% 10%,rgba(38,185,205,.11),transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.eyebrow{display:inline-block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);font-weight:600;margin-bottom:18px}
.hero h1{font-size:clamp(38px,5.2vw,62px);margin-bottom:22px;font-weight:680}
.hero h1 em{font-style:normal;color:var(--cyan);
  background:linear-gradient(180deg,var(--cyan),var(--cyan-d));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{color:var(--txt-2);font-size:clamp(16px,.4vw + 15px,18.5px);max-width:56ch}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 34px}
.hero-specs{display:flex;gap:34px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line)}
.hero-specs b{display:block;font-size:23px;color:var(--txt);letter-spacing:-.03em}
.hero-specs span{font-size:13px;color:var(--txt-3)}

/* ── Demo interactiva de vitrina ───────────────────────────── */
.demo{margin:0}
.demo-scene{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);background:#05070A;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.03)}
.shop{position:absolute;inset:0;background:
  linear-gradient(180deg,#161C24 0%,#0D1218 60%,#080B10 100%)}
.shop-light{position:absolute;inset:0;
  background:radial-gradient(60% 40% at 50% 0%,rgba(255,238,204,.14),transparent 70%)}
.shelf{position:absolute;left:6%;right:6%;top:22%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#2A3441,#3B4756,#2A3441)}
.shelf::after{content:"";position:absolute;inset:-26px 8% 6px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 14px,transparent 14px 34px);border-radius:3px}
.shelf.s2{top:62%}
.mannequin{position:absolute;bottom:8%;width:12%;height:34%;border-radius:40% 40% 14% 14%/28% 28% 8% 8%;
  background:linear-gradient(180deg,#4A5768,#26303C)}
.mannequin::before{content:"";position:absolute;top:-16%;left:50%;transform:translateX(-50%);
  width:44%;aspect-ratio:1;border-radius:50%;background:#4A5768}
.m1{left:14%}
.m2{left:44%;height:38%;background:linear-gradient(180deg,#5A6274,#2C3542)}
.m3{left:72%;height:31%}
.led{position:absolute;inset:0;opacity:.7;transition:opacity .12s linear;mix-blend-mode:screen}
.led-grid{position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 9px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 9px)}
.led-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;
  filter:drop-shadow(0 0 var(--glow,14px) rgba(100,227,242,.75))}
.led-line-1{font-size:clamp(13px,2.1vw,20px);letter-spacing:.34em;color:#CFF8FF;font-weight:600}
.led-line-2{font-size:clamp(56px,11vw,116px);font-weight:800;letter-spacing:-.05em;line-height:.9;
  color:#fff;text-shadow:0 0 28px rgba(100,227,242,.9)}
.led-line-3{font-size:clamp(11px,1.5vw,14px);letter-spacing:.3em;color:var(--cyan);font-weight:600}
.led-content>*{background:linear-gradient(90deg,#8DEEFA,#fff 45%,#8DEEFA);-webkit-background-clip:text;background-clip:text}
.led-sweep{position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
  animation:sweep 5.5s var(--ease) infinite}
@keyframes sweep{0%{left:-40%}60%,100%{left:110%}}
.glass-reflection{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.09) 0 12%,transparent 26% 62%,rgba(255,255,255,.05) 74% 82%,transparent 90%)}
.demo-ctrl{display:grid;gap:14px;margin-top:18px;padding:18px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-2)}
.demo-ctrl label{display:grid;gap:7px;font-size:13px;color:var(--txt-2)}
.demo-ctrl b{color:var(--cyan);font-weight:600;float:right}
.demo-note{margin:0;font-size:12.5px;color:var(--txt-3)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan-d),rgba(255,255,255,.12));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--cyan);border:3px solid #07090C;box-shadow:0 0 0 1px var(--cyan)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--cyan);border:3px solid #07090C}

/* ── Métricas ──────────────────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:78px auto 0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.metric{background:var(--bg);padding:26px 22px;text-align:center}
.metric b{display:block;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.04em;color:var(--txt);font-variant-numeric:tabular-nums}
.metric span{font-size:13px;color:var(--txt-3)}

/* ── Secciones ─────────────────────────────────────────────── */
.section{padding:100px 0;position:relative}
/* translúcida a propósito: deja ver la matriz de píxeles del fondo */
.section.alt{background:rgba(12,16,22,.74);border-block:1px solid var(--line)}
.sec-head{max-width:720px;margin-bottom:48px}
/* Desde la v0.6 cada página tiene su propio h1 dentro del riel de
   sección, así que todo lo que estilaba el h2 acepta también h1. */
.sec-head :is(h1,h2){font-size:clamp(27px,3.1vw,40px);margin-bottom:14px}
.sec-head p{color:var(--txt-2);margin:0}
.warn-inline{color:#E6CE9A !important;font-size:14px;border-left:2px solid var(--amber);padding-left:12px;margin-top:14px !important}
.foot-note{margin:22px 0 0;font-size:13px;color:var(--txt-3);max-width:78ch}

/* ── Tarjetas de servicio ──────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;padding:30px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));transition:.4s var(--ease);overflow:hidden}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(70% 60% at 50% 0%,rgba(100,227,242,.1),transparent 70%)}
.card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:1}
.card-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(100,227,242,.1);border:1px solid rgba(100,227,242,.22)}
.card-ico svg{width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--txt-2);font-size:14.5px}
.ticks{display:grid;gap:8px;margin:16px 0 20px;font-size:14px;color:var(--txt-2)}
.ticks li{position:relative;padding-left:22px}
.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:5px;
  border-left:1.6px solid var(--cyan);border-bottom:1.6px solid var(--cyan);transform:rotate(-45deg)}
.card-link{font-size:14px;color:var(--cyan);font-weight:560}
.card-link:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Chips / filtros ───────────────────────────────────────── */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:8px 16px;border-radius:100px;border:1px solid var(--line);background:transparent;
  color:var(--txt-2);font-size:13.5px;cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:var(--line-2);color:var(--txt)}
.chip.is-on{background:rgba(100,227,242,.12);border-color:var(--cyan);color:var(--cyan)}
.table-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.table-hint{font-size:12.5px;color:var(--txt-3);display:none}

/* ── Tabla de especificaciones ─────────────────────────────── */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.spec-table{width:100%;border-collapse:collapse;min-width:860px;font-size:14px}
.spec-table th{text-align:left;padding:14px 16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3);font-weight:600;background:var(--bg-3);border-bottom:1px solid var(--line);white-space:nowrap}
.spec-table td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--txt-2);white-space:nowrap}
.spec-table tbody tr{transition:background .2s}
.spec-table tbody tr:hover{background:rgba(100,227,242,.04)}
.spec-table tbody tr.is-hidden{display:none}
.spec-table td:first-child{color:var(--txt);font-weight:600}
.spec-table .hi{color:var(--cyan)}
.bar{position:relative;display:inline-block;width:64px;height:4px;border-radius:3px;
  background:rgba(255,255,255,.1);margin-left:8px;vertical-align:middle}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--cyan)}

/* ── Simulador ─────────────────────────────────────────────── */
.sim{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.sim-form,.sim-out{padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
.sim-out{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));position:sticky;top:96px}
.sim-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:block;margin-bottom:18px;border:0;padding:0}
.fld>span,.fld legend{display:block;font-size:13px;color:var(--txt-2);margin-bottom:7px;padding:0}
.fld b{float:right;color:var(--cyan)}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld input[type=number],
.fld select,.fld textarea{
  width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);
  background:#05070A;color:var(--txt);transition:.25s var(--ease);font-size:15px}
.fld textarea{resize:vertical;min-height:96px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--cyan);outline:none;
  box-shadow:0 0 0 3px rgba(100,227,242,.12)}
.fld input.err,.fld select.err{border-color:#F2686B}
.radios{display:grid;gap:8px}
.radios label{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;transition:.25s var(--ease);font-size:14px}
.radios label:hover{border-color:var(--line-2)}
.radios input{accent-color:var(--cyan);flex:none}
.radios label.on{border-color:var(--cyan);background:rgba(100,227,242,.07)}
.radios small{margin-left:auto;color:var(--txt-3);font-size:12.5px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border:1px solid var(--line);
  border-radius:12px;background:#05070A}
.seg-wrap{grid-template-columns:repeat(4,1fr)}
.seg button{padding:9px 6px;border:0;border-radius:8px;background:none;color:var(--txt-2);
  font-size:13.5px;cursor:pointer;transition:.25s var(--ease)}
.seg button:hover{color:var(--txt)}
.seg button.is-on{background:rgba(100,227,242,.14);color:var(--cyan);font-weight:560}

.sim-visual{margin-bottom:22px}
.sim-glass{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-2);background:linear-gradient(180deg,#141A22,#0A0E13)}
.sim-mods{position:absolute;inset:6px;display:grid;gap:2px}
.sim-mods span{background:rgba(100,227,242,.14);border:1px solid rgba(100,227,242,.3);border-radius:2px;
  animation:mod .5s var(--ease) backwards}
@keyframes mod{from{opacity:0;transform:scale(.85)}}
.sim-dim{display:block;text-align:center;font-size:12.5px;color:var(--txt-3);margin-top:9px}
.sim-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:20px}
.sim-stats>div{background:var(--bg-2);padding:13px 15px}
.sim-stats dt{font-size:12px;color:var(--txt-3);margin-bottom:3px}
.sim-stats dd{margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sim-price{padding:20px;border-radius:12px;border:1px solid rgba(100,227,242,.26);
  background:linear-gradient(180deg,rgba(100,227,242,.09),rgba(100,227,242,.02));margin-bottom:18px}
.sim-price-label{font-size:12.5px;color:var(--txt-2);letter-spacing:.06em;text-transform:uppercase}
.sim-price strong{display:block;font-size:clamp(21px,2.2vw,28px);letter-spacing:-.035em;margin:5px 0 8px;
  color:var(--cyan);font-variant-numeric:tabular-nums}
.sim-price small{font-size:12px;color:var(--txt-3);line-height:1.5;display:block}
.sim-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Alquiler ──────────────────────────────────────────────── */
.rent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rent{padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-3);
  position:relative;transition:.35s var(--ease)}
.rent:hover{transform:translateY(-4px);border-color:var(--line-2)}
.rent.is-featured{border-color:rgba(100,227,242,.4);background:linear-gradient(180deg,rgba(100,227,242,.08),var(--bg-3))}
.tag{position:absolute;top:-10px;left:26px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--cyan);color:#04171B;padding:3px 10px;border-radius:100px;font-weight:650}
.rent h3{font-size:18px;margin-bottom:6px}
.rent-use{font-size:13.5px;color:var(--txt-3);margin-bottom:18px}
.rent-price{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:15px}
.rent-price li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}
.rent-price span{color:var(--txt-3)}
.rent-price b{color:var(--txt);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ── Stands ────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s;margin-bottom:36px}
.steps li{padding:24px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  position:relative;overflow:hidden}
.steps li::after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);opacity:.5}
.steps b{font-size:12px;color:var(--cyan);letter-spacing:.14em;display:block;margin-bottom:12px}
.steps h3{font-size:16px;margin-bottom:8px}
.steps p{font-size:13.5px;color:var(--txt-2);margin:0}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pack{padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);text-align:center}
.pack h4{font-size:17px;margin-bottom:4px}
.pack p{color:var(--txt-3);font-size:13.5px;margin-bottom:14px}
.pack b{font-size:19px;color:var(--cyan);letter-spacing:-.03em}

/* ── Casos ─────────────────────────────────────────────────── */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.case{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3)}
.case-img{aspect-ratio:16/10;display:grid;place-items:center;font-size:13px;color:var(--txt-3);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px),
    linear-gradient(180deg,#151B23,#0C1015);border-bottom:1px solid var(--line)}
.case.is-slot .case-img span{border:1px dashed var(--line-2);padding:9px 16px;border-radius:8px}
.slot-tag{position:absolute;top:14px;right:14px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(245,185,66,.16);border:1px solid rgba(245,185,66,.4);color:var(--amber);
  padding:3px 9px;border-radius:100px}
.case h3{font-size:17px;padding:20px 22px 0}
.case dl{padding:14px 22px 24px;display:grid;gap:11px}
.case dt{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3)}
.case dd{margin:2px 0 0;font-size:14px;color:var(--txt-2)}
.case dd.ph{color:var(--amber);font-weight:560;letter-spacing:.02em}
.logos{margin-top:38px;padding:28px;border:1px dashed var(--line-2);border-radius:var(--r);text-align:center}
.logos>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.logo-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:20px 0 12px}
.logo-row i{display:block;padding:9px 16px;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);font-style:normal;font-size:13.5px;color:var(--txt-2);
  letter-spacing:.02em;white-space:nowrap}
.logos small{font-size:12.5px;color:var(--txt-3)}

/* ── Ferias ────────────────────────────────────────────────── */
.fairs{display:grid;gap:10px}
.fair{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;
  padding:18px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  transition:.3s var(--ease)}
.fair:hover{border-color:var(--line-2);transform:translateX(3px)}
.fair.is-hidden{display:none}
.fair-date{text-align:center;padding:8px 0;border-radius:10px;background:rgba(100,227,242,.08);
  border:1px solid rgba(100,227,242,.2)}
.fair-date b{display:block;font-size:19px;color:var(--cyan);letter-spacing:-.03em;line-height:1}
.fair-date span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.fair-info h3{font-size:16.5px;margin-bottom:4px}
.fair-info p{margin:0;font-size:13.5px;color:var(--txt-3)}
.fair-tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:100px;margin-left:8px;
  border:1px solid var(--line-2);color:var(--txt-3);vertical-align:middle}

/* ── FAQ ───────────────────────────────────────────────────── */
.acc{display:grid;gap:10px}
.acc details{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);overflow:hidden}
.acc summary{padding:18px 22px;cursor:pointer;font-weight:560;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:22px;color:var(--cyan);font-weight:300;line-height:1;transition:transform .3s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{color:var(--cyan)}
.acc p{margin:0;padding:0 22px 20px;color:var(--txt-2);font-size:14.5px;max-width:76ch}

/* ── Cotizar ───────────────────────────────────────────────── */
.quote{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.quote-copy h2{font-size:clamp(25px,2.7vw,34px);margin-bottom:14px}
.quote-copy p{color:var(--txt-2)}
.quote-copy a{color:var(--cyan)}
.contact-box{margin-top:26px;padding:20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);font-size:14px;color:var(--txt-2)}
.contact-box p:last-child{margin:0}
.quote-form{padding:30px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2))}
.check{display:flex;gap:11px;align-items:flex-start;font-size:12.8px;color:var(--txt-3);
  margin:6px 0 20px;line-height:1.55;cursor:pointer}
.check input{accent-color:var(--cyan);margin-top:2px;flex:none;width:16px;height:16px}
.check.err span{color:#F2686B}
.form-msg{margin:14px 0 0;font-size:14px;min-height:20px}
.form-msg.ok{color:var(--ok)}
.form-msg.bad{color:#F2686B}

/* ── Footer ────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);background:var(--bg-2);padding:56px 0 26px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
.foot-txt{margin-top:16px;font-size:13.5px;color:var(--txt-3);line-height:1.7}
.footer nav{display:grid;gap:9px;align-content:start;font-size:14px}
.footer h4{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.footer nav a{color:var(--txt-2);transition:color .2s}
.footer nav a:hover{color:var(--cyan)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--txt-3)}

/* ── WhatsApp flotante ─────────────────────────────────────── */
.wa{position:fixed;right:20px;bottom:20px;z-index:45;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;box-shadow:0 14px 34px -12px rgba(37,211,102,.8);
  transition:.3s var(--ease)}
.wa svg{width:29px;height:29px;fill:#fff}
.wa:hover{transform:scale(1.07)}

/* ════════════════════════════════════════════════════════════
   CAPA TECH / LED  (v0.2)
   La página se comporta como el propio producto: una matriz de
   píxeles que deja ver lo que hay detrás. Todo es decorativo y
   se apaga con prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */

/* ── Matriz de píxeles de fondo ────────────────────────────── */
.pixel-field{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(100,227,242,.055) 1px,transparent 1px) 0 0/100% var(--grid),
    linear-gradient(90deg,rgba(100,227,242,.055) 1px,transparent 1px) 0 0/var(--grid) 100%;
  -webkit-mask-image:radial-gradient(120% 85% at 50% 0%,#000 5%,rgba(0,0,0,.35) 45%,transparent 85%);
  mask-image:radial-gradient(120% 85% at 50% 0%,#000 5%,rgba(0,0,0,.35) 45%,transparent 85%);
  animation:gridDrift 26s linear infinite;
}
@keyframes gridDrift{to{background-position:0 var(--grid),var(--grid) 0}}

/* Halo cromático que respira detrás del contenido */
.pixel-field::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(42% 34% at 78% 8%,rgba(155,123,255,.10),transparent 68%),
    radial-gradient(38% 30% at 12% 42%,rgba(100,227,242,.08),transparent 70%);
  animation:auraShift 18s ease-in-out infinite alternate;
}
@keyframes auraShift{to{transform:translate3d(-3%,2%,0) scale(1.08)}}

/* ── Textura de pantalla (scanlines) ───────────────────────── */
.scanlines{
  position:fixed;inset:0;z-index:3;pointer-events:none;mix-blend-mode:overlay;opacity:.55;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
}
/* Barrido de refresco: recorre la pantalla como un panel real.
   Se anima con transform (compuesto en GPU), no con `top`. */
.scanlines::after{
  content:"";position:absolute;left:0;right:0;top:0;height:26vh;will-change:transform;
  background:linear-gradient(180deg,transparent,rgba(100,227,242,.055),transparent);
  animation:refreshPass 9s linear infinite;
}
@keyframes refreshPass{0%{transform:translate3d(0,-30vh,0)}100%{transform:translate3d(0,110vh,0)}}

main{position:relative;z-index:1}
.footer{position:relative;z-index:1;background:rgba(12,16,22,.82)}

/* ── Hero: prisma y partículas ─────────────────────────────── */
.hero h1 em{
  background:linear-gradient(100deg,
    var(--cyan) 0%,#FFFFFF 16%,var(--violet) 34%,var(--magenta) 48%,
    var(--cyan) 66%,#FFFFFF 84%,var(--cyan) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:prismFlow 11s linear infinite;
}
@keyframes prismFlow{to{background-position:-300% 0}}

/* Píxeles sueltos que ascienden en el hero — los inyecta main.js */
.pixels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.pixels i{
  position:absolute;bottom:-12px;width:3px;height:3px;border-radius:1px;
  background:var(--px-c,var(--cyan));box-shadow:0 0 8px var(--px-c,var(--cyan));
  opacity:0;animation:pxRise var(--px-d,14s) linear var(--px-delay,0s) infinite;
}
@keyframes pxRise{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:.85}
  70%{opacity:.5}
  100%{opacity:0;transform:translateY(calc(-1 * var(--px-h,70vh))) scale(1.1)}
}
.hero-grid,.metrics{z-index:1}

/* La escena de la vitrina gana el marco de un panel real */
.demo-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(100,227,242,.18),inset 0 0 60px -20px rgba(100,227,242,.35);
}

/* ── Eyebrow con testigo LED ───────────────────────────────── */
.eyebrow{position:relative;padding-left:16px}
.eyebrow::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:1px;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:ledBlink 2.6s var(--ease) infinite;
}
@keyframes ledBlink{0%,100%{opacity:1}45%{opacity:.25}}

/* ── Encabezado de sección con barra de luz ────────────────── */
.sec-head :is(h1,h2){position:relative}
.sec-head :is(h1,h2)::after{
  content:"";display:block;width:54px;height:2px;margin-top:18px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:var(--glow-cyan);
}

/* ── Botones: barrido de luz ───────────────────────────────── */
.btn>*{position:relative;z-index:1}
.btn-primary::after,.btn-line::after{
  content:"";position:absolute;inset:0;z-index:0;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);
  transition:transform .75s var(--ease);
}
.btn-line::after{background:linear-gradient(105deg,transparent 34%,rgba(100,227,242,.22) 50%,transparent 66%)}
.btn-primary:hover::after,.btn-line:hover::after{transform:translateX(130%)}
.btn-primary:hover{box-shadow:0 10px 26px -12px rgba(100,227,242,.7),var(--glow-cyan)}

/* ── Navegación: sección activa ────────────────────────────── */
.nav-links a.is-active{color:var(--cyan);text-shadow:0 0 14px rgba(100,227,242,.45)}
.nav-links a.is-active::after{right:0;box-shadow:0 0 8px var(--cyan)}
.scroll-progress i{box-shadow:0 0 12px rgba(100,227,242,.8)}

/* ── Tarjetas: foco que sigue el cursor + borde prisma ─────── */
.card,.rent,.pack,.case,.steps li,.fair{--mx:50%;--my:0%}
.card::after,.rent::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  border-radius:inherit;transition:opacity .35s var(--ease);
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(100,227,242,.13),transparent 62%);
}
.card:hover::after,.rent:hover::after{opacity:1}
/* .rent NO lleva overflow:hidden: la etiqueta "Más solicitado" sobresale
   por arriba. El halo se recorta con border-radius:inherit en el ::after.
   Se excluye .tag para no pisarle su position:absolute. */
.rent>:not(.tag){position:relative;z-index:1}
.tag{z-index:2}
.card:hover{border-color:rgba(100,227,242,.35);box-shadow:0 22px 50px -34px rgba(100,227,242,.55)}
.rent:hover{border-color:rgba(155,123,255,.35);box-shadow:0 22px 50px -34px rgba(155,123,255,.5)}

/* Línea superior que se enciende al entrar el cursor */
.card::before{background:radial-gradient(70% 60% at var(--mx) 0%,rgba(100,227,242,.14),transparent 72%)}
.card-ico{transition:.4s var(--ease)}
.card:hover .card-ico{box-shadow:var(--glow-cyan);border-color:rgba(100,227,242,.5)}

.rent.is-featured{box-shadow:inset 0 1px 0 rgba(100,227,242,.25)}
.tag{box-shadow:var(--glow-cyan)}

/* ── Métricas: retícula encendida ──────────────────────────── */
.metrics{position:relative;background:rgba(255,255,255,.09)}
.metric{background:rgba(7,9,12,.86);transition:.35s var(--ease)}
.metric:hover{background:rgba(12,20,26,.92)}
.metric b{background:linear-gradient(180deg,#FFFFFF,var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── Stands: los pasos se conectan con una pista de luz ────── */
.steps li::after{
  background:linear-gradient(90deg,var(--cyan),var(--violet),transparent);
  opacity:.35;transition:opacity .4s var(--ease);
}
.steps li:hover::after{opacity:1;box-shadow:var(--glow-cyan)}
.steps li{transition:.35s var(--ease)}
.steps li:hover{transform:translateY(-3px);border-color:var(--line-2)}
.steps b{text-shadow:0 0 12px rgba(100,227,242,.5)}

/* ── Chips y filtros con brillo neón ───────────────────────── */
.chip.is-on{box-shadow:0 0 0 1px rgba(100,227,242,.2),var(--glow-cyan)}
.seg button.is-on{box-shadow:0 0 18px -6px rgba(100,227,242,.7)}

/* ── Tabla: fila enfocada ──────────────────────────────────── */
.spec-table tbody tr:hover{background:rgba(100,227,242,.06);box-shadow:inset 2px 0 0 var(--cyan)}
.bar i{box-shadow:0 0 8px rgba(100,227,242,.8)}

/* ── Simulador: la retícula late como un panel encendido ───── */
.sim-glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.08) 0 14%,transparent 30% 66%,rgba(255,255,255,.05) 76% 84%,transparent 92%);
}
.sim-mods span{box-shadow:0 0 10px -2px rgba(100,227,242,.5)}
.sim-price{box-shadow:inset 0 0 40px -22px rgba(100,227,242,.9)}
.sim-price strong{text-shadow:0 0 20px rgba(100,227,242,.35)}

/* ── Casos y ferias ────────────────────────────────────────── */
.case{transition:.4s var(--ease)}
.case:hover{transform:translateY(-4px);border-color:rgba(100,227,242,.3)}
.case-img{position:relative;overflow:hidden}
.case-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(100,227,242,.05) 0 1px,transparent 1px 6px);
}
.fair{position:relative;overflow:hidden}
.fair::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--cyan),var(--violet));
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease);
}
.fair:hover::before{transform:scaleY(1)}
.fair-date b{text-shadow:0 0 14px rgba(100,227,242,.5)}
.logo-row i{transition:.35s var(--ease)}
.logo-row i:hover{border-color:rgba(100,227,242,.35);box-shadow:var(--glow-cyan)}

/* ── FAQ ───────────────────────────────────────────────────── */
.acc details[open]{border-color:rgba(100,227,242,.28);box-shadow:inset 0 0 40px -28px rgba(100,227,242,.9)}
.acc summary::after{text-shadow:0 0 12px rgba(100,227,242,.6)}

/* ── Formularios ───────────────────────────────────────────── */
.fld input:focus,.fld select:focus,.fld textarea:focus{
  box-shadow:0 0 0 3px rgba(100,227,242,.12),0 0 22px -10px rgba(100,227,242,.9)}
.radios label.on{box-shadow:inset 0 0 30px -20px rgba(100,227,242,1)}

/* ── Silencio total con movimiento reducido ────────────────── */
@media (prefers-reduced-motion:reduce){
  .pixel-field,.pixel-field::after,.scanlines::after,.hero h1 em,.eyebrow::before,.pixels i{
    animation:none !important}
  .pixels{display:none}
  .scanlines::after{display:none}
  .hero h1 em{background-position:0 0}
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:1080px){
  .cards,.cases,.packs{grid-template-columns:1fr 1fr}
  .rent-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .sim{grid-template-columns:1fr}
  .sim-out{position:static}
  .quote{grid-template-columns:1fr;gap:28px}
  .nav-links{position:fixed;inset:0 0 auto;top:0;flex-direction:column;gap:0;padding:96px 24px 32px;
    background:rgba(7,9,12,.98);backdrop-filter:blur(20px);transform:translateY(-100%);
    transition:transform .4s var(--ease);font-size:19px;border-bottom:1px solid var(--line)}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line)}
  body.menu-open .nav-links{transform:none}
  .burger{display:flex;z-index:2}
  .hide-sm{display:none}
  .table-hint{display:inline}
}
@media (max-width:680px){
  .section{padding:70px 0}
  .metrics{grid-template-columns:1fr 1fr}
  .cards,.cases,.packs,.rent-grid,.steps,.foot-grid,.sim-row,.sim-actions{grid-template-columns:1fr}
  .sim-stats{grid-template-columns:1fr}
  .seg,.seg-wrap{grid-template-columns:1fr 1fr}
  .fair{grid-template-columns:70px 1fr;gap:14px}
  .fair .btn{grid-column:1/-1}
  .hero-specs{gap:22px}
  .wrap{padding:0 18px}
  .sim-form,.sim-out,.quote-form{padding:22px}
}

/* ════════════════════════════════════════════════════════════
   v0.3 — DATOS REALES DEL DOSSIER
   1. Riel de sección (rediseño del encabezado)
   2. Ficha técnica y comparativa
   3. Simulador de módulos verticales
   4. Secciones nuevas: segmentos, contratación, cobertura
   ════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1 · RIEL DE SECCIÓN
   El encabezado deja de ser una etiqueta pequeña flotando sobre
   un título: pasa a ser un bloque con anatomía propia.

   ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔  banda superior
   ┌────┐
   │ 03 │  HERRAMIENTA ──────────────────▪   riel + testigo
   └────┘
   Simulador de vitrina.                     titular
   Ingrese las medidas de su vidrio…         bajada

   El número lo pone un contador CSS: el HTML no lleva marcado
   extra y las secciones se renumeran solas si se reordenan.
   ───────────────────────────────────────────────────────────── */

/* Alfa del testigo. Registrarla permite animarla; sin soporte de
   @property el valor salta a mitad de ciclo, que es justo el
   parpadeo que se busca. */
@property --riel-led{syntax:"<number>";inherits:false;initial-value:1}

:root{
  --font-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono","SF Mono",
              Menlo,Consolas,"Liberation Mono",monospace;
  --riel-fs:clamp(13.5px,.3vw + 12.7px,15.5px);
  --riel-num:clamp(17px,.55vw + 15px,22px);
  --riel-gap:clamp(11px,1.1vw,18px);
  --riel-etq:#A8F0FA;
}

/* Etiqueta base — mejora también la del hero y las sueltas */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--riel-fs);
  font-weight:700;
  letter-spacing:.18em;
  color:var(--riel-etq);
  line-height:1.3;
}

/* Numeración automática en el orden real del documento */
main{counter-reset:riel}
.sec-head,.quote-copy{counter-increment:riel}

.sec-head,.quote-copy{
  position:relative;
  border-top:1px solid var(--line);
  padding-top:clamp(14px,1.5vw,20px);
}
.sec-head{
  --riel-medida:760px;
  max-width:none;                       /* el riel cruza la columna */
  margin-bottom:clamp(36px,4vw,58px);
}
/* Arranque encendido de la banda */
.sec-head::before,
.quote-copy::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;
  width:clamp(56px,8vw,120px);pointer-events:none;
  background:linear-gradient(90deg,var(--cyan),rgba(100,227,242,0));
  box-shadow:0 0 12px rgba(100,227,242,.5);
}

/* Fila del riel */
:is(.sec-head,.quote-copy) > .eyebrow{
  display:flex;align-items:center;gap:var(--riel-gap);width:100%;
  padding-left:0;                       /* anula el hueco del testigo v0.2 */
  margin:0 0 clamp(15px,1.7vw,23px);
  letter-spacing:.19em;
  text-shadow:0 0 20px rgba(100,227,242,.25);
}

/* Placa del número: copia el módulo LED del simulador.
   Radio de 3 px a propósito — en este sitio el radio de 100 px
   significa "se puede pulsar" (.chip, .tag) y un rótulo no lo es. */
:is(.sec-head,.quote-copy) > .eyebrow::before{
  content:counter(riel,decimal-leading-zero);
  position:static;flex:none;
  display:grid;place-items:center;
  width:auto;height:auto;
  padding:.36em .46em .34em;
  border-radius:3px;
  border:1px solid rgba(100,227,242,.30);
  background:
    repeating-linear-gradient(90deg,rgba(100,227,242,.13) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(100,227,242,.09) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,rgba(100,227,242,.16),rgba(100,227,242,.05));
  box-shadow:inset 0 0 22px -12px rgba(100,227,242,1),
             0 0 20px -12px rgba(100,227,242,.9);
  color:var(--cyan);
  font-size:var(--riel-num);font-weight:700;letter-spacing:.04em;line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(100,227,242,.5);
  transform:none;animation:none;        /* anula el testigo puntual v0.2 */
}
/* Donde se admita, el número no se lee en voz alta */
@supports (content:"a" / "b"){
  :is(.sec-head,.quote-copy) > .eyebrow::before{
    content:counter(riel,decimal-leading-zero) / ""}
}

/* Línea de luz + testigo: la corriente llega y enciende el panel */
:is(.sec-head,.quote-copy) > .eyebrow::after{
  content:"";
  flex:1 1 60px;min-width:26px;height:7px;
  margin-left:-.19em;
  background:
    linear-gradient(rgb(100 227 242 / var(--riel-led,1)) 0 0) no-repeat 100% 50% / 7px 7px,
    linear-gradient(90deg,rgba(100,227,242,.10),rgba(155,123,255,.32) 55%,rgba(100,227,242,.62))
      no-repeat 0 50% / calc(100% - 13px) 1px;
  filter:drop-shadow(0 0 7px rgba(100,227,242,.45));
  animation:rielLed 2.6s var(--ease) infinite;
}
@keyframes rielLed{0%,100%{--riel-led:1}45%{--riel-led:.22}}

/* Entrada: la línea se traza al revelarse la sección */
:is(.sec-head,.quote-copy).reveal.in > .eyebrow::after{
  animation:rielTrazo .85s var(--ease) .12s both,
            rielLed 2.6s var(--ease) 1s infinite;
}
@keyframes rielTrazo{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Titular y bajada: el riel cruza la columna, el texto no */
.sec-head > :is(h1,h2){
  max-width:var(--riel-medida);
  font-size:clamp(29px,3.2vw,44px);
  line-height:1.07;letter-spacing:-.03em;
  text-wrap:balance;
  margin-bottom:clamp(12px,1.1vw,17px);
}
.sec-head > p{max-width:min(100%,62ch);text-wrap:pretty}
.quote-copy > h2{text-wrap:balance}
.sec-head :is(h1,h2)::after{content:none}   /* la barra de 54px la sustituye el riel */

/* Mismo idioma para las microetiquetas */
.footer h4,.logos > span,.sim-price-label,.fair-date span,.segmento b,.cob span{
  font-family:var(--font-mono)}

/* ─────────────────────────────────────────────────────────────
   2 · FICHA TÉCNICA Y COMPARATIVA
   ───────────────────────────────────────────────────────────── */
.ficha{
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px);
  margin:0;padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
}
.ficha-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px dashed var(--line);
}
.ficha-row dt{font-size:14.5px;color:var(--txt-2)}
.ficha-row dd{margin:0;font-family:var(--font-mono);font-size:14.5px;font-weight:600;
  color:var(--txt);text-align:right;font-variant-numeric:tabular-nums}
.ficha-row dd.hi{color:var(--cyan);text-shadow:0 0 16px rgba(100,227,242,.35)}

.comparativa{margin-top:26px}
.comparativa .spec-table{min-width:640px}
.comparativa td.no{color:var(--txt-3)}
.comparativa td.no::before{content:"✕";color:#F2686B;margin-right:9px;font-weight:700}
.comparativa td.si{color:var(--txt)}
.comparativa td.si::before{content:"✓";color:var(--ok);margin-right:9px;font-weight:700}

/* ─────────────────────────────────────────────────────────────
   3 · SIMULADOR DE MÓDULOS VERTICALES
   El dibujo respeta la proporción real del vidrio y la del
   módulo. El área activa se ancla ABAJO porque la instalación
   va de abajo hacia arriba, y el sobrante queda a la vista.
   ───────────────────────────────────────────────────────────── */
.sim-glass{
  position:relative;margin-inline:auto;
  /* Una sola declaracion de ancho: `inline-size` y `width` son la misma
     propiedad, y tener las dos hacia que la segunda anulara el limite y
     el vidrio se estirara al 100 % del contenedor.
     El alto se acota a 420 px para que una vitrina muy vertical no
     empuje el resto de la ficha fuera de la pantalla. */
  width:min(100%, calc(var(--ar,1.6) * 420px));
  max-height:420px;
  aspect-ratio:var(--ar,1.6);
  border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#141A22,#0A0E13);
}
.sim-area{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  outline:1px dashed rgba(100,227,242,.35);outline-offset:2px;
}
.sim-mods{
  position:static;inset:auto;           /* anula el inset:6px de la v0.1 */
  display:grid;inline-size:100%;block-size:100%;gap:var(--gap,2px);
  grid-template-columns:repeat(var(--cols,1),1fr);
  grid-template-rows:repeat(var(--rows,1),1fr);
}
.sim-mods span{
  background:rgba(100,227,242,.14);border:1px solid rgba(100,227,242,.3);
  border-radius:2px;transform-origin:bottom center;
  animation:modSube .45s var(--ease) backwards;animation-delay:var(--d,0ms);
}
@keyframes modSube{from{opacity:0;transform:translateY(14px) scaleY(.55)}}

/* Retículas muy densas: una sola caja con las juntas pintadas */
.sim-mods.is-dense{
  gap:0;
  background:
    repeating-linear-gradient(90deg,rgba(100,227,242,.30) 0 1px,transparent 1px calc(100% / var(--cols))),
    repeating-linear-gradient(0deg, rgba(100,227,242,.30) 0 1px,transparent 1px calc(100% / var(--rows))),
    rgba(100,227,242,.12);
}

/* Línea de montaje en el canto inferior: por ahí empieza la instalación */
.sim-base{
  position:absolute;inset:auto 0 0 0;height:2px;opacity:.55;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.sim-cota{
  position:absolute;top:6px;right:8px;font-size:11px;color:var(--txt-3);
  background:rgba(0,0,0,.5);padding:2px 7px;border-radius:6px;
  font-family:var(--font-mono);
}
.sim-glass.no-escala::after{
  content:"esquema no a escala";
  position:absolute;left:8px;bottom:8px;font-size:10.5px;color:var(--txt-3);
  background:rgba(0,0,0,.5);padding:2px 7px;border-radius:6px;
}
.sim-aviso{
  margin:0 0 18px;padding:13px 16px;font-size:13.5px;line-height:1.55;
  border-radius:10px;border:1px solid rgba(245,185,66,.35);
  background:rgba(245,185,66,.08);color:#F1DFB6;
}
.sim-price small{margin-top:8px}

/* ─────────────────────────────────────────────────────────────
   4 · SECCIONES NUEVAS
   ───────────────────────────────────────────────────────────── */

/* Segmentos de aplicación */
.segmentos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.segmento{background:var(--bg-2);padding:26px 24px;transition:.35s var(--ease)}
.segmento:hover{background:var(--bg-3)}
.segmento b{display:block;font-size:12px;color:var(--cyan);letter-spacing:.14em;margin-bottom:14px}
.segmento h3{font-size:17px;margin-bottom:8px}
.segmento p{margin:0;font-size:13.5px;color:var(--txt-2)}

/* Bloque destacado (revenue-share) */
.destacado{
  margin-top:26px;padding:clamp(26px,3.4vw,42px);
  border:1px solid rgba(100,227,242,.24);border-radius:var(--r-lg);
  background:
    radial-gradient(70% 120% at 12% 0%,rgba(155,123,255,.12),transparent 62%),
    linear-gradient(180deg,rgba(100,227,242,.07),rgba(100,227,242,.02));
}
.destacado .eyebrow{margin-bottom:14px}
.destacado h3{font-size:clamp(20px,2.2vw,28px);margin-bottom:14px;max-width:24ch;text-wrap:balance}
.destacado p{color:var(--txt-2);max-width:70ch}
.destacado b{color:var(--cyan)}

/* Contratación: modelos + proceso */
.contrata{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,58px)}
.bloque-tit{font-size:20px;margin-bottom:18px}
.modelos .ticks{gap:14px;font-size:14.5px}
.modelos .ticks b{color:var(--txt)}
.pasos{display:grid;gap:18px}
.pasos li{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start}
.pasos b{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(100,227,242,.32);background:rgba(100,227,242,.09);
  color:var(--cyan);font-size:14px;font-family:var(--font-mono);
}
.pasos h4{font-size:16px;margin-bottom:5px}
.pasos p{margin:0;font-size:13.5px;color:var(--txt-2)}

/* Cobertura */
.cobertura{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cob{background:var(--bg-2);padding:26px 24px}
.cob span{display:block;font-size:11.5px;color:var(--cyan);letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:12px}
.cob h3{font-size:17.5px;margin-bottom:8px}
.cob p{margin:0;font-size:13.5px;color:var(--txt-2)}

/* Casos con montaje real */
.case-txt{padding:0 22px 24px;margin:0;font-size:14px;color:var(--txt-2)}
.case h3{padding:20px 22px 6px}

/* La foto ocupa todo el recuadro; el marcador queda debajo por si
   el archivo todavía no existe (lo retira main.js si carga bien). */
.case-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;transition:opacity .5s var(--ease);
}
.case-img img.cargada{opacity:1}
.case:hover .case-img img.cargada{transform:scale(1.03)}
.case-img img{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.case-img.con-foto span{display:none}

/* ─────────────────────────────────────────────────────────────
   5 · RESPONSIVE DE LO NUEVO
   ───────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .segmentos{grid-template-columns:1fr 1fr}
  .cobertura{grid-template-columns:1fr}
}
@media (max-width:920px){
  .contrata{grid-template-columns:1fr}
}
@media (max-width:680px){
  .ficha{grid-template-columns:1fr;gap:0}
  .segmentos{grid-template-columns:1fr}
  .sec-head{margin-bottom:clamp(28px,7vw,38px);padding-top:13px}
  /* Bajo 680px la línea baja a su propia fila: etiquetas largas
     como "Alquiler de pantallas" no aplastan el riel. */
  :is(.sec-head,.quote-copy) > .eyebrow{
    flex-wrap:wrap;row-gap:11px;letter-spacing:.12em;margin-bottom:15px}
  :is(.sec-head,.quote-copy) > .eyebrow::after{
    flex:1 0 100%;min-width:0;margin-left:0}
  .sec-head > :is(h1,h2){font-size:clamp(26px,6.6vw,33px)}
}

/* ── Movimiento reducido ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  :is(.sec-head,.quote-copy) > .eyebrow::after,
  :is(.sec-head,.quote-copy).reveal.in > .eyebrow::after{
    animation:none !important;clip-path:none !important;--riel-led:1;
  }
  .sim-mods span{animation:none}
}

/* ════════════════════════════════════════════════════════════
   v0.4 — COMPOSICIÓN CENTRADA
   Todo el contenido de presentación pasa al eje central. El riel
   de sección se vuelve simétrico: la etiqueta va centrada y la
   línea de luz baja debajo del titular, con el testigo en medio.

   Se mantiene alineado a propósito (razón funcional, no estética):
   · la ficha técnica  — es clave↔valor y ocupa los dos márgenes,
     que es justamente lo que se pide de un dato tabular;
   · el texto DENTRO de los campos del formulario — se escribe de
     izquierda a derecha;
   · las columnas de la tabla comparativa se centran salvo la
     primera, que es el criterio y ancla la lectura de la fila.
   ════════════════════════════════════════════════════════════ */

/* ── 1 · Encabezado de sección simétrico ───────────────────── */
.sec-head,.quote-copy{text-align:center}
.sec-head{max-width:none;margin-inline:auto}
.sec-head > :is(h1,h2),.sec-head > p{margin-inline:auto}
.quote-copy > h2,.quote-copy > p{margin-inline:auto}

/* El arranque encendido de la banda pasa al centro */
.sec-head::before,
.quote-copy::before{
  left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(100,227,242,0),var(--cyan),rgba(100,227,242,0));
  width:clamp(90px,14vw,190px);
}

/* ── Etiqueta de sección: oculta a la vista, viva para el índice ──
   El rótulo numerado («03  HERRAMIENTA») se retira de la pantalla
   porque a ese cuerpo competía mal con el titular. NO se borra:
   sigue en el DOM, así que los buscadores y los lectores de
   pantalla lo siguen leyendo como contexto de la sección.

   Se usa la técnica de recorte, no display:none ni visibility:
   esas dos SÍ lo esconderían también de los lectores de pantalla
   y de la indexación.

   Nota: con el texto recortado, la búsqueda rápida del navegador
   (Ctrl+F) ya no lo encuentra. Los buscadores sí, porque leen el
   HTML, no lo pintado.

   Para volver a mostrarlo: borrar este bloque.                  */
:is(.sec-head,.quote-copy) > .eyebrow{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
/* Con la etiqueta fuera, sobran su placa y su línea */
:is(.sec-head,.quote-copy) > .eyebrow::before,
:is(.sec-head,.quote-copy) > .eyebrow::after{content:none}

/* El encabezado se recompone sin ella: la banda superior queda
   como separador y el titular sube a ocupar su sitio. */
.sec-head,.quote-copy{padding-top:clamp(26px,3vw,38px)}

/* …y reaparece centrada bajo el titular, con el testigo en medio.
   Dos capas: el filete a ambos lados y el píxel cuadrado central. */
.sec-head > :is(h1,h2)::after{
  content:"";
  display:block;
  width:min(280px,64%);height:7px;
  border-radius:0;box-shadow:none;      /* anula la barra de 54px de la v0.2 */
  margin:clamp(16px,1.8vw,22px) auto 0;
  background:
    linear-gradient(rgb(100 227 242 / var(--riel-led,1)) 0 0)
      no-repeat 50% 50% / 7px 7px,
    linear-gradient(90deg,
      rgba(100,227,242,0),rgba(155,123,255,.42) 42%,
      rgba(155,123,255,.42) 58%,rgba(100,227,242,0))
      no-repeat 50% 50% / 100% 1px;
  filter:drop-shadow(0 0 7px rgba(100,227,242,.45));
  animation:rielLed 2.6s var(--ease) infinite;
}
/* Se traza desde el centro hacia los dos extremos al revelarse */
.sec-head.reveal.in > :is(h1,h2)::after{
  animation:rielAbre .85s var(--ease) .12s both,
            rielLed 2.6s var(--ease) 1s infinite;
}
@keyframes rielAbre{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}

/* ── 2 · Hero a una sola columna ───────────────────────────── */
.hero-grid{grid-template-columns:1fr;gap:clamp(38px,4.5vw,56px);justify-items:center}
.hero-copy{text-align:center;max-width:860px}
.hero .lead{margin-inline:auto}
.hero-btns,.hero-specs{justify-content:center}
.hero-specs{display:flex;text-align:center}
.demo{width:100%;max-width:760px}

/* ── 3 · Tarjetas y bloques ────────────────────────────────── */
.card,.segmento,.cob,.case,.rent,.pack,.destacado,.pasos li > div{text-align:center}
.card-ico{margin-inline:auto}
.destacado h3,.destacado p{margin-inline:auto}

/* Etiquetas sueltas (hero y bloque destacado): no llevan número ni
   riel, así que su testigo LED pasa al flujo para poder centrarse. */
.hero-copy > .eyebrow,.destacado > .eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding-left:0;
}
.hero-copy > .eyebrow::before,.destacado > .eyebrow::before{
  position:static;transform:none;flex:none;
}
.bloque-tit{text-align:center}
.case-txt{text-align:center}

/* Los ticks pasan la marca de verificación al frente del texto,
   porque una viñeta absoluta a la izquierda impide centrar. */
.ticks{text-align:center}
.ticks li{padding-left:0}
.ticks li::before{
  position:static;display:inline-block;vertical-align:middle;
  margin:-4px 9px 0 0;
}

/* El proceso: número centrado sobre el texto */
.pasos li{grid-template-columns:1fr;justify-items:center;gap:11px}

/* ── 4 · Textos de apoyo y pies ────────────────────────────── */
.foot-note,.demo-note,.sim-dim,.logos small,.rent-use,.sim-aviso{text-align:center}
.foot-note{margin-inline:auto}
.metrics,.logos{text-align:center}
.foot-grid{text-align:center;justify-items:center}
.footer nav{justify-items:center}
.foot-bottom{justify-content:center;text-align:center}

/* ── 5 · Tabla comparativa ─────────────────────────────────── */
/* Las dos columnas de comparación se centran; la primera no,
   porque es el criterio y ancla la lectura de cada fila. */
.comparativa th,.comparativa td{text-align:center}
.comparativa th:first-child,.comparativa td:first-child{text-align:left}
.comparativa td.no::before,.comparativa td.si::before{margin-right:7px}

/* ── 6 · Formulario y simulador ────────────────────────────── */
/* Se centran las etiquetas; lo que se escribe sigue a la izquierda. */
.fld > span,.fld legend,.check,.sim-price{text-align:center}
.fld legend{margin-inline:auto}
.check{justify-content:center}
.fld b{float:none;margin-left:6px}
.radios label{justify-content:center;text-align:center}
.radios small{margin-left:0}
.sim-stats dt,.sim-stats dd{text-align:center}
.sim-price small{margin-inline:auto;max-width:52ch}
.contact-box{text-align:center}

/* La insignia "Más solicitado" se centra sobre el borde superior */
.tag{left:50%;transform:translateX(-50%)}

/* El valor del control deja de flotar a la derecha: va tras su rótulo */
.demo-ctrl b{float:none;margin-left:6px}
.demo-ctrl label > span{text-align:center}

/* El logo del pie se centra con su bloque */
.foot-grid .logo{justify-content:center}

/* ── 7 · FAQ y ferias ──────────────────────────────────────── */
.acc summary{justify-content:center;gap:12px;position:relative;padding-inline:44px}
.acc summary::after{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.acc details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.acc p{margin-inline:auto;text-align:center}
.fair-info{text-align:center}

/* ── 8 · Responsive ────────────────────────────────────────── */
@media (max-width:680px){
  /* En móvil la etiqueta ya no necesita partirse: sin línea lateral
     que empujar, vuelve a una sola fila centrada. */
  :is(.sec-head,.quote-copy) > .eyebrow{flex-wrap:nowrap;row-gap:0}
  .sec-head > :is(h1,h2)::after{width:min(220px,78%)}
  .acc summary{padding-inline:20px 44px}
}

/* ── 9 · Movimiento reducido ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .sec-head > :is(h1,h2)::after,.sec-head.reveal.in > :is(h1,h2)::after{
    animation:none !important;clip-path:none !important;--riel-led:1;
  }
}

/* ════════════════════════════════════════════════════════════
   PÁGINAS LEGALES
   Aquí el texto va alineado a la izquierda a propósito: son
   documentos largos de lectura continua, no piezas de landing.
   Centrar párrafos de este largo dificulta seguir el renglón.
   ════════════════════════════════════════════════════════════ */
.legal{position:relative;z-index:1;padding:clamp(48px,6vw,84px) 0 70px;text-align:left}
.legal h1{
  font-size:clamp(28px,3.4vw,42px);margin-bottom:16px;text-wrap:balance;
}
.legal h2{
  font-size:clamp(18px,1.8vw,22px);margin:clamp(34px,4vw,48px) 0 14px;
  padding-top:18px;border-top:1px solid var(--line);color:var(--txt);
}
.legal p{color:var(--txt-2);max-width:70ch}
.legal a{color:var(--cyan)}
.legal a:hover{text-decoration:underline;text-underline-offset:3px}
.legal b{color:var(--txt)}
.legal code{
  font-family:var(--font-mono);font-size:.88em;
  background:rgba(245,185,66,.12);border:1px solid rgba(245,185,66,.3);
  color:var(--amber);padding:1px 6px;border-radius:5px;
}

.legal-meta{
  font-size:13.5px;color:var(--txt-3);line-height:1.7;
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
.legal-aviso{
  margin:26px 0 8px;padding:16px 20px;border-radius:var(--r);
  border:1px solid rgba(245,185,66,.32);background:rgba(245,185,66,.07);
  color:#F1DFB6;font-size:14px;line-height:1.6;
}
.legal-aviso b{color:var(--amber)}

.legal-lista{display:grid;gap:10px;margin:0 0 16px;color:var(--txt-2);max-width:70ch}
.legal-lista li{position:relative;padding-left:20px;font-size:15px}
.legal-lista li::before{
  content:"";position:absolute;left:2px;top:10px;
  width:5px;height:5px;border-radius:1px;background:var(--cyan);
}

.legal-datos{display:grid;gap:1px;margin:0 0 8px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.legal-datos > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  background:var(--bg-2);padding:13px 18px;flex-wrap:wrap;
}
.legal-datos dt{font-size:13.5px;color:var(--txt-3)}
.legal-datos dd{margin:0;font-size:14.5px;color:var(--txt);text-align:right}

.legal-pie{
  margin-top:clamp(40px,5vw,60px);padding-top:22px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--txt-3);
}

/* Trampa antispam: fuera de la vista y del recorrido con tabulador,
   pero presente en el DOM para que los robots la rellenen. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal + .footer .foot-bottom a{color:var(--txt-2)}
.legal + .footer .foot-bottom a:hover{color:var(--cyan)}

/* Nota de datos pendientes dentro del bloque de contacto */
.contact-nota{margin-top:12px !important;font-size:12px;color:var(--txt-3)}

/* ── Logo de marca ─────────────────────────────────────────────
   El logo trae el nombre incorporado, asi que sustituye al SVG y al
   texto que habia antes. Se sirve al doble de resolucion (343x192)
   y se muestra a la mitad, para que no se vea blando en pantallas
   de alta densidad. */
.logo-img{height:40px;width:auto;display:block}
.footer .logo-img{height:34px}
.legal .logo-img{height:31px}
@media (max-width:680px){.logo-img{height:28px}}

/* ════════════════════════════════════════════════════════════
   v0.5 — EMISION EN VIVO DEL SIMULADOR
   Los modulos dejan de ser cuadros de color: pasan a ser las
   divisiones fisicas de UNA sola pieza publicitaria en movimiento.
   Asi se entiende de un vistazo que con 2 paneles cabe una franja
   y con 8 una pieza completa.
   ════════════════════════════════════════════════════════════ */

/* Capa de contenido, debajo de las juntas */
.sim-emision{
  position:absolute;inset:0;overflow:hidden;border-radius:2px;
  background:radial-gradient(120% 90% at 50% 105%,#0E2A38,#071019 70%);
}

/* La pieza: mensaje comercial que rota. El cuerpo lo fija main.js
   segun el tamanio del area, para que se lea igual en 2 o en 8 modulos. */
.sim-pieza{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.22em;
  text-align:center;line-height:1;
  font-size:var(--cuerpo,16px);
  text-shadow:0 0 .5em rgba(120,240,255,.55);
}
.sim-pieza b{
  font-size:2.5em;font-weight:800;letter-spacing:-.04em;color:#FFFFFF;
  text-shadow:0 0 .35em rgba(140,245,255,.9);
}
.sim-pieza i,.sim-pieza u{
  font-style:normal;text-decoration:none;
  font-size:.72em;letter-spacing:.24em;font-weight:600;color:#8FF0FB;
}
.sim-pieza.cambia{animation:piezaEntra .55s var(--ease)}
@keyframes piezaEntra{
  from{opacity:0;transform:translateY(6%) scale(.94)}
  to{opacity:1;transform:none}
}

/* Retícula de píxeles: entre punto y punto se ve el fondo, que es
   justamente el 86 % de transparencia del producto. */
.sim-reticula{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(4,10,16,.62) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(4,10,16,.62) 0 1px,transparent 1px 4px);
}

/* Barrido de refresco, como el de un panel encendido */
.sim-barrido{
  position:absolute;left:0;right:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(180,250,255,.13),transparent);
  animation:simBarrido 3.6s linear infinite;
}
@keyframes simBarrido{
  0%{transform:translateY(-120%)}
  100%{transform:translateY(320%)}
}

/* ── Las juntas entre módulos ───────────────────────────────────
   Los módulos ya no se pintan: solo se marca su contorno, para que
   se lea la división física sin tapar el contenido. */
.sim-mods{position:absolute;inset:0;z-index:2}
.sim-mods span{
  background:none;
  border:1px solid rgba(160,240,255,.42);
  border-radius:1px;
  box-shadow:inset 0 0 6px -2px rgba(0,0,0,.6);
  animation:modSube .45s var(--ease) backwards;
  animation-delay:var(--d,0ms);
}
/* Retículas muy densas: la malla se pinta de una vez */
.sim-mods.is-dense{
  border:1px solid rgba(160,240,255,.42);
  background:
    repeating-linear-gradient(90deg,rgba(160,240,255,.42) 0 1px,transparent 1px calc(100% / var(--cols))),
    repeating-linear-gradient(0deg, rgba(160,240,255,.42) 0 1px,transparent 1px calc(100% / var(--rows)));
}

/* Rótulo de cuántos paneles están emitiendo */
.sim-conteo{
  position:absolute;left:8px;bottom:8px;z-index:3;white-space:nowrap;max-width:calc(100% - 16px);
  overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  color:#BFEFF8;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px;
  border:1px solid rgba(160,240,255,.22);
}

@media (prefers-reduced-motion:reduce){
  .sim-barrido{display:none}
  .sim-pieza.cambia{animation:none}
}

/* ════════════════════════════════════════════════════════════
   v0.6 — SITIO REPARTIDO EN PÁGINAS
   El sitio dejó de ser una sola página de 11 secciones: ahora son
   cinco (/ · /producto · /simulador · /aplicaciones · /contratacion).
   Lo que sigue es lo que hizo falta para ese reparto.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   CABECERA — barra de navegación entre las cinco páginas

   La primera versión repartida heredó la barra de cuando el sitio
   era una sola página: cuatro palabras sueltas de 14,5 px. Con el
   contenido ya repartido, esa barra es el único sitio donde se ve
   que el sitio TIENE cinco páginas, así que pasa a ser un mapa:
   cada destino lleva debajo qué se encuentra allí.

   Criterios aplicados (Nielsen Norman Group):
   · etiquetas concisas que empiezan por la palabra informativa;
   · área clicable grande — en táctil los blancos pequeños provocan
     errores, así que cada destino es un bloque entero, no el texto;
   · bordes visuales claros y sin widgets ni buscador dentro;
   · sin duplicar destinos: «Inicio» solo aparece en el desplegable
     de móvil, porque en escritorio ya está el logo.

   La barra empieza alta y se compacta al bajar: la invitación se ve
   al llegar y después devuelve la pantalla al contenido.
   ════════════════════════════════════════════════════════════ */

:root{
  /* Pila de titulares de la navegación. Condensada y técnica, del
     mismo aire que la señalización de un panel: Bahnschrift viene
     con Windows 10+, DIN Alternate y Avenir Next Condensed con
     macOS. Si no hay ninguna, cae en la del sitio y no pasa nada.
     Se sirve del sistema a propósito: el sitio no carga fuentes de
     terceros ni tiene paso de compilación. */
  --font-nav:"Bahnschrift","DIN Alternate","Avenir Next Condensed",
             "Segoe UI Variable Display",var(--font);

  /* Pila de las ciudades del hero. Humanista y de trazo abierto —
     Candara y Optima tienen el asta ligeramente modulada, que a
     cuerpo pequeño y con mucho tracking se lee más elegante que una
     grotesca. Distinta a propósito de la del menú, que es
     condensada y técnica: no compiten. También del sistema. */
  --font-ciudades:"Candara","Optima","Gill Sans","Gill Sans MT",
                  "Corbel","Segoe UI",var(--font);

  /* El barrido de color del panel LED. Mismos tres primarios que ya
     usa el prisma del hero (cian → violeta → magenta), con blanco
     entre medias para que ninguna letra pierda luminancia al pasar
     la onda: en un menú el texto tiene que seguir leyéndose. */
  --led-barrido:linear-gradient(100deg,
    #8DEEFA 0%, #FFFFFF 13%, var(--violet) 29%, var(--magenta) 43%,
    #FFFFFF 57%, #8DEEFA 72%, var(--violet) 86%, #8DEEFA 100%);
}

/* ── Reparto de la barra ───────────────────────────────────────
   Tres columnas en vez de una fila empujada a la derecha: el menú
   queda centrado respecto a la BARRA, no respecto al hueco que
   dejen el logo y el botón. Así el centro no se mueve aunque el
   logo cambie de tamaño al compactarse. */
.nav-inner{
  /* `1fr auto 1fr` y no `auto 1fr auto`: con las columnas laterales
     iguales, el menú queda centrado respecto a la BARRA. Con la otra
     forma se centraba en el hueco sobrante y, como el logo y el botón
     no miden lo mismo, se iba 39 px a la derecha. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  /* El hueco entre marca, menú y contacto se mide fino: `1fr` reparte
     el espacio libre, pero la columna del contacto no baja de su
     contenido, así que cada píxel de más aquí descentra el menú. */
  height:auto;min-height:104px;gap:clamp(12px,1.3vw,20px);
  padding-block:14px;transition:min-height .38s var(--ease),padding-block .38s var(--ease);
}
/* El logo se queda pegado a la izquierda de su columna y el bloque de
   contacto a la derecha de la suya; si no, flotarían hacia el centro.

   `min-width:max-content` no es cosmético: una columna `1fr` deja
   encoger su contenido, y como `img` lleva `max-width:100%`, el logo
   colapsaba a 0 px y la barra se quedaba sin marca.

   Va solo en escritorio: en móvil el logo SÍ debe poder encogerse, o
   entre marca y botón se comen los 375 px y la barra desborda. */
@media (min-width:921px){
  .nav-inner > .logo{min-width:max-content}
  .nav-inner > .nav-cta{min-width:max-content}
}
.nav-inner > .logo{justify-self:start}
.nav-inner > .nav-cta{justify-self:end}

/* La barra respira más ancho que el resto del sitio: con el menú
   centrado, los 1200 px del contenido no daban para logo + cinco
   destinos + contacto sin apretarlo todo. */
.nav .wrap{max-width:1440px}
.nav.is-stuck .nav-inner{min-height:66px;padding-block:8px}

/* El logo entra grande y se recoge con la barra.

   Puede permitirse más altura desde que se sirve el lockup con el
   rombo entero: la versión anterior venía recortada por la base y
   era mucho más apaisada (ratio 6,7 contra 4,26), así que cada
   píxel de alto le costaba casi siete de ancho al menú de al lado.
   Con el archivo correcto son 4,26 y cabe más marca en menos sitio. */
.logo-img{height:clamp(36px,3.9vw,52px);width:auto;transition:height .38s var(--ease)}
.nav.is-stuck .logo-img{height:34px}

/* ── Los destinos ──────────────────────────────────────────────
   Repartidos a partes iguales y con el texto centrado en su celda:
   la barra se lee como una rejilla, no como una lista pegada a un
   lado. `minmax(0,1fr)` — no `1fr` a secas — porque una celda de
   rejilla no baja de su contenido mínimo y las descripciones largas
   desbordarían la barra. */
.nav-links{
  position:relative;margin:0;justify-self:center;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:clamp(2px,.5vw,10px);align-items:stretch;
}
.nav-links a{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;text-align:center;
  padding:9px clamp(4px,.5vw,10px);border-radius:12px;
  border:1px solid transparent;line-height:1.2;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}

/* ── El nombre del destino ─────────────────────────────────────
   Aquí es donde la barra deja de parecer un pie de página: letra
   condensada en versales y el barrido de color recorriéndola.   */
.nav-links a b{
  font-family:var(--font-nav);
  font-size:clamp(14px,1.05vw,16.5px);
  font-weight:700;letter-spacing:.075em;text-transform:uppercase;
  color:var(--txt-2);
  white-space:nowrap;
  transition:color .25s var(--ease);
}

/* El color se pinta sobre el texto recortado. Va dentro de @supports
   porque sin `background-clip:text` el relleno transparente dejaría
   el menú INVISIBLE: si el navegador no lo admite, se queda con el
   color plano de arriba y la barra sigue siendo legible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nav-links a b{
    background:var(--led-barrido);
    background-size:280% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:ledBarrido 9s linear infinite;
  }
  /* Cada destino entra con retraso, así la onda no late a la vez en
     toda la barra: cruza de izquierda a derecha como en un panel. */
  .nav-links a:nth-of-type(2) b{animation-delay:-.75s}
  .nav-links a:nth-of-type(3) b{animation-delay:-1.5s}
  .nav-links a:nth-of-type(4) b{animation-delay:-2.25s}
  .nav-links a:nth-of-type(5) b{animation-delay:-3s}
}
@keyframes ledBarrido{to{background-position:-280% 0}}

.nav-links a span{
  font-size:11.5px;color:var(--txt-3);font-family:var(--font-mono);
  letter-spacing:.02em;white-space:nowrap;
  /* Se pliega al compactar la barra, sin saltos de maquetación */
  max-height:20px;opacity:.85;overflow:hidden;
  transition:max-height .34s var(--ease),opacity .24s var(--ease);
}
.nav.is-stuck .nav-links a span{max-height:0;opacity:0}

.nav-links a:hover{background:rgba(100,227,242,.06);border-color:rgba(100,227,242,.22)}
/* Al apuntar, la onda acelera y el halo se enciende. `drop-shadow`
   y no `text-shadow`: con el texto recortado, la sombra se vería
   por detrás del relleno transparente. */
.nav-links a:hover b{animation-duration:2.6s;filter:drop-shadow(0 0 10px rgba(140,220,255,.55))}
.nav-links a:hover span{color:var(--txt-2)}

/* El subrayado que se dibujaba al pasar el cursor lo sustituye el
   testigo deslizante de abajo, que además marca dónde se está. */
.nav-links a::after{content:none}

/* Página actual — el destino que está «encendido»: la onda le corre
   más despacio y con el halo puesto, así se distingue de los demás
   sin salirse de la misma familia visual. */
.nav-links a.is-active{background:rgba(100,227,242,.09);border-color:rgba(100,227,242,.3)}
.nav-links a.is-active b{
  color:var(--cyan);                       /* respaldo sin background-clip */
  animation-duration:5s;
  filter:drop-shadow(0 0 12px rgba(100,227,242,.6));
}
.nav-links a.is-active span{color:var(--txt-2)}

/* ── Testigo deslizante ────────────────────────────────────────
   Una barra de luz que se posiciona bajo el destino activo y sigue
   al cursor. La coloca main.js midiendo el enlace; si el JS no
   corre, no aparece y no se rompe nada. */
.nav-marca{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 12px rgba(100,227,242,.75);
  opacity:0;pointer-events:none;
  transition:transform .42s var(--ease),width .42s var(--ease),opacity .3s var(--ease);
}
.nav-marca.visible{opacity:1}

/* ── Llamada a la acción ───────────────────────────────────────
   Sustituye al contador `01 / 05`, que decía cuánto quedaba por
   recorrer pero no pedía nada. En una barra que ya explica a dónde
   lleva cada página, el sitio más caro es el que ocupa un dato que
   no convierte: aquí va el teléfono, que es el canal por el que la
   empresa cierra de verdad.

   Es un enlace `tel:`, así que en móvil marca directamente. El
   testigo verde late para leerse como «hay alguien ahora». */
.nav-llamado{
  display:flex;align-items:center;gap:9px;
  padding:7px 14px 7px 12px;border-radius:100px;
  border:1px solid rgba(72,213,151,.32);
  background:linear-gradient(180deg,rgba(72,213,151,.10),rgba(72,213,151,.03));
  white-space:nowrap;transition:.28s var(--ease);
}
.nav-llamado:hover{
  border-color:rgba(72,213,151,.6);
  background:linear-gradient(180deg,rgba(72,213,151,.18),rgba(72,213,151,.06));
  transform:translateY(-1px);
  box-shadow:0 10px 24px -14px rgba(72,213,151,.9);
}
.nav-llamado span{display:flex;flex-direction:column;line-height:1.15}
.nav-llamado b{
  font-family:var(--font-nav);
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ok);
}
.nav-llamado em{
  font-style:normal;font-size:15px;font-weight:650;letter-spacing:.01em;
  color:var(--txt);font-variant-numeric:tabular-nums;
}
.nav-llamado:hover em{color:#fff}

/* Testigo de «disponible»: el mismo latido del resto del sitio, en
   verde para que se lea como línea abierta y no como aviso. */
.nav-punto{
  position:relative;flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 10px rgba(72,213,151,.9);
}
.nav-punto::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--ok);animation:latido 2.2s var(--ease) infinite;
}
@keyframes latido{
  0%{transform:scale(1);opacity:.65}
  70%,100%{transform:scale(2.6);opacity:0}
}

/* ── Móvil ─────────────────────────────────────────────────────
   El desplegable ya ocupaba la pantalla; ahora cada destino es una
   tarjeta con su descripción, que es donde más falta hace: sin la
   barra lateral no hay forma de saber qué hay en cada página. */
@media (max-width:920px){
  /* Vuelve a dos columnas: el menú deja de ocupar el centro y pasa a
     ser el desplegable a pantalla completa. */
  .nav-inner{grid-template-columns:auto auto;justify-content:space-between;min-height:76px}
  .nav.is-stuck .nav-inner{min-height:62px}
  .nav-links{
    /* `position:fixed` repetido a propósito: el desplegable a pantalla
       completa se declara más arriba en la hoja, y la regla nueva
       `.nav-links{position:relative}` —necesaria para el testigo en
       escritorio— le ganaba por orden con la misma especificidad. Sin
       esto el menú se queda en el flujo, estira la barra a 661 px y
       desborda la pantalla 117 px. */
    position:fixed;inset:0 auto auto 0;
    /* `100vw` explícito y no `left:0;right:0`: `.nav` lleva
       `backdrop-filter`, que le convierte en bloque contenedor de sus
       descendientes fijos, así que el menú se estiraba a la caja de la
       barra (274 px) en vez de a la pantalla. */
    width:100vw;max-width:100vw;
    /* apilados, no en rejilla horizontal */
    grid-auto-flow:row;grid-auto-columns:auto;
    padding:92px 20px 32px;gap:10px;
  }
  .nav-links a{
    padding:16px 18px;border-radius:14px;gap:5px;
    border-color:var(--line);background:rgba(255,255,255,.02);
  }
  .nav-links a b{font-size:20px;letter-spacing:.06em}
  .nav-links a span{font-size:13px;max-height:none;opacity:1;white-space:normal}
  .nav.is-stuck .nav-links a span{max-height:none;opacity:1}
  .nav-marca{display:none}
  /* La llamada a la acción ya lleva `hide-sm`, pero se refuerza aquí
     porque en el desplegable el teléfono vive en el pie de página. */
  .nav-llamado{display:none}
}

/* Solo tiene sentido dentro del desplegable: en escritorio el logo
   ya lleva al inicio y repetirlo obliga a descartar una opción.
   Va calificado con `.nav-links a` porque esa regla declara
   `display:flex` y con `.solo-movil` a secas le ganaba por
   especificidad — el enlace se colaba en escritorio. */
.nav-links a.solo-movil{display:none}
@media (max-width:920px){.nav-links a.solo-movil{display:flex}}

@media (prefers-reduced-motion:reduce){
  .nav-marca,.nav-inner,.logo-img,.nav-links a span{transition:none}
  /* Sin barrido: el color se detiene en el arranque del degradado,
     que es cian claro y mantiene el contraste. */
  .nav-links a b{animation:none;background-position:0 0}
}

/* ── Ciudades del hero ─────────────────────────────────────────
   Sustituye a la etiqueta «Bogotá · Colombia y Latinoamérica».

   Sin testigo LED delante y sin ninguna destacada: se atienden las
   cinco por igual, y una marca al principio convertía a Bogotá en
   la principal y al resto en apéndice. El separador se pinta con
   `::after` para no meter puntos sueltos en el HTML — así el lector
   de pantalla lee cinco ciudades, no una ristra con puntos. */
.ciudades{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.35em 0;margin:0 0 clamp(18px,2vw,26px);
  font-family:var(--font-ciudades);
  font-size:clamp(12.5px,.55vw + 11px,15px);
  font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cyan);
}
.ciudades span{
  display:inline-flex;align-items:center;
  text-shadow:0 0 18px rgba(100,227,242,.45);
}
.ciudades span + span::before{
  content:"";
  width:4px;height:4px;border-radius:50%;
  margin:0 .85em 0 .85em;
  background:currentColor;opacity:.45;
  /* el punto no se lee en voz alta */
}
/* Cuando la fila se parte, los puntos estorban: el primero de la
   segunda línea queda colgando delante de la ciudad («· Barranquilla»).
   Por debajo de 680 px se retiran y la separación la hace el hueco. */
@media (max-width:680px){
  .ciudades{gap:.5em 1.6em;letter-spacing:.16em}
  .ciudades span + span::before{content:none}
}

/* ── Bajada del hero ───────────────────────────────────────────
   Centrada y con las líneas equilibradas. No lleva `text-align:
   justify` a propósito: justificar y centrar son excluyentes, y
   justificar un párrafo centrado de 4 líneas abre calles blancas
   entre palabras. `balance` reparte el texto para que las líneas
   queden parejas, que es el efecto que se busca. */
.hero .lead{
  text-wrap:balance;
  max-width:64ch;
}
.hero .lead b{color:var(--txt);font-weight:640}

/* ── Enlaces de continuidad entre páginas ──────────────────────
   Cada página termina apuntando a la siguiente. Van dentro de un
   .foot-note para heredar el centrado y el margen superior. */
.foot-note .card-link{font-size:14.5px}
.foot-note .card-link:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Cierre de la portada ──────────────────────────────────────
   El bloque de contacto ya no vive dentro de la rejilla de dos
   columnas del formulario, así que necesita su propia medida:
   suelto a 1200px quedaba una banda vacía imposible de leer. */
#siguiente .contact-box{max-width:520px;margin-inline:auto}
#siguiente .destacado .hero-btns{margin-bottom:0}

/* ════════════════════════════════════════════════════════════
   v0.7 — SIMULADOR CON DESCUENTO, AHORRO Y MÁS COLOR
   El precio baja con los días; el simulador lo muestra, calcula el
   ahorro y trae una escalera para invitar a alargar la campaña y a
   sumar más paneles. La página se enciende de color a propósito:
   es la herramienta que convierte, y el color lleva la mirada al
   precio, al ahorro y al botón de cotizar.
   ════════════════════════════════════════════════════════════ */

/* La caja del precio, más viva: halo de prisma en las esquinas */
#simulador .sim-price{
  border-color:rgba(100,227,242,.42);
  background:
    radial-gradient(120% 150% at 0% 0%,rgba(155,123,255,.16),transparent 55%),
    radial-gradient(120% 150% at 100% 100%,rgba(244,92,200,.13),transparent 55%),
    linear-gradient(180deg,rgba(100,227,242,.10),rgba(100,227,242,.02));
}
/* El número: barrido de color LED, el mismo del menú */
#simulador .sim-price strong{
  background:var(--led-barrido);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--cyan);
  animation:ledBarrido 8s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  #simulador .sim-price strong{animation:none;background-position:0 0}
}

/* Insignia de ahorro: verde, salta a la vista */
.sim-ahorro{
  display:flex;flex-direction:column;gap:2px;margin:4px 0 10px;
  padding:10px 14px;border-radius:12px;
  border:1px solid rgba(72,213,151,.42);
  background:linear-gradient(180deg,rgba(72,213,151,.16),rgba(72,213,151,.05));
  box-shadow:0 0 24px -10px rgba(72,213,151,.85);
}
.sim-ahorro b{
  font-size:20px;letter-spacing:-.02em;color:#7BF0BE;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(72,213,151,.5);
}
.sim-ahorro span{
  font-size:11.5px;font-weight:500;color:rgba(160,240,200,.9);
  letter-spacing:0;text-transform:none;
}

/* ── Escalera de ahorro ─────────────────────────────────────────
   Cinco tramos de la MISMA vitrina: pulsar uno mueve el deslizador.
   Es la invitación a alargar la campaña — y a modular más paneles. */
.sim-escalera{margin:0 0 18px}
.esc-tit{
  display:block;text-align:center;margin-bottom:9px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;
  color:var(--txt-3);text-transform:uppercase;
}
.esc-fila{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.esc-tramo{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 3px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:#05070A;
  transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.esc-tramo b{font-size:12px;font-weight:650;color:var(--txt-2);white-space:nowrap}
.esc-tramo span{
  font-size:10.5px;color:var(--txt);font-variant-numeric:tabular-nums;
  white-space:nowrap;letter-spacing:-.01em;
}
.esc-tramo i{
  font-style:normal;font-size:9.5px;font-weight:700;
  padding:1px 6px;border-radius:100px;
  background:rgba(72,213,151,.14);color:var(--ok);
}
.esc-tramo:hover{border-color:var(--line-2);transform:translateY(-2px)}
.esc-tramo.is-on{
  border-color:var(--cyan);
  background:linear-gradient(180deg,rgba(100,227,242,.15),rgba(155,123,255,.06));
  box-shadow:0 0 20px -8px rgba(100,227,242,.85);
}
.esc-tramo.is-on b{color:var(--cyan)}
.esc-tramo.is-on i{background:rgba(72,213,151,.24);color:#7BF0BE}

/* El botón de cotizar del simulador, encendido */
#simulador .sim-actions .btn-primary{
  box-shadow:0 10px 26px -12px rgba(100,227,242,.8),var(--glow-cyan);
}

/* Angosto: los tramos bajan la letra y se reparten en dos filas
   antes que apretarse ilegibles. */
@media (max-width:460px){
  .esc-fila{grid-template-columns:repeat(3,1fr)}
  .esc-tramo span{font-size:11px}
}

/* ── Tabla de precios paquete (contratación) ───────────────────── */
.paquetes-wrap{margin-top:clamp(26px,3vw,38px)}
.paquetes-tabla{min-width:640px}
.paquetes-tabla td{vertical-align:middle}
.paquetes-tabla td:first-child{color:var(--txt);font-weight:600;line-height:1.3}
.paquetes-tabla td:first-child span{
  display:block;font-size:11.5px;font-weight:500;color:var(--txt-3);
  font-family:var(--font-mono);
}
.paquetes-tabla td b{display:block;color:var(--txt);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.paquetes-tabla td i{
  font-style:normal;font-size:10.5px;font-weight:700;color:var(--ok);
}
/* La columna de 30 días es el mejor precio: se resalta */
.paquetes-tabla th:last-child,.paquetes-tabla td:last-child{
  background:rgba(72,213,151,.06);
}
.paquetes-tabla th:last-child{color:var(--ok)}
.paquetes-nota{
  margin:16px auto 0;max-width:70ch;text-align:center;
  font-size:13px;color:var(--txt-3);
}
.paquetes-nota a{color:var(--cyan)}

/* La fila de la cabina en la tabla: se distingue con un tinte violeta,
   porque es un producto distinto (precio fijo, no por módulo). */
.paquetes-tabla .fila-cabina td{background:rgba(155,123,255,.07)}
.paquetes-tabla .fila-cabina td:first-child{color:var(--violet)}
.paquetes-tabla .fila-cabina td:first-child span{color:rgba(155,123,255,.7)}
/* El resalte verde de la última columna gana al tinte violeta */
.paquetes-tabla .fila-cabina td:last-child{background:rgba(72,213,151,.06)}

/* ── Tarjeta de la cabina en el simulador ──────────────────────── */
.cabina-card{margin-top:clamp(26px,3vw,40px)}
.cabina-card > .eyebrow{margin-bottom:12px}
.cabina-card h3{max-width:26ch}
.cabina-card p{max-width:66ch}
.cabina-card b{color:var(--cyan)}
.cabina-card .cabina-fila{
  max-width:560px;margin:20px auto 22px;
}
/* Los tramos de la cabina son informativos, no botones: sin cursor
   ni levantamiento al pasar. El de 30 días queda resaltado como el
   mejor precio. */
.cabina-card .esc-tramo{cursor:default}
.cabina-card .esc-tramo:hover{transform:none;border-color:var(--line)}
.cabina-card .esc-tramo.is-on{border-color:var(--violet);
  background:linear-gradient(180deg,rgba(155,123,255,.15),rgba(100,227,242,.05));
  box-shadow:0 0 20px -8px rgba(155,123,255,.85)}
.cabina-card .esc-tramo.is-on b{color:var(--violet)}
.cabina-card .hero-btns{margin:0}

/* ════════════════════════════════════════════════════════════
   v0.8 — VIDEO REAL EN EL HERO
   Reemplaza la maqueta LED del "-30%" por el video del panel en
   operación. Es vertical (9:16, grabado en celular), así que se
   enmarca como una pieza encendida en formato retrato.
   ════════════════════════════════════════════════════════════ */
.hero-video-wrap{position:relative;width:min(560px,92vw);margin:0 auto}
/* Marco del video (antes en .hero-video). El iframe de Bunny se recorta
   a las esquinas redondeadas con overflow:hidden del shell — un iframe no
   respeta border-radius por sí solo. El shell lleva el borde, la sombra y
   la forma; el iframe solo lo rellena. */
.hero-video-shell{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border-radius:var(--r-lg);overflow:hidden;background:#05070A;
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),
             inset 0 0 0 1px rgba(255,255,255,.03);
}
.hero-video{display:block;width:100%;height:100%;border:0;object-fit:cover;background:#05070A}
/* Aro cian interior: el mismo marco de panel encendido de siempre, para
   que el video se lea como pantalla y no como un clip pegado. Va sobre el
   video (no sobre el pie) y deja pasar el ratón al reproductor. */
.hero-video-shell::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(100,227,242,.18),
             inset 0 0 60px -20px rgba(100,227,242,.35);
}
.hero-video-wrap .demo-note{margin-top:14px}

/* ── Distintivo y pie del video del hero ────────────────────────
   La nota gris plana no vendía nada. Ahora el video lleva un
   distintivo de «panel real» (autenticidad = credibilidad) y un pie
   con estilo LED que posiciona el producto como tecnología de punta. */

/* Distintivo «En vivo» sobre el video, esquina superior.
   Rediseño con jerarquía tipográfica: un rótulo condensado en
   versalitas (EN VIVO, la etiqueta que da el «esto está pasando de
   verdad») + la descripción en la tipografía de texto (Inter), más
   legible que la monoespaciada anterior. Un filete cian los separa. */
.hero-video-live{
  position:absolute;top:12px;left:12px;z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 11px;border-radius:100px;white-space:nowrap;
  background:linear-gradient(135deg,rgba(7,9,12,.8),rgba(12,20,26,.6));
  backdrop-filter:blur(10px) saturate(1.25);
  border:1px solid rgba(100,227,242,.38);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.95),
             0 0 22px -12px rgba(100,227,242,.8),
             inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-video-live .hvl-dot{
  position:relative;width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
}
.hero-video-live .hvl-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--cyan);
  animation:latido 2s var(--ease) infinite;
}
/* Rótulo condensado en versalitas */
.hero-video-live .hvl-tag{
  font-family:var(--font-nav);font-weight:700;font-size:10.5px;line-height:1;
  letter-spacing:.19em;text-transform:uppercase;color:var(--cyan);
}
/* Descripción en tipografía de texto, con filete de separación */
.hero-video-live .hvl-txt{
  position:relative;padding-left:11px;
  font-family:var(--font);font-weight:530;font-size:12.5px;line-height:1;
  letter-spacing:.005em;color:var(--txt);
}
.hero-video-live .hvl-txt::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:rgba(100,227,242,.32);
}

/* Pie con estilo: kicker + titular LED + nota */
.hero-video-cap{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  margin-top:18px;text-align:center;
}
.hvc-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-nav);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
}
.hvc-kicker::before{
  content:"";width:6px;height:6px;border-radius:1px;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
  animation:ledBlink 2.6s var(--ease) infinite;
}
/* El titular lleva el barrido de color LED, como el menú y el precio */
.hero-video-cap strong{
  max-width:24ch;font-size:clamp(15.5px,1.2vw,18px);font-weight:650;line-height:1.28;
  background:var(--led-barrido);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--cyan);
  animation:ledBarrido 9s linear infinite;
}
.hvc-note{max-width:38ch;font-size:12.5px;line-height:1.5;color:var(--txt-3)}

@media (prefers-reduced-motion:reduce){
  .hero-video-cap strong{animation:none;background-position:0 0}
  .hero-video-live .hvl-dot::after,.hvc-kicker::before{animation:none}
}

/* ── Galería de video · Bunny Stream ──────────────────────────────
   Reels UNIFORMES: todos en el mismo marco 9:16 con el video recortado
   (object-fit:cover), en autoplay mudo. El grid va centrado y las
   descripciones también, para que todo se vea parejo y ordenado. */
.video-galeria{
  display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:24px;
  justify-content:center;margin-top:38px
}
.vg-card{margin:0;display:flex;flex-direction:column}
.vg-frame{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--r-lg);background:#05070A;border:1px solid var(--line-2);
  box-shadow:0 30px 70px -45px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.03);
  transition:transform .4s var(--ease),border-color .4s var(--ease)
}
.vg-card:hover .vg-frame{transform:translateY(-3px)}
.vg-player{width:100%;height:100%;object-fit:cover;display:block;background:#05070A}
/* Aro cian interior: el mismo marco de "pantalla encendida" del hero */
.vg-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(100,227,242,.16),inset 0 0 50px -20px rgba(100,227,242,.3)
}
/* Descripción CENTRADA: rótulo condensado + nombre + descripción */
.vg-cap{padding:16px 8px 0;text-align:center}
.vg-eyebrow{
  display:inline-block;margin-bottom:7px;
  font-family:var(--font-nav);font-weight:700;font-size:10px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)
}
.vg-title{display:block;font-size:16px;font-weight:640;letter-spacing:-.01em;line-height:1.2;color:var(--txt)}
.vg-desc{display:block;margin:5px auto 0;max-width:32ch;font-size:12.5px;line-height:1.5;color:var(--txt-2)}
@media(max-width:820px){.video-galeria{grid-template-columns:repeat(2,minmax(0,280px))}}
@media(max-width:560px){.video-galeria{grid-template-columns:minmax(0,320px)}}