/* ==========================================================
   CONTACTO — datos y formulario
   ========================================================== */

/* ---------- CONTACTO ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
}
.contact-copy p{color:var(--slate); max-width:440px; font-size:15px;}
.contact-list{list-style:none; margin:28px 0 0; padding:0;}
.contact-list li{
  padding:16px 0; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:16px; font-size:14px;
  transition:padding-left var(--t-hover) var(--ease-flip);
}
.contact-list li:hover{padding-left:8px;}
.contact-list li:last-child{border-bottom:1px solid var(--rule);}
.contact-list span:first-child{color:var(--slate);}
.contact-list a{text-decoration:none; color:var(--navy); border-bottom:1px solid var(--rule);}
.contact-list a:hover{border-color:var(--navy);}
.contact-form{background:var(--paper-dim); padding:36px;}
.contact-form .field{margin-bottom:18px; position:relative;}
.contact-form .field::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--navy);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out);
}
.contact-form .field:focus-within::after{transform:scaleX(1);}
.contact-form label{display:block; font-size:12.5px; color:var(--slate); margin-bottom:7px;}
.contact-form input, .contact-form textarea{
  width:100%; border:none; border-bottom:1px solid var(--rule); background:transparent;
  padding:10px 2px; font-family:'Montserrat',sans-serif; font-size:14px; color:var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus{outline:none;}
.contact-form textarea{resize:vertical; min-height:88px; display:block;}
.contact-form button{
  margin-top:8px; background:var(--navy); color:var(--paper); border:1px solid var(--navy);
  padding:14px 30px; font-size:14px; cursor:pointer; font-family:'Montserrat',sans-serif;
  position:relative; overflow:hidden; z-index:0;
  transition:color var(--t-hover) ease;
}
.contact-form button::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--navy-deep);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-hover) var(--ease-flip);
}
.contact-form button:hover::before{transform:scaleX(1);}
/* Nota de envio. Estaba en linea en el marcado; se oculta con el atributo
   hidden (ver [hidden] en base.css) y contact-form.js solo lo quita. */
.form-note{
  font-size:12.5px; color:var(--slate); margin-top:14px;
}
@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr; gap:36px;}
}