/* Mini-apps · parqueo destacado, 8 demos en filas alternadas, mensajes, proceso, cotización */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-acc{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:32px;animation-delay:.7s}
.page-top .lead{max-width:52ch}

/* ---------- parqueo ---------- */
.parqueo{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:center;border-top:1px solid var(--line)}
.pq-txt{display:grid;gap:22px;justify-items:start}
.pq-chk li{color:var(--txt)}
.pq-precio{display:grid;gap:6px;padding-top:20px;border-top:1px solid var(--line);width:100%}
.pq-precio span{font-size:14px}
.pq-acc{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.pq-app{position:relative;padding:0;overflow:hidden;background:linear-gradient(160deg,rgba(74,91,255,.12),rgba(237,235,230,.02) 55%);border-color:rgba(143,160,255,.35);box-shadow:0 40px 90px -30px rgba(74,91,255,.35)}
.pq-bar{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line);font-size:14px}
.pq-bar b{font-weight:500}
.pq-bar .dim{margin-left:auto;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.pq-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:late-pq 2s ease-in-out infinite}
@keyframes late-pq{50%{opacity:.35}}
.pq-tabla-w{padding:6px 22px 0;overflow-x:auto}
.pq-tabla{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.pq-tabla th{font-weight:400;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:12px 8px 10px 0}
.pq-tabla td{padding:11px 8px 11px 0;border-top:1px solid var(--line);white-space:nowrap}
.pq-tabla td:first-child{font-weight:500;letter-spacing:.02em}
.pq-tabla .num{text-align:right;padding-right:0}
.pq-tabla tbody tr{transition:background .3s}
.pq-tabla tbody tr:hover{background:rgba(143,160,255,.06)}
.en-curso{font-size:12px;color:var(--warn);border:1px solid rgba(255,176,32,.4);border-radius:999px;padding:2px 8px}
.pq-tarifas{display:flex;flex-wrap:wrap;gap:8px;padding:18px 22px;border-top:1px solid var(--line);margin-top:8px}
.pq-tarifas span{font-size:13px;color:var(--dim);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.pq-tarifas b{color:var(--txt);font-weight:500;margin-left:4px}
.pq-caja{display:grid;grid-template-columns:1fr 1fr 1.3fr;border-top:1px solid var(--line)}
.pq-caja div{display:grid;gap:2px;padding:16px 22px;border-right:1px solid var(--line)}
.pq-caja div:last-child{border-right:0}
.pq-caja span{font-size:12px}
.pq-caja b{font-size:20px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pq-caja .saldo{background:rgba(74,91,255,.14)}
.pq-caja .saldo b{color:var(--ac2);font-size:24px}

/* ---------- demos en filas alternadas ---------- */
.dm-lista{list-style:none;display:grid;gap:clamp(56px,7vw,110px);counter-reset:dm}
.dm{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.dm:nth-child(even){grid-template-columns:1fr 1.35fr}
.dm:nth-child(even) .dm-img{order:2}
.dm-img{display:block;position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg3);outline:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.dm-img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease),filter .6s}
.dm-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,11,.55));pointer-events:none}
.dm:hover .dm-img img{transform:scale(1.04)}
.dm-txt{display:grid;gap:14px;align-content:center;justify-items:start}
.dm-n{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(56px,6vw,96px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(143,160,255,.6)}
.dm-txt h3{font-size:clamp(28px,2.8vw,44px);letter-spacing:-.035em}
.dm-txt .dim{max-width:36ch}
.dm-pie{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:6px}
.dm-cot{font-size:13px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 11px}

/* ---------- mensajes ---------- */
.mensajes{border-block:1px solid var(--line);display:grid;gap:48px;background:radial-gradient(ellipse 60% 80% at 85% 50%,rgba(74,91,255,.12),transparent 70%)}
.ms-grande{font-size:clamp(32px,4.6vw,68px);font-weight:500;letter-spacing:-.04em;line-height:1.05;max-width:20ch}
.ms-grande em{color:var(--ac2)}
.ms-otro{display:flex;justify-content:space-between;align-items:baseline;gap:16px 40px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line)}
.ms-otro p{font-size:var(--s-lead);color:var(--dim);max-width:52ch}
.ms-otro em{color:var(--txt);font-size:1.15em}

/* ---------- proceso ---------- */
.pr-lista{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.pr-lista li{display:grid;gap:10px;align-content:start;padding:28px 24px 0;border-right:1px solid var(--line)}
.pr-lista li:first-child{padding-left:0}
.pr-lista li:last-child{border-right:0}
.pr-n{font-size:13px;color:var(--ac2)}
.pr-lista b{font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:-.03em}
.pagos{display:grid;grid-template-columns:auto auto 1fr;gap:20px 56px;align-items:center;margin-top:56px;padding:28px 32px;border:1px dashed var(--line);border-radius:var(--r)}
.pagos>div{display:grid;gap:4px}
.pg-nota{justify-self:end;max-width:40ch;font-size:15px}

/* ---------- cotizar ---------- */
.cotizar{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ct-txt{display:grid;gap:24px}
.cotizar .form .pill{justify-self:start}

@media (max-width:900px){
  .parqueo,.cotizar{grid-template-columns:1fr}
  .dm,.dm:nth-child(even){grid-template-columns:1fr;gap:22px}
  .dm:nth-child(even) .dm-img{order:0}
  .dm-txt{grid-template-columns:auto 1fr;column-gap:16px;align-items:end}
  .dm-n{grid-row:1;align-self:end}
  .dm-txt h3{grid-row:1}
  .dm-txt .dim,.dm-pie{grid-column:1/-1}
  .pr-lista{grid-template-columns:1fr 1fr;row-gap:28px}
  .pr-lista li{border-right:0;padding-left:0}
  .pagos{grid-template-columns:auto auto;gap:16px 40px;padding:24px}
  .pg-nota{grid-column:1/-1;justify-self:start}
  .cotizar{gap:40px}
}
@media (max-width:480px){
  .pq-bar{padding:14px 16px}
  .pq-tabla-w{padding:4px 16px 0}
  .pq-tabla{font-size:14px}
  .pq-tarifas{padding:16px}
  .pq-caja{grid-template-columns:1fr 1fr}
  .pq-caja div{padding:14px 16px}
  .pq-caja .saldo{grid-column:1/-1;border-top:1px solid var(--line)}
  .pq-caja div:nth-child(2){border-right:0}
  .pr-lista{column-gap:20px}
  .pr-lista li{padding-top:20px}
  .pq-acc .pill{flex:1 1 100%;text-align:center}
}

/* ===== galería de demos: superficies variadas, modo claro/oscuro y vista rápida ===== */
.galeria{transition:background-color .5s var(--ease),color .5s var(--ease)}
.galeria.claro{background:#F2F1EC;color:#121214}
.galeria.claro .kicker,.galeria.claro .gal-ctl p{color:#5E5C57}
.galeria.claro h2 em{color:#3A4BEF}
.gal-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:48px}
.gal-ctl{display:grid;gap:18px;justify-items:start}
.gal-ctl p{color:var(--dim);max-width:44ch}
.modo{display:flex;border:1px solid currentColor;border-radius:999px;padding:3px;background:none;color:inherit;font:500 14px "Inter Tight",system-ui}
.modo span{padding:8px 14px;border-radius:999px;transition:background .3s,color .3s}
.galeria.claro .m-claro,.galeria:not(.claro) .m-oscuro{background:currentColor}
.galeria.claro .m-claro{color:#F2F1EC;background:#121214}
.galeria:not(.claro) .m-oscuro{color:#0A0A0B;background:var(--txt)}

.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gm{border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:16px;transition:transform .5s var(--ease)}
.gm:hover{transform:translateY(-6px)}
.gm.grande{grid-column:span 2;grid-row:span 2}
.gm.ancha{grid-column:span 2}
.s-blanca{background:#fff;color:#121214;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.s-negra{background:#0E0E10;color:#EDEBE6}
.s-azul{background:#3A4BEF;color:#fff}
.s-arena{background:#E7E1D4;color:#1C1A16}
.galeria:not(.claro) .s-blanca{background:#18181B;color:#EDEBE6}
.galeria:not(.claro) .s-arena{background:#1E1C18;color:#EDEBE6}
.ventana{border-radius:12px;overflow:hidden;background:#1a1a1e;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.v-barra{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#2a2a30}
.v-barra i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.v-barra i:nth-child(2){background:#febc2e}.v-barra i:nth-child(3){background:#28c840}
.v-barra span{margin-left:8px;font-size:11px;color:#a8a8b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ventana img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.gm:hover .ventana img{transform:scale(1.04)}
.gm-txt{display:flex;flex-direction:column;gap:8px;flex:1}
.gm-txt h3{font-size:clamp(20px,1.5vw,24px)}
.gm.grande .gm-txt h3{font-size:clamp(26px,2.2vw,36px)}
.gm-txt p{opacity:.78;font-size:15px}
.gm-acc{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.gm-ver{font-size:14px;padding:9px 16px}
.gm-abrir{font-size:14px;opacity:.8;border-bottom:1px solid currentColor}
.gm-abrir:hover{opacity:1}
.gm-cot{font-size:12px;opacity:.6}

/* ventana emergente */
.visor{border:0;padding:0;width:min(1200px,94vw);height:min(820px,88vh);border-radius:16px;overflow:hidden;background:#111;color:#eee;box-shadow:0 40px 120px rgba(0,0,0,.6);margin:auto}
.visor::backdrop{background:rgba(5,5,8,.72);backdrop-filter:blur(6px)}
.visor[open]{display:flex;flex-direction:column;animation:visor .45s var(--ease)}
@keyframes visor{from{opacity:0;transform:translateY(24px) scale(.96)}}
.visor-barra{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#202024}
.visor-barra i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.visor-barra i:nth-child(2){background:#febc2e}.visor-barra i:nth-child(3){background:#28c840}
.visor-barra b{margin-left:12px;font-weight:500;font-size:14px}
.visor-abrir{margin-left:auto;font-size:13px;color:#aab;border-bottom:1px solid currentColor}
.visor-cerrar{background:#2e2e34;border:0;color:#fff;width:32px;height:32px;border-radius:50%;margin-left:14px;font-size:14px}
.visor-cerrar:hover{background:#3A4BEF}
.visor-frame{flex:1;width:100%;border:0;background:#fff}

@media (max-width:1000px){.gal-grid{grid-template-columns:1fr 1fr}.gm.grande{grid-row:auto}}
@media (max-width:640px){
  .gal-head{grid-template-columns:1fr;gap:20px}
  .gal-grid{grid-template-columns:1fr}.gm.grande,.gm.ancha{grid-column:auto}
  .visor{width:100vw;height:100svh;max-width:none;max-height:none;border-radius:0}
}
@media (prefers-reduced-motion:reduce){.visor[open]{animation:none}}