/* =======================================================================
   WIFICOR PERU — MODAL ÚNICO (POPUP PRO 2-COLS)
   - Desktop: 50/50 media + form
   - Mobile: 1 col + 2 campos por fila (PRO) + body scrollea (táctil OK)
======================================================================= */

.wfpm, .wfpm *{ box-sizing:border-box; }
.wfpm{ display:none; }
.wfpm.is-on,
.wfpm.is-open{ display:block; }

/* Backdrop */
.wfpm .wf-modalBackdrop{
  position:fixed; inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:9998;
}

/* Dialog */
.wfpm .wf-modalDialog{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);

  width:min(920px, calc(100vw - 24px));
  max-height:calc(100dvh - 24px);

  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 90px rgba(2,6,23,.35);
  overflow:hidden;
  z-index:9999;

  display:flex;
  flex-direction:column;
}

/* Close */
.wfpm .wf-modalClose{
  position:absolute;
  top:12px; right:12px;
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.12);
  background:#fff;
  color:#0b1220;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  z-index:50;
}

/* Grid 50/50 */
.wfpm .wfpmGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:stretch;
  min-height:0;
  flex:1;
}

/* Left media */
.wfpm .wfpmMedia{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#0f766e,#0b5f59);
  min-height:0;
}
.wfpm .wfpmMediaImg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.wfpm .wfpmMediaShade{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(2,6,23,.35), rgba(2,6,23,.05));
}
.wfpm .wfpmMediaBadge{
  position:absolute;
  left:14px; right:14px; bottom:14px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(2,6,23,.08);
}
.wfpm .wfpmMediaBadgeK{
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#0f766e;
}
.wfpm .wfpmMediaBadgeT{
  margin-top:4px;
  font-size:16px;
  font-weight:950;
  color:#0b1220;
}

/* Right */
.wfpm .wfpmContent{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background:#fff;
}

/* Header */
.wfpm .wf-modalHead{
  padding:18px 22px 12px;
  border-bottom:1px solid rgba(2,6,23,.08);
}
.wfpm .wf-modalKicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#0f766e;
}
.wfpm .wf-modalTitle{
  margin-top:6px;
  font-size:22px;
  line-height:1.1;
  font-weight:950;
  color:#0b1220;
}
.wfpm .wf-modalPlanLine{
  margin-top:6px;
  font-size:13px;
  color:rgba(2,6,23,.72);
}

/* Form */
.wfpm .wf-modalForm{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

/* ✅ Body scrolleable real (táctil) */
.wfpm .wf-modalBody{
  padding:14px 22px 0;
  flex:1;
  min-height:0;

  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

/* Grid campos (desktop/tablet: 2 cols) */
.wfpm .wf-formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px 12px;
}
.wfpm .wf-span2{ grid-column: 1 / -1; }

/* Campos */
.wfpm .wf-field label{
  display:block;
  font-size:13px;
  font-weight:800;
  color:#0b1220;
  margin-bottom:6px;
}
.wfpm .wf-field input,
.wfpm .wf-field select,
.wfpm .wf-field textarea{
  width:100%;
  border:1px solid rgba(2,6,23,.14);
  border-radius:14px;
  padding:11px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.wfpm .wf-field textarea{
  resize:vertical;
  min-height:76px;
}
.wfpm .wf-field input:focus,
.wfpm .wf-field select:focus,
.wfpm .wf-field textarea:focus{
  border-color:rgba(15,118,110,.55);
  box-shadow:0 0 0 4px rgba(15,118,110,.10);
}
.wfpm .wf-help{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:rgba(2,6,23,.60);
}

/* Footer */
.wfpm .wf-modalFooter{
  padding:12px 22px 18px;
  border-top:1px solid rgba(2,6,23,.08);
  background:#fff;
}
.wfpm .wf-modalActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.wfpm .wf-btn{
  height:42px;
  border-radius:14px;
  padding:0 16px;
  font-weight:900;
  border:1px solid rgba(2,6,23,.14);
  background:#fff;
  cursor:pointer;
}
.wfpm .wf-btnWa{
  background:#22c55e;
  border-color:#22c55e;
  color:#0b1220;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.wfpm .wf-modalFine{
  margin-top:10px;
  font-size:12px;
  color:rgba(2,6,23,.60);
}
.wfpm .wf-btnWa.is-loading{ opacity:.85; cursor:wait; }

/* Matar notice viejo si existe */
#wfPlanNotice{ display:none !important; }

/* -------------------- Responsive -------------------- */

@media (max-width: 980px){
  .wfpm .wf-modalDialog{
    width:min(860px, calc(100vw - 20px));
    max-height:calc(100dvh - 20px);
  }
}
@media (max-width: 860px){
  .wfpm .wfpmGrid{ grid-template-columns: 48% 52%; }
}

/* ✅ MÓVIL PRO (2 campos por fila) */
@media (max-width: 720px){

  /* modal tipo "pantalla" (sin translate) */
  .wfpm .wf-modalDialog{
    left:8px; right:8px; top:8px; bottom:8px;
    width:auto;
    transform:none;
    border-radius:14px;
    max-height:none; /* bottom controla */
  }

  /* X adentro siempre */
  .wfpm .wf-modalClose{
    top:10px; right:10px;
    width:36px; height:36px;
    border-radius:12px;
  }

  /* apilar */
  .wfpm .wfpmGrid{ grid-template-columns: 1fr; }

  /* banner */
  .wfpm .wfpmMedia{ height:118px; min-height:118px; }

  /* header compacto */
  .wfpm .wf-modalHead{ padding:12px 14px 8px; }
  .wfpm .wf-modalTitle{ font-size:18px; }
  .wfpm .wf-modalPlanLine{ font-size:12px; }

  /* ✅ aquí lo PRO: 2 columnas en móvil */
  .wfpm .wf-formGrid{
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }

  /* textarea y select zona en full */
  .wfpm .wf-span2{ grid-column: 1 / -1; }

  /* body compacto pero scrolleable */
  .wfpm .wf-modalBody{
    padding:10px 14px 0;
  }

  /* footer sticky abajo (ya no se va a mitad) */
  .wfpm .wf-modalFooter{
    padding:10px 14px 14px;
    position:sticky;
    bottom:0;
    background:#fff;
  }

  /* inputs compactos */
  .wfpm .wf-field input,
  .wfpm .wf-field select,
  .wfpm .wf-field textarea{
    padding:9px 10px;
    border-radius:12px;
    font-size:13px;
  }

  .wfpm .wf-btn{
    height:38px;
    border-radius:12px;
    font-size:14px;
  }
  .wfpm .wf-modalFine{ font-size:11px; }
}

/* ultra angosto: si un cel es muy chico, mejor 1 columna */
@media (max-width: 360px){
  .wfpm .wf-formGrid{ grid-template-columns: 1fr; }
  .wfpm .wf-span2{ grid-column:auto; }
}

/* fallback si no hay dvh */
@supports not (height: 100dvh){
  .wfpm .wf-modalDialog{ max-height:calc(100vh - 24px); }
}




/* ===================== SOLO MÓVIL: banner más grande + badge libre (sin glass) ===================== */
@media (max-width: 720px){

  /* Banner SVG MÁS ALTO (adaptativo) */
  .wfpm .wfpmMedia{
    height: clamp(150px, 26vh, 230px);
    min-height: clamp(150px, 26vh, 230px);
  }

  /* El SVG/IMG llena mejor y “se ve más grande” */
  .wfpm .wfpmMediaImg{
    object-position: center top;
    transform: scale(1.06);
    transform-origin: center top;
  }

  /* ❌ SIN GLASS: badge libre sobre el SVG */
  .wfpm .wfpmMediaBadge{
    left:12px; right:12px;
    bottom: -16px;               /* un pelín más abajo */
    padding:0;                   /* sin caja */
    background:transparent;
    border:0;
    box-shadow:none;
    z-index:5;
  }

  /* Tipografía clara sobre imagen */
  .wfpm .wfpmMediaBadgeK{
    color:rgba(255,255,255,.92);
    text-shadow:0 2px 16px rgba(2,6,23,.45);
    font-size:12px;
    letter-spacing:.20em;
  }
  .wfpm .wfpmMediaBadgeT{
    color:#fff;
    text-shadow:0 2px 16px rgba(2,6,23,.50);
    font-size:16px;
    font-weight:950;
  }

  /* Compensación para que el header no choque */
  .wfpm .wf-modalHead{
    padding-top:24px;
  }
}