/* ============================================================
   PROPH S.A.S — modal-propuesta.css
   Modal "Solicitar propuesta" (botón del nav). Reutiliza los estilos
   de la tarjeta/formulario de contacto.css.
   ============================================================ */

.modal-propuesta {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.modal-propuesta[hidden] { display: none; }

.modal-propuesta__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 17, 26, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.modal-propuesta.is-open .modal-propuesta__overlay { opacity: 1; }

.modal-propuesta__dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  /* Más opaco que la tarjeta de la sección: aquí no hay foto detrás */
  background: rgba(10, 36, 72, 0.96);
  border-radius: 14px;
  color: var(--color-text-light);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.modal-propuesta.is-open .modal-propuesta__dialog { opacity: 1; transform: none; }

.modal-propuesta__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.modal-propuesta__close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }
.modal-propuesta__dialog .contacto__card-title { padding-right: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  .modal-propuesta__overlay,
  .modal-propuesta__dialog,
  .modal-propuesta__close { transition: none; }
}