/* =========================================================
   ALEXTOLL · Diseño de páginas web (webs.html)
   Se carga después de home.css y reutiliza sus piezas
   (cabecera, cabeceras de sección, preguntas y formulario).
   Matiz propio de esta página: ondas plateadas, anillos de luz
   y un brillo frío muy sutil. Todo lo demás, igual que el resto.

   1. Cabecera          5. Qué incluye
   2. Composición       6. Precios
   (mockups y webs de ejemplo: css/mockups.css)
   4. Ejemplos          7. Cómo trabajo
                        8. Contacto y ventanas de ejemplo
   ========================================================= */

/* =========================================================
   1. CABECERA
   ========================================================= */
.wb-hero{align-items:center}
.wb-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(42% 46% at 74% 42%, rgba(150,170,255,.07), transparent 70%),
  radial-gradient(30% 34% at 88% 70%, rgba(200,160,255,.05), transparent 70%),
  radial-gradient(60% 60% at 70% 45%, rgba(255,255,255,.05), transparent 70%), #000}
.wb-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 22%), linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%)}
.wb-ondas{position:absolute;inset:0;width:100%;height:100%}

/* Anillos de luz (como en la referencia): órbitas inclinadas alrededor de los dispositivos,
   con un destello que da la vuelta despacio */
/* Los anillos se apagan hacia la izquierda, donde va el texto */
.wb-rings{position:absolute;inset:0;-webkit-mask:linear-gradient(90deg, transparent 34%, #000 62%);mask:linear-gradient(90deg, transparent 34%, #000 62%)}
@media (max-width: 999px){ .wb-rings{-webkit-mask:linear-gradient(180deg, transparent 40%, #000 70%);mask:linear-gradient(180deg, transparent 40%, #000 70%)} }
.wb-ring{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform:rotate(var(--r)) scaleY(var(--e));pointer-events:none}
.wb-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.08) 0 55%, rgba(255,255,255,.95) 68%, rgba(255,255,255,.08) 80% 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  filter:drop-shadow(0 0 5px rgba(255,255,255,.6));animation:wb-spin 24s linear infinite}
.wb-ring--1{--x:72%;--y:46%;--s:min(1500px,120vw);--r:-16deg;--e:.42}
.wb-ring--2{--x:76%;--y:40%;--s:min(1050px,90vw);--r:-6deg;--e:.55;opacity:.6}
.wb-ring--2::before{animation-duration:32s;animation-direction:reverse}
@keyframes wb-spin{to{transform:rotate(360deg)}}
@media (max-width: 999px){ .wb-ring--1{--x:60%;--y:74%} .wb-ring--2{--x:66%;--y:70%} }

.wb-hero-in{display:grid;gap:clamp(28px,4vw,40px);align-items:center;padding-block:clamp(28px,5vw,64px) clamp(64px,7vw,96px)}
@media (min-width: 1000px){ .wb-hero-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)} }
.wb-hero h1{font-size:clamp(2.45rem, 4.3vw, 4rem);line-height:1;letter-spacing:-.045em}
.wb-hero h1 .silver{display:inline}
/* El antetítulo no hereda el tamaño de la entradilla de .section-head (home/base) */
.section-head p.eyebrow{font-size:.72rem;color:var(--muted);line-height:1.6}
.wb-hero .hero-lede{max-width:46ch}

/* =========================================================
   2. COMPOSICIÓN DE LA CABECERA (los mockups están en css/mockups.css)
   ========================================================= */
/* Composición de la cabecera */
.wb-devices{aspect-ratio:100/66;width:100%;max-width:760px;justify-self:center}
@media (min-width: 1000px){ .wb-devices{width:104%;max-width:none;margin-left:-2%;justify-self:start} }
@media (min-width: 1200px){ .wb-devices{width:128%;margin-left:-6%} }
.wb-tilt{position:absolute;inset:0;transform:perspective(1600px) rotateY(calc(-7deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg)));transform-style:preserve-3d;transition:transform .8s var(--ease-out)}
.wb-d-laptop{--w:68cqw;left:0;top:7cqw;z-index:1}
.wb-d-tablet{--w:26cqw;left:57cqw;top:11.5cqw;z-index:2}
.wb-d-phone{--w:15.4cqw;left:80.5cqw;top:21cqw;z-index:3}
@media (max-width: 999px){
  .wb-hero{min-height:0}
  .wb-hero-in{padding-bottom:clamp(36px,6vw,64px)}
  .wb-devices{aspect-ratio:100/76;width:min(108%, 820px);max-width:none}
  .wb-d-laptop{--w:70cqw;top:8cqw}
  .wb-d-tablet{--w:29cqw;left:55cqw;top:13cqw}
  .wb-d-phone{--w:17cqw;left:81cqw;top:22cqw}
}
.wb-floor{position:absolute;left:-6%;right:-6%;top:57cqw;height:14cqw;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%, transparent);filter:blur(4px)}
.wb-floor::after{content:"";position:absolute;left:12%;right:12%;top:46%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
@media (max-width: 999px){ .wb-floor{top:61cqw} }

/* Flotan muy despacio, cada uno a su ritmo */
.js .wb-devices .dv{animation:wb-float 9s ease-in-out infinite}
.js .wb-devices .wb-d-tablet{animation-delay:-3s;animation-duration:10s}
.js .wb-devices .wb-d-phone{animation-delay:-6s;animation-duration:8s}
@keyframes wb-float{50%{transform:translateY(-1.2cqw)}}
/* Entrada al cargar */
.js .wb-devices{animation:wb-in 1.4s var(--ease-out) .2s both}
@keyframes wb-in{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}

/* =========================================================
   4. EJEMPLOS (tarjetas grandes)
   ========================================================= */
.wb-exs{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width: 760px){ .wb-exs{grid-template-columns:repeat(3,1fr)} }
.wb-ex{position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s}
.wb-ex-stage{aspect-ratio:16/11.5;overflow:hidden;background:
  radial-gradient(70% 60% at 50% 30%, var(--ex-glow), transparent 70%),
  linear-gradient(180deg,#121216,#050506)}
.wb-ex-stage::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(180deg,transparent,#0D0D10)}
.wb-ex-stage .dv{z-index:1}
.wb-ex--brasa{--ex-glow:rgba(255,170,90,.16)}
.wb-ex--nativa{--ex-glow:rgba(255,248,235,.14)}
.wb-ex--nord{--ex-glow:rgba(235,215,190,.15)}
.wb-ex-laptop{--w:84cqw;left:8cqw;top:9cqw;transition:transform 1s var(--ease-out)}
.wb-ex-body{display:grid;gap:8px;padding:6px 24px 22px;justify-items:start}
.wb-ex h3{font-size:1.2rem;letter-spacing:-.02em}
.wb-ex p{color:var(--muted);font-size:.95rem;line-height:1.5}
.wb-ex .btn--link{margin-top:6px;font-size:.95rem;text-decoration:underline;text-underline-offset:.3em}
.wb-ex .btn--link::after{content:"";position:absolute;inset:0;z-index:2}  /* toda la tarjeta abre el ejemplo */
.wb-ex::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);transform:translateX(-120%);transition:transform 1.1s var(--ease-out)}
@media (hover: hover){
  .wb-ex:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18);box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 40px 70px -30px rgba(0,0,0,1)}
  .wb-ex:hover .wb-ex-laptop{transform:translateY(-1.5cqw) scale(1.04)}
  .wb-ex:hover::before{transform:translateX(120%)}
}
.wb-ex:focus-within{border-color:rgba(255,255,255,.3)}

/* =========================================================
   5. QUÉ INCLUYE
   ========================================================= */
.wb-feats{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (min-width: 980px){ .wb-feats{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 520px){ .wb-feats{grid-template-columns:1fr} }
.wb-feat{display:grid;gap:10px;align-content:start;padding:26px 22px 28px;transition:transform .5s var(--ease-out), border-color .4s}
@media (hover: hover){ .wb-feat:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)} }
.wb-feat .ico-l{width:34px;height:34px;color:var(--ink);margin-bottom:10px}
.wb-feat h3{font-size:1.1rem}
.wb-feat p{color:var(--muted);font-size:.92rem;line-height:1.5}
.wb-extras{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.wb-extras li{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--pill);background:rgba(255,255,255,.025);font-size:.92rem;color:color-mix(in srgb, var(--ink) 85%, transparent)}
.wb-extras .ico-l{width:18px;height:18px}

/* =========================================================
   6. PRECIOS
   ========================================================= */
.wb-lede{color:var(--muted);max-width:52ch;line-height:1.55}
.wb-note{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--rule);border-radius:var(--pill);font-size:.9rem;color:color-mix(in srgb, var(--ink) 85%, transparent);justify-self:start}
@media (min-width: 860px){ .wb-note{justify-self:end} }
.wb-note .ico-l{width:18px;height:18px}
.wb-plans{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width: 900px){ .wb-plans{grid-template-columns:1fr 1fr} }
.wb-plan{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:clamp(24px,3vw,34px)}
.wb-plan.is-featured{border-color:rgba(255,255,255,.22);box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 0 0 1px rgba(255,255,255,.04), 0 40px 80px -40px rgba(255,255,255,.12)}
.wb-plan.is-featured::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.wb-plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.wb-plan h3{font-size:clamp(1.7rem,2.6vw,2.1rem);letter-spacing:-.035em;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.wb-plan-head p{color:var(--muted);margin-top:6px}
.wb-badge{font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:5px 12px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);font-stretch:100%}
.wb-price{text-align:right;flex:none}
.wb-price span{display:block;font-size:.8rem;color:var(--faint)}
.wb-price b{display:block;font-size:clamp(2rem,3.4vw,2.6rem);font-weight:650;letter-spacing:-.04em;line-height:1}
.wb-plan-body{display:grid;gap:20px;grid-template-columns:1fr;align-items:center;flex:1}
@media (min-width: 560px){ .wb-plan-body{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} }
.wb-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wb-checks li{display:flex;gap:12px;align-items:center;font-size:.95rem}
.wb-checks .ico-l{width:20px;height:20px;color:var(--ink);flex:none}
.wb-plan-stage{aspect-ratio:16/11}
.wb-plan-laptop{--w:92cqw;left:4cqw;top:5cqw}
.wb-plan-cta{align-self:flex-start}
.wb-maint{display:flex;align-items:center;gap:14px;margin-top:22px;color:var(--muted);font-size:.95rem}
.wb-maint .ico-l{width:22px;height:22px;color:var(--ink);flex:none}
.wb-maint b{color:var(--ink);font-weight:600}
.wb-maint a{color:var(--ink);font-weight:600}

/* =========================================================
   7. CÓMO TRABAJO
   ========================================================= */
.wb-ai{display:flex;align-items:center;gap:14px;max-width:400px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.03);color:var(--muted);font-size:.9rem;line-height:1.5}
@media (min-width: 860px){ .wb-ai{justify-self:end} }
.wb-ai .ico-l{width:26px;height:26px;color:var(--ink);flex:none}
.wb-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width: 640px){ .wb-steps{grid-template-columns:1fr 1fr} }
@media (min-width: 1080px){ .wb-steps{grid-template-columns:repeat(4,1fr);gap:28px} }
.wb-step{position:relative;display:flex;gap:16px;align-items:flex-start;padding:22px 20px}
.wb-step .ico-l{width:34px;height:34px;color:var(--ink);flex:none}
.wb-step h3{font-size:1.02rem;margin-bottom:6px}
.wb-step h3 span{color:var(--faint)}
.wb-step p{color:var(--muted);font-size:.88rem;line-height:1.5}
@media (min-width: 1080px){
  .wb-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-22px;width:14px;height:14px;transform:translateY(-50%);background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
}

/* =========================================================
   8. CONTACTO
   ========================================================= */
.wb-cta{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(320px,30vw,380px);display:grid;align-items:center;margin-bottom:18px}
.wb-cta-img{position:absolute;inset:0;z-index:-1}
.wb-cta-img img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.wb-cta-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.85) 34%, rgba(5,5,6,.2) 70%, rgba(5,5,6,.1) 100%)}
.wb-cta-copy{display:grid;gap:14px;justify-items:start;max-width:640px;padding:clamp(28px,4.5vw,52px)}
.wb-cta-copy h2{font-size:var(--fs-xl)}
.wb-cta-copy p{color:color-mix(in srgb, var(--ink) 75%, transparent);line-height:1.6}
.wb-cta-copy .btn--secondary .ico{width:20px;height:20px}
@media (max-width: 700px){
  .wb-cta{align-items:end;min-height:460px}
  .wb-cta-img::after{background:linear-gradient(180deg, rgba(5,5,6,.2) 0%, rgba(5,5,6,.75) 40%, rgba(5,5,6,.97) 70%)}
}
.wb-form-wrap{scroll-margin-top:calc(var(--nav-h) + var(--nav-top) + 20px)}
.wb-promise{color:var(--muted);line-height:1.55;margin-top:4px}

/* ---------- Ventanas "Ver ejemplo" ---------- */
.wb-dlg{width:min(1180px, calc(100vw - 24px));max-width:none;height:min(860px, calc(100dvh - 24px));max-height:none;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  background:#0B0B0E;color:var(--ink);box-shadow:0 60px 120px -30px rgba(0,0,0,1);overflow:hidden}
.wb-dlg:focus-visible{outline:none}
.wb-dlg[open]{display:flex;flex-direction:column;animation:wb-dlg-in .45s var(--ease-out)}
.wb-dlg::backdrop{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@keyframes wb-dlg-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.wb-dlg-bar{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;border-bottom:1px solid var(--line);background:#111115}
.wb-dots{display:flex;gap:7px}
.wb-dots i{width:11px;height:11px;border-radius:50%;background:#3A3A40}
.wb-url{flex:1;max-width:420px;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px;border-radius:var(--pill);background:#1A1A1F;color:var(--muted);font-size:.85rem}
.wb-url .ico{width:13px;height:13px}
.wb-dlg-tag{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.wb-dlg-x{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--pill);border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--ink);cursor:pointer;flex:none}
.wb-dlg-x:hover{background:#FFFFFF;color:#000}
.wb-dlg-x .ico-l{width:20px;height:20px;transform:rotate(45deg)}
.wb-dlg-body{flex:1;overflow-y:auto;overscroll-behavior:contain;container-type:inline-size}
.wb-dlg-body .ms{min-height:100%}
.wb-dlg-body .ms-hero{min-height:calc(var(--u)*48)}
.wb-dlg-body .ms-brasa:not(.ms--p) .ms-img{width:62%}
.wb-dlg-body .ms-nativa.ms--p .ms-img{aspect-ratio:4/5;object-position:50% 45%}
.wb-dlg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 18px;border-top:1px solid var(--line);background:#111115}
.wb-dlg-foot p{color:var(--muted);font-size:.95rem}
.wb-dlg-foot b{color:var(--ink)}
@media (max-width: 640px){
  .wb-dlg{width:100vw;height:100dvh;border-radius:0;border:0}
  .wb-dots,.wb-dlg-tag{display:none}
  .wb-dlg-foot p{display:none}
  .wb-dlg-foot .btn{width:100%}
}
html.wb-lock{overflow:hidden}

/* ---------- Movimiento reducido: todo quieto ---------- */
@media (prefers-reduced-motion: reduce){
  .wb-ring,.ms-liquid,.js .wb-devices .dv,.js .wb-devices{animation:none}
  .wb-tilt{transition:none}
}