/* El formulario de contacto (2026-10-01): la MISMA pieza en la portada
   ("Hablemos") y en /contacto/. Lo pinta /assets/contacto.js; aqui solo sus
   estilos, sobre los tokens de /assets/tokens.css. Clases con prefijo ct- para
   no chocar con la hoja de ninguna de las dos paginas. */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:3rem;max-width:1100px;margin:0 auto;align-items:start;}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr;gap:2rem;}}
.ct-datos{list-style:none;display:flex;flex-direction:column;gap:1.1rem;margin:2rem 0 0;padding:0;}
.ct-datos li{display:flex;gap:.9rem;align-items:flex-start;}
.ct-ico{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--border);background:var(--white);display:grid;place-items:center;flex-shrink:0;color:var(--blue-tinta, var(--blue));}
.ct-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.ct-datos strong{display:block;font-size:.92rem;color:var(--navy);}
.ct-datos span{font-size:.85rem;color:var(--muted-marketing,#5A6A85);line-height:1.55;}

.ct-caja{background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:2rem;box-shadow:var(--shadow-card);position:relative;color:var(--navy);text-align:left;}
@media (max-width:520px){.ct-caja{padding:1.25rem;}}
.ct-fila2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media (max-width:520px){.ct-fila2{grid-template-columns:1fr;}}
.ct-campo{margin:0 0 1.1rem;padding:0;border:0;min-width:0;}
.ct-campo label,.ct-campo legend{display:block;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:.4rem;padding:0;}
.ct-opc{font-weight:500;color:var(--muted-marketing,#5A6A85);}
.ct-campo input,.ct-campo textarea{width:100%;border:1.5px solid var(--border);border-radius:12px;padding:.8rem .95rem;font:inherit;font-size:.92rem;color:var(--navy);background:var(--white);box-sizing:border-box;}
.ct-campo textarea{min-height:140px;resize:vertical;line-height:1.55;}
.ct-campo input:focus,.ct-campo textarea:focus{outline:none;border-color:var(--blue-tinta, var(--blue));box-shadow:0 0 0 3px rgba(14,165,233,.15);}
.ct-campo [aria-invalid="true"]{border-color:var(--danger);}
.ct-ayuda{display:flex;justify-content:space-between;gap:.75rem;font-size:.75rem;color:var(--muted-marketing,#5A6A85);margin-top:.35rem;}
.ct-cuenta{white-space:nowrap;}
.ct-cuenta.ct-casi{color:var(--warning-deep);font-weight:700;}
.ct-error-campo{font-size:.78rem;color:var(--danger);margin-top:.35rem;}
.ct-soy{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
@media (max-width:320px){.ct-soy{grid-template-columns:1fr;}}
.ct-soy label{display:flex;flex-direction:column;align-items:center;gap:.4rem;border:1.5px solid var(--border);border-radius:12px;padding:.8rem .5rem;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--navy);margin:0;text-align:center;position:relative;}
.ct-soy label svg{width:22px;height:22px;fill:none;stroke:var(--muted-marketing,#5A6A85);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.ct-soy input{position:absolute;opacity:0;width:1px;height:1px;}
.ct-soy label:has(input:checked){border-color:var(--blue-tinta, var(--blue));box-shadow:0 0 0 1px var(--blue);background:rgba(14,165,233,.06);}
.ct-soy label:has(input:checked) svg{stroke:var(--blue);}
.ct-soy label:has(input:focus-visible){outline:2px solid var(--blue-tinta, var(--blue));outline-offset:2px;}
/* el campo trampa: fuera de la vista y del lector de pantalla, nunca display:none */
.ct-trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.ct-priv{font-size:.75rem;color:var(--muted-marketing,#5A6A85);line-height:1.55;margin:.25rem 0 1.1rem;}
.ct-priv a{color:var(--blue-tinta, var(--blue));}
.ct-captcha{display:flex;justify-content:center;margin-bottom:.75rem;}
.ct-captcha iframe{max-width:100%;}
.ct-captcha-nota{font-size:.72rem;color:var(--muted-marketing,#5A6A85);margin:.75rem 0 0;display:flex;gap:.4rem;align-items:center;}
.ct-captcha-nota svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0;}
.ct-msg{background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.3);color:var(--danger-deep);border-radius:12px;padding:.75rem .9rem;font-size:.85rem;margin-bottom:1rem;line-height:1.5;}
.ct-boton{padding:.95rem 2.1rem;background:var(--grad-tinta, var(--grad));color:var(--white);border:none;border-radius:12px;font-size:.98rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 8px 30px rgba(14,165,233,0.35);font-family:inherit;width:100%;}
.ct-boton:disabled{opacity:.7;cursor:progress;}
.ct-giro{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:var(--white);border-radius:50%;animation:ctGiro .8s linear infinite;}
@keyframes ctGiro{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.ct-giro{animation:none;}}
.ct-enviado{text-align:center;padding:1.5rem .5rem;}
.ct-ok{width:56px;height:56px;border-radius:50%;background:rgba(22,163,74,.1);color:var(--success-tinta, var(--success));display:grid;place-items:center;margin:0 auto 1rem;}
.ct-ok svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.ct-enviado h3{font-size:1.3rem;font-weight:800;margin:0 0 .5rem;color:var(--navy);}
.ct-enviado p{color:var(--muted-marketing,#5A6A85);font-size:.92rem;line-height:1.6;max-width:380px;margin:0 auto;}
/* El telefono (pasada-movil, 2026-10-09): Safari de iOS amplia la pagina al
   enfocar un campo con letra de menos de 16 px (.ct-campo iba a .92rem), y una
   fecha de iOS no respeta width:100%. La portada y /contacto/ no cargan
   styles.css, asi que el mismo bloque vive aqui (y en publica.css).
   Sin bloquear el zoom. Lo vigila tools/prueba_pasada_movil.py. */
@media (max-width:767px), (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select, textarea{font-size:16px !important;}
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]{-webkit-appearance:none; appearance:none; min-width:0; max-width:100%; min-height:44px;}
  input::-webkit-date-and-time-value{text-align:left;}
}