html.no-scroll, body.no-scroll { overflow:hidden; height:100%; }

.modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:2147483646;
  padding:clamp(12px,2vh,24px) 20px;
  overscroll-behavior:contain; touch-action:none;
}
.modal[aria-hidden="false"]{ display:flex; }

.modal-card{
  --card-pad-x: 38px;
  background:#fff; color:#0b1631;
  width:min(960px,96vw); max-height:92vh;
  border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.35);
  overflow:hidden; display:flex; flex-direction:column;
}

/* Empuje SUAVE por defecto cuando está el portal (desktop) */
.modal-card.portal-open{ margin-top:28px; }

.modal-card *, .modal-card *::before, .modal-card *::after{ box-sizing:border-box; }

.modal-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:14px var(--card-pad-x);
  background:#fff; border-bottom:1px solid #eef2f7;
}
.modal-title{ margin:0; font-weight:700; text-transform: ; font-size: 32px; text-shadow: #000 0px 1px 1px; color:#f5c400; }
.modal-close{
  margin-left:auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:0; background:#fff; color:#0b1631; font-size:20px; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.modal-close:hover{ background:#f3f6ff; }

.modal-body{
  padding:14px var(--card-pad-x) 22px;
  overflow:auto; max-height:calc(92vh - 56px);
}

/* Form */
.modal-card input{
  width:100%; padding:12px 14px; border:1px solid #d7dbe7; border-radius:10px;
  line-height:1.25; font-size:15px; background:#fff; color:#0b1631;
}
.modal-card input::placeholder{ color:#9aa5b1; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
.grid-3>*{ min-width:0; }
.btn-primary{ width:100%; padding:12px; background:#0b5cff; color:#fff; border:0; border-radius:10px; margin-top:18px; font-weight:600; }

/* Iframe */
.frame-wrap{ position:relative; width:100%; height:min(70vh,780px); background:#0b1631; border-top:1px solid #e9eef7; }
.frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.hint{ font-size:.92rem; opacity:.75; margin:10px var(--card-pad-x) 0; }

body.no-scroll .floating-call,
body.no-scroll .call-button{ opacity:.15; pointer-events:none; }

/* ====== TABLET / ALTOS BAJOS ====== */
@media (max-width:840px), (max-height:740px){
  .modal{ align-items:flex-start; padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)) 16px; }
  .modal-card{
    --card-pad-x: 20px;
    width:min(720px,100%);
    max-height:calc(100vh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    border-radius:14px;
  }
  .modal-header{ padding:12px var(--card-pad-x); }
  .modal-body{
    padding:14px var(--card-pad-x) 18px;
    max-height:calc(92vh - 58px);
  }
  .frame-wrap{ height:62vh; }

  /* Cuando está el portal abierto: bajar header y recalcular body */
  .modal-card.portal-open .modal-header{ padding-top:40px !important; }
  .modal-card.portal-open .modal-body{  max-height:calc(92vh - 96px) !important; }
}

/* ====== MÓVIL < 767px ====== */
@media (max-width:767px){
  .modal-card{ --card-pad-x:16px; width:96vw; border-radius:12px; margin-top: 80px; }
  .modal-title{ font-size:20px; }

  .modal-body{ padding:12px var(--card-pad-x) 16px; max-height:calc(92vh - 54px); }
  .grid-3{ grid-template-columns:1fr; }

  /* Empuje extra SOLO en móvil para el portal largo */
  .modal-card.portal-open{ margin-top:56px; }

  /* Iframe ligeramente más bajo para que todo quepa */
  .frame-wrap{ height:58vh; }
}

@media (min-width: 768px) and (max-width: 1900px){
  /* evita que vuelva a centrarse verticalmente en este rango */
  .modal{ align-items: flex-start !important; }

  .modal-card.portal-open{
    margin-top: 72px !important; /* ajusta a gusto (60–96px) */
  }

  .modal-card.portal-open .modal-header{
    padding-top: 32px !important; /* baja la X un poco */
  }

  .modal-card.portal-open .modal-body{
    /* recalcula alto útil del body por el header más alto */
    max-height: calc(92vh - 88px) !important;
  }

  /* El iframe un pelín más bajo para que todo quepa cómodo */
  .frame-wrap{ height: 60vh; }
}

/* === Empuje para el modal 1 (sin portal-open) === */

/* MÓVIL < 767px: ya empujas .modal-card con 80px, lo hago explícito para el modal 1 */
@media (max-width:767px){
  .modal-card:not(.portal-open){ margin-top:80px !important; }  /* coincide con tu regla actual */
}

/* TABLET / ALTOS BAJOS */
@media (max-width:840px), (max-height:740px){
  .modal-card:not(.portal-open){ margin-top:56px !important; }  /* igual que el portal */
}



/* RANGO 768–1900: ya bajas el portal; baja también el modal-1 */
@media (min-width:768px) and (max-width:1900px){
  .modal-card:not(.portal-open){ margin-top:122px !important; }   /* a juego con tu portal */
}

/* Botón flotante “Order Now!” */
.floating-order{
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom)); /* respeta notch */
  z-index: 2147483645;                 /* justo por debajo del overlay del modal */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 18px;
  min-height: 44px;                    /* touch target */
  border: 0;
  border-radius: 999px;                /* píldora */
  background: #0b5cff;                 /* brand */
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  text-decoration: none;

  box-shadow: 0 10px 30px rgba(11,92,255,.35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;

  /* Animaciones: rebote + onda, en ciclos de 8s */
  animation:
    order-bounce 3s ease-in-out infinite,
    order-ripple 3s ease-out infinite;
}

/* Hover/active */
.floating-order:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(11,92,255,.45);
}
.floating-order:active{ transform: translateY(0); }

/* Halo/onda con pseudo-elemento para que no afecte el layout */
.floating-order::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
}

/* Rebote: ocurre al principio del ciclo y luego queda quieto */
@keyframes order-bounce{
  0%   { transform: translateY(0); }
  3%   { transform: translateY(-10px); }
  6%   { transform: translateY(-5px); }
  9%   { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* Onda: halo que se expande y desvanece solo al inicio del ciclo */
@keyframes order-ripple{
  0%{
    box-shadow: 0 0 0 0 rgba(11,92,255,.55),
                0 0 0 0 rgba(11,92,255,.35),
                0 0 0 0 rgba(11,92,255,.15);
  }
  10%{
    box-shadow: 0 0 0 14px rgba(11,92,255,0),
                0 0 0 26px rgba(11,92,255,0),
                0 0 0 40px rgba(11,92,255,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(11,92,255,0),
                0 0 0 0 rgba(11,92,255,0),
                0 0 0 0 rgba(11,92,255,0);
  }
}

/* Cuando el modal está abierto, desactivar el botón flotante (como tu call button) */
body.no-scroll .floating-order{
  opacity:.15;
  pointer-events:none;
}

/* Más compacto en móvil */
@media (max-width:760px){
  .floating-order{
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    padding: 11px 16px;
    font-weight: 700;
    font-size: 18px;
  }
}

/* Si tienes poco alto de viewport, sepáralo un poco del borde */
@media (max-height:700px){
  .floating-order{ bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Respeto accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .floating-order{ animation: none; }
}