/* =========================================================
   PROPUESTA — página de producto con dashboard protagonista.
   Cada sección usa una animación distinta (ninguna se repite en la página).
   ========================================================= */
.pv { --pv-ink: #111316; --pv-mute: #4a4f58; --pv-line: rgba(17, 19, 22, .08); --ok: #16a34a; --warn: #d97706; --bad: #dc2626; overflow-x: clip; }
.pv .shead { text-align: center; align-items: center; margin-inline: auto; }
.pv .shead .lead { margin-inline: auto; }

/* ---------- 1. Hero: texto centrado + dashboard grande ---------- */
.pv-hero { position: relative; padding: 170px var(--gutter) 40px; display: flex; flex-direction: column; align-items: center; }
.pv-hero__text { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; max-width: 980px; }
.pv-hero__logo { height: 34px; width: auto; animation: fade-up .8s var(--ease-out) .05s both; }
.pv-hero__title { font-size: clamp(36px, 5.6vw, 88px); font-weight: 500; line-height: 1.02; letter-spacing: -.055em; max-width: 16ch; }
.pv-hero__lead { max-width: 60ch; animation: fade-up .8s var(--ease-out) .5s both; }
.pv-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; animation: fade-up .8s var(--ease-out) .65s both; }
.pv-hero__ctas .btn { min-height: 48px; padding-inline: 26px; }
.pv-hero__checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; color: var(--pv-mute); animation: fade-up .8s var(--ease-out) .8s both; }
.pv-hero__checks li { display: inline-flex; align-items: center; gap: 6px; }
.pv-hero__checks svg, .pv-demo__list svg { width: 18px; height: 18px; color: var(--ok); flex: none; }

/* Escenario: ventana inclinada que se endereza con el scroll (--t va de 1 a 0) */
.pv-stage { --t: 1; position: relative; width: min(1240px, 100%); margin-top: 64px; perspective: 1800px; animation: media-in 1.2s var(--ease-out) .5s both; }
.pv-win {
  position: relative; border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid var(--pv-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 50px 100px -40px rgba(17, 19, 22, .45), 0 20px 40px -30px rgba(17, 19, 22, .3);
  transform-origin: 50% 0; transform: rotateX(calc(var(--t) * 20deg)) scale(calc(1 - var(--t) * .06)); will-change: transform;
}
.pv-win__bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; background: #f6f7f9; border-bottom: 1px solid var(--pv-line); font-size: 12.5px; color: var(--pv-mute); }
.pv-win__dots { display: flex; gap: 7px; }
.pv-win__dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.pv-win__dots i:nth-child(2) { background: #febc2e; } .pv-win__dots i:nth-child(3) { background: #28c840; }
.pv-win__title { flex: 1; text-align: center; font-weight: 500; }
.pv-win__live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ok); }
.pv-win__live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: pv-live 1.8s ease-out infinite; }
@keyframes pv-live { to { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } }

/* La pantalla se diseña a 1280 px de ancho (alto por producto, --dh) y se escala al ancho disponible (proposal.js) */
.pv-win__body { position: relative; aspect-ratio: 1280 / var(--dh, 810); overflow: hidden; background: #f6f7fb; }
.pv-screen { position: absolute; inset: 0; animation: pv-fade .5s var(--ease-out) both; }
.pv-screen[hidden] { display: none; }
.pv-screen__in { width: 1280px; height: calc(var(--dh, 810) * 1px); }
.pv-screen__in > * { width: 100%; height: 100% !important; min-height: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
@keyframes pv-fade { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: none; } }

/* Alertas flotantes: aparecen escalonadas y flotan suavemente */
.pv-callout {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; min-width: 240px;
  border-radius: 16px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 48px -20px rgba(17, 19, 22, .35);
  opacity: 0; animation: pv-pop .7s var(--ease-out) forwards, pv-float 6s ease-in-out infinite;
}
.pv-callout > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: none; color: #fff; background: var(--k); }
.pv-callout svg { width: 20px; height: 20px; fill: currentColor; }
.pv-callout b { display: block; font-size: 14px; font-weight: 600; color: var(--pv-ink); }
.pv-callout small { display: block; font-size: 12.5px; color: var(--pv-mute); }
.pv-callout.is-bad { --k: var(--bad); } .pv-callout.is-warn { --k: var(--warn); } .pv-callout.is-ok { --k: var(--ok); }
.pv-callout--0 { left: -48px; top: 30%; animation-delay: 1.4s, 2.1s; }
.pv-callout--1 { right: -48px; top: 42%; animation-delay: 1.9s, 2.6s; }
.pv-callout--2 { left: 6%; bottom: -30px; animation-delay: 2.4s, 3.1s; }
@keyframes pv-pop { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Teléfono superpuesto (Movilística y Trayectus) */
.pv-stage--phone .pv-win { width: 86%; }
.pv-stage--phone .pv-callout--1 { right: 23%; top: -26px; }
.pv-stage--phone .pv-callout--2 { left: auto; right: 23%; bottom: 8%; }
.pv-phone {
  position: absolute; z-index: 2; right: 0; bottom: -36px; width: 19.5%; aspect-ratio: 9 / 19; padding: 8px; border-radius: 40px;
  background: #16181d; box-shadow: 0 0 0 2px #3a3d44 inset, 0 40px 80px -30px rgba(17, 19, 22, .55);
  animation: pv-phone-in 1.1s var(--ease-out) 1s both;
}
@keyframes pv-phone-in { from { opacity: 0; transform: translate(40px, 30px) rotate(4deg); } to { opacity: 1; transform: none; } }
.pv-phone__island { position: absolute; z-index: 2; top: 18px; left: 50%; width: 30%; height: 20px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.pv-phone__screen { height: 100%; border-radius: 32px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.pv-phone__map { width: 100%; height: 48%; display: block; }
.pv-phone__bus { animation: pv-bus 3s ease-in-out infinite alternate; }
@keyframes pv-bus { to { transform: translate(30px, -22px); } }
.pv-app { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; text-align: left; }
.pv-app small { font-size: 11px; color: var(--pv-mute); }
.pv-app b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.pv-app b em { display: block; font-style: normal; font-size: 26px; color: var(--brand); letter-spacing: -.03em; }
.pv-app ul { display: grid; gap: 7px; margin-top: 4px; font-size: 11.5px; }
.pv-app li { display: flex; align-items: center; gap: 8px; color: var(--pv-mute); }
.pv-app li i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #cbd5e1; flex: none; }
.pv-app li span { margin-left: auto; font-variant-numeric: tabular-nums; }
.pv-app li.is-done i { background: var(--brand); border-color: var(--brand); }
.pv-app li.is-now { color: var(--pv-ink); font-weight: 600; } .pv-app li.is-now i { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.pv-app__bar { height: 6px; border-radius: 6px; background: #e5e7eb; overflow: hidden; } .pv-app__bar i { display: block; height: 100%; width: var(--w); background: var(--brand); border-radius: inherit; }
.pv-app__btn { margin-top: auto; padding: 11px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600; text-align: center; }

/* Control segmentado: cambia la pantalla del dashboard */
.pv-seg {
  position: relative; display: flex; gap: 2px; margin-top: 44px; padding: 4px; border-radius: 99px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: rgba(17, 19, 22, .06);
}
.pv-seg::-webkit-scrollbar { display: none; }
.pv-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 99px; background: #fff; box-shadow: 0 2px 10px rgba(17, 19, 22, .12); transition: transform .45s var(--ease-out), width .45s var(--ease-out); }
.pv-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 99px; font-size: 14.5px; font-weight: 500; color: var(--pv-mute); white-space: nowrap; cursor: pointer; transition: color .2s; }
.pv-seg button svg { width: 18px; height: 18px; fill: currentColor; }
.pv-seg button[aria-selected="true"] { color: var(--pv-ink); }
.pv-seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pv-note { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

/* ---------- 2. Flujo de alertas: los cables se dibujan y un pulso los recorre ---------- */
.pv-flow { display: grid; grid-template-columns: 1fr 90px 1fr 90px 1.15fr; align-items: center; max-width: 1240px; margin: 64px auto 0; }
.pv-node { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--pv-line); box-shadow: 0 20px 40px -32px rgba(17, 19, 22, .35); }
.pv-node > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 8px; background: var(--brand-soft); color: var(--brand); }
.pv-node > span svg { width: 24px; height: 24px; fill: currentColor; }
.pv-node small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pv-mute); }
.pv-node b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.pv-node p { font-size: 15px; color: var(--pv-mute); line-height: 1.4; }
.pv-node--event::after { content: ""; position: absolute; top: 22px; right: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); animation: pv-live 1.6s ease-out infinite; }
.pv-wire { position: relative; height: 2px; margin-inline: 8px; background: linear-gradient(90deg, var(--brand) 0 0) no-repeat 0 0 / 0 100%, rgba(17, 19, 22, .1); transition: background-size 1s var(--ease-out); }
.pv-wire i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 22%, transparent); opacity: 0; }
.pv-flow.is-in .pv-wire { background-size: 100% 100%, auto; }
.pv-flow.is-in .pv-wire--fork { transition-delay: .9s; }
.pv-flow.is-in .pv-wire i { animation: pv-pulse 2.6s ease-in-out 1.1s infinite; }
.pv-flow.is-in .pv-wire--fork i { animation-delay: 2.4s; }
@keyframes pv-pulse { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.pv-outs { display: grid; gap: 10px; }
.pv-outs li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--pv-line); opacity: .35; transform: translateX(-10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(1.8s + var(--i) * .25s); }
.pv-flow.is-in .pv-outs li { opacity: 1; transform: none; }
.pv-outs li > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); flex: none; }
.pv-outs li svg { width: 18px; height: 18px; fill: currentColor; }
.pv-outs b { display: block; font-size: 15px; font-weight: 600; } .pv-outs small { font-size: 13px; color: var(--pv-mute); }
.pv-outs em { margin-left: auto; color: var(--ok); } .pv-outs em svg { width: 20px; height: 20px; fill: none; }

/* ---------- 3. Módulos en bento: las tarjetas se despliegan desde abajo ---------- */
.pv-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1240px; margin: 64px auto 0; }
.pv-bento--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-tile { display: flex; flex-direction: column; border-radius: 28px; background: #fff; border: 1px solid var(--pv-line); overflow: hidden; opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .3s; transition-delay: calc(var(--i) * 90ms); }
.pv-tile.is-in { opacity: 1; transform: none; }
.pv-tile:hover { box-shadow: 0 30px 60px -40px rgba(17, 19, 22, .4); }
.pv-tile--wide { grid-column: span 2; }
.pv-tile__art { position: relative; flex: 1; min-height: 300px; }
.pv-tile__art > .mg { inset: 14px 14px 0; border-radius: 18px; }
.pv-tile--wide .pv-tile__art { min-height: 300px; }
.pv-tile__text { padding: 20px 24px 24px; }
.pv-tile h3 { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.pv-tile h3 svg { width: 20px; height: 20px; fill: var(--brand); flex: none; }
.pv-tile__text p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--pv-mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv-tile--wide .pv-tile__text p { -webkit-line-clamp: unset; }

/* ---------- 4. Pasos que se apilan al hacer scroll ---------- */
.pv-steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); max-width: 1240px; margin: 0 auto; align-items: start; }
.pv-steps__head { position: sticky; top: 140px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pv-steps__list { display: grid; gap: 22px; padding-bottom: 40px; }
.pv-step {
  position: sticky; top: calc(130px + var(--i) * 22px); display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: start; min-height: 220px; padding: 32px;
  border-radius: 28px; background: #fff; border: 1px solid var(--pv-line); box-shadow: 0 -10px 40px -30px rgba(17, 19, 22, .35);
}
.pv-step__n { font-size: 15px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.pv-step h3 { font-size: 28px; font-weight: 500; letter-spacing: -.035em; }
.pv-step p { margin-top: 10px; font-size: 16.5px; line-height: 1.45; color: var(--pv-mute); max-width: 40ch; }
.pv-step__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--brand-soft); color: var(--brand); }
.pv-step__ic svg { width: 30px; height: 30px; fill: currentColor; }

/* ---------- 5. Hardware en órbita ---------- */
.pv-orbit-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; max-width: 1240px; margin: 0 auto; }
.pv-orbit { position: relative; width: min(520px, 100%); aspect-ratio: 1; margin-inline: auto; }
.pv-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(17, 19, 22, .14); }
.pv-orbit__ring--2 { inset: 22%; border-style: solid; border-color: rgba(17, 19, 22, .07); background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 35%, transparent), transparent 70%); }
.pv-orbit__core { position: absolute; inset: 36%; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 30px 60px -30px rgba(17, 19, 22, .4); }
.pv-orbit__core img { width: 70%; height: auto; }
.pv-orbit__spin { position: absolute; inset: 0; animation: pv-spin 40s linear infinite; }
.pv-orbit__sat { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px; border-radius: 18px; background: #fff; color: var(--brand); border: 1px solid var(--pv-line); box-shadow: 0 14px 30px -18px rgba(17, 19, 22, .35);
  transform: rotate(var(--a)) translate(min(260px, 50cqw)) rotate(calc(-1 * var(--a))); }
.pv-orbit { container-type: inline-size; }
.pv-orbit__sat { transform: rotate(var(--a)) translate(50cqw) rotate(calc(-1 * var(--a))); }
.pv-orbit__sat svg { width: 26px; height: 26px; fill: currentColor; animation: pv-spin 40s linear infinite reverse; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-orbit__text { display: flex; flex-direction: column; gap: 20px; }
.pv-orbit__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 6px; }
.pv-orbit__list li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.pv-orbit__list svg { width: 20px; height: 20px; fill: var(--brand); flex: none; }

/* ---------- 6. Preguntas frecuentes ---------- */
.pv-faq { max-width: 860px; margin: 56px auto 0; display: grid; gap: 12px; }
.pv-faq details { border-radius: 22px; background: #fff; border: 1px solid var(--pv-line); }
.pv-faq summary { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 18px 24px; font-size: 18px; font-weight: 500; letter-spacing: -.015em; cursor: pointer; list-style: none; }
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary span { position: relative; margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(17, 19, 22, .06); flex: none; transition: transform .35s var(--ease-out); }
.pv-faq summary span::before, .pv-faq summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--pv-ink); }
.pv-faq summary span::after { transform: rotate(90deg); transition: transform .35s var(--ease-out); }
.pv-faq details[open] summary span::after { transform: rotate(0); }
.pv-faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 22px; }
.pv-faq details p { padding: 0 24px 22px; font-size: 16px; line-height: 1.5; color: var(--pv-mute); max-width: 68ch; }
.pv-faq details[open] p { animation: fade-up .5s var(--ease-out) both; }

/* Botón flotante: aparece al salir del hero y se oculta al llegar al formulario */
.pv-sticky {
  position: fixed; z-index: 40; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 99px;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(17, 19, 22, .08); box-shadow: 0 20px 50px -20px rgba(17, 19, 22, .4);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-out), opacity .4s;
}
.pv-sticky.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.pv-sticky span { font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.pv-sticky b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 99px; background: var(--pv-ink); color: #fff; font-size: 14.5px; font-weight: 500; white-space: nowrap; }

/* Selector de la vista previa (solo en la propuesta) */

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .pv-callout--0 { left: -12px; } .pv-callout--1 { right: -12px; }
  .pv-flow { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
  .pv-wire { width: 2px; height: 48px; margin: 8px auto; background: linear-gradient(180deg, var(--brand) 0 0) no-repeat 0 0 / 100% 0, rgba(17, 19, 22, .1); }
  .pv-flow.is-in .pv-wire { background-size: 100% 100%, auto; }
  .pv-wire i { left: 50%; top: 0; margin: -5px 0 0 -5px; }
  @keyframes pv-pulse { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  .pv-steps, .pv-orbit-wrap, .pv-demo { grid-template-columns: 1fr; }
  .pv-steps__head, .pv-demo__text { position: static; }
  .pv-bento, .pv-bento--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-tile--wide { grid-column: auto; }
}
@media (max-width: 767px) {
  .pv-hero { padding-top: 130px; }
  .pv-stage { margin-top: 44px; }
  .pv-callout { min-width: 0; padding: 9px 12px 9px 9px; gap: 9px; }
  .pv-callout > span { width: 30px; height: 30px; border-radius: 9px; }
  .pv-callout b { font-size: 12.5px; } .pv-callout small { font-size: 11px; }
  .pv-callout--0 { left: -6px; top: -26px; } .pv-callout--1, .pv-callout--2 { display: none; }
  .pv-stage--phone .pv-win { width: 100%; } .pv-phone { width: 34%; right: -6px; bottom: -60px; border-radius: 30px; padding: 6px; } .pv-phone__screen { border-radius: 25px; } .pv-phone__island { top: 11px; height: 13px; }
  .pv-app { padding: 9px; gap: 4px; } .pv-app b { font-size: 11px; } .pv-app b em { font-size: 17px; } .pv-app ul, .pv-app small { font-size: 9px; } .pv-app__btn { padding: 7px; font-size: 10px; border-radius: 9px; }
  .pv-stage--phone + .pv-seg, .pv-stage--phone ~ .pv-note { margin-top: 76px; }
  .pv-win__bar { height: 32px; font-size: 11px; } .pv-win__dots i { width: 9px; height: 9px; } .pv-win__title { display: none; } .pv-win__live { margin-left: auto; }
  .pv-seg { margin-top: 28px; align-self: stretch; }
  .pv-seg button { padding: 0 14px; font-size: 13.5px; }
  .pv-bento, .pv-bento--4 { grid-template-columns: 1fr; }
  .pv-tile--wide { grid-column: auto; }
  .pv-tile--wide .pv-tile__art { min-height: 300px; }
  .pv-step { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding: 24px; top: calc(96px + var(--i) * 14px); }
  .pv-step__ic { display: none; }
  .pv-step h3 { font-size: 23px; }
  .pv-orbit { width: 82%; }
  .pv-orbit__sat { width: 46px; height: 46px; margin: -23px; border-radius: 14px; } .pv-orbit__sat svg { width: 20px; height: 20px; }
  .pv-orbit__list { grid-template-columns: 1fr; }
  .pv-sticky span { display: none; } .pv-sticky { padding-left: 14px; left: auto; right: 16px; transform: translateY(140%); }
  .pv-sticky.is-on { transform: none; }

}

@media (prefers-reduced-motion: reduce) {
  .pv-win { transform: none !important; }
  .pv-callout { opacity: 1; animation: none; }
  .pv-orbit__spin, .pv-orbit__sat svg, .pv-phone__bus, .pv-win__live i, .pv-node--event::after { animation: none; }
  .pv-wire i { display: none; }
  .pv-tile, .pv-outs li { opacity: 1; transform: none; transition: none; }
  .pv-flow .pv-wire { background-size: 100% 100%, auto; }
}

/* Íconos del sitio: de trazo, no de relleno */
.pv svg:not(.vg svg):not(.nx svg):not(.iq svg):not(.mv svg):not(.tr svg):not(.pv-phone svg):not(.btn svg) { fill: none !important; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-hero__checks svg, .pv-demo__list svg, .pv-outs em svg { stroke-width: 2.2; }
.pv-tile h3 svg, .pv-orbit__list svg { color: var(--brand); }
.pv--iomaq { --pv-icon: #b45309; }
.pv--iomaq .pv-node > span, .pv--iomaq .pv-outs li > span, .pv--iomaq .pv-step__ic, .pv--iomaq .pv-orbit__sat, .pv--iomaq .pv-tile h3 svg, .pv--iomaq .pv-orbit__list svg { color: #8a6500; }

/* =========================================================
   DEGRADADOS — cada sección con su propio fondo, en la paleta de cada producto.
   Claro (malla pastel) → oscuro (marca profunda con brillos) → claro… como el inicio.
   ========================================================= */
.pv--norux       { --g1: #dbe4f7; --g2: #e6ecfb; --g3: #cdd9f5; --g4: #e9e6f8; --deep: #041438; --deep2: #061c56; --glow: #0437ad; --glow2: #3b6ef5; --hi: #9fb9ff; }
.pv--iomaq       { --g1: #fff6cc; --g2: #ffefb3; --g3: #ffe3a1; --g4: #fff9e0; --deep: #1c1600; --deep2: #4a3a00; --glow: #ffba00; --glow2: #ffd100; --hi: #ffd100; }
.pv--movilistica { --g1: #fff6e4; --g2: #ffe2d2; --g3: #dcebff; --g4: #fff0dc; --deep: #23100a; --deep2: #7a3014; --glow: #ff743a; --glow2: #7fb9ff; --hi: #ffb08f; }
.pv--trayectus   { --g1: #e2f1ee; --g2: #f1fbc9; --g3: #d6ece7; --g4: #ecf9d2; --deep: #00211d; --deep2: #00594f; --glow: #00594f; --glow2: #b4e500; --hi: #b4e500; }

/* 1. Hero: malla pastel con un brillo que se mueve lentamente */
.pv-hero::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 38%; width: min(900px, 90vw); aspect-ratio: 1; margin-left: max(-450px, -45vw); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side at 40% 45%, color-mix(in srgb, var(--glow) 22%, transparent) 0%, transparent 100%), radial-gradient(closest-side at 62% 58%, color-mix(in srgb, var(--glow2) 18%, transparent) 0%, transparent 100%);
  opacity: .9; animation: pv-drift 22s ease-in-out infinite alternate;
}
@keyframes pv-drift { 0% { transform: translate(-6%, 0) rotate(0) scale(1); } 50% { transform: translate(5%, -4%) rotate(120deg) scale(1.08); } 100% { transform: translate(-2%, 5%) rotate(240deg) scale(.95); } }
/* (el degradado de las palabras destacadas está en unify.css, aplicado a cada palabra) */

/* Paneles oscuros con esquinas redondeadas (flujo y demo) */
.pv-flow-sec, .pv-demo-sec { position: relative; isolation: isolate; overflow: hidden; margin-inline: clamp(8px, 1.4vw, 24px); border-radius: clamp(28px, 3.6vw, 56px); color: #fff; }

/* 2. Flujo de alertas: marca profunda con dos brillos */
.pv-flow-sec {
  background:
    radial-gradient(45% 60% at 0% 0%, color-mix(in srgb, var(--glow) 45%, transparent) 0%, transparent 70%),
    radial-gradient(40% 55% at 100% 100%, color-mix(in srgb, var(--glow2) 35%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, var(--deep2) 0%, var(--deep) 62%);
}
.pv-flow-sec::before { /* retícula muy sutil */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
}
.pv-flow-sec .eyebrow, .pv-demo-sec .eyebrow { color: rgba(255, 255, 255, .7); }
.pv-flow-sec .h2, .pv-demo-sec .h2 { color: #fff; }
.pv-flow-sec .h2 b, .pv-demo-sec .h2 b { color: var(--hi); }
.pv-flow-sec .lead, .pv-demo-sec .lead { color: rgba(255, 255, 255, .74); }
.pv-flow-sec .pv-node, .pv-flow-sec .pv-outs li {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6);
  color: #fff;
}
.pv-flow-sec .pv-node > span, .pv-flow-sec .pv-outs li > span { background: rgba(255, 255, 255, .12); color: var(--hi) !important; }
.pv-flow-sec .pv-node small { color: rgba(255, 255, 255, .6); }
.pv-flow-sec .pv-node p, .pv-flow-sec .pv-outs small { color: rgba(255, 255, 255, .72); }
.pv-flow-sec .pv-outs em { color: #4ade80; }
.pv-flow-sec .pv-wire { background: linear-gradient(90deg, var(--hi) 0 0) no-repeat 0 0 / 0 100%, rgba(255, 255, 255, .16); }
.pv-flow-sec .pv-wire i { background: var(--hi); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hi) 25%, transparent), 0 0 18px var(--hi); }
.pv-flow-sec .pv-flow.is-in .pv-wire { background-size: 100% 100%, auto; }

/* 3. Bento: de blanco a pastel, con brillos de color en las esquinas */
.pv-tile { box-shadow: 0 30px 60px -48px rgba(17, 19, 22, .45); }

/* 4. Pasos: lienzo claro; cada tarjeta lleva su propio brillo de color */
.pv-step { overflow: hidden; isolation: isolate; }
.pv-step::before { content: ""; position: absolute; z-index: -1; right: -15%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%; opacity: .9; background: radial-gradient(circle, var(--c) 0%, transparent 70%); }
.pv-step:nth-child(1) { --c: var(--g1); } .pv-step:nth-child(2) { --c: var(--g2); } .pv-step:nth-child(3) { --c: var(--g3); } .pv-step:nth-child(4) { --c: var(--g4); }
.pv-step__n { font-size: 44px; font-weight: 600; letter-spacing: -.05em; line-height: 1; background: linear-gradient(160deg, var(--glow), var(--deep2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* 5. Órbita: aurora pastel */
.pv-orbit__ring--2 { background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, .2) 70%); }

/* 6. Preguntas: degradado cálido de la marca */
.pv-faq details { transition: box-shadow .3s; } .pv-faq details[open] { box-shadow: 0 24px 50px -36px rgba(17, 19, 22, .4); }

/* 7. Demo: marca profunda con aurora que gira + tarjeta de formulario */
.pv-demo-sec {
  margin-bottom: clamp(8px, 1.4vw, 24px); padding: clamp(64px, 8vw, 120px) var(--gutter);
  background:
    radial-gradient(50% 60% at 100% 0%, color-mix(in srgb, var(--glow) 55%, transparent) 0%, transparent 70%),
    radial-gradient(45% 55% at 0% 100%, color-mix(in srgb, var(--glow2) 40%, transparent) 0%, transparent 70%),
    linear-gradient(200deg, var(--deep2) 0%, var(--deep) 70%);
}
.pv-demo-sec::before { content: ""; position: absolute; z-index: -1; right: -10%; top: 20%; width: 700px; height: 700px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--hi) 30%, transparent) 0%, transparent 55%); animation: pv-aurora 18s linear infinite; }
@keyframes pv-aurora { to { transform: rotate(360deg); } }
.pv-demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 96px); max-width: 1240px; margin: 0 auto; align-items: center; }
.pv-demo__text { display: flex; flex-direction: column; gap: 20px; }
.pv-demo__list { display: grid; gap: 14px; margin-top: 4px; font-size: 16.5px; color: rgba(255, 255, 255, .9); }
.pv-demo__list li { display: flex; align-items: center; gap: 12px; }
.pv-demo__list li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .12); flex: none; }
.pv-demo__list svg { width: 16px !important; height: 16px !important; color: var(--hi) !important; }
.pv-demo__wa { display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; margin-top: 10px; padding: 10px 18px 10px 10px; min-height: 56px; border-radius: 18px; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: background .2s, transform .2s; }
.pv-demo__wa:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.pv-demo__wa > svg:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #25d366; color: #fff; flex: none; stroke: none !important; }
.pv-demo__wa > svg:first-child path { fill: #fff; }
.pv-demo__wa > svg:last-child { width: 20px; height: 20px; opacity: .7; }
.pv-demo__wa small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.pv-demo__wa b { display: block; font-size: 15.5px; font-weight: 600; }

.pv-formcard { position: relative; isolation: isolate; border-radius: 32px; padding: clamp(24px, 3vw, 40px); background: #fff; color: var(--pv-ink);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .65); }
.pv-formcard::before { /* borde con degradado de marca */
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 34px; background: linear-gradient(140deg, var(--hi), rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 60%, var(--glow)); }
.pv-formcard::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; }
.pv-form { display: grid; gap: 20px; }
.pv-form__head h3 { font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.pv-form__head p { margin-top: 4px; font-size: 15px; color: var(--pv-mute); }
.pv-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Campos con etiqueta flotante */
.pv-field { position: relative; display: block; }
.pv-field input { width: 100%; height: 60px; padding: 22px 16px 6px 48px; border-radius: 16px; border: 1px solid #dfe3ea; background: #f7f8fa; font: inherit; font-size: 16px; color: var(--pv-ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.pv-field__ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8a919c; transition: color .2s; pointer-events: none; }
.pv-field__ic svg { width: 20px; height: 20px; display: block; }
.pv-field__label { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #6b7280; pointer-events: none; transition: top .2s var(--ease-out), font-size .2s var(--ease-out), color .2s; }
.pv-field input:focus, .pv-field input:not(:placeholder-shown) { background: #fff; }
.pv-field input:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 18%, transparent); }
.pv-field input:focus ~ .pv-field__label, .pv-field input:not(:placeholder-shown) ~ .pv-field__label { top: 17px; font-size: 12px; font-weight: 500; color: var(--pv-mute); }
.pv-field:focus-within .pv-field__ic { color: var(--glow); }
.pv-field input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.pv-field input[aria-invalid="false"]:not(:focus) { border-color: #86efac; }
/* Opciones en píldoras */
.pv-chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.pv-chips legend { margin-bottom: 9px; font-size: 14px; font-weight: 500; }
.pv-chips > div { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: #f1f3f6; }
.pv-chips label { position: relative; flex: 1 1 0; min-width: 0; }
.pv-chips input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.pv-chips span { display: grid; place-items: center; min-height: 44px; padding: 0 8px; border-radius: 12px; font-size: 14.5px; font-weight: 500; color: var(--pv-mute); white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.pv-chips input:checked + span { background: #fff; color: var(--pv-ink); box-shadow: 0 2px 10px rgba(17, 19, 22, .1); }
.pv-chips input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 1px; }
.pv-form__pair { display: grid; gap: 20px; }
.pv-form__btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; border-radius: 18px; cursor: pointer;
  font-size: 17px; font-weight: 600; color: #fff; background: linear-gradient(120deg, var(--deep2), color-mix(in srgb, var(--glow) 80%, var(--deep2))); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--glow) 80%, transparent); transition: transform .2s, box-shadow .2s; }
.pv-form__btn svg { width: 20px; height: 20px; transition: transform .25s var(--ease-out); }
.pv-form__btn:hover { transform: translateY(-1px); } .pv-form__btn:hover svg { transform: translateX(4px); }
.pv-form__btn:active { transform: scale(.985); }
.pv-form__btn:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
.pv-form__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-100%); animation: pv-shine 4.5s ease-in-out 2s infinite; }
@keyframes pv-shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.pv-form__btn[disabled] { opacity: .7; cursor: progress; }
.pv--iomaq .pv-form__btn { color: #1c1600; background: linear-gradient(120deg, #ffd100, #ffba00); }
.pv--movilistica .pv-form__btn { background: linear-gradient(120deg, #e8551a, #ff743a); }
.pv--trayectus .pv-form__btn { background: linear-gradient(120deg, #00594f, #007a6c); }
.pv-form__note { margin-top: -8px; font-size: 13px; color: var(--pv-mute); text-align: center; }
.pv-form__msg { font-size: 14.5px; text-align: center; color: var(--bad); }
.pv-form__msg:empty { display: none; }
/* Confirmación */
.pv-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 48px 10px; animation: fade-up .6s var(--ease-out) both; }
.pv-done[hidden], .pv-form[hidden] { display: none; }
.pv-done__ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #fff; background: linear-gradient(140deg, #22c55e, #15803d); box-shadow: 0 20px 40px -16px rgba(22, 163, 74, .6); }
.pv-done__ic svg { width: 36px !important; height: 36px !important; stroke-width: 2.6 !important; color: #fff !important; }
.pv-done h3 { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.pv-done p { max-width: 36ch; font-size: 16px; line-height: 1.5; color: var(--pv-mute); }
.pv-done__again { margin-top: 6px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14.5px; font-weight: 500; color: var(--pv-ink); background: #f1f3f6; cursor: pointer; }

/* Botón flotante, sin logo */
.pv-sticky { padding-left: 20px; }

@media (max-width: 1100px) {
  .pv-demo { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pv-form__grid, .pv-form__pair { grid-template-columns: 1fr; }
  .pv-flow-sec, .pv-demo-sec { margin-inline: 8px; border-radius: 28px; }
  .pv-demo-sec { padding: 64px 16px 16px; }
  .pv-formcard { padding: 22px 18px; border-radius: 26px; }
  .pv-formcard::before { border-radius: 28px; }
  .pv-step__n { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-hero::after, .pv-demo-sec::before, .pv-form__btn::after { animation: none; }
}

/* =========================================================
   FONDO CONTINUO — un solo lienzo para toda la página.
   Las secciones claras no tienen fondo propio: cada una aporta "manchas" de color
   (degradados radiales que terminan en transparente) que se extienden hacia las
   secciones vecinas y quedan debajo de todo el contenido. Así nunca se ve un corte
   entre un degradado y otro. Solo los paneles oscuros tienen fondo propio.
   ========================================================= */
.pv { position: relative; isolation: isolate; background: #f8f9fb; }
.pv-hero, .pv-bento-sec, .pv-steps-sec, .pv-orbit-sec, .pv-faq-sec { position: relative; background: none; }
.pv-hero::before, .pv-bento-sec::before, .pv-steps-sec::before, .pv-orbit-sec::before, .pv-faq-sec::before {
  content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: -320px; bottom: -320px; pointer-events: none;
}
.pv-hero::before { top: 0;
  background:
    radial-gradient(42% 30% at 10% 6%, var(--g1) 0%, transparent 100%),
    radial-gradient(38% 28% at 92% 10%, var(--g2) 0%, transparent 100%),
    radial-gradient(55% 30% at 50% 60%, color-mix(in srgb, var(--hi) 45%, transparent) 0%, transparent 100%),
    radial-gradient(40% 21% at 6% 76%, var(--g3) 0%, transparent 100%),
    radial-gradient(40% 19% at 96% 79%, var(--g4) 0%, transparent 100%);
}
.pv-bento-sec::before {
  background:
    radial-gradient(34% 26% at 100% 30%, var(--g2) 0%, transparent 100%),
    radial-gradient(36% 28% at 0% 70%, var(--g4) 0%, transparent 100%);
}
.pv-steps-sec::before {
  background:
    radial-gradient(34% 24% at 8% 30%, var(--g1) 0%, transparent 100%),
    radial-gradient(40% 23% at 96% 74%, var(--g3) 0%, transparent 100%);
}
.pv-orbit-sec::before {
  background:
    radial-gradient(36% 30% at 24% 50%, color-mix(in srgb, var(--hi) 55%, transparent) 0%, transparent 100%),
    radial-gradient(30% 24% at 18% 34%, var(--g4) 0%, transparent 100%),
    radial-gradient(34% 26% at 90% 64%, var(--g2) 0%, transparent 100%);
}
.pv-faq-sec::before {
  background:
    radial-gradient(40% 26% at 50% 36%, var(--g2) 0%, transparent 100%),
    radial-gradient(30% 22% at 4% 70%, var(--g1) 0%, transparent 100%);
}
/* El brillo que se mueve en el hero tampoco se recorta */
.pv-hero::after { z-index: -1; }

/* Más aire entre bloques y los paneles oscuros */
.pv-flow-sec { margin-top: clamp(24px, 4vw, 56px); }
.pv-demo-sec { margin-top: clamp(24px, 4vw, 56px); }

/* =========================================================
   LISTAS EN PÍLDORAS — reemplazan las listas de ícono + texto
   ========================================================= */
/* Beneficios bajo los botones del hero */
.pv-hero__checks { gap: 10px; }
.pv-hero__checks li {
  gap: 8px; min-height: 40px; padding: 6px 16px 6px 6px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--pv-ink);
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 24px -14px rgba(17, 19, 22, .3);

}
.pv-hero__checks li svg { width: 28px !important; height: 28px !important; padding: 6px; border-radius: 50%; background: #dcfce7; color: #15803d !important; }

/* Hardware y datos */
.pv-orbit__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pv-orbit__list li {
  gap: 10px; min-height: 48px; padding: 6px 18px 6px 6px; border-radius: 99px; font-size: 15px; font-weight: 500; color: var(--pv-ink);
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 10px 28px -16px rgba(17, 19, 22, .32);

  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.pv-orbit__list li:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(17, 19, 22, .38); }
.pv-orbit__list li svg { width: 36px !important; height: 36px !important; padding: 8px; border-radius: 50%; color: var(--deep2) !important; background: linear-gradient(140deg, var(--g1), var(--g2)); }
.pv--iomaq .pv-orbit__list li svg { color: #8a6500 !important; }

/* Lo que verás en la demo (sobre fondo oscuro) */
.pv-demo__list { gap: 10px; }
.pv-demo__list li {
  min-height: 52px; padding: 8px 18px 8px 8px; border-radius: 18px; font-size: 15.5px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);

}
.pv-demo__list li > span { width: 36px; height: 36px; background: color-mix(in srgb, var(--hi) 22%, transparent); }

@media (max-width: 767px) {
  .pv-hero__checks { flex-direction: column; align-items: center; }
  .pv-orbit__list li { flex: 1 1 100%; }
}

/* Listas en píldoras alineadas con el texto (sin sangría de lista) */
.pv-orbit__list, .pv-hero__checks, .pv-demo__list { padding: 0; margin-left: 0; list-style: none; }
/* Aire entre el panel de la demo y el footer */
.pv-demo-sec { margin-bottom: clamp(48px, 7vw, 110px); }
.pv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.pv-demo__more { font-size: 15px; color: rgba(255, 255, 255, .72); }
.pv-demo__more a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--hi) 70%, transparent); }
.pv-demo__more a:hover { color: var(--hi); }

/* Tableta: las tarjetas del bento van en 2 columnas, más angostas; un poco más de alto para su gráfico */
@media (max-width: 1100px) and (min-width: 768px) { .pv-tile__art { min-height: 310px; } }

/* Pasos «Cómo empezamos»: íconos de Lucide en trazo, siempre por encima del brillo de la tarjeta */
.pv-step__ic { position: relative; z-index: 1; background: #fff; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.pv-step__ic svg.lucide { width: 28px; height: 28px; fill: none !important; stroke: currentColor; stroke-width: 2; }
/* En una sola columna (tablet y teléfono) las tarjetas de pasos van centradas: sin la sangría de la lista */
@media (max-width: 1100px) { .pv-steps__list { margin: 0; padding-left: 0; list-style: none; } }