/* valida-doc.css — Centro de Validacion Digital FACM */

:root {
  /* ── Paleta FACM morado suave (premium, liviano y accesible) ── */
  --facm-purple-900: #4a175f;
  --facm-purple-700: #64227d;
  --facm-purple-600: #7a3494;
  --facm-purple-500: #8e4ba5;
  --facm-purple-300: #c7a6d2;
  --facm-purple-200: #e5d4eb;
  --facm-purple-100: #f2eaf5;
  --facm-purple-050: #faf7fb;
  --facm-btn-hover:  #6b287f;
  --facm-btn-active: #5b216d;
  --facm-text-primary:   #2b2430;
  --facm-text-secondary: #5e5765;
  --facm-text-help:      #6d6673;
  --facm-text-placeholder: #807a86;
  --facm-border-soft:    rgba(100, 34, 125, 0.16);
  --facm-shadow-soft:    rgba(74, 23, 95, 0.12);
  --facm-shadow-modal:   0 28px 70px rgba(74, 23, 95, 0.20);
  --facm-shadow-card:    0 10px 26px rgba(74, 23, 95, 0.10);
  --facm-shadow-btn:     0 8px 20px rgba(74, 23, 95, 0.14);

  /* Tokens historicos remapeados al nuevo morado suave */
  --vd-purple:       #7a3494;
  --vd-purple-dark:  #4a175f;
  --vd-purple-mid:   #64227d;
  --vd-purple-pale:  #faf7fb;
  --vd-purple-light: #f2eaf5;
  --vd-purple-border:#c7a6d2;
  --vd-green:        #1b5e20;
  --vd-green-pale:   #f1f8e9;
  --vd-green-border: #a5d6a7;
  --vd-amber:        #e65100;
  --vd-amber-pale:   #fff8e1;
  --vd-amber-border: #ffe082;
  --vd-red:          #b71c1c;
  --vd-red-pale:     #ffebee;
  --vd-red-border:   #ef9a9a;
  --vd-gray-50:      #fafafa;
  --vd-gray-100:     #f5f5f5;
  --vd-gray-200:     #eeeeee;
  --vd-gray-300:     #e0e0e0;
  --vd-gray-400:     #bdbdbd;
  --vd-gray-500:     #9e9e9e;
  --vd-gray-600:     #757575;
  --vd-gray-700:     #616161;
  --vd-gray-800:     #424242;
  --vd-gray-900:     #212121;
  --vd-white:        #ffffff;
  --vd-r-sm:  8px;
  --vd-r:     12px;
  --vd-r-lg:  16px;
  --vd-r-xl:  20px;
  --vd-r-2xl: 24px;
  --vd-sh-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --vd-sh-sm: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --vd-sh-md: 0 4px 16px rgba(74,20,140,.10), 0 2px 6px rgba(0,0,0,.06);
  --vd-sh-lg: 0 8px 32px rgba(74,20,140,.14), 0 4px 12px rgba(0,0,0,.08);
  --vd-ease:  cubic-bezier(.4,0,.2,1);
  --vd-max:   1180px;
}

/* BASE */
.vd { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--vd-gray-900); -webkit-font-smoothing: antialiased; }
.vd *, .vd *::before, .vd *::after { box-sizing: border-box; }
.vd-wrap { max-width: var(--vd-max); margin: 0 auto; padding: 0 24px; }

/* Esta hoja solo se carga en /valida-doc (ver <link> en page.jsx), asi
   que estas reglas sobre #wrapper/main son seguras acá — no afectan
   ninguna otra pagina del sitio. #wrapper ya crece a 1 viewport y <main>
   ya absorbe el sobrante como flex-grow (wp-inline.css, global). Acá se
   encadena display:flex hacia adentro (main -> .vd -> .vd-hero) para
   que sea el HERO el que llene ese espacio sobrante con precision.
   Se habia revertido por sospecha de que rompia el boton del menu
   hamburguesa — la causa real era el servidor de desarrollo colgado
   (confirmado con un reinicio limpio). Reaplicado 2026-07-30. */
#wrapper > main {
  display: flex;
  flex-direction: column;
}
.vd {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* HERO */
.vd-hero {
  /* Mismo gris que usa Preguntas Frecuentes (rgb(237,237,237)) en vez del
     degrade blanco-lila anterior — para no verse "tan blanco" respecto al
     resto del sitio. */
  background: #ededed;
  padding: 48px 0 44px;
  /* Llena exactamente el espacio sobrante (ver cadena de flex arriba) en
     vez de un calc(100vh - Npx) a mano. */
  flex: 1 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.vd-hero__grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
  /* .vd-hero ahora es flex (para centrar esto verticalmente): sin esto,
     como item flex sin ancho explicito se encoge al contenido en vez de
     ocupar el ancho completo como hacia de forma nativa al ser un div de
     bloque comun. */
  width: 100%;
}
.vd-hero__figure {
  /* Ilustracion con fondo transparente (personajes), no una foto: sin
     tarjeta/sombra/recorte — se apoya directo sobre el gris del hero,
     igual que las demas ilustraciones del sitio. */
  line-height: 0;
  display: flex;
  justify-content: center;
}
.vd-hero__img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
}
.vd-hero__title {
  font-size: 2.75rem; font-weight: 800; color: var(--vd-purple-dark);
  line-height: 1.08; margin: 0 0 14px; letter-spacing: -.5px;
}
.vd-hero__title em { font-style: normal; color: var(--vd-purple); }
.vd-hero__subtitle {
  font-size: 1.1rem; font-weight: 500; color: var(--vd-gray-800);
  margin: 0 0 10px; line-height: 1.55; max-width: 500px;
}
.vd-hero__desc {
  font-size: .95rem; color: var(--vd-gray-600);
  line-height: 1.7; max-width: 480px; margin: 0 0 28px;
}
.vd-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* BOTON BASE */
.vd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--vd-r); font-weight: 700;
  cursor: pointer; transition: all .2s var(--vd-ease); white-space: nowrap;
}
.vd-btn--primary {
  padding: 12px 24px; font-size: .95rem;
  background: var(--vd-purple); color: #fff;
  box-shadow: 0 2px 8px rgba(123,31,162,.25);
}
.vd-btn--primary:hover:not(:disabled) { background: var(--vd-purple-dark); box-shadow: 0 4px 16px rgba(123,31,162,.35); transform: translateY(-1px); }
.vd-btn--primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.vd-btn--outline {
  padding: 11px 22px; font-size: .9rem;
  background: transparent; color: var(--vd-purple);
  border: 1.5px solid var(--vd-purple-border);
}
.vd-btn--outline:hover { background: var(--vd-purple-pale); border-color: var(--vd-purple); }
.vd-btn--ghost {
  padding: 9px 18px; font-size: .875rem;
  background: transparent; color: var(--vd-purple);
  border: 1.5px solid var(--vd-gray-300);
}
.vd-btn--ghost:hover { background: var(--vd-purple-pale); border-color: var(--vd-purple-border); }
.vd-btn--full { width: 100%; }
.vd-btn--danger { color: var(--vd-red); border-color: var(--vd-red-border); }
.vd-btn--danger:hover { background: var(--vd-red-pale); }

/* SECTION HEADS */
.vd-section-head { text-align: center; margin-bottom: 48px; }
.vd-section-head__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--vd-purple); margin-bottom: 12px;
}
.vd-section-head h2 { font-size: 1.875rem; font-weight: 700; color: var(--facm-purple-900); margin: 0 0 10px; letter-spacing: -.02em; }
.vd-section-head p { font-size: .97rem; color: var(--facm-text-secondary); max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* CENTRO DE VALIDACION */
.vd-centro { padding: 72px 0 64px; background: #fff; }
.vd-centro__box { max-width: 820px; margin: 0 auto; }

/* Tarjetas selector de metodo */
.vd-method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 32px; }
.vd-method-card {
  background: #fff; border: 1.5px solid var(--vd-gray-200);
  border-radius: var(--vd-r-lg); padding: 22px 18px; text-align: center;
  cursor: pointer; transition: all .2s var(--vd-ease);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.vd-method-card:hover { border-color: var(--vd-purple-border); background: var(--vd-purple-pale); box-shadow: var(--vd-sh-sm); }
.vd-method-card--active { border-color: var(--vd-purple); background: var(--vd-purple-pale); box-shadow: var(--vd-sh-sm); }
.vd-method-card__ico {
  width: 52px; height: 52px; border-radius: var(--vd-r); margin: 0 auto;
  background: var(--vd-purple-light); color: var(--vd-purple);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--vd-ease);
}
.vd-method-card--active .vd-method-card__ico { background: var(--vd-purple); color: #fff; }
.vd-method-card__title { font-size: .9rem; font-weight: 700; color: var(--vd-gray-800); margin: 0; }
.vd-method-card--active .vd-method-card__title { color: var(--vd-purple-dark); }
.vd-method-card__desc { font-size: .78rem; color: var(--vd-gray-500); margin: 0; line-height: 1.5; }

/* Panel formulario */
.vd-form-panel {
  background: #fff; border: 1px solid var(--vd-gray-200);
  border-radius: var(--vd-r-xl); box-shadow: var(--vd-sh-lg);
  overflow: hidden; animation: vd-slidein .25s var(--vd-ease);
}
@keyframes vd-slidein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.vd-form-panel__head {
  padding: 24px 28px 0; border-bottom: 1px solid var(--vd-gray-100);
  padding-bottom: 20px; margin-bottom: 0;
  display: flex; align-items: center; gap: 12px;
}
.vd-form-panel__head-ico {
  width: 40px; height: 40px; border-radius: var(--vd-r);
  background: var(--vd-purple-light); color: var(--vd-purple);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vd-form-panel__head-title { font-size: 1.05rem; font-weight: 700; color: var(--vd-gray-900); margin: 0; }
.vd-form-panel__head-desc { font-size: .82rem; color: var(--vd-gray-500); margin: 0; }
.vd-form-panel__body { padding: 28px; }

/* Inputs */
.vd-field { margin-bottom: 18px; }
.vd-field label {
  display: block; font-size: .73rem; font-weight: 700;
  color: var(--vd-purple-mid); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 7px;
}
.vd-input-group {
  display: flex; align-items: center;
  border: 1.5px solid var(--vd-gray-200); border-radius: 10px;
  background: #fff;
  transition: border-color .18s var(--vd-ease), box-shadow .18s var(--vd-ease);
  overflow: hidden;
}
.vd-input-group:focus-within {
  border-color: var(--vd-purple);
  box-shadow: 0 0 0 3px rgba(123,31,162,.09);
}
.vd-input-group__ico {
  padding: 0 12px 0 14px;
  color: var(--vd-gray-400);
  display: flex; align-items: center; flex-shrink: 0;
}
.vd-input-group input {
  flex: 1; border: none; outline: none;
  padding: 13px 14px 13px 0;
  font-size: .97rem; color: var(--vd-gray-900);
  background: transparent; min-width: 0;
}
.vd-input-group input::placeholder { color: var(--vd-gray-400); }
.vd-hint {
  font-size: .75rem; color: var(--vd-gray-400);
  margin: 5px 0 0; display: flex; align-items: center; gap: 4px;
  line-height: 1.5;
}

/* Drag & Drop */
.vd-drop {
  border: 1.5px dashed var(--vd-purple-border); border-radius: 12px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  transition: all .18s var(--vd-ease); background: var(--vd-purple-pale);
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px;
}
.vd-drop:hover, .vd-drop--over { border-color: var(--vd-purple); background: var(--vd-purple-light); }
.vd-drop--ok { border-style: solid; border-color: var(--vd-green); background: var(--vd-green-pale); }
.vd-drop__ico {
  width: 56px; height: 56px; border-radius: var(--vd-r-lg);
  background: rgba(123,31,162,.10); color: var(--vd-purple);
  display: flex; align-items: center; justify-content: center;
}
.vd-drop--ok .vd-drop__ico { background: rgba(27,94,32,.10); color: var(--vd-green); }
.vd-drop__title { font-size: .95rem; font-weight: 600; color: var(--vd-gray-800); margin: 0; }
.vd-drop__sub { font-size: .8rem; color: var(--vd-gray-500); margin: 0; }
.vd-drop__file { font-size: .83rem; font-weight: 600; color: var(--vd-green); margin: 0; word-break: break-all; max-width: 280px; }

/* QR Panel */
.vd-qr-box {
  border: 1.5px dashed var(--vd-gray-200); border-radius: var(--vd-r-lg);
  padding: 32px 20px; text-align: center; margin-bottom: 20px; background: var(--vd-gray-50);
}
.vd-qr-box__ico { width: 64px; height: 64px; border-radius: var(--vd-r-lg); background: var(--vd-purple-light); color: var(--vd-purple); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.vd-qr-box__title { font-size: .95rem; font-weight: 600; color: var(--vd-gray-800); margin: 0 0 6px; }
.vd-qr-box__sub { font-size: .82rem; color: var(--vd-gray-500); margin: 0 0 20px; }
.vd-qr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Spinner */
.vd-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; flex-shrink: 0; animation: vd-rot .7s linear infinite; }
@keyframes vd-rot { to { transform: rotate(360deg); } }

/* RESULTADO */
.vd-result { max-width: 820px; margin: 0 auto 56px; border-radius: var(--vd-r-xl); padding: 28px 32px; display: flex; gap: 20px; align-items: flex-start; animation: vd-slidein .3s var(--vd-ease); }
.vd-result--ok   { background: var(--vd-green-pale); border: 1.5px solid var(--vd-green-border); }
.vd-result--warn { background: var(--vd-amber-pale); border: 1.5px solid var(--vd-amber-border); }
.vd-result--err  { background: var(--vd-red-pale);   border: 1.5px solid var(--vd-red-border); }
.vd-result__ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vd-result--ok   .vd-result__ico { background: var(--vd-green-border); color: var(--vd-green); }
.vd-result--warn .vd-result__ico { background: var(--vd-amber-border); color: var(--vd-amber); }
.vd-result--err  .vd-result__ico { background: var(--vd-red-border);   color: var(--vd-red); }
.vd-result__body { flex: 1; min-width: 0; }
.vd-result__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 14px; }
.vd-result--ok   .vd-result__title { color: var(--vd-green); }
.vd-result--warn .vd-result__title { color: var(--vd-amber); }
.vd-result--err  .vd-result__title { color: var(--vd-red); }
.vd-result__grid { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin-bottom: 20px; }
.vd-rk { font-size: .8rem; color: var(--vd-gray-600); font-weight: 500; }
.vd-rv { font-size: .875rem; color: var(--vd-gray-900); font-weight: 600; }
.vd-rv--mono { font-family: 'SFMono-Regular', Consolas, monospace; font-size: .8rem; letter-spacing: .5px; }
.vd-rv--ok { color: var(--vd-green); }
.vd-result__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.vd-result__msg { font-size: .95rem; color: var(--vd-gray-700); margin: 0; line-height: 1.6; }

/* COMO FUNCIONA */
.vd-how { padding: 80px 0; background: var(--vd-purple-pale); }
.vd-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1020px; margin: 0 auto; }
.vd-step { background: #fff; border-radius: var(--vd-r-2xl); padding: 44px 28px 34px; box-shadow: 0 1px 2px rgba(74,23,95,.04), 0 1px 3px rgba(74,23,95,.03); border: 1px solid var(--facm-border-soft); position: relative; text-align: center; transition: box-shadow .22s var(--vd-ease), transform .22s var(--vd-ease), border-color .22s var(--vd-ease); }
.vd-step:hover { box-shadow: var(--facm-shadow-card); transform: translateY(-4px); border-color: var(--vd-purple-border); }
.vd-step__n { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 99px; background: #fff; border: 1.5px solid var(--facm-border-soft); color: var(--vd-purple); font-size: .82rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.vd-step__ico { width: 66px; height: 66px; border-radius: 20px; background: linear-gradient(150deg, var(--facm-purple-100), var(--facm-purple-050)); color: var(--vd-purple); border: 1px solid rgba(122,52,148,.12); box-shadow: 0 8px 20px rgba(74,23,95,.10); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.vd-step__title { font-size: 1.0625rem; font-weight: 700; color: var(--facm-purple-900); margin: 0 0 10px; letter-spacing: -.01em; }
.vd-step__desc { font-size: .9rem; color: var(--facm-text-secondary); margin: 0 auto; max-width: 250px; line-height: 1.6; }

/* DOCUMENTOS */
.vd-docs { padding: 80px 0; background: #fff; }
.vd-docs__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.vd-doc-card { background: var(--vd-gray-50); border: 1px solid var(--vd-gray-200); border-radius: var(--vd-r-xl); padding: 24px 18px; text-align: center; transition: all .2s var(--vd-ease); }
.vd-doc-card:hover { background: var(--vd-purple-pale); border-color: var(--vd-purple-border); transform: translateY(-2px); box-shadow: var(--vd-sh-sm); }
.vd-doc-card__ico { width: 52px; height: 52px; border-radius: var(--vd-r); background: var(--vd-purple-light); color: var(--vd-purple); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.vd-doc-card__title { font-size: .95rem; font-weight: 700; color: var(--vd-gray-900); margin: 0 0 6px; }
.vd-doc-card__desc { font-size: .78rem; color: var(--vd-gray-500); margin: 0; line-height: 1.5; }

/* SEGURIDAD */
.vd-security { padding: 80px 0; background: linear-gradient(135deg, var(--vd-purple-dark) 0%, var(--vd-purple) 100%); }
.vd-security .vd-section-head h2 { color: #fff; }
.vd-security .vd-section-head p { color: rgba(255,255,255,.75); }
.vd-security .vd-section-head__eyebrow { color: rgba(255,255,255,.85); }
.vd-sec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.vd-sec-card { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.15); border-radius: var(--vd-r-xl); padding: 28px 24px; backdrop-filter: blur(4px); transition: background .2s var(--vd-ease); }
.vd-sec-card:hover { background: rgba(255,255,255,.18); }
.vd-sec-card__ico { width: 48px; height: 48px; border-radius: var(--vd-r); background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.vd-sec-card__title { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.vd-sec-card__desc { font-size: .875rem; color: rgba(255,255,255,.80); margin: 0; line-height: 1.6; }

/* FAQ */
.vd-faq { padding: 80px 0; background: var(--vd-gray-50); }
.vd-faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.vd-faq-item { background: #fff; border-radius: var(--vd-r); border: 1px solid var(--vd-gray-200); overflow: hidden; transition: box-shadow .2s var(--vd-ease), border-color .2s var(--vd-ease); }
.vd-faq-item--open { box-shadow: var(--vd-sh-sm); border-color: var(--vd-purple-border); }
.vd-faq-btn { width: 100%; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: none; cursor: pointer; text-align: left; font-size: .95rem; font-weight: 600; color: var(--vd-gray-900); transition: color .2s var(--vd-ease); }
.vd-faq-btn:hover { color: var(--vd-purple); }
.vd-faq-item--open .vd-faq-btn { color: var(--vd-purple); }
.vd-faq-btn__chev { flex-shrink: 0; color: var(--vd-gray-400); transition: transform .25s var(--vd-ease), color .2s var(--vd-ease); }
.vd-faq-item--open .vd-faq-btn__chev { transform: rotate(180deg); color: var(--vd-purple); }
.vd-faq-answer { padding: 0 20px 20px; font-size: .9rem; color: var(--vd-gray-600); line-height: 1.7; }

/* FOCUS (Accesibilidad) */
.vd-btn:focus-visible, .vd-method-card:focus-visible, .vd-faq-btn:focus-visible, .vd-input:focus-visible { outline: 2px solid var(--vd-purple); outline-offset: 2px; }
.vd-drop:focus-visible { outline: 2px solid var(--vd-purple); outline-offset: 2px; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .vd-docs__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .vd-hero__grid { grid-template-columns: 1fr; }
  /* Igual que el panel de tarjetas que reemplazo: en mobile se prioriza el
     texto/CTA por sobre la imagen decorativa (menos peso, menos scroll
     antes de llegar al boton "VERIFICAR CON QR"). */
  .vd-hero__figure { display: none; }
  .vd-steps { grid-template-columns: 1fr; }
  .vd-sec-grid { grid-template-columns: 1fr; }
  .vd-hero__title { font-size: 2.5rem; }
}
@media (max-width: 640px) {
  .vd-hero { padding: 48px 0 44px; }
  .vd-hero__title { font-size: 2rem; }
  .vd-wrap { padding: 0 16px; }
  .vd-method-grid { grid-template-columns: 1fr; }
  .vd-form-panel__body { padding: 20px 18px; }
  .vd-form-panel__head { padding: 18px 18px 16px; }
  .vd-result { flex-direction: column; gap: 14px; padding: 20px 18px; }
  .vd-result__grid { grid-template-columns: 1fr; gap: 6px; }
  .vd-docs__grid { grid-template-columns: 1fr 1fr; }
  .vd-centro { padding: 48px 0 40px; }
  .vd-how, .vd-docs, .vd-security, .vd-faq { padding: 56px 0; }
}
@media (max-width: 480px) {
  .vd-docs__grid { grid-template-columns: 1fr; }
  .vd-method-grid { gap: 10px; }
  .vd-result__actions { flex-direction: column; }
}

/* ================================================================
   POLISH PHASE -- UI/UX Refinements
   ================================================================ */

/* -- Hero feature badges -- */
.vd-hero__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 28px;
}
.vd-hero__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--vd-gray-700);
  font-weight: 500;
}
.vd-hero__feature-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(123,31,162,.12);
  color: var(--vd-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* -- Method card polish -- */
.vd-method-card {
  position: relative;
  transition: transform .2s var(--vd-ease), box-shadow .2s var(--vd-ease), border-color .2s var(--vd-ease), background .2s var(--vd-ease);
}
.vd-method-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--vd-sh-md);
}
.vd-method-card--active {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(123,31,162,.18);
}
.vd-method-card__selected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--vd-purple);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  margin-top: 2px;
}

/* -- Input polish -- */
.vd-input {
  height: 50px;
  /* 16px minimo: por debajo de eso Safari/iOS hace zoom automatico al
     enfocar el campo (el RUT en RutGate), aunque el viewport no lo pida. */
  font-size: 16px;
}
.vd-input:focus {
  border-color: var(--vd-purple);
  box-shadow: 0 0 0 3px rgba(123,31,162,.12);
}

/* -- Loading multistep -- */
.vd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px;
  animation: vd-slidein .25s var(--vd-ease);
}
.vd-loading__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--vd-purple-light);
  border-top-color: var(--vd-purple);
  border-radius: 50%;
  animation: vd-rot .8s linear infinite;
}
.vd-loading__step {
  font-size: .9rem;
  font-weight: 600;
  color: var(--vd-purple-mid);
  text-align: center;
  min-height: 1.4em;
  transition: opacity .3s;
}
.vd-loading__bar {
  width: 200px;
  height: 4px;
  background: var(--vd-purple-light);
  border-radius: 99px;
  overflow: hidden;
}
.vd-loading__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vd-purple) 0%, var(--vd-purple-mid) 100%);
  border-radius: 99px;
  transition: width .4s var(--vd-ease);
}

/* -- File preview card -- */
.vd-file-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--vd-green-pale);
  border: 1.5px solid var(--vd-green-border);
  border-radius: var(--vd-r-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
  animation: vd-slidein .2s var(--vd-ease);
}
.vd-file-preview__ico {
  width: 44px;
  height: 44px;
  background: rgba(27,94,32,.12);
  border-radius: var(--vd-r);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vd-green);
  flex-shrink: 0;
}
.vd-file-preview__name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--vd-gray-900);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.vd-file-preview__meta {
  font-size: .77rem;
  color: var(--vd-gray-600);
  margin: 0;
}
.vd-file-preview__badge {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--vd-green);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

/* -- QR image preview -- */
.vd-qr-preview {
  border: 1.5px solid var(--vd-purple-border);
  border-radius: var(--vd-r-lg);
  padding: 12px;
  text-align: center;
  margin-bottom: 16px;
  background: var(--vd-purple-pale);
  animation: vd-slidein .2s var(--vd-ease);
}
.vd-qr-preview img {
  max-width: 180px;
  max-height: 180px;
  border-radius: var(--vd-r);
  object-fit: contain;
}
.vd-qr-preview__name {
  font-size: .8rem;
  color: var(--vd-gray-600);
  margin: 8px 0 0;
}

/* -- Result premium -- */
.vd-result--ok .vd-result__ico {
  width: 60px;
  height: 60px;
}
.vd-result__subtitle {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--vd-green);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vd-result__issuer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(27,94,32,.06);
  border-radius: var(--vd-r);
  margin: 12px 0 16px;
  font-size: .82rem;
  color: var(--vd-gray-700);
}
.vd-result__issuer-ico {
  color: var(--vd-green);
  flex-shrink: 0;
}

/* -- How it works connector -- */
.vd-steps {
  position: relative;
}
.vd-step--connector::after {
  content: '';
  position: absolute;
  top: 38px;
  right: -20px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--vd-purple-border), transparent);
  pointer-events: none;
}

/* -- FAQ animation -- */
.vd-faq-answer {
  animation: vd-slidein .2s var(--vd-ease);
}

/* -- Responsive for file preview -- */
@media (max-width: 480px) {
  .vd-file-preview { flex-wrap: wrap; }
  .vd-file-preview__badge { margin-left: 0; }
  .vd-file-preview__name { max-width: 200px; }
}
/* ================================================================
   MODAL DE VALIDACION
   ================================================================ */
.vd-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 4, 36, 0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: vd-overlay-in .18s var(--vd-ease);
  /* Evita scroll horizontal en el body */
  overflow: hidden;
}
@keyframes vd-overlay-in { from{opacity:0} to{opacity:1} }

.vd-modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(74,20,140,.18), 0 4px 16px rgba(0,0,0,.08);
  width: 100%; max-width: 540px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  animation: vd-modal-in .22s var(--vd-ease);
  position: relative;
  /* Scroll suave dentro del modal */
  overscroll-behavior: contain;
}
@keyframes vd-modal-in {
  from { opacity:0; transform: translateY(12px) scale(.98); }
  to   { opacity:1; transform: none; }
}

/* Cabecera pegajosa */
.vd-modal__head {
  padding: 22px 24px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0;
  background: #fff;
  z-index: 2;
  border-bottom: 1px solid rgba(123,31,162,.08);
}
.vd-modal__title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--vd-purple-dark);
  margin: 0;
  letter-spacing: -.01em;
}

/* Boton cerrar — X visible y limpio */
.vd-modal__close {
  width: 34px; height: 34px;
  border: none;
  background: var(--vd-gray-100);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--vd-gray-600);
  flex-shrink: 0;
  transition: background .15s var(--vd-ease), color .15s var(--vd-ease), transform .15s var(--vd-ease);
  /* Asegura que el icono sea visible */
  line-height: 1;
}
.vd-modal__close:hover {
  background: var(--vd-purple-light);
  color: var(--vd-purple);
  transform: scale(1.08);
}
.vd-modal__close:active { transform: scale(.95); }
.vd-modal__close svg { display: block; pointer-events: none; }

.vd-modal__body { padding: 18px 24px 24px; }

/* ── Modal "Como funciona" ─────────────────────────────────── */
.vd-how-modal { max-width: 480px; }

.vd-how-step {
  display: flex; gap: 16px;
  padding: 16px 0;
  position: relative;
}

/* Linea conectora entre pasos */
.vd-how-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px; top: 44px;
  width: 2px;
  height: calc(100% - 28px);
  background: linear-gradient(to bottom, rgba(123,31,162,.2), rgba(123,31,162,.05));
  border-radius: 1px;
}

.vd-how-step__n {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vd-purple-light), rgba(123,31,162,.15));
  color: var(--vd-purple);
  font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(123,31,162,.2);
  position: relative; z-index: 1;
}

.vd-how-step__title {
  font-size: .9rem; font-weight: 700;
  color: var(--vd-gray-900); margin: 0 0 5px;
  line-height: 1.3;
}
.vd-how-step__desc {
  font-size: .82rem; color: var(--vd-gray-600);
  margin: 0; line-height: 1.6;
}

/* Nota de transparencia */
.vd-how-note {
  background: var(--vd-purple-pale);
  border: 1px solid rgba(123,31,162,.12);
  border-radius: var(--vd-r);
  padding: 12px 14px;
  margin-top: 4px;
}
.vd-how-note p {
  font-size: .79rem; color: var(--vd-purple-mid);
  margin: 0; line-height: 1.6;
}
.vd-how-note strong { color: var(--vd-purple-dark); }

/* Metodos tabs dentro del modal -- estilo underline premium */
.vd-modal-tabs {
  display: grid; grid-template-columns: repeat(3,1fr);
  background: transparent;
  border-bottom: 1.5px solid var(--vd-gray-200);
  margin-bottom: 22px; gap: 0;
  padding: 0;
}
.vd-modal-tab {
  padding: 10px 8px 11px; border: none; background: transparent;
  font-size: .78rem; font-weight: 600; letter-spacing: .2px;
  color: var(--vd-gray-500); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: color .15s var(--vd-ease), border-color .15s var(--vd-ease);
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  border-radius: 0;
  text-transform: uppercase;
}
.vd-modal-tab:hover { color: var(--vd-purple); background: transparent; }
.vd-modal-tab--active {
  color: var(--vd-purple-dark);
  border-bottom-color: var(--vd-purple);
  background: transparent;
  box-shadow: none;
}
.vd-modal-tab svg { opacity: .7; }
.vd-modal-tab--active svg { opacity: 1; }

/* ================================================================
   DEMO BADGE
   ================================================================ */
.vd-demo-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff3e0; color: #e65100;
  border: 1px solid #ffcc02; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 10px; margin-bottom: 16px;
}

/* ================================================================
   PANEL DE RESULTADO DINAMICO
   ================================================================ */
.vd-result--expired .vd-result__ico  { background: var(--vd-amber-border); color: var(--vd-amber); }
.vd-result--revoked .vd-result__ico  { background: var(--vd-red-border);   color: var(--vd-red); }
.vd-result--expired .vd-result__title { color: var(--vd-amber); }
.vd-result--revoked .vd-result__title { color: var(--vd-red); }
.vd-result--revoked { background: var(--vd-red-pale); border: 1.5px solid var(--vd-red-border); }
.vd-result--expired { background: var(--vd-amber-pale); border: 1.5px solid var(--vd-amber-border); }

/* Skeleton loader */
.vd-skeleton {
  background: linear-gradient(90deg, var(--vd-gray-100) 25%, var(--vd-gray-200) 50%, var(--vd-gray-100) 75%);
  background-size: 200% 100%;
  animation: vd-shimmer 1.4s infinite;
  border-radius: var(--vd-r-sm);
}
@keyframes vd-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.vd-result-skeleton { max-width: 680px; margin: 0 auto; padding: 28px 32px; }
.vd-sk-line { height: 12px; margin-bottom: 12px; }
.vd-sk-line--sm  { width: 40%; }
.vd-sk-line--md  { width: 65%; }
.vd-sk-line--full{ width: 100%; }

/* Camera view */
.vd-camera-wrap {
  position: relative; border-radius: var(--vd-r-lg); overflow: hidden;
  background: #000; aspect-ratio: 4/3; margin-bottom: 12px;
}
.vd-camera-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-camera-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vd-camera-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,.55); color: #fff;
}
.vd-camera-overlay p { margin: 0; font-size: .85rem; font-weight: 500; }

/* File upload clean */
.vd-file-chosen {
  display: flex; align-items: center; gap: 12px;
  background: var(--vd-green-pale); border: 1.5px solid var(--vd-green-border);
  border-radius: var(--vd-r); padding: 12px 14px;
  margin-bottom: 14px; animation: vd-slidein .2s var(--vd-ease);
}
.vd-file-chosen__ico { color: var(--vd-green); flex-shrink: 0; }
.vd-file-chosen__name { font-size: .88rem; font-weight: 700; color: var(--vd-gray-900); margin: 0 0 2px; word-break: break-all; }
.vd-file-chosen__meta { font-size: .75rem; color: var(--vd-gray-500); margin: 0; }

/* ================================================================
   RESPONSIVE MODAL
   ================================================================ */
@media(max-width:480px){
  .vd-overlay { align-items: flex-end; padding: 0; }
  .vd-modal { border-radius: var(--vd-r-xl) var(--vd-r-xl) 0 0; max-height: 95vh; }
  .vd-modal__head, .vd-modal__body { padding-left: 18px; padding-right: 18px; }
  .vd-modal-tabs { grid-template-columns: 1fr 1fr 1fr; }
  .vd-modal-tab { font-size: .72rem; padding: 7px 6px; }
}

/* prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  .vd-overlay, .vd-modal, .vd-skeleton { animation: none; }
}

/* ================================================================
   SISTEMA DE MODAL UNIFICADO (vdm-*)
   Renderizado via React Portal en document.body.
   Reemplaza los estilos anteriores vd-modal y vd-overlay.
   Z-index escala: header 100 / dropdown 500 / modal 9000 / modal-content 9001
   ================================================================ */

/* -- Overlay (fondo) -- */
.vdm-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 28px);
  background: rgba(18, 4, 32, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: vdm-fade-in 180ms cubic-bezier(.4,0,.2,1);
  overscroll-behavior: none;
}

@keyframes vdm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -- Contenedor del modal -- */
.vdm-modal {
  z-index: 9001;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20px;
  box-shadow:
    0 32px 80px rgba(74,20,140,.18),
    0 8px 24px rgba(0,0,0,.09);
  overflow: hidden;
  width: 100%;
  /* Altura maxima: dvh con fallback */
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  animation: vdm-slide-in 200ms cubic-bezier(.4,0,.2,1);
}

@keyframes vdm-slide-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* -- Anchos -- */
.vdm--compacto { max-width: 460px; }
.vdm--mediano  { max-width: 540px; }
.vdm--amplio   { max-width: 860px; }

/* -- Cabecera fija -- */
.vdm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(123,31,162,.10);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.vdm-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--vd-purple-dark);
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.3;
  padding-left: 10px;
  border-left: 3px solid var(--vd-purple);
}

/* -- Boton cerrar -- PREMIUM */
.vdm-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Fondo morado suave, X visible */
  background: var(--vd-purple-light);
  color: var(--vd-purple);
  transition: background .15s, color .15s, transform .12s, box-shadow .15s;
  box-shadow: none;
}
/* Forzar visibilidad del icono SVG */
.vdm-close svg {
  display: block !important;
  pointer-events: none;
  width: 17px;
  height: 17px;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.5;
  overflow: visible;
}
.vdm-close:hover {
  background: var(--vd-purple);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(123,31,162,.28);
}
.vdm-close:active { transform: scale(.93); }
.vdm-close:focus-visible {
  outline: 2.5px solid var(--vd-purple);
  outline-offset: 2px;
}

/* -- Cuerpo desplazable -- */
.vdm-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 28px;
  box-sizing: border-box;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(123,31,162,.18) transparent;
}
.vdm-body::-webkit-scrollbar { width: 5px; }
.vdm-body::-webkit-scrollbar-track { background: transparent; }
.vdm-body::-webkit-scrollbar-thumb {
  background: rgba(123,31,162,.22);
  border-radius: 99px;
}
.vdm-body::-webkit-scrollbar-thumb:hover {
  background: rgba(123,31,162,.40);
}

/* -- Nota de transparencia en Como funciona -- */
.vdm-nota {
  background: var(--vd-purple-pale);
  border: 1px solid rgba(123,31,162,.11);
  border-radius: 10px;
  padding: 13px 15px;
  margin-top: 6px;
}
.vdm-nota p {
  font-size: .79rem;
  color: var(--vd-purple-mid);
  margin: 0;
  line-height: 1.65;
}
.vdm-nota strong { color: var(--vd-purple-dark); }

/* -- Pasos de Como funciona -- */
.vdm-step {
  display: flex;
  gap: 15px;
  padding: 15px 0;
  position: relative;
}
.vdm-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px; top: 43px;
  width: 2px;
  height: calc(100% - 28px);
  background: linear-gradient(to bottom, rgba(123,31,162,.18), transparent);
  border-radius: 1px;
}
.vdm-step__n {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vd-purple-light), rgba(123,31,162,.14));
  color: var(--vd-purple);
  font-size: .77rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(123,31,162,.18);
  position: relative; z-index: 1;
}
.vdm-step__title {
  font-size: .9rem; font-weight: 700;
  color: var(--vd-gray-900); margin: 0 0 4px;
}
.vdm-step__desc {
  font-size: .81rem; color: var(--vd-gray-600);
  margin: 0; line-height: 1.6;
}

/* -- Badge demo dentro del modal -- */
.vdm-demo-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff8ec; color: #b25000;
  border: 1px solid rgba(226,115,0,.25); border-radius: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 10px; margin-bottom: 16px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 640px) {
  /* En mobile el modal se ancla al borde inferior */
  .vdm-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .vdm-modal {
    border-radius: 18px 18px 0 0;
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
  }
  .vdm--amplio { max-width: 100%; }
  .vdm-head { padding: 15px 16px 13px; }
  .vdm-body { padding: 14px 16px 20px; }
  .vdm-title { font-size: .95rem; }
}

@media (max-width: 400px) {
  .vdm-head { padding: 13px 14px 11px; }
  .vdm-body { padding: 12px 14px 18px; }
  .vdm-close { width: 34px; height: 34px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .vdm-overlay { animation: none; }
  .vdm-modal   { animation: none; }
}

/* ================================================================
   SISTEMA MODAL PREMIUM — Enterprise FACM
   Reemplaza / complementa los estilos vdm-* anteriores.
   ================================================================ */

/* ── Overlay ─────────────────────────────────────────────────── */
.vdm-overlay {
  position: fixed; inset: 0;
  width: 100%; height: 100vh; height: 100dvh;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 3vw, 28px);
  background: rgba(18,4,38,.58);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: vdmP-fade 180ms cubic-bezier(.4,0,.2,1);
  overscroll-behavior: none;
}
@keyframes vdmP-fade { from{opacity:0} to{opacity:1} }

/* ── Contenedor del modal ────────────────────────────────────── */
.vdm-modal {
  z-index: 9001;
  display: flex; flex-direction: column;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(91,41,142,.08);
  box-shadow: var(--facm-shadow-modal), 0 8px 20px rgba(74,23,95,.08);
  overflow: hidden;
  width: 100%;
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  animation: vdmP-slide 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes vdmP-slide {
  from { opacity:0; transform: translateY(10px) scale(.986); }
  to   { opacity:1; transform: none; }
}
@keyframes vdmP-rise {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: none; }
}
.vdm--compacto { max-width: 460px; }
.vdm--mediano  { max-width: 540px; }
.vdm--amplio   { max-width: 860px; }

/* ── Header premium ──────────────────────────────────────────── */
.vdm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 24px 24px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(100,34,125,.08);
  background: linear-gradient(180deg, #ffffff 0%, #faf7fb 100%);
}
.vdm-head__left { display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 0; }
.vdm-head__icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--facm-purple-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--vd-purple);
  border: 1px solid rgba(122,52,148,.12);
}
.vdm-head__text { flex: 1; min-width: 0; padding-top: 1px; }
.vdm-head__title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--vd-purple-dark); margin: 0 0 5px;
  letter-spacing: -.01em; line-height: 1.25;
}
.vdm-head__desc {
  font-size: .8rem; color: var(--vd-gray-500);
  margin: 0; line-height: 1.55; font-weight: 400;
}

/* ── Boton cerrar premium ────────────────────────────────────── */
.vdm-close {
  width: 44px; height: 44px; border: none;
  background: rgba(100,34,125,.05); border-radius: 12px;
  cursor: pointer; flex-shrink: 0; margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--vd-gray-500);
  transition: background .16s, color .16s, transform .14s, box-shadow .16s;
}
.vdm-close svg { display:block !important; stroke:currentColor !important; fill:none !important; }
.vdm-close:hover { background: var(--facm-purple-100); color: var(--vd-purple); transform: scale(1.03); box-shadow: 0 1px 3px rgba(74,23,95,.10); }
.vdm-close:active { transform: scale(.98); }
.vdm-close:focus-visible { outline: 2px solid var(--vd-purple); outline-offset: 2px; }

/* ── Body ────────────────────────────────────────────────────── */
.vdm-body {
  flex: 1; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 26px;
  scrollbar-width: thin; scrollbar-color: rgba(122,52,148,.18) transparent;
  box-sizing: border-box; max-width: 100%;
}
.vdm-body::-webkit-scrollbar { width: 4px; }
.vdm-body::-webkit-scrollbar-thumb { background: rgba(122,52,148,.18); border-radius: 99px; }

/* ── Aviso de demo elegante ──────────────────────────────────── */
.vdm-demo-notice {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fffbf2; border: 1px solid rgba(204,120,0,.16);
  border-radius: 16px; padding: 16px 20px; margin-bottom: 24px;
}
.vdm-demo-notice__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #e07c00;
  flex-shrink: 0; margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(224,124,0,.10);
}
.vdm-demo-notice__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #b56200; display: block; margin-bottom: 3px;
}
.vdm-demo-notice__text {
  font-size: .77rem; color: #8a5200; margin: 0; line-height: 1.5;
}

/* ── Tarjetas selector de metodo ─────────────────────────────── */
.vdm-methods {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 520px; margin-left: auto; margin-right: auto;
  gap: 12px; margin-bottom: 24px;
}
.vdm-method {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 10px; border: 1px solid rgba(100,34,125,.10);
  border-radius: 16px; background: #ffffff;
  cursor: pointer; transition: transform .18s cubic-bezier(.4,0,.2,1), border-color .18s, background .18s, box-shadow .18s, color .18s;
  text-align: center; font-size: .78rem; font-weight: 600;
  color: var(--vd-gray-500); letter-spacing: .1px;
}
.vdm-method:hover {
  border-color: rgba(122,52,148,.28);
  background: var(--facm-purple-050);
  color: var(--vd-purple-mid);
  transform: translateY(-2px);
  box-shadow: var(--facm-shadow-card);
}
.vdm-method__ico {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--facm-purple-100); color: var(--facm-purple-500);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s, transform .18s;
}
/* Activo */
.vdm-method--active {
  border-color: var(--facm-purple-500);
  background: var(--facm-purple-050);
  color: var(--vd-purple-mid);
  box-shadow: var(--facm-shadow-card);
}
.vdm-method--active:hover { transform: translateY(-2px); }
.vdm-method--active .vdm-method__ico {
  background: var(--facm-purple-600);
  color: #fff; transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(74,23,95,.20);
}

/* ── Input Fluent UI ─────────────────────────────────────────── */
.vdm-code-field {
  display: flex; flex-direction: column; width: 100%; min-width: 0;
  animation: vdmP-rise 160ms cubic-bezier(.4,0,.2,1);
}
.vdm-field-label {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--vd-purple-mid); margin-bottom: 8px;
}
.vdm-input-wrap {
  display: flex; align-items: center;
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--facm-border-soft);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(74,23,95,.04), 0 1px 3px rgba(74,23,95,.03);
  width: 100%; min-width: 0;
  transition: border-color .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1);
}
.vdm-input-wrap:focus-within {
  border-color: var(--facm-purple-600);
  box-shadow: 0 0 0 4px rgba(122,52,148,.10);
}
.vdm-input-wrap:not(:focus-within):hover {
  border-color: rgba(122,52,148,.35);
  box-shadow: var(--facm-shadow-card);
}
.vdm-input-wrap--error {
  border-color: var(--vd-red) !important;
  background: rgba(183,28,28,.02);
}
.vdm-input-wrap--error:focus-within {
  box-shadow: 0 0 0 3px rgba(183,28,28,.08);
}
.vdm-input-wrap__ico {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-left: 18px; margin-right: 12px;
  color: var(--facm-purple-500);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.vdm-input-wrap__ico svg { width: 20px; height: 20px; }
.vdm-input-wrap input,
.vdm-input-wrap input[type="text"] {
  flex: 1; min-width: 0; width: auto;
  height: 100%; max-width: 100%;
  margin: 0;
  border: 0 !important; outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0 18px 0 0;
  font-size: 1rem; color: var(--vd-gray-900);
  -webkit-appearance: none; appearance: none;
}
.vdm-input-wrap input::placeholder { color: rgba(91,41,142,.32); }
.vdm-input-wrap input:disabled { background: transparent !important; cursor: not-allowed; }
.vdm-field-error {
  display: flex; align-items: center; gap: 4px;
  font-size: .76rem; color: var(--vd-red);
  margin: 6px 0 0 2px; line-height: 1.4;
}
.vdm-field-hint {
  font-size: .8rem; color: var(--vd-gray-500);
  margin: 8px 0 0 2px; line-height: 1.4;
}

/* ── Boton primario premium ──────────────────────────────────── */
.vdm-primary-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px; border: none;
  border-radius: 14px; cursor: pointer;
  margin-top: 24px; max-width: 100%;
  font-size: .93rem; font-weight: 700; letter-spacing: .15px;
  background: var(--facm-purple-600);
  color: #fff;
  box-shadow: var(--facm-shadow-btn), 0 1px 3px rgba(74,23,95,.06);
  transition: background .16s cubic-bezier(.4,0,.2,1), transform .14s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1);
}
.vdm-primary-btn:hover:not(:disabled) {
  background: var(--facm-btn-hover); transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(74,23,95,.20);
}
.vdm-primary-btn:active:not(:disabled) { background: var(--facm-btn-active); transform: scale(.99) translateY(0); box-shadow: var(--facm-shadow-btn); }
.vdm-primary-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(122,52,148,.18), var(--facm-shadow-btn); }
.vdm-primary-btn:disabled { background: var(--facm-purple-300); color: #fff; cursor: not-allowed; box-shadow: none; }
.vdm-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: vdm-rotate .7s linear infinite; flex-shrink: 0; }
@keyframes vdm-rotate { to { transform: rotate(360deg); } }

/* ── EstadoVerificacion: carga reutilizable (aria-live) ──────── */
.vd-estado {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 18px 20px;
  border-radius: var(--vd-r-lg, 16px);
  background: linear-gradient(135deg, var(--facm-purple-050), #fff);
  border: 1px solid var(--vd-purple-border);
}
.vd-estado__spinner {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--facm-purple-100);
  border-top-color: var(--vd-purple);
  animation: vdm-rotate .8s linear infinite;
}
.vd-estado__msg {
  margin: 0; font-size: 1.0625rem; font-weight: 600;
  color: var(--facm-purple-900); line-height: 1.35;
}
.vd-estado__detail {
  margin: 2px 0 0; font-size: .9375rem; font-weight: 500;
  color: var(--facm-text-secondary); line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  .vd-estado__spinner {
    animation: none;
    border-top-color: var(--facm-purple-100);
    background: var(--vd-purple); border-color: transparent;
    width: 16px; height: 16px;
  }
}

/* ── Boton secundario / ghost ────────────────────────────────── */
.vdm-ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 18px;
  border: 1.5px solid var(--vd-gray-200); border-radius: 12px;
  background: transparent; color: var(--vd-purple-mid);
  font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.vdm-ghost-btn:hover { border-color: var(--vd-purple-border); background: var(--facm-purple-050); }
.vdm-ghost-btn--danger { color: var(--vd-red); border-color: rgba(183,28,28,.18); }
.vdm-ghost-btn--danger:hover { background: var(--vd-red-pale); border-color: var(--vd-red-border); }

/* ── Zona drag&drop refinada ─────────────────────────────────── */
.vdm-dropzone {
  border: 1.5px dashed var(--facm-purple-300); border-radius: 16px;
  padding: 32px 24px; text-align: center; cursor: pointer;
  background: #fcfafd;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color .18s cubic-bezier(.4,0,.2,1), background .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, transform .18s;
  animation: vdmP-rise 160ms cubic-bezier(.4,0,.2,1);
}
.vdm-dropzone:hover { border-color: var(--facm-purple-500); background: var(--facm-purple-050); box-shadow: var(--facm-shadow-card); }
.vdm-dropzone:hover .vdm-dropzone__ico { transform: translateY(-2px); }
/* Estado arrastrando archivo */
.vdm-dropzone--drag {
  border-color: var(--facm-purple-600); border-style: solid;
  background: var(--facm-purple-100);
  box-shadow: 0 0 0 4px rgba(122,52,148,.10), var(--facm-shadow-card);
  transform: translateY(-2px); cursor: copy;
}
.vdm-dropzone--drag .vdm-dropzone__ico {
  background: var(--facm-purple-600);
  color: #fff; transform: translateY(-2px) scale(1.03);
}
.vdm-dropzone--drag .vdm-dropzone__title { color: var(--vd-purple-dark); }
.vdm-dropzone__ico {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--facm-purple-100);
  color: var(--vd-purple); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(122,52,148,.12);
  transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.vdm-dropzone__title { font-size: .92rem; font-weight: 600; color: var(--vd-gray-800); margin: 0; }
.vdm-dropzone__sub { font-size: .77rem; color: var(--vd-gray-400); margin: 0; }

/* ── Tarjeta archivo seleccionado ────────────────────────────── */
.vdm-file-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(100,34,125,.12);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(74,23,95,.04), 0 1px 3px rgba(74,23,95,.03);
  margin-bottom: 16px; animation: vdmP-rise 180ms cubic-bezier(.4,0,.2,1);
}
.vdm-file-card__ico {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--facm-purple-100);
  color: var(--vd-purple);
  border: 1px solid rgba(122,52,148,.12);
  display: flex; align-items: center; justify-content: center;
}
.vdm-file-card__info { flex: 1; min-width: 0; }
.vdm-file-card__name { font-size: .88rem; font-weight: 700; color: var(--vd-gray-900); margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdm-file-card__meta { font-size: .74rem; color: var(--vd-gray-500); margin: 0; display: flex; align-items: center; gap: 6px; }
.vdm-file-card__badge { font-size: .7rem; font-weight: 700; color: var(--vd-green); background: rgba(46,125,50,.10); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.vdm-file-card__remove { background: none; border: none; cursor: pointer; color: var(--vd-gray-400); padding: 6px; border-radius: 8px; flex-shrink: 0; transition: color .14s, background .14s; }
.vdm-file-card__remove:hover { color: var(--vd-red); background: var(--vd-red-pale); }

/* ── Acciones de archivo ─────────────────────────────────────── */
.vdm-file-actions { display: flex; gap: 8px; margin-bottom: 14px; }

/* ── QR botones ──────────────────────────────────────────────── */
/* justify-items:center + max-width en el boton: con un unico metodo
   (camara) en esta pestaña, un grid de 1 columna sin esto estiraria el
   boton borde a borde en vez del look de tarjeta compacta original
   (pensado para 2 botones lado a lado). */
.vdm-qr-btns { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; margin-bottom: 16px; animation: vdmP-rise 160ms cubic-bezier(.4,0,.2,1); }
.vdm-qr-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px; border: 1px solid var(--facm-purple-200);
  border-radius: 16px; background: #ffffff;
  width: 100%; max-width: 220px;
  cursor: pointer; transition: transform .18s cubic-bezier(.4,0,.2,1), border-color .18s, background .18s, box-shadow .18s, color .18s; font-size: .79rem;
  font-weight: 600; color: var(--vd-gray-600);
}
.vdm-qr-btn:hover { border-color: var(--facm-purple-500); background: var(--facm-purple-050); color: var(--vd-purple-mid); transform: translateY(-2px); box-shadow: var(--facm-shadow-card); }
.vdm-qr-btn__ico {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--facm-purple-100); color: var(--facm-purple-500);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s, transform .18s;
}
.vdm-qr-btn:hover .vdm-qr-btn__ico { background: var(--facm-purple-600); color: #fff; transform: scale(1.05); }

/* ── Camera view ─────────────────────────────────────────────── */
.vdm-camera { border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4/3; position: relative; margin-bottom: 10px; }
.vdm-camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vdm-camera__frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vdm-camera__rect { width: 160px; height: 160px; border: 2px solid rgba(255,255,255,.8); border-radius: 14px; }
.vdm-camera__stop { margin-bottom: 8px; }

/* ── Timeline Como funciona ──────────────────────────────────── */
.vdm-timeline { display: flex; flex-direction: column; gap: 0; }
.vdm-tl-item { display: flex; gap: 14px; }
.vdm-tl-left { display: flex; flex-direction: column; align-items: center; }
.vdm-tl-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--vd-purple), var(--vd-purple-dark));
  color: #fff; font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(123,31,162,.28);
}
.vdm-tl-line {
  width: 2px; flex: 1; min-height: 14px;
  background: linear-gradient(to bottom, rgba(123,31,162,.25), rgba(123,31,162,.05));
  margin: 4px 0;
}
.vdm-tl-content { padding-bottom: 18px; flex: 1; padding-top: 4px; }
.vdm-tl-item:last-child .vdm-tl-content { padding-bottom: 4px; }
.vdm-tl-title { font-size: .88rem; font-weight: 700; color: var(--vd-gray-900); margin: 0 0 4px; }
.vdm-tl-desc { font-size: .79rem; color: var(--vd-gray-500); margin: 0; line-height: 1.6; }

/* ── Aviso de transparencia ──────────────────────────────────── */
.vdm-transparency {
  display: flex; gap: 10px;
  background: rgba(123,31,162,.04); border: 1px solid rgba(123,31,162,.10);
  border-radius: 12px; padding: 13px 14px; margin-top: 4px;
}
.vdm-transparency__ico { color: var(--vd-purple); flex-shrink: 0; margin-top: 1px; }
.vdm-transparency__text { font-size: .77rem; color: var(--vd-gray-600); margin: 0; line-height: 1.6; }
.vdm-transparency__text strong { color: var(--vd-purple-dark); }

/* ── Separador ───────────────────────────────────────────────── */
.vdm-divider { border: none; border-top: 1px solid var(--vd-gray-100); margin: 16px 0; }

/* ── Resultado dentro del modal ──────────────────────────────── */
.vdm-result-wrap { margin-top: 16px; animation: vdmP-result 180ms cubic-bezier(.4,0,.2,1); }
.vdm-result-close { margin-top: 8px; }
@keyframes vdmP-result {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .vdm-overlay { align-items: flex-end; padding: 0; }
  .vdm-modal { border-radius: 20px 20px 0 0; max-height: calc(100dvh - 8px); }
  .vdm--amplio { max-width: 100%; }
  .vdm-head { padding: 18px 18px 15px; }
  .vdm-body { padding: 16px 18px 22px; }
  .vdm-close { width: 40px; height: 40px; }
  .vdm-methods { gap: 8px; }
  .vdm-method { padding: 12px 8px; }
  .vdm-method__ico { width: 34px; height: 34px; }
  .vdm-input-wrap__ico { margin-left: 14px; margin-right: 10px; }
  .vdm-demo-notice { padding: 14px 16px; }
  .vdm-dropzone { padding: 26px 18px; }
}
@media (max-width: 380px) {
  .vdm-methods { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vdm-overlay, .vdm-modal,
  .vdm-code-field, .vdm-dropzone, .vdm-file-card,
  .vdm-qr-btns, .vdm-result-wrap { animation: none; }
  .vdm-method:hover, .vdm-qr-btn:hover, .vdm-primary-btn:hover:not(:disabled),
  .vdm-dropzone:hover .vdm-dropzone__ico { transform: none; }
}

/* ================================================================
   ACCESIBILIDAD TIPOGRAFICA — Modal Valida DOC
   Escala legible (rem + clamp) y contraste reforzado para
   personas mayores, vision reducida y zoom hasta 200%.
   Scoped a .vdm-modal / .vdm-result-wrap: no altera logica ni
   layout, solo mejora legibilidad. Mayor especificidad que las
   reglas base y las de movil.
   ================================================================ */
.vdm-modal {
  font-family: Inter, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Titulo del modal — 22 a 23px, tracking fino */
.vdm-modal .vdm-head__title {
  font-size: clamp(1.375rem, 1.31rem + 0.28vw, 1.4375rem);
  line-height: 1.28; letter-spacing: -0.017em; color: var(--facm-purple-900);
}
/* Descripcion del modal — 16 a 17px, secundario sutil */
.vdm-modal .vdm-head__desc {
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.5; letter-spacing: -0.003em; color: var(--facm-text-secondary);
}

/* Aviso demostracion — 16 a 17px, contraste alto */
.vdm-modal .vdm-demo-notice__label {
  font-size: 1rem; font-weight: 700; letter-spacing: .06em; color: #8a4b00;
}
.vdm-modal .vdm-demo-notice__text {
  font-size: 1rem; line-height: 1.5; letter-spacing: -0.002em; color: #7a4600;
}

/* Tarjetas Codigo / Documento / QR — 16px, peso fino 600 */
.vdm-modal .vdm-method {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.003em; color: var(--facm-text-secondary);
}
.vdm-modal .vdm-method--active { color: var(--facm-purple-700); }
.vdm-modal .vdm-method__ico { color: var(--facm-purple-500); }
.vdm-modal .vdm-qr-btn {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.003em; color: var(--facm-text-secondary);
}
.vdm-modal .vdm-qr-btn__ico { color: var(--facm-purple-500); }

/* Labels — 16px, tracking amplio elegante */
.vdm-modal .vdm-field-label {
  font-size: 1rem; font-weight: 700; letter-spacing: .055em;
  line-height: 1.4; margin-bottom: 8px;
}

/* Input — 18px, altura minima 56px, foco visible */
.vdm-modal .vdm-input-wrap { min-height: 56px; }
.vdm-modal .vdm-input-wrap input,
.vdm-modal .vdm-input-wrap input[type="text"] {
  font-size: 1.0625rem; line-height: 1.4; font-weight: 400;
  letter-spacing: -0.003em; color: var(--facm-text-primary);
}
.vdm-modal .vdm-input-wrap input::placeholder { color: #77717d; font-weight: 400; }

/* Error de campo — 16px */
.vdm-modal .vdm-field-error {
  font-size: 1rem; line-height: 1.4; font-weight: 600;
}
/* Ayuda — 16px, contraste medio, permite multilinea */
.vdm-modal .vdm-field-hint {
  font-size: 1rem; line-height: 1.5; color: var(--facm-text-secondary);
  white-space: normal;
}

/* Dropzone — titulo 16px 600, ayuda 16px */
.vdm-modal .vdm-dropzone__title {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.006em; color: var(--facm-text-primary);
}
.vdm-modal .vdm-dropzone__sub {
  font-size: 1rem; line-height: 1.5; color: var(--facm-text-secondary);
}

/* Tarjeta de archivo */
.vdm-modal .vdm-file-card__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.006em; color: var(--facm-text-primary); }
.vdm-modal .vdm-file-card__meta { font-size: 1rem; color: var(--facm-text-secondary); }
.vdm-modal .vdm-file-card__badge { font-size: .9375rem; font-weight: 700; letter-spacing: .01em; }

/* Botones — 17px, peso 700, tracking fino, altura tactil */
.vdm-modal .vdm-primary-btn {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: .005em; min-height: 54px;
}
.vdm-modal .vdm-ghost-btn {
  font-size: 1.0625rem; font-weight: 600; min-height: 46px;
}

/* Resultado de validacion — titulo grande, datos legibles */
.vdm-result-wrap .vd-result__title {
  font-size: clamp(1.3125rem, 1.26rem + 0.25vw, 1.4375rem);
  line-height: 1.28; letter-spacing: -0.015em;
}
.vdm-result-wrap .vd-result__msg {
  font-size: 1.0625rem; line-height: 1.55; letter-spacing: -0.002em; color: var(--vd-gray-800);
}
.vdm-result-wrap .vd-rk { font-size: 1rem; font-weight: 500; color: var(--facm-text-secondary); }
.vdm-result-wrap .vd-rv { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.004em; color: var(--facm-text-primary); }
.vdm-result-wrap .vd-rv--mono { font-size: 1rem; letter-spacing: 0; }

/* Foco visible reforzado para navegacion por teclado */
.vdm-modal .vdm-method:focus-visible,
.vdm-modal .vdm-qr-btn:focus-visible,
.vdm-modal .vdm-dropzone:focus-within {
  outline: 2px solid var(--vd-purple); outline-offset: 2px;
}

/* En movil no reducir por debajo de 16px */
@media (max-width: 640px) {
  .vdm-modal .vdm-input-wrap { min-height: 56px; }
  .vdm-modal .vdm-primary-btn { min-height: 54px; }
}

/* ================================================================
   ACCESIBILIDAD TIPOGRAFICA — Landing Valida DOC (WCAG 2.2 AA)
   Solo tipografia, contraste y espaciado. No cambia layout,
   componentes ni logica. Escala fluida (clamp) para zoom/responsive.
   Texto de lectura nunca por debajo de 16px; grises con contraste AA.
   ================================================================ */

/* -- Hero: titulo principal, subtitulo y descripcion -- */
.vd-hero__badge {
  font-size: .8125rem; letter-spacing: 1px; color: var(--facm-purple-700);
}
.vd-hero__title {
  font-size: clamp(2.5rem, 2.05rem + 2.2vw, 3.75rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.015em;
}
.vd-hero__subtitle {
  font-size: 1.375rem; font-weight: 500; line-height: 1.5;
  color: var(--facm-text-primary); margin-bottom: 14px;
}
.vd-hero__desc {
  font-size: 1.1875rem; font-weight: 400; line-height: 1.6;
  color: var(--facm-text-secondary); margin-bottom: 32px;
}

/* -- Encabezados de seccion -- */
.vd-section-head { margin-bottom: 52px; }
.vd-section-head__eyebrow {
  font-size: .8125rem; letter-spacing: 1px; color: var(--facm-purple-700);
}
.vd-section-head h2 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem); line-height: 1.2;
}
.vd-section-head p {
  font-size: 1.125rem; font-weight: 400; line-height: 1.6;
  color: var(--facm-text-secondary); max-width: 600px;
}

/* -- Pasos "Como funciona" -- */
.vd-step__n { font-size: .9375rem; }
.vd-step__title { font-size: 1.125rem; line-height: 1.35; }
.vd-step__desc {
  font-size: 1rem; line-height: 1.6; color: var(--facm-text-secondary); max-width: 260px;
}

/* -- Tarjetas de documentos -- */
.vd-doc-card__title { font-size: 1.0625rem; line-height: 1.35; color: var(--facm-text-primary); }
.vd-doc-card__desc { font-size: 1rem; line-height: 1.55; color: var(--facm-text-secondary); }

/* -- Tarjetas de seguridad (texto claro sobre morado) -- */
.vd-sec-card__title { font-size: 1.125rem; line-height: 1.35; }
.vd-sec-card__desc { font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,.92); }
.vd-security .vd-section-head p { color: rgba(255,255,255,.9); }

/* -- Preguntas frecuentes -- */
.vd-faq-btn { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--facm-text-primary); }
.vd-faq-answer { font-size: 1.0625rem; line-height: 1.7; color: var(--facm-text-secondary); }

/* -- Botones (mismo alto; solo tipografia mas legible) -- */
.vd-btn--primary { font-size: 1.0625rem; font-weight: 700; letter-spacing: .005em; }
.vd-btn--outline { font-size: 1.0625rem; font-weight: 700; }
.vd-btn--ghost   { font-size: 1rem; font-weight: 700; }

/* -- Resultado en la landing (scopeado para no afectar el modal) -- */
.vd-validator .vd-result__title { font-size: 1.1875rem; line-height: 1.35; }
.vd-validator .vd-result__msg {
  font-size: 1.0625rem; line-height: 1.6; color: var(--facm-text-secondary);
}
.vd-validator .vd-rk { font-size: 1rem; font-weight: 500; color: var(--facm-text-secondary); }
.vd-validator .vd-rv { font-size: 1.0625rem; font-weight: 600; color: var(--facm-text-primary); }
.vd-validator .vd-rv--mono { font-size: 1rem; letter-spacing: 0; }

/* -- Avisos / badges de estado -- */
.vd-demo-badge { font-size: 1rem; }

/* En zoom alto / pantallas chicas, mantener respiracion del texto */
@media (max-width: 640px) {
  .vd-hero__subtitle { font-size: 1.25rem; }
  .vd-hero__desc { font-size: 1.0625rem; }
  .vd-section-head { margin-bottom: 40px; }
}

/* ================================================================
   REDISENO SECCION "COMO FUNCIONA" (extension natural del Hero)
   Solo diseno: no cambia la estructura React, el contenido ni la logica.
   Paleta institucional FACM intacta. Scopeado a .vd-how para no filtrar.
   ================================================================ */

/* Mas aire vertical + fondo muy suave (#FFFFFF -> #FAF7FD) que enlaza con el Hero */
.vd-how {
  padding: 104px 0 96px;
  background: linear-gradient(180deg, #ffffff 0%, #faf7fd 100%);
}

/* Jerarquia del titulo y subtitulo mas legible */
.vd-how .vd-section-head { margin-bottom: 60px; }
.vd-how .vd-section-head h2 {
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.375rem);
  line-height: 1.15; letter-spacing: -.02em; color: var(--facm-purple-900);
}
.vd-how .vd-section-head p {
  font-size: 1.1875rem; line-height: 1.65; font-weight: 400;
  color: var(--facm-text-secondary); max-width: 620px;
}

/* Linea horizontal muy sutil que conecta los tres pasos (visible en los gaps).
   Las tarjetas (opacas, z-index mayor) la ocultan salvo entre columnas. */
.vd-how .vd-steps { position: relative; }
.vd-how .vd-steps::before {
  content: ''; position: absolute; left: 9%; right: 9%; top: 85px; height: 2px;
  z-index: 0; opacity: .55;
  background: linear-gradient(90deg,
    transparent, var(--vd-purple-border) 18%, var(--vd-purple-border) 82%, transparent);
}
.vd-how .vd-step { position: relative; z-index: 1; }

/* Tarjetas: borde 20px, sombra premium igual al Hero, borde fino, hover suave */
.vd-how .vd-step {
  border-radius: var(--vd-r-xl);
  padding: 46px 30px 36px;
  box-shadow: var(--facm-shadow-card);
  border: 1px solid var(--facm-border-soft);
  transition: transform .25s var(--vd-ease),
              box-shadow .25s var(--vd-ease),
              border-color .25s var(--vd-ease);
}
.vd-how .vd-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(74, 23, 95, .16);
  border-color: var(--vd-purple-border);
}

/* Iconos mas grandes (42px) con fondo degradado lila muy suave, borde fino y sombra ligera */
.vd-how .vd-step__ico {
  width: 76px; height: 76px; border-radius: var(--vd-r-xl);
  margin: 0 auto 24px;
  background: linear-gradient(150deg, var(--facm-purple-100), var(--facm-purple-050));
  border: 1px solid rgba(122, 52, 148, .14);
  box-shadow: 0 8px 22px rgba(74, 23, 95, .10);
}
.vd-how .vd-step__ico svg { width: 42px; height: 42px; }

/* Numeros de paso mas elegantes */
.vd-how .vd-step__n {
  top: 20px; right: 20px; width: 34px; height: 34px;
  background: #fff; border: 1.5px solid var(--vd-purple-border);
  color: var(--facm-purple-700); font-size: .95rem; font-weight: 800;
  box-shadow: 0 2px 6px rgba(74, 23, 95, .08);
}

/* Titulos y parrafos: mejor alineacion y tamanos accesibles (titulo 19px / desc 17px, AA) */
.vd-how .vd-step__title {
  font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em;
  color: var(--facm-purple-900); margin: 0 0 12px;
}
.vd-how .vd-step__desc {
  font-size: 1.0625rem; line-height: 1.6; color: var(--facm-text-secondary);
  max-width: 260px; margin: 0 auto;
}

/* Etiqueta inferior "Tiempo estimado" con icono de reloj (elemento real, accesible) */
.vd-how__eta {
  display: flex; align-items: center; gap: 8px;
  width: fit-content; margin: 56px auto 0;
  padding: 10px 20px; border-radius: 99px;
  background: linear-gradient(135deg, var(--facm-purple-100), var(--facm-purple-050));
  border: 1px solid var(--vd-purple-border);
  color: var(--facm-purple-900); font-size: 1rem; font-weight: 600;
  letter-spacing: .01em; box-shadow: 0 4px 14px rgba(74, 23, 95, .08);
}
.vd-how__eta svg { flex-shrink: 0; color: var(--vd-purple); }

/* Responsive: en una columna se oculta la linea conectora y se ajusta el aire */
@media (max-width: 900px) {
  .vd-how .vd-steps::before { display: none; }
}
@media (max-width: 640px) {
  .vd-how { padding: 64px 0 56px; }
  .vd-how .vd-section-head { margin-bottom: 40px; }
  .vd-how__eta { margin-top: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   RESULTADO DE VERIFICACION — tarjeta institucional premium
   (solo capa visual; misma logica/estados/datos)
   Estructura: .vd-result > .vd-result__head + .vd-result__panel + .vd-result__actions
   Config visual por estado via clases: --ok / --expired / --revoked / --info / --warn
══════════════════════════════════════════════════════════════ */

/* Contenedor exterior (stack vertical, verde/estado suave) */
.vd-result {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 24px; max-width: 820px; margin: 0 auto 56px;
  border-radius: 24px; padding: 32px;
}
.vd-result--ok      { background: #F4FAF1; border: 1px solid #B9DDB0; box-shadow: 0 14px 34px rgba(41, 94, 47, .08); }
.vd-result--expired { background: #FEFBF2; border: 1px solid #EAD9A6; box-shadow: 0 14px 34px rgba(140, 110, 20, .07); }
.vd-result--revoked { background: #FDF5F4; border: 1px solid #EBC3BE; box-shadow: 0 14px 34px rgba(140, 45, 35, .07); }
.vd-result--info    { background: #F3F6FA; border: 1px solid #C5D3E4; box-shadow: 0 14px 34px rgba(30, 60, 110, .07); }
.vd-result--warn    { background: #FEFBF2; border: 1px solid #EAD9A6; box-shadow: 0 14px 34px rgba(140, 110, 20, .07); }

/* Cabecera horizontal: icono + textos */
.vd-result__head { display: flex; gap: 18px; align-items: flex-start; }
.vd-result__headtext { flex: 1; min-width: 0; }

.vd-result__ico {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vd-result--ok      .vd-result__ico { background: #CDE9C4; color: #245B2B; }
.vd-result--expired .vd-result__ico { background: #F4E6B8; color: #8A6212; }
.vd-result--revoked .vd-result__ico { background: #F3D2CD; color: #A3342A; }
.vd-result--info    .vd-result__ico { background: #D6E2F0; color: #2C4B75; }
.vd-result--warn    .vd-result__ico { background: #F4E6B8; color: #8A6212; }

/* Titulo (22-24px) + descripcion (17-18px) */
.vd-result__title,
.vd-validator .vd-result__title,
.vdm-result-wrap .vd-result__title {
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.5rem);
  font-weight: 700; line-height: 1.25; margin: 0 0 6px;
}
.vd-result--ok      .vd-result__title { color: #245B2B; }
.vd-result--expired .vd-result__title { color: #8A6212; }
.vd-result--revoked .vd-result__title { color: #A3342A; }
.vd-result--info    .vd-result__title { color: #2C4B75; }
.vd-result--warn    .vd-result__title { color: #8A6212; }

.vd-result__msg,
.vd-validator .vd-result__msg,
.vdm-result-wrap .vd-result__msg {
  font-size: 1.0625rem; line-height: 1.5; margin: 0; color: #4B554C; font-weight: 500;
}

/* Tarjeta interna blanca con los datos */
.vd-result__panel {
  background: rgba(255, 255, 255, .75);
  border-radius: 18px; padding: 24px;
}
.vd-result--ok      .vd-result__panel { border: 1px solid rgba(53, 98, 58, .10); }
.vd-result--expired .vd-result__panel { border: 1px solid rgba(120, 95, 20, .12); }
.vd-result--revoked .vd-result__panel { border: 1px solid rgba(140, 45, 35, .12); }
.vd-result--info    .vd-result__panel { border: 1px solid rgba(44, 75, 117, .12); }
.vd-result--warn    .vd-result__panel { border: 1px solid rgba(120, 95, 20, .12); }

/* Reticula de dos columnas: etiquetas / valores */
.vd-result__panel .vd-result__grid {
  display: grid; grid-template-columns: minmax(140px, 180px) 1fr;
  row-gap: 16px; column-gap: 24px; margin: 0; align-items: baseline;
}

/* Etiquetas */
.vd-result .vd-rk,
.vd-validator .vd-result .vd-rk,
.vdm-result-wrap .vd-result .vd-rk {
  font-size: 1rem; font-weight: 600; color: #625A67; line-height: 1.4;
}
/* Valores */
.vd-result .vd-rv,
.vd-validator .vd-result .vd-rv,
.vdm-result-wrap .vd-result .vd-rv {
  font-size: 1.0625rem; font-weight: 600; color: #2B2430; line-height: 1.5; word-break: break-word;
}
/* Codigo / hash destacados (cápsula monoespaciada) */
.vd-result .vd-rv--mono,
.vd-validator .vd-result .vd-rv--mono,
.vdm-result-wrap .vd-result .vd-rv--mono {
  display: inline-flex; align-items: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700; font-size: 1rem; letter-spacing: .3px;
  color: var(--vd-purple); background: #F7F2FA;
  padding: 6px 10px; border-radius: 8px; width: fit-content; max-width: 100%;
  word-break: break-all;
}

/* Estado de integridad — cápsula suave con check */
.vd-result__capsule {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: .9375rem; font-weight: 700; line-height: 1.2; width: fit-content;
}
.vd-result--ok      .vd-result__capsule { background: #EAF6E7; color: #245B2B; }
.vd-result--expired .vd-result__capsule { background: #FBF2D6; color: #8A6212; }
.vd-result--revoked .vd-result__capsule { background: #FBE3E0; color: #A3342A; }
.vd-result--info    .vd-result__capsule { background: #E4ECF6; color: #2C4B75; }
.vd-result--warn    .vd-result__capsule { background: #FBF2D6; color: #8A6212; }
.vd-result__capsule--muted { background: #EEF0EE !important; color: #625A67 !important; }

/* Accion */
.vd-result__actions { display: flex; }
.vd-btn--reverify {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 20px; border-radius: 14px;
  border: 1.5px solid var(--vd-purple-border); color: var(--vd-purple); background: #fff;
  font-size: 1.0625rem; font-weight: 700; width: auto; white-space: nowrap; cursor: pointer;
  transition: background .18s var(--vd-ease), border-color .18s var(--vd-ease), box-shadow .18s var(--vd-ease);
}
.vd-btn--reverify:hover { background: var(--vd-purple-pale); border-color: var(--vd-purple); box-shadow: 0 4px 14px rgba(123, 31, 162, .12); }
.vd-btn--reverify:focus-visible { outline: 2px solid var(--vd-purple); outline-offset: 2px; }

/* Responsive: móvil a una columna, botón ancho completo, sin scroll horizontal */
@media (max-width: 640px) {
  .vd-result { padding: 22px 18px; border-radius: 20px; gap: 20px; }
  .vd-result__head { gap: 14px; }
  .vd-result__ico { width: 44px; height: 44px; border-radius: 12px; }
  .vd-result__panel { padding: 18px; }
  .vd-result__panel .vd-result__grid { grid-template-columns: 1fr; row-gap: 4px; column-gap: 0; }
  .vd-result__panel .vd-result__grid .vd-rk { margin-top: 14px; }
  .vd-result__panel .vd-result__grid .vd-rk:first-child { margin-top: 0; }
  .vd-btn--reverify { width: 100%; }
}
.vdm-method--disabled,
.vdm-method--disabled:hover {
  cursor: not-allowed;
  opacity: .72;
  transform: none;
  box-shadow: none;
  background: var(--vd-gray-50);
}
.vdm-method--disabled small {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--facm-text-secondary);
}
.vdm-qr-instruction {
  margin: 0 0 18px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--facm-text-primary);
  text-align: center;
}