.contact-page-hero{position:relative;padding:168px 7% 80px;background:transparent;color:var(--blanco);overflow:hidden}.contact-page-hero::before{content:'';position:absolute;inset:-10% auto auto 58%;width:min(36vw,420px);height:min(36vw,420px);border-radius:50%;background:radial-gradient(circle,rgba(37,141,214,.24) 0%,rgba(37,141,214,.06) 48%,rgba(37,141,214,0) 76%);pointer-events:none}.contact-page-hero h1{position:relative;z-index:1;font-family:var(--font-title);font-size:clamp(3.1rem,8vw,7.2rem);font-weight:800;line-height:.9;letter-spacing:-3px;max-width:760px}.contact-page-hero h1 em{font-style:normal;color:var(--azul)}.contact-page-hero p{position:relative;z-index:1;max-width:640px;margin-top:24px;font-size:.95rem;line-height:2;color:rgba(255,255,255,.62)}.contact-page-band{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 7%;margin-top:-38px;position:relative;z-index:2}.contact-band-card{padding:22px 24px;border-radius:20px;background:rgba(20,28,38,.55);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 40px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}.contact-band-card:hover{transform:translateY(-4px);box-shadow:0 30px 50px rgba(0,0,0,.36)}.contact-band-card span{display:block;font-size:.56rem;letter-spacing:3px;text-transform:uppercase;color:var(--azul);font-weight:700;margin-bottom:10px}.contact-band-card strong{display:block;font-size:1rem;color:#fff;line-height:1.6}.contact-band-card strong a{color:#fff}.contact-shell{padding:72px 0 0;background:transparent}.contact-extra{padding:84px 7% 100px;display:grid;grid-template-columns:1fr 1fr;gap:28px}.contact-extra-card{padding:34px;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:rgba(20,28,38,.5);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 20px 44px -26px rgba(0,0,0,.4)}.contact-extra-card h2{font-family:var(--font-title);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05;margin-bottom:18px;color:#fff}.contact-extra-card p{font-size:.88rem;line-height:1.9;color:rgba(255,255,255,.7)}.contact-list{display:grid;gap:16px;margin-top:26px}.contact-list-item{display:flex;gap:14px;align-items:flex-start;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}.contact-list-item strong{display:block;font-size:.64rem;letter-spacing:3px;text-transform:uppercase;color:var(--azul);margin-bottom:8px}.contact-list-item span,.contact-list-item a{font-size:.92rem;line-height:1.8;color:#fff;text-decoration:none}.contact-page-note{margin-top:22px;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:700}.inp-error{border-color:#e24b4b!important}.contact-toast{font-size:.78rem;line-height:1.7}.contact-toast a{color:var(--azul)}@media(max-width:1000px){.contact-page-band,.contact-extra{grid-template-columns:1fr}.contact-page-band{margin-top:0;padding-top:24px}.contact-shell{padding-top:32px}}@media(max-width:640px){.contact-page-hero{padding:152px 7% 68px}.contact-band-card,.contact-extra-card{padding:24px}}

/* ══════════════════════════════════════════════════════
   Una sola foto de fondo para hero + banda + #contacto +
   sección extra + footer (misma técnica que trabaja.html):
   evita costuras entre bloques y unifica todo en vidrio
   oscuro. IMPORTANTE: el overlay debe tener z-index MAYOR
   que la foto (si no, la foto pinta encima y tapa el
   oscurecido — bug real que ya nos pasó en trabaja.html).
   ══════════════════════════════════════════════════════ */
.contact-photo-wrap{position:relative}
.contact-photo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.contact-photo-wrap::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(3,5,7,.88) 0%,rgba(4,7,11,.82) 18%,rgba(5,8,12,.86) 45%,rgba(5,8,12,.9) 75%,#05080c 100%);
}
.contact-page-hero,.contact-page-band,.contact-shell,.contact-photo-wrap footer{position:relative;z-index:2}

/* #contacto ya trae su propio fondo oscuro sólido (compartido con
   el home vía apple-polish.css) — aquí lo hacemos transparente para
   que se vea la misma foto en vez de tapar todo otra vez. */
.contact-shell #contacto{background:transparent !important}
.contact-shell #contacto::before{
  display:none !important;
}

/* Unificamos ct-right (antes un panel blanco) al mismo vidrio oscuro
   que ct-left, sólo en esta página (index.html conserva su versión
   clara — .contact-shell no existe ahí). */
.contact-shell .ct-left{
  background:linear-gradient(135deg, rgba(37,141,214,.45) 0%, rgba(10,16,26,.6) 85%) !important;
}
.contact-shell .ct-right{
  background:linear-gradient(135deg, rgba(160,120,255,.4) 0%, rgba(20,14,30,.6) 85%) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55) !important;
}
/* Quitados los brillos de color (morado/azul) en las esquinas: tras
   varios ajustes de tono/posición seguían viéndose como manchas que
   se pasaban del panel. Vidrio liso, sin acento, se ve más limpio. */
.contact-shell .ct-right::before{
  display:none !important;
}
.contact-shell .ct-left::before{
  display:none !important;
}
.contact-shell .ct-right h3{color:#fff}
.contact-shell .ct-left .sec-label{color:#fff}
.contact-shell .form-group label{color:rgba(255,255,255,.55)}
.contact-shell .form-inp{
  background:rgba(8,14,22,.4) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#fff;
}
.contact-shell .form-inp::placeholder{color:rgba(255,255,255,.35)}
.contact-shell .form-inp:focus{
  background:rgba(8,14,22,.55) !important;
  border-color:var(--azul) !important;
}

.contact-photo-wrap footer{
  background:rgba(5,8,12,.72) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.08);
}

.contact-page-band{grid-template-columns:repeat(4,1fr)}
.contact-privacy{display:flex;align-items:flex-start;gap:10px;margin:-4px 0 22px;font-size:.72rem;line-height:1.6;color:rgba(255,255,255,.66)}
.contact-privacy input{width:18px;height:18px;margin-top:2px;accent-color:var(--azul);flex:0 0 auto}
.contact-privacy a{color:var(--azul);text-decoration:underline}
.contact-response-sla{margin-top:14px;font-size:.68rem;letter-spacing:1.2px;color:rgba(255,255,255,.55)}
@media(max-width:1100px){.contact-page-band{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.contact-page-band{grid-template-columns:1fr}}