/* ───────────────────────────────────────────────────────────
   PROWIK HOSTING · web pública
   Concepto: "el rack encendido". Un único elemento protagonista (el rack del hero)
   que se enciende una vez al cargar; el resto, sobrio y técnico.
   ─────────────────────────────────────────────────────────── */

/* Cabecera */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(5,8,6,.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ice); text-decoration: none; font: 800 1.05rem/1 var(--font-display); letter-spacing: -.01em; }
.brand:hover { color: var(--ice); }
.brand svg { width: 30px; height: 30px; }
.brand span { color: var(--reactor); font-weight: 600; }
.nav { display: flex; gap: .25rem; margin-left: auto; align-items: center; }
.nav a { color: var(--mist); text-decoration: none; padding: .5rem .75rem; border-radius: 999px; font-size: .95rem; font-weight: 500; transition: color .2s, background-color .2s; }
.nav a:hover, .nav a[aria-current=page] { color: var(--ice); background: rgba(255,255,255,.04); }
.nav .cart { display: inline-flex; gap: .4rem; align-items: center; color: var(--ice); }
.nav .cart b { min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--reactor); color: var(--void); font: 600 .75rem/1.4rem var(--font-mono); text-align: center; }
.nav .btn { margin-left: .5rem; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--rail); color: var(--ice); border-radius: 999px; min-height: 42px; padding: 0 1rem; font: 500 .95rem var(--font-body); }

@media (max-width: 920px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav { position: absolute; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; padding: 1rem; gap: .25rem; background: var(--void); border-bottom: 1px solid var(--line); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: .85rem 1rem; border-radius: var(--radius-s); }
  .nav .btn { margin: .5rem 0 0; }
}

/* Traza de scroll: el "cable" que alimenta la página */
.trace { position: fixed; left: max(12px, calc((100vw - 1200px) / 2 - 40px)); top: 0; bottom: 0; width: 2px; z-index: 1; pointer-events: none; background: linear-gradient(var(--rail), var(--rail)) center / 1px 100% no-repeat; }
.trace i { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p, 0)); background: linear-gradient(var(--reactor), var(--phosphor)); box-shadow: 0 0 12px var(--reactor); will-change: transform; }
.trace i::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--reactor); box-shadow: 0 0 16px 3px rgba(57,255,20,.7); transform: scaleY(calc(1 / max(var(--p, 1), .01))); }
@media (max-width: 1320px) { .trace { display: none; } }

section { position: relative; padding: clamp(3.25rem, 6.5vw, 5.5rem) 0; }
.sec-head { display: grid; gap: .75rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 760px; }
.sec-head p { color: var(--mist); font-size: 1.1rem; margin: 0; }

/* ── HERO ── */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6rem); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto 35%; height: 120%; background: radial-gradient(closest-side, rgba(57,255,20,.16), transparent 70%); pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--void), transparent 30%),
    repeating-linear-gradient(90deg, rgba(57,255,20,.07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(57,255,20,.07) 0 1px, transparent 1px 48px);
  transform: perspective(600px) rotateX(58deg); transform-origin: bottom; mask-image: linear-gradient(to top, #000, transparent);
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.05rem, 4.15vw, 3.85rem); margin-bottom: .4em; }
.hero h1 .stroke { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--reactor); text-shadow: 0 0 40px rgba(57,255,20,.25); }
.hero .lead { margin-bottom: 2rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 1.75rem; color: var(--mist); font-size: .92rem; }
.hero-meta span { display: flex; gap: .5rem; align-items: center; }
.hero-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--reactor); box-shadow: 0 0 8px var(--reactor); }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; } }

/* ── TERMINAL DE BÚSQUEDA ── */
.term { position: relative; border: 1px solid var(--line); border-radius: var(--radius-m); background: linear-gradient(180deg, rgba(16,25,20,.92), rgba(11,17,13,.92)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.term-bar { display: flex; gap: .4rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--rail); font: 400 .78rem/1 var(--font-mono); color: var(--mist); }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rail); }
.term-bar i:first-child { background: var(--reactor); box-shadow: 0 0 8px var(--reactor); }
.term-bar em { margin-left: auto; font-style: normal; }
.term form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .6rem .6rem .6rem 1rem; }
.term .prompt { font: 500 1rem/1 var(--font-mono); color: var(--reactor); white-space: nowrap; }
.term input { border: 0; background: transparent; min-height: 52px; font: 500 1.25rem/1 var(--font-mono); padding: .5rem .25rem; caret-color: var(--reactor); }
.term input:focus { box-shadow: none; }
.term:focus-within { border-color: rgba(57,255,20,.55); box-shadow: var(--glow), 0 30px 80px -30px rgba(0,0,0,.8); }
@media (max-width: 560px) {
  .term form { grid-template-columns: 1fr; padding: .75rem; }
  .term .prompt { font-size: .85rem; }
  .term .btn { width: 100%; }
}

.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rail); }
.results:empty { display: none; }
.results li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--rail); animation: rowIn .35s var(--ease) both; }
.results li:last-child { border-bottom: 0; }
.results .dn { font: 500 1.02rem/1.3 var(--font-mono); overflow-wrap: anywhere; }
.results .dn small { display: block; font: 400 .78rem/1.4 var(--font-body); color: var(--mist); margin-top: .15rem; }
.results .price { font: 500 .95rem/1.2 var(--font-mono); text-align: right; white-space: nowrap; }
.results .price small { display: block; color: var(--mist); font-size: .72rem; }
.results li.taken .dn .name { color: var(--mist); text-decoration: line-through; text-decoration-color: rgba(157,179,163,.5); }
.results li.exact { background: rgba(57,255,20,.04); }
.results-note { padding: .7rem 1rem; font-size: .85rem; color: var(--amber); border-top: 1px dashed rgba(255,179,71,.35); }
.results-error { padding: .9rem 1rem; color: #ffd0d9; border-top: 1px solid var(--rail); }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .results li { grid-template-columns: 1fr auto; } .results li .price { grid-column: 1; text-align: left; } }

/* ── RACK (elemento protagonista) ── */
.rack { position: relative; width: min(440px, 100%); margin-inline: auto; padding: 22px 30px; border-radius: 14px;
  background: linear-gradient(90deg, #0c130f, #121c16 12%, #0d1510 88%, #0a0f0c);
  border: 1px solid #22352a; box-shadow: 0 50px 120px -40px rgba(57,255,20,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.rack::before, .rack::after { content: ""; position: absolute; top: 14px; bottom: 14px; width: 12px;
  background: radial-gradient(circle, #050806 2px, transparent 2.5px) center top / 12px 22px repeat-y; opacity: .9; }
.rack::before { left: 10px; } .rack::after { right: 10px; }
.rack-head { display: flex; justify-content: space-between; font: 400 .7rem/1 var(--font-mono); color: var(--mist); margin-bottom: 12px; padding: 0 2px; }
.rack-head b { color: var(--reactor); font-weight: 500; }
.blade { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; padding: 16px 16px 16px 18px; margin-bottom: 10px; min-height: 92px;
  border-radius: 6px; text-decoration: none; color: var(--ice);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px) right 74px center / 120px 46px no-repeat,
    linear-gradient(180deg, #17241c, #111a15);
  border: 1px solid #253a2d; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px -10px #000;
  transition: transform .45s var(--ease), border-color .3s, box-shadow .3s;
  will-change: transform;
}
.blade:last-child { margin-bottom: 0; }
.blade:hover, .blade:focus-visible { color: var(--ice); transform: translateX(-18px); border-color: rgba(57,255,20,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(57,255,20,.25), 18px 0 40px -12px rgba(57,255,20,.4); }
.blade .k { font: 600 .98rem/1.1 var(--font-display); letter-spacing: -.01em; }
.blade .v { display: block; margin-top: .4rem; font: 400 .8rem/1.3 var(--font-mono); color: var(--mist); }
.blade .leds { display: grid; grid-template-columns: repeat(3, 8px); gap: 6px; }
.blade .leds i { width: 8px; height: 8px; border-radius: 50%; background: #1e2c23; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.blade .handle { position: absolute; left: 6px; top: 22%; bottom: 22%; width: 3px; border-radius: 2px; background: #2a4033; }

/* Secuencia de encendido: una sola vez al cargar */
.rack.boot .leds i { animation: ledOn .5s var(--ease) forwards; }
.rack.boot .blade:nth-of-type(1) .leds i:nth-child(1) { animation-delay: .25s; }
.rack.boot .blade:nth-of-type(1) .leds i:nth-child(2) { animation-delay: .32s; }
.rack.boot .blade:nth-of-type(1) .leds i:nth-child(3) { animation-delay: .39s; }
.rack.boot .blade:nth-of-type(2) .leds i:nth-child(1) { animation-delay: .5s; }
.rack.boot .blade:nth-of-type(2) .leds i:nth-child(2) { animation-delay: .57s; }
.rack.boot .blade:nth-of-type(2) .leds i:nth-child(3) { animation-delay: .64s; }
.rack.boot .blade:nth-of-type(3) .leds i:nth-child(1) { animation-delay: .75s; }
.rack.boot .blade:nth-of-type(3) .leds i:nth-child(2) { animation-delay: .82s; }
.rack.boot .blade:nth-of-type(3) .leds i:nth-child(3) { animation-delay: .89s; }
.rack.boot .blade:nth-of-type(4) .leds i:nth-child(1) { animation-delay: 1s; }
.rack.boot .blade:nth-of-type(4) .leds i:nth-child(2) { animation-delay: 1.07s; }
.rack.boot .blade:nth-of-type(4) .leds i:nth-child(3) { animation-delay: 1.14s; }
.rack .leds i:nth-child(3) { --led: var(--phosphor); }
@keyframes ledOn { 0% { background: #1e2c23; } 40% { background: #eaffe0; box-shadow: 0 0 14px 4px rgba(57,255,20,.9); } 100% { background: var(--led, var(--reactor)); box-shadow: 0 0 9px 1px rgba(57,255,20,.75); } }
.rack.on .leds i { background: var(--led, var(--reactor)); box-shadow: 0 0 9px 1px rgba(57,255,20,.75); }
.blade:hover .leds i:nth-child(2) { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.rack-foot { margin-top: 12px; display: flex; gap: 8px; align-items: center; font: 400 .7rem/1 var(--font-mono); color: var(--mist); }
.rack-foot .bar { flex: 1; height: 4px; border-radius: 2px; background: #15221a; overflow: hidden; }
.rack-foot .bar b { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--reactor), var(--phosphor)); }
.rack.boot .rack-foot .bar b { animation: fill 1.3s .2s var(--ease) forwards; }
.rack.on .rack-foot .bar b { transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }

/* ── PLANES: comparador en un solo chasis ── */
.switch { display: inline-grid; grid-template-columns: 1fr 1fr; position: relative; padding: 4px; border-radius: 999px; background: var(--chassis); border: 1px solid var(--rail); margin-bottom: 2rem; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch label { position: relative; z-index: 1; margin: 0; padding: .55rem 1.3rem; border-radius: 999px; cursor: pointer; font: 500 .92rem/1.2 var(--font-body); color: var(--mist); text-align: center; transition: color .25s; }
.switch label small { display: block; font: 400 .72rem/1.2 var(--font-mono); color: var(--reactor); }
.switch .knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #1a2a20; box-shadow: inset 0 0 0 1px rgba(57,255,20,.4); transition: transform .35s var(--ease); }
.switch input:nth-of-type(2):checked ~ .knob { transform: translateX(100%); }
.switch input:checked + label { color: var(--ice); }
.switch input:focus-visible + label { outline: 2px solid var(--reactor); outline-offset: 2px; }

.compare { display: grid; grid-template-columns: 210px repeat(var(--cols, 3), minmax(0, 1fr)); border: 1px solid var(--rail); border-radius: 16px; background: var(--chassis); overflow: hidden; }
.compare .col { border-left: 1px solid var(--rail); display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 8); position: relative; transition: background-color .35s; }
.compare .labels { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 8); }
.compare .cell { padding: .85rem 1.1rem; border-top: 1px solid var(--rail); display: flex; align-items: center; font-size: .95rem; }
.compare .labels .cell { color: var(--mist); font-size: .88rem; }
.compare .cell:first-child { border-top: 0; }
.compare .head { display: block; padding: 1.6rem 1.25rem 1.25rem; }
.compare .head h3 { font-size: 1.3rem; margin: 0 0 .35rem; }
.compare .head p { color: var(--mist); font-size: .88rem; margin: 0 0 1rem; min-height: 2.8em; }
.compare .price { font: 600 2.1rem/1 var(--font-display); letter-spacing: -.03em; }
.compare .price small { font: 400 .85rem/1 var(--font-body); color: var(--mist); letter-spacing: 0; margin-left: .2rem; }
.compare .price-note { font-size: .78rem; color: var(--mist); margin-top: .45rem; min-height: 1.2em; }
.compare .cta { padding: 1.1rem 1.25rem 1.4rem; }
.compare .cta .btn { width: 100%; }
.compare .col.energized { background: linear-gradient(180deg, rgba(57,255,20,.07), transparent 45%); }
.compare .col.energized::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--reactor); box-shadow: 0 0 18px 2px rgba(57,255,20,.7); }
.compare .col:not(.energized) .btn { background: transparent; color: var(--ice); border-color: var(--rail); }
.compare .col:not(.energized) .btn:hover { border-color: var(--reactor); color: var(--reactor); box-shadow: none; }
.compare .badge { position: absolute; top: 1.1rem; right: 1rem; font: 500 .72rem/1 var(--font-mono); color: var(--void); background: var(--reactor); padding: .3rem .5rem; border-radius: 4px; }
.compare.c2 { --cols: 2; } .compare.c3 { --cols: 3; } .compare.c4 { --cols: 4; }
.yes { color: var(--reactor); }
.data-label { display: none; }
@media (max-width: 880px) {
  .compare { grid-template-columns: 1fr; border: 0; background: none; gap: 1rem; }
  .compare .labels { display: none; }
  .compare .col { display: block; border: 1px solid var(--rail); border-radius: 14px; background: var(--chassis); overflow: hidden; }
  .compare .cell { justify-content: space-between; }
  .data-label { display: inline; color: var(--mist); font-size: .85rem; }
}
.fine { font-size: .82rem; color: var(--mist); margin-top: 1rem; }

/* ── SERVIDORES: unidades de rack ── */
.units { display: grid; gap: 12px; }
.unit { display: grid; grid-template-columns: 160px repeat(3, minmax(0, 1fr)) 150px auto; gap: 1.25rem; align-items: center; padding: 1.1rem 1.25rem 1.1rem 2.2rem; position: relative;
  border-radius: 10px; background: linear-gradient(180deg, #121c16, #0d1510); border: 1px solid #22352a; transition: border-color .3s, transform .4s var(--ease); }
.unit::before { content: "1U"; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%) rotate(-90deg); font: 500 .62rem/1 var(--font-mono); color: #4d6656; }
.unit:hover, .unit:focus-within { border-color: rgba(57,255,20,.5); }
.unit h3 { margin: 0; font-size: 1.05rem; }
.unit .metric { font: 400 .78rem/1.3 var(--font-mono); color: var(--mist); }
.unit .metric b { display: block; font: 500 1.05rem/1.2 var(--font-mono); color: var(--ice); margin-bottom: .35rem; }
.meter { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.meter i { height: 6px; border-radius: 1px; background: #1c2b22; }
.meter i.on { background: var(--reactor); box-shadow: 0 0 6px rgba(57,255,20,.6); }
.unit .uprice { font: 600 1.35rem/1 var(--font-display); text-align: right; }
.unit .uprice small { display: block; font: 400 .75rem/1.4 var(--font-body); color: var(--mist); }
@media (max-width: 980px) { .unit { grid-template-columns: 1fr 1fr; padding-left: 1.25rem; } .unit::before { display: none; } .unit h3 { grid-column: 1 / -1; } .unit .uprice { text-align: left; } }

/* ── VENTAJAS ── */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; border-top: 1px solid var(--rail); }
.reasons div { padding: 1.75rem 0; border-bottom: 1px solid var(--rail); display: grid; grid-template-columns: 2.25rem 1fr; gap: .25rem 1rem; }
.reasons svg { grid-row: span 2; width: 26px; height: 26px; color: var(--reactor); margin-top: .1rem; }
.reasons h3 { margin: 0; font-size: 1.1rem; }
.reasons p { margin: .25rem 0 0; color: var(--mist); font-size: .97rem; }
@media (max-width: 760px) { .reasons { grid-template-columns: 1fr; } }

/* Servicios adicionales */
.addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.addon { padding: 1.6rem; border: 1px solid var(--rail); border-radius: 14px; background: var(--chassis); display: grid; gap: .75rem; align-content: start; }
.addon .uprice { font: 600 1.5rem/1 var(--font-display); }
.addon .uprice small { font: 400 .8rem var(--font-body); color: var(--mist); }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--rail); }
.faq summary { list-style: none; cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0; position: relative; font: 600 1.05rem/1.35 var(--font-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .3rem; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--reactor), var(--reactor)) center / 14px 2px no-repeat, linear-gradient(var(--reactor), var(--reactor)) center / 2px 14px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { color: var(--mist); padding-bottom: 1.25rem; margin: 0; }

/* CTA final */
.final { text-align: left; }
.final .box { position: relative; overflow: hidden; border-radius: 20px; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgba(57,255,20,.35); background: radial-gradient(600px 300px at 90% 0%, rgba(57,255,20,.18), transparent 70%), var(--chassis); display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: end; }
.final h2 { margin: 0; max-width: 18ch; }

/* Pie */
.foot { border-top: 1px solid var(--rail); padding: 3rem 0 2.5rem; color: var(--mist); font-size: .9rem; }
.foot .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.foot h4 { color: var(--ice); font: 600 .9rem/1.2 var(--font-body); margin: 0 0 .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot a { color: var(--mist); text-decoration: none; }
.foot a:hover { color: var(--reactor); }
.foot .legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--rail); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: 1fr 1fr; } .foot .wrap > div:first-child { grid-column: 1 / -1; } }

/* Páginas interiores */
.page-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.narrow { width: min(720px, 100% - 2rem); margin-inline: auto; }
.prose h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.prose p, .prose li { color: var(--mist); }
.prose li { margin-bottom: .4rem; }

.tld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tld { padding: 1.1rem 1rem; border: 1px solid var(--rail); border-radius: 10px; background: var(--chassis); }
.tld b { display: block; font: 600 1.35rem/1 var(--font-display); margin-bottom: .6rem; }
.tld span { display: block; font: 400 .82rem/1.5 var(--font-mono); color: var(--mist); }
.tld span em { font-style: normal; color: var(--ice); }

/* Carrito / pago */
.panelbox { border: 1px solid var(--rail); border-radius: 14px; background: var(--chassis); padding: clamp(1.25rem, 3vw, 2rem); }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--rail); }
.lines li:first-child { padding-top: 0; }
.lines .amt { font-family: var(--font-mono); }
.linkbtn { background: none; border: 0; color: var(--mist); cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; padding: .25rem; }
.linkbtn:hover { color: var(--alert); }
.totals { display: grid; gap: .55rem; font-size: .95rem; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font: 600 1.35rem/1 var(--font-display); padding-top: .8rem; border-top: 1px solid var(--rail); margin-top: .3rem; }

.auth { display: grid; place-items: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.auth .panelbox { width: min(460px, 100% - 2rem); }
.auth h1 { font-size: 1.8rem; }
.demo-creds { margin-top: 1.25rem; padding: .9rem 1rem; border: 1px dashed rgba(255,179,71,.5); border-radius: 8px; font: 400 .82rem/1.6 var(--font-mono); color: #ffe3bf; }

/* Diálogo de contratación */
dialog { width: min(520px, 100% - 2rem); border: 1px solid rgba(57,255,20,.4); border-radius: 16px; background: var(--chassis); color: var(--ice); padding: 0; box-shadow: 0 40px 120px -20px #000, var(--glow); }
dialog::backdrop { background: rgba(2,4,3,.75); backdrop-filter: blur(4px); }
dialog[open] { animation: dlg .3s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(12px) scale(.98); } }
dialog form { padding: 1.75rem; }
dialog h2 { font-size: 1.3rem; }
.dlg-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }

/* Pasarela simulada */
.fakepay { border: 2px dashed var(--amber); }
.fakepay .ribbon { display: inline-block; font: 500 .8rem/1 var(--font-mono); color: var(--void); background: var(--amber); padding: .4rem .6rem; border-radius: 4px; margin-bottom: 1rem; }

.steps-done { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .6rem; }
.steps-done li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--rail); border-radius: 10px; background: var(--chassis); flex-wrap: wrap; }

.err-code { font: 800 clamp(5rem, 16vw, 10rem)/.9 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--reactor); margin-bottom: 1rem; }
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.after { margin-top: 2rem; }
section.tight-top { padding-top: 0; }