/* viperptt.com · public.css — portada y páginas públicas (prefijo vpw-). Dueño: WEB.
 * Todo el color sale de las variables --vp-* (Admin → Apariencia). Móvil primero. */

/* ── Piezas de sección ────────────────────────────────────────────────────── */
.vpw-sec{padding:clamp(56px,8vw,96px) 0}
.vpw-sec--flush{padding-top:clamp(24px,4vw,40px)}
.vpw-sec--tint{background:linear-gradient(180deg,var(--vp-p50),#fff 120%);border-block:1px solid var(--vp-p100)}
.vpw-sec--dark{color:#fff;background:radial-gradient(900px 420px at 80% 0%,color-mix(in srgb,var(--vp-accent) 30%,transparent),transparent 70%),linear-gradient(165deg,color-mix(in srgb,var(--vp-ink) 94%,var(--vp-primary)),color-mix(in srgb,var(--vp-primary) 62%,#000))}
.vpw-sec--dark h2,.vpw-sec--dark h3{color:#fff}
.vpw-sec--dark .vp-eyebrow{color:color-mix(in srgb,var(--vp-accent) 70%,#fff)}
.vpw-head{display:grid;gap:12px;max-width:780px;margin:0 auto clamp(30px,5vw,52px);text-align:center;justify-items:center}
.vpw-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--vp-muted);max-width:62ch}
.vpw-sec--dark .vpw-lead{color:rgba(255,255,255,.78)}
.vpw-narrow{max-width:820px}
.vpw-h2s{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:clamp(34px,5vw,56px) 0 18px}
.vpw-h3s{font-size:1.1rem;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.vpw-nota{align-items:center}
.vpw-checks{display:grid;gap:12px}
.vpw-checks li{display:flex;gap:12px;align-items:flex-start}
.vpw-checks .vp-ico{color:var(--vp-ok);margin-top:.1em;width:1.4em;height:1.4em}

/* revelado al hacer scroll: solo si hay JS y el elemento está bajo el pliegue */
[data-reveal].is-pre{opacity:0;transform:translateY(16px)}
[data-reveal]{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}

/* ── Hero ─────────────────────────────────────────────────────────────────────
   Texto a la izquierda y, a la derecha, una composición de piezas (hoja de activos de assets/img/hero): dos fotos separadas por una franja en diagonal, el teléfono
   al frente, el aviso del canal arriba y el mapa abajo. `.vpw-hero__vis` es un lienzo: todo va en porcentajes, así la composición escala entera. En celular el
   lienzo baja debajo del texto. El micrófono y la alerta del teléfono son botones invisibles encima de la imagen: tocarlos hace sonar lo mismo que la app (public.js). */
.vpw-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(580px,50vw,760px);
  background:radial-gradient(760px 480px at -4% 6%,color-mix(in srgb,var(--vp-primary) 13%,transparent),transparent 70%),linear-gradient(180deg,#fff 0%,var(--vp-bg) 100%)}
.vpw-hero__in{position:relative;z-index:3;max-width:none;margin-inline:0;padding-block:clamp(36px,5vw,72px);padding-inline:max(var(--vp-gut),5.1vw)}   /* el texto no se centra en el ancho de la página: se queda a la izquierda, junto a la composición */
.vpw-hero__in{pointer-events:none}   /* la caja del texto abarca todo el ancho: sin esto taparía el teléfono */
.vpw-hero__txt{pointer-events:auto;display:grid;gap:20px;justify-items:start;max-width:min(560px,47%)}
.vpw-hero h1{margin:0;font-size:clamp(2.4rem,4.5vw,4.5rem);line-height:1;letter-spacing:-.045em;white-space:nowrap}
.vpw-hero h1 span{display:block;color:var(--vp-ink)}
.vpw-hero h1 em{display:block;font-style:normal;color:var(--vp-primary)}
.vpw-hero__chips{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:6px}
.vpw-hero__chips li{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:.98rem;color:var(--vp-ink)}
.vpw-hero__chips svg{width:1.7em;height:1.7em;flex:none;color:var(--vp-primary)}
.vpw-hero__cta .vp-btn svg{width:1.1em;height:1.1em}

.vpw-hero__vis{position:absolute;top:0;right:0;bottom:0;width:min(58%,900px);z-index:1}
.vpw-hv__ph{position:absolute;top:0;bottom:0;margin:0;overflow:hidden}
.vpw-hv__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.vpw-hv__ph--1{left:0;width:60%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.vpw-hv__ph--2{right:0;width:44%;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
.vpw-hv__sep{position:absolute;top:0;bottom:0;left:54.8%;width:4.7%;z-index:1;background:#fff;clip-path:polygon(72% 0,100% 0,25.5% 100%,0 100%)}
.vpw-hv__arcs{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.vpw-hv__arcs path{fill:none;stroke:color-mix(in srgb,var(--vp-accent) 70%,#fff);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:2 7;stroke-linecap:round;animation:vpwHvFlujo 2.4s linear infinite}
.vpw-hv__canal,.vpw-hv__mapa,.vpw-hv__phone{position:absolute;z-index:4}
.vpw-hv__canal{left:35%;top:7%;width:22%;height:auto;filter:drop-shadow(0 14px 22px rgba(10,26,58,.22))}
.vpw-hv__mapa{right:3%;bottom:10%;width:36%;height:auto;filter:drop-shadow(0 20px 30px rgba(10,26,58,.28))}
.vpw-hv__phone{left:31%;bottom:-1%;width:28%;filter:drop-shadow(0 30px 40px rgba(10,26,58,.38))}
.vpw-hv__phone>img{display:block;width:100%;height:auto}
.vpw-hv__mic,.vpw-hv__ale{position:absolute;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.vpw-hv__mic{left:29.8%;top:76.4%;width:32.6%;aspect-ratio:1}
.vpw-hv__ale{left:67.4%;top:78.5%;width:22.5%;aspect-ratio:1}
.vpw-hv__ring{position:absolute;inset:-2%;border-radius:50%;border:2px solid var(--vp-accent);opacity:0;pointer-events:none;animation:vpwHvOnda 2.8s ease-out infinite}
.vpw-hv__mic.is-live{box-shadow:0 0 0 5px rgba(17,98,244,.28),0 0 26px 8px rgba(34,184,240,.7)}
.vpw-hv__ale.is-live{animation:vpwHvAlerta 1.9s ease-out}
@keyframes vpwHvFlujo{to{stroke-dashoffset:-18}}
@keyframes vpwHvOnda{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.5);opacity:0}}
@keyframes vpwHvAlerta{0%,100%{box-shadow:none}15%,55%{box-shadow:0 0 0 5px rgba(229,57,58,.32),0 0 24px 6px rgba(229,57,58,.65)}}
@keyframes vpwHvFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:no-preference){
  .vpw-hv__phone{animation:vpwHvFlota 7s ease-in-out infinite}
  .vpw-hv__canal{animation:vpwHvFlota 6s ease-in-out -2s infinite}
  .vpw-hv__mapa{animation:vpwHvFlota 8s ease-in-out -4s infinite}
}
@media (prefers-reduced-motion:reduce){.vpw-hv__arcs path,.vpw-hv__ring{animation:none}.vpw-hv__arcs path{stroke-dasharray:none;opacity:.5}}
@media (max-width:980px){
  .vpw-hero{display:block;min-height:0;text-align:center}
  .vpw-hero__in{padding-bottom:8px}
  .vpw-hero__txt{max-width:none;justify-items:center}
  .vpw-hero__cta,.vpw-hero__chips{justify-content:center}
  .vpw-hero__vis{position:relative;inset:auto;width:min(100%,680px);margin:12px auto 0;aspect-ratio:1/.9}
}
@media (max-width:560px){.vpw-hero h1{font-size:min(9.2vw,2.6rem)}}

/* ── Franja de capacidades ────────────────────────────────────────────────── */
.vpw-strip{background:#fff;border-block:1px solid var(--vp-line2)}
.vpw-strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 28px;padding-block:26px}
.vpw-strip__in li{display:flex;align-items:center;gap:14px}
.vpw-strip__in .vp-ico{flex:none;width:2.4em;height:2.4em;color:var(--vp-primary);stroke-width:1.4}
.vpw-strip__in b{display:block;font-size:1rem;line-height:1.2;color:var(--vp-ink)}
.vpw-strip__in small{display:block;margin-top:3px;font-size:.86rem;line-height:1.35;color:var(--vp-muted)}
@media (max-width:980px){.vpw-strip__in{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vpw-strip__in{grid-template-columns:1fr;gap:16px}}

/* ── Dónde estamos: la franja de países, en chico ─────────────────────────── */
.vpw-paises{background:#fff;border-bottom:1px solid var(--vp-line2)}
.vpw-paises__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;padding-block:13px}
.vpw-paises__k{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--vp-muted)}
.vpw-paises__k svg{width:1.3em;height:1.3em;color:var(--vp-primary)}
.vpw-paises ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.vpw-paises li{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--vp-ink)}
/* en escritorio la franja ocupa todo el ancho, alineada con el texto del héroe: la etiqueta a la izquierda y los países repartidos hasta el borde derecho */
@media (min-width:981px){
  .vpw-paises__in{max-width:none;margin-inline:0;padding-inline:max(var(--vp-gut),5.1vw);flex-wrap:nowrap;justify-content:space-between;gap:28px}
  .vpw-paises__k{flex:none}
  .vpw-paises ul{flex:1;flex-wrap:nowrap;justify-content:space-between;gap:12px}
  .vpw-paises li{white-space:nowrap}
}
.vpw-paises .vp-bandera{display:inline-block;width:20px;height:13px;border-radius:2px;box-shadow:0 0 0 1px rgba(10,26,58,.16)}

/* ── Pasos y rejillas ─────────────────────────────────────────────────────── */
.vpw-steps{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);counter-reset:s}
.vpw-step{position:relative;display:grid;gap:12px;justify-items:start;align-content:start;padding:28px 24px;border-radius:var(--vp-r-xl);background:#fff;border:1px solid var(--vp-line);box-shadow:var(--vp-sh-1)}
.vpw-step__n{position:absolute;top:18px;right:20px;font-size:3.2rem;font-weight:800;line-height:1;letter-spacing:-.05em;color:var(--vp-p100)}
.vpw-feat{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.vpw-feat__i{display:grid;gap:12px;align-content:start;padding:26px 22px;border-radius:var(--vp-r-xl);background:#fff;border:1px solid var(--vp-line);box-shadow:var(--vp-sh-1);transition:transform .2s,box-shadow .2s}
.vpw-feat__i:hover{transform:translateY(-4px);box-shadow:var(--vp-sh-2)}
@media (max-width:1000px){.vpw-feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.vpw-steps{grid-template-columns:1fr}}
@media (max-width:520px){.vpw-feat{grid-template-columns:1fr}}

/* ── Sectores ─────────────────────────────────────────────────────────────── */
.vpw-sectores{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,255px),1fr))}
.vpw-sector{position:relative;display:grid;gap:8px;align-content:start;padding:20px 20px 22px;border-radius:var(--vp-r-l);background:#fff;border:1px solid var(--vp-line);color:var(--vp-ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.vpw-sector b{font-size:1.04rem;letter-spacing:-.01em}
.vpw-sector small{font-size:.88rem;line-height:1.45}
.vpw-sector>.vp-ico{position:absolute;right:18px;top:22px;color:var(--vp-soft);transition:transform .2s,color .2s}
.vpw-sector:hover{transform:translateY(-3px);box-shadow:var(--vp-sh-2);border-color:var(--vp-p200);color:var(--vp-ink)}
.vpw-sector:hover>.vp-ico{color:var(--vp-primary);transform:translateX(3px)}
.vpw-sectores--lg{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}

/* ── Tecnología (portada) ─────────────────────────────────────────────────── */
.vpw-tec{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.vpw-tec__i{display:grid;gap:10px;align-content:start;padding:24px 22px;border-radius:var(--vp-r-l);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.vpw-tec__i p{color:rgba(255,255,255,.78);font-size:.94rem}
.vpw-tec__i .vp-icobox{background:rgba(255,255,255,.14);color:#fff}
@media (max-width:1000px){.vpw-tec{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vpw-tec{grid-template-columns:1fr}}

/* ── Ruteo ────────────────────────────────────────────────────────────────── */
.vpw-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.vpw-split__txt{display:grid;gap:18px;justify-items:start}
@media (max-width:900px){.vpw-split{grid-template-columns:1fr}}
.vpw-mapcard{position:relative;border-radius:var(--vp-r-xl);overflow:hidden;border:1px solid var(--vp-p100);box-shadow:var(--vp-sh-3);background:var(--vp-p50);aspect-ratio:560/440}
.vpw-map{width:100%;height:100%;display:block}
.vpw-map .m-bg{fill:var(--vp-p50)}
.vpw-map .m-blk rect{fill:#fff;stroke:var(--vp-line);stroke-width:1}
.vpw-map .m-water{fill:color-mix(in srgb,var(--vp-accent) 28%,#fff)}
.vpw-map .m-geo{fill:color-mix(in srgb,var(--vp-primary) 12%,transparent);stroke:var(--vp-primary);stroke-width:2.5;stroke-dasharray:7 6}
.vpw-map .m-route{fill:none;stroke:var(--vp-primary);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 0}
.vpw-map .m-stop circle{fill:var(--vp-primary);stroke:#fff;stroke-width:3}
.vpw-map .m-n text{fill:#fff;font:700 11px Inter,sans-serif}
.vpw-map .m-car circle:first-child{fill:var(--vp-ok);stroke:#fff;stroke-width:3}
.vpw-map .m-pulse{fill:none;stroke:var(--vp-ok);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:vpw-pulse 2s ease-out infinite}
@keyframes vpw-pulse{from{transform:scale(.6);opacity:.9}to{transform:scale(1.7);opacity:0}}
.vpw-map .m-warn path{fill:var(--vp-warn)}
.vpw-map .m-warn rect{fill:#fff}
.vpw-mc{position:absolute;display:flex;gap:10px;align-items:center;padding:9px 13px 9px 9px;border-radius:15px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:var(--vp-sh-2);border:1px solid var(--vp-line2);max-width:62%}
.vpw-mc .vp-icobox{width:34px;height:34px;border-radius:10px;font-size:1rem}
.vpw-mc div{display:grid;line-height:1.2;min-width:0}
.vpw-mc b{font-size:.78rem}
.vpw-mc small{font-size:.7rem;color:var(--vp-muted)}
.vpw-mc--1{left:4%;top:7%}
.vpw-mc--2{right:3%;top:44%}
.vpw-mc--3{left:6%;bottom:7%}
.vpw-mc__warn{background:var(--vp-warn-bg);color:var(--vp-warn)}
@media (max-width:520px){.vpw-mc{max-width:78%;padding:7px 10px 7px 7px}.vpw-mc b{font-size:.7rem}.vpw-mc small{font-size:.64rem}.vpw-mc .vp-icobox{width:28px;height:28px}.vpw-mc--2{top:40%}}

/* ── Planes ───────────────────────────────────────────────────────────────── */
[data-periodo=mensual] .vpw-per--anual{display:none!important}
[data-periodo=anual] .vpw-per--mensual{display:none!important}
.vpw-planes__bar{display:flex;justify-content:center;margin-bottom:28px}
.vpw-planes__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));align-items:stretch}
.vpw-plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 22px 22px;border-radius:var(--vp-r-xl);background:#fff;border:1px solid var(--vp-line);box-shadow:var(--vp-sh-1)}
.vpw-plan h3{font-size:1.25rem}
.vpw-plan.is-destacado{border:2px solid var(--vp-primary);box-shadow:var(--vp-sh-3);background:linear-gradient(180deg,var(--vp-p50),#fff 38%)}
.vpw-plan__tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;gap:6px;align-items:center;padding:5px 14px;border-radius:99px;background:var(--vp-primary);color:#fff;font-size:.74rem;font-weight:700;white-space:nowrap}
.vpw-plan__tag .vp-ico{width:1em;height:1em}
.vpw-plan__desc{min-height:2.9em}
.vpw-plan__precio{display:grid;gap:6px;align-content:start;min-height:84px}
.vpw-plan__precio .vpw-per,.vpw-plan__precio>div{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.vpw-plan__num{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.vpw-plan__precio small{font-size:.82rem;color:var(--vp-muted);font-weight:600}
.vpw-plan__lim,.vpw-plan__fn{display:grid;gap:9px;font-size:.92rem}
.vpw-plan__lim{padding:14px 0;border-block:1px solid var(--vp-line2);font-weight:600}
.vpw-plan__lim li,.vpw-plan__fn li{display:flex;gap:10px;align-items:flex-start}
.vpw-plan__lim .vp-ico{color:var(--vp-primary);margin-top:.1em}
.vpw-plan__fn .vp-ico{color:var(--vp-ok);margin-top:.1em}
.vpw-plan__fn{flex:1;color:var(--vp-muted);align-content:start}
.vpw-plan__cta{display:grid;gap:8px;margin-top:6px}
.vpw-planes__nota{margin-top:22px}
.vp-tablewrap{position:relative}   /* los .vp-sr (absolutos) dentro de la tabla no deben ensanchar la página */
.vpw-cmp{margin-top:0}
.vpw-cmp__t{min-width:640px}
.vpw-cmp__t th[scope=row]{position:sticky;left:0;background:#fff;text-align:left;font-size:.9rem;text-transform:none;letter-spacing:0;color:var(--vp-ink);white-space:normal;min-width:170px;z-index:1}
.vpw-cmp__t thead th{text-align:center}
.vpw-cmp__t td{text-align:center}
.vpw-cmp__sep th{background:var(--vp-p50)!important;text-align:left!important;font-size:.76rem!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--vp-muted)!important}
.vpw-yes{color:var(--vp-ok);display:inline-flex}
.vpw-yes .vp-ico{width:1.4em;height:1.4em}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.vpw-faq{display:grid;gap:10px}
.vpw-faq__i{border:1px solid var(--vp-line);border-radius:var(--vp-r);background:#fff;transition:border-color .15s,box-shadow .15s}
.vpw-faq__i[open]{border-color:var(--vp-p200);box-shadow:var(--vp-sh-1)}
.vpw-faq__i summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;font-weight:650;cursor:pointer;list-style:none}
.vpw-faq__i summary::-webkit-details-marker{display:none}
.vpw-faq__i summary .vp-ico{color:var(--vp-primary);transition:transform .2s;flex:none}
.vpw-faq__i[open] summary .vp-ico{transform:rotate(180deg)}
.vpw-faq__a{padding:0 18px 18px;color:var(--vp-muted);line-height:1.65}

/* ── Banda final ──────────────────────────────────────────────────────────── */
.vpw-cta{color:#fff;background:radial-gradient(700px 300px at 90% 0%,color-mix(in srgb,var(--vp-accent) 40%,transparent),transparent 70%),linear-gradient(120deg,var(--vp-primary),color-mix(in srgb,var(--vp-primary) 62%,#000))}
.vpw-cta__in{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-block:clamp(40px,6vw,64px)}
.vpw-cta h2{color:#fff;margin-bottom:8px}
.vpw-cta p{color:rgba(255,255,255,.85);max-width:52ch}
.vpw-btn-line{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.vpw-btn-line:hover{--bg:rgba(255,255,255,.14);--fg:#fff;box-shadow:none}
@media (max-width:640px){.vpw-cta__in .vp-row,.vpw-cta__in .vp-btn{width:100%}}

/* ── Páginas interiores ───────────────────────────────────────────────────── */
.vpw-page{background:radial-gradient(800px 320px at 85% -30%,color-mix(in srgb,var(--vp-accent) 22%,transparent),transparent 70%),linear-gradient(180deg,#fff,var(--vp-bg));border-bottom:1px solid var(--vp-line2)}
.vpw-page__in{display:grid;gap:14px;justify-items:start;padding-block:clamp(36px,6vw,64px) clamp(28px,4vw,44px)}
.vpw-page h1{font-size:clamp(1.9rem,4.4vw,3rem)}
.vpw-cta-row{margin-bottom:8px}
.vpw-casos{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.vpw-caso{position:relative;display:grid;gap:8px;align-content:start;padding:22px 22px 22px 70px;border-radius:var(--vp-r-l);background:#fff;border:1px solid var(--vp-line);box-shadow:var(--vp-sh-1)}
.vpw-caso__n{position:absolute;left:20px;top:20px;width:36px;height:36px;border-radius:12px;background:var(--vp-p100);color:var(--vp-primary);display:grid;place-items:center;font-weight:800}
.vpw-two{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:20px}
.vpw-two .vp-card{display:grid;gap:12px;align-content:start;justify-items:start}
.vpw-plan-rec{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:1.2rem}
.vpw-otras{display:flex;flex-wrap:wrap;gap:10px}
.vpw-chip{display:inline-flex;gap:8px;align-items:center;padding:9px 16px;border-radius:99px;background:#fff;border:1px solid var(--vp-line);font-weight:600;font-size:.9rem;color:var(--vp-ink)}
.vpw-chip .vp-ico{color:var(--vp-primary)}
.vpw-chip:hover{border-color:var(--vp-p200);background:var(--vp-p50);color:var(--vp-p700)}
@media (max-width:760px){.vpw-casos,.vpw-two{grid-template-columns:1fr}}

.vpw-tp{display:grid;gap:clamp(28px,4vw,48px);margin-top:28px}
.vpw-tp__i{display:grid;gap:clamp(18px,3vw,40px);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}
.vpw-tp__i.is-alt .vpw-tp__txt{order:2}
.vpw-tp__txt{display:grid;gap:12px;justify-items:start}
.vpw-tp__list{display:grid;gap:14px;padding:22px}
.vpw-tp__list li{display:flex;gap:12px;align-items:flex-start;font-weight:550}
.vpw-tp__list .vp-ico{color:var(--vp-ok);width:1.35em;height:1.35em;margin-top:.05em}
.vpw-spec th{background:none;text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--vp-ink);width:38%}
.vpw-callout{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px;padding:26px}
@media (max-width:820px){.vpw-tp__i{grid-template-columns:1fr}.vpw-tp__i.is-alt .vpw-tp__txt{order:0}}

.vpw-dl{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);align-items:start}
.vpw-dl__c{display:grid;gap:14px;align-content:start}
.vpw-olist{display:grid;gap:10px}
.vpw-olist li{display:flex;gap:12px;align-items:flex-start}
.vpw-olist p{flex:1;min-width:0}
.vpw-olist li>span{width:28px;height:28px;border-radius:50%;background:var(--vp-p100);color:var(--vp-primary);display:grid;place-items:center;font-weight:800;font-size:.82rem;flex:none}
@media (max-width:820px){.vpw-dl{grid-template-columns:1fr}}

.vpw-search{margin-bottom:16px}
.vpw-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.vpw-ayuda__cat{margin-top:30px}
.vpw-ayuda__cat[hidden]{display:none}
.vpw-faq__i[hidden]{display:none}

.vpw-contact{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.vpw-contact__side{display:flex;flex-direction:column;gap:18px}
.vpw-contact__otros{display:grid;gap:12px}
.vpw-contact__i{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--vp-r-l);background:#fff;border:1px solid var(--vp-line);color:var(--vp-ink)}
.vpw-contact__i:hover{border-color:var(--vp-p200);color:var(--vp-ink)}
.vpw-contact__i span:last-child{display:grid;gap:2px}
.vpw-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:820px){.vpw-contact{grid-template-columns:1fr}}

.vpw-legal h2{font-size:1.15rem;margin:30px 0 8px}
.vpw-legal p{color:var(--vp-muted);line-height:1.75}
.vpw-legal .vp-alert{margin-bottom:8px}

/* Verificar un recibo (2026-10-26) */
.vpw-ver{display:grid;gap:18px;max-width:680px}
.vpw-ver__form{display:grid;gap:10px}
.vpw-ver__form label{font-weight:700}
.vpw-ver__fila{display:flex;gap:10px;flex-wrap:wrap}
.vpw-ver__fila .vp-input{flex:1 1 220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase}
.vpw-ver__sello{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.vpw-ver__sello h2{margin:0}
.vpw-ver__sello p{margin:2px 0 0}
.vpw-ver__datos{margin:14px 0 8px;display:grid;gap:0}
.vpw-ver__datos>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--vp-line)}
.vpw-ver__datos dt{color:var(--vp-muted);font-weight:600}
.vpw-ver__datos dd{margin:0;text-align:right}

/* ── Oficinas (2026-10-27): una tarjeta con el título a un lado y las sedes al otro; la de desarrollo, a lo ancho ─────── */
.vpw-ofi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:var(--vp-r-xl);background:#fff;border:1px solid var(--vp-line);box-shadow:var(--vp-sh-2)}
.vpw-ofi__txt{display:grid;gap:12px;justify-items:start;align-content:center}
.vpw-ofi__txt h2{margin:0}
.vpw-ofi__txt .vpw-lead{margin:0}
.vpw-ofi__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vpw-ofi__i{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--vp-r-l);background:var(--vp-p50);border:1px solid var(--vp-p100);min-width:0}
.vpw-ofi__i b{display:block;font-size:1rem;color:var(--vp-ink);line-height:1.2}
.vpw-ofi__i small{display:block;font-size:.8rem;margin-top:2px}
.vpw-ofi__i--dev{grid-column:1/-1;background:linear-gradient(100deg,var(--vp-p100),var(--vp-p50));border-color:var(--vp-p200)}
@media (max-width:860px){.vpw-ofi{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.vpw-ofi__lista{grid-template-columns:minmax(0,1fr)}}

/* ── Banderas de las oficinas (2026-10-27) ───────────────────────────────── */
.vp-bandera{display:block;width:100%;height:100%}
.vpw-ofi__flag{flex:none;width:54px;height:36px;border-radius:7px;overflow:hidden;box-shadow:0 0 0 1px rgba(10,26,58,.12),0 4px 10px -4px rgba(10,26,58,.35)}
.vp-bandera--pie{display:inline-block;width:22px;height:15px;border-radius:3px;vertical-align:-2px;margin-right:8px;box-shadow:0 0 0 1px rgba(10,26,58,.14)}

/* ── Hoteles: la tarjeta de la campaña ───────────────────────────────────────
   Una sola tarjeta compacta, azul noche (el color de la marca): texto a la izquierda, una foto a la derecha. Es lo único de la portada con fondo oscuro a
   propósito, para que llame la atención sin ocupar una sección entera. */
.vpw-hotelsec{padding:clamp(28px,4vw,48px) 0}
.vpw-hotel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);overflow:hidden;border-radius:var(--vp-r-xl);color:#fff;box-shadow:var(--vp-sh-3);
  background:radial-gradient(480px 260px at 0% 0%,rgba(34,184,240,.28),transparent 70%),linear-gradient(135deg,#071634 0%,#0c2a6e 60%,#1162f4 170%)}
.vpw-hotel__txt{display:grid;gap:14px;justify-items:start;align-content:center;padding:clamp(24px,3.6vw,44px)}
.vpw-hotel__txt h2{margin:0;color:#fff;font-size:clamp(1.5rem,2.9vw,2.15rem);line-height:1.12;letter-spacing:-.02em}
.vpw-hotel__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.vpw-hotel__lead{margin:0;max-width:44ch;color:rgba(255,255,255,.84);line-height:1.5}
.vpw-hotel__pts{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.vpw-hotel__pts li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:rgba(255,255,255,.95)}
.vpw-hotel__pts svg{color:var(--vp-accent);width:1.15em;height:1.15em;flex:none}
.vpw-hotel__int{margin:0;max-width:52ch;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.66)}
.vpw-hotel__int b{color:rgba(255,255,255,.92)}
.vpw-hotel__int span{white-space:nowrap}
.vpw-hotel .vp-btn{margin-top:4px}
.vpw-hotel__mos{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;padding:16px 16px 16px 0}
.vpw-hotel__ph{position:relative;margin:0;overflow:hidden;border-radius:20px;background:#0c2a6e;box-shadow:0 14px 28px -16px rgba(0,0,0,.7)}
.vpw-hotel__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.vpw-hotel__ph--1 img{object-position:60% 30%}
.vpw-hotel__ph--2 img{object-position:58% 30%}
.vpw-hotel__ph--3 img{object-position:50% 25%}
.vpw-hotel__ph--4 img{object-position:62% 30%}
/* el velo azul unifica las cuatro fotos con la tarjeta; el brillo diagonal les da vida */
.vpw-hotel__ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(17,98,244,.22) 0%,rgba(7,22,52,0) 38%,rgba(7,22,52,.82) 100%)}
.vpw-hotel__ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 38%)}
.vpw-hotel__ph figcaption{position:absolute;z-index:2;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:99px;font-size:.74rem;font-weight:700;line-height:1;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vpw-hotel__ph figcaption svg{width:1.15em;height:1.15em;color:var(--vp-accent);flex:none}
.vpw-hotel__ph:hover img{transform:scale(1.08)}
@media (prefers-reduced-motion:no-preference){
  .vpw-hotel__ph{animation:vpwHotelFlota 7s ease-in-out infinite}
  .vpw-hotel__ph--2{animation-delay:-1.8s}.vpw-hotel__ph--3{animation-delay:-3.6s}.vpw-hotel__ph--4{animation-delay:-5.4s}
}
@keyframes vpwHotelFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (max-width:760px){
  .vpw-hotel{grid-template-columns:minmax(0,1fr)}
  .vpw-hotel__mos{order:-1;height:260px;gap:8px;padding:12px 12px 0}
  .vpw-hotel__ph{border-radius:16px}
  .vpw-hotel__ph figcaption{right:auto;left:7px;top:7px;bottom:auto;font-size:.68rem;padding:4px 9px 4px 7px}
  .vpw-hotel__txt h2{font-size:1.45rem}
  .vpw-hotel .vp-btn{width:100%;justify-content:center}
}


/* ── Empresas e industria: la tarjeta clara que sigue a la de hoteles ─────────
   Una tarjeta blanca con un panel azul de la marca a la izquierda (el mensaje y los dos botones) y, a la derecha, lo que se le ofrece a la industria en seis
   piezas; abajo, una franja con los sectores (cada uno lleva a su página). Sin fotos ni cifras: todo lo que dice ya está dicho en otras partes del sitio. */
.vpw-empsec{padding:0 0 clamp(28px,4vw,48px)}
.vpw-emp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);overflow:hidden;border-radius:var(--vp-r-xl);background:#fff;border:1px solid var(--vp-line);box-shadow:var(--vp-sh-2)}
.vpw-emp__pitch{position:relative;overflow:hidden;display:grid;gap:14px;justify-items:start;align-content:center;padding:clamp(24px,3.4vw,40px);color:#fff;
  background:radial-gradient(360px 240px at 100% 0%,rgba(34,184,240,.5),transparent 70%),linear-gradient(150deg,#1162f4 0%,#0b3fb8 100%)}
.vpw-emp__pitch>*{position:relative}
.vpw-emp__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.vpw-emp__pitch h2{margin:0;color:#fff;font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.12;letter-spacing:-.02em}
.vpw-emp__lead{margin:0;max-width:40ch;color:rgba(255,255,255,.92);line-height:1.5}
.vpw-emp__pts{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.vpw-emp__pts li{display:flex;align-items:flex-start;gap:10px;font-weight:600;font-size:.93rem;line-height:1.35;color:#fff}
.vpw-emp__pts svg{width:1.2em;height:1.2em;flex:none;margin-top:.1em;color:#a8ecff}
.vpw-emp__cta{margin-top:6px}
.vpw-emp__ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.vpw-emp__ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.vpw-emp__of{display:grid;gap:16px;align-content:center;padding:clamp(22px,3vw,34px)}
.vpw-emp__of h3{margin:0;font-size:1.08rem;line-height:1.3;color:var(--vp-ink)}
.vpw-emp__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vpw-emp__grid li{display:flex;gap:12px;align-items:flex-start;padding:13px;border-radius:16px;background:var(--vp-p50);border:1px solid var(--vp-p100)}
.vpw-emp__grid .vp-icobox{flex:none}
.vpw-emp__grid b{display:block;font-size:.95rem;line-height:1.25;color:var(--vp-ink)}
.vpw-emp__grid small{display:block;margin-top:3px;font-size:.8rem;line-height:1.4;color:var(--vp-muted)}
.vpw-emp__ind{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px clamp(22px,3vw,34px);border-top:1px solid var(--vp-line);background:var(--vp-p50)}
.vpw-emp__ind b{margin-right:4px;font-size:.85rem;color:var(--vp-ink)}
.vpw-emp__ind a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--vp-p100);font-weight:600;font-size:.82rem;color:var(--vp-ink)}
.vpw-emp__ind a:hover{border-color:var(--vp-p200);color:var(--vp-primary)}
.vpw-emp__ind a svg{width:1.1em;height:1.1em;color:var(--vp-primary)}
.vpw-emp__ind .vpw-emp__todas{margin-left:auto;border-color:transparent;background:transparent;color:var(--vp-primary)}
@media (max-width:900px){
  .vpw-emp{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .vpw-emp__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vpw-emp__grid li{flex-direction:column;gap:8px;padding:12px}
  .vpw-emp__grid small{display:none}
  .vpw-emp__cta .vp-btn{flex:1 1 100%;justify-content:center}
  .vpw-emp__ind{gap:6px}
  .vpw-emp__ind b{flex:1 0 100%;margin:0 0 2px}
  .vpw-emp__ind a{padding:5px 10px;font-size:.78rem}
  .vpw-emp__ind .vpw-emp__todas{margin-left:0}
}

/* Contacto: mapa de cobertura. Fondo azul noche como la tarjeta de hoteles; los puntos del mapa son un solo <path> con extremos redondos (ver app/bin/mapa_mundo.mjs). */
.vpw-map{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:18px;padding:clamp(20px,2.6vw,30px);border-radius:var(--vp-r-xl);overflow:hidden;color:#fff;box-shadow:var(--vp-sh-3);
  background:radial-gradient(520px 280px at 88% 0%,rgba(34,184,240,.30),transparent 70%),radial-gradient(420px 260px at 0% 100%,rgba(17,98,244,.35),transparent 70%),linear-gradient(150deg,#071634 0%,#0b2766 58%,#1162f4 175%)}
.vpw-map__head{display:grid;gap:8px;justify-items:start}
.vpw-map__head .vp-eyebrow{color:color-mix(in srgb,var(--vp-accent) 70%,#fff)}
.vpw-map__head h2{margin:0;color:#fff;font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.2}
.vpw-map__head p{margin:0;color:rgba(255,255,255,.72);font-size:.94rem;line-height:1.5}
.vpw-map__stage{position:relative;aspect-ratio:1080/520;width:100%}
.vpw-map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vpw-map__land{fill:none;stroke:rgba(255,255,255,.3);stroke-width:3.5;stroke-linecap:round}
.vpw-map__cov{fill:none;stroke:#5fd0ff;stroke-width:4.2;stroke-linecap:round;animation:vpwMapBrilla 4.2s ease-in-out infinite}
.vpw-map__arc{fill:none;stroke:rgba(143,227,255,.38);stroke-width:1.8}
.vpw-map__flow{fill:none;stroke:#d7f4ff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 14;animation:vpwMapFlujo 1.6s linear infinite}
.vpw-map__pulses circle{fill:#fff;filter:drop-shadow(0 0 5px #22b8f0)}
.vpw-map__pin{position:absolute;width:0;height:0;z-index:2}
.vpw-map__dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(34,184,240,.5),0 0 14px 3px rgba(34,184,240,.85)}
.vpw-map__ring{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:2px solid #5fd0ff;opacity:0;animation:vpwMapOnda 2.8s ease-out var(--d,0s) infinite}
.vpw-map__tag{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:99px;white-space:nowrap;font-size:.74rem;font-weight:700;line-height:1;color:#fff;background:rgba(7,22,52,.82);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.vpw-map__tag .vp-bandera{width:20px;height:13px;border-radius:3px}
.vpw-map__tag--t{left:0;bottom:13px;transform:translateX(-50%)}
.vpw-map__tag--b{left:0;top:13px;transform:translateX(-50%)}
.vpw-map__tag--l{right:13px;top:0;transform:translateY(-50%)}
.vpw-map__tag--r{left:13px;top:0;transform:translateY(-50%)}
.vpw-map__lista{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vpw-map__lista li{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.vpw-map__lista li>span:last-child{display:grid;gap:2px;min-width:0}
.vpw-map__lista b{font-size:.92rem;color:#fff}
.vpw-map__lista small{font-size:.74rem;line-height:1.3;color:rgba(255,255,255,.64)}
.vpw-map__flag{flex:none;width:36px;height:24px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
@keyframes vpwMapFlujo{to{stroke-dashoffset:-16}}
@keyframes vpwMapOnda{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.3);opacity:0}}
@keyframes vpwMapBrilla{0%,100%{opacity:.78}50%{opacity:1}}
@media (max-width:560px){
  .vpw-map__tag{display:none}
  .vpw-map__lista{grid-template-columns:1fr 1fr;gap:8px}
  .vpw-map__lista li{padding:9px;gap:8px}
  .vpw-map__lista b{font-size:.84rem}
  .vpw-map__flag{width:26px;height:17px}
}
@media (max-width:420px){.vpw-map__lista li{padding:9px 8px}.vpw-map__lista b{font-size:.8rem;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.vpw-map__pulses{display:none}.vpw-map__flow{animation:none;stroke-dasharray:none;stroke:rgba(215,244,255,.5)}.vpw-map__ring,.vpw-map__cov{animation:none}}