@charset "utf-8";
/* Formulario de cotizaciones v2 — Tus Abogados y Contadores.
   Piso real de soporte: Android 4.4 WebView / iOS 9 hacia arriba en modo
   LEGIBLE Y USABLE; Chrome 108 · iOS 15.6 · Samsung 21 para los adornos.
   Reglas de escritura: lo moderno va DESPUES de una version antigua valida de
   la misma propiedad; ningun selector moderno (:has, :focus-visible) comparte
   lista por coma con uno antiguo; @supports solo envuelve mejoras; var()
   siempre con respaldo interno, mas el valor literal previo donde perderlo
   rompe algo visible. Sin JS, sin @import, sin url() externo, sin fuentes.
   PUBLICACION: formulario.css = este archivo minificado y SIN el bloque 17
   (el recibo no carga este CSS; el bloque 17 se copia al <style> de
   confirmar_celular.php). Asi medido: 25.442 bytes = 24,85 KB. */

/* === 1. TOKENS — en :root porque el dialogo vive fuera de .tayco-form-ux == */
:root{
  color-scheme:light;
  --ux-brand:#176b38;--ux-brand-hover:#10572d;--ux-brand-soft:#eaf6ee;
  --ux-ink:#17231c;--ux-muted:#526159;
  --ux-border:#7f8d85;/* 3.47:1 sobre blanco */
  --ux-border-soft:#d8e1dc;--ux-canvas:#f4f7f5;--ux-surface:#fff;
  --ux-danger:#a51d2d;--ux-danger-soft:#fff2f3;--ux-danger-ink:#771421;
  --ux-focus:#075fd8;--ux-link:#10572d;
  --ux-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ux-nav-offset:72px;/* alto aproximado de la barra fija del sitio */
}

/* === 2. VISIBILIDAD — las tres unicas reglas [hidden] del archivo =========
   El <noscript> del modo sin JS reabre las pantallas con la MISMA
   especificidad: subirla aqui mataria el modo sin JS. */
[data-ux-step-one-only][hidden]{display:none!important}
.tayco-form-ux [hidden]{display:none!important}
.ux-dialog[hidden]{display:none!important}

/* === 3. TARJETA — movil primero: sin borde ni sombra hasta 481px ========= */
.tayco-form-ux{width:100%;max-width:640px;margin:0 auto 24px;padding:24px 16px;
  border:0;border-radius:0;box-shadow:none;background:var(--ux-surface,#fff);
  color:var(--ux-ink,#17231c);
  font-family:var(--ux-font,Arial,sans-serif);font-size:16px;line-height:1.55;text-align:left}
.tayco-form-ux,.tayco-form-ux *,.tayco-form-ux *::before,.tayco-form-ux *::after{box-sizing:border-box}
/* El CSS global fija h1..h6 y p en "Poppins" (0,0,1) y esa webfont no se carga
   en ninguna parte. Esta regla (0,1,0) gana sobre cualquier selector de etiqueta. */
.tayco-form-ux *{font-family:inherit}
.tayco-form-ux button,.tayco-form-ux .ux-option,.ux-dialog button,.faq-question{
  touch-action:manipulation;-webkit-tap-highlight-color:rgba(28,107,52,.14)}
/* Prefijada primero: iOS<=14 y Samsung<=13 solo entienden la version -webkit-.
   NUNCA sobre input[type=radio] ni [type=checkbox]. */
.tayco-form-ux input[type="text"],.tayco-form-ux input[type="email"],.tayco-form-ux input[type="tel"],
.tayco-form-ux textarea,.tayco-form-ux select,.tayco-form-ux button,
.ux-dialog input[type="search"],.ux-dialog button,.faq-question{
  -webkit-appearance:none;appearance:none}

/* === 4. TITULOS ========================================================== */
.tayco-form-ux .ux-screen__title{display:block;width:100%;max-width:24em;margin:0 0 12px;padding:0;
  color:var(--ux-ink,#17231c);
  font-size:24px;/* respaldo sin clamp(): iOS 12-13.3, Samsung<=11 */
  font-size:clamp(22px,5vw,30px);font-weight:700;line-height:1.25;text-wrap:balance}
/* El JS enfoca el titulo en CADA render y no es alcanzable con Tab
   (tabindex="-1"). Base: anillo transparente, NO outline:none suelto; el
   apagado real solo dentro de @supports, junto con su sustituto. */
.tayco-form-ux .ux-screen__title:focus{outline:3px solid transparent;outline-offset:4px}
.tayco-form-ux .ux-screen__help{margin:0 0 20px;color:var(--ux-muted,#526159);font-size:16px;line-height:1.55}

/* === 5. FOCO — base valida en TODO navegador. El cambio a :focus-visible
   solo dentro de @supports; nunca outline:none fuera de ese bloque. ======== */
.tayco-form-ux button:focus,.tayco-form-ux a:focus,.ux-dialog button:focus{
  outline:3px solid #075fd8;outline:3px solid var(--ux-focus,#075fd8);outline-offset:2px}
@supports selector(:focus-visible){
  .tayco-form-ux .ux-screen__title:focus,
  .tayco-form-ux button:focus,.tayco-form-ux a:focus,.ux-dialog button:focus{outline:none}
  .tayco-form-ux .ux-screen__title:focus-visible{outline:3px solid var(--ux-focus,#075fd8);outline-offset:4px}
  .tayco-form-ux button:focus-visible,.tayco-form-ux a:focus-visible,.ux-dialog button:focus-visible{
    outline:3px solid var(--ux-focus,#075fd8);outline-offset:2px}
}

/* === 6. CAMPOS — 16px de texto y 48px de alto en la regla base (por debajo
   de 16px iOS hace zoom al enfocar); nunca dentro de @supports ni @media. == */
.tayco-form-ux .ux-field{min-width:0;margin:0 0 20px;padding:0;border:0}
/* Sin width ni float: .sr-only (label de ciudad) debe seguir midiendo 1x1px. */
.tayco-form-ux .ux-field>label,.tayco-form-ux .ux-field>legend{display:block;margin:0;padding:0;
  color:var(--ux-ink,#17231c);font-size:16px;font-weight:700;line-height:1.4}
/* En 5 de las 9 pantallas el titulo ES un <legend class="ux-screen__title">
   dentro del <fieldset class="ux-field">: la regla de arriba (0,2,1) le ganaba
   a .ux-screen__title (0,2,0) y dejaba la pregunta a 16px y pegada a las
   opciones. Esta regla (0,3,1) devuelve la jerarquia. */
.tayco-form-ux .ux-field>legend.ux-screen__title{margin:0 0 12px;
  font-size:24px;font-size:clamp(22px,5vw,30px);line-height:1.25}
.tayco-form-ux input[type="text"],.tayco-form-ux input[type="email"],.tayco-form-ux input[type="tel"],
.tayco-form-ux textarea,.tayco-form-ux select,.tayco-form-ux .ux-select-trigger{
  display:block;width:100%;min-height:48px;margin:8px 0 0;padding:12px 14px;
  border:1.5px solid #7f8d85;/* literal: el campo sigue siendo una caja sin var() */
  border:1.5px solid var(--ux-border,#7f8d85);border-radius:12px;
  background-color:#fff;color:var(--ux-ink,#17231c);font-size:16px;line-height:1.4;text-align:left;
  transition:border-color .12s linear,box-shadow .12s linear,background-color .12s linear}
.tayco-form-ux textarea{min-height:150px;line-height:1.55;resize:vertical}
/* Al quitar la apariencia nativa el select pierde su flecha: se dibuja con SVG
   en data URI. Nada de mask-image: sin soporte pintaria un rectangulo. */
.tayco-form-ux select{padding-right:44px;background-repeat:no-repeat;
  background-position:right 13px center;background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526159' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E")}
/* Acotado por TIPO: con "input:focus" a secas esta regla alcanzaba tambien a
   los radios y al checkbox de consentimiento, donde border-color no pinta y
   iOS ignora box-shadow sobre controles nativos: lo unico que quedaba era
   outline:2px solid transparent, que BORRABA el anillo del sistema. */
.tayco-form-ux input[type="text"]:focus,.tayco-form-ux input[type="email"]:focus,
.tayco-form-ux input[type="tel"]:focus,.tayco-form-ux textarea:focus,.tayco-form-ux select:focus{
  border-color:var(--ux-brand,#176b38);box-shadow:0 0 0 1px #176b38,0 0 0 5px #eaf6ee;
  box-shadow:0 0 0 1px var(--ux-brand,#176b38),0 0 0 5px var(--ux-brand-soft,#eaf6ee);
  outline:2px solid transparent;outline-offset:2px}
/* Respaldo universal de foco para radios y checkbox: :focus a secas, sin
   :has() ni :focus-visible, porque son los controles que el JS enfoca al
   fallar la validacion y los que usa el modo sin JS. #075fd8 = 5.77:1. */
.tayco-form-ux .ux-option input:focus,.tayco-form-ux .ux-consent input:focus{
  outline:3px solid #075fd8;outline:3px solid var(--ux-focus,#075fd8);outline-offset:2px}
.tayco-form-ux ::-webkit-input-placeholder{color:#69766f}/* 4.75:1 sobre #fff */
.tayco-form-ux ::placeholder{color:#69766f;opacity:1}
.tayco-form-ux .ux-hint,.tayco-form-ux .ux-legal,.tayco-form-ux .ux-submit-status,
.tayco-form-ux .ux-trust,.tayco-form-ux .ux-character-count{
  margin:8px 0 0;color:var(--ux-muted,#526159);font-size:14px;line-height:1.5}
.tayco-form-ux .ux-character-count{text-align:right}
.tayco-form-ux .ux-character-count.is-over-limit{color:var(--ux-danger,#a51d2d);font-weight:700}
.tayco-form-ux .ux-trust{margin-top:18px;text-align:center}
.tayco-form-ux .ux-legal{margin-top:16px;text-align:center}
.tayco-form-ux .ux-legal a{color:var(--ux-link,#10572d);text-decoration:underline}
.tayco-form-ux .ux-optional{color:var(--ux-muted,#526159);font-weight:400}
.tayco-form-ux .ux-requirements{margin:14px 0 20px;padding-left:22px;font-size:16px;line-height:1.5}
.tayco-form-ux .ux-requirements li+li{margin-top:8px}
.tayco-form-ux .ux-sr-status{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap}
/* Un correo largo o una ciudad compuesta no pueden empujar el ancho. */
.tayco-form-ux .ux-option span,.tayco-form-ux #ux-field-correo .ux-error{
  word-wrap:break-word;overflow-wrap:break-word;overflow-wrap:anywhere}

/* === 7. ERRORES — .ux-error sigue en display:none en reposo ============== */
.tayco-form-ux .ux-error{display:none;position:relative;margin:8px 0 0;padding:10px 12px 10px 38px;
  border-radius:10px;background:var(--ux-danger-soft,#fff2f3);
  color:var(--ux-danger,#a51d2d);font-size:15px;font-weight:600;line-height:1.45}
.tayco-form-ux .ux-error::before{
  content:"!";/* universal */
  content:"!" / "";/* iOS 17.4+/Chrome 77+: el lector no lo anuncia */
  position:absolute;left:12px;top:11px;width:18px;height:18px;border-radius:50%;
  background:var(--ux-danger,#a51d2d);
  color:#fff;font-size:12px;font-weight:700;line-height:18px;text-align:center}
.tayco-form-ux .ux-field.is-invalid .ux-error{display:block;animation:ux-fade-in .18s ease-out}
.tayco-form-ux .ux-field.is-invalid input,.tayco-form-ux .ux-field.is-invalid textarea,
.tayco-form-ux .ux-field.is-invalid select,.tayco-form-ux .ux-field.is-invalid .ux-select-trigger{
  border-color:var(--ux-danger,#a51d2d)}
.tayco-form-ux .ux-form__status{position:relative;margin:0 0 18px;padding:12px 14px;border-radius:8px;
  border-left:4px solid #a51d2d;border-left:4px solid var(--ux-danger,#a51d2d);
  background:var(--ux-danger-soft,#fff2f3);
  color:var(--ux-danger-ink,#771421);font-size:16px;line-height:1.45}
/* Pegajoso bajo la barra del sitio. Base en flujo normal: donde sticky no
   exista solo hay que desplazarse, nunca queda tapando un campo. */
@supports ((position:-webkit-sticky) or (position:sticky)){
  .tayco-form-ux .ux-form__status{position:-webkit-sticky;position:sticky;
    top:var(--ux-nav-offset,72px);z-index:5}
}
/* El JS mete aqui un boton de reintento y el aviso deja de ser un error.
   :has() en su propia regla: donde no exista, el aviso se queda rojo. */
.tayco-form-ux .ux-form__status:has(.ux-button--inline){border-left-color:var(--ux-border,#7f8d85);
  background:var(--ux-canvas,#f4f7f5);color:var(--ux-ink,#17231c)}

/* === 8. OPCIONES — el radio nativo NUNCA se oculta: el JS lo enfoca al
   fallar la validacion y el modo sin JS usa la validacion nativa.
   Sin gap en flex: iOS 14.0-14.4 y Samsung<=13 lo ignoran. ================= */
.tayco-form-ux .ux-options{margin-top:14px}
.tayco-form-ux .ux-options .ux-option+.ux-option{margin-top:12px}
.tayco-form-ux .ux-option{position:relative;display:flex;align-items:center;min-height:60px;margin:0;
  padding:14px 44px 14px 16px;
  border:1.5px solid #7f8d85;/* literal: la tarjeta existe aun sin var() */
  border:1.5px solid var(--ux-border,#7f8d85);border-radius:12px;
  background:#fff;color:var(--ux-ink,#17231c);font-weight:500;cursor:pointer;
  transition:border-color .12s linear,background-color .12s linear,box-shadow .12s linear}
.tayco-form-ux .ux-option input{flex:0 0 auto;width:20px;height:20px;
  margin:0 12px 0 0;/* margen, no gap */accent-color:var(--ux-brand,#176b38)}
.tayco-form-ux .ux-option span{min-width:0;font-size:16px;font-weight:500;line-height:1.4}
/* El <b> del markup ponia en NEGRITA justo las dos respuestas que descartan
   al prospecto ('abogados del Estado' y 'solo dudas'), mientras las dos que
   si convierten iban sin resaltar: la vista caia primero en las equivocadas.
   Aqui todas las respuestas pesan lo mismo. */
.tayco-form-ux .ux-option b{display:block;font-weight:inherit}
.tayco-form-ux .ux-option small{display:block;margin-top:2px;color:var(--ux-muted,#526159);
  font-size:14px;font-weight:400;line-height:1.45}
.tayco-form-ux .ux-option::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:13px;
  margin-top:-9px;border:0 solid #176b38;border:0 solid var(--ux-brand,#176b38);
  border-right-width:2.5px;border-bottom-width:2.5px;opacity:0;transform:rotate(45deg);transition:opacity .12s linear}
/* Dos reglas separadas a proposito: si :has() no se puede parsear (Chrome<105,
   iOS<15.4, Samsung<20) el navegador descarta SOLO su regla y .is-selected, que
   pone el JS, sigue pintando el estado. Agrupadas por coma se perdian las dos. */
.tayco-form-ux .ux-option.is-selected{border-color:var(--ux-brand,#176b38);
  background:var(--ux-brand-soft,#eaf6ee);
  box-shadow:inset 0 0 0 1px var(--ux-brand,#176b38)}
.tayco-form-ux .ux-option.is-selected::after{opacity:1}
.tayco-form-ux .ux-option:has(input:checked){border-color:var(--ux-brand,#176b38);
  background:var(--ux-brand-soft,#eaf6ee);box-shadow:inset 0 0 0 1px var(--ux-brand,#176b38)}
.tayco-form-ux .ux-option:has(input:checked)::after{opacity:1}
.tayco-form-ux .ux-option:active{background:#f4f7f5}
/* Anillo de la tarjeta: MEJORA. El anillo obligatorio ya lo lleva el radio
   nativo (seccion 6), que funciona en todos los navegadores. */
.tayco-form-ux .ux-option:has(> input:focus-visible),
.tayco-form-ux .ux-consent:has(> input:focus-visible){outline:3px solid var(--ux-focus,#075fd8);outline-offset:2px}
/* El consentimiento es un control pulsable entero y su borde tiene que verse:
   #d8e1dc daba 1.34:1 sobre blanco; #7f8d85 da 3.22:1 sobre #f4f7f5. */
.tayco-form-ux .ux-consent{display:flex;align-items:flex-start;min-height:44px;margin:4px 0 20px;
  padding:14px 16px;border:1px solid #7f8d85;border:1px solid var(--ux-border,#7f8d85);
  border-radius:12px;background:var(--ux-canvas,#f4f7f5);
  font-size:15px;font-weight:400;line-height:1.45;cursor:pointer}
.tayco-form-ux .ux-consent input{flex:0 0 auto;width:20px;height:20px;margin:1px 12px 0 0;
  accent-color:var(--ux-brand,#176b38)}

/* === 9. BOTONES — el JS reescribe textContent y disabled: nunca content:
   para la etiqueta de un boton. ============================================ */
.tayco-form-ux .ux-button{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:56px;margin:0;padding:14px 20px;border:2px solid transparent;
  border-radius:12px;background:transparent;color:var(--ux-ink,#17231c);
  font-size:16px;font-weight:700;line-height:1.25;text-align:center;cursor:pointer;
  transition:background-color .16s cubic-bezier(.2,0,0,1),border-color .16s cubic-bezier(.2,0,0,1),
    box-shadow .16s cubic-bezier(.2,0,0,1),transform .16s cubic-bezier(.2,0,0,1)}
.tayco-form-ux .ux-button:active{transform:scale(.985)}
.tayco-form-ux .ux-button--primary{
  background:#176b38;/* literal: el CTA no puede quedar transparente */
  background:var(--ux-brand,#176b38);color:#fff;box-shadow:0 6px 16px rgba(20,55,36,.18)}
.tayco-form-ux .ux-button--primary:active{background:var(--ux-brand-hover,#10572d)}
.tayco-form-ux .ux-button--primary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-left:10px;
  border:0 solid currentColor;border-top-width:2px;border-right-width:2px;transform:rotate(45deg)}
/* "Atras" es accion terciaria, pero sigue siendo una de las dos salidas del
   recorrido: 48px de alto, no el minimo estricto de 44. */
.tayco-form-ux .ux-button--secondary{min-height:48px;padding:12px 12px 12px 4px;border-color:transparent;
  background:transparent;color:var(--ux-muted,#526159);font-weight:600;box-shadow:none}
.tayco-form-ux .ux-button--secondary::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:8px;
  border:0 solid currentColor;border-left-width:2px;border-bottom-width:2px;transform:rotate(45deg)}
.tayco-form-ux .ux-button--secondary:active{color:var(--ux-ink,#17231c)}
/* Boton de reintento del aviso: tiene que leerse como pulsable. */
.tayco-form-ux .ux-form__status .ux-button--inline{min-height:48px;margin-top:12px;padding:12px 18px;
  border-color:var(--ux-brand,#176b38);background:#fff;
  color:var(--ux-link,#10572d);font-weight:700}
.tayco-form-ux .ux-form__status .ux-button--inline::before{display:none}
/* aria-busy: el giro sustituye a la flecha. Sin opacity, para que "Enviando..."
   siga legible; la opacity queda solo para [disabled] sin aria-busy. */
.tayco-form-ux .ux-button[aria-busy="true"]::after{width:16px;height:16px;margin-top:0;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;transform:none;animation:ux-spin .8s linear infinite}
.tayco-form-ux .ux-button[disabled]{cursor:wait}
.tayco-form-ux .ux-button[disabled]:not([aria-busy]){opacity:.6;cursor:not-allowed}

/* === 10. ACCIONES — en movil, columna en el MISMO orden del DOM (Atras
   arriba, Continuar abajo): WCAG 1.3.2 y 2.4.3. =========================== */
.tayco-form-ux .ux-actions{display:flex;flex-direction:column;align-items:stretch;margin-top:24px}
.tayco-form-ux .ux-actions>.ux-button+.ux-button{margin-top:10px}
.tayco-form-ux .ux-actions .ux-button--primary{width:100%}
.tayco-form-ux .ux-actions .ux-button--secondary{align-self:flex-start}

/* === 11. PROGRESO ESTATICO (div decorativo, aria-hidden) ================= */
.ux-v2-progress{position:relative;height:4px;margin:0 0 20px;border-radius:999px;
  background:var(--ux-border-soft,#d8e1dc);overflow:hidden}
.ux-v2-progress::after{content:"";position:absolute;left:0;top:0;bottom:0;width:10%;
  border-radius:999px;background:var(--ux-brand,#176b38)}
[data-ux-screen="ciudad"] .ux-v2-progress::after{width:25%}
[data-ux-screen="proposito"] .ux-v2-progress::after,
[data-ux-screen="viabilidad"] .ux-v2-progress::after{width:40%}
[data-ux-screen="urgencia"] .ux-v2-progress::after{width:55%}
[data-ux-screen="prioridad"] .ux-v2-progress::after{width:70%}
[data-ux-screen="busqueda"] .ux-v2-progress::after,
[data-ux-screen="especial"] .ux-v2-progress::after{width:85%}
[data-ux-screen="contacto"] .ux-v2-progress::after{width:95%}
/* En modo degradado las pantallas se ven apiladas y el progreso mentiria.
   OJO: sin JS el unico gancho posible DESDE AQUI es :has(); el respaldo
   universal para Opera Mini / UC / iOS<15.4 / Samsung<20 es la misma
   declaracion dentro del <style> del <noscript> de _formulario_cuerpo.php
   (sin !important y sin tocar ninguna .ux-screen). */
.tayco-form-ux[data-ux-degraded] .ux-v2-progress{display:none}
.tayco-form-ux:has(input[name="ux_sin_js"]) .ux-v2-progress{display:none}

/* === 12. PANTALLA DE BUSQUEDA (unico lugar de audacia) =================== */
.tayco-form-ux .ux-search{text-align:center}
.tayco-form-ux .ux-search .ux-screen__title{max-width:none;text-align:center}
.tayco-form-ux .ux-spinner{width:88px;height:88px;margin:8px auto 20px;
  border:6px solid #eaf6ee;border:6px solid var(--ux-brand-soft,#eaf6ee);
  border-top-color:var(--ux-brand,#176b38);
  border-radius:50%;animation:ux-spin 1.1s linear infinite}
.tayco-form-ux .ux-search-steps{width:100%;max-width:430px;margin:24px auto 0;padding:0;
  list-style:none;text-align:left}
.tayco-form-ux .ux-search-steps li{position:relative;min-height:48px;padding:10px 0 14px 44px;
  color:var(--ux-muted,#526159);font-size:16px;line-height:1.4}
.tayco-form-ux .ux-search-steps li::before{/* linea conectora entre hitos */
  content:"";position:absolute;left:15px;top:36px;bottom:0;width:2px;
  background:var(--ux-border-soft,#d8e1dc)}
.tayco-form-ux .ux-search-steps li:last-child::before{display:none}
/* El circulo es el unico portador del estado del hito: 3:1 minimo.
   #95a39b daba 2.63:1 sobre blanco; #7f8d85 da 3.47:1. */
.tayco-form-ux .ux-search-steps li span{position:absolute;left:5px;top:11px;width:24px;height:24px;
  border:2px solid #7f8d85;border:2px solid var(--ux-border,#7f8d85);border-radius:50%;background:#fff}
.tayco-form-ux .ux-search-steps li.is-active{color:var(--ux-ink,#17231c);font-weight:700}
.tayco-form-ux .ux-search-steps li.is-done{color:var(--ux-ink,#17231c)}
.tayco-form-ux .ux-search-steps li.is-active span,.tayco-form-ux .ux-search-steps li.is-done span{
  border-color:var(--ux-brand,#176b38);background:var(--ux-brand,#176b38)}
.tayco-form-ux .ux-search-steps li.is-active span::after{/* pulso: transform y opacity */
  content:"";position:absolute;left:-6px;top:-6px;width:32px;height:32px;
  border:2px solid var(--ux-brand,#176b38);border-radius:50%;animation:ux-pulse 1.6s ease-out infinite}
.tayco-form-ux .ux-search-steps li.is-done span::after{/* check dibujado */
  content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;border:0 solid #fff;
  border-right-width:2px;border-bottom-width:2px;transform:rotate(45deg)}
/* El JS muestra y oculta este aviso con el atributo hidden. */
.tayco-form-ux #ux-profile-classification-status{margin-top:14px;color:var(--ux-ink,#17231c);font-size:15px}
.tayco-form-ux #ux-profile-classification-status::before{content:"";display:inline-block;width:14px;
  height:14px;margin-right:8px;vertical-align:-2px;
  border:2px solid #d8e1dc;border:2px solid var(--ux-border-soft,#d8e1dc);
  border-top-color:var(--ux-brand,#176b38);
  border-radius:50%;animation:ux-spin .8s linear infinite}

/* === 13. CONTACTO ======================================================== */
/* El borde es la unica silueta de la pildora: #a9d8b8 sobre #eaf6ee daba
   1.43:1. Con #176b38 son 5.92:1 y se ve tambien a pleno sol. */
/* display:flex, no inline-flex: la confirmacion caia en el mismo renglon que
   la pregunta '¿A donde te contactamos?' y se leian como una sola frase. */
.tayco-form-ux .ux-contact-complete{display:flex;align-items:center;width:-webkit-fit-content;
  width:fit-content;max-width:100%;margin:0 0 14px;
  animation:ux-v2-hallazgo .22s cubic-bezier(.23,1,.32,1) both;
  padding:6px 12px 6px 6px;border:1px solid #176b38;border:1px solid var(--ux-brand,#176b38);
  border-radius:999px;background:var(--ux-brand-soft,#eaf6ee);
  color:var(--ux-brand,#176b38);font-size:15px;font-weight:700;line-height:1.35}
.tayco-form-ux .ux-contact-complete__icon{position:relative;flex:0 0 20px;width:20px;height:20px;margin-right:8px;
  animation:ux-v2-sello .26s cubic-bezier(.34,1.3,.64,1) .08s both;
  border-radius:50%;background:var(--ux-brand,#176b38);color:#fff;
  font-size:12px;font-weight:700;line-height:20px;text-align:center}
/* Un solo halo que se expande y se apaga: la senal visual de que la busqueda
   encontro algo. Dura 0,62 s; el conjunto entero termina antes de 1 s. */
.tayco-form-ux .ux-contact-complete__icon::after{content:"" / "";position:absolute;
  top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;
  border:2px solid #176b38;border:2px solid var(--ux-brand,#176b38);
  animation:ux-v2-halo .62s ease-out .3s both;pointer-events:none}
.ux-v2-phone-row{display:block}/* dos columnas a partir de 481px */

/* === 14. DIALOGO DE CIUDAD / PAIS — lo inyecta el JS en <body>, FUERA de
   .tayco-form-ux: nada de esto va anidado bajo el formulario. ============== */
.ux-dialog{position:fixed;
  top:0;right:0;bottom:0;left:0;/* universal: iOS 14 y Samsung 14 no entienden inset */
  inset:0;z-index:10050;display:flex;align-items:flex-end;justify-content:center;padding:0;
  background:rgba(8,20,13,.55);color:var(--ux-ink,#17231c);
  font-family:var(--ux-font,Arial,sans-serif);
  touch-action:manipulation}/* NO none: bloquearia el zoom de accesibilidad */
.ux-dialog *,.ux-dialog *::before,.ux-dialog *::after{box-sizing:border-box;font-family:inherit}
/* Respaldo en PORCENTAJE, no en vh: el overlay es position:fixed con top/bottom
   a 0, asi que mide el viewport VISIBLE, mientras que 1vh en iOS/Chrome iOS mide
   el viewport GRANDE (barras ocultas). Con 88vh el panel, anclado abajo, se
   desbordaba por ARRIBA -asa, franja para cerrar tocando y parte del boton
   Cerrar- y ese desborde no se recupera con el scroll interno. */
.ux-dialog__panel{display:flex;flex-direction:column;width:100%;
  max-height:88%;/* exacto en todo navegador: % del overlay fijo */
  max-height:min(88dvh,760px);/* mejora: solo si conoce min() Y dvh */
  overflow-y:auto;/* scroll propio SIEMPRE en la regla base */
  -webkit-overflow-scrolling:touch;
  padding:14px 16px 18px;/* universal */
  padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));
  border-radius:20px 20px 0 0;background:var(--ux-surface,#fff);
  color:#17231c;box-shadow:0 -8px 35px rgba(0,0,0,.18);
  animation:ux-sheet-in .18s cubic-bezier(.2,0,0,1)}
.ux-dialog__panel::before{/* asa del bottom-sheet */
  content:"";flex:0 0 auto;width:44px;height:4px;margin:0 auto 12px;border-radius:999px;background:#cfd8d2}
.ux-dialog__top{display:flex;align-items:center;flex:0 0 auto;margin-bottom:12px}
.ux-dialog__title{flex:1 1 auto;min-width:0;margin:0 12px 0 0;font-size:20px;font-weight:700;line-height:1.3}
/* 48px, no 44: es la otra salida del recorrido. */
.ux-dialog__close{position:relative;flex:0 0 48px;width:48px;height:48px;padding:0;
  border:1px solid #7f8d85;border:1px solid var(--ux-border,#7f8d85);border-radius:10px;background:#fff;
  font-size:0;color:transparent;/* la "x" llega como texto desde el JS: se dibuja el aspa */
  cursor:pointer}
.ux-dialog__close::before,.ux-dialog__close::after{content:"";position:absolute;left:50%;top:50%;
  width:18px;height:2px;margin:-1px 0 0 -9px;background:var(--ux-ink,#17231c)}
/* Prefijo obligatorio aqui: es el unico pseudo-elemento que transporta el
   significado de un control. Sin el, el boton de cerrar muestra un guion. */
.ux-dialog__close::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.ux-dialog__close::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.ux-dialog__search{flex:0 0 auto;display:block;width:100%;min-height:48px;margin:0 0 10px;
  padding:12px 14px 12px 44px;border:1.5px solid #7f8d85;border:1.5px solid var(--ux-border,#7f8d85);
  border-radius:12px;background-color:#fff;color:#17231c;font-size:16px;line-height:1.4}
.ux-dialog__search::-webkit-search-decoration,
.ux-dialog__search::-webkit-search-cancel-button{-webkit-appearance:none}
.ux-dialog__search:focus{border-color:var(--ux-brand,#176b38);
  box-shadow:0 0 0 1px #176b38,0 0 0 5px #eaf6ee;
  box-shadow:0 0 0 1px var(--ux-brand,#176b38),0 0 0 5px var(--ux-brand-soft,#eaf6ee);
  outline:2px solid transparent;outline-offset:2px}
.ux-dialog__meta{flex:0 0 auto;margin:0 0 8px;color:var(--ux-muted,#526159);font-size:14px}
/* Sin touch-action:pan-y: cancelaba el pellizco para ampliar dentro de la lista
   de ~1.100 ciudades (WCAG 1.4.4). El scroll ya lo da overflow-y y el
   encadenamiento ya lo corta overscroll-behavior. */
.ux-dialog__results{flex:1 1 auto;min-height:120px;max-height:60vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;/* mejora: iOS<=15 encadena el scroll al fondo */
  padding:6px 6px 12px}/* con los 2px anteriores el anillo de foco se cortaba */
.ux-dialog__results .ux-dialog__option+.ux-dialog__option{margin-top:8px}
.ux-dialog__option{position:relative;display:block;width:100%;min-height:56px;padding:12px 14px;
  border:1.5px solid #7f8d85;border:1.5px solid var(--ux-border,#7f8d85);
  border-radius:12px;background:#fff;color:var(--ux-ink,#17231c);
  font-size:16px;line-height:1.35;text-align:left;cursor:pointer;
  word-wrap:break-word;overflow-wrap:break-word;overflow-wrap:anywhere}
.ux-dialog__option[aria-current="true"]{padding-right:44px;border-color:var(--ux-brand,#176b38);
  background:var(--ux-brand-soft,#eaf6ee);font-weight:700}
.ux-dialog__option[aria-current="true"]::after{content:"";position:absolute;right:18px;top:50%;
  width:7px;height:13px;margin-top:-9px;border:0 solid #176b38;border:0 solid var(--ux-brand,#176b38);
  border-right-width:2.5px;border-bottom-width:2.5px;transform:rotate(45deg)}
body.ux-dialog-open{overflow:hidden}
/* Disparador que el JS crea despues del <select>: un nombre largo ya no
   envuelve a dos lineas ni salta la altura del control de 48 a ~70px. */
.tayco-form-ux .ux-select-trigger{position:relative;padding-left:44px;padding-right:44px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.tayco-form-ux .ux-select-trigger::after{content:"";position:absolute;right:17px;top:50%;
  width:9px;height:9px;margin-top:-7px;border:0 solid var(--ux-muted,#526159);
  border-right-width:2px;border-bottom-width:2px;transform:rotate(45deg)}
/* Lupa en data URI, compartida por el buscador y el disparador. Nada de
   mask-image: sin soporte dejaria un rectangulo solido tapando el texto. */
.ux-dialog__search,.tayco-form-ux .ux-select-trigger{background-repeat:no-repeat;
  background-position:14px center;background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526159' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E")}

/* === 15. CABECERA DE PERFIL — ninguna regla display sobre #titulo: el JS lo
   oculta con estilo en linea. ============================================== */
#titulo{max-width:640px;margin:0 auto 16px;padding:18px 16px;
  border:1px solid #d8e1dc;border:1px solid var(--ux-border-soft,#d8e1dc);
  border-radius:16px;background:#fff;text-align:center}
#titulo h1,#titulo p{font-family:var(--ux-font,Arial,sans-serif)}
#titulo h1{margin:0 0 8px;font-size:22px;font-weight:700;line-height:1.25}
/* El titulo va centrado, pero la lista de beneficios NO: un texto de varias
   lineas centrado obliga al ojo a buscar el inicio de cada renglon. Se acota
   el ancho y se centra el BLOQUE, no el texto. */
#titulo p{margin:0 auto;max-width:32em;color:var(--ux-ink,#17231c);
  font-size:15px;line-height:1.6;text-align:left}
#titulo hr{display:none}

/* === 16. PREGUNTAS FRECUENTES — migradas desde el <style> de la pagina. == */
.faq-section{max-width:700px;margin:0 auto;padding:0 16px 32px;font-family:var(--ux-font,Arial,sans-serif)}
.faq-section *{font-family:inherit}
.ux-v2-faq-title{margin:0 0 8px;color:var(--ux-ink,#17231c);font-size:22px;font-weight:700;
  line-height:1.3;text-align:center}
.faq-item{border-bottom:1px solid #d8e1dc;border-bottom:1px solid var(--ux-border-soft,#d8e1dc)}
.faq-item:last-child{border-bottom:none}
.faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;
  padding:16px 0;border:0;background:none;color:var(--ux-ink,#17231c);font-size:16px;font-weight:700;
  line-height:1.4;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none}
.faq-question:focus{outline:3px solid #075fd8;outline:3px solid var(--ux-focus,#075fd8);outline-offset:2px}
@supports selector(:focus-visible){
  .faq-question:focus{outline:none}
  .faq-question:focus-visible{outline:3px solid var(--ux-focus,#075fd8);outline-offset:2px}
}
.faq-icon{position:relative;flex:0 0 24px;width:24px;height:24px;margin-left:12px;
  border:2px solid #7f8d85;border:2px solid var(--ux-border,#7f8d85);border-radius:50%;
  font-size:0;color:transparent;/* el "+" llega como texto en el markup: se dibuja */
  transition:transform .18s cubic-bezier(.2,0,0,1),border-color .18s linear}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--ux-brand-hover,#10572d)}
.faq-icon::before{width:10px;height:2px;margin:-1px 0 0 -5px}
.faq-icon::after{width:2px;height:10px;margin:-5px 0 0 -1px}
.faq-item.active .faq-icon{border-color:var(--ux-brand-hover,#10572d);transform:rotate(45deg)}
/* Sin transicion en la ruta de respaldo: max-height no es transform ni opacity
   (dispara layout en cada fotograma) y corria justo en los equipos mas lentos.
   La apertura animada queda solo como mejora, con grid-template-rows. */
.faq-answer{max-height:0;overflow:hidden;padding:0}
.faq-item.active .faq-answer{max-height:1500px;padding:6px 0 16px}
@supports (grid-template-rows:0fr){
  /* grid-auto-rows ademas de grid-template-rows: con una sola pista declarada,
     un segundo parrafo o una lista caeria en una fila implicita "auto" y
     quedaria visible con el acordeon cerrado. */
  .faq-answer{display:grid;grid-template-rows:0fr;grid-auto-rows:0fr;max-height:none;padding:0;
    transition:grid-template-rows .2s cubic-bezier(.2,0,0,1)}
  .faq-answer>*{min-height:0;overflow:hidden}
  .faq-item.active .faq-answer{grid-template-rows:1fr;grid-auto-rows:auto;max-height:none;padding:6px 0 16px}
  /* Abierto: overflow visible, para que el anillo de foco de un enlace dentro
     de la respuesta no se recorte contra el borde del bloque. */
  .faq-item.active .faq-answer>*{overflow:visible}
}
.faq-answer p{margin:0;color:#35463d;font-size:15px;line-height:1.6}

/* === 18. ANIMACIONES — solo transform y opacity, todas <= 220 ms ========= */
@keyframes ux-spin{to{transform:rotate(360deg)}}
@keyframes ux-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ux-sheet-in{from{transform:translateY(14px)}to{transform:none}}
@keyframes ux-pulse{0%{transform:scale(.7);opacity:.85}100%{transform:scale(1.15);opacity:0}}
@keyframes ux-late{50%{opacity:.4}}
@keyframes ux-v2-hallazgo{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes ux-v2-sello{from{transform:scale(.62)}to{transform:scale(1)}}
@keyframes ux-v2-halo{from{opacity:.65;transform:scale(.72)}to{opacity:0;transform:scale(1.45)}}

/* === 19. PUNTERO FINO — en movil no se evalua, asi que el :hover nunca se
   queda pegado despues de un toque. ======================================== */
@media (hover:hover) and (pointer:fine){
  .tayco-form-ux .ux-option:hover{border-color:var(--ux-brand,#176b38);background:#fbfefc}
  .tayco-form-ux .ux-option.is-selected:hover{background:var(--ux-brand-soft,#eaf6ee)}
  .tayco-form-ux .ux-button--primary:hover{background:var(--ux-brand-hover,#10572d)}
  .tayco-form-ux .ux-button--secondary:hover{background:#eef2f0;color:var(--ux-ink,#17231c)}
  .tayco-form-ux input:hover,.tayco-form-ux textarea:hover,.tayco-form-ux select:hover,
  .tayco-form-ux .ux-select-trigger:hover{border-color:var(--ux-brand,#176b38)}
  .ux-dialog__option:hover{border-color:var(--ux-brand,#176b38);background:#fbfefc}
  .faq-question:hover{color:var(--ux-brand-hover,#10572d)}
  .faq-question:hover .faq-icon{border-color:var(--ux-brand-hover,#10572d)}
}

/* === 20. PANTALLAS ANCHAS — 481 y 768 =================================== */
@media (min-width:481px){
  .tayco-form-ux{padding:32px;border:1px solid var(--ux-border-soft,#d8e1dc);
    border-radius:20px;box-shadow:0 12px 34px rgba(20,55,36,.10)}
  .tayco-form-ux .ux-actions{flex-direction:row;align-items:center;justify-content:space-between}
  .tayco-form-ux .ux-actions>.ux-button+.ux-button{margin-top:0;margin-left:12px}
  .tayco-form-ux .ux-actions .ux-button--primary{width:auto;min-width:190px}
  .tayco-form-ux .ux-actions--end{justify-content:flex-end}
  .tayco-form-ux .ux-actions--start{justify-content:flex-start}
  /* Pais 40% / celular el resto. Cada control conserva su .ux-field y su id. */
  .ux-v2-phone-row{display:grid;grid-template-columns:40% 1fr;
    grid-gap:0 16px;/* Safari 10-11 solo entiende grid-gap */
    gap:0 16px;align-items:start}
}
@media (min-width:768px){
  .tayco-form-ux{padding:40px}
  .ux-dialog{align-items:center;padding:24px}
  .ux-dialog__panel{width:560px;max-width:92%;max-height:82%;max-height:min(82dvh,760px);border-radius:16px}
  .ux-dialog__panel::before{display:none}
  .ux-dialog__results{max-height:52vh}
}

/* === 21. MOVIMIENTO REDUCIDO — un unico bloque en formulario.css, solo para
   QUITAR. Los tres aros de carga pasan a color uniforme: al cortar la
   animacion sin fill-mode volvian a su estado base (tres cuartos claros y un
   cuarto verde), que se lee como un cargador colgado. ===================== */
@media (prefers-reduced-motion:reduce){
  .tayco-form-ux *,.tayco-form-ux *::before,.tayco-form-ux *::after,
  .ux-dialog *,.ux-dialog *::before,.ux-dialog *::after,
  .faq-item *,.faq-item *::before,.faq-item *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* El aro no gira, pero sigue vivo: la regla de arriba apaga toda animacion
     y un indicador de carga inmovil parece una pagina colgada. */
  .tayco-form-ux .ux-spinner,
  .tayco-form-ux #ux-profile-classification-status::before{border-color:var(--ux-brand,#176b38);
    animation:ux-late 3s ease-in-out infinite!important}
  .tayco-form-ux .ux-button[aria-busy="true"]::after{border-color:#fff}
  /* El pulso revertia a un halo verde fijo alrededor del hito activo. */
  .tayco-form-ux .ux-search-steps li.is-active span::after{display:none}
}