/* ============================================================================
   Webbidor — capa de componentes del sitio de marketing (webbidor.com).

   Construida SOLO sobre los tokens de design-system/tokens.css. Ningún valor
   literal de color, radio, sombra o duración se escribe aquí: si aparece uno,
   es un error. Las medianas de las media queries sí son literales porque
   var() no funciona dentro de @media; salen de --wb-bp-* en tokens.css.

   Equivalencias con el UI kit del sistema (.claude/skills/webbidor-design/
   ui_kits/sitio/ y components/marketing/):

     .wb-header        Header.jsx
     .wb-hero*         Hero.jsx
     .wb-pill          Pill.jsx
     .wb-section-head  SectionHeading.jsx
     .wb-cap-card      CapabilityCard.jsx
     .wb-price-card    PriceCard.jsx
     .wb-faq-item      FAQItem.jsx
     .wb-btn           core/Button.jsx
     .wb-field*        forms/Field.jsx · Input.jsx · Select.jsx · Textarea.jsx
     .wb-footer        Footer.jsx
   ========================================================================== */

/* ---------------------------------------------------------------- base ---- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--wb-paper);
  color:var(--wb-slate-900);
  font-family:var(--wb-font-display);
  font-weight:var(--wb-w-regular);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}

a{color:var(--wb-primary);text-decoration:none;transition:color var(--wb-dur) var(--wb-ease)}
a:hover{color:var(--wb-primary-hover)}

/* El foco es azul de marca, nunca el anillo por defecto del navegador. */
:focus-visible{
  outline:2px solid var(--wb-primary);
  outline-offset:2px;
  border-radius:var(--wb-r-1);
}

.wb-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Texto largo: Noto Sans, como manda el sistema. */
.wb-prose{font-family:var(--wb-font-long)}

/* ----------------------------------------------------------- chasis ------- */

.wb-container{
  width:100%;
  max-width:var(--wb-page-max);
  margin-inline:auto;
  padding-inline:var(--wb-s-8);
}
.wb-container--md{max-width:64rem}
.wb-container--sm{max-width:var(--wb-prose-max)}

/* Entre secciones: 96px. El único otro valor permitido es 64px. */
.wb-section{padding-block:var(--wb-s-24)}
.wb-section--tight{padding-block:var(--wb-s-16)}
.wb-section--slate{background:var(--wb-slate-050)}
.wb-section--paper{background:var(--wb-paper)}

/* ---------------------------------------------------------- tipografía ---- */

.wb-eyebrow{
  font-size:.75rem;
  font-weight:var(--wb-w-black);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wb-primary);
}

.wb-section-head{
  display:flex;
  flex-direction:column;
  gap:var(--wb-s-3);
  align-items:center;
  text-align:center;
  max-width:var(--wb-prose-max);
  margin:0 auto var(--wb-s-12);
}
.wb-section-head h2{
  font-size:var(--wb-t-section);
  line-height:1.15;
  font-weight:var(--wb-w-black);
  letter-spacing:var(--wb-t-hero-ls);
  color:var(--wb-slate-900);
  text-wrap:pretty;
}
.wb-section-head p{
  font-size:1.125rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  text-wrap:pretty;
}

.wb-lead{
  font-size:var(--wb-t-lead);
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  text-wrap:pretty;
}
.wb-fineprint{
  font-size:.875rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-500);
  text-wrap:pretty;
}

/* -------------------------------------------------------------- botón ----- */
/* Alturas del sistema: 28 sm · 34 md · 42 lg. Hover: sube 2px, no escala. */

.wb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--wb-s-2);
  height:34px;
  padding-inline:14px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:var(--wb-w-bold);
  letter-spacing:-.006em;
  white-space:nowrap;
  border:1px solid transparent;
  border-radius:var(--wb-r-2);
  cursor:pointer;
  transition:background-color var(--wb-dur-fast) var(--wb-ease),
             border-color var(--wb-dur-fast) var(--wb-ease),
             color var(--wb-dur-fast) var(--wb-ease),
             transform var(--wb-dur-fast) var(--wb-ease);
}
.wb-btn--sm{height:28px;padding-inline:10px;font-size:12.5px}
.wb-btn--lg{height:42px;padding-inline:var(--wb-s-5);font-size:15px;border-radius:var(--wb-r-cta)}
.wb-btn--full{width:100%}

.wb-btn--primary{background:var(--wb-primary);color:var(--wb-text-inverse)}
.wb-btn--primary:hover{background:var(--wb-primary-hover);color:var(--wb-text-inverse);transform:translateY(var(--wb-lift))}

/* Sombra azul: el sistema la reserva para los CTA grandes del sitio. */
.wb-btn--elevated{box-shadow:var(--wb-sh-primary)}

.wb-btn--outline{
  background:var(--wb-paper);
  color:var(--wb-slate-700);
  border-color:var(--wb-slate-300);
}
.wb-btn--outline:hover{
  border-color:var(--wb-primary);
  color:var(--wb-primary);
  transform:translateY(var(--wb-lift));
}

/* Verde #25D366: solo en botones que de verdad abren WhatsApp. */
.wb-btn--whatsapp{background:var(--wb-whatsapp);color:var(--wb-text-inverse)}
.wb-btn--whatsapp:hover{background:var(--wb-whatsapp-hover);color:var(--wb-text-inverse);transform:translateY(var(--wb-lift))}

.wb-btn__wa{width:20px;height:20px;fill:currentColor;flex-shrink:0}

/* El nowrap de arriba viene del chasis del producto, donde las etiquetas son
   cortas ("Guardar", "Probar"). Los CTA de tarjeta del sitio llevan frases
   largas en español y tienen que poder partirse en pantalla estrecha. */
.wb-btn--wrap{
  white-space:normal;
  height:auto;
  min-height:44px;
  padding-block:var(--wb-s-2);
  text-align:center;
}

/* Enlace de acción en texto, no botón. */
.wb-textlink{
  display:inline-flex;
  align-items:center;
  gap:var(--wb-s-2);
  font-size:1.125rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-primary);
}
.wb-textlink:hover{text-decoration:underline}

/* --------------------------------------------------------------- pill ----- */

.wb-pill{
  display:inline-flex;
  align-items:center;
  gap:var(--wb-s-2);
  padding:var(--wb-s-1) var(--wb-s-3);
  border-radius:var(--wb-r-pill);
  border:1px solid rgb(19 127 236 / .3);
  background:rgb(19 127 236 / .1);
  color:var(--wb-primary);
  font-size:14px;
  font-weight:var(--wb-w-medium);
}
.wb-pill__dot{
  width:var(--wb-s-2);height:var(--wb-s-2);
  border-radius:50%;
  background:var(--wb-primary);
  flex-shrink:0;
}

/* ------------------------------------------------------------- header ----- */
/* Vidrio esmerilado: blanco al 80% + blur 12px. */

.wb-header{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
  border-bottom:1px solid var(--wb-slate-200);
  background:rgb(255 255 255 / .8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.wb-header__bar{
  display:flex;
  height:64px;
  align-items:center;
  justify-content:space-between;
  gap:var(--wb-s-6);
}
.wb-brand{
  display:inline-flex;
  align-items:center;
  gap:var(--wb-s-2);
  color:var(--wb-primary);
}
.wb-brand__mark{width:36px;height:36px;flex-shrink:0}
.wb-brand__word{
  font-size:1.25rem;
  font-weight:var(--wb-w-black);
  letter-spacing:var(--wb-t-hero-ls);
  color:var(--wb-slate-900);
}

.wb-nav{display:flex;align-items:center;gap:var(--wb-s-8)}
.wb-nav a{
  font-size:.875rem;
  font-weight:var(--wb-w-medium);
  color:var(--wb-slate-600);
}
.wb-nav a:hover{color:var(--wb-primary)}

.wb-burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border:1px solid var(--wb-slate-200);
  border-radius:var(--wb-r-2);
  background:var(--wb-paper);
  color:var(--wb-slate-700);
  cursor:pointer;
}
.wb-nav-mobile{
  display:none;
  flex-direction:column;
  gap:var(--wb-s-1);
  padding:var(--wb-s-2) 0 var(--wb-s-4);
  border-top:1px solid var(--wb-slate-200);
}
.wb-nav-mobile a{
  padding:var(--wb-s-3) 0;
  font-size:1rem;
  font-weight:var(--wb-w-medium);
  color:var(--wb-slate-700);
}
.wb-nav-mobile a:hover{color:var(--wb-primary)}

/* -------------------------------------------------------- switch idioma --- */
/* Par ES/EN de la cabecera. El idioma activo no es un enlace: es un <span> con
   aria-current, para que el lector de pantalla anuncie cuál está puesto y no
   ofrezca un destino que ya es el actual. Sobrevive a la media query de 960px
   —a diferencia de .wb-nav y .wb-header__cta— porque en móvil sigue siendo el
   único punto donde el visitante puede corregir el idioma que se le detectó. */
.wb-langswitch{
  display:inline-flex;
  align-items:center;
  gap:var(--wb-s-1);
  padding:var(--wb-s-1);
  border:1px solid var(--wb-slate-200);
  border-radius:var(--wb-r-pill);
  background:var(--wb-paper);
  flex-shrink:0;
}
.wb-langswitch a,
.wb-langswitch span{
  padding:var(--wb-s-1) var(--wb-s-3);
  border-radius:var(--wb-r-pill);
  font-size:.75rem;
  font-weight:var(--wb-w-bold);
  letter-spacing:.04em;
  color:var(--wb-slate-500);
  line-height:1.4;
  transition:color var(--wb-dur) var(--wb-ease),
             background var(--wb-dur) var(--wb-ease);
}
.wb-langswitch a:hover{color:var(--wb-primary);background:var(--wb-primary-soft)}
.wb-langswitch [aria-current="true"]{
  background:var(--wb-primary);
  color:var(--wb-text-inverse);
}

/* Agrupa lo que va al extremo derecho de la cabecera de las páginas legales,
   que no tienen navegación y quedarían con los tres bloques desperdigados. */
.wb-header__end{
  display:inline-flex;
  align-items:center;
  gap:var(--wb-s-5);
}

/* --------------------------------------------------------------- hero ----- */

.wb-hero{
  position:relative;
  overflow:hidden;
  background:var(--wb-paper);
  padding-block:var(--wb-s-20) var(--wb-s-24);
}
.wb-hero__pattern{
  position:absolute;
  inset:0;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#fff,transparent);
  mask-image:linear-gradient(to bottom,#fff,transparent);
}
.wb-hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--wb-s-12);
  align-items:center;
}
.wb-hero h1{
  margin-top:var(--wb-s-6);
  font-size:clamp(2.25rem, 5.5vw, var(--wb-t-hero));
  line-height:var(--wb-t-hero-lh);
  font-weight:var(--wb-w-black);
  letter-spacing:var(--wb-t-hero-ls);
  color:var(--wb-slate-900);
  text-wrap:pretty;
}
/* El único degradado real del sistema: #137fec → #2563eb sobre el titular. */
.wb-hero__accent{
  background:linear-gradient(to right,var(--wb-blue-500),var(--wb-blue-gradient-to));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.wb-hero__lead{margin-top:var(--wb-s-5);max-width:42rem}
.wb-hero__cta{display:flex;flex-wrap:wrap;gap:var(--wb-s-4);margin-top:var(--wb-s-10)}
.wb-hero__note{margin-top:var(--wb-s-4)}

.wb-hero__panel{position:relative}
/* Halo azul difuminado detrás de la tarjeta del hero. */
.wb-hero__halo{
  position:absolute;
  inset:calc(var(--wb-s-4) * -1);
  background:rgb(19 127 236 / .1);
  border-radius:var(--wb-r-card-lg);
  filter:blur(40px);
  pointer-events:none;
}
.wb-hero__card{
  position:relative;
  border-radius:var(--wb-r-card-lg);
  border:1px solid var(--wb-slate-200);
  background:var(--wb-paper);
  padding:var(--wb-s-6);
  box-shadow:var(--wb-sh-4);
}

/* Tira de flujo: entra algo → decide algo → sale algo. */
.wb-flow{display:flex;flex-direction:column;gap:var(--wb-s-2)}
.wb-flow__row{
  display:flex;
  align-items:center;
  gap:var(--wb-s-3);
  border-radius:var(--wb-r-3);
  border:1px solid var(--wb-slate-200);
  background:var(--wb-slate-050);
  padding:var(--wb-s-3) var(--wb-s-4);
}
.wb-flow__row .wb-icon{font-size:18px;color:var(--wb-primary);flex-shrink:0}
.wb-flow__row span:last-child{
  font-size:.875rem;
  font-weight:var(--wb-w-medium);
  color:var(--wb-slate-700);
}
.wb-flow__arrow{
  display:flex;
  justify-content:center;
  padding-block:var(--wb-s-2);
  color:var(--wb-slate-400);
}
.wb-flow__label{
  font-size:.75rem;
  font-weight:var(--wb-w-black);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wb-slate-500);
  margin-bottom:var(--wb-s-3);
}

/* Caja azul suave. Se usa para el paso "decide" y para las notas de sección. */
.wb-note{
  border-radius:var(--wb-r-4);
  border:1px solid rgb(19 127 236 / .2);
  background:rgb(19 127 236 / .05);
  padding:var(--wb-s-3) var(--wb-s-4);
}
.wb-note--pad{padding:var(--wb-s-6)}
.wb-note__title{
  font-size:.875rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-900);
  margin-bottom:var(--wb-s-1);
}
.wb-note__body{
  font-size:.75rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
}

.wb-hero__foot{
  margin-top:var(--wb-s-4);
  padding-top:var(--wb-s-4);
  border-top:1px solid var(--wb-slate-200);
  font-size:.75rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-500);
}

/* ------------------------------------------------------------ tarjetas ---- */
/* Fondo blanco, borde 1px, radio de tarjeta, sombra casi imperceptible.
   Nunca una tarjeta con borde de color en un solo lado. */

.wb-grid{display:grid;gap:var(--wb-s-6)}
/* Sin esto, un hijo que no puede encogerse (p. ej. un botón con white-space:nowrap
   y etiqueta larga) ensancha la pista y desborda la página en móvil. */
.wb-grid>*{min-width:0}
.wb-grid--3{grid-template-columns:repeat(3,1fr)}
.wb-grid--2{grid-template-columns:repeat(2,1fr)}
.wb-grid--3-lg{grid-template-columns:repeat(3,1fr);gap:var(--wb-s-8)}

.wb-cap-card{
  padding:var(--wb-s-6);
  border-radius:var(--wb-r-card);
  background:var(--wb-paper);
  border:1px solid var(--wb-slate-200);
  box-shadow:var(--wb-sh-1);
  transition:box-shadow var(--wb-dur-slow) var(--wb-ease),
             border-color var(--wb-dur-slow) var(--wb-ease);
}
.wb-cap-card:hover{box-shadow:var(--wb-sh-3)}
.wb-cap-card--featured{
  background:rgb(19 127 236 / .05);
  border:2px solid rgb(19 127 236 / .3);
  box-shadow:var(--wb-sh-3);
}
.wb-cap-card h3{
  margin-bottom:var(--wb-s-3);
  font-size:1.25rem;
  font-weight:var(--wb-w-black);
  letter-spacing:-.015em;
  color:var(--wb-slate-900);
}
.wb-cap-card p{
  font-size:.875rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  text-wrap:pretty;
}

/* Cuadro de icono 48×48, radio de CTA, azul al 10%. */
.wb-icon-box{
  width:48px;height:48px;
  border-radius:var(--wb-r-cta);
  margin-bottom:var(--wb-s-4);
  display:flex;align-items:center;justify-content:center;
  background:rgb(19 127 236 / .1);
  color:var(--wb-primary);
  flex-shrink:0;
}
.wb-icon-box .wb-icon{font-size:24px}
.wb-icon-box--primary{background:var(--wb-primary);color:var(--wb-text-inverse)}
.wb-icon-box--dark{background:var(--wb-slate-700);color:var(--wb-text-inverse)}
.wb-icon-box--round{
  width:40px;height:40px;
  border-radius:var(--wb-r-pill);
  margin-bottom:0;
}
.wb-icon-box--round .wb-icon{font-size:20px}

/* Tarjeta de perfil (sección "Ejemplos"). */
.wb-profile-card{
  display:flex;
  flex-direction:column;
  padding:var(--wb-s-8);
  border-radius:var(--wb-r-card);
  background:var(--wb-paper);
  border:1px solid var(--wb-slate-200);
  box-shadow:var(--wb-sh-1);
}
.wb-profile-card h3{
  margin-bottom:var(--wb-s-2);
  font-size:1.25rem;
  font-weight:var(--wb-w-black);
  letter-spacing:-.015em;
  color:var(--wb-slate-900);
}
.wb-profile-card__tags{
  font-size:.875rem;
  color:var(--wb-slate-500);
  margin-bottom:var(--wb-s-4);
}
.wb-profile-card__body{
  flex:1;
  font-size:.875rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  text-wrap:pretty;
}
.wb-profile-card .wb-btn{margin-top:var(--wb-s-6)}

/* Tarjeta de modelo de contratación. */
.wb-price-card{
  display:flex;
  flex-direction:column;
  padding:var(--wb-s-8);
  border-radius:var(--wb-r-card);
  background:linear-gradient(to bottom right,var(--wb-slate-050),var(--wb-slate-100));
  border:1px solid var(--wb-slate-200);
}
.wb-price-card--featured{
  background:linear-gradient(to bottom right,rgb(19 127 236 / .05),rgb(19 127 236 / .1));
  border-color:rgb(19 127 236 / .2);
}
.wb-price-card h3{
  margin-bottom:var(--wb-s-2);
  font-size:1.5rem;
  font-weight:var(--wb-w-black);
  letter-spacing:-.015em;
  color:var(--wb-slate-900);
}
.wb-price-card__intro{
  font-size:.875rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  margin-bottom:var(--wb-s-4);
}
/* El kit fija 44px para el CTA de esta tarjeta; min-height en vez de height
   para que una etiqueta de dos líneas no se salga de la caja. */
.wb-price-card .wb-btn{
  margin-top:var(--wb-s-6);
  height:auto;
  min-height:44px;
  border-radius:var(--wb-r-cta);
}

/* Cifra de precio. El sistema pide tabular-nums en todas las cifras. */
.wb-price-card__amount{
  font-size:1.875rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-700);
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--wb-s-1);
}
.wb-price-card__amount--primary{color:var(--wb-primary)}
.wb-price-card__note{
  font-size:.875rem;
  color:var(--wb-slate-500);
  margin-bottom:var(--wb-s-4);
}
.wb-price-card__foot{
  margin-top:var(--wb-s-4);
  padding-top:var(--wb-s-4);
  border-top:1px solid rgb(19 127 236 / .2);
  font-size:.75rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
}

/* Escalones de la mensualidad: tarjetas blancas dentro de la tarjeta de precio. */
.wb-tier-list{display:flex;flex-direction:column;gap:var(--wb-s-3)}
.wb-tier{
  background:var(--wb-paper);
  border:1px solid var(--wb-slate-200);
  border-radius:var(--wb-r-3);
  padding:var(--wb-s-4);
}
.wb-tier__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--wb-s-2);
  margin-bottom:var(--wb-s-2);
}
.wb-tier__name{font-weight:var(--wb-w-black);color:var(--wb-slate-900)}
.wb-tier__price{color:var(--wb-slate-900);font-variant-numeric:tabular-nums}
.wb-tier__price strong{font-weight:var(--wb-w-black)}
.wb-tier__price span{font-size:.75rem;color:var(--wb-slate-500)}
/* Cuando el precio muestra dos monedas, el importe facturado baja a su propio
   renglón. En móvil .wb-tier__head aprieta la columna derecha: sin esto la
   línea se partía sola y dejaba el código de moneda separado de su cifra, y
   hasta el signo de aproximación separado del número. */
.wb-tier__price{flex-shrink:0;text-align:right;white-space:nowrap}
.wb-tier__price .wb-tier__billed{display:block}
.wb-tier__items{
  display:flex;
  flex-direction:column;
  gap:var(--wb-s-2);
  font-size:.875rem;
  color:var(--wb-slate-600);
}

/* Aviso enmarcado dentro del hero de una página interior. */
.wb-callout{
  margin-top:var(--wb-s-8);
  padding:var(--wb-s-6);
  border-radius:var(--wb-r-card);
  border:1px solid var(--wb-slate-200);
  background:var(--wb-slate-050);
  font-size:.9375rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-700);
  text-wrap:pretty;
}
.wb-callout strong{color:var(--wb-slate-900)}

/* Par de CTA centrados al cierre de una página. */
.wb-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--wb-s-4);
  justify-content:center;
}

/* Lista con palomita azul. */
.wb-checks{
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:.875rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  flex:1;
}
.wb-checks li{display:flex;gap:var(--wb-s-2);align-items:flex-start}
.wb-checks .wb-icon{
  font-size:16px;
  color:var(--wb-primary);
  margin-top:2px;
  flex-shrink:0;
}
.wb-checks span{text-wrap:pretty}
.wb-checks--wide{color:var(--wb-slate-700)}

/* ------------------------------------------------------------- proceso ---- */

.wb-step{text-align:center}
.wb-step__num{
  width:64px;height:64px;
  border-radius:50%;
  margin:0 auto var(--wb-s-6);
  background:var(--wb-primary);
  color:var(--wb-text-inverse);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  font-weight:var(--wb-w-black);
}
.wb-step h3{
  margin-bottom:var(--wb-s-3);
  font-size:1.25rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-900);
}
.wb-step p{
  font-size:.9375rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  text-wrap:pretty;
}

/* --------------------------------------------------------- calculadora ---- */
/* Banda oscura. No es modo oscuro: es un tratamiento de sección. */

.wb-calc{
  position:relative;
  overflow:hidden;
  background:var(--wb-slate-900);
  color:var(--wb-text-inverse);
  padding-block:var(--wb-s-16);
}
.wb-calc__wash{
  position:absolute;inset:0;
  background:var(--wb-primary);
  opacity:.1;
  pointer-events:none;
}
.wb-calc__inner{position:relative;z-index:1;max-width:56rem;margin-inline:auto;text-align:center}
.wb-calc h2{
  font-size:var(--wb-t-section);
  font-weight:var(--wb-w-black);
  letter-spacing:var(--wb-t-hero-ls);
  margin-bottom:var(--wb-s-2);
}
.wb-calc__sub{color:var(--wb-slate-400);margin-bottom:var(--wb-s-8)}
.wb-calc__fields{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--wb-s-8);
  max-width:42rem;
  margin:0 auto var(--wb-s-8);
  text-align:left;
}
.wb-calc__fields label{
  display:block;
  min-height:2.5rem;
  font-size:.875rem;
  font-weight:var(--wb-w-medium);
  color:var(--wb-slate-300);
  margin-bottom:var(--wb-s-2);
}
.wb-calc__fields input{
  width:100%;
  height:42px;
  padding-inline:var(--wb-s-3);
  border-radius:var(--wb-r-2);
  border:1px solid rgb(255 255 255 / .1);
  background:rgb(255 255 255 / .05);
  color:var(--wb-text-inverse);
  font:inherit;
  font-size:.9375rem;
}
.wb-calc__fields input:focus-visible{outline-color:var(--wb-primary)}
.wb-calc__result{
  display:inline-block;
  padding:var(--wb-s-8);
  border-radius:var(--wb-r-card);
  background:rgb(19 127 236 / .2);
  border:1px solid rgb(19 127 236 / .3);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--wb-sh-4);
}
.wb-calc__label{
  font-size:.875rem;
  font-weight:var(--wb-w-black);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wb-primary);
  margin-bottom:var(--wb-s-2);
}
.wb-calc__value{
  font-size:3rem;
  line-height:1.1;
  font-weight:var(--wb-w-black);
  font-variant-numeric:tabular-nums;
}
.wb-calc__foot{
  font-size:.875rem;
  color:var(--wb-slate-300);
  margin-top:var(--wb-s-4);
}

/* ----------------------------------------------------------------- faq ---- */

.wb-faq{border-top:1px solid var(--wb-slate-200)}
.wb-faq-item{border-bottom:1px solid var(--wb-slate-200)}
.wb-faq-item__q{
  display:flex;
  align-items:center;
  gap:var(--wb-s-4);
  width:100%;
  padding-block:var(--wb-s-5);
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font-size:1.125rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-900);
  transition:color var(--wb-dur) var(--wb-ease);
}
.wb-faq-item__q:hover{color:var(--wb-primary)}
.wb-faq-item__q span:first-child{flex:1;text-wrap:pretty}
.wb-faq-item__q .wb-icon{font-size:24px;color:var(--wb-primary);flex-shrink:0}
.wb-faq-item__a{
  padding-bottom:var(--wb-s-5);
  display:flex;
  flex-direction:column;
  gap:var(--wb-s-3);
  font-size:1rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  text-wrap:pretty;
}
.wb-faq-item__a strong{color:var(--wb-slate-900)}
.wb-faq-item__a small{font-size:.875rem}

/* ------------------------------------------------------------ contacto ---- */

.wb-contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--wb-s-16);
  align-items:start;
}
.wb-contact h2{
  font-size:var(--wb-t-section);
  line-height:1.15;
  font-weight:var(--wb-w-black);
  letter-spacing:var(--wb-t-hero-ls);
  color:var(--wb-slate-900);
  margin-bottom:var(--wb-s-6);
  text-wrap:pretty;
}
.wb-contact__points{
  display:flex;
  flex-direction:column;
  gap:var(--wb-s-4);
  margin-top:var(--wb-s-8);
}
.wb-contact__point{display:flex;align-items:center;gap:var(--wb-s-4)}
.wb-contact__point span:last-child{
  font-size:.9375rem;
  font-weight:var(--wb-w-medium);
  color:var(--wb-slate-700);
}

.wb-steps-box{
  margin-top:var(--wb-s-8);
  padding:var(--wb-s-6);
  border-radius:var(--wb-r-card);
  background:var(--wb-slate-050);
  border:1px solid var(--wb-slate-200);
}
.wb-steps-box__title{
  font-size:.875rem;
  color:var(--wb-slate-600);
  margin-bottom:var(--wb-s-3);
}
.wb-steps-box__title strong{color:var(--wb-slate-900)}
.wb-steps-box__list{display:flex;flex-direction:column;gap:var(--wb-s-3)}
.wb-steps-box__item{
  padding:var(--wb-s-4);
  border-radius:var(--wb-r-3);
  background:var(--wb-paper);
  border:1px solid var(--wb-slate-200);
}
.wb-steps-box__item p:first-child{
  font-size:.875rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-900);
  margin-bottom:var(--wb-s-1);
}
.wb-steps-box__item p:last-child{
  font-size:.75rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
}
.wb-steps-box__foot{
  font-size:.75rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-500);
  margin-top:var(--wb-s-4);
}

/* ------------------------------------------------------------ formulario -- */
/* Campos a 38px según el sistema; los del sitio respiran un poco más (44). */

.wb-form-card{
  padding:var(--wb-s-8);
  border-radius:var(--wb-r-card-lg);
  box-shadow:var(--wb-sh-4);
}
.wb-form-card h3{
  font-size:1.5rem;
  font-weight:var(--wb-w-black);
  letter-spacing:-.015em;
  color:var(--wb-slate-900);
  margin-bottom:var(--wb-s-6);
}
.wb-form{display:flex;flex-direction:column;gap:var(--wb-s-4)}

.wb-input,.wb-select,.wb-textarea{
  width:100%;
  font:inherit;
  font-size:.9375rem;
  color:var(--wb-slate-900);
  background:var(--wb-paper);
  border:1px solid var(--wb-slate-200);
  border-radius:var(--wb-r-cta);
  padding:var(--wb-s-3) var(--wb-s-4);
  transition:border-color var(--wb-dur) var(--wb-ease);
}
.wb-input,.wb-select{height:44px}
.wb-textarea{resize:vertical;min-height:88px;line-height:var(--wb-t-lead-lh)}
.wb-input::placeholder,.wb-textarea::placeholder{color:var(--wb-slate-400)}
.wb-input:hover,.wb-select:hover,.wb-textarea:hover{border-color:var(--wb-slate-300)}
.wb-input:focus-visible,.wb-select:focus-visible,.wb-textarea:focus-visible{
  border-color:var(--wb-primary);
  outline:2px solid var(--wb-primary);
  outline-offset:1px;
}
.wb-select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:var(--wb-s-10);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--wb-s-3) center;
  background-size:1.25em 1.25em;
}

.wb-consent{
  display:flex;
  align-items:flex-start;
  gap:var(--wb-s-3);
  font-size:.75rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  cursor:pointer;
}
.wb-consent input{
  margin-top:2px;
  width:16px;height:16px;
  accent-color:var(--wb-primary);
  flex-shrink:0;
}

.wb-form__note{
  font-size:.75rem;
  color:var(--wb-slate-500);
  text-align:center;
}
.wb-form__disclaimer{
  font-size:.75rem;
  line-height:var(--wb-t-lead-lh);
  color:var(--wb-slate-600);
  border-top:1px solid var(--wb-slate-200);
  padding-top:var(--wb-s-3);
}

/* Honeypot: fuera de pantalla, nunca display:none (algunos bots lo detectan). */
.wb-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* Mensaje de resultado del envío. Lo inserta el script de la página. */
.wb-form-msg{
  margin-top:var(--wb-s-4);
  padding:var(--wb-s-4);
  border-radius:var(--wb-r-cta);
  text-align:center;
  font-weight:var(--wb-w-semibold);
  font-size:.9375rem;
  border:1px solid transparent;
}
.wb-form-msg--ok{
  color:var(--wb-ok);
  background:var(--wb-ok-soft);
  border-color:var(--wb-ok-line);
}
.wb-form-msg--error{
  color:var(--wb-danger);
  background:var(--wb-danger-soft);
  border-color:var(--wb-danger-line);
}

/* ------------------------------------------------------ documento legal --- */
/* Privacidad y términos. Texto largo: el sistema manda Noto Sans y ancho de
   prosa, no la caja de 80rem del resto del sitio. Los elementos se estilan por
   etiqueta para que el marcado quede limpio y el redactor no tenga que poner
   clases en cada párrafo. */

.wb-doc{
  max-width:var(--wb-prose-max);
  margin-inline:auto;
  padding:var(--wb-s-16) var(--wb-s-8) var(--wb-s-24);
  font-family:var(--wb-font-long);
  color:var(--wb-slate-600);
  line-height:var(--wb-t-lead-lh);
}
.wb-doc h1{
  font-family:var(--wb-font-display);
  font-size:var(--wb-t-section);
  line-height:1.15;
  font-weight:var(--wb-w-black);
  letter-spacing:var(--wb-t-hero-ls);
  color:var(--wb-slate-900);
  margin-bottom:var(--wb-s-3);
  text-wrap:pretty;
}
.wb-doc h2{
  font-family:var(--wb-font-display);
  font-size:1.25rem;
  font-weight:var(--wb-w-black);
  letter-spacing:-.015em;
  color:var(--wb-slate-900);
  margin:var(--wb-s-10) 0 var(--wb-s-3);
  scroll-margin-top:calc(64px + var(--wb-s-4));
  text-wrap:pretty;
}
.wb-doc h3{
  font-family:var(--wb-font-display);
  font-size:1rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-900);
  margin:var(--wb-s-6) 0 var(--wb-s-2);
}
.wb-doc p{margin-bottom:var(--wb-s-4)}
.wb-doc strong{color:var(--wb-slate-900);font-weight:var(--wb-w-black)}
.wb-doc a{text-decoration:underline}
.wb-doc ul,.wb-doc ol{margin:0 0 var(--wb-s-4);padding-left:var(--wb-s-6)}
.wb-doc ul{list-style:disc}
.wb-doc ol{list-style:decimal}
.wb-doc li{margin-bottom:var(--wb-s-2)}
.wb-doc li::marker{color:var(--wb-slate-400)}

/* Fecha de vigencia, bajo el título. */
.wb-doc__meta{
  font-size:.875rem;
  color:var(--wb-slate-500);
  margin-bottom:var(--wb-s-8) !important;
}
/* Caja destacada dentro del documento. Tarjeta del sistema, no borde de color. */
.wb-doc__box{
  border:1px solid var(--wb-slate-200);
  border-radius:var(--wb-r-card);
  background:var(--wb-paper);
  padding:var(--wb-s-6);
  margin-block:var(--wb-s-6);
  box-shadow:var(--wb-sh-1);
}
.wb-doc__box>*:last-child{margin-bottom:0}
.wb-doc__box-title{
  font-family:var(--wb-font-display);
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-900);
  margin-bottom:var(--wb-s-2) !important;
}
.wb-doc__small{font-size:.875rem}

/* Cabecera reducida de las páginas legales: marca + una salida, sin navegación. */
.wb-header--doc .wb-header__bar{justify-content:space-between}
.wb-header--doc .wb-back{
  font-size:.875rem;
  font-weight:var(--wb-w-medium);
  color:var(--wb-slate-600);
  display:inline-flex;
  align-items:center;
  gap:var(--wb-s-1);
}
.wb-header--doc .wb-back:hover{color:var(--wb-primary)}
.wb-header--doc .wb-back .wb-icon{font-size:18px}

/* -------------------------------------------------------------- footer ---- */

.wb-footer{
  border-top:1px solid var(--wb-slate-200);
  background:var(--wb-slate-050);
  padding-block:var(--wb-s-12);
  text-align:center;
}
.wb-footer .wb-brand{justify-content:center;margin-bottom:var(--wb-s-4)}
.wb-footer__nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--wb-s-6);
  margin-bottom:var(--wb-s-4);
}
.wb-footer__nav a{
  font-size:.875rem;
  font-weight:var(--wb-w-medium);
  color:var(--wb-slate-600);
}
.wb-footer__nav a:hover{color:var(--wb-primary)}
.wb-footer__legal{font-size:.875rem;color:var(--wb-slate-500)}
.wb-footer__contact{font-size:.8125rem;color:var(--wb-slate-500);margin-top:var(--wb-s-2)}

/* ------------------------------------------------------- flotante WA ------ */

.wb-wa-float{
  position:fixed;
  bottom:var(--wb-s-5);
  right:var(--wb-s-5);
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:var(--wb-s-2);
  padding:var(--wb-s-3) var(--wb-s-5);
  border-radius:var(--wb-r-pill);
  background:var(--wb-whatsapp);
  color:var(--wb-text-inverse);
  font-weight:var(--wb-w-bold);
  font-size:.9375rem;
  box-shadow:var(--wb-sh-4);
  transition:background-color var(--wb-dur-fast) var(--wb-ease),
             transform var(--wb-dur-fast) var(--wb-ease);
}
.wb-wa-float:hover{
  background:var(--wb-whatsapp-hover);
  color:var(--wb-text-inverse);
  transform:translateY(var(--wb-lift));
}
.wb-wa-float svg{width:26px;height:26px;fill:currentColor}

/* ============================================================ landing ===== */
/* Landing del producto (Webbidor Listo). Equivalencias con el UI kit
   ui_kits/landing/ y components/product/ del sistema:

     .wb-i              core/Icon.jsx (set de trazo del producto, vía <symbol>)
     .wb-ch             product/ChannelIcon.jsx
     .wb-auto-card      product/AutomationCard.jsx
     .wb-badge          core/Badge.jsx
     .wb-chip           LandingCatalogo.jsx (chips de canal con conteo)
     .wb-activity       LandingHero.jsx (tarjeta "Hoy en tu panel")
     .wb-step-card      ComoFunciona.jsx
     .wb-cierre         LandingPreguntas.jsx (Cierre)
     .wb-field*         forms/Field.jsx · Input.jsx (prefix)
     .wb-contact-aside  LandingContacto.jsx
     .wb-wa-bubble      LandingContacto.jsx (WhatsAppBubble)
     .wb-footer--row    LandingFooter.jsx */

/* Iconos de trazo del producto. El sprite vive al inicio del <body> y cada uso
   es <svg class="wb-i wb-i--16"><use href="#wbi-user"/></svg>. El grosor baja
   con el tamaño, como hace Icon.jsx. */
.wb-i{
  display:block;
  flex-shrink:0;
  width:18px;height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wb-i--14{width:14px;height:14px;stroke-width:1.9}
.wb-i--16{width:16px;height:16px;stroke-width:1.8}
.wb-i--19{width:19px;height:19px;stroke-width:1.6}
.wb-i--22{width:22px;height:22px;stroke-width:1.6}
.wb-i--26{width:26px;height:26px;stroke-width:1.5}

/* Botón sobre fondo oscuro (banda de cierre). */
.wb-btn--inverse{
  background:transparent;
  color:var(--wb-text-inverse);
  border-color:var(--wb-slate-600);
}
.wb-btn--inverse:hover{
  color:var(--wb-text-inverse);
  border-color:var(--wb-slate-400);
  transform:translateY(var(--wb-lift));
}

/* Cabecera de la landing: sesión + Empezar al extremo derecho. */
.wb-header__actions{display:inline-flex;align-items:center;gap:var(--wb-s-3)}
.wb-header__actions .wb-btn{height:38px}
.wb-header__actions .wb-btn--primary{padding-inline:var(--wb-s-5)}
.wb-nav-mobile .wb-btn{margin-top:var(--wb-s-2)}

/* Hero sobre gris, con la misma rejilla desvanecida. */
.wb-hero--slate{background:var(--wb-slate-050)}

/* Tarjeta "Hoy en tu panel": filas de actividad con punto de estado. */
.wb-activity{display:flex;flex-direction:column;gap:var(--wb-s-2)}
.wb-activity__row{
  display:flex;
  align-items:flex-start;
  gap:var(--wb-s-3);
  border-radius:var(--wb-r-3);
  border:1px solid var(--wb-slate-200);
  background:var(--wb-slate-050);
  padding:var(--wb-s-3) var(--wb-s-4);
}
.wb-activity__dot{
  width:var(--wb-s-2);height:var(--wb-s-2);
  border-radius:50%;
  margin-top:6px;
  flex-shrink:0;
  background:var(--wb-ok);
}
.wb-activity__dot--warn{background:var(--wb-warn)}
.wb-activity__dot--err{background:var(--wb-danger)}
.wb-activity__body{flex:1;min-width:0}
.wb-activity__title{
  display:block;
  font-size:.875rem;
  font-weight:var(--wb-w-semibold);
  color:var(--wb-slate-800);
}
.wb-activity__desc{display:block;font-size:.8125rem;color:var(--wb-slate-500)}
.wb-activity__when{font-size:.75rem;color:var(--wb-slate-400);white-space:nowrap}
.wb-note--stat{
  margin-top:var(--wb-s-4);
  font-size:.875rem;
  font-weight:var(--wb-w-semibold);
  color:var(--wb-primary);
}

/* Cuadro de icono de canal: el único lugar donde vive el color del canal. */
.wb-ch{
  width:38px;height:38px;
  flex-shrink:0;
  border-radius:var(--wb-r-2);
  display:grid;
  place-items:center;
  background:var(--wb-ch-whatsapp-soft);
  color:var(--wb-ch-whatsapp);
}
.wb-ch--sm{width:28px;height:28px}
.wb-ch--em{background:var(--wb-ch-email-soft);color:var(--wb-ch-email)}
.wb-ch--so{background:var(--wb-ch-social-soft);color:var(--wb-ch-social)}
.wb-ch--da{background:var(--wb-ch-data-soft);color:var(--wb-ch-data)}
.wb-ch--we{background:var(--wb-ch-web-soft);color:var(--wb-ch-web)}

/* Chips de canal con conteo, centrados sobre la rejilla del catálogo. */
.wb-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--wb-s-3);
  margin-bottom:var(--wb-s-10);
}
.wb-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--wb-s-2);
  padding:var(--wb-s-2) var(--wb-s-4) var(--wb-s-2) var(--wb-s-2);
  border-radius:var(--wb-r-pill);
  border:1px solid var(--wb-slate-200);
  background:var(--wb-slate-050);
}
.wb-chip__name{font-size:.875rem;font-weight:var(--wb-w-semibold);color:var(--wb-slate-700)}
.wb-chip__count{font-size:.8125rem;color:var(--wb-slate-400)}

/* Tarjeta de automatización: la misma que el usuario ve dentro de la app. */
.wb-auto-card{
  display:flex;
  flex-direction:column;
  gap:var(--wb-s-3);
  padding:var(--wb-s-5);
  border-radius:var(--wb-r-3);
  background:var(--wb-paper);
  border:1px solid var(--wb-slate-200);
  box-shadow:var(--wb-sh-1);
}
.wb-auto-card__head{display:flex;align-items:flex-start;gap:var(--wb-s-3)}
.wb-auto-card__title{flex:1;min-width:0}
.wb-auto-card h3{
  font-size:var(--wb-t-h3);
  line-height:var(--wb-t-h3-lh);
  letter-spacing:var(--wb-t-h3-ls);
  font-weight:var(--wb-w-bold);
  color:var(--wb-slate-900);
}
.wb-auto-card__price{
  margin-top:var(--wb-s-1);
  font-size:var(--wb-t-small);
  color:var(--wb-slate-500);
  font-variant-numeric:tabular-nums;
}
.wb-auto-card p{
  font-size:var(--wb-t-body);
  line-height:var(--wb-t-body-lh);
  color:var(--wb-slate-600);
  text-wrap:pretty;
}
.wb-auto-card__foot{
  display:flex;
  align-items:center;
  gap:var(--wb-s-3);
  margin-top:auto;
  padding-top:2px;
}
.wb-auto-card__meta{font-size:var(--wb-t-xs);color:var(--wb-slate-400)}
.wb-auto-card__foot .wb-btn{margin-left:auto}

/* Etiqueta corta de estado ("Nueva"). */
.wb-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px var(--wb-s-2);
  border-radius:var(--wb-r-1);
  background:var(--wb-primary-soft);
  color:var(--wb-primary-ink);
  border:1px solid var(--wb-primary-line);
  font-size:var(--wb-t-label);
  font-weight:var(--wb-w-bold);
  line-height:1.5;
  letter-spacing:var(--wb-t-label-ls);
  text-transform:uppercase;
  white-space:nowrap;
}

/* Par de CTA que cierra una sección, separado de lo anterior. */
.wb-cta-row--top{margin-top:var(--wb-s-10)}

/* Pasos de "Cómo funciona": tarjeta blanca con número en círculo. */
.wb-grid--4{grid-template-columns:repeat(4,1fr)}
.wb-step-card{
  background:var(--wb-paper);
  border:1px solid var(--wb-slate-200);
  border-radius:var(--wb-r-4);
  padding:var(--wb-s-6);
}
.wb-step-card__num{
  width:40px;height:40px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--wb-primary);
  color:var(--wb-text-inverse);
  font-weight:var(--wb-w-black);
  margin-bottom:var(--wb-s-4);
}
.wb-step-card h3{
  margin-bottom:var(--wb-s-2);
  font-size:1.125rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-900);
}
.wb-step-card p{
  font-size:.9375rem;
  line-height:1.6;
  color:var(--wb-slate-600);
  text-wrap:pretty;
}

/* Banda oscura de cierre. No es modo oscuro: es un tratamiento de sección. */
.wb-cierre{
  padding-block:var(--wb-s-20);
  background:var(--wb-slate-900);
  text-align:center;
}
.wb-cierre h2{
  font-size:var(--wb-t-section);
  line-height:1.15;
  font-weight:var(--wb-w-black);
  letter-spacing:var(--wb-t-hero-ls);
  color:var(--wb-text-inverse);
  text-wrap:pretty;
}
.wb-cierre .wb-cta-row{margin-top:var(--wb-s-8)}

/* Contacto de la landing: formulario con etiquetas + lateral de WhatsApp. */
.wb-contact-head{text-align:center;margin-bottom:var(--wb-s-10)}
.wb-contact-head h2{
  font-size:var(--wb-t-section);
  line-height:1.15;
  font-weight:var(--wb-w-black);
  letter-spacing:var(--wb-t-hero-ls);
  color:var(--wb-slate-900);
  margin-bottom:var(--wb-s-2);
  text-wrap:pretty;
}
.wb-contact-head p{font-size:1.125rem;color:var(--wb-slate-600);text-wrap:pretty}
.wb-contact-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:var(--wb-s-6);
  align-items:start;
}
.wb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--wb-s-4)}
.wb-form-grid>*{min-width:0}
.wb-form-grid__full{grid-column:1 / -1}

.wb-field{display:flex;flex-direction:column;gap:var(--wb-s-2)}
.wb-field__label{
  font-size:.875rem;
  font-weight:var(--wb-w-bold);
  letter-spacing:-.006em;
  color:var(--wb-slate-700);
}
.wb-field__hint{font-size:.75rem;color:var(--wb-slate-500)}

/* Campo con prefijo fijo (+57). */
.wb-input-group{display:flex}
.wb-input-group__prefix{
  height:44px;
  display:flex;align-items:center;
  padding-inline:var(--wb-s-3);
  border:1px solid var(--wb-slate-200);
  border-right:0;
  border-radius:var(--wb-r-cta) 0 0 var(--wb-r-cta);
  background:var(--wb-slate-050);
  font-size:.9375rem;
  font-weight:var(--wb-w-semibold);
  color:var(--wb-slate-500);
  flex-shrink:0;
}
.wb-input-group .wb-input{border-radius:0 var(--wb-r-cta) var(--wb-r-cta) 0}

/* Confirmación de envío: sustituye al formulario. */
.wb-form-success{
  padding:var(--wb-s-8);
  border-radius:var(--wb-r-4);
  background:rgb(19 127 236 / .05);
  border:1px solid rgb(19 127 236 / .2);
  text-align:center;
}
.wb-form-success .wb-icon{font-size:36px;color:var(--wb-primary);display:inline-block}
.wb-form-success p{
  margin-top:var(--wb-s-3);
  font-size:1.125rem;
  font-weight:var(--wb-w-black);
  color:var(--wb-slate-900);
}

.wb-contact-aside{
  display:flex;
  flex-direction:column;
  gap:var(--wb-s-3);
  padding:var(--wb-s-6);
  border-radius:var(--wb-r-4);
  border:1px solid var(--wb-slate-200);
  background:var(--wb-slate-050);
}
.wb-contact-aside__icon{
  width:44px;height:44px;
  border-radius:var(--wb-r-3);
  display:grid;place-items:center;
  background:var(--wb-whatsapp);
  color:var(--wb-text-inverse);
}
.wb-contact-aside h3{font-size:1.25rem;font-weight:var(--wb-w-black);color:var(--wb-slate-900)}
.wb-contact-aside p{font-size:.9375rem;line-height:1.6;color:var(--wb-slate-600);text-wrap:pretty}
.wb-contact-aside .wb-btn{margin-top:var(--wb-s-1)}
.wb-contact-aside__hours{font-size:.8125rem;color:var(--wb-slate-500)}

/* Pie en una fila: marca · enlaces · contacto. */
.wb-footer--row{padding-block:var(--wb-s-10);text-align:left}
.wb-footer--row .wb-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--wb-s-6);
}
.wb-footer--row .wb-brand{margin-bottom:0}
.wb-footer--row .wb-brand__mark{width:32px;height:32px}
.wb-footer--row .wb-brand__word{font-size:1.125rem}
.wb-footer--row .wb-footer__nav{margin-bottom:0}
.wb-footer--row .wb-footer__contact{margin-top:0}

/* Burbuja de WhatsApp: círculo fijo abajo a la derecha. */
.wb-wa-bubble{
  position:fixed;
  right:var(--wb-s-6);
  bottom:var(--wb-s-6);
  z-index:60;
  width:56px;height:56px;
  border-radius:var(--wb-r-pill);
  display:grid;place-items:center;
  background:var(--wb-whatsapp);
  color:var(--wb-text-inverse);
  box-shadow:var(--wb-sh-4);
  transition:background-color var(--wb-dur-fast) var(--wb-ease),
             transform var(--wb-dur-fast) var(--wb-ease);
}
.wb-wa-bubble:hover{
  background:var(--wb-whatsapp-hover);
  color:var(--wb-text-inverse);
  transform:translateY(var(--wb-lift));
}

/* ========================================================== responsive ==== */
/* Medianas literales: salen de --wb-bp-grid (960) y --wb-bp-mobile.
   var() no funciona dentro de @media. */

@media (max-width:1100px){
  .wb-grid--3,.wb-grid--3-lg{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:960px){
  .wb-container{padding-inline:var(--wb-s-6)}
  .wb-section{padding-block:var(--wb-s-16)}

  .wb-nav{display:none}
  .wb-burger{display:inline-flex}
  .wb-header__cta{display:none}
  .wb-nav-mobile[data-open="true"]{display:flex}

  .wb-hero{padding-block:var(--wb-s-12) var(--wb-s-16)}
  .wb-hero__grid{grid-template-columns:1fr;gap:var(--wb-s-10)}
  .wb-hero__halo{display:none}

  .wb-contact{grid-template-columns:1fr;gap:var(--wb-s-10)}
  .wb-form-card{padding:var(--wb-s-6)}
}

@media (max-width:720px){
  .wb-grid--3,.wb-grid--2,.wb-grid--3-lg{grid-template-columns:1fr}
  .wb-calc__fields{grid-template-columns:1fr;gap:var(--wb-s-5)}
  .wb-calc__value{font-size:2.25rem}
  .wb-section-head{margin-bottom:var(--wb-s-10)}
  .wb-price-card,.wb-profile-card{padding:var(--wb-s-6)}
  .wb-hero__cta .wb-btn{width:100%}
  .wb-wa-float span{display:none}
  .wb-wa-float{padding:var(--wb-s-4)}
}

/* Landing del producto. */
@media (max-width:1100px){
  .wb-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .wb-header__actions{display:none}
  .wb-contact-grid{grid-template-columns:1fr;gap:var(--wb-s-10)}
}
@media (max-width:720px){
  .wb-grid--4{grid-template-columns:1fr}
  .wb-form-grid{grid-template-columns:1fr}
  .wb-form-grid__full{grid-column:auto}
  .wb-cierre .wb-cta-row .wb-btn{width:100%}
  .wb-footer--row,
  .wb-footer--row .wb-container{flex-direction:column;align-items:center;text-align:center}
}