/* ═══════════════════════════════════════════════════════════════
   WpLanding — wpl-forms.css
   Estilos responsivos para formularios existentes + 5 diseños nuevos
   ═══════════════════════════════════════════════════════════════ */

/* ── Campos obligatorios: asterisco rojo + resaltado si falta llenar ── */
.wpl-field-required { position: relative; }
.wpl-field-required::after {
  content: "*";
  position: absolute;
  top: 12px;
  right: 16px;
  color: #ef4444;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
.wpl-field-required.wpl-field-phone::after { top: 15px; right: 12px; }
.wpl-field-invalid input,
.wpl-field-invalid select,
.wpl-field-invalid textarea {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  animation: wplFieldShake .3s;
}
@keyframes wplFieldShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── Aviso de validación DENTRO del formulario (reemplaza el alert() nativo) ── */
.wpl-form-inline-alert {
  display: none;
  align-items: center;
  gap: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
}
.wpl-form-inline-alert.is-visible {
  display: flex;
  animation: wplInlineAlertIn .2s ease-out;
}
.wpl-form-inline-alert svg { flex-shrink: 0; color: #ef4444; }
@keyframes wplInlineAlertIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive base: ningún input/select desborda en móvil ── */
[data-wpl-form] input,
[data-wpl-form] select,
[data-wpl-form] textarea,
.wpl-form input,
.wpl-form select,
.wpl-form textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Campo teléfono: el select de país nunca colapsa */
.wpl-field-phone > div {
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.wpl-phone-country {
  flex-shrink: 0 !important;
  min-width: 70px !important;
  max-width: 90px !important;
}
.wpl-field-phone input[type="tel"] {
  flex: 1 !important;
  min-width: 0 !important;
}

/* ── Fix responsivo para el hero form existente ─────────────── */
@media (max-width: 680px) {
  /* Reducir padding vertical/horizontal en secciones con formulario */
  section:has([data-wpl-form]) {
    padding-left:  16px !important;
    padding-right: 16px !important;
    padding-top:   40px !important;
    padding-bottom:40px !important;
  }
  /* Flex row que contiene el formulario: apilar en columna */
  section:has([data-wpl-form]) > div[style*="flex-wrap"] {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  /* Tarjeta del formulario dentro del hero: ancho completo */
  section:has([data-wpl-form]) [data-wpl-form] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Formulario inline: padding más compacto en móvil */
  .wpl-form[style*="max-width:480px"],
  .wpl-form[style*="max-width: 480px"] {
    padding: 28px 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DISEÑO 1 — Dark Glow
   Fondo oscuro profundo, acento verde neón, inputs glass
   ═══════════════════════════════════════════════════════════════ */
.wpl-fd-dark {
  background: linear-gradient(145deg, #050d1a 0%, #0a1628 55%, #0d1f35 100%);
  border-radius: 24px;
  padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 44px);
  max-width: 500px;
  margin: 24px auto;
  box-shadow: 0 0 80px rgba(54,190,73,.1), 0 40px 80px rgba(0,0,0,.5);
  border: 1px solid rgba(54,190,73,.16);
  position: relative;
  overflow: hidden;
}
.wpl-fd-dark::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(54,190,73,.13) 0%, transparent 65%);
  pointer-events: none;
}
.wpl-fd-dark::after {
  content: '';
  position: absolute;
  bottom: -70px; left: -70px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(59,130,246,.09) 0%, transparent 65%);
  pointer-events: none;
}
/* Inputs glass sobre fondo oscuro */
.wpl-fd-dark input,
.wpl-fd-dark select,
.wpl-fd-dark textarea {
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  transition: border-color .25s, box-shadow .25s, background .25s !important;
  outline: none !important;
}
.wpl-fd-dark input::placeholder,
.wpl-fd-dark textarea::placeholder {
  color: rgba(255,255,255,.32) !important;
}
.wpl-fd-dark input:focus,
.wpl-fd-dark select:focus,
.wpl-fd-dark textarea:focus {
  border-color: rgba(54,190,73,.65) !important;
  box-shadow: 0 0 0 3px rgba(54,190,73,.1) !important;
  background: rgba(255,255,255,.09) !important;
}
.wpl-fd-dark .wpl-phone-country {
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   DISEÑO 2 — Minimal Clean
   Blanco, inputs con solo borde inferior, acento de color top
   ═══════════════════════════════════════════════════════════════ */
.wpl-fd-minimal {
  max-width: 480px;
  margin: 24px auto;
  padding: clamp(28px, 6vw, 52px) clamp(18px, 5vw, 40px);
  background: #fff;
  border-radius: 6px;
  border-top: 5px solid #36be49;
  box-shadow: 0 4px 48px rgba(0,0,0,.07), 0 1px 0 #e2e8f0;
}
.wpl-fd-minimal input,
.wpl-fd-minimal select,
.wpl-fd-minimal textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-radius: 0 !important;
  padding: 11px 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  color: #1e293b !important;
  outline: none !important;
  transition: border-color .2s !important;
}
.wpl-fd-minimal input:focus,
.wpl-fd-minimal select:focus,
.wpl-fd-minimal textarea:focus {
  border-bottom-color: #36be49 !important;
}
.wpl-fd-minimal input::placeholder,
.wpl-fd-minimal textarea::placeholder {
  color: #94a3b8 !important;
}
.wpl-fd-minimal .wpl-phone-country {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-radius: 0 !important;
  padding: 11px 4px !important;
  color: #1e293b !important;
}

/* ═══════════════════════════════════════════════════════════════
   DISEÑO 3 — Split Color
   Panel izquierdo degradado, formulario blanco derecho
   ═══════════════════════════════════════════════════════════════ */
.wpl-fd-split {
  display: flex;
  max-width: 880px;
  margin: 24px auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.16);
  flex-wrap: wrap;
}
.wpl-fd-split-left {
  flex: 1;
  min-width: min(100%, 240px);
  background: linear-gradient(145deg, #36be49 0%, #0d9488 60%, #0891b2 100%);
  padding: clamp(36px, 6vw, 56px) clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  box-sizing: border-box;
}
.wpl-fd-split-right {
  flex: 1.2;
  min-width: min(100%, 280px);
  background: #fff;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 44px);
  box-sizing: border-box;
}
.wpl-fd-split-right input,
.wpl-fd-split-right select,
.wpl-fd-split-right textarea {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  .wpl-fd-split {
    flex-direction: column !important;
    border-radius: 20px !important;
    margin: 16px 12px !important;
  }
  .wpl-fd-split-left,
  .wpl-fd-split-right {
    min-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DISEÑO 4 — Floating Card
   Tarjeta elevada con header de gradiente oscuro
   ═══════════════════════════════════════════════════════════════ */
.wpl-fd-float {
  max-width: 460px;
  margin: 36px auto;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.06),
    0 32px 80px rgba(0,0,0,.14);
}
.wpl-fd-float-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #1e40af 100%);
  padding: clamp(28px, 5vw, 44px) clamp(24px, 4vw, 40px);
  text-align: center;
}
.wpl-fd-float-body {
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 36px);
}
/* Botón de este diseño específico */
.wpl-fd-float .wpl-fd-float-btn {
  background: linear-gradient(135deg, #1e3a5f, #1e40af) !important;
  box-shadow: 0 8px 24px rgba(30,64,175,.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DISEÑO 5 — Bold Banner
   Fondo púrpura/azul intenso, campos con fondos translúcidos
   ═══════════════════════════════════════════════════════════════ */
.wpl-fd-banner {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
  padding: clamp(36px, 6vw, 60px) clamp(20px, 5vw, 52px);
  border-radius: 28px;
  max-width: 960px;
  margin: 24px auto;
  box-shadow: 0 24px 80px rgba(79,70,229,.45);
  overflow: hidden;
  position: relative;
}
.wpl-fd-banner::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 65%);
  pointer-events: none;
}
.wpl-fd-banner::after {
  content: '';
  position: absolute;
  bottom: -60px; left: 50%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 65%);
  pointer-events: none;
}
.wpl-fd-banner-inner {
  display: flex;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.wpl-fd-banner-text {
  flex: 1;
  min-width: min(100%, 220px);
}
.wpl-fd-banner-form {
  flex: 1.3;
  min-width: min(100%, 260px);
}
.wpl-fd-banner input,
.wpl-fd-banner select,
.wpl-fd-banner textarea {
  background: rgba(255,255,255,.14) !important;
  border: 1.5px solid rgba(255,255,255,.24) !important;
  border-radius: 12px !important;
  padding: 13px 16px !important;
  color: #fff !important;
  font-size: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color .2s, background .2s !important;
}
.wpl-fd-banner input::placeholder,
.wpl-fd-banner textarea::placeholder {
  color: rgba(255,255,255,.5) !important;
}
.wpl-fd-banner input:focus,
.wpl-fd-banner select:focus {
  border-color: rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.2) !important;
}
.wpl-fd-banner .wpl-phone-country {
  background: rgba(255,255,255,.14) !important;
  border: 1.5px solid rgba(255,255,255,.24) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
@media (max-width: 640px) {
  .wpl-fd-banner-inner {
    flex-direction: column !important;
    text-align: center !important;
  }
  .wpl-fd-banner-text,
  .wpl-fd-banner-form {
    min-width: 100% !important;
  }
}