/* Página de producto — hero oscuro, cuerpo claro.
 *
 * El criterio: el hero oscuro es donde vive la identidad del producto y la
 * demo en vivo; el cuerpo va en claro porque es donde se lee la sustancia, y
 * el comprador la lee en el celular, a mediodía, con reflejo en la pantalla.
 *
 * Los grises se eligieron por contraste medido, no a ojo: los tonos tenues
 * del sitio principal (#4A525D = 2.48:1, #707783 = 4.34:1) reprueban WCAG AA.
 * Aquí ninguno baja de 4.5:1 sobre su fondo.
 */
:root{
  --ink:#0B0C0E;          /* fondo oscuro */
  --ink-soft:#14161A;
  --paper:#F1EEE7;        /* fondo claro */
  --paper-card:#FFFFFF;
  --gold:#FFB000;         /* un solo ámbar en todo el sistema */
  --gold-deep:#7A5200;    /* ámbar legible sobre claro: 5.1:1 */
  --white:#F0F1F2;
  --mute-dark:#9AA3AF;    /* sobre oscuro: 7.7:1 */
  --mute-light:#5A616B;   /* sobre claro: 6.4:1 */
  --line-dark:rgba(240,241,242,.14);
  --line-light:rgba(11,12,14,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Space Grotesk",system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.shell{width:min(1120px,calc(100% - 40px));margin:auto}

/* Escala de display en 3 escalones, no 9: la jerarquía la marcan peso y
   color, no una talla intermedia nueva por cada sección. */
.t-xl{font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.035em}
.t-lg{font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.025em}
.t-md{font-size:20px;line-height:1.3}

.eyebrow{font:500 10px/1.35 "IBM Plex Mono",monospace;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 16px}

/* ---------- Zona oscura: nav + hero + cierre ---------- */
.dark{background:var(--ink);color:var(--white)}
.dark .eyebrow{color:var(--gold)}
.nav{display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;border-bottom:1px solid var(--line-dark)}
.brand{font-family:Michroma,monospace;font-size:13px;letter-spacing:.2em}
.brand b{color:var(--gold)}
.back{font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-dark);min-height:44px;display:inline-flex;align-items:center}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
  padding:74px 0 82px;align-items:center}
.hero h1{margin:0;max-width:620px}
.hero .lede{margin:24px 0 0;max-width:560px;color:var(--mute-dark);
  font-size:18px;line-height:1.6}
.hero .lede b{color:var(--white);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.button{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:15px;
  border:1px solid transparent;cursor:pointer}
.button.primary{background:var(--gold);color:#17130A;border-color:var(--gold)}
.button.ghost{border-color:var(--line-dark);color:var(--white)}
.button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hero-note{margin:16px 0 0;font:500 11px/1.5 "IBM Plex Mono",monospace;
  letter-spacing:.08em;color:var(--mute-dark)}

/* Maqueta del instrumento: muestra el producto sin necesitar screenshot. */
.device{border:1px solid rgba(255,176,0,.22);border-radius:16px;
  background:#050504;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.device .dev-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid rgba(255,176,0,.14)}
.device .dev-name{font-family:Michroma,monospace;font-size:12px;letter-spacing:.16em}
.device .dev-name b{color:var(--gold)}
.device .dev-state{font:500 9px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;color:var(--gold)}
.device .dev-scan{display:flex;gap:3px;align-items:center;height:26px;margin:20px 0 14px}
.device .dev-scan i{display:block;flex:1 1 0;height:100%;border-radius:2px;background:#3D2A05}
.device .dev-line{font-size:14.5px;line-height:1.5;color:#E8E4D8;
  padding-left:12px;border-left:2px solid #8A5A00}
.device .dev-foot{margin-top:18px;font:500 9px/1.5 "IBM Plex Mono",monospace;
  letter-spacing:.14em;color:#8C8A80}

/* ---------- Zona clara ---------- */
.light{background:var(--paper);color:var(--ink)}
.light .eyebrow{color:var(--gold-deep)}
.section{padding:82px 0;border-top:1px solid var(--line-light)}
.section:first-of-type{border-top:0}
.section h2{margin:0;max-width:800px}
.section .sub{margin:18px 0 0;max-width:680px;color:var(--mute-light);
  font-size:17px;line-height:1.65}

.grid{display:grid;gap:16px;margin-top:44px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.card{padding:28px;border:1px solid var(--line-light);border-radius:16px;
  background:var(--paper-card)}
.card .n{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--gold-deep)}
.card h3{margin:14px 0 0;font-size:19px;line-height:1.25}
.card p{margin:10px 0 0;color:var(--mute-light);font-size:14.5px;line-height:1.6}

/* Verticales */
.verticals{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px}
.vert{padding:22px 18px;border:1px solid var(--line-light);border-radius:14px;
  background:var(--paper-card)}
.vert h3{margin:0;font-size:15px;line-height:1.3}
.vert p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--mute-light)}

/* Planes */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.plan{padding:30px;border:1px solid var(--line-light);border-radius:18px;
  background:var(--paper-card);display:flex;flex-direction:column}
.plan.featured{border-color:rgba(255,176,0,.6);
  box-shadow:0 0 0 3px rgba(255,176,0,.12)}
.plan .tag{font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep)}
.plan h3{margin:14px 0 0;font-size:23px;line-height:1.2}
.plan .price{margin:16px 0 0;font-size:15px;color:var(--mute-light)}
.plan ul{margin:20px 0 0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:11px;flex:1}
.plan li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}

/* FAQ */
.faq{margin-top:40px;border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{padding:24px 4px;font-size:17px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-deep);font-size:20px;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0;padding:0 4px 26px;max-width:760px;color:var(--mute-light);
  font-size:15.5px;line-height:1.7}

/* Cierre */
.close-cta{padding:88px 0}
.close-cta h2{margin:0;max-width:720px}
.close-cta .sub{margin:20px 0 0;max-width:600px;color:var(--mute-dark);font-size:17px;line-height:1.65}
.footer{padding:30px 0 56px;color:var(--mute-dark);font-size:13px;
  border-top:1px solid var(--line-dark)}
.footer a{color:var(--gold)}

@media(max-width:900px){
  .grid.g3,.plans{grid-template-columns:1fr}
  .verticals{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;gap:38px;padding:52px 0 62px}
}
@media(max-width:560px){
  .shell{width:min(100% - 32px,1120px)}
  .grid.g2,.verticals{grid-template-columns:1fr}
  .section{padding:58px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Precios en los planes ---------- */
.plan .amount{margin:16px 0 0;font-size:17px;line-height:1.3}
.plan .amount b{font-size:34px;font-weight:700;letter-spacing:-.02em;display:inline-block}
.plan .amount span{color:var(--mute-light);font-size:15px}
.plan .amount-sub{margin:4px 0 0;font-size:15px;color:var(--mute-light)}
.plan .amount-sub b{color:var(--ink);font-weight:600}

/* ---------- Calculadora de costo de oportunidad ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.calc-inputs{display:flex;flex-direction:column;gap:26px;padding:32px;
  border:1px solid var(--line-light);border-radius:18px;background:var(--paper-card)}
.field{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
.field span{grid-column:1/-1;font-size:14.5px;line-height:1.45;color:var(--mute-light)}
.field input[type=range]{width:100%;accent-color:var(--gold);height:34px;cursor:pointer}
.field output{font:600 16px/1 "IBM Plex Mono",monospace;color:var(--ink);
  min-width:92px;text-align:right}
.calc-result{padding:32px;border:1px solid rgba(255,176,0,.5);border-radius:18px;
  background:var(--ink);color:var(--white)}
.calc-label{margin:0;font:500 10px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.calc-big{margin:12px 0 0;font-size:clamp(38px,5vw,54px);line-height:1;
  font-weight:700;letter-spacing:-.03em}
.calc-note{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--mute-dark)}
.calc-result hr{margin:26px 0;border:0;border-top:1px solid var(--line-dark)}
.calc-mid{margin:10px 0 0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.calc-fine{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute-dark)}
@media(max-width:900px){.calc{grid-template-columns:1fr}}