/* ======= MIW WhatsApp Form — Minimal/Modern (FINAL + ANIMACIÓN) ======= */
:root{
  --miw-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --miw-bg: #ffffff;
  --miw-text: #0f172a;
  --miw-muted: #64748b;
  --miw-border: #e5e7eb;
  --miw-input: #f8fafc;
  --miw-ring: #0ea5e9;
  --miw-primary: #1f3b67;
  --miw-primary-600: #1a3257;
  --miw-success: #16a34a;
  --miw-radius: 10px;
}

/* === Fuente Garet (ajusta rutas si la tenés subida) === */
@font-face{
  font-family: "Garet";
  src: url("/wp-content/uploads/fonts/Garet-Book.woff2") format("woff2"),
       url("/wp-content/uploads/fonts/Garet-Book.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Garet";
  src: url("/wp-content/uploads/fonts/Garet-Heavy.woff2") format("woff2"),
       url("/wp-content/uploads/fonts/Garet-Heavy.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ================== Botón flotante ================== */
#miw-wa-btn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  /* sombra base + aro interior sutil para contraste */
  box-shadow:
    0 8px 24px rgba(2,6,23,.18),
    0 0 0 1px rgba(255,255,255,.15) inset;
  cursor:pointer;
  z-index: 2147483645; /* super alto */
  transition: transform .15s ease, box-shadow .2s ease;
}
#miw-wa-btn:hover{ transform: translateY(-1px); box-shadow:0 12px 28px rgba(2,6,23,.22), 0 0 0 1px rgba(255,255,255,.15) inset; }
#miw-wa-btn:active{ transform: translateY(0); }

/* Ícono */
#miw-wa-btn svg{ width:26px; height:26px; display:block; }
#miw-wa-btn svg path{ fill:#fff; }

/* Halo animado (hover) */
#miw-wa-btn::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,0);
  transition: box-shadow .25s ease;
}
#miw-wa-btn:hover::after{
  box-shadow: 0 0 0 8px rgba(37,211,102,.18);
}
/* Quitar aro/ring interior que genera el arco blanco */
#miw-wa-btn{
  /* deja solo la sombra exterior */
  box-shadow: 0 8px 24px rgba(2,6,23,.18) !important;
  border: none !important;
}

/* por si algún tema añade bordes o sombras internas */
#miw-wa-btn,
#miw-wa-btn::before,
#miw-wa-btn::after{
  border: none !important;
}
#miw-wa-btn svg{
  shape-rendering: geometricPrecision;
  transform: translateZ(0); /* evita artefactos subpíxel */
}

#miw-wa-btn .wa-svg .wa-mark,
#miw-wa-btn svg path {           /* por si tu SVG no tiene clase */
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sombra sin aro interior */
#miw-wa-btn{
  box-shadow: 0 8px 24px rgba(2,6,23,.18) !important;
  border: none !important;
}
/* Pulso opcional: activalo agregando data-pulse="1" al botón */
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.34); }
  70%  { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
#miw-wa-btn[data-pulse="1"]::after{
  box-shadow: 0 0 0 0 rgba(37,211,102,.34);
  animation: wa-pulse 2.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){
  #miw-wa-btn[data-pulse="1"]::after{ animation: none; }
}

/* ========== Contenedor del modal (capa superior) ========== */
#miw-wa-modal{
  position: fixed; inset: 0;
  z-index: 2147483646; /* por encima de headers/menus */
}

/* Backdrop + blur */
#miw-wa-modal .miw-wa-backdrop{
  position:fixed; inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:saturate(120%) blur(6px);
  z-index: 2147483646;
}

/* Card del modal */
#miw-wa-modal .miw-wa-card{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width: min(900px, 92vw);
  max-height: min(86vh, calc(100dvh - 32px));
  overflow:auto;
  background:var(--miw-bg); color:var(--miw-text);
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(2,6,23,.18);
  padding:26px 26px 28px;
  font-family:var(--miw-font);
  z-index: 2147483647; /* por arriba del backdrop */
}

/* Cabecera */
#miw-wa-title{
  margin:0 0 10px;
  text-align: center;
  font-family:"Garet", var(--miw-font);
  font-weight:700; letter-spacing:.2px; font-size:24px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Botón cerrar redondo */
.miw-wa-close{
  position:absolute; right:14px; top:14px;
  width:34px; height:34px;
  border-radius:9999px !important;
  background:var(--miw-primary) !important;
  color:#fff; border:0;
  font-size:20px; line-height:1; display:grid; place-items:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(2,6,23,.16) !important;
  transition:transform .12s ease, background .15s ease, box-shadow .2s ease, opacity .15s ease;
  padding: 0px !important;
}
.miw-wa-close:hover{ background:var(--miw-primary-600) !important; transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,6,23,.2) !important; }
.miw-wa-close:focus-visible{ outline:2px solid rgba(14,165,233,.6); outline-offset:2px; }

/* ================== Formulario ================== */
.miw-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top:6px;
}
.miw-grid label{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--miw-muted);
}

/* Inputs minimalistas (con parches anti-theme) */
#miw-wa-modal .miw-grid input,
#miw-wa-modal .miw-grid textarea{
  -webkit-appearance:none; appearance:none;
  background:var(--miw-input);
  border:1px solid var(--miw-border) !important;
  border-radius: var(--miw-radius) !important;
  background-clip: padding-box; 
  font-size:15px; color:var(--miw-text);
  outline: none !important;
  box-shadow:none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.miw-grid textarea{ min-height:100px; resize:vertical; }

.miw-grid input::placeholder,
.miw-grid textarea::placeholder{ color:#94a3b8; }

#miw-wa-modal .miw-grid input:focus,
#miw-wa-modal .miw-grid textarea:focus{
  background:#fff;
  border-color: var(--miw-ring) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.18) !important;
}

/* Invalid sin naranja */
#miw-wa-modal .miw-grid input[required]:invalid,
#miw-wa-modal .miw-grid textarea[required]:invalid{
  border-color: var(--miw-border) !important;
  box-shadow:none !important;
}

/* Acciones (centrado del botón) */
#miw-wa-modal .miw-wa-actions{
  margin-top:18px; display:flex; justify-content:center !important;
}
#miw-wa-modal .miw-wa-send{
  min-height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--miw-primary); color:#fff;
  border:0; border-radius:12px;
  padding:12px 22px; font-weight:600; font-size:14px; letter-spacing:.3px;
  box-shadow:0 8px 20px rgba(31,59,103,.18);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .15s ease;
  width:auto !important; margin:0 auto;
}
#miw-wa-modal .miw-wa-send:hover{ background:var(--miw-primary-600); transform: translateY(-1px); box-shadow:0 12px 26px rgba(31,59,103,.24); }

/* Mensaje de éxito */
#miw-wa-modal .miw-wa-success{
  display:none;
  margin-top:12px; padding:10px 12px;
  background:rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.25);
  color:var(--miw-success); font-weight:600;
  border-radius:12px;
}

/* Legal (columna y centrado) */
#miw-wa-modal .miw-wa-legal{
  margin-top:12px; color:var(--miw-muted);
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center;
  text-align:center; gap:8px;
}
#miw-wa-modal .miw-wa-legal summary{ cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
#miw-wa-modal .miw-wa-legal summary::-webkit-details-marker{ display:none; }

/* Date inputs */
.miw-grid input[type="date"]{ font-family:inherit; }
.miw-grid input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.7; cursor:pointer; }

/* ================== Responsive ================== */
@media (max-width:640px){
  #miw-wa-modal .miw-wa-card{
    width: min(96vw, 560px);
    padding: 18px 14px 20px;
    border-radius:16px;
    /* Respeta notch / barras en móviles */
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .miw-grid{ grid-template-columns:1fr; gap:14px; }
  #miw-wa-modal .miw-wa-actions{ justify-content:center !important; }
  #miw-wa-modal .miw-wa-send{ width:auto !important; }
}