/* Formulario de contacto: usa la ventana .ck de footer.css (cristal claro, X, velo) */
.lead-dialog .lead { width: min(620px, calc(100vw - 32px)); }
.lead__form, .lead__done { display: grid; gap: 0; }
.lead__plan { margin: -6px 0 18px; text-align: center; font: 400 14px/1.5 var(--font-copy); color: #555555; }
.lead__plan strong { color: #333333; font-weight: 700; }
.lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
/* Un aviso largo bajo un campo (el del teléfono, Parte 33f) alarga la fila: el campo vecino se queda arriba, no se estira */
.lead__grid > .field { align-content: start; }
.lead__wide { grid-column: 1 / -1; }
.lead__consent { margin-top: 18px; }
.lead__actions { display: flex; justify-content: center; margin-top: 22px; }
.lead__actions .cta { min-width: 240px; }
.lead__actions .cta:disabled { opacity: .6; cursor: progress; }
.lead__status { min-height: 1.4em; margin: 12px 0 0; text-align: center; font: 500 14px/1.45 var(--font-copy); color: #333333; }
.lead__status:empty { display: none; }
.lead__status.is-error {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; text-align: left;
  font: 400 14px/1.5 var(--font-copy); color: #333333; background: #EBF9FC; border: 1px solid #C5E9F1; border-radius: 12px;
}
.lead__status.is-error::before {
  content: '!'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px;
  border-radius: 50%; background: #333333; color: #FFFFFF; font: 700 12px/1 var(--font-heading);
}
.lead__done { padding-block: 24px 8px; text-align: center; }
.lead__done .ck__title:focus { outline: none; }
.lead-dialog .field label { font: 600 13.5px/1.2 var(--font-heading); color: #333333; }
.lead-dialog .field :is(input[type="text"], input[type="email"], input[type="tel"], select) {
  height: 50px; width: 100%; font: 400 16px/1 var(--font-copy); color: #333333;
  background: rgba(255,255,255,.92); border: 1px solid #CFCFCF; border-radius: 12px;
}
.lead-dialog .field select { padding-right: 12px; }
.lead-dialog .field :is(input, select):focus-visible { outline: 3px solid rgba(255,102,0,.45); outline-offset: 1px; border-color: #CC5500; }
.lead-dialog .check { font: 400 14.5px/1.45 var(--font-copy); color: #333333; }
.lead-dialog .check a { color: #CC5500; text-underline-offset: 3px; }

.field { display: grid; gap: 8px; }
.field label, .field .label { font: 600 .875rem/1.2 var(--font-display); letter-spacing: .02em; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select {
  width: 100%; height: 50px; padding-inline: 14px;
  font: 400 1rem/1 var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.field select { width: auto; padding-right: 8px; }
.field select option { color: #111; }
.field :is(input, select):focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field .phone { display: grid; gap: 8px; grid-template-columns: auto 1fr; }
.error { min-height: 1.2em; font-size: .875rem; line-height: 1.3; color: var(--error); }
.error:empty { display: none; }
/* Ningún error depende solo del color: el mensaje lleva un ícono y texto, y el campo un borde más grueso */
.error:not(:empty) { display: flex; gap: 6px; align-items: flex-start; font-weight: 500; }
.error:not(:empty)::before {
  content: '!'; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px;
  border-radius: 50%; background: var(--error); color: #FFFFFF; font: 700 11px/1 var(--font-heading);
}
.field [aria-invalid="true"] { border-width: 2px; }
.check:has([aria-invalid="true"]) input { outline: 2px solid var(--error); outline-offset: 2px; }

.field .check { font: 400 .9375rem/1.45 var(--font-body); letter-spacing: 0; }
.check { display: grid; gap: 12px; grid-template-columns: 20px 1fr; align-items: start; font-size: .9375rem; line-height: 1.45; cursor: pointer; }
/* La casilla queda centrada con la primera línea del texto (1lh = alto de una línea) */
.check input { width: 20px; height: 20px; margin: calc((1lh - 20px) / 2) 0 0; accent-color: var(--orange); }
/* Campo trampa contra bots: fuera de la vista y del orden de tabulación */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


[hidden] { display: none !important; }

/* Celular: pantalla completa, campos de una columna */
@media (max-width: 640px) {
  .lead-dialog .lead { width: 100vw; max-height: 100dvh; min-height: 100dvh; border-radius: 0; }
  .lead-dialog .ck__scroll { padding: 0 20px 28px; }
  .lead__grid { grid-template-columns: 1fr; }
  .lead__actions .cta { width: 100%; }
}

/* Cuadro de la lada a la izquierda del teléfono (Parte 33 a 33f): con país, solo la bandera (la lada se lee, no se ve);
   sin país, "+" en gris. Ancho fijo para la bandera o, donde el sistema no la dibuja, las letras ("PA"), más la flecha.
   Encima, un select nativo transparente del mismo tamaño: tocar el cuadro abre la lista de países (y funciona con teclado) */
.lead-dialog .phone__lada {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 68px; height: 50px; padding-inline: 8px 22px;
  font: 600 16px/1 var(--font-copy); white-space: nowrap; overflow: hidden;
  color: #333333; background: #F4F4F4; border: 1px solid #CFCFCF; border-radius: 12px;
}
.lead-dialog .phone__lada:focus-within { outline: 3px solid rgba(255,102,0,.45); outline-offset: 1px; border-color: #CC5500; }
.lead-dialog .phone__lada:has([aria-invalid="true"]) { border: 2px solid var(--error); }
.lead-dialog .phone__flecha {
  position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none;
}
/* Bajo el teléfono (Parte 33h): "Detectamos Colombia…" como texto de apoyo (13 px, #555555, como el de la ventana)
   y el aviso "Confirma la lada…", que no bloquea: naranja oscuro de marca (#B84A00, 5.2:1 sobre blanco) con un
   triángulo, distinto del error rojo con círculo. "Usar México" es un botón de texto */
.lead-dialog .phone__detectado { margin: 0; font: 400 13px/1.4 var(--font-copy); color: #555555; }
.lead-dialog .phone__aviso { display: flex; gap: 6px; align-items: flex-start; margin: 0; font: 500 .875rem/1.3 var(--font-copy); color: #B84A00; }
.lead-dialog .phone__aviso::before {
  content: '!'; flex: none; display: grid; place-items: end center; width: 17px; height: 15px; margin-top: 1px; padding-bottom: 1px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #B84A00; color: #FFFFFF; font: 700 10px/1 var(--font-heading);
}
.lead-dialog :is(.phone__detectado, .phone__aviso):empty { display: none; }
.lead-dialog .phone__elegir {
  padding: 0; font: 600 .875rem/1.3 var(--font-copy); color: #B84A00; background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.lead-dialog .phone__elegir:hover { color: #8F3A00; }
.lead-dialog .phone__elegir:focus-visible { outline: 2px solid #CC5500; outline-offset: 2px; border-radius: 2px; }
.lead-dialog .phone__select {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
  font-size: 16px; border: 0; appearance: none;
}
.lead-dialog .phone__bandera { font-size: 18px; line-height: 1; }
.lead-dialog .phone__lada.is-empty { color: #555555; }
/* Campo obligatorio (Parte 33e): asterisco en naranja oscuro, legible sobre blanco (5.2:1); el #FF6600 no alcanza en texto chico */
.lead-dialog .field .req { color: #B84A00; }