/* css/contacto.css
   Dejanos tu mensaje: la introduccion y el formulario. */
.cc-cont { padding-top:72px; padding-bottom:96px; }
.cc-cont-intro { max-width:720px; display:flex; flex-direction:column; gap:16px; margin-bottom:40px; }
.cc-cont-intro h1 { font-size:46px; }
.cc-cont-bajada { margin:0; font-size:19px; color:var(--tinta2); }
.cc-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; background:var(--tarjeta); border:1.5px solid var(--borde); border-radius:16px; padding:32px; }
.cc-campo { display:flex; flex-direction:column; gap:7px; min-width:0; }
.cc-campo-ancho { grid-column:1/-1; }
.cc-campo label, .cc-form-rotulo { font-size:14px; font-weight:700; color:var(--tinta); }
.cc-campo input, .cc-campo select, .cc-campo textarea { padding:12px 14px; border:2px solid var(--borde); border-radius:10px; background:var(--papel); color:var(--tinta); font:inherit; font-size:16px; min-height:44px; width:100%; }
.cc-campo textarea { min-height:132px; resize:vertical; }
.cc-campo input:focus-visible, .cc-campo select:focus-visible, .cc-campo textarea:focus-visible { outline:3px solid var(--oxido); outline-offset:1px; }
.cc-campo input[aria-invalid=true], .cc-campo textarea[aria-invalid=true] { border-color:var(--ladrillo); }
.cc-consent { flex-direction:row; align-items:flex-start; gap:12px; }
.cc-consent input { width:22px; height:22px; min-height:22px; flex:none; margin-top:2px; accent-color:var(--oxido); }
.cc-consent label { font-weight:400; font-size:15px; color:var(--tinta2); }
.cc-trampa { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cc-form-falta { margin:0; font-size:15px; color:var(--ladrillo); font-weight:700; }
.cc-form-pie { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
/* El boton de enviar va en rojo ladrillo con texto blanco, que es la unica pieza del
   sitio que usa ese color: es la accion que no se puede confundir con otra. */
.cc-boton-enviar { background:var(--ladrillo); color:#fff; }
.cc-boton-enviar:hover { background:var(--oxido2); color:#fff; }
.cc-boton-enviar:disabled { opacity:.55; cursor:not-allowed; }
.cc-form-nota { font-size:14px; color:var(--tinta2); }
.cc-form-msg { grid-column:1/-1; margin:0; font-size:16px; font-weight:700; min-height:24px; }
.cc-form-msg.cc-ok { color:var(--petroleo2); }
.cc-form-msg.cc-mal { color:var(--ladrillo); }
@media (max-width:640px) {
  .cc-cont { padding-top:40px; padding-bottom:48px; }
  .cc-cont-intro h1 { font-size:32px; }
  .cc-form { padding:20px; gap:16px; }
}
/* LA PREGUNTA DE VERIFICACION. Entra en una fila con el campo al lado, y abajo de 640px
   cae sola a dos renglones: el campo tiene base flexible y la pregunta puede ser larga
   --"De estas tres palabras, cual es un animal: ..."--. */
.cc-desafio { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.cc-desafio .cc-desafio-preg { font-size:16px; font-weight:700; color:var(--tinta); flex:0 1 auto; max-width:100%; min-width:0; }
.cc-desafio input { flex:0 1 170px; width:auto; }
.cc-desafio-nota { grid-column:1/-1; margin:8px 0 0; font-size:14px; color:var(--tinta2); }