/* p-colaborar.css · /colaborar/ · prefijo col- · solo var(--…) de tokens.css: sin hex, sin sombras, sin degradados, sin rebotes */
.p-col [hidden]{display:none!important}
.col-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:var(--s-64);align-items:start;padding-top:var(--s-64)}
.p-col .hero h1{font-size:var(--t-58);letter-spacing:var(--trk-58);max-width:11em}
.col-txt .lede{max-width:24em}
.col-form,.col-ok{margin-top:var(--s-48);max-width:480px}
.col-form .campo{margin-bottom:var(--s-24)}
.col-form .campo input[aria-invalid="true"],.col-tel.malo{border-color:var(--error)}
.col-tel{display:flex;align-items:stretch;border:var(--borde-ancho) solid var(--borde-control);border-radius:var(--r-campo);background:var(--elevado);overflow:hidden}
.col-tel:focus-within{outline:var(--foco-ancho) solid var(--acento);outline-offset:1px;border-color:var(--acento)}
.col-pref{display:grid;place-items:center;padding:0 var(--s-16);color:var(--texto-2);font-size:var(--t-17);border-right:var(--borde-ancho) solid var(--borde);font-variant-numeric:tabular-nums}
.col-tel input{flex:1;min-width:0;border:0;border-radius:0;background:transparent}
.col-tel input:focus{outline:none;border:0}
.col-ayuda{margin:0;font-size:var(--t-15);color:var(--texto-2)}
.col-resumen{margin:0 0 var(--s-24);padding-left:var(--s-16);border-left:var(--borde-encendido) solid var(--error);color:var(--error);font-size:var(--t-15)}
.col-enviar{min-width:200px;min-height:var(--boton-alto);font-size:var(--web-boton)}
.col-enviar[disabled]{opacity:.6;cursor:default}
.col-consent{margin:var(--s-16) 0 0;font-size:var(--t-15);color:var(--texto-2);max-width:30em}
.col-ok{animation:col-entra var(--dur-entrada) var(--mov-entrada) both}
.col-ok:focus{outline:none}
.col-ok h2{font-size:var(--web-h2);letter-spacing:var(--web-h2-trk);line-height:var(--lh-titular)}
.col-error{margin:var(--s-16) 0 0;color:var(--error);font-size:var(--t-15)}
@keyframes col-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* el símbolo: apagado hasta que se envía el formulario; entonces el botón sube y se enciende (300 ms) */
.col-sym{background:var(--superficie);border-radius:var(--r-tarjeta);min-height:480px;display:grid;place-items:center;position:sticky;top:calc(var(--cabecera) + var(--s-24))}
.col-sym svg{width:min(200px,56%);height:auto;overflow:visible}
.col-sym .cap{fill:var(--control-apagado);transition:fill var(--dur-micro) var(--mov-micro) var(--dur-estado)}
.col-sym .knob{fill:var(--superficie);transition:transform var(--dur-estado) var(--mov-estado)}
.col-sym.on .k-r{transform:translateY(-80.43px)}
.col-sym.on .cap-r{fill:var(--acento)}

@media (max-width:1000px){
  .col-hero{grid-template-columns:minmax(0,1fr);gap:var(--s-48)}
  .col-sym{display:none}
}
@media (max-width:767px){.p-col .hero h1{font-size:var(--t-42);letter-spacing:var(--trk-42)}}