/* donrros.com — formulario de contacto de la portada (#contacto).
   Va aparte de agencia.css (que genera website/scripts/empaquetar-agencia.py)
   para que el formulario se pueda mantener sin tocar la vista previa.
   Sin recursos externos ni data: (CSP default-src 'self'). */

/* `hidden` siempre gana (.cf es grid y lo anularía). */
.cf-caja [hidden],.cf[hidden]{display:none!important}
.cz-ancla{position:absolute;width:1px;height:1px;overflow:hidden}
.cz-intro .cz-cta{margin-top:22px}
.cz-lede{margin-top:22px!important;max-width:34ch;font-family:var(--sans);font-weight:400;font-size:1.08rem;line-height:1.5;color:var(--p-ink)}
.cz-intro .cz-q{margin-top:30px;max-width:420px}
.cz-alt{margin-top:22px!important;font-family:var(--sans);font-weight:500;font-size:.88rem;color:var(--p-mu)}
.cz-alt a,.cf a,.cf-hecho a,.cf-fallo a{color:var(--p-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cz-alt a:hover,.cf a:hover,.cf-hecho a:hover,.cf-fallo a:hover{text-decoration-thickness:2px}

.cf-caja{--cf-borde:#8C857A;--cf-err:#A8321F;--cf-err-bg:#FBEDE8;--cf-ok:#24603E;
  border:1px solid var(--p-ru);border-radius:20px;background:var(--p-card);padding:clamp(22px,3vw,36px)}
.cf{display:grid;gap:20px;font-family:var(--sans)}
.cf-oblig{font-size:.82rem;font-weight:500;color:var(--p-mu)}
.cf-fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.cf-campo{display:grid;gap:8px;align-content:start;min-width:0;margin:0;padding:0;border:0}
.cf label,.cf legend{font-size:.92rem;font-weight:600;color:var(--p-ink);letter-spacing:-.005em}
.cf legend{padding:0;margin-bottom:8px}
.cf-opc{font-weight:400;color:var(--p-mu)}
.cf input[type="text"],.cf input[type="email"],.cf input[type="tel"],.cf select,.cf textarea{
  box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:11px 14px;
  font:inherit;font-size:1rem;line-height:1.4;color:var(--p-ink);
  background:#fff;border:1px solid var(--cf-borde);border-radius:12px;
  transition:border-color .15s ease,box-shadow .15s ease}
.cf textarea{resize:vertical;min-height:96px}
.cf select{appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--p-ink) 50%),linear-gradient(135deg,var(--p-ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cf input:focus-visible,.cf select:focus-visible,.cf textarea:focus-visible{outline:none;border-color:var(--p-ink);box-shadow:0 0 0 3px var(--p-amw)}
.cf [aria-invalid="true"]{border-color:var(--cf-err)!important}
.cf-ayuda{font-size:.8rem;color:var(--p-mu);line-height:1.45}
.cf-err{font-size:.84rem;font-weight:600;color:var(--cf-err);line-height:1.4}
.cf-err::before{content:"! ";font-weight:700}

.cf-chips{display:flex;flex-wrap:wrap;gap:8px}
.cf-chips label{position:relative;font-weight:500}
.cf-chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.cf-chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--cf-borde);border-radius:999px;background:#fff;font-size:.92rem;color:var(--p-ink);transition:background .15s ease,color .15s ease}
.cf-chips input:checked + span{background:var(--p-ink);border-color:var(--p-ink);color:var(--p-bg)}
.cf-chips input:focus-visible + span{box-shadow:0 0 0 3px var(--p-amw);border-color:var(--p-ink)}
.cf-tipo[aria-invalid="true"] .cf-chips span{border-color:var(--cf-err)}

.cf-trampa{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

.cf-casilla{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:12px}
.cf-casilla input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--p-ink);cursor:pointer}
.cf-casilla label{font-weight:500}
.cf-casilla .cf-err{grid-column:2}

.cf-rgpd{border-top:1px solid var(--p-ru);padding-top:16px;font-size:.8rem;line-height:1.5;color:var(--p-mu)}
.cf-rgpd-t{font-weight:600;color:var(--p-ink);margin-bottom:8px!important}
.cf-rgpd dl{display:grid;gap:4px;margin:0 0 10px}
.cf-rgpd dl div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:8px}
.cf-rgpd dt{font-weight:600;color:var(--p-ink)}
.cf-rgpd dd{margin:0}
.cf-rgpd a{color:var(--p-mu)}

.cf-enviar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cf-enviar .btn{display:inline-flex;border:0;cursor:pointer;font-family:var(--sans);font-size:1rem;padding:14px 24px}
.cf-enviar .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.cf-enviar .btn:focus-visible{outline:2px solid var(--p-ink);outline-offset:3px}
.cf-plazo{font-size:.86rem;font-weight:500;color:var(--p-mu)}

.cf-resumen{border:1px solid var(--cf-err);background:var(--cf-err-bg);border-radius:12px;padding:14px 16px;font-size:.9rem;color:var(--p-ink)}
.cf-resumen:focus{outline:2px solid var(--cf-err);outline-offset:2px}
.cf-resumen p{font-weight:600;color:var(--cf-err);margin-bottom:6px!important}
.cf-resumen ul{margin:0;padding-left:1.2em}
.cf-resumen a{color:var(--p-ink)}
.cf-precarga{border-left:3px solid var(--p-am);padding:4px 0 4px 12px;font-size:.88rem;color:var(--p-ink)}

.cf-hecho,.cf-fallo{font-family:var(--sans)}
.cf-hecho:focus,.cf-fallo:focus{outline:none}
.cf-hecho-k{font-size:.82rem;font-weight:600;color:var(--cf-ok);display:flex;align-items:center;gap:8px}
.cf-hecho-k::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cf-ok)}
.cf-hecho h3{margin-top:14px!important;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;letter-spacing:-.02em;font-weight:600;color:var(--p-ink)}
.cf-hecho p:last-child{margin-top:14px!important;font-size:.95rem;color:var(--p-mu);line-height:1.5}
.cf-fallo{margin-bottom:20px;border:1px solid var(--cf-err);background:var(--cf-err-bg);border-radius:12px;padding:16px 18px;color:var(--p-ink);font-size:.95rem;line-height:1.5}
.cf-fallo-t{font-weight:700;color:var(--cf-err);margin-bottom:4px!important}

@media (max-width:760px){
  .cf-fila{grid-template-columns:minmax(0,1fr)}
  .cf-rgpd dl div{grid-template-columns:minmax(0,1fr);gap:0}
  .cf-enviar .btn{width:100%;justify-content:center}
  .cz-lede{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .cf input,.cf select,.cf textarea,.cf-chips span{transition:none}
}