/* =====================================================================
   MC SYSTEMS · contact.css — CONTACT (F4, dueño exclusivo de esta página)
   Arquetipos: banner B1 PILL ROMPE-MARCO (cap.13 §13) + C1 CENTRALITA DE
   OBRA (§17) · card-over-band · zona Austin SVG (sin iframes) · CTA ⑤
   NOTA ley j9a: cta-band se INSTANCIA del home; su CSS se duplica aquí
   porque home.css no se carga en interiores (consolidación → PENDING-GLOBAL)
   ===================================================================== */

html { scroll-padding-top: 96px; }

/* ---------------- K0 · BANNER B1 (38-45vh, abre oscuro §12.11) ---------------- */
/* overflow visible + clipper interno: la pill rompe-marco DEBE sangrar el borde
   (el clip vive en .cb-frame; z-index 5 pone la pill sobre la sección siguiente) */
.cbanner { position:relative; z-index:5; height:44vh; min-height:340px; max-height:520px;
  background:var(--ink-2); }
.cb-frame { position:absolute; inset:0; overflow:hidden; }
.cb-media { position:absolute; inset:-8% 0; }
.cb-media img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.cb-scrim { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,18,32,.62) 0%, rgba(14,18,32,.5) 46%, rgba(14,18,32,.66) 100%); }
.cb-ghost { position:absolute; top:12%; right:6%; z-index:2; font-family:var(--fd);
  font-weight:700; font-size:min(13vw,210px); line-height:1; color:transparent;
  -webkit-text-stroke:2px rgba(245,247,251,.85); opacity:.12; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; pointer-events:none; }
.cb-content { position:relative; z-index:3; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 6vw;
  padding-top:3vh; }
.cb-eyebrow { font-weight:600; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); }
.cb-eyebrow .d { color:#FF6B71; }
.cbanner h1 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.6rem,5.5vw,5.6rem); line-height:1; letter-spacing:.01em;
  color:var(--paper); margin-top:10px; }
.cbanner h1 em { font-style:normal; color:var(--ice); }
.cb-sub { margin-top:12px; font-size:15px; color:var(--steel); max-width:46ch; }
/* pill rompe-marco: breadcrumb DENTRO de pill de acento cortada ~50% por el
   borde inferior (B1); su rojo = puente al acento de las tarjetas K1 */
.cb-pill { position:absolute; left:50%; bottom:0; z-index:4;
  transform:translate(-50%,50%); }
.cb-pill .crumb { display:flex; align-items:center; gap:10px; background:var(--heat);
  color:#fff; border-radius:999px; padding:12px 26px; font-family:var(--fd);
  font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 14px 34px rgba(214,1,10,.32); white-space:nowrap; }
.cb-pill .crumb a { color:#fff; text-decoration:none; position:relative; }
.cb-pill .crumb a::after { content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:1.5px; background:#fff; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .25s var(--ease); }
.cb-pill .crumb a:hover::after, .cb-pill .crumb a:focus-visible::after { transform:scaleX(1); }
.cb-pill .crumb .d { opacity:.85; }

/* ---------------- K1 · TRES TARJETAS (teléfono DOMINANTE) ---------------- */
.paths { position:relative; background:var(--paper);
  padding:clamp(5.4rem,8vw,7.5rem) 0 clamp(3.8rem,5.2vw,5.5rem); }
/* ancho cómodo: casi todo el contenedor con margen consistente (~3vw) a los lados
   (ley 0720-a #12: tarjetas de contacto full-width, no cajas chicas centradas) */
.paths-grid { width:min(94vw,1500px); margin:0 auto; display:grid;
  grid-template-columns:1.14fr 1fr 1fr; gap:clamp(1.2rem,2vw,2rem); align-items:stretch; }
.pcard { position:relative; display:flex; flex-direction:column; gap:12px;
  border-radius:22px; padding:clamp(1.9rem,2.6vw,2.8rem); text-decoration:none;
  background:#fff; border:1px solid var(--hairline);
  box-shadow:0 16px 44px rgba(16,20,31,.08); color:var(--ink); }
.pcard .p-ico { width:44px; height:44px; }
.pcard .p-ico path, .pcard .p-ico circle, .pcard .p-ico rect { fill:none;
  stroke:var(--cold); stroke-width:1.8; stroke-linecap:square; stroke-linejoin:miter; }
.pcard .p-eyebrow { font-weight:600; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cold-deep); }
.pcard .p-data { display:block; overflow:hidden; }
.pcard .p-data span { display:block; font-family:var(--fd); font-weight:700;
  font-size:clamp(1.35rem,1.8vw,1.7rem); line-height:1.1; text-transform:uppercase;
  font-variant-numeric:tabular-nums; }
.pcard .p-micro { font-size:13.5px; line-height:1.6; color:#3A4152; }
/* la DOMINANTE: superficie de acento (teléfono convierte 10×) */
.pcard-tel { background:var(--heat); border-color:var(--heat);
  box-shadow:0 22px 56px rgba(214,1,10,.28); color:#fff; }
.pcard-tel .p-ico path, .pcard-tel .p-ico circle { stroke:#fff; }
.pcard-tel .p-eyebrow { color:rgba(255,255,255,.85); }
.pcard-tel .p-micro { color:rgba(255,255,255,.88); }

/* ---------------- K2 · CARD-OVER-BAND (banda ink + form elevado) ---------------- */
.csplit { position:relative; background:var(--paper);
  padding:0 0 clamp(4.4rem,7vw,7rem); }
/* la banda ES el ::before (gotcha cap.12 §1: jamás .substrate encima);
   la cabeza vive DENTRO de la banda: cero texto a caballo del borde */
.csplit::before { content:""; position:absolute; left:0; right:0;
  top:clamp(2.6rem,4vw,4rem); bottom:clamp(2.4rem,4vw,4rem); background:var(--ink-2); }
.csplit-head { position:relative; z-index:2; width:min(92vw,1240px);
  margin:0 auto clamp(2.2rem,3.6vw,3.4rem);
  padding-top:clamp(5.8rem,9vw,8.6rem); }
.csplit-head .kicker { color:var(--steel); }
.csplit-head .kicker .d { color:#FF6B71; }
.csplit-head h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.8rem); line-height:1.03; margin-top:12px; max-width:18ch;
  color:var(--paper); }
.csplit-head h2 em { font-style:normal; color:var(--ice); }
.csplit-grid { position:relative; z-index:2; width:min(92vw,1240px); margin:0 auto;
  display:grid; grid-template-columns:45fr 55fr; gap:clamp(1.8rem,3.4vw,3.6rem);
  align-items:start; }

/* zona Austin (SVG propio, sin iframes) + NAP */
.zone-panel { color:var(--steel); padding-top:clamp(.6rem,1.4vw,1.2rem); }
.zone-panel .kicker { color:var(--steel); }
.zone-panel .kicker .d { color:#FF6B71; }
.zone-map { margin-top:14px; border:1px solid rgba(199,205,214,.22); border-radius:18px;
  background:rgba(245,247,251,.04); padding:clamp(.8rem,1.4vw,1.2rem); }
.zone-map svg { width:100%; height:auto; display:block; }
.zone-cap { margin-top:12px; font-size:12.5px; line-height:1.6; color:#8E96A8; }
.zone-nap { margin-top:clamp(1.4rem,2.4vw,2rem); font-size:14.5px; line-height:2.05;
  color:var(--steel); }
.zone-nap a { color:var(--paper); font-weight:600; text-decoration:none; }
.zone-nap a:hover, .zone-nap a:focus-visible { color:#fff; }
.zone-nap b { color:var(--paper); font-weight:600; }

/* el card del form PISA la banda */
.form-card { position:relative; background:var(--paper); border:1px solid var(--hairline);
  border-radius:22px; padding:clamp(1.6rem,3vw,2.8rem);
  box-shadow:0 30px 70px rgba(10,13,22,.38); }
.form-card > .fc-eyebrow { font-weight:600; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cold-deep); }
.form-card > h3 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.1; margin:8px 0 4px; }
.form-card > .fc-sub { font-size:13.5px; color:#3A4152; margin-bottom:18px; }

.cform { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.cfield { display:flex; flex-direction:column; gap:6px; }
.cfield.wide { grid-column:1 / -1; }
.cfield label { font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cold-deep); }
.cfield input, .cfield select, .cfield textarea { font-family:var(--fu); font-size:15px;
  color:var(--ink); background:#fff; border:1px solid var(--hairline); border-radius:10px;
  padding:12px 14px; width:100%; }
.cfield textarea { min-height:110px; resize:vertical; }
.cfield input:focus-visible, .cfield select:focus-visible, .cfield textarea:focus-visible {
  outline:2px solid var(--cold); outline-offset:1px; }
.cfield input:user-invalid, .cfield select:user-invalid, .cfield textarea:user-invalid {
  border-color:var(--heat-deep); }
/* honeypot 0705-n1: contenedor display:none (JAMÁS visually-hidden), id no semántico,
   el JS lo VACÍA al enviar — nunca bloquea */
.hp-wrap { display:none; }
.cform .btn-heat { grid-column:1 / -1; justify-content:center; border:0; cursor:pointer;
  font-size:15px; padding:16px 26px; }
.fc-alt { grid-column:1 / -1; font-size:13px; color:#3A4152; text-align:center; }
.fc-alt a { color:var(--heat-deep); font-weight:600; text-decoration:none; }
.fc-alt a:hover, .fc-alt a:focus-visible { text-decoration:underline; }

/* confirmación GRANDE 0705-n3 (form.prepend, fondo SÓLIDO) */
.form-ok { grid-column:1 / -1; display:flex; align-items:center; gap:16px;
  background:#fff; border:1.5px solid var(--cold); border-radius:14px;
  padding:18px 20px; }
.form-ok .ok-disc { flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--heat); display:grid; place-items:center; }
.form-ok .ok-disc svg { width:20px; height:20px; }
.form-ok h4 { font-family:var(--fd); font-weight:700; font-size:1.15rem;
  text-transform:uppercase; color:var(--ink); }
.form-ok p { font-size:13.5px; color:#3A4152; margin-top:2px; }

/* NOTIFICACIÓN PEQUEÑA INLINE bajo el form (ley 0720-d b) — el envío es AJAX, la
   página nunca navega: el acuse vive AQUÍ, discreto, en el idioma del sistema.
   Verde del sistema para el éxito; rojo tinta (--heat-deep) para el error. */
.f-note { display:flex; align-items:flex-start; gap:12px;
  margin-top:14px; padding:12px 14px; border-radius:12px;
  opacity:0; transform:translateY(8px);
  transition:opacity .38s var(--ease), transform .38s var(--ease); }
.f-note:empty { display:none; }
.f-note--in { opacity:1; transform:none; }
.f-note i { flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-style:normal; color:#fff;
  font-family:var(--fd); font-weight:700; font-size:14px; line-height:1; }
.f-note span { font-size:13.5px; font-weight:600; line-height:1.45; }
.f-note--ok  { background:#E9F3ED; border:1.5px solid rgba(11,107,62,.34); }
.f-note--ok i { background:#0B6B3E; }
.f-note--ok span { color:#0A3A24; }
.f-note--err { background:#FCEDEC; border:1.5px solid rgba(168,0,8,.32); }
.f-note--err i { background:var(--heat-deep); }
.f-note--err span { color:#6E1611; }
@media (prefers-reduced-motion: reduce) {
  .f-note { transition:none; transform:none; }
}

/* ---------------- Q&A corto (AEO respuesta-directa; FAQPage vive en /about/) ------- */
.qa { background:var(--paper-2); padding:clamp(3.4rem,6vw,5.5rem) 0; }
.qa-inner { width:min(92vw,1100px); margin:0 auto; }
.qa-inner .kicker { color:var(--cold-deep); }
.qa-grid { margin-top:clamp(1.4rem,2.4vw,2rem); display:grid;
  grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem); }
.qa-item h3 { font-family:var(--fd); font-weight:600; font-size:1.02rem; line-height:1.3;
  color:var(--ink); }
.qa-item p { margin-top:8px; font-size:13.5px; line-height:1.65; color:#3A4152; }
.qa-item p b { color:var(--heat-deep); }

/* ---------------- K3 · CTA ⑤ (instancia del home; ver PENDING-GLOBAL) ------------- */
.cta-band { position:relative; height:64vh; min-height:460px; overflow:hidden;
  background:var(--ink-2); }
.cta-photo { position:absolute; inset:-10% 0; }
.cta-photo img { width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.cta-scrim { position:absolute; inset:0; background:rgba(14,18,32,.8); }
.cta-inner { position:relative; z-index:3; width:min(92vw,1200px); margin:0 auto;
  height:100%; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.cta-inner .kicker { color:var(--steel); }
.cta-inner .kicker .d { color:#FF6B71; }
.cta-inner h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.9rem); line-height:1.03; color:var(--paper); }
.cta-inner h2 em { font-style:normal; color:var(--ice); }
.cta-inner p { font-size:15px; color:var(--steel); max-width:52ch; }
.cta-btns { display:flex; gap:14px; flex-wrap:nowrap; }

/* ---------------- MOBILE (ley l) ---------------- */
@media (max-width:900px) {
  .paths-grid { grid-template-columns:1fr; width:min(92vw,560px); }
  .csplit-grid { grid-template-columns:1fr; width:min(92vw,620px); }
  .form-card { order:-1; } /* transaccional: el form primero en móvil */
  .zone-panel { padding-top:1.2rem; }
  .qa-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .cbanner { height:auto; min-height:320px; padding:0; }
  .cb-content { padding-top:9vh; padding-bottom:8vh; }
  .cb-ghost { top:8%; right:4%; font-size:min(20vw,140px); }
  .cform { grid-template-columns:1fr; }
  .cta-band { height:auto; min-height:0; padding:clamp(3.4rem,10vw,5rem) 0; }
  .cta-inner { height:auto; }
  .cta-btns { flex-wrap:wrap; }
}
@media (max-width:560px) {
  .cb-pill .crumb { padding:10px 18px; font-size:11px; letter-spacing:.1em; }
  .form-card { padding:1.3rem 1.1rem; }
}

/* reduced-motion: la página compone estática (los pre-estados los pone JS;
   sin JS/motion no hay pre-estados aquí) */
@media (prefers-reduced-motion: reduce) {
  .cbanner .rv, .paths .rv, .csplit .rv, .qa .rv, .cta-band .rv {
    opacity:1!important; transform:none!important; }
}