/* ============================================================
   MISSION HEALTH INSURANCE · contacto.css  (/contacto/ · /en/contact/)
   Banner B4 ink -> K1 tres tarjetas SOLIDAS solapando (-70px, telefono
   dominante + chip WhatsApp) -> K2 banda ink: mapa fachada-lazy A COLOR
   (pin llave-corazon que ATERRIZA) + card de formulario (ley 0705-n) ->
   CTA -> footer
   ============================================================ */

/* banner de contacto: mas aire abajo para que las tarjetas muerdan zona vacia */
.banner--overlap .banner-inner{padding-bottom:clamp(6.5rem,12vh,8.5rem)}

/* ---------- K1 · TRES TARJETAS (glass SOLIDO .92 · e3) ---------- */
.kcards{position:relative;z-index:5;background:transparent;padding:0 var(--inset) var(--splg)}
.kcards-row{position:relative;width:min(100%,1360px);margin-inline:auto;margin-top:-70px;
  display:grid;grid-template-columns:1.16fr 1fr 1fr;gap:clamp(1rem,1.6vw,1.5rem);align-items:stretch}
.k-card{position:relative;display:flex;flex-direction:column;gap:.45rem;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.92);border:1px solid var(--hairline);color:var(--ink);
  padding:clamp(1.4rem,2vw,1.9rem);box-shadow:0 40px 70px -42px rgba(13,27,46,.65);
  transition:border-color .25s,box-shadow .25s}
.k-card:hover{border-color:rgba(12,98,181,.4)}
.k-card--tel{background:linear-gradient(160deg,#FFFFFF 0%,#EFF5FB 100%);border:1.5px solid rgba(205,7,6,.28)}
.k-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin-bottom:.5rem;
  background:rgba(12,98,181,.09);color:var(--blue)}
.k-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.k-card--tel .k-ico{background:radial-gradient(circle at 35% 30%,#F4CE7A,#B7842B);color:#3a1e02}
.k-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink)}
.k-card--tel .k-eyebrow{color:var(--red-ink)}
.k-data{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.1;color:var(--ink)}
.k-card--tel .k-data{font-size:clamp(1.5rem,2.2vw,2rem)}
.k-note{font-size:.92rem;color:var(--ink-soft);max-width:30ch}
.k-wa{display:inline-flex;align-items:center;gap:.55rem;margin-top:.9rem;align-self:flex-start;
  min-height:var(--tap);padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;
  border:1.5px solid rgba(12,98,181,.4);color:var(--blue-ink);font-weight:600;font-size:.9rem;
  transition:background-color .25s,border-color .25s}
.k-wa:hover{background:rgba(12,98,181,.08);border-color:var(--blue)}
.k-wa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- K2 · banda ink: mapa + card del form ---------- */
.ksplit{position:relative;overflow:clip;background:var(--band);color:var(--on-dark);padding:var(--splg) var(--inset)}
.ksplit::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 80% at 16% 22%,rgba(12,98,181,.14),transparent 65%),
  radial-gradient(46% 60% at 88% 90%,rgba(205,7,6,.06),transparent 70%)}
.ksplit .ghost-word{left:1%;top:2%;font-size:min(15vw,220px)}
.ksplit-inner{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.2rem,4.5vw,4.5rem);align-items:start}

/* la ZONA / mapa: fachada lazy (0704-g2) que carga el mapa REAL A COLOR (0704-f4) */
.kzone .eyebrow{margin-bottom:1rem}
.kzone h2{margin-bottom:1.6rem;color:var(--on-dark)}
.kmap{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hairline-dark);
  box-shadow:0 44px 80px -46px rgba(0,0,0,.7);background:var(--band-2)}
.kmap-facade{position:relative;min-height:clamp(340px,34vw,440px);display:grid;place-content:center;justify-items:center;
  gap:.9rem;padding:2rem;text-align:center;
  background-image:
    radial-gradient(rgba(245,248,251,.1) 1.2px,transparent 1.3px),
    linear-gradient(160deg,#152741 0%,#0D1B2E 100%)}
.kmap-facade{background-size:24px 24px,cover}
.kmap-streets{position:absolute;inset:0;pointer-events:none;color:rgba(245,248,251,.14)}
.kmap-streets path{fill:none;stroke:currentColor;stroke-width:1.6}
.kmap-ring{position:absolute;left:50%;top:38%;translate:-50% -50%;width:170px;height:170px;pointer-events:none;color:rgba(127,182,236,.55)}
.kmap-ring circle{fill:rgba(12,98,181,.1);stroke:currentColor;stroke-width:2;stroke-dasharray:4 8;stroke-linecap:round}
.kpin{position:relative;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:#fff;box-shadow:0 24px 44px -18px rgba(0,0,0,.75);color:var(--red)}
.kpin svg{width:32px;height:auto}
.kpin::after{content:"";position:absolute;left:50%;bottom:-9px;translate:-50%;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
.kmap-addr{position:relative;color:var(--on-dark);font-size:1rem;line-height:1.5}
.kmap-addr b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.2rem}
.kmap-addr span{color:var(--on-dark-mut)}
.kmap-btn{position:relative;font-size:.95rem}
.kmap-iframe{display:block;width:100%;height:clamp(340px,34vw,440px);border:0}
.kzone-chip{margin-top:1.4rem}

/* el CARD del form: claro, elevado, pisa la banda */
.kform-card{position:relative;background:#FFFFFF;color:var(--ink);border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.5);box-shadow:0 60px 110px -50px rgba(0,0,0,.8);
  padding:clamp(1.8rem,2.8vw,2.8rem)}
.kform-card .eyebrow{margin-bottom:.8rem}
.kform-card h2{margin-bottom:1.6rem}
.cform{display:grid;gap:1.05rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.f-field{position:relative}
.f-field input,.f-field select,.f-field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:rgba(13,27,46,.035);border:1.5px solid var(--hairline);border-radius:14px;
  padding:1.45rem .95rem .55rem;min-height:var(--tap);transition:border-color .25s,background-color .25s}
.f-field textarea{resize:vertical;min-height:110px}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.f-field label{position:absolute;left:1rem;top:1.02rem;font-size:1rem;color:var(--ink-mut);pointer-events:none;
  transition:transform .2s var(--ease-house),font-size .2s,color .2s;transform-origin:left top}
.f-field input:focus~label,.f-field input:not(:placeholder-shown)~label,
.f-field textarea:focus~label,.f-field textarea:not(:placeholder-shown)~label,
.f-field--select select:focus~label,.f-field--select select[data-empty="0"]~label{
  transform:translateY(-.62rem);font-size:.72rem;letter-spacing:.06em;color:var(--blue-ink)}
.f-field input:user-invalid,.f-field select:user-invalid{border-color:var(--red)}
.f-field--select select{appearance:none;cursor:pointer}
.f-field--select::after{content:"";position:absolute;right:1.1rem;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--ink-mut);border-bottom:2px solid var(--ink-mut);transform:rotate(45deg);pointer-events:none}
.f-status{min-height:1.3em;font-size:.9rem;font-weight:600;color:var(--red-ink)}
.f-send{justify-self:start}
.f-fine{font-size:.8rem;color:var(--ink-mut);max-width:52ch}
/* confirmacion GRANDE (0705-n3): fondo SOLIDO, dentro del form via prepend */
.sent-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;
  background:#EAF3EC;border:1.5px solid #9CC4A6;border-radius:var(--radius);padding:1.1rem 1.3rem}
.sent-card i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:#2E7D43;color:#fff;font-style:normal;font-size:1.4rem;font-weight:700}
.sent-card b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:#1C3A24}
.sent-card span{display:block;font-size:.94rem;color:#33523C;margin-top:.15rem}

/* ---------- MOBILE / TABLET (ley l · telefono PRIMERO en 1 col) ---------- */
@media (max-width:1000px){
  .kcards-row{grid-template-columns:1fr;max-width:560px}
  .ksplit-inner{grid-template-columns:1fr}
  .kzone{max-width:640px}
}
@media (max-width:560px){
  .kcards-row{margin-top:-56px}
  .f-row{grid-template-columns:1fr}
  .kmap-facade{min-height:320px}
  .kmap-iframe{height:320px}
}