/* ============================================================================
   Página · Contacto — claudionavarro.net
   ----------------------------------------------------------------------------
   Capa 2 (composición de página). El formulario conserva intactos sus name,
   id, action y el honeypot: aquí sólo se le da la forma de hoja de la casa.
   ============================================================================ */

/* ------------------------------------------------ CABECERA · titular y señal */
.cab-contacto__in{ display:grid; gap:var(--space-5); }
@media (min-width:64em){
  .cab-contacto__in{ grid-template-columns:minmax(0,1fr) 24rem; gap:var(--space-7); align-items:end; }
  .cab-contacto__entrada{ padding-bottom:var(--space-4); }
}
.cab-contacto__entrada{
  font-family:var(--fuente-display); font-style:italic; font-size:1.25rem;
  line-height:1.45; max-width:42ch; color:var(--color-texto-secundario);
}

/* ------------------------------------------------- LA HOJA Y LOS CANALES */
.contacto{ display:grid; gap:var(--space-6); }
@media (min-width:64em){
  .contacto{ grid-template-columns:minmax(0,1fr) 19rem; gap:var(--space-6); align-items:start; }
}
.contacto__hoja{ padding:var(--space-5); transform:rotate(calc(-0.7deg * var(--osadia))); }
.contacto__canales{ margin-top:var(--space-2); }
@media (min-width:64em){ .contacto__canales{ margin-top:var(--space-7); } }
.canales{ display:grid; gap:var(--space-2); margin-top:var(--space-3); }
.canales a{
  font-family:var(--fuente-mono); font-size:var(--fs-sm);
  border-bottom:var(--linea) solid transparent; padding-bottom:0.15rem;
}
.canales a:hover{ color:var(--sello-acento); border-bottom-color:var(--sello-acento); }

/* --------------------------------------------------------- EL FORMULARIO */
.formulario{ display:grid; gap:var(--space-4); }
.formulario__par{ display:grid; gap:var(--space-4); }
@media (min-width:48em){ .formulario__par{ grid-template-columns:1fr 1fr; gap:var(--space-5); } }
.campo{ display:grid; gap:var(--space-2); }
.campo label{
  font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--color-texto-secundario);
}
.campo input, .campo select, .campo textarea{
  width:100%; border-radius:0; font-family:var(--fuente-cuerpo); font-size:var(--fs-base);
  color:var(--color-texto); background:var(--color-fondo);
  border:var(--linea) solid var(--color-linea);
  border-bottom:var(--linea-fuerte) solid var(--color-texto);
  padding:var(--space-3);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; background:var(--color-superficie); border-color:var(--color-texto);
}
.campo textarea{ min-height:9rem; resize:vertical; }
.u-sh{ display:none !important; }
.formulario__pie{ display:flex; justify-content:flex-end; margin-top:var(--space-2); }
@media (max-width:47.99em){
  .formulario__pie{ justify-content:stretch; }
  .formulario__pie .btn{ width:100%; text-align:center; }
}

/* ------------------------------- AVISOS DE ESTADO (clases del original) */
.status-message{
  padding:var(--space-3) var(--space-4); font-size:var(--fs-sm); line-height:1.6;
  background:var(--color-superficie); border:var(--linea) solid var(--color-linea);
  border-left:0.35rem solid var(--color-texto); margin-bottom:var(--space-4);
}
.status-message strong{ font-weight:600; }
.status-error{ background:color-mix(in srgb, var(--color-censura) 5%, var(--color-superficie)); }