/* Ventana de «Quiero ser distribuidor». Reusa los estilos del formulario de
   contacto (.field, .field-row, .err, .trampa); esto es solo el contenedor. */

.modal-sitio{
  border:none;padding:0;background:transparent;
  /* Centrada de verdad. El <dialog> trae su propio centrado del navegador,
     pero no todos lo aplican igual en vertical: con position/inset/margin
     queda al medio de la pantalla en todos. */
  position:fixed;inset:0;margin:auto;
  width:min(620px,calc(100vw - 2rem));
  height:fit-content;
  max-height:calc(100vh - 3rem);
  /* En el iPhone 100vh incluye lo que tapa la barra de Safari y el botón de
     enviar quedaba debajo; dvh es el alto visible de verdad. */
  max-height:calc(100dvh - 3rem);
}
.modal-sitio::backdrop{background:rgba(13,13,15,.62)}

.modal-sitio-caja{
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 34px 70px rgba(0,0,0,.4);
  display:flex;flex-direction:column;max-height:calc(100vh - 3rem);
  max-height:calc(100dvh - 3rem);
}

.modal-sitio-cab{
  display:flex;align-items:flex-start;gap:1rem;
  padding:26px 28px 18px;border-bottom:1px solid #e6e7ea;
}
.modal-sitio-cab h2{font-size:1.5rem;line-height:1.2;margin:.2rem 0 .35rem}
.modal-sitio-cab p{color:#7a7d84;font-size:.94rem;margin:0}

.modal-sitio-cerrar{
  flex:0 0 34px;width:34px;height:34px;margin-left:auto;
  display:grid;place-items:center;cursor:pointer;
  background:#f2f2f3;border:none;border-radius:50%;color:#3a3c42;
  transition:.18s ease;
}
.modal-sitio-cerrar:hover{background:#000;color:#fff}

.modal-sitio-cuerpo{padding:22px 28px;overflow-y:auto}
.modal-sitio-pie{
  display:flex;gap:.7rem;padding:18px 28px 24px;
  border-top:1px solid #e6e7ea;background:#fafafb;
}

@media (max-width:600px){
  .modal-sitio-cab{padding:20px 20px 14px}
  .modal-sitio-cuerpo{padding:18px 20px}
  .modal-sitio-pie{padding:14px 20px 18px;flex-direction:column}
  .modal-sitio-pie .btn{width:100%;justify-content:center}
}