/*
 * Sistema de diseño del sitio público de Verodatas (marketing).
 * Portado VERBATIM del handoff de Claude Design (Verodatas.dc.html).
 *
 * Todo está scopeado bajo `.vd-site` para NO contaminar el panel/encuesta, que usan
 * Tailwind v4 + shadcn (variables oklch). Las reglas de elementos (body, h1, a, ::selection)
 * y `:root` del diseño original se reescriben como descendientes de `.vd-site`.
 * Los @keyframes quedan globales (nombres `vd*`, sin colisión).
 */

/* Inter AUTO-HOSPEDADo (hallazgo E2): sin Google Fonts (tercero render-blocking que además contradice
   el discurso de privacidad). Los WOFF2 (subconjunto latino) viven en web/public/fonts, same-origin. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/inter-latin-800-normal.woff2') format('woff2'); }

/* Header sticky con fondo blanco y glass difuso (escarchado): blur amplio + saturación. El prefijo
   -webkit- es imprescindible para Safari; el fondo blanco y sticky van inline en SiteLayout. */
.vd-site #vd-header {
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.vd-site {
  --ink: #111827;
  --ink2: #1f2937;
  --sec: #6b7280;
  --ter: #374151;
  --bg: #ffffff;
  --bg2: #f9fafb;
  --bg3: #f3f4f6;
  --line: #eceef1;
  --line2: #e5e7eb;
  --acc: #0e7490;
  --acc2: #0d9488;
  --grad: linear-gradient(90deg, #22d3ee, #34d399);
  --shadow: 0 20px 60px -15px rgba(17, 24, 39, .16);
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);

  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* clip (no hidden): recorta el desborde horizontal del globo igual, pero NO crea un contenedor de
     scroll — así el header con position:sticky sí se ancla al viewport (hidden lo rompía). */
  overflow-x: clip;
  line-height: 1.5;
  min-height: 100svh;
}

.vd-site * { box-sizing: border-box; }
.vd-site a { color: inherit; }
.vd-site ::selection { background: rgba(45, 212, 191, .28); }
.vd-site :is(h1, h2, h3, h4) { margin: 0; letter-spacing: -.022em; font-weight: 600; }

.vd-site .ic { display: inline-block; flex: none; width: 22px; height: 22px; vertical-align: middle; }
.vd-site .ic svg, .vd-site svg.ic { width: 100%; height: 100%; display: block; }
.vd-site .eyebrow { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--acc); }

/* Skip-link (accesibilidad): fuera de pantalla hasta recibir foco por teclado. */
.vd-site .vd-skip { position: absolute; left: -9999px; top: 0; z-index: 300; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 0 0 10px 0; font-size: 14px; font-weight: 600; text-decoration: none; }
.vd-site .vd-skip:focus { left: 0; }

@keyframes vdRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vdGrow { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes vdDraw { from { stroke-dashoffset: 314.16; } to { stroke-dashoffset: var(--to, 0); } }
@keyframes vdLine { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
@keyframes vdFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes vdFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes vdBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(26px, -18px) scale(1.07); } 66% { transform: translate(-18px, 16px) scale(.95); } }
@keyframes vdPulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

.vd-site .rise { animation: vdRise both; animation-timeline: view(); animation-range: entry 2% cover 24%; }
.vd-site .gbar { animation: vdGrow both; animation-timeline: view(); animation-range: entry 3% cover 32%; }
.vd-site .gauge-arc { stroke-dashoffset: var(--to, 0); animation: vdDraw both; animation-timeline: view(); animation-range: entry 0% cover 46%; }
.vd-site .gline { stroke-dashoffset: 0; animation: vdLine both; animation-timeline: view(); animation-range: entry 0% cover 42%; }

.vd-site .vd-dd { display: none; }
.vd-site .vd-nav-item:hover > .vd-dd { display: block; animation: vdRise .2s ease both; }
.vd-site .vd-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.vd-site .vd-burger { display: none; }
.vd-site .vd-mnav { display: none; }
.vd-site header[data-mobile="open"] .vd-mnav { display: block; }
.vd-site .nav-link { transition: color .15s ease; }
.vd-site .nav-link:hover { color: var(--ink) !important; }
.vd-site footer .nav-link:hover { color: #fff !important; }
.vd-site .hero-zone { transition: background .5s ease; }
.vd-site .hero-zone[data-night="on"] { background: radial-gradient(120% 130% at 75% -10%, #0c1424, #070b14 58%, #03050b) !important; --ink: #eef2f8; --sec: rgba(255, 255, 255, .72); --ter: #dfe5ee; --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .16); }
.vd-site .hero-zone[data-night="on"] .btn-primary { background: #fff !important; color: #0b1220 !important; }
.vd-site .hero-zone[data-night="on"] .btn-ghost { background: transparent !important; border-color: rgba(255, 255, 255, .28) !important; color: #fff !important; }
.vd-site .hero-zone[data-night="on"] .hero-badge { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .16) !important; color: rgba(255, 255, 255, .82) !important; }
.vd-site .hero-zone[data-night="on"] .vd-trustbar { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .1) !important; }
.vd-site .ht-seg { padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; transition: all .2s ease; color: var(--sec); }
.vd-site .hero-zone:not([data-night="on"]) .ht-dia { background: #111827; color: #fff; }
.vd-site .hero-zone[data-night="on"] .ht-noche { background: #fff; color: #0b1220; }
.vd-site .hero-zone[data-night="on"] .ht-dia { color: rgba(255, 255, 255, .6); }
.vd-site .hero-zone[data-night="on"] .hero-toggle { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .2) !important; }
.vd-site .dash-mock, .vd-site .dash-float { transition: background .5s ease, border-color .5s ease; }
.vd-site .hero-zone[data-night="on"] .dash-mock { background: rgba(14, 22, 38, .9) !important; }
.vd-site .hero-zone[data-night="on"] .dash-float { background: rgba(14, 22, 38, .94) !important; border-color: rgba(255, 255, 255, .14) !important; }
.vd-site .nav-on { color: var(--ink) !important; font-weight: 600 !important; }
.vd-site .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(17, 24, 39, .45) !important; }
.vd-site .btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4) !important; }
.vd-site .btn-ghost:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.vd-site .btn-ghost-d:hover { border-color: #fff !important; background: rgba(255, 255, 255, .08) !important; }
.vd-site .linkarrow { transition: gap .2s ease; }
.vd-site .linkarrow:hover { gap: 12px !important; }
.vd-site .card-h { transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease; }
.vd-site .card-h:hover { transform: translateY(-5px); box-shadow: var(--shadow) !important; border-color: var(--line2) !important; }
.vd-site .sublink { transition: background .15s ease; }
.vd-site .sublink:hover { background: var(--bg2); }
.vd-site .chip:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.vd-site .row-h { transition: background .15s ease; }
.vd-site .row-h:hover { background: var(--bg2); }
.vd-site .seg { padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--sec); cursor: pointer; border: none; background: transparent; transition: all .2s ease; }
.vd-site [data-bill="annual"] .seg-annual, .vd-site [data-bill="monthly"] .seg-monthly { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.vd-site [data-bill="monthly"] .save-badge { opacity: 0; }
.vd-site .audseg { flex: 1; padding: 16px; border-radius: 14px; border: 1px solid var(--line2); background: #fff; cursor: pointer; text-align: left; transition: all .2s ease; }
.vd-site [data-aud="empresa"] .aud-empresa, .vd-site [data-aud="gobierno"] .aud-gobierno { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.vd-site [data-aud="empresa"] .aud-empresa .audsub, .vd-site [data-aud="gobierno"] .aud-gobierno .audsub { color: rgba(255, 255, 255, .6) !important; }
.vd-site .fld { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line2); background: #fff; font-family: inherit; font-size: 14.5px; color: var(--ink); outline: none; transition: border-color .2s ease; }
.vd-site .fld:focus { border-color: var(--ink); }
.vd-site details.faq > summary { list-style: none; cursor: pointer; }
.vd-site details.faq > summary::-webkit-details-marker { display: none; }
.vd-site details.faq .fic { transition: transform .25s ease; }
.vd-site details.faq[open] .fic { transform: rotate(45deg); }

/* Blog: código en línea dentro del cuerpo del artículo. */
.vd-site .blog-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.vd-site .blog-body a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.vd-site .blog-body a:hover { text-decoration-color: var(--acc); }

@media (max-width: 980px) {
  .vd-site .vd-desktop-nav { display: none !important; }
  .vd-site .vd-burger { display: inline-flex !important; }
  .vd-site .grid-2 { grid-template-columns: 1fr !important; }
  .vd-site .hero-grid { grid-template-columns: 1fr !important; }
  .vd-site .foot-grid { grid-template-columns: 1fr 1fr !important; }
  .vd-site .hide-sm { display: none !important; }
}
@media (max-width: 600px) {
  .vd-site .h-disp { font-size: 38px !important; }
  .vd-site .sec-pad { padding: 60px 0 !important; }
}

/* === Ajustes responsive adicionales (más allá del media query base del diseño) === */
/* El CTA del header nunca debe partirse en dos líneas. */
.vd-site .vd-cta { white-space: nowrap; }
/* Rejillas fijas de 2 columnas marcadas como apilables: una sola columna en pantallas angostas. */
@media (max-width: 720px) {
  .vd-site .vd-2col { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  /* Header más compacto para que entren logo + CTA + menú sin apreturas. */
  .vd-site .vd-header-inner { padding-left: 16px !important; padding-right: 16px !important; gap: 10px !important; }
  .vd-site .vd-cta { padding: 9px 14px !important; font-size: 13.5px !important; gap: 5px !important; }
  .vd-site .vd-logo-text { font-size: 18px !important; }
  /* Menos aire vertical en el hero del home. */
  .vd-site .hero-grid { padding: 48px 0 !important; }
}
@media (max-width: 460px) {
  .vd-site .h-disp { font-size: 33px !important; }
}
/* Globo del hero: en escritorio va a la derecha (estilo del diseño); en móvil/tablet (≤980) pasa a
   fondo ambiental a todo el ancho, atenuado y desvanecido hacia abajo para no estorbar el titular.
   Sigue girando con los "pings". */
@media (max-width: 980px) {
  .vd-site .vd-hero-globe {
    width: 118% !important;
    height: 72% !important;
    top: 0 !important;
    left: -9% !important;
    right: auto !important;
    opacity: 0.4 !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 80%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 80%) !important;
    -webkit-mask-composite: source-over !important;
    mask-composite: add !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vd-site * { animation-duration: .001s !important; }
  .vd-site .rise, .vd-site .gbar, .vd-site .gauge-arc, .vd-site .gline { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: var(--to, 0) !important; }
}