/* ===========================================================================
   WLP Quote Form  ·  estilos
   ---------------------------------------------------------------------------
   Este widget se inyecta dentro de un WordPress ajeno, con tema propio y
   decenas de plugins que ya pusieron reglas sobre input, button, label, h2, p
   y svg. Sobrevivir a eso obliga a dos disciplinas, y ninguna es opcional:

   1. TODO va bajo `.wlpqf`. Una sola regla sin prefijo se sale del widget y le
      repinta el sitio al cliente.

   2. Las propiedades que un tema suele forzar llevan `!important`.

   🔴 SOBRE EL `!important`: aqui NO es descuido, es la herramienta correcta.
   Un tema cualquiera escribe cosas como `svg{width:60px !important}` o
   `h2{font-family:'Times New Roman' !important}`. Contra un `!important` ajeno
   la especificidad no alcanza: solo gana otro `!important`. Se marcan SOLO las
   propiedades de las que depende que el formulario se vea y se pueda usar
   (tipografia, tamano, color, fondo, borde, radio, espaciado, alto de linea),
   no todas por costumbre.

   🔴 LO QUE NO SE DEBE HACER AQUI: neutralizar con `.wlpqf button{all:revert}`.
   Parece elegante y se muerde la cola: `.wlpqf button` tiene MAS especificidad
   (0,1,1) que `.wlpqf-btn` (0,1,0), asi que borra los estilos propios del
   widget, no los del tema. Se probo, dejo el boton gris y sin radio, y por eso
   ya no esta.

   Paleta: la misma de e/sem-hero.html. Amarillo de marca #FED500, tarjeta
   blanca, boton NEGRO. El amarillo es acento, no superficie de accion: texto
   sobre #FED500 no alcanza contraste.
   =========================================================================== */

.wlpqf{
  /* Tokens locales. Al vivir en `.wlpqf` no pueden pisar los del tema. */
  --wlpqf-yellow:#FED500;
  --wlpqf-yellow-soft:#FFF8CC;
  --wlpqf-yellow-pale:#FFFBEB;
  --wlpqf-ink:#0F0F10;
  --wlpqf-mid:#3D424A;
  --wlpqf-light:#6B7280;
  --wlpqf-line:#E5E7EB;
  --wlpqf-line-mid:#D1D5DB;
  --wlpqf-field:#F5F6F7;
  --wlpqf-error:#DC2626;
  --wlpqf-ok:#16A34A;
  --wlpqf-r-lg:16px;
  --wlpqf-r-md:9px;
  --wlpqf-r-sm:7px;
  --wlpqf-font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--wlpqf-font) !important;
  font-size:16px !important;
  color:var(--wlpqf-ink) !important;
  line-height:1.5 !important;
  letter-spacing:normal !important;
  text-align:left !important;
  text-transform:none !important;
  max-width:540px;
  margin:0 auto;
  padding:0;
  -webkit-font-smoothing:antialiased;
}

/* Higiene basica para TODO lo de adentro. Hereda la tipografia del widget y
   normaliza el modelo de caja, sin borrar nada propio. */
.wlpqf *,
.wlpqf *::before,
.wlpqf *::after{
  box-sizing:border-box !important;
  font-family:inherit !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  float:none !important;
  max-width:none;
}

/* Los contenedores no arrastran margenes ni bordes del tema. */
.wlpqf div,
.wlpqf span,
.wlpqf p,
.wlpqf h2,
.wlpqf h3,
.wlpqf label{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  width:auto;
  min-height:0;
}

/* 🔴 El tema pone `svg{width:60px !important}`. Sin este contra-important los
   iconos salen gigantes y descuadran cada fila. El tamano real de cada icono
   lo fija su propia regla mas abajo. */
.wlpqf svg{
  display:block !important;
  fill:none !important;
  width:auto;
  height:auto;
  max-width:none !important;
  vertical-align:middle;
}

/* ===========================================================================
   PIEL ADA  ·  para adapaving.org
   ---------------------------------------------------------------------------
   Solo TOKENS. Ni una regla de maquetacion se repite: el formulario es el
   mismo y cambia de color y tipografia.

   El acento es #0072CE, el azul del Simbolo Internacional de Accesibilidad.
   No es decorativo: en un sitio sobre ADA, ese azul es el que la gente asocia
   con accesibilidad, mientras que el amarillo de WLP ahi solo diria "esto lo
   puso otra empresa".

   La tipografia es Urbanist porque es la que ya carga adapaving.org. NO se
   importa desde aqui a proposito: si el sitio la trae, se usa; si no, cae a
   Inter y al sistema. Cargar una fuente propia costaria una peticion mas y una
   fuente duplicada, que es justo el peso que este plugin viene a evitar.
   =========================================================================== */
.wlpqf.wlpqf--ada{
  --wlpqf-yellow:#0072CE;        /* acento: azul de accesibilidad */
  --wlpqf-yellow-soft:#E1F0FC;
  --wlpqf-yellow-pale:#F2F8FD;
  --wlpqf-ink:#050C16;           /* el navy del propio sitio */
  --wlpqf-mid:#1E293B;
  --wlpqf-light:#64748B;
  --wlpqf-line:#E2E8F0;
  --wlpqf-line-mid:#CBD5E1;
  --wlpqf-field:#F4F7FA;
  --wlpqf-font:'Urbanist','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--wlpqf-font) !important;
}
/* 🔴 El subrayado del titular se recalcula con el acento nuevo. Sin esto se
   quedaria amarillo, porque el degradado lleva el color escrito y no hereda la
   variable del bloque de arriba. */
.wlpqf.wlpqf--ada .wlpqf-title em{
  background:linear-gradient(180deg,transparent 62%,var(--wlpqf-yellow) 62%,var(--wlpqf-yellow) 94%,transparent 94%) !important;
}
/* La pastilla superior en azul lleva texto blanco: sobre #0072CE el texto
   oscuro no alcanza contraste, al reves que sobre el amarillo. */
.wlpqf.wlpqf--ada .wlpqf-eyebrow{
  background:var(--wlpqf-yellow) !important;
  border-color:var(--wlpqf-yellow) !important;
  color:#fff !important;
}
.wlpqf.wlpqf--ada .wlpqf-op b{ color:#fff !important; }
.wlpqf.wlpqf--ada .wlpqf-check{
  background:var(--wlpqf-yellow-soft) !important;
  border-color:var(--wlpqf-yellow) !important;
}
.wlpqf.wlpqf--ada .wlpqf-check svg{ color:var(--wlpqf-yellow) !important; }
.wlpqf.wlpqf--ada input:focus{ box-shadow:0 0 0 3.5px rgba(0,114,206,.22) !important; }
.wlpqf.wlpqf--ada .wlpqf-btn:focus-visible{ outline-color:var(--wlpqf-yellow) !important; }

/* ------------------------------------------------- altura fija (1.6.0) ---- */
/* Con data-crecer="form" el JS fija la altura de REPOSO del formulario en
   --wlpqf-alto y saca la tarjeta del flujo: lo que crece (lista de condados,
   errores) se ve ENCIMA de lo de abajo en vez de empujar el hero. Sin JS, o si un
   contenedor recorta, no se pone la clase y todo sigue en el flujo como antes. */
.wlpqf.wlpqf-fija{
  position:relative !important;
  height:var(--wlpqf-alto) !important;
  z-index:40;
}
.wlpqf.wlpqf-fija > .wlpqf-card{
  position:absolute !important;
  top:0;left:0;right:0;
}

/* ------------------------------------------------------------- tarjeta ---- */
.wlpqf .wlpqf-card{
  position:relative;
  display:block !important;
  background:#fff !important;
  border:1px solid var(--wlpqf-line) !important;
  border-radius:var(--wlpqf-r-lg) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.12) !important;
  overflow:hidden;
  padding:0 !important;
  margin:0 !important;
}
.wlpqf .wlpqf-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--wlpqf-yellow) !important;
}

.wlpqf .wlpqf-head{ padding:28px 26px 0 !important;text-align:center !important; }

.wlpqf .wlpqf-eyebrow{
  display:inline-flex !important;align-items:center;gap:6px;
  font-size:10.5px !important;font-weight:800 !important;
  letter-spacing:.10em !important;text-transform:uppercase !important;
  color:var(--wlpqf-ink) !important;
  background:var(--wlpqf-yellow-soft) !important;
  border:1px solid var(--wlpqf-yellow) !important;
  padding:5px 12px !important;border-radius:100px !important;
  margin:0 0 14px !important;line-height:1.4 !important;
}
.wlpqf .wlpqf-eyebrow svg{ width:12px !important;height:12px !important;flex:none; }

.wlpqf .wlpqf-title{
  font-size:clamp(21px,5vw,27px) !important;
  font-weight:800 !important;letter-spacing:-.024em !important;
  line-height:1.2 !important;text-transform:none !important;
  margin:0 0 9px !important;color:var(--wlpqf-ink) !important;
  font-family:var(--wlpqf-font) !important;
}
/* Marcador amarillo sobre la frase que importa. */
.wlpqf .wlpqf-title em{
  font-style:normal !important;color:inherit !important;
  background:linear-gradient(180deg,transparent 62%,var(--wlpqf-yellow) 62%,var(--wlpqf-yellow) 94%,transparent 94%) !important;
}
.wlpqf .wlpqf-sub{
  font-size:13.5px !important;color:var(--wlpqf-light) !important;
  max-width:40ch;margin:0 auto !important;line-height:1.55 !important;
}

/* ---------------------------------------------------------- formulario ---- */
.wlpqf .wlpqf-body{ padding:22px 26px 26px !important; }
.wlpqf .wlpqf-field{ margin:0 0 14px !important;position:relative;padding:0 !important; }

.wlpqf .wlpqf-field label,
.wlpqf .wlpqf-body label{
  display:block !important;
  font-size:12px !important;font-weight:700 !important;
  color:var(--wlpqf-ink) !important;
  margin:0 0 6px !important;line-height:1.4 !important;
  text-transform:none !important;
}
.wlpqf .wlpqf-req{ color:var(--wlpqf-error) !important;margin-left:2px !important; }

.wlpqf input[type=text],
.wlpqf input[type=email],
.wlpqf input[type=tel]{
  display:block !important;width:100% !important;
  padding:13px 14px !important;margin:0 !important;
  font-family:var(--wlpqf-font) !important;
  /* 🔴 16px o iOS hace zoom al enfocar y descuadra la pagina entera. */
  font-size:16px !important;font-weight:500 !important;line-height:1.4 !important;
  color:var(--wlpqf-ink) !important;
  background:var(--wlpqf-field) !important;
  border:1.5px solid transparent !important;
  border-radius:var(--wlpqf-r-md) !important;
  box-shadow:none !important;
  height:auto !important;min-height:0 !important;
  text-transform:none !important;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
}
.wlpqf input::placeholder{ color:#9AA1AB !important;font-weight:400 !important;opacity:1 !important; }
.wlpqf input:focus{
  outline:none !important;
  border-color:var(--wlpqf-yellow) !important;
  background:#fff !important;
  box-shadow:0 0 0 3.5px rgba(254,213,0,.24) !important;
}
.wlpqf input.wlpqf-invalid{ border-color:var(--wlpqf-error) !important;background:#FEF2F2 !important; }
.wlpqf input.wlpqf-invalid:focus{ box-shadow:0 0 0 3.5px rgba(220,38,38,.14) !important; }

.wlpqf .wlpqf-row{ display:grid !important;grid-template-columns:1fr 1fr;gap:11px; }
@media (max-width:459px){
  .wlpqf .wlpqf-row{ grid-template-columns:1fr;gap:0; }
  .wlpqf .wlpqf-row .wlpqf-field{ margin-bottom:14px !important; }
}

/* --------------------------------------------------------- combobox ------- */
.wlpqf .wlpqf-combo{ position:relative;display:block !important; }
.wlpqf .wlpqf-combo-input{ padding-right:40px !important; }

.wlpqf .wlpqf-clear{
  position:absolute !important;right:8px;top:23px;transform:translateY(-50%);
  width:28px !important;height:28px !important;
  padding:0 !important;margin:0 !important;
  border:none !important;border-radius:50% !important;
  background:transparent !important;color:var(--wlpqf-light) !important;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:none !important;font-size:0 !important;min-width:0 !important;
  transition:background .15s ease,color .15s ease;
}
.wlpqf .wlpqf-clear.wlpqf-on{ display:flex !important; }
.wlpqf .wlpqf-clear:hover{ background:var(--wlpqf-line) !important;color:var(--wlpqf-ink) !important; }
.wlpqf .wlpqf-clear svg{ width:13px !important;height:13px !important; }

.wlpqf .wlpqf-caret{
  position:absolute !important;right:15px;top:17px;
  width:8px !important;height:8px !important;
  border-right:2px solid var(--wlpqf-light) !important;
  border-bottom:2px solid var(--wlpqf-light) !important;
  border-top:0 !important;border-left:0 !important;
  background:none !important;
  transform:rotate(45deg);pointer-events:none;
  transition:transform .18s ease,border-color .15s ease;
}
.wlpqf .wlpqf-combo.wlpqf-open .wlpqf-caret{
  transform:rotate(-135deg);top:21px;
  border-right-color:var(--wlpqf-ink) !important;
  border-bottom-color:var(--wlpqf-ink) !important;
}
.wlpqf .wlpqf-clear.wlpqf-on ~ .wlpqf-caret{ display:none !important; }

/* 🔴 LA LISTA VA EN EL FLUJO, NO EN position:absolute.
   Flotante se ve mas fina, pero dentro de un tema cualquiera acaba debajo de un
   header pegajoso o recortada por un ancestro con overflow:hidden, y el fallo
   es invisible hasta que un cliente no puede elegir su condado. En el flujo
   empuja el contenido: feo un instante, correcto siempre. El max-height con
   scroll propio acota cuanto empuja. */
.wlpqf .wlpqf-list{
  display:none;
  margin:6px 0 0 !important;padding:0 !important;
  max-height:262px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff !important;
  border:1.5px solid var(--wlpqf-line-mid) !important;
  border-radius:var(--wlpqf-r-md) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.08) !important;
  overscroll-behavior:contain;   /* que el scroll no se contagie a la pagina */
  list-style:none !important;
}
.wlpqf .wlpqf-combo.wlpqf-open .wlpqf-list{ display:block !important; }

.wlpqf .wlpqf-group{
  padding:9px 13px 5px !important;
  font-size:10px !important;font-weight:800 !important;
  letter-spacing:.09em !important;text-transform:uppercase !important;
  color:var(--wlpqf-light) !important;
  position:sticky;top:0;background:#fff !important;
  border-bottom:1px solid var(--wlpqf-line) !important;
  line-height:1.4 !important;
}

.wlpqf .wlpqf-op{
  display:flex !important;align-items:center;gap:8px;
  /* 🔴 min-height, no solo padding: por debajo de 44px un toque errado en una
     lista de renglones pegados guarda el condado de al lado, sin que nadie se
     entere. */
  min-height:46px !important;
  width:100% !important;padding:10px 13px !important;margin:0 !important;
  font-family:var(--wlpqf-font) !important;
  font-size:14px !important;font-weight:600 !important;line-height:1.35 !important;
  color:var(--wlpqf-ink) !important;
  text-align:left !important;text-transform:none !important;cursor:pointer;
  background:transparent !important;
  border:0 !important;border-bottom:1px solid #F3F4F6 !important;
  border-radius:0 !important;box-shadow:none !important;
  transition:background .1s ease;
}
.wlpqf .wlpqf-op:last-child{ border-bottom:0 !important; }
.wlpqf .wlpqf-op:hover,
.wlpqf .wlpqf-op.wlpqf-marked{ background:var(--wlpqf-yellow-soft) !important; }
.wlpqf .wlpqf-op.wlpqf-marked{ box-shadow:inset 3px 0 0 var(--wlpqf-yellow) !important; }
.wlpqf .wlpqf-op b{
  font-weight:800 !important;background:var(--wlpqf-yellow) !important;
  border-radius:2px !important;padding:0 1px !important;color:inherit !important;
}
.wlpqf .wlpqf-op .wlpqf-via{
  font-size:11.5px !important;color:var(--wlpqf-light) !important;
  font-weight:500 !important;font-style:normal !important;
  margin-left:auto !important;white-space:nowrap;
}
.wlpqf .wlpqf-op.wlpqf-free{ background:var(--wlpqf-yellow-pale) !important;font-weight:700 !important; }
.wlpqf .wlpqf-op.wlpqf-free:hover,
.wlpqf .wlpqf-op.wlpqf-free.wlpqf-marked{ background:var(--wlpqf-yellow-soft) !important; }

.wlpqf .wlpqf-empty{
  padding:14px 13px !important;font-size:13px !important;
  color:var(--wlpqf-light) !important;line-height:1.5 !important;
}

.wlpqf .wlpqf-help{
  font-size:11.5px !important;color:var(--wlpqf-light) !important;
  margin:6px 0 0 !important;line-height:1.45 !important;
}

.wlpqf .wlpqf-chosen{
  display:none;align-items:flex-start;gap:7px;
  margin:8px 0 0 !important;padding:9px 11px !important;
  background:#F0FDF4 !important;border:1px solid #BBF7D0 !important;
  border-radius:var(--wlpqf-r-sm) !important;
  font-size:12px !important;color:#166534 !important;
  font-weight:600 !important;line-height:1.45 !important;
}
.wlpqf .wlpqf-chosen.wlpqf-on{ display:flex !important; }
.wlpqf .wlpqf-chosen svg{ width:13px !important;height:13px !important;flex:none;color:var(--wlpqf-ok) !important;margin-top:2px; }
.wlpqf .wlpqf-chosen span{ color:inherit !important;font-style:normal !important; }
.wlpqf .wlpqf-chosen b{ font-weight:800 !important;color:inherit !important;background:none !important; }
/* Fuera de zona no es rechazo: ambar de aviso, no rojo. */
.wlpqf .wlpqf-chosen.wlpqf-outside{
  background:var(--wlpqf-yellow-pale) !important;
  border-color:var(--wlpqf-yellow) !important;color:#7A5B00 !important;
}
.wlpqf .wlpqf-chosen.wlpqf-outside svg{ color:#B8860B !important; }

/* -------------------------------------------------------------- errores --- */
.wlpqf .wlpqf-err{
  display:none;font-size:12px !important;color:var(--wlpqf-error) !important;
  margin:5px 0 0 !important;font-weight:600 !important;line-height:1.4 !important;
}
.wlpqf .wlpqf-err.wlpqf-on{ display:block !important; }

.wlpqf .wlpqf-fail{
  display:none;margin:0 0 14px !important;padding:12px 14px !important;
  background:#FEF2F2 !important;border:1px solid #FECACA !important;
  border-radius:var(--wlpqf-r-md) !important;
  color:#991B1B !important;font-size:13px !important;line-height:1.5 !important;
}
.wlpqf .wlpqf-fail.wlpqf-on{ display:block !important; }

/* ------------------------------------------------------------------ CTA --- */
.wlpqf .wlpqf-cta{ margin:18px 0 0 !important; }
.wlpqf .wlpqf-btn{
  position:relative;
  display:flex !important;align-items:center;justify-content:center;gap:8px;
  width:100% !important;padding:15px 20px !important;margin:0 !important;
  font-family:var(--wlpqf-font) !important;
  font-size:15.5px !important;font-weight:800 !important;
  letter-spacing:-.006em !important;line-height:1.2 !important;
  text-transform:none !important;text-decoration:none !important;
  color:#fff !important;background:var(--wlpqf-ink) !important;
  border:none !important;border-radius:var(--wlpqf-r-md) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04) !important;
  cursor:pointer;min-width:0 !important;height:auto !important;
  transition:background .15s ease,transform .12s ease,box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.wlpqf .wlpqf-btn:hover{ background:#1C1C1E !important;box-shadow:0 4px 12px rgba(0,0,0,.08) !important; }
.wlpqf .wlpqf-btn:active{ transform:translateY(1px); }
.wlpqf .wlpqf-btn:focus-visible{ outline:3px solid var(--wlpqf-yellow) !important;outline-offset:2px; }
.wlpqf .wlpqf-btn[disabled]{ opacity:.6;cursor:not-allowed;transform:none; }
.wlpqf .wlpqf-btn .wlpqf-btn-text{ color:#fff !important;font-style:normal !important; }
.wlpqf .wlpqf-btn-arrow{ width:16px !important;height:16px !important;flex:none;color:#fff !important; }

.wlpqf .wlpqf-spinner{
  display:none;width:17px !important;height:17px !important;flex:none;
  border:2.5px solid rgba(255,255,255,.3) !important;
  border-top-color:#fff !important;border-radius:50% !important;
  background:none !important;
  animation:wlpqf-spin .7s linear infinite;
}
.wlpqf .wlpqf-btn.wlpqf-sending .wlpqf-spinner{ display:block !important; }
.wlpqf .wlpqf-btn.wlpqf-sending .wlpqf-btn-arrow{ display:none !important; }
@keyframes wlpqf-spin{ to{ transform:rotate(360deg); } }

.wlpqf .wlpqf-legal{
  font-size:11px !important;color:var(--wlpqf-light) !important;
  text-align:center !important;margin:11px 0 0 !important;line-height:1.5 !important;
}

/* Honeypots fuera de pantalla. NUNCA display:none: hay bots que lo detectan y
   entonces el senuelo deja de servir. */
.wlpqf .wlpqf-hp{
  position:absolute !important;left:-9999px !important;top:-9999px !important;
  height:0 !important;width:0 !important;overflow:hidden !important;
}

/* ----------------------------------------------------------------- exito -- */
.wlpqf .wlpqf-success{ display:none;padding:40px 4px 20px !important;text-align:center !important; }
.wlpqf .wlpqf-success.wlpqf-on{ display:block !important; }
.wlpqf .wlpqf-check{
  width:56px !important;height:56px !important;margin:0 auto 18px !important;
  border-radius:50% !important;
  background:var(--wlpqf-yellow-soft) !important;
  border:2px solid var(--wlpqf-yellow) !important;
  display:flex !important;align-items:center;justify-content:center;
}
.wlpqf .wlpqf-check svg{ width:26px !important;height:26px !important;color:var(--wlpqf-ink) !important; }
.wlpqf .wlpqf-success h3{
  font-family:var(--wlpqf-font) !important;
  font-size:20px !important;font-weight:800 !important;
  margin:0 0 8px !important;letter-spacing:-.02em !important;
  text-transform:none !important;color:var(--wlpqf-ink) !important;line-height:1.25 !important;
}
.wlpqf .wlpqf-success p{
  font-size:13.5px !important;color:var(--wlpqf-light) !important;
  line-height:1.55 !important;max-width:34ch;margin:0 auto !important;
}
.wlpqf .wlpqf-ref{ margin:16px 0 0 !important;font-size:11.5px !important;color:var(--wlpqf-light) !important; }
.wlpqf .wlpqf-ref b{
  color:var(--wlpqf-ink) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;
}

/* ------------------------------------------------------------- confianza -- */
.wlpqf .wlpqf-trust{
  display:flex !important;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 18px;padding:13px 22px 16px !important;margin:0 !important;
  background:#FAFBFC !important;border-top:1px solid var(--wlpqf-line) !important;
}
.wlpqf .wlpqf-trust-item{
  display:flex !important;align-items:center;gap:5px;
  font-size:11px !important;font-weight:700 !important;
  color:var(--wlpqf-mid) !important;white-space:nowrap;line-height:1.4 !important;
}
.wlpqf .wlpqf-trust-item svg{ width:13px !important;height:13px !important;flex:none;color:var(--wlpqf-ink) !important; }

@media (max-width:459px){
  .wlpqf .wlpqf-head{ padding:24px 18px 0 !important; }
  .wlpqf .wlpqf-body{ padding:18px 18px 22px !important; }
  .wlpqf .wlpqf-trust{ padding:12px 16px 15px !important;gap:5px 13px; }
}
@media (prefers-reduced-motion:reduce){
  .wlpqf *{ transition-duration:.01ms !important;animation-duration:.01ms !important; }
}

/* ===========================================================================
   FORMULARIO DE SUSCRIPCION
   ---------------------------------------------------------------------------
   Deliberadamente mas pequeno que el de cotizacion. Un alta de boletin no
   merece una tarjeta grande con sellos de confianza: pide un correo y se quita
   de en medio. Hereda los mismos tokens, asi que cambia con la piel.
   =========================================================================== */
.wlpqf.wlpqf-sub{ max-width:620px; }

.wlpqf .wlpqf-sub-caja{
  background:var(--wlpqf-field) !important;
  border:1px solid var(--wlpqf-line) !important;
  border-radius:14px !important;
  padding:26px 26px 22px !important;
}
.wlpqf .wlpqf-sub-title{
  font-family:var(--wlpqf-font) !important;
  font-size:21px !important;font-weight:800 !important;
  line-height:1.25 !important;letter-spacing:-.02em !important;
  color:var(--wlpqf-ink) !important;margin:0 0 7px !important;
  text-transform:none !important;text-wrap:balance;
}
.wlpqf .wlpqf-sub-title em{
  font-style:normal !important;color:inherit !important;
  background:linear-gradient(180deg,transparent 62%,var(--wlpqf-yellow) 62%,var(--wlpqf-yellow) 94%,transparent 94%) !important;
}
.wlpqf .wlpqf-sub-text{
  font-size:13.5px !important;color:var(--wlpqf-light) !important;
  line-height:1.6 !important;margin:0 0 16px !important;max-width:56ch;
}

/* Una sola fila en escritorio; apilada en movil. `minmax(0,1fr)` y no `1fr`:
   con `1fr` los inputs no bajan de su ancho minimo y desbordan la caja. */
.wlpqf .wlpqf-sub-fila{
  display:grid !important;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) auto;
  gap:9px;align-items:stretch;
}
@media (max-width:559px){
  .wlpqf .wlpqf-sub-fila{ grid-template-columns:minmax(0,1fr);gap:9px; }
}
/* 🔴 La fila decide sus columnas por el ancho de SU CAJA, no de la ventana.
   Con la media query sola, en el pie de adapaving.org (columna de 188px en una
   ventana de 967px) salian tres columnas y los campos median 2.7px y 3.7px: se
   veia el titulo y el boton, y no habia donde escribir el correo. Pasa en
   cualquier columna estrecha (pie, barra lateral). */
.wlpqf.wlpqf-sub{ container-type:inline-size; }
@container (max-width:480px){
  .wlpqf .wlpqf-sub-fila{ grid-template-columns:minmax(0,1fr) !important;gap:9px; }
}
@container (max-width:300px){
  .wlpqf .wlpqf-sub-caja{ padding:18px 16px 16px !important; }
  .wlpqf .wlpqf-sub-title{ font-size:18px !important; }
}

.wlpqf .wlpqf-sub-input{
  display:block !important;width:100% !important;
  padding:12px 13px !important;margin:0 !important;
  font-family:var(--wlpqf-font) !important;
  font-size:16px !important;font-weight:500 !important;line-height:1.4 !important;
  color:var(--wlpqf-ink) !important;
  background:#fff !important;
  border:1.5px solid var(--wlpqf-line) !important;
  border-radius:var(--wlpqf-r-md) !important;
  box-shadow:none !important;height:auto !important;min-height:0 !important;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.wlpqf .wlpqf-sub-input::placeholder{ color:#9AA1AB !important;font-weight:400 !important;opacity:1 !important; }
.wlpqf .wlpqf-sub-input:focus{
  outline:none !important;border-color:var(--wlpqf-yellow) !important;
  box-shadow:0 0 0 3.5px rgba(254,213,0,.24) !important;
}
.wlpqf.wlpqf--ada .wlpqf-sub-input:focus{ box-shadow:0 0 0 3.5px rgba(0,114,206,.22) !important; }
.wlpqf .wlpqf-sub-input.wlpqf-invalid{ border-color:var(--wlpqf-error) !important;background:#FEF2F2 !important; }

.wlpqf .wlpqf-sub-btn{
  width:auto !important;white-space:nowrap;
  padding:12px 22px !important;font-size:14.5px !important;
}
@media (max-width:559px){ .wlpqf .wlpqf-sub-btn{ width:100% !important; } }

.wlpqf .wlpqf-sub-legal{
  font-size:11.5px !important;color:var(--wlpqf-light) !important;
  margin:10px 0 0 !important;line-height:1.5 !important;
}

.wlpqf .wlpqf-sub-ok{
  display:none;align-items:center;gap:9px;
  padding:16px 4px !important;
  font-size:15px !important;font-weight:700 !important;
  color:var(--wlpqf-ok) !important;line-height:1.4 !important;
}
.wlpqf .wlpqf-sub-ok.wlpqf-on{ display:flex !important; }
.wlpqf .wlpqf-sub-ok svg{ width:19px !important;height:19px !important;flex:none; }
.wlpqf .wlpqf-sub-ok span{ color:inherit !important;font-style:normal !important; }

/* Etiqueta solo para lectores de pantalla: los campos se identifican por su
   ejemplo, pero un lector de pantalla no lee placeholders de forma fiable. */
.wlpqf .wlpqf-sr{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;
}

/* ===========================================================================
   🔴 OCULTAR: SIEMPRE CON ESTA CLASE, NUNCA CON style="display:none"
   ---------------------------------------------------------------------------
   Dos razones, y las dos costaron un bug:

   1. Un estilo EN LINEA sin !important pierde contra las reglas de arriba, que
      si lo llevan (.wlpqf-eyebrow es inline-flex!important, los sellos son
      flex!important). Ocultar en linea simplemente no hacia nada.

   2. La clase repetida `.wlpqf-oculto.wlpqf-oculto` NO es un error de dedo. Es
      la misma clase dos veces: selecciona exactamente lo mismo, pero cuenta
      como dos clases y sube la especificidad a (0,3,0). Escrita una sola vez
      empataba en (0,2,0) con esas reglas, y con empate gana la que va DESPUES
      en la hoja; asi, gana siempre, sin depender del orden ni de lo que se
      agregue debajo en el futuro.

   La usan la plantilla (estado inicial) y la vista previa del panel (alternar).
   =========================================================================== */
.wlpqf .wlpqf-oculto.wlpqf-oculto{ display:none !important; }

/* ====================================================== [wlp_ada_form] ====
   El selector entre boletin y evaluacion. Vive FUERA de `.wlpqf` (no es un
   formulario), asi que declara sus propios tokens con la paleta de ADA. */
.wlpqf-elige{
  --wlpqf-e-acento:#0072CE;
  --wlpqf-e-suave:#E1F0FC;
  --wlpqf-e-tinta:#050C16;
  --wlpqf-e-medio:#475569;
  --wlpqf-e-linea:#CBD5E1;
  font-family:'Urbanist','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
  max-width:560px;
  margin:0 auto;
}
.wlpqf-elige .wlpqf-elige-pregunta{
  margin:0 0 10px !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--wlpqf-e-tinta) !important;
  text-align:center;
}
.wlpqf-elige .wlpqf-elige-opciones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  margin:0 0 16px;
  background:#fff;
  border:1px solid var(--wlpqf-e-linea);
  border-radius:12px;
}
.wlpqf-elige .wlpqf-elige-op{
  appearance:none;
  margin:0 !important;
  padding:11px 12px !important;
  min-height:44px;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--wlpqf-e-medio) !important;
  font:inherit !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  cursor:pointer;
  box-shadow:none !important;
  text-transform:none !important;
  transition:background-color .15s ease, color .15s ease;
}
.wlpqf-elige .wlpqf-elige-op:hover{ color:var(--wlpqf-e-tinta) !important; background:var(--wlpqf-e-suave) !important; }
.wlpqf-elige .wlpqf-elige-op.is-activa{ background:var(--wlpqf-e-acento) !important; color:#fff !important; }
.wlpqf-elige .wlpqf-elige-op:focus-visible{ outline:3px solid var(--wlpqf-e-tinta) !important; outline-offset:2px; }
.wlpqf-elige .wlpqf-elige-panel[hidden]{ display:none !important; }
/* ------------------------------------------------------------------------
   LOS DOS PANELES SON LA MISMA TARJETA. En la primera version la evaluacion
   era una tarjeta blanca con barra azul, sombra y etiqueta, y la suscripcion
   una caja gris plana de otro tamaño: al cambiar de opcion el bloque saltaba
   de estilo y parecian dos formularios de sitios distintos. Aqui la
   suscripcion copia la tarjeta de la evaluacion (mismos valores de
   .wlpqf-card, .wlpqf-head y .wlpqf-title). Solo dentro del selector: el
   [wlp_subscribe_form] suelto conserva su caja de siempre.
   ------------------------------------------------------------------------ */
.wlpqf-elige .wlpqf .wlpqf-sub-caja{
  position:relative;
  overflow:hidden;
  background:#fff !important;
  border:1px solid var(--wlpqf-line) !important;
  border-radius:var(--wlpqf-r-lg) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.12) !important;
  padding:28px 26px 24px !important;
  text-align:center !important;
}
.wlpqf-elige .wlpqf .wlpqf-sub-caja::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--wlpqf-yellow) !important;
}
.wlpqf-elige .wlpqf .wlpqf-sub-caja .wlpqf-eyebrow{ margin:0 0 12px !important; }
.wlpqf-elige .wlpqf .wlpqf-sub-title{
  font-size:27px !important;line-height:1.2 !important;margin:0 0 8px !important;
}
.wlpqf-elige .wlpqf .wlpqf-sub-text{
  max-width:42ch;margin-left:auto !important;margin-right:auto !important;
}
/* Campos apilados a todo el ancho, como los de la evaluacion. La fila decide
   sus columnas por el ancho de la VENTANA y la tarjeta mide 560px: en
   escritorio salian tres columnas y "First name (optional)" quedaba cortado. */
.wlpqf-elige .wlpqf .wlpqf-sub-campos{ margin-top:18px !important;text-align:left !important; }
.wlpqf-elige .wlpqf .wlpqf-sub-fila{ grid-template-columns:minmax(0,1fr) !important;gap:10px !important; }
.wlpqf-elige .wlpqf .wlpqf-sub-btn{ grid-column:1 / -1;margin-top:4px !important; }
.wlpqf-elige .wlpqf .wlpqf-sub-caja [class*="legal"]{ text-align:center !important; }
@media (max-width:559px){
  .wlpqf-elige .wlpqf .wlpqf-sub-caja{ padding:24px 18px 20px !important; }
  .wlpqf-elige .wlpqf .wlpqf-sub-title{ font-size:23px !important; }
}
@media (max-width:420px){
  .wlpqf-elige .wlpqf-elige-op{ font-size:13px !important; padding:10px 8px !important; }
}
@media (prefers-reduced-motion:reduce){
  .wlpqf-elige .wlpqf-elige-op{ transition:none; }
}