/* =====================================================================
   SABAOTH FQ INSULATION LLC - contact.css
   V3 "THE SILVER STANDARD" - pagina CONTACT (EN /contact/ y ES /es/contacto/).
   Consume los tokens y componentes de base.css; aqui SOLO vive lo propio
   de esta pagina (prefijo cx-).

   Ley de color (aritmetica WCAG, no gusto):
     el naranja JAMAS es tinta sobre claro; aqui todo el mundo es tinta
     #0A0A0B / #101013 y el naranja es SUPERFICIE que carga tinta negra
     (--acc-ink, 7.7:1 AAA) o acento sobre tinta (6.9:1).

   Motion: GSAP es el UNICO dueno del transform (0702-d). Aqui no hay ni
   una transition de transform; los estados vivos son color / borde.
   Compositor-only: cero animacion de filter / width / height.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0 - RITMO DE SECCION
   --------------------------------------------------------------------- */
.cx-sec {
  position:relative;
  background:var(--ink);
  padding:clamp(72px,9vw,118px) var(--gut);
}
.cx-sec.cx-alt {
  background:var(--ink2);
  border-top:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);
}

.cx-head { margin-bottom:clamp(34px,4.4vw,56px); max-width:860px; }
.cx-head .eyebrow { margin-bottom:18px; }
.cx-lead {
  margin-top:16px; font-size:15px; line-height:1.7;
  color:#BDBDBB; max-width:56ch;
}

/* ---------------------------------------------------------------------
   1 - TARJETAS ANCHAS (ley 0720-a #12)
   Una fila = una via de contacto. La primera (telefono) es la dominante:
   superficie naranja con tinta negra encima.
   --------------------------------------------------------------------- */
.cx-cards { display:flex; flex-direction:column; gap:14px; }

.cx-card {
  position:relative;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:clamp(16px,2.6vw,36px);
  padding:clamp(20px,2.8vw,30px) clamp(18px,2.8vw,36px);
  border:1px solid var(--hair);
  border-radius:6px;
  background:var(--ink2);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
  will-change:transform;
}
.cx-card:hover, .cx-card:focus-visible { border-color:rgba(254,115,0,.55); }

.cx-n {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(18px,1.8vw,24px); letter-spacing:.04em;
  color:var(--dim);
}
.cx-ico { display:grid; place-items:center; color:var(--acc); }
.cx-ico svg { width:clamp(28px,2.8vw,38px); height:auto; }

.cx-k {
  display:block; margin-bottom:7px;
  font-size:10.5px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mut);
}
.cx-v {
  display:block;
  font-family:var(--disp); font-weight:400;
  font-size:clamp(24px,3vw,38px); line-height:1.06; letter-spacing:.012em;
  text-transform:uppercase; color:var(--paper);
}
/* correo: minusculas y cuerpo Inter (un email en Anton se lee mal) */
.cx-v.cx-lc {
  font-family:var(--body); font-weight:800; text-transform:none;
  font-size:clamp(16px,2vw,24px); letter-spacing:.01em;
  overflow-wrap:anywhere;
}
.cx-v.cx-two { font-size:clamp(19px,2.2vw,28px); }
.cx-s {
  display:block; margin-top:9px;
  font-size:13px; line-height:1.6; color:var(--mut); max-width:60ch;
}
.cx-go {
  font-size:clamp(20px,2vw,26px); line-height:1;
  color:var(--acc); justify-self:end;
}

/* la dominante: superficie naranja, tinta negra encima (AAA) */
.cx-card-acc { background:var(--acc); border-color:var(--acc); }
.cx-card-acc:hover, .cx-card-acc:focus-visible { background:var(--acc-hi); border-color:var(--acc-hi); }
.cx-card-acc .cx-n { color:rgba(22,11,2,.55); }
.cx-card-acc .cx-ico, .cx-card-acc .cx-go { color:var(--acc-ink); }
.cx-card-acc .cx-v { color:var(--acc-ink); }
.cx-card-acc .cx-k, .cx-card-acc .cx-s { color:rgba(22,11,2,.78); }

/* ---------------------------------------------------------------------
   2 - EL TALLER Y EL FORMULARIO (split)
   --------------------------------------------------------------------- */
.cx-split {
  display:grid;
  grid-template-columns:1.06fr 1fr;
  gap:clamp(24px,3.6vw,56px);
  align-items:start;
}

/* --- panel del formulario: placa de tinta con filete naranja arriba --- */
.cx-form-panel {
  position:relative;
  border:1px solid var(--hair);
  border-radius:6px;
  background:var(--ink3);
  overflow:hidden;
}
.cx-form-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--acc);
}
.cx-form-head {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px clamp(20px,2.6vw,30px);
  border-bottom:1px solid var(--hair-soft);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.cx-form-head b { color:var(--paper); font-weight:600; }
.cx-form-head span { color:var(--acc); font-weight:800; }
.cx-form-body { padding:clamp(22px,3vw,34px) clamp(20px,2.6vw,30px) clamp(24px,3vw,34px); }
.cx-form-lead { margin-bottom:22px; font-size:13.5px; line-height:1.65; color:var(--soft); max-width:52ch; }

.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.f-row { margin-top:0; }
.f-grid ~ .f-row, .cx-form-body > .f-row { margin-top:16px; }

.f-lab {
  display:block; margin-bottom:8px;
  font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soft);
}
.f-lab i {
  font-style:normal; text-transform:none; letter-spacing:.02em;
  color:var(--mut); font-weight:400;
}
.f-in {
  width:100%;
  background:var(--ink2);
  border:1px solid var(--hair);
  border-radius:3px;
  color:var(--paper);
  font-family:var(--body); font-size:14.5px; line-height:1.4;
  padding:13px 14px;
  transition:border-color .2s var(--ease);
}
.f-in::placeholder { color:var(--dim); }
.f-in:focus { outline:none; border-color:var(--acc); }
.f-in[aria-invalid="true"] { border-color:var(--acc-hi); }
.f-area { min-height:118px; resize:vertical; }

.f-sel { position:relative; }
.f-sel select { appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer; }
.f-sel select option { background:var(--ink2); color:var(--paper); }
.f-caret {
  position:absolute; right:17px; top:50%;
  width:8px; height:8px; margin-top:-6px;
  border-right:2px solid var(--mut); border-bottom:2px solid var(--mut);
  transform:rotate(45deg);
  pointer-events:none;
}

.f-hint { display:block; margin-top:8px; font-size:12px; line-height:1.55; color:var(--mut); }
.f-err { display:none; margin-top:7px; font-size:12px; font-weight:600; color:var(--acc-hi); }
.f-row.is-bad .f-err { display:block; }

.cx-form-foot {
  margin-top:24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cx-form-alt { font-size:13px; color:var(--mut); }
.cx-form-alt a {
  font-weight:800; color:var(--paper);
  border-bottom:2px solid var(--acc); padding-bottom:1px;
}
.cx-form-alt a:hover { color:var(--acc-hi); }

/* la nota inline (contrato .form-note de base.css) hereda; nada extra */

/* --- placa NAP + mapa --- */
.cx-place { display:flex; flex-direction:column; gap:18px; }

.cx-nap-plate {
  border:1px solid var(--hair);
  border-radius:6px;
  background:var(--ink3);
  padding:20px clamp(20px,2.4vw,28px) 10px;
}
.cx-nap-head {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:14px;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.cx-nap-head b { color:var(--paper); font-weight:600; }
.cx-nap-head span { color:var(--acc); font-weight:800; }
.tb-row {
  display:flex; align-items:baseline; gap:18px;
  padding:11px 0;
  border-top:1px solid var(--hair-soft);
}
.tb-row dt {
  flex:0 0 108px;
  font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mut);
}
.tb-row dd { font-size:14px; font-weight:600; color:var(--soft); }

.cx-map {
  border:1px solid var(--hair);
  border-radius:6px;
  overflow:hidden;
  background:var(--ink3);
}
.cx-map-plate { position:relative; aspect-ratio:4/3; background:var(--ink3); }
.cx-map-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--hair-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px);
  background-size:46px 46px;
}
/* dos "avenidas" que cruzan la placa: pura decoracion, cero peso */
.cx-map-grid::before, .cx-map-grid::after {
  content:''; position:absolute; background:rgba(251,251,250,.09);
}
.cx-map-grid::before { left:0; right:0; top:58%; height:3px; }
.cx-map-grid::after { top:0; bottom:0; left:34%; width:3px; }

.cx-pin {
  position:absolute;
  left:calc(50% - 29px); top:calc(44% - 92px);
  width:58px;
  display:flex; flex-direction:column; align-items:center;
}
.cx-pin-head {
  position:relative; z-index:2;
  width:56px; height:56px; border-radius:50%;
  background:var(--paper); border:3px solid var(--acc);
  display:grid; place-items:center; overflow:hidden;
}
.cx-pin-head img { width:34px; height:34px; object-fit:contain; }
.cx-pin-stem { width:3px; height:24px; background:var(--acc); }
.cx-pin-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--acc);
  box-shadow:0 0 0 5px rgba(254,115,0,.22);
}
.cx-pin-ring {
  position:absolute; left:calc(50% - 30px); bottom:-25px;
  width:60px; height:60px; border-radius:50%;
  border:2px solid var(--acc);
  opacity:0;
}

.cx-map-addr {
  position:absolute; left:16px; top:14px;
  max-width:calc(100% - 32px);
  background:rgba(10,10,11,.78);
  border:1px solid var(--hair);
  border-radius:3px;
  padding:9px 14px;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut);
}
.cx-map-addr b { color:var(--soft); font-weight:600; }

.cx-map-load {
  position:absolute; right:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px;
  background:rgba(10,10,11,.78);
  border:1px solid var(--hair);
  border-radius:3px;
  cursor:pointer;
  font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper);
  transition:border-color .25s var(--ease);
}
.cx-map-load:hover, .cx-map-load:focus-visible { border-color:var(--acc); }
.cx-map-load .dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--acc); flex:0 0 auto;
}

.cx-map-frame {
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; border:0; display:block;
  background:var(--ink2);
}
.cx-map-plate.is-live .cx-map-load,
.cx-map-plate.is-live .cx-pin,
.cx-map-plate.is-live .cx-map-addr { display:none; }

.cx-map-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:14px 18px;
  border-top:1px solid var(--hair-soft);
}
.cx-link {
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper);
  border-bottom:2px solid var(--acc); padding-bottom:3px;
}
.cx-link:hover { color:var(--acc-hi); }
.cx-map-note { font-size:11.5px; color:var(--mut); }

/* ---------------------------------------------------------------------
   3 - ETAPA PENULTIMA: que pedimos para cotizar
   --------------------------------------------------------------------- */
.cx-ready {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,34px);
}
.cx-ready li { border-top:2px solid var(--hair); padding-top:18px; }
.cx-ready-n {
  display:block; margin-bottom:12px;
  font-family:var(--disp); font-weight:400;
  font-size:clamp(26px,2.6vw,38px); letter-spacing:.02em;
  color:var(--acc);
}
.cx-ready h3 {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(19px,1.8vw,25px); line-height:1.08;
  letter-spacing:.012em; text-transform:uppercase; color:var(--paper);
}
.cx-ready p { margin-top:9px; font-size:13.5px; line-height:1.65; color:var(--mut); }

/* ---------------------------------------------------------------------
   3b - FAQ AEO (0718-i): respuesta directa primero.
   Misma gramatica que cx-ready: hairline 2px + Anton en la pregunta.
   --------------------------------------------------------------------- */
.cx-faq { max-width:980px; margin:0; }
.cx-faq-item { border-top:2px solid var(--hair); padding:24px 0 26px; }
.cx-faq dt {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(17px,1.6vw,22px); line-height:1.14;
  letter-spacing:.012em; text-transform:uppercase; color:var(--paper);
}
.cx-faq dd { margin:10px 0 0; font-size:14.5px; line-height:1.7; color:var(--soft); max-width:78ch; }

/* ---------------------------------------------------------------------
   4 - CTA DE CIERRE sobre cta-band.webp (scrim horneado en el pixel)
   --------------------------------------------------------------------- */
.cx-cta {
  position:relative;
  overflow:hidden;
  background:var(--ink3);
  padding:clamp(88px,12vw,150px) var(--gut);
  border-top:1px solid var(--hair-soft);
}
.cx-cta-media { position:absolute; inset:0; }
.cx-cta-media img {
  width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
}
.cx-cta-inner { position:relative; z-index:2; }
.cx-cta-h { margin-top:18px; font-size:clamp(42px,5.8vw,82px); }
.cx-cta-sub {
  margin-top:20px; max-width:54ch;
  font-size:15px; line-height:1.7; color:var(--soft);
}
.cx-cta-row {
  margin-top:32px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
/* boton fantasma legible sobre foto */
.cx-onphoto { background:rgba(10,10,11,.55); }
.cx-onphoto:hover { background:rgba(10,10,11,.72); }

/* ---------------------------------------------------------------------
   5 - RESPONSIVE (390 / 768 / 1080 verificados con ojos)
   --------------------------------------------------------------------- */
@media (max-width:1080px) {
  .cx-split { grid-template-columns:1fr; }
  .cx-place { order:2; }
  .cx-formwrap { order:1; }
  .cx-ready { grid-template-columns:1fr 1fr; }
}

@media (max-width:640px) {
  .cx-sec { padding:64px var(--gut) 72px; }

  .cx-card {
    grid-template-columns:auto 1fr auto;
    align-items:start;
    row-gap:6px;
  }
  .cx-n { display:none; }               /* en movil el numero es ruido */
  .cx-ico { padding-top:3px; }
  .cx-ico svg { width:26px; }
  .cx-go { align-self:center; }
  .cx-v { font-size:clamp(21px,6vw,26px); }
  .cx-v.cx-lc { font-size:14px; letter-spacing:0; }
  .cx-v.cx-two { font-size:clamp(17px,5vw,21px); }

  .f-grid { grid-template-columns:1fr; }
  .cx-form-foot { align-items:flex-start; flex-direction:column; gap:14px; }
  .cx-form-foot .btn { width:100%; justify-content:center; }

  .tb-row dt { flex-basis:88px; }
  .cx-map-plate { aspect-ratio:1/1; }

  .cx-ready { grid-template-columns:1fr; gap:22px; }

  .cx-cta { padding:84px var(--gut) 96px; }
  .cx-cta-row .btn { width:100%; justify-content:center; }
}

@media (max-width:360px) {
  .cx-map-addr { display:none; }
}

/* ---------------------------------------------------------------------
   6 - REDUCED MOTION: todo compone (base.css ya cubre .rv / .hl)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  .cx-pin, .cx-pin-ring { opacity:1 !important; transform:none !important; }
  .cx-pin-ring { opacity:0 !important; }
}