/* pages/contacto.css: solo estilos propios de la página — DANIEL PRADO · ARQUITECTO */
:root{
  --text-h1:clamp(2.5rem,5.4vw,4.0rem);
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.contact-hero{padding-bottom:clamp(52px,7vw,96px);border-bottom:1px solid var(--line-light)}
.contact-hero-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(32px,6vw,80px);align-items:start}
.contact-hero h1{font:500 var(--text-h1)/var(--leading-tight) var(--font-head);letter-spacing:-.025em;max-width:12ch;margin:0}
.contact-intro{font-size:clamp(1.1rem,1.7vw,1.28rem);line-height:1.55;letter-spacing:-.01em;max-width:48ch;margin:0 0 20px}
.contact-support{border-top:1px solid var(--line-light);padding-top:16px;font-size:16px;color:var(--muted);max-width:50ch;margin:0}
@media(max-width:860px){
  .contact-hero-grid{grid-template-columns:1fr;gap:28px}
}
.contact-body{background:var(--paper-alt)}
.contact-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(32px,6vw,80px);align-items:start}
.contact-aside{padding-top:3px}
.contact-aside h2{font:500 var(--text-h2)/var(--leading-heading) var(--font-head);letter-spacing:-.01em;max-width:12ch;margin:0 0 18px}
.contact-aside p{font-size:15px;color:var(--muted);max-width:31ch;margin:0}
.contact-details{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line-light)}
.contact-details li{border-bottom:1px solid var(--line-light);padding:14px 0}
.contact-details span{display:block;font:600 var(--text-xs)/1.2 var(--font-body);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.contact-details a,.contact-details strong{font:500 15px/1.45 var(--font-body);text-decoration:none}
.contact-details a:hover{color:var(--accent)}
.contact-details strong{font-weight:500}
.contact-form{background:var(--paper);padding:clamp(24px,4vw,42px);border:1px solid var(--line-light);border-radius:2px}
.form-intro{font-size:16px;max-width:53ch;margin:0 0 28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.field-full{grid-column:1/-1}
.field label{font:600 var(--text-xs)/1.2 var(--font-body);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.field label span{font-weight:400;letter-spacing:0;text-transform:none}
.field input,.field select,.field textarea{width:100%;appearance:none;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0 11px;font:400 16px/1.4 var(--font-body);outline:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.field textarea{min-height:136px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#85817b}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent)}
.field-help{color:var(--muted);font-size:12px;line-height:1.5}
.form-actions{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-top:1px solid var(--line-light);margin-top:32px;padding-top:24px}
.form-note{font-size:12px;line-height:1.5;color:var(--muted);max-width:36ch;margin:0}
.form-note a{color:inherit;text-underline-offset:3px}
@media(max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .contact-aside p{max-width:48ch}
}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .field-full{grid-column:auto}
  .form-actions{flex-direction:column-reverse;align-items:stretch}
  .form-actions .btn{width:100%}
}
.next-step{border-top:1px solid var(--line-light)}
.next-step-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(32px,6vw,80px);align-items:start}
.next-step h2{font:500 var(--text-h2)/var(--leading-heading) var(--font-head);letter-spacing:-.01em;max-width:15ch;margin:0}
.next-step-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-light);counter-reset:steps}
.next-step-list li{counter-increment:steps;display:grid;grid-template-columns:42px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-light)}
.next-step-list li:before{content:counter(steps,decimal-leading-zero);font:500 14px/1.4 var(--font-head);color:var(--accent)}
.next-step-list h3{font:600 15px/1.35 var(--font-head);margin:0 0 3px}
.next-step-list p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
@media(max-width:860px){
  .next-step-grid{grid-template-columns:1fr;gap:28px}
}

/* Aceptación: control nativo independiente de los campos de texto. */
.contact-form .checkbox-control{display:flex;align-items:flex-start;gap:12px;max-width:56ch}
.contact-form .checkbox-control input[type="checkbox"]{
  -webkit-appearance:checkbox;
  appearance:auto;
  display:inline-block;
  box-sizing:border-box;
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  flex:0 0 18px;
  margin:3px 0 0;
  padding:0;
  border:revert;
  border-radius:revert;
  background:revert;
  accent-color:var(--ink,#191919);
  cursor:pointer;
}
.contact-form .checkbox-control input[type="checkbox"]:focus-visible{outline:2px solid var(--ink,#191919);outline-offset:4px}
.contact-form .checkbox-control label{font:400 14px/1.55 var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.contact-form .checkbox-control a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.contact-form .checkbox-control a:hover{color:var(--accent)}
@media(max-width:640px){
  .contact-form .form-actions{flex-direction:column;align-items:stretch}
  .contact-form .checkbox-control label{font-size:13px}
}