/* =====================================================================
   NIX Arc — Servicio: Sitios web
   Concepto: contenido desordenado que se convierte en una página clara
   y dirigida. Planos rectangulares, rejillas, recortes editoriales y
   cambios de escala. Sin nodos, cuerdas, órbitas ni laptops.
   Prefijo de página: .wb-
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 0. BASE DE PÁGINA                                                   */
/* ------------------------------------------------------------------ */
/* Padding interno único para todas las pantallas simuladas de la página.
   Antes cada mockup tenía el suyo (0.85rem, 1.25rem, 1.35rem) y el contenido
   quedaba a distancias distintas del borde según la pieza. */
.wb-page-body,
:root {
  --wb-screen-pad: clamp(0.9rem, 1.5vw, 1.2rem);
}

.wb-shell {
  width: min(100%, var(--container-wide));
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-width: 0;
}

.wb-section {
  position: relative;
  padding: var(--section-y) 0;
  border-top: 1px solid var(--border);
}

.wb-kicker {
  margin: 0 0 1.3rem;
  color: var(--violet-bright);
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wb-lead {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  max-width: 62ch;
  margin-top: 1.3rem;
}

.wb-section h2 {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Marca reducida reutilizada dentro de los mockups editoriales */
.wb-mark {
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 5px;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  flex: none;
}

/* CTA figurado dentro de los mockups (no es un botón real) */
.wb-cta {
  display: block;
  height: 0.62rem;
  min-width: 4.2rem;
  border-radius: var(--r-pill);
  background: var(--violet);
  box-shadow: 0 6px 18px -8px var(--violet-glow);
}
.wb-cta--lg { height: 0.85rem; min-width: 6.5rem; }

/* El reveal (incluido el escalonado de listas) es global: styles.css sección 16
   + el lote ordenado que calcula main.js. */

/* Barras genéricas de texto figurado dentro de los mockups */
.wb-main i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.13); }
.wb-main i.w2 { width: 62%; }
.wb-main i.w3 { width: 40%; }
.wb-main u { display: block; border-radius: 8px; background: linear-gradient(135deg, rgba(132,18,241,0.24), rgba(255,255,255,0.05)); }

/* ------------------------------------------------------------------ */
/* 1. HERO                                                             */
/* ------------------------------------------------------------------ */
.wb-hero { position: relative; overflow: hidden; }

.wb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.wb-breadcrumbs { margin-bottom: 1.6rem; }
.wb-breadcrumbs ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-faint);
}
.wb-breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--text-faint); }
.wb-breadcrumbs a { color: var(--text-muted); }
.wb-breadcrumbs a:hover { color: var(--violet-bright); }
.wb-breadcrumbs [aria-current="page"] { color: var(--text); }

.wb-hero__title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
  max-width: 22ch;
}

.wb-hero__lead {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  max-width: 54ch;
  margin: 0 0 2.2rem;
}

.wb-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.wb-hero__foot {
  margin: 1.8rem 0 0;
  font-size: 0.85rem;
  color: var(--text-faint);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

/* --- Escenario del hero: la página que se arma ---------------------- */
.wb-stage {
  position: relative;
  aspect-ratio: 1 / 0.94;
  width: 100%;
  container-type: inline-size;
}

.wb-stage__grid {
  position: absolute;
  inset: 4% 2% 6% 4%;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 12.5% 16.6%;
  -webkit-mask-image: radial-gradient(70% 60% at 45% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 45% 45%, #000 35%, transparent 100%);
  opacity: 0;
  transition: opacity 0.9s var(--ease) 0.15s;
}

.wb-stage__halo {
  position: absolute;
  left: 12%; top: 14%;
  width: 70%; height: 66%;
  background: radial-gradient(circle at 50% 50%, rgba(132,18,241,0.3), transparent 68%);
  filter: blur(46px);
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.5s;
  pointer-events: none;
}

/* Fragmentos sueltos: contenido sin jerarquía */
.wb-loose {
  position: absolute;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(14,14,22,0.82);
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.5cqi, 0.76rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition:
    transform 1s var(--ease),
    opacity 0.8s var(--ease),
    border-color 0.8s var(--ease);
  z-index: 3;
}

/* Posición final (alineada al margen), con desplazamiento inicial vía --dx/--dy */
.wb-loose { transform: translate3d(var(--dx, 0), var(--dy, 0), 0) rotate(var(--rot, 0deg)); }

.wb-loose--1 { left: 1%;  top: 6%;   --dx: 14%;  --dy: 40%;  --rot: -6deg; }
.wb-loose--2 { left: 66%; top: 2%;   --dx: -30%; --dy: 62%;  --rot: 5deg; }
.wb-loose--3 { left: 0%;  top: 34%;  --dx: 34%;  --dy: -18%; --rot: 4deg; }
.wb-loose--4 { left: 78%; top: 32%;  --dx: -44%; --dy: 26%;  --rot: -5deg; }
.wb-loose--5 { left: 3%;  top: 68%;  --dx: 26%;  --dy: -34%; --rot: 3deg; }
.wb-loose--6 { left: 70%; top: 76%;  --dx: -36%; --dy: -30%; --rot: -4deg; }

/* Estado armado: los fragmentos vuelven a su margen y bajan de peso */
.wb-stage.is-built .wb-loose {
  transform: none;
  opacity: 0.5;
}
.wb-stage.is-built .wb-stage__grid,
.wb-stage.is-built .wb-stage__halo { opacity: 1; }

/* La hoja principal: la página organizada */
.wb-sheet {
  position: absolute;
  left: 13%; top: 12%;
  width: 68%;
  padding: var(--wb-screen-pad);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(20,20,32,0.95), rgba(11,11,18,0.95));
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(132,18,241,0.08);
  backdrop-filter: blur(6px);
  display: grid;
  gap: 0.6rem;
  z-index: 4;
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.985);
  transition: opacity 0.8s var(--ease) 0.25s, transform 0.9s var(--ease) 0.25s;
}
.wb-stage.is-built .wb-sheet { opacity: 1; transform: none; }

.wb-sheet__nav {
  display: flex; align-items: center; gap: 0.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.75s;
}
.wb-stage.is-built .wb-sheet__nav { opacity: 1; }
.wb-sheet__nav i { width: 1.5rem; height: 4px; }
.wb-sheet__nav em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 0.18rem 0.55rem;
}

.wb-sheet__hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.7rem;
  align-items: start;
}
.wb-sheet__copy { display: grid; gap: 0.4rem; }
.wb-sheet__copy small {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-bright);
}
.wb-sheet__copy strong {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 2.1cqi, 1.05rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wb-sheet__copy span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.11); }
.wb-sheet__copy span.w2 { width: 66%; }
.wb-sheet__copy .wb-cta {
  margin-top: 0.35rem;
  opacity: 0;
  transform: scaleX(0.55);
  transform-origin: left;
  transition: opacity 0.5s var(--ease) 1s, transform 0.6s var(--ease) 1s;
}
.wb-stage.is-built .wb-sheet__copy .wb-cta { opacity: 1; transform: none; }

.wb-sheet__media { border-radius: 10px; overflow: hidden; }
.wb-sheet__media u { aspect-ratio: 1 / 1.05; }

.wb-sheet__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.wb-sheet__cols > div { display: grid; gap: 0.3rem; }
.wb-sheet__cols small {
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* Versión mobile en primer plano */
.wb-mob {
  position: absolute;
  right: 2%; bottom: 3%;
  width: 21%;
  padding: 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(24,24,38,0.97), rgba(12,12,20,0.97));
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.95);
  display: grid;
  gap: 0.4rem;
  z-index: 6;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.7s var(--ease) 1.15s, transform 0.8s var(--ease) 1.15s;
}
.wb-stage.is-built .wb-mob { opacity: 1; transform: none; }
.wb-mob header { display: flex; align-items: center; justify-content: space-between; }
.wb-mob header i { width: 0.7rem; height: 4px; }
.wb-mob strong {
  font-family: var(--font-display);
  font-size: clamp(0.52rem, 1.3cqi, 0.68rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}
.wb-mob u { aspect-ratio: 1 / 0.62; }
.wb-mob .wb-cta { min-width: 0; height: 0.5rem; }

/* Etiquetas del escenario */
.wb-stage__tag {
  position: absolute;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  z-index: 5;
}
.wb-stage__tag--a { left: 0; top: 0; }
.wb-stage__tag--b {
  right: 26%; bottom: 0;
  color: var(--violet-bright);
  opacity: 0;
  transition: opacity 0.6s var(--ease) 1.3s;
}
.wb-stage.is-built .wb-stage__tag--b { opacity: 1; }

/* Sin JS o con reduced motion: todo llega directamente al estado final */
html:not(.js) .wb-stage .wb-sheet,
html:not(.js) .wb-stage .wb-mob,
html:not(.js) .wb-stage .wb-sheet__nav,
html:not(.js) .wb-stage .wb-stage__grid,
html:not(.js) .wb-stage .wb-stage__halo,
html:not(.js) .wb-stage .wb-stage__tag--b,
html:not(.js) .wb-stage .wb-sheet__copy .wb-cta {
  opacity: 1;
  transform: none;
}
html:not(.js) .wb-loose { transform: none; opacity: 0.5; }

/* ------------------------------------------------------------------ */
/* 2. BONITA vs ÚTIL                                                   */
/* ------------------------------------------------------------------ */
.wb-clarity__head { max-width: 68ch; }
.wb-clarity__head h2 { max-width: 20ch; }

.wb-compare { margin-top: clamp(2.5rem, 5vw, 4rem); }

.wb-compare__controls {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.28rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  margin-bottom: 1.6rem;
}
.wb-compare__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.55rem 1.35rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
}
.wb-compare__btn:hover { color: var(--text); }
.wb-compare__btn.is-active {
  background: var(--violet);
  color: var(--on-violet);
}
.wb-compare__btn:focus-visible { outline: 2px solid var(--violet-bright); outline-offset: 2px; }

.wb-compare__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.wb-compare__caption {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
  max-width: 42ch;
}
.wb-compare__state {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* --- La página de ejemplo que se reorganiza ------------------------ */
.wb-demo {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(19,19,30,0.9), rgba(10,10,17,0.9));
  padding: clamp(0.85rem, 1.6vw, 1.4rem);
  display: grid;
  gap: 0.85rem;
  container-type: inline-size;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9);
}
.wb-demo * { transition: all 0.55s var(--ease); }

.wb-demo__nav {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.wb-demo__links { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.wb-demo__links i { width: 1.5rem; height: 4px; }
.wb-demo__cta {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.62rem;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.6rem;
}

.wb-demo__hero { display: grid; gap: 0.45rem; }
.wb-demo__title {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 2.4cqi, 1.35rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-muted);
}
.wb-demo__sub { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.wb-demo__sub.w2 { width: 55%; }

.wb-demo__body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.wb-demo__block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  background: rgba(255,255,255,0.02);
}
.wb-demo__media { grid-column: span 4; border-radius: 10px; overflow: hidden; }
.wb-demo__media u { aspect-ratio: 4 / 1; }

.wb-demo__foot {
  display: flex; gap: 0.8rem; align-items: center;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.wb-demo__foot i { width: 3rem; }

/* Estado CLARA: el layout se reorganiza de verdad */
.wb-compare__stage[data-state="clara"] .wb-demo__links i:nth-child(n + 4) {
  width: 0; opacity: 0; margin: 0;
}
.wb-compare__stage[data-state="clara"] .wb-demo__cta {
  color: var(--on-violet);
  background: var(--violet);
  border-color: var(--violet);
  box-shadow: 0 8px 22px -10px var(--violet-glow);
}
.wb-compare__stage[data-state="clara"] .wb-demo__hero {
  grid-template-columns: minmax(0, 1fr);
  padding: 0.4rem 0 0.9rem;
}
.wb-compare__stage[data-state="clara"] .wb-demo__title {
  color: var(--text);
  font-size: clamp(1rem, 3cqi, 1.7rem);
  max-width: 18ch;
}
.wb-compare__stage[data-state="clara"] .wb-demo__body {
  grid-template-columns: 1.4fr 1fr 1fr;
}
.wb-compare__stage[data-state="clara"] .wb-demo__block.b1 {
  grid-row: span 2;
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.045);
}
.wb-compare__stage[data-state="clara"] .wb-demo__block.b4 {
  opacity: 0.35;
}
.wb-compare__stage[data-state="clara"] .wb-demo__media {
  grid-column: span 2;
  grid-row: span 2;
}
.wb-compare__stage[data-state="clara"] .wb-demo__media u { aspect-ratio: 1 / 0.85; }

/* Al pasar a "clara" aparece un CTA con peso real dentro del hero */
.wb-compare__stage .wb-demo__hero::after {
  content: "";
  display: block;
  height: 0;
  min-width: 0;
  border-radius: var(--r-pill);
  background: var(--violet);
  opacity: 0;
  transition: all 0.55s var(--ease);
}
.wb-compare__stage[data-state="clara"] .wb-demo__hero::after {
  height: 0.72rem;
  min-width: 7rem;
  width: 7rem;
  opacity: 1;
  margin-top: 0.5rem;
  box-shadow: 0 8px 22px -10px var(--violet-glow);
}

/* ------------------------------------------------------------------ */
/* 3. QUE DEBE ENTENDER UNA PERSONA AL ENTRAR                          */
/* ------------------------------------------------------------------ */
.wb-answers__head { max-width: 68ch; }
.wb-answers__head h2 { max-width: 26ch; }

/* Marcadores de anotación: numeración + línea recta discreta */
.wb-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  border: 1px solid var(--violet);
  background: rgba(10,10,17,0.95);
  color: var(--violet-bright);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  z-index: 4;
}
.wb-pin::before {
  content: "";
  position: absolute;
  right: 100%;
  width: 1.4rem;
  height: 1px;
  background: linear-gradient(to left, var(--violet), transparent);
}

.wb-answers__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.wb-page { container-type: inline-size; }
.wb-page__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

.wb-page__sheet {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, rgba(18,18,29,0.92), rgba(10,10,17,0.92));
  padding: clamp(0.8rem, 1.5vw, 1.2rem);
  display: grid;
  gap: 0.8rem;
  box-shadow: 0 30px 70px -44px rgba(0,0,0,0.9);
}

.wb-page__nav {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.wb-page__nav span { display: flex; gap: 0.4rem; }
.wb-page__nav i { width: 1.4rem; height: 4px; }
.wb-page__nav em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 600;
  color: #fff;
  background: var(--violet);
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 18px -8px var(--violet-glow);
  white-space: nowrap;
}

.wb-page__zone { position: relative; display: grid; gap: 0.4rem; padding-right: 0.9rem; }
.wb-page__zone .wb-pin { right: -0.55rem; top: 50%; transform: translateY(-50%); }

.wb-page__zone--hero small {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-bright);
}
.wb-page__zone--hero strong {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.6cqw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.wb-page__zone--who p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 40ch;
}

.wb-page__zone--problem { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.wb-page__zone--problem > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.wb-page__zone--proof { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.7rem; align-items: center; }
.wb-page__zone--proof u { aspect-ratio: 5 / 3; }
.wb-page__zone--proof > div { display: grid; gap: 0.35rem; }

.wb-page__zone--action { justify-items: start; padding-top: 0.15rem; }

.wb-page__zone--contact {
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.wb-page__zone--contact i { width: 2.6rem; }
.wb-page__zone--contact i.w2 { width: 3.4rem; }
.wb-page__zone--contact i.w3 { width: 2rem; }

.wb-answers__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
}
.wb-answers__list li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--border);
}
.wb-answers__list li:first-child { border-top: 1px solid var(--border); }
.wb-answers__n {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--violet-bright);
  padding-top: 0.15rem;
}
.wb-answers__list b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.wb-answers__list small { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

.wb-answers__note {
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  color: var(--text-faint);
  font-size: 0.95rem;
  border-left: 2px solid var(--violet);
  padding-left: 1rem;
  max-width: 66ch;
}

/* ------------------------------------------------------------------ */
/* 4. TIPOS DE SITIOS                                                  */
/* ------------------------------------------------------------------ */
.wb-types__head { max-width: 64ch; }

.wb-types__board {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}

.wb-types__tabs { display: grid; gap: 0; border-top: 1px solid var(--border); }
.wb-types__tab {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  padding: 1.05rem 1rem 1.05rem 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: center;
  position: relative;
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-2) var(--ease);
}
.wb-types__tab span {
  font-size: 0.72rem;
  color: var(--text-faint);
  transition: color var(--dur-1) var(--ease);
}
.wb-types__tab::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--violet);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-2) var(--ease);
}
.wb-types__tab:hover { color: var(--text); }
.wb-types__tab.is-active { color: var(--text); padding-left: 1rem; }
.wb-types__tab.is-active::before { transform: scaleY(1); }
.wb-types__tab.is-active span { color: var(--violet-bright); }
.wb-types__tab:focus-visible { outline: 2px solid var(--violet-bright); outline-offset: -2px; }

.wb-types__stage { position: relative; min-width: 0; }
.wb-types__pane {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
/* `display` en el panel gana al [hidden] del navegador: hay que repetirlo */
.wb-types__pane[hidden] { display: none; }
.wb-types__pane:focus-visible { outline: 2px solid var(--violet-bright); outline-offset: 6px; border-radius: var(--r-md); }
html.motion-ready .wb-types__pane.is-active { animation: wb-fade 0.5s var(--ease); }
@keyframes wb-fade {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

.wb-types__info h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin: 0 0 0.7rem;
}
.wb-types__info p { color: var(--text-muted); margin: 0 0 0.7rem; max-width: 56ch; }
.wb-types__goal {
  font-size: 0.88rem;
  color: var(--text-faint);
  border-left: 2px solid var(--violet);
  padding-left: 0.9rem;
}
.wb-types__goal b {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.wb-types__visual { min-width: 0; }

/* --- Mockups editoriales por tipo de sitio -------------------------- */
.wb-mini {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(19,19,30,0.92), rgba(10,10,17,0.92));
  padding: var(--wb-screen-pad);
  display: grid;
  gap: 0.75rem;
  container-type: inline-size;
  box-shadow: 0 30px 70px -44px rgba(0,0,0,0.9);
  min-height: clamp(240px, 30vw, 340px);
  align-content: start;
}
.wb-mini > header {
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}
.wb-mini > header i { width: 1.4rem; height: 4px; flex: none; }
.wb-mini > header b:not(.wb-mark) {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wb-mini > header em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--violet-bright);
  border: 1px solid rgba(132,18,241,0.5);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.wb-mini small {
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wb-mini strong {
  display: block;
  height: 0.72rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.17);
}

/* 01 corporativo: hero ancho + tres columnas iguales */
.wb-mini__hero { display: grid; gap: 0.4rem; }
.wb-mini__hero strong { width: 74%; }
.wb-mini__hero .wb-cta { margin-top: 0.4rem; }
.wb-mini__tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.wb-mini__tri > div { display: grid; gap: 0.3rem; align-content: start; }
.wb-mini--corp > footer { display: flex; gap: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.wb-mini--corp > footer i { width: 2.4rem; }

/* 02 landing: una sola columna centrada, foco absoluto */
.wb-mini--landing { text-align: center; }
.wb-mini--landing > header { justify-content: space-between; }
.wb-mini__focus {
  display: grid; gap: 0.5rem; justify-items: center;
  padding: clamp(1rem, 3vw, 2.2rem) 0;
}
.wb-mini__focus strong { width: 62%; height: 0.95rem; }
.wb-mini__focus i { width: 74%; }
.wb-mini__focus i.w2 { width: 50%; }
.wb-mini__focus .wb-cta { margin-top: 0.6rem; }
.wb-mini__proof { display: flex; justify-content: center; gap: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.wb-mini__proof i { width: 2.6rem; }
.wb-mini__repeat { display: grid; justify-items: center; padding-top: 0.8rem; }

/* 03 local: banda visual + carta y sedes */
.wb-mini__banner { position: relative; border-radius: 10px; overflow: hidden; display: grid; }
.wb-mini__banner u { aspect-ratio: 3 / 1; }
.wb-mini__banner small { position: absolute; left: 0.7rem; top: 0.6rem; color: var(--text); }
.wb-mini__banner strong { position: absolute; left: 0.7rem; bottom: 0.7rem; width: 46%; }
.wb-mini__menu { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 0.7rem; }
.wb-mini__menu > div { display: grid; gap: 0.3rem; align-content: start; border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem; }
.wb-mini__places { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.wb-mini__places span {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.6rem;
}
.wb-mini__places .wb-cta { margin-left: auto; }

/* 04 portafolio: rejilla de piezas con recortes desiguales */
.wb-mini__gal { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 0.5rem; }
.wb-mini__gal u { border-radius: 8px; }
.wb-mini__gal .g1 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 0.72; }
.wb-mini__gal .g2 { aspect-ratio: 1 / 1; }
.wb-mini__gal .g3 { aspect-ratio: 1 / 1; }
.wb-mini__gal .g4 { grid-column: span 3; aspect-ratio: 5 / 1; }
.wb-mini__cap { display: grid; gap: 0.35rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.wb-mini__cap strong { width: 45%; height: 0.6rem; }

/* 05 servicios profesionales: especialidades + preguntas */
.wb-mini__split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.wb-mini__spec, .wb-mini__qa {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem;
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.wb-mini__qa span {
  display: block;
  height: 1.15rem;
  border-radius: 5px;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border);
}
.wb-mini__contact { display: grid; gap: 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.wb-mini__contact .wb-cta { margin-top: 0.3rem; }

/* 06 rediseño: dos planos, el nuevo delante del antiguo */
.wb-mini--redis { position: relative; padding-bottom: clamp(2rem, 4vw, 3rem); }
.wb-mini__old {
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 0.7rem;
  display: grid;
  gap: 0.4rem;
  opacity: 0.5;
  width: 82%;
}
.wb-mini__new {
  position: relative;
  margin: -2.4rem 0 0 auto;
  width: 82%;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(26,26,42,0.99), rgba(13,13,21,0.99));
  box-shadow: 0 26px 60px -28px rgba(0,0,0,0.95);
  padding: 0.75rem;
  display: grid;
  gap: 0.4rem;
}
.wb-mini__new header { display: flex; align-items: center; gap: 0.45rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.wb-mini__new header i { width: 1.2rem; height: 4px; }
.wb-mini__new header em {
  margin-left: auto; font-style: normal;
  font-family: var(--font-display); font-size: 0.58rem;
  color: var(--violet-bright);
}
.wb-mini__new strong { width: 70%; }
.wb-mini__new .wb-cta { margin-top: 0.35rem; }

/* ------------------------------------------------------------------ */
/* 4. CONFIANZA Y ACCIÓN                                               */
/* ------------------------------------------------------------------ */
.wb-trust__head { max-width: 70ch; }
.wb-trust__head h2 { max-width: 28ch; }

.wb-trust__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.wb-browser {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, rgba(18,18,29,0.92), rgba(10,10,17,0.92));
  box-shadow: 0 30px 70px -44px rgba(0,0,0,0.9);
}
.wb-browser__bar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.wb-browser__dots { display: flex; gap: 0.3rem; flex: none; }
.wb-browser__dots u { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.12); }
.wb-browser__url {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  overflow: hidden;
}
.wb-browser__url svg { color: #7fdca4; flex: none; }

.wb-browser__body { padding: clamp(0.9rem, 1.6vw, 1.3rem); display: grid; gap: 0.9rem; }
.wb-browser__row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0.9rem;
  align-items: center;
}
.wb-browser__proj { display: grid; gap: 0.4rem; }
.wb-browser__proj u { aspect-ratio: 5 / 3; }
.wb-browser__proj small {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wb-browser__data { display: grid; gap: 0.3rem; }
.wb-browser__data b { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; }
.wb-browser__data span { font-size: 0.74rem; color: var(--text-muted); }
.wb-browser__foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.wb-browser__foot em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

.wb-browser__tag {
  position: absolute;
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-bright);
  border: 1px solid var(--violet);
  background: rgba(10,10,17,0.95);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}
.wb-browser__tag--a { top: -0.75rem; left: 1rem; color: #7fdca4; border-color: rgba(127,220,164,0.45); }
.wb-browser__tag--b { bottom: -0.75rem; right: 1rem; }

.wb-trust__cols { display: grid; gap: 0; }
.wb-trust__group { padding: 1.15rem 0; border-bottom: 1px solid var(--border); }
.wb-trust__group:first-child { border-top: 1px solid var(--border); padding-top: 0; border-top: 0; }
.wb-trust__group:last-child { border-bottom: 0; padding-bottom: 0; }
.wb-trust__group h3 { font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 0.6rem; }
.wb-trust__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.wb-trust__group li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.wb-trust__group li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.4rem; height: 0.4rem;
  border-radius: 2px;
  background: var(--violet);
}

.wb-trust__action {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  color: var(--text-faint);
  font-size: 0.95rem;
  max-width: 70ch;
}

/* ------------------------------------------------------------------ */
/* 5. CALIDAD TÉCNICA                                                  */
/* ------------------------------------------------------------------ */
.wb-layers__head { max-width: 68ch; }

.wb-resp-static {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 6.25% 100%,
    rgba(255,255,255,0.012);
  padding: clamp(1.2rem, 3vw, 2.6rem);
  display: grid;
  justify-items: center;
}

.wb-resp {
  width: 100%;
  max-width: 1200px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(20,20,32,0.95), rgba(11,11,18,0.95));
  padding: var(--wb-screen-pad);
  display: grid;
  gap: 0.85rem;
  container-type: inline-size;
  box-shadow: 0 34px 80px -44px rgba(0,0,0,0.95);
}

.wb-resp__nav { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.wb-resp__links { display: flex; gap: 0.5rem; }
.wb-resp__links i { width: 1.5rem; height: 4px; }
.wb-resp__burger { display: none; flex-direction: column; gap: 3px; margin-left: auto; }
.wb-resp__burger u { width: 0.9rem; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.5); }
.wb-resp__nav .wb-cta { margin-left: auto; min-width: 3.6rem; height: 0.6rem; }

.wb-resp__hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0.9rem; align-items: center; }
.wb-resp__copy { display: grid; gap: 0.4rem; }
.wb-resp__copy strong { display: block; height: 0.85rem; width: 82%; border-radius: 5px; background: rgba(255,255,255,0.2); }
.wb-resp__copy .wb-cta { margin-top: 0.4rem; }
.wb-resp__media { border-radius: 10px; overflow: hidden; }
.wb-resp__media u { aspect-ratio: 1 / 0.72; }

.wb-resp__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.wb-resp__cols > div { display: grid; gap: 0.3rem; align-content: start; border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; }
.wb-resp__cols small { font-family: var(--font-display); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

.wb-resp__deco { display: flex; gap: 0.5rem; }
.wb-resp__deco u { flex: 1; height: 1.6rem; border-radius: 6px; }

.wb-resp-static__note { margin: 1.6rem 0 0; color: var(--text-muted); max-width: 60ch; }

.wb-layers__board { margin-top: clamp(2.5rem, 5vw, 4rem); }

.wb-layers__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.28rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  margin-bottom: 2rem;
}
.wb-layers__tab {
  appearance: none; border: 0; background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 500;
  padding: 0.55rem 1.25rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
}
.wb-layers__tab:hover { color: var(--text); }
.wb-layers__tab.is-active { background: var(--violet); color: var(--on-violet); }
.wb-layers__tab:focus-visible { outline: 2px solid var(--violet-bright); outline-offset: 2px; }

.wb-layers__pane {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
.wb-layers__pane[hidden] { display: none; }
.wb-layers__pane:focus-visible { outline: 2px solid var(--violet-bright); outline-offset: 6px; border-radius: var(--r-md); }
html.motion-ready .wb-layers__pane.is-active { animation: wb-fade 0.5s var(--ease); }

.wb-layers__info h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 0.8rem; }
.wb-layers__info p { color: var(--text-muted); margin: 0 0 1.2rem; max-width: 54ch; }
.wb-layers__info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.wb-layers__info li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.wb-layers__info li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 1px;
  background: var(--violet);
}
.wb-layers__info em { font-style: italic; color: var(--text); }

.wb-lay {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(18,18,29,0.92), rgba(10,10,17,0.92));
  padding: clamp(0.9rem, 1.8vw, 1.4rem);
  display: grid;
  gap: 0.75rem;
  min-height: clamp(230px, 26vw, 300px);
  align-content: start;
  container-type: inline-size;
  box-shadow: 0 30px 70px -44px rgba(0,0,0,0.9);
  position: relative;
}

/* Capa 1: experiencia visible, con foco de teclado marcado */
.wb-lay--exp > header { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
.wb-lay--exp > header i { width: 1.4rem; height: 4px; }
.wb-lay--exp > header em { margin-left: auto; min-width: 3.4rem; }
.wb-lay__hero { display: grid; gap: 0.45rem; }
.wb-lay__hero strong { display: block; height: 0.8rem; width: 72%; border-radius: 5px; background: rgba(255,255,255,0.2); }
.wb-lay__hero .wb-cta {
  margin-top: 0.4rem;
  outline: 2px solid var(--violet-bright);
  outline-offset: 4px;
}
.wb-lay__hero .ph { aspect-ratio: 5 / 1; margin-top: 0.5rem; }
.wb-lay__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.wb-lay__row span { display: block; height: 2.4rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.02); }
.wb-lay__focus {
  position: absolute;
  right: clamp(0.9rem, 1.8vw, 1.4rem);
  top: 42%;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-bright);
}

/* Capa 2: estructura semántica como planos etiquetados */
.wb-lay--str { gap: 0.5rem; }
.wb-lay--str .tag {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px dashed var(--border-strong);
  border-radius: 5px;
  padding: 0.3rem 0.6rem;
  text-align: center;
}
.wb-lay--str .box {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
  padding: 0.55rem 0.7rem;
  display: flex;
  align-items: center;
}
.wb-lay--str .box small {
  font-family: var(--font-display);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.wb-lay--str .b-h1 {
  height: 2.6rem;
  border-color: rgba(132,18,241,0.5);
  background: linear-gradient(100deg, rgba(132,18,241,0.14), rgba(255,255,255,0.02));
}
.wb-lay--str .b-h1 small { color: var(--violet-bright); }
.wb-lay--str .b-h2, .wb-lay--str .b-h2b { height: 1.9rem; }
.wb-lay--str .b-txt { height: 3.2rem; opacity: 0.65; }
.wb-lay--str .b-link { height: 1.7rem; border-style: dashed; }

/* Capa 3: orden de carga como barras horizontales */
.wb-lay--load { gap: 0.7rem; align-content: center; }
.wb-lay--load .bar { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 0.7rem; }
.wb-lay--load .bar small {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.wb-lay--load .bar u { height: 0.55rem; border-radius: var(--r-pill); }
.wb-lay--load .b1 u { width: 100%; background: var(--violet); }
.wb-lay--load .b2 u { width: 78%; background: rgba(132,18,241,0.55); }
.wb-lay--load .b3 u { width: 52%; background: rgba(132,18,241,0.32); }
.wb-lay--load .b4 u { width: 28%; background: rgba(255,255,255,0.12); }
.wb-lay__hint {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ */
/* 9. PUBLICACION Y MANTENIMIENTO                                     */
/* ------------------------------------------------------------------ */
.wb-launch__head { max-width: 68ch; }

.wb-launch__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: start;
}

.wb-launch__panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-1);
  padding: clamp(1.3rem, 2.4vw, 2rem);
}
.wb-launch__panel--after { border-style: dashed; background: transparent; }

.wb-launch__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.4rem;
}
.wb-launch__bar h3 { font-family: var(--font-display); font-size: 1.12rem; margin: 0; }
.wb-launch__chip {
  font-family: var(--font-display);
  font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--violet-bright);
  border: 1px solid var(--violet);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}
.wb-launch__chip--after { color: var(--text-muted); border-color: var(--border-strong); }

.wb-launch__list { list-style: none; margin: 0; padding: 0; display: grid; }
.wb-launch__list li {
  position: relative;
  padding: 0.62rem 0 0.62rem 1.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.wb-launch__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.wb-launch__list--check li::before {
  content: "";
  position: absolute; left: 0; top: 0.85em;
  width: 0.6rem; height: 0.32rem;
  border-left: 2px solid var(--violet-bright);
  border-bottom: 2px solid var(--violet-bright);
  transform: rotate(-45deg);
}
.wb-launch__list--cycle li::before {
  content: "";
  position: absolute; left: 0.08rem; top: 0.62em;
  width: 0.42rem; height: 0.42rem;
  border: 1.5px solid var(--text-faint);
  border-radius: 50%;
}

.wb-launch__note {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  color: var(--text-faint);
  font-size: 0.88rem;
  max-width: 70ch;
}

/* ------------------------------------------------------------------ */
/* 11. PROYECTOS                                                       */
/* ------------------------------------------------------------------ */
.wb-work__head { max-width: 56ch; }

.wb-work__list {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.wb-case {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.wb-case--alt .wb-case__visual { order: 2; }

.wb-case__visual { min-width: 0; }
.wb-case__type {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-bright);
  margin: 0;
}
.wb-case__copy h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0.6rem 0 0.7rem; }
.wb-case__sum { color: var(--text-muted); margin: 0 0 1.4rem; max-width: 46ch; }

.wb-case__detail { margin: 0 0 1.4rem; display: grid; gap: 0.35rem; }
.wb-case__detail dt {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wb-case__detail dd { margin: 0 0 0.8rem; color: var(--text-muted); font-size: 0.94rem; max-width: 48ch; }
.wb-case__detail dd:last-child { margin-bottom: 0; }

.wb-case__status {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.wb-mini--case-a > header b,
.wb-mini--case-b > header b { color: var(--text); }
.wb-mini--case-a .wb-mini__hero strong { width: 68%; }

.wb-work__more { margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* ------------------------------------------------------------------ */
/* 11b. QUE INFORMACION AYUDA A COMENZAR                              */
/* ------------------------------------------------------------------ */
.wb-start__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.wb-start__copy h2 { max-width: 18ch; }
.wb-start__cta { margin: 1.6rem 0 0; }

.wb-start__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.2rem, 2.5vw, 2rem);
}
.wb-start__list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.3rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.wb-start__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 0.42rem; height: 0.42rem;
  border-radius: 2px;
  background: var(--violet);
}

/* ------------------------------------------------------------------ */
/* 12. FAQ                                                             */
/* ------------------------------------------------------------------ */
.wb-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.wb-faq__head h2 { max-width: 16ch; }

.wb-faq__list { display: grid; border-top: 1px solid var(--border); }
.wb-faqitem { border-bottom: 1px solid var(--border); }
.wb-faqitem h3 { margin: 0; font-size: 1rem; }
.wb-faqitem__btn {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  text-align: left;
  padding: 1.3rem 2.5rem 1.3rem 0;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-1) var(--ease);
}
.wb-faqitem__btn:hover { color: var(--violet-bright); }
.wb-faqitem__btn:focus-visible { outline: 2px solid var(--violet-bright); outline-offset: -2px; }
.wb-faqitem__btn i {
  position: absolute;
  right: 0.2rem; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
}
.wb-faqitem__btn i::before,
.wb-faqitem__btn i::after {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: var(--violet-bright);
  transition: transform var(--dur-2) var(--ease);
}
.wb-faqitem__btn i::after { transform: rotate(90deg); }
.wb-faqitem__btn[aria-expanded="true"] i::after { transform: rotate(0deg); }

.wb-faqitem__panel { overflow: hidden; }
.wb-faqitem__panel p {
  margin: 0;
  padding: 0 2.5rem 1.5rem 0;
  color: var(--text-muted);
  max-width: 62ch;
}
/* Con JS el panel se anima; sin JS queda abierto */
html.js .wb-faqitem__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-2) var(--ease);
}
html.js .wb-faqitem__panel[hidden] {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
}
html.js .wb-faqitem__panel > p { min-height: 0; }

/* ------------------------------------------------------------------ */
/* 13. CTA FINAL                                                       */
/* ------------------------------------------------------------------ */
.wb-closing { position: relative; overflow: hidden; text-align: center; }
.wb-closing__aura {
  position: absolute;
  left: 50%; top: 42%;
  width: min(70rem, 120%);
  aspect-ratio: 1 / 0.5;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, rgba(132,18,241,0.2), transparent 66%);
  filter: blur(52px);
  pointer-events: none;
}
.wb-closing__inner { position: relative; display: grid; justify-items: center; gap: 1.2rem; }

.wb-closing__proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.wb-closing__proof .piece {
  transform: rotate(var(--r, 0deg));
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(16,16,26,0.85);
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 0.72rem;
}
.wb-closing__sheet {
  display: grid;
  gap: 0.35rem;
  align-content: center;
  justify-items: start;
  min-width: 10rem;
  margin-left: 0.8rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(132,18,241,0.45);
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(132,18,241,0.16), rgba(12,12,20,0.95));
  box-shadow: 0 20px 50px -26px rgba(0,0,0,0.9);
}
.wb-closing__sheet i { width: 6rem; }
.wb-closing__sheet i.w2 { width: 4rem; }
.wb-closing__sheet em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--on-violet);
  background: var(--violet);
  border-radius: var(--r-pill);
  padding: 0.22rem 0.7rem;
  margin-top: 0.25rem;
  height: auto;
  min-width: 0;
  box-shadow: none;
}

.wb-closing h2 { font-size: var(--fs-h2-lg); max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.wb-closing p { color: var(--text-muted); max-width: 56ch; margin: 0 auto; font-size: var(--fs-lead); }
.wb-closing__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 0.8rem; }

/* ------------------------------------------------------------------ */
/* 14. RESPONSIVE                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .wb-types__board { grid-template-columns: minmax(0, 1fr); }
  .wb-types__tabs {
    display: flex;
    overflow-x: auto;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    scrollbar-width: thin;
  }
  .wb-types__tab {
    border-bottom: 0;
    white-space: nowrap;
    padding: 0.9rem 1rem;
    display: flex;
    gap: 0.5rem;
  }
  .wb-types__tab.is-active { padding-left: 1rem; }
  .wb-types__tab::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
  .wb-types__tab.is-active::before { transform: scaleX(1); }
  .wb-types__pane { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .wb-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .wb-hero { min-height: 0; padding-top: clamp(2rem, 8vh, 4rem); }
  .wb-hero__title { max-width: 20ch; }
  .wb-layers__pane { grid-template-columns: minmax(0, 1fr); }
  .wb-answers__grid { grid-template-columns: minmax(0, 1fr); }
  .wb-trust__grid { grid-template-columns: minmax(0, 1fr); }
  .wb-launch__grid { grid-template-columns: minmax(0, 1fr); }
  .wb-start__grid { grid-template-columns: minmax(0, 1fr); }
  .wb-case,
  .wb-case--alt { grid-template-columns: minmax(0, 1fr); }
  .wb-case--alt .wb-case__visual { order: 0; }
  .wb-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .wb-compare__stage { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  /* Hero: composición vertical simplificada, sin capas superpuestas */
  /* Los fragmentos sueltos forman una fila que envuelve; el resto de la
     composición ocupa el ancho completo, una capa debajo de otra. */
  .wb-stage { aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: flex-start; }
  .wb-sheet, .wb-mob, .wb-stage__tag { flex: 1 0 100%; margin-top: 0.45rem; }
  .wb-stage__grid, .wb-stage__halo { display: none; }
  .wb-loose {
    position: static;
    transform: none !important;
    opacity: 0.6;
  }
  .wb-stage .wb-loose { display: none; }
  .wb-stage .wb-loose--1,
  .wb-stage .wb-loose--2,
  .wb-stage .wb-loose--3 { display: inline-block; }
  .wb-sheet {
    position: static;
    width: 100%;
    opacity: 1 !important;
    transform: none !important;
  }
  .wb-sheet__nav { opacity: 1 !important; }
  .wb-sheet__copy .wb-cta { opacity: 1 !important; transform: none !important; }
  .wb-mob {
    position: static;
    flex: 0 0 58%;
    width: 58%;
    margin-left: auto;
    opacity: 1 !important;
    transform: none !important;
  }
  .wb-stage__tag { position: static; }
  .wb-stage__tag--a { display: none; }
  .wb-stage__tag--b { opacity: 1 !important; text-align: right; }

  .wb-start__list { grid-template-columns: minmax(0, 1fr); }
  .wb-browser__row { grid-template-columns: minmax(0, 1fr); }
  .wb-resp-static { padding: 1rem; }
  .wb-demo__body { grid-template-columns: repeat(2, 1fr); }
  .wb-demo__media { grid-column: span 2; }
  .wb-compare__stage[data-state="clara"] .wb-demo__body { grid-template-columns: repeat(2, 1fr); }
  .wb-compare__stage[data-state="clara"] .wb-demo__media { grid-column: span 2; grid-row: auto; }
  .wb-closing__proof .piece:nth-child(n + 3) { display: none; }
}

@media (max-width: 520px) {
  .wb-mini__split { grid-template-columns: minmax(0, 1fr); }
  .wb-mini__menu { grid-template-columns: minmax(0, 1fr); }
  .wb-mini__gal { grid-template-columns: repeat(2, 1fr); }
  .wb-mini__gal .g1 { grid-column: span 2; grid-row: auto; }
  .wb-mini__gal .g4 { grid-column: span 2; }
  .wb-answers__list li { grid-template-columns: 2rem minmax(0, 1fr); }
  .wb-launch__bar { flex-wrap: wrap; }
  .wb-layers__tabs { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ */
/* 15. REDUCED MOTION                                                  */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .wb-main *,
  .wb-main *::before,
  .wb-main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .wb-stage .wb-sheet,
  .wb-stage .wb-mob,
  .wb-stage .wb-sheet__nav,
  .wb-stage .wb-stage__grid,
  .wb-stage .wb-stage__halo,
  .wb-stage .wb-stage__tag--b,
  .wb-stage .wb-sheet__copy .wb-cta {
    opacity: 1;
    transform: none;
  }
  .wb-loose { transform: none; opacity: 0.5; }
}