/* Página de contacto: reutiliza el formulario y los componentes base, pero lo
   presenta como un recorrido convencional que funciona sin el carril de la
   portada. */
.contacthead{
  position:relative;overflow:hidden;
  padding:clamp(52px,7vw,88px) 0 clamp(64px,8vw,104px);
  background:var(--brand-violet);color:var(--brand-cream);
}
.contacthead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("/assets/pattern/Patron_azu.svg") 18% 52%/cover no-repeat;
  opacity:.11;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 78%);
  mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 78%);
}
.contacthead__grid{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,.72fr);
  align-items:start;gap:clamp(40px,7vw,88px);
}
.contacthead__copy{padding-top:10px}
.contacthead .crumbs{color:var(--violet-200)}
.contacthead .crumbs a{color:var(--violet-200)}
.contacthead .crumbs a:hover,.contacthead .crumbs span[aria-current]{color:var(--brand-cream)}
.contacthead .overline{color:var(--brand-teal)}
.contacthead h1{
  max-width:11ch;margin-bottom:.45em;
  font-size:clamp(38px,5.8vw,66px);line-height:1.03;color:var(--brand-cream);
}
.contacthead .u-mark::after{background:var(--brand-yellow)}
.contacthead .lead{max-width:39rem;color:var(--violet-200);font-weight:400}
.js-reveal .contacthead__copy.is-in .u-mark::after{
  transform:scaleX(1);
  transition:transform .7s cubic-bezier(.2,.7,.2,1) .35s;
}
.contactfacts{
  list-style:none;margin:clamp(26px,4vw,38px) 0 0;padding:0;
  display:grid;gap:11px;font-size:15px;color:var(--brand-cream);
}
.contactfacts li{display:flex;align-items:center;gap:10px}
.contactfacts .dot{width:8px;height:8px;border-radius:50%;background:var(--brand-teal);flex:none}
.contactdirect{
  margin-top:clamp(28px,5vw,48px);padding-top:22px;
  border-top:1px solid var(--violet-600);
}
.contactdirect p{margin:0 0 4px;font-size:14px;color:var(--violet-200)}
.contactdirect a{
  color:var(--brand-teal);font-family:var(--font-display);
  font-size:clamp(19px,2.4vw,24px);font-weight:700;
  text-decoration-color:var(--brand-yellow);
}
.contactform{position:relative;box-shadow:0 20px 54px rgb(14 8 28 / .28)}

.contactnext h2{max-width:24ch}
.contactnext > .wrap > .lead{max-width:46rem}
.contactsteps{
  list-style:none;margin:clamp(30px,5vw,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  counter-reset:none;
}
.contactsteps li{
  min-height:230px;padding:26px 24px;
  background:var(--color-bg-elevated);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}
.contactsteps li > span{
  display:block;margin-bottom:30px;
  font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--color-accent-text);
}
.contactsteps h3{font-size:21px;margin-bottom:10px}
.contactsteps p{margin:0;color:var(--color-text-muted);font-size:15.5px;line-height:1.6}
.js-reveal .contactsteps li{opacity:0;transform:translateY(20px)}
.js-reveal .contactsteps.is-in li{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);
}
.js-reveal .contactsteps.is-in li:nth-child(2){transition-delay:.1s}
.js-reveal .contactsteps.is-in li:nth-child(3){transition-delay:.2s}

.contactbrief__grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(360px,.72fr);
  align-items:start;gap:clamp(36px,7vw,86px);
}
.contactbrief h2{max-width:20ch}
.contactbrief__card{
  padding:clamp(24px,4vw,36px);background:var(--color-bg-elevated);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.contactbrief__card ul{margin:0 0 24px;padding-left:1.25em;display:grid;gap:12px}
.contactbrief__card li::marker{color:var(--color-accent-text)}
.contactbrief__card p{margin:0;color:var(--color-text-muted);font-size:15px}

@media (max-width:900px){
  .contacthead__grid,.contactbrief__grid{grid-template-columns:1fr}
  .contacthead__copy{padding-top:0}
  .contacthead h1{max-width:12ch}
  .contactform{max-width:680px;width:100%}
  .contactsteps{grid-template-columns:1fr}
  .contactsteps li{min-height:0}
}
@media (max-width:520px){
  .contacthead{padding-top:38px}
  .contacthead h1{font-size:clamp(35px,12vw,48px)}
  .contactform{padding:22px 18px}
  .contactsteps li{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){
  .js-reveal .contactsteps li{opacity:1;transform:none;transition:none}
}