@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins/poppins-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins/poppins-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins/poppins-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins/poppins-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins/poppins-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/poppins/poppins-900.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/*
 * Web pública de la empresa. Estilo copiado de la web de WISPA (demo.wispa.pe): barra superior oscura, hero con la tarjeta del plan más elegido,
 * formulario rápido, planes con cinta, abonados y preguntas. Los colores salen de las variables --wx-primary / --wx-secondary que escribe el
 * layout desde Ajustes › Web (un color de marca + uno oscuro). Solo se carga en la web pública (los paneles usan marca.css).
 */
:root{--wx-font-display:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,.display-5,.display-6,.navbar-brand{font-family:var(--wx-font-display)}
.wx-navbar{background:#fff}
.wx-navbar .navbar-brand{color:#212529}
.wx-navbar .nav-link{padding:.55rem .9rem;border-radius:2rem;transition:all .15s;font-weight:500;color:#212529}
.wx-navbar .nav-link.active,.wx-navbar .nav-link:hover{background:color-mix(in srgb,var(--wx-primary) 12%,transparent);color:var(--wx-primary)}
.wx-cta-pill{display:inline-flex;align-items:center;gap:.6rem;border-radius:2rem;padding:.4rem 1.1rem .4rem .6rem;color:#fff!important;font-weight:700;line-height:1.05;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.15);transition:transform .15s}
.wx-cta-pill:hover{transform:translateY(-2px);color:#fff}
.wx-cta-pill i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.wx-cta-pill small{display:block;font-size:.66rem;font-weight:500;opacity:.9;letter-spacing:.2px}
.wx-cta-wa{background:#25d366}
.wx-cta-tel{background:var(--wx-secondary)}
.wx-topbar{background:var(--wx-secondary);color:rgba(255,255,255,.85);font-size:.85rem}
.wx-topbar a{color:rgba(255,255,255,.85);text-decoration:none}
.wx-topbar a:hover{color:#fff}
.wx-topbar .wx-soc{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--wx-primary);color:#fff;font-size:.85rem}
.wx-footer{background:var(--wx-secondary);color:rgba(255,255,255,.78)}
.wx-footer a{color:rgba(255,255,255,.78);text-decoration:none}
.wx-footer a:hover{color:#fff}
.wx-footer .wx-social a{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);margin-right:.4rem}
.wx-footer .wx-social a:hover{background:var(--wx-primary);color:#fff}
.wx-logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.75rem;background:var(--wx-primary);color:#fff;font-size:1.4rem}
.wx-btn{background:var(--wx-primary);border-color:var(--wx-primary);color:#fff}
.wx-btn:hover,.wx-btn:focus{background:color-mix(in srgb,var(--wx-primary) 88%,black);border-color:color-mix(in srgb,var(--wx-primary) 88%,black);color:#fff}
.wx-btn-wa{background:#25d366;border-color:#25d366;color:#fff}
.wx-btn-wa:hover{background:#1ebe5b;border-color:#1ebe5b;color:#fff}
.wx-icon{color:var(--wx-primary)}
/* Hero */
.wx-hero-slide{min-height:640px;position:relative;overflow:hidden;background:linear-gradient(115deg,color-mix(in srgb,var(--wx-secondary) 70%,black) 0%,var(--wx-secondary) 45%,color-mix(in srgb,var(--wx-primary) 55%,var(--wx-secondary)) 100%)}
.wx-hero-slide.has-img{background-size:cover;background-position:center}
.wx-hero-slide.has-img::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--wx-secondary) 94%,transparent) 0%,color-mix(in srgb,var(--wx-secondary) 72%,transparent) 42%,color-mix(in srgb,var(--wx-secondary) 18%,transparent) 100%)}
.wx-hero-slide>.container{position:relative;z-index:2}
.wx-hero-glow{position:absolute;right:-140px;top:-160px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--wx-primary) 55%,transparent) 0%,transparent 65%);z-index:0}
.wx-hero-glow2{position:absolute;left:-120px;bottom:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--wx-primary) 30%,transparent) 0%,transparent 65%);z-index:0}
.wx-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 70%);z-index:0}
.wx-hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;z-index:1}
.wx-eyebrow{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:600;font-size:.9rem;padding:.45rem 1rem;border-radius:2rem;margin-bottom:1.25rem}
.wx-eyebrow i{color:var(--wx-primary);filter:brightness(1.6)}
.wx-hero-title{font-family:var(--wx-font-display);font-weight:800;font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:1rem;text-wrap:balance;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.wx-hl{color:var(--wx-primary);filter:brightness(1.7)}
.wx-hero-sub{font-size:clamp(1.1rem,2vw,1.45rem);font-weight:500;color:rgba(255,255,255,.9);max-width:34ch;margin:0}
.wx-hero-checks{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.75rem;font-weight:500}
.wx-hero-checks span{display:inline-flex;align-items:center;gap:.45rem}
.wx-hero-checks i{color:var(--wx-primary);filter:brightness(1.7)}
/* Tarjeta de oferta */
.wx-offer{position:relative;background:#fff;color:var(--wx-secondary);border-radius:1.6rem;padding:2.2rem 2rem 1.75rem;width:100%;max-width:360px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.4);transform:rotate(-2deg);animation:wxfloat 6s ease-in-out infinite}
.wx-offer-tag{position:absolute;top:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--wx-primary);color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;padding:.45rem 1.1rem;border-radius:2rem;box-shadow:0 8px 20px color-mix(in srgb,var(--wx-primary) 45%,transparent)}
.wx-offer-speed{display:flex;align-items:baseline;justify-content:center;gap:.4rem;line-height:.9;margin-top:.5rem}
.wx-offer-speed .n{font-family:var(--wx-font-display);font-weight:900;font-size:5.4rem;letter-spacing:-.04em;color:var(--wx-secondary)}
.wx-offer-speed .u{font-family:var(--wx-font-display);font-weight:800;font-size:1.6rem;color:var(--wx-primary)}
.wx-offer-kind{font-size:1.05rem;margin-top:.6rem}
.wx-offer-sym{font-size:.8rem;color:#6b7280;margin-top:.25rem}
.wx-offer-price{margin:1rem -2.6rem 0;background:var(--wx-primary);color:#fff;font-family:var(--wx-font-display);font-weight:900;font-size:2.6rem;line-height:1;padding:.7rem 1rem;transform:rotate(-2deg);box-shadow:0 10px 25px color-mix(in srgb,var(--wx-primary) 40%,transparent)}
.wx-offer-price small{font-size:1rem;font-weight:700;margin:0 .25rem;opacity:.9}
.wx-offer-free{margin-top:1.1rem;font-weight:600}
.wx-offer-free strong{color:var(--wx-primary)}
@keyframes wxfloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-10px)}}
/* Formulario rápido pegado al hero */
.wx-quick{border-radius:1.25rem;margin-top:-40px;position:relative;z-index:3}
/* Títulos de sección */
.wx-sec-eyebrow{display:inline-block;color:var(--wx-primary);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.8rem;margin-bottom:.5rem}
.wx-sec-title{font-family:var(--wx-font-display);font-weight:800;letter-spacing:-.02em;color:var(--wx-secondary)}
.wx-page-head{background:linear-gradient(115deg,color-mix(in srgb,var(--wx-secondary) 70%,black),var(--wx-secondary) 50%,color-mix(in srgb,var(--wx-primary) 55%,var(--wx-secondary)));color:#fff}
.wx-page-head h1{font-weight:800;letter-spacing:-.02em}
/* Planes */
.wx-plan-card{transition:transform .18s ease,box-shadow .18s ease;border-radius:1.5rem;overflow:visible;position:relative;background:#fff}
.wx-plan-card:hover{transform:translateY(-8px);box-shadow:0 1.5rem 3rem rgba(0,0,0,.14)!important}
.wx-plan-head{background:#fff;color:var(--wx-secondary);padding:2.4rem 1.5rem 1.2rem;text-align:center;position:relative;border-radius:1.5rem 1.5rem 0 0}
.wx-plan-head.pop{background:linear-gradient(160deg,var(--wx-secondary),color-mix(in srgb,var(--wx-secondary) 55%,var(--wx-primary)));color:#fff}
.wx-plan-name{position:absolute;top:-18px;left:50%;transform:translateX(-50%) rotate(-2deg);white-space:nowrap;background:var(--wx-primary);color:#fff;font-family:var(--wx-font-display);font-weight:800;font-size:1.05rem;margin:0;padding:.5rem 1.4rem;border-radius:.6rem;box-shadow:0 8px 20px color-mix(in srgb,var(--wx-primary) 40%,transparent)}
.wx-plan-head .num{font-family:var(--wx-font-display);font-size:4.4rem;font-weight:900;line-height:.95;letter-spacing:-.04em}
.wx-plan-head .num small{font-size:1.4rem;font-weight:800;color:var(--wx-primary);letter-spacing:0}
.wx-plan-head.pop .num small,.wx-plan-head.pop .kind{color:#fff}
.wx-plan-head .type{font-size:.8rem;letter-spacing:1.5px;opacity:.75;text-transform:uppercase;font-weight:600}
.wx-plan-head .kind{font-weight:700;color:var(--wx-primary);margin-top:.4rem}
.wx-plan-body{padding:1.5rem;background:#fff;border-radius:0 0 1.5rem 1.5rem}
.wx-plan-body ul{margin:0;padding:0;list-style:none}
.wx-plan-body ul li{padding:.55rem 0;border-bottom:1px dashed var(--bs-border-color);display:flex;align-items:center;gap:.6rem}
.wx-plan-body ul li:last-child{border-bottom:0}
.wx-badge-pop{position:absolute;top:14px;right:14px;background:#facc15;color:#111;font-weight:800;font-size:.7rem;padding:.35rem .7rem;border-radius:2rem;letter-spacing:.5px}
.wx-price-block{background:var(--wx-primary);color:#fff;font-family:var(--wx-font-display);font-weight:900;text-align:center;padding:.8rem;border-radius:.8rem;margin:1rem -.5rem 0;transform:rotate(-1.5deg);box-shadow:0 10px 25px color-mix(in srgb,var(--wx-primary) 35%,transparent);font-size:1.7rem;line-height:1}
.wx-price-block small{font-size:.8rem;font-weight:600}
/* Resto */
.wx-uses .item{background:#fff;border:1px solid var(--bs-border-color);border-radius:.9rem;padding:1.1rem;display:flex;gap:.9rem;align-items:flex-start;height:100%}
.wx-uses .item i{color:var(--wx-primary);font-size:1.6rem;flex-shrink:0;margin-top:.15rem}
.wx-zone-chip{background:#fff;border:1px solid var(--bs-border-color);color:var(--bs-body-color);border-radius:2rem;padding:.5rem 1rem;font-weight:500;transition:all .15s;text-decoration:none}
.wx-zone-chip:hover{background:var(--wx-primary);color:#fff;border-color:var(--wx-primary)}
.wx-pay-tile{border:1px solid var(--bs-border-color);border-radius:.9rem;padding:1.25rem 1rem;text-align:center;transition:all .15s;background:#fff}
.wx-pay-tile:hover{border-color:var(--wx-primary);transform:translateY(-3px);box-shadow:0 .5rem 1rem rgba(0,0,0,.05)}
.wx-pay-tile i{color:var(--wx-primary);font-size:2.2rem}
.wx-abon-tile{border-radius:1.25rem;overflow:hidden;background:#fff;transition:transform .15s}
.wx-abon-tile:hover{transform:translateY(-4px)}
.wx-abon-tile .top{background:var(--wx-primary);height:8px}
.wx-abon-tile .top.wa{background:#25d366}
.wx-abon-tile .icon{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:-45px auto 0;background:#fff;box-shadow:0 .5rem 1.25rem rgba(0,0,0,.12);color:var(--wx-primary);font-size:2.4rem}
.wx-abon-tile .icon.wa{color:#25d366}
.wx-passate{background:linear-gradient(135deg,var(--wx-secondary) 0%,color-mix(in srgb,var(--wx-secondary) 45%,var(--wx-primary)) 100%);color:#fff;border-radius:1.5rem;overflow:hidden}
.wx-wa-float{position:fixed;right:22px;bottom:22px;z-index:1030;width:60px;height:60px;font-size:1.8rem;box-shadow:0 .5rem 1.5rem rgba(37,211,102,.4);background:#25d366;border-color:#25d366;color:#fff}
.wx-wa-float:hover{background:#1ebe5b;border-color:#1ebe5b;color:#fff}
.wx-wa-float::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(37,211,102,.5);animation:wxpulse 2s infinite}
@keyframes wxpulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.4);opacity:0}}
.wx-map{aspect-ratio:16/9;border-radius:1rem;overflow:hidden;border:1px solid var(--bs-border-color);z-index:0}
.wx-map-alto{aspect-ratio:4/3}
@media (prefers-reduced-motion:reduce){.wx-offer,.wx-wa-float::after{animation:none}}
@media (max-width:991px){.wx-hero-slide{min-height:540px}}
@media (max-width:767px){.wx-hero-slide{min-height:480px}.wx-plan-head .num{font-size:3.4rem}.wx-hero-checks{gap:.75rem 1rem;font-size:.9rem}}
