/* Modal de contacto · Arquitectura Blueprint limpia y aireada (Desktop + Móvil) */

.contact-modal{
  border:0;
  padding:0;
  margin:0;
  width:100vw;
  max-width:100vw;
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  background:rgba(4,6,8,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#f2f3f4;
  overflow:hidden;
}

.contact-modal[open]{
  display:grid;
  place-items:center;
  padding:clamp(0px, 2.5vw, 32px);
}

.contact-modal::backdrop{
  background:rgba(4,6,8,.76);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.contact-modal__shell{
  position:relative;
  width:min(1080px, 100%);
  max-height:min(760px, calc(100dvh - clamp(0px, 5vw, 64px)));
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  background:#080a0d;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 32px 80px rgba(0,0,0,.72);
  overflow:hidden;
}

[data-theme="light"] .contact-modal__shell{
  background:#f4f2ef;
  color:#141619;
  border-color:rgba(20,22,25,.18);
}

/* BARRA SUPERIOR LIMPIA */
.contact-modal__top{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px clamp(20px, 3vw, 36px);
  background:#06080a;
  color:#f2f3f4;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.contact-modal__top-brand{
  font:650 11px/1.2 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(242,243,244,.82);
  display:flex;
  align-items:center;
  gap:8px;
}

.contact-modal__top-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.contact-modal__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:36px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  color:#ffffff;
  font:600 18px/1 "Geist Sans",system-ui,sans-serif;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.contact-modal__close:hover{
  border-color:var(--orange,#FF6600);
  background:rgba(255,102,0,.14);
  color:var(--orange,#FF6600);
}
.contact-modal__close-esc{
  font:650 11px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.16em;
  color:rgba(255,255,255,.62);
}

/* PANEL DE 2 COLUMNAS */
.contact-modal__panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(270px, .68fr) minmax(0, 1.32fr);
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* COLUMNA IZQUIERDA (ASIDE EDITORIAL LIMPIO) */
.contact-modal__aside{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:32px;
  padding:clamp(32px, 4.5vh, 48px) clamp(26px, 3vw, 40px);
  background:#0a0d11;
  border-right:1px solid rgba(255,255,255,.1);
}

[data-theme="light"] .contact-modal__aside{
  background:#ece9e4;
  border-right-color:rgba(20,22,25,.12);
}

.contact-modal__kicker{
  margin:0 0 14px;
  font:650 11px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange,#FF6600);
}

.contact-modal__aside h2{
  margin:0 0 14px;
  font:650 clamp(28px, 3vw, 40px)/1.05 "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.04em;
  color:var(--charcoal,#f2f3f4);
}
[data-theme="light"] .contact-modal__aside h2{
  color:#141619;
}

.contact-modal__lead{
  margin:0;
  max-width:30ch;
  font:400 14.5px/1.55 "Geist Sans",system-ui,sans-serif;
  color:rgba(242,243,244,.72);
}
[data-theme="light"] .contact-modal__lead{
  color:rgba(20,22,25,.74);
}

.contact-modal__aside-foot{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
}
[data-theme="light"] .contact-modal__aside-foot{
  border-top-color:rgba(20,22,25,.12);
}

.contact-modal__aside-direct{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.contact-modal__aside-direct a{
  font:600 13.5px/1.3 "Geist Sans",system-ui,sans-serif;
  color:#ffffff;
  text-decoration:none;
  width:fit-content;
  transition:color .2s ease;
}
[data-theme="light"] .contact-modal__aside-direct a{
  color:#141619;
}
.contact-modal__aside-direct a:hover{
  color:var(--orange,#FF6600);
}

.contact-modal__aside-cities{
  margin:0;
  font:600 10.5px/1.3 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(242,243,244,.48);
}
[data-theme="light"] .contact-modal__aside-cities{
  color:rgba(20,22,25,.54);
}

/* COLUMNA DERECHA (FORMULARIO PRINCIPAL DESPEJADO) */
.contact-modal__form{
  position:relative;
  z-index:2;
  padding:clamp(28px, 4.2vh, 44px) clamp(26px, 3.8vw, 48px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  background:#0d1015;
  color:#ffffff;
}

/* SELECTOR DE PÍLDORAS DE ÁREA */
.contact-modal__pills-block{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact-modal__pills-label{
  font:650 11px/1.1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange,#FF6600);
}
.contact-modal__pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.contact-modal__pill{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  color:rgba(242,243,244,.82);
  padding:9px 14px;
  font:600 12px/1.15 "Geist Sans",system-ui,sans-serif;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.contact-modal__pill:hover{
  border-color:rgba(255,102,0,.7);
  color:#ffffff;
}
.contact-modal__pill.is-active{
  border-color:var(--orange,#FF6600);
  background:rgba(255,102,0,.16);
  color:#ffffff;
}

/* CAMPOS EN CAJAS ARQUITECTÓNICAS */
.contact-modal__row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.contact-modal__row--3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.contact-modal__field{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  transition:border-color .22s ease, background .22s ease;
}
.contact-modal__field:hover{
  border-color:rgba(255,255,255,.32);
}
.contact-modal__field:focus-within{
  border-color:var(--orange,#FF6600);
  background:rgba(255,102,0,.05);
}

.contact-modal__field label{
  margin:0;
  font:650 10.5px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(242,243,244,.58);
}

.contact-modal__field input,
.contact-modal__field textarea{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  border-radius:0;
  color:#ffffff;
  padding:2px 0 0;
  font:500 15.5px/1.35 "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.01em;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}

.contact-modal__field textarea{
  min-height:76px;
  resize:vertical;
}

.contact-modal__field input::placeholder,
.contact-modal__field textarea::placeholder{
  color:rgba(255,255,255,.32);
}

/* PIE DEL FORMULARIO (CONSENTIMIENTO + BOTÓN EN UNA FILA) */
.contact-modal__footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 24px;
  padding-top:4px;
}

.contact-modal__consent{
  display:flex;
  gap:10px;
  align-items:center;
  margin:0;
  font:400 12.5px/1.4 "Geist Sans",system-ui,sans-serif;
  color:rgba(255,255,255,.72);
  cursor:pointer;
}
.contact-modal__consent input{
  width:17px;
  height:17px;
  margin:0;
  flex:0 0 auto;
  accent-color:var(--orange,#FF6600);
  cursor:pointer;
}
.contact-modal__consent a{
  color:var(--orange,#FF6600);
  text-decoration:none;
}
.contact-modal__consent a:hover{
  text-decoration:underline;
}

.contact-modal__hint{
  margin:0;
  font:500 12.5px/1.45 "Geist Sans",system-ui,sans-serif;
  color:var(--orange,#FF6600);
}
.contact-modal__hint.is-success{
  color:#4ade80;
}
[data-theme="light"] .contact-modal__hint.is-success{
  color:#15803d;
}
.contact-modal__hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

.contact-modal[open] .contact-modal__shell{
  animation:contactIn .38s cubic-bezier(.16,1,.3,1) both;
}

@keyframes contactIn{
  from{opacity:0;transform:translateY(12px) scale(.99)}
  to{opacity:1;transform:none}
}

/* MÓVIL Y TABLET */
@media (max-width:960px){
  .contact-modal[open]{
    padding:0;
  }
  .contact-modal__shell{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    border:0;
  }
  .contact-modal__top{
    position:sticky;
    top:0;
    padding:12px 16px;
  }
  .contact-modal__close-esc{
    display:none;
  }
  .contact-modal__close{
    width:38px;
    height:38px;
    padding:0;
    flex:0 0 38px;
  }
  .contact-modal__panel{
    grid-template-columns:1fr;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .contact-modal__form{
    order:1;
    padding:20px 16px 24px;
    gap:14px;
  }
  .contact-modal__aside{
    order:2;
    padding:22px 16px calc(28px + env(safe-area-inset-bottom));
    border-right:0;
    border-top:1px solid rgba(255,255,255,.12);
    gap:20px;
  }
  .contact-modal__pills{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
  }
  .contact-modal__pill{
    text-align:left;
    padding:9px 10px;
    font-size:11.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .contact-modal__row,
  .contact-modal__row--3{
    grid-template-columns:1fr;
    gap:10px;
  }
  .contact-modal__field input,
  .contact-modal__field textarea{
    font-size:16px;
  }
  .contact-modal__footer{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .contact-modal__submit{
    width:100%;
    justify-content:space-between;
  }
}

@media (prefers-reduced-motion:reduce){
  .contact-modal[open] .contact-modal__shell{animation:none}
}