/* =====================================================================
   WP Ficha Técnica PDF — Popup frontend
   Incorpora los estilos del diseño avanxa-form-popup_1.html
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* ── Botón trigger ───────────────────────────────────────────────────── */
button.avxf-trigger.wpft-open-popup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #E3F85300;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 22px;
  letter-spacing: 0.0025em;
  color: #DCC5F2;
  fill: #DCC5F2;
  border: 1px solid #02010100;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
button.avxf-trigger.wpft-open-popup:hover {
  background: #EDEDED;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  padding: 8px 14px;
  color: #7932C5;
}

/* ── Overlay/Modal ───────────────────────────────────────────────────── */
.avxf-overlay,
.avxf-overlay * { box-sizing: border-box; margin: 0; padding: 0; }

.avxf-overlay {
  --avxf-display: 'Visby CF','Poppins',system-ui,sans-serif;
  --avxf-body: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --avxf-ink: #222222;
  --avxf-label: #676767;
  --avxf-field-bg: #FAF6FD;
  --avxf-field-bd: #9558D8;
  --avxf-ph: #888888;
  --avxf-box-bd: #D3D3D3;
  --avxf-purple: #9558D8;
  --avxf-link: #902E9D;
  --avxf-check-bd: #888888;
  --avxf-btn: #E3F853;
  --avxf-btn-bd: #D1D1D1;

  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(18,16,22,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: var(--avxf-body);
}
.avxf-overlay.is-open { display: flex; }

.avxf-modal {
  position: relative;
  width: 584px;
  max-width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  container-type: inline-size;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  -webkit-font-smoothing: antialiased;
}

/* ── Cerrar ──────────────────────────────────────────────────────────── */
.avxf-close {
  position: absolute;
  top: 3.4cqw;
  right: 3.4cqw;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  cursor: pointer;
  line-height: 0;
}
.avxf-overlay .avxf-close,
.avxf-overlay .avxf-close:hover,
.avxf-overlay .avxf-close:focus,
.avxf-overlay .avxf-close:active {
  background: transparent !important;
  border: 1px solid #222222 !important;
  color: #222222 !important;
}
.avxf-overlay .avxf-close svg,
.avxf-overlay .avxf-close:hover svg,
.avxf-overlay .avxf-close:focus svg,
.avxf-overlay .avxf-close:active svg {
  fill: none !important;
}
.avxf-overlay .avxf-close svg path,
.avxf-overlay .avxf-close:hover svg path,
.avxf-overlay .avxf-close:focus svg path,
.avxf-overlay .avxf-close:active svg path {
  stroke: #222222 !important;
}
/* ── Header ──────────────────────────────────────────────────────────── */
.avxf-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  text-align: center;
  padding: 1.4cqw 6cqw 0;
}
.avxf-title {
  font-family: var(--avxf-display);
  font-weight: 600;
  font-size: clamp(18px, 4.11cqw, 26px);
  line-height: 1.33;
  letter-spacing: -.01em;
  color: var(--avxf-ink);
}
.avxf-desc {
  font-family: var(--avxf-body);
  font-weight: 600;
  font-size: clamp(13px, 2.4cqw, 16px);
  line-height: 1.286;
  color: var(--avxf-label);
}

/* ── Formulario ──────────────────────────────────────────────────────── */
.avxf-form { display: flex; flex-direction: column; gap: 32px; }

.avxf-fields {
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  border: 1px solid var(--avxf-box-bd);
  border-radius: 4px;
  padding: 2.74cqw;
}
.avxf-field { display: flex; flex-direction: column; gap: 1.2cqw; }
.avxf-label {
  font-family: var(--avxf-body);
  font-weight: 700;
  font-size: clamp(12px, 2.4cqw, 15px);
  line-height: 1.43;
  color: var(--avxf-label);
}
.avxf-label .opt { font-weight: 400; }
.avxf-input {
  width: 100%;
  height: 7.53cqw;
  min-height: 40px;
  background: var(--avxf-field-bg);
  border: 1px solid var(--avxf-field-bd);
  border-radius: 2px;
  padding: 0 2.05cqw;
  font-family: var(--avxf-body);
  font-size: clamp(13px, 2.4cqw, 15px);
  font-weight: 500;
  color: #2B2B2B;
  outline: none;
}
.avxf-input::placeholder { color: var(--avxf-ph); font-weight: 400; }
.avxf-input:focus {
  border-color: var(--avxf-purple);
  box-shadow: 0 0 0 2px rgba(149,88,216,.18);
}

/* Teléfono */
.avxf-phone { display: flex; align-items: stretch; }
.avxf-cc {
  display: flex;
  align-items: center;
  gap: 1.37cqw;
  flex: none;
  padding: 0 1.71cqw;
  background: var(--avxf-purple);
  color: #fff;
  font-family: var(--avxf-body);
  font-weight: 700;
  font-size: clamp(13px, 2.4cqw, 15px);
  border: 1px solid var(--avxf-field-bd);
  border-right: none;
  border-radius: 2px 0 0 2px;
}
.avxf-cc svg { width: 14px; height: 14px; }
.avxf-phone .avxf-input { border-radius: 0 2px 2px 0; flex: 1; }

/* ── Consentimiento ──────────────────────────────────────────────────── */
.avxf-consent { display: flex; align-items: flex-start; gap: 1.37cqw; cursor: pointer; }
.avxf-check {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  cursor: pointer;
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  background: #fff;
  border: 1px solid var(--avxf-check-bd);
  border-radius: 4px;
}
.avxf-check:checked { background: var(--avxf-purple); border-color: var(--avxf-purple); }
.avxf-check:checked::after {
  content: "";
  position: absolute;
  left: 34%; top: 12%;
  width: 28%; height: 56%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.avxf-consent .txt {
  font-family: var(--avxf-body);
  font-weight: 400;
  font-size: clamp(12px, 2.23cqw, 14px);
  line-height: 1.4;
  color: var(--avxf-label);
}
.avxf-consent a { color: var(--avxf-link); font-weight: 700; text-decoration: underline; }

/* ── Feedback ────────────────────────────────────────────────────────── */
.avxf-feedback {
  display: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--avxf-body);
}
.avxf-feedback.is-error { display: block; background: #fff0f0; color: #c0392b; border: 1px solid #f5c6cb; }
.avxf-feedback.is-loading { display: block; background: #f0f4ff; color: #444; border: 1px solid #c8d8f8; }

/* ── Botón ───────────────────────────────────────────────────────────── */
.avxf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.37cqw;
  width: 100%;
  min-height: 46px;
  border: 2px solid #d1d1d1 !important;
  border-radius: 1.96cqw !important;
  background: var(--avxf-btn);
  font-family: var(--avxf-body);
  font-weight: 700;
  font-size: clamp(13px, 2.74cqw, 16px);
  line-height: 1.5;
  letter-spacing: .005em;
  color: var(--avxf-ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
button.avxf-submit:hover, button.avxf-submit:focus { background: #222222 !important; color: #E3F853 !important; }
.avxf-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ── Mensaje de éxito ────────────────────────────────────────────────── */
.avxf-done {
  text-align: center;
  padding: 6cqw 4cqw;
}
.avxf-done h4 {
  font-family: var(--avxf-display);
  font-weight: 600;
  font-size: clamp(18px, 3.8cqw, 24px);
  color: var(--avxf-ink);
  margin-bottom: 16px;
}
.avxf-done p {
  font-family: var(--avxf-body);
  font-size: clamp(13px, 2.4cqw, 16px);
  color: var(--avxf-label);
}