/* ============================================================
   MENDOZA RODRIGUEZ · contact.css — /contact/ + /es/contacto/
   C1 CENTRALITA DE OBRA (cap. 13 §17) · banner B4 scrim lateral
   HORNEADO · zona SVG blueprint (sin iframes) · form ley 0705-n
   Dueño exclusivo de esta página (ley FILE FRONTIER).
   ============================================================ */

/* ============================================================
   K0 · BANNER — foto real #12 (cielorraso sereno), scrim izq
   HORNEADO en el webp (ley 0704-f: cero overlay CSS encima).
   Clase "band" = zona oscura para el logo adaptativo de main.js;
   sus hijos .band-media/.band-phrase/.band-chip/.band-dots
   reciben el motion del contrato del home (un solo dueño).
   ============================================================ */
.banner{
  position:relative;overflow:hidden;background:#3E4145;
  min-height:clamp(420px,50vh,600px);
  display:flex;align-items:flex-end;
}
.band-media{position:absolute;inset:0;overflow:hidden}
.band-media img{
  position:absolute;left:0;top:-8%;width:100%;height:116%;
  object-fit:cover;object-position:62% 40%;will-change:transform;
}
.banner-content{
  position:relative;z-index:2;width:var(--wrap);margin-inline:auto;
  /* la brecha inferior deja el crumb LIBRE del solape de las tarjetas (−64px) */
  padding-bottom:clamp(6.5rem,12vh,8rem);
}
.banner-eyebrow{color:#E9B9B4;margin-bottom:1rem}
.banner-h1{
  font-size:clamp(2.6rem,5.5vw,5.6rem);
  color:var(--paper);letter-spacing:-.012em;
}
.banner-crumb{
  display:flex;align-items:center;gap:.55rem;
  margin-top:1.15rem;font-size:.82rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#C9CACD;
}
.banner-crumb a{position:relative;color:#E4E5E8;padding-bottom:2px}
/* subrayado que se dibuja (exención CSS sancionada §12.12) */
.banner-crumb a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--paper);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .25s var(--ease-house);
}
.banner-crumb a:hover::after{transform:scaleX(1)}
.banner-crumb .crumb-sep{color:#E9B9B4}
.banner-crumb [aria-current="page"]{color:var(--paper)}
/* chip glass (hecho permitido) esquina inf-der */
.band-chip{
  position:absolute;right:4.5%;bottom:26%;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);padding:.6rem 1.05rem;border-radius:999px;
  background:rgba(20,21,25,.55);border:1px solid rgba(247,247,248,.3);
  will-change:transform;
}
.band-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* rail de dots blueprint (capa deco, velocidad propia) */
.band-dots{
  position:absolute;right:2.4%;top:16%;bottom:16%;width:5px;z-index:2;
  background:repeating-linear-gradient(to bottom,rgba(247,247,248,.5) 0 5px,transparent 5px 30px);
  background-size:5px 100%;background-repeat:no-repeat;border-radius:3px;
  will-change:transform;pointer-events:none;
}

/* nav sobre el banner oscuro (solo mientras la barra es transparente) */
body[data-page="contact"]:not(.nav-scrolled) .nav-links a{color:#D7D8DB}
body[data-page="contact"]:not(.nav-scrolled) .nav-links a:hover,
body[data-page="contact"]:not(.nav-scrolled) .nav-links a[aria-current="page"]{color:var(--paper)}
body[data-page="contact"]:not(.nav-scrolled) .nav-links a::before{background:#C9CACD}
body[data-page="contact"]:not(.nav-scrolled) .nav-bubble{border-color:#C9CACD}
body[data-page="contact"]:not(.nav-scrolled) .lang-pill{border-color:rgba(247,247,248,.4)}
body[data-page="contact"]:not(.nav-scrolled) .lang-pill a{color:#C9CACD}
body[data-page="contact"]:not(.nav-scrolled) .lang-pill a[aria-current="true"]{background:var(--paper);color:var(--ink)}
body[data-page="contact"]:not(.nav-scrolled) .nav-burger i,
body[data-page="contact"]:not(.nav-scrolled) .nav-burger i::before,
body[data-page="contact"]:not(.nav-scrolled) .nav-burger i::after{background:var(--paper)}
/* el menú móvil abierto es panel paper: burger vuelve a tinta */
body[data-page="contact"].menu-open .nav-burger i{background:transparent}
body[data-page="contact"]:not(.nav-scrolled).menu-open .nav-burger i::before,
body[data-page="contact"]:not(.nav-scrolled).menu-open .nav-burger i::after{background:var(--ink)}
body[data-page="contact"].menu-open .lang-pill{border-color:var(--hairline)}
body[data-page="contact"].menu-open .lang-pill a{color:#7A7C82}
body[data-page="contact"].menu-open .lang-pill a[aria-current="true"]{background:var(--ink);color:var(--paper)}

/* ============================================================
   K1 · TRES TARJETAS — los 3 caminos; teléfono DOMINANTE en
   superficie de acento, solapando el borde del banner (−64px)
   ============================================================ */
.quick{
  position:relative;background:var(--paper);
  /* pulido k5 (dueño): aire total tarjetas→banda ≈ clamp(3rem,5vw,5rem);
     antes 180px @1440 (el doble) — pb + pt del split + inset de banda */
  padding-bottom:clamp(1.8rem,2.6vw,2.5rem);
}
/* fondo nunca plano (ley q2): stud-lines a susurro */
.quick::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to right,rgba(165,165,168,.08) 0 1px,transparent 1px 168px);
}
.cards3{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1.12fr 1fr 1fr;
  gap:clamp(1rem,2vw,1.8rem);
  margin-top:-64px;align-items:stretch;
}
.qcard{
  position:relative;display:flex;flex-direction:column;gap:.4rem;
  background:#FFFFFF;border:1px solid var(--hairline);border-radius:12px;
  padding:clamp(1.4rem,2.2vw,2rem) clamp(1.3rem,2vw,1.9rem);
  box-shadow:0 18px 42px rgba(27,28,30,.12);
  will-change:transform;
}
.qcard-tel{background:var(--accent);border-color:var(--accent-deep)}
.qicon{width:34px;height:34px;margin-bottom:.7rem;stroke:var(--accent-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qcard-tel .qicon{stroke:var(--paper)}
.q-eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);
}
.qcard-tel .q-eyebrow{color:rgba(247,247,248,.85)}
.q-data{
  font-family:var(--font-d);font-weight:900;line-height:1.05;
  font-size:clamp(1.35rem,1.9vw,1.75rem);color:var(--ink);letter-spacing:-.01em;
  margin-top:.15rem;
}
.qcard-tel .q-data{color:var(--paper);font-size:clamp(1.5rem,2.1vw,1.95rem)}
.q-micro{font-size:.88rem;color:var(--ink-soft);margin-top:.2rem;max-width:30ch}
.qcard-tel .q-micro{color:rgba(247,247,248,.88)}

/* ============================================================
   K2 · CARD-OVER-BAND — el ::before ES la banda ink (cero
   .substrate encima, gotcha cap. 12 §1); zona SVG blueprint a la
   izquierda (claro sobre tinta), card del form pisando la banda
   ============================================================ */
.contact-split{
  position:relative;background:var(--paper);
  padding-block:clamp(1rem,2vw,1.6rem) clamp(.5rem,1vw,1rem);
  overflow:clip;
}
.contact-split::before{ /* LA BANDA (tinta fría, jamás negro puro) */
  content:"";position:absolute;left:0;right:0;
  /* top corto (pulido k5): la banda sube y mata el exceso de aire;
     bottom INTACTO — presupuesto banda→CTA 96-140px medido (k5/r1) */
  top:clamp(1.6rem,2.4vw,2.2rem);bottom:clamp(4.2rem,7vw,6.4rem);
  background:
    repeating-linear-gradient(to right,rgba(247,247,248,.035) 0 1px,transparent 1px 140px),
    #1B1C1E;
}
.split-ghost{ /* ghost a rate propio (§17.D) */
  position:absolute;left:0;right:0;top:38%;z-index:1;
  font-family:var(--font-d);font-weight:900;line-height:1;
  font-size:min(10vw,180px);text-align:center;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(247,247,248,.09);
  pointer-events:none;user-select:none;will-change:transform;
}
.split-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
}
/* ---- ZONA (sin iframes: SVG propio, ley t / CSP) ---- */
.zone{
  /* top más corto (pulido k5): la banda subió; sin esto el aire solo
     se mudaba ADENTRO de la banda. Bottom intacto (altura del split) */
  padding-block:clamp(4.5rem,6.5vw,6rem) clamp(7rem,11vw,10rem);
  color:var(--paper);
}
.zone-eyebrow{color:#E9B9B4}
.zone-h{
  font-size:clamp(1.9rem,3.2vw,3rem);color:var(--paper);
  margin-top:.7rem;letter-spacing:-.01em;
}
.zone-svg{width:100%;max-width:560px;height:auto;margin-top:1.6rem;display:block}
.zone-svg .zn-line{stroke:rgba(247,247,248,.55);fill:none;stroke-width:1.5}
.zone-svg .zn-shore{stroke:rgba(247,247,248,.75);fill:none;stroke-width:2}
.zone-svg .zn-grid{stroke:rgba(247,247,248,.10);stroke-width:1}
.zone-svg .zn-radius{fill:rgba(234,18,29,.10);stroke:#EA121D;stroke-width:1.5;stroke-dasharray:5 6}
.zone-svg .zn-dot{fill:var(--paper)}
.zone-svg .zn-lbl{
  font-family:var(--font-t);font-weight:600;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;fill:#D7D8DB;
}
.zone-svg .zn-lbl-water{fill:rgba(215,216,219,.55);font-size:11px;letter-spacing:.22em}
.zone-svg .zn-pin-body{fill:var(--accent)}
.zone-svg .zn-pin-blade{fill:#DFE1E4}
.zone-addr{
  font-style:normal;margin-top:1.5rem;font-size:.95rem;line-height:1.7;color:#D7D8DB;
}
.zone-addr strong{color:var(--paper);font-weight:600}
.zone-addr a{color:var(--paper);font-weight:600;border-bottom:1px solid rgba(247,247,248,.4);padding-bottom:1px;transition:border-color .25s,color .25s}
.zone-addr a:hover{color:#E9B9B4;border-color:#E9B9B4}
.zone-note{margin-top:.9rem;font-size:.8rem;color:var(--steel)}

/* ---- CARD DEL FORM (pisa la banda; fondo SÓLIDO, ley e3) ---- */
.form-card{
  position:relative;
  background:rgba(255,255,255,.97);
  border:1px solid var(--hairline);border-radius:14px;
  box-shadow:0 28px 70px rgba(20,21,25,.35);
  padding:clamp(1.6rem,2.6vw,2.5rem);
}
.form-card::before{ /* regla de cota al pie (esencia, susurro) */
  content:"";position:absolute;left:8%;right:8%;bottom:10px;height:6px;
  background:repeating-linear-gradient(to right,var(--hairline) 0 1px,transparent 1px 22px);
  pointer-events:none;
}
.cf-head{
  font-family:var(--font-d);font-weight:900;font-size:clamp(1.5rem,2.2vw,2rem);
  color:var(--ink);letter-spacing:-.01em;line-height:1.05;
}
.cf-sub{font-size:.9rem;color:var(--ink-soft);margin-top:.4rem}
.cf-status{font-size:.9rem;font-weight:600;color:var(--accent-deep);margin-top:.6rem;min-height:0}
.cf-status:empty{display:none}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.3rem}
.field{position:relative}
.field-full{grid-column:1 / -1}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:8px;
  padding:1.25rem .95rem .5rem;
  transition:border-color .25s,box-shadow .25s;
}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,28,30,.08);
}
/* labels flotantes REALES (exención CSS sancionada §12.12) */
.field label{
  position:absolute;left:.95rem;top:.95rem;
  font-size:.95rem;color:#7A7C82;pointer-events:none;
  transform-origin:0 0;
  transition:transform .2s var(--ease-house),color .2s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field.has-val label,
.field select:focus + label{
  transform:translateY(-.62rem) scale(.74);color:var(--ink-soft);
}
/* validación al blur, jamás al primer keystroke */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{
  border-color:var(--accent-deep);
}
.field select{appearance:none;cursor:pointer}
.field-sel::after{
  content:"";position:absolute;right:1rem;top:50%;margin-top:-3px;
  width:8px;height:8px;border-right:1.5px solid var(--ink-soft);
  border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px);pointer-events:none;
}
/* honeypot: display:none REAL (0705-n1) — el JS lo VACÍA, jamás bloquea */
.cf-hp-wrap{display:none}
.cf-btn{width:100%;margin-top:1.2rem;padding:1rem 1.6rem;font-size:1rem}
.cf-note{font-size:.85rem;color:var(--ink-soft);margin-top:.9rem;text-align:center}
.cf-note a{color:var(--accent-deep);font-weight:600}
.cf-note a:hover{color:var(--accent)}
/* confirmación GRANDE (0705-n3): form.prepend, fondo SÓLIDO */
.form-ok{
  grid-column:1 / -1;display:flex;align-items:center;gap:1rem;
  background:#FFFFFF;border:2px solid var(--accent);border-radius:12px;
  padding:1.2rem 1.3rem;margin-bottom:1.2rem;
  box-shadow:0 14px 34px rgba(234,18,29,.14);
}
.form-ok .ok-disc{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:700;
}
.form-ok .ok-h{font-family:var(--font-d);font-weight:900;font-size:1.15rem;color:var(--ink);line-height:1.15}
.form-ok .ok-p{font-size:.88rem;color:var(--ink-soft);margin-top:.15rem}

/* ============================================================
   K3 · CTA DE CIERRE — instancia del ⑤ del Home (inversión
   tonal respecto a la banda K2; main.js ya posee sus scrubs)
   ============================================================ */
.cta{
  position:relative;background:var(--paper);
  /* top más corto: presupuesto de aire banda→CTA 96-140px medido (k5/r1) */
  padding-block:clamp(4rem,6.5vw,6rem) clamp(4.6rem,8vw,7.5rem);
  overflow:clip;
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 24% 30%,rgba(255,255,255,.85),transparent 60%);
}
.cta-ghost{
  position:absolute;left:0;right:0;bottom:-.12em;z-index:0;
  font-family:var(--font-d);font-weight:900;line-height:1;
  font-size:min(11vw,200px);text-align:center;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(165,165,168,.22);
  pointer-events:none;user-select:none;will-change:transform;
}
.cta-inner{position:relative;z-index:2;max-width:860px;text-align:center;margin-inline:auto}
.cta-h{font-size:clamp(2rem,3.6vw,3.4rem);color:var(--ink);margin-top:1rem}
.cta-sub{max-width:56ch;margin:1.1rem auto 0;color:var(--ink-soft)}
.cta-btns{
  display:flex;justify-content:center;align-items:center;gap:.9rem;
  margin-top:2rem;white-space:nowrap;flex-wrap:nowrap;
}
.cta-eco{
  position:absolute;right:6%;bottom:7%;z-index:1;width:min(11vw,150px);
  will-change:transform;pointer-events:none;
}
.cta-ruler{
  position:absolute;right:3%;top:22%;bottom:22%;width:9px;z-index:1;
  border-right:1px solid var(--hairline);
  background:repeating-linear-gradient(to bottom,var(--steel) 0 1px,transparent 1px 26px);
  background-position:right;background-size:6px 100%;background-repeat:no-repeat;
  opacity:.6;pointer-events:none;
}

/* ============================================================
   RESPONSIVE (ley l: los ajustes viven en MQs; desktop intacto)
   ============================================================ */
@media (max-width:1080px){
  .split-grid{grid-template-columns:minmax(0,1fr)}
  .zone{padding-block:clamp(4.5rem,8vw,6rem) 0;max-width:640px}
  .form-card{margin-bottom:clamp(2rem,4vw,3rem)}
  .contact-split::before{bottom:0}
}
@media (max-width:760px){
  .banner{min-height:clamp(380px,56vh,520px)}
  .zone-svg .zn-lbl{font-size:18px}
  .zone-svg .zn-lbl-water{font-size:16px}
  .banner-h1{
    text-shadow:0 1px 2px rgba(20,21,25,.45),0 2px 10px rgba(20,21,25,.3);
  }
  .band-chip{display:none}
  .band-dots{right:2%}
  .cards3{grid-template-columns:1fr;margin-top:-52px;gap:.9rem}
  .q-micro{max-width:none}
  .cf-grid{grid-template-columns:1fr}
  .field-half{grid-column:auto}
  .zone-svg{max-width:none}
  /* el eco viaja ±46px con el scrub de main.js: en móvil SIEMPRE acabaría
     pisando la pila de botones (colisión medida) — fuera bajo 760 */
  .cta-eco{display:none}
  .cta-ruler{display:none}
}
@media (max-width:560px){
  .cta-btns{flex-direction:column;white-space:normal;align-items:stretch;max-width:330px;margin-inline:auto}
  .banner-crumb{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .banner-crumb a::after{transition:none}
}