/* ==========================================================================
   Castillo & Prieto Abogados
   Reglas portadas verbatim — origen: design/css/styles.css
   ========================================================================== */

/* ---------- Contacto ---------- */
.contacto {
  max-width: var(--ancho); margin: 0 auto; padding: 20px 32px 56px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start;
}
.formulario { display: flex; flex-direction: column; gap: 18px; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formulario label { display: flex; flex-direction: column; gap: 8px; }
.formulario label span {
  font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--tinta); font-weight: 600;
}
.formulario input, .formulario textarea {
  border: 1px solid #dde4e8; border-radius: 5px; padding: 13px 15px;
  font-size: 16px; color: var(--tinta); outline: none;
}
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario textarea:focus { border-color: var(--celeste); }
.datos { border: 1px solid var(--borde); border-radius: 8px; padding: 28px; }
.datos__bloque { margin-bottom: 22px; }
.datos__bloque:last-child { margin-bottom: 0; }
.datos__rotulo {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--celeste); font-weight: 600; margin-bottom: 6px;
}
.datos__valor { font-size: 16px; color: var(--tinta); }
.datos a { font-size: 16px; }
@media (max-width: 760px) {
  .contacto,
  .formulario__fila { grid-template-columns: 1fr; }
  .contacto { gap: 32px; }
}

/* ==========================================================================
   Integración con Contact Form 7
   --------------------------------------------------------------------------
   El diseño trae el formulario como markup plano; CF7 lo re-emite con
   envoltorios propios. Este bloque NO cambia el diseño: solo neutraliza esos
   envoltorios para que las reglas de arriba sigan aplicando igual.
   ========================================================================== */

/* CF7 anida el form en .wpcf7 > form.wpcf7-form. Como .contacto es una grilla,
   el ítem necesita min-width:0 para no desbordar con textos largos. */
.contacto .wpcf7 { min-width: 0; }

/* Cada campo llega envuelto en <span class="wpcf7-form-control-wrap">. Ese span
   cae bajo `.formulario label span`, que es la regla de la ETIQUETA: sin esto
   el input heredaría el uppercase y el tracking del rótulo. */
.formulario label .wpcf7-form-control-wrap {
  display: block;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-weight: inherit;
  color: inherit;
}

/* CF7 emite size="40" / cols="40" en vez de ancho fluido. */
.formulario input,
.formulario textarea { width: 100%; }

/* El submit es un <input>, así que `.formulario input` (0,1,1) le gana a
   `.btn-solido` (0,1,0) y lo dejaría con aspecto de campo. Se le devuelve el
   preset del diseño con una especificidad que sí alcanza. */
.formulario input.btn-solido {
  width: auto;
  align-self: flex-start;
  border: none;
  background: var(--celeste);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 15px 38px;
  border-radius: 5px;
}
.formulario input.btn-solido:hover { background: var(--celeste-oscuro); }

/* Estados de validación y respuesta. El diseño no los contempla (su formulario
   no enviaba), así que se resuelven con los tokens de la paleta. */
.formulario .wpcf7-not-valid { border-color: #c0562f; }
.formulario .wpcf7-not-valid-tip {
  font-size: 13px; color: #c0562f; letter-spacing: normal;
  text-transform: none; font-weight: 400; margin-top: 6px;
}
.contacto .wpcf7-response-output {
  margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--borde-2);
  border-radius: 5px; font-size: 14px; color: var(--tinta); background: var(--gris-fondo);
}
.contacto .wpcf7-form.invalid .wpcf7-response-output,
.contacto .wpcf7-form.failed .wpcf7-response-output { border-color: #c0562f; color: #c0562f; }
.contacto .wpcf7-form.sent .wpcf7-response-output { border-color: var(--celeste); color: var(--celeste-oscuro); }
.contacto .wpcf7-spinner { margin: 0 0 0 12px; }