/* ==========================================================================
VOCAP · sistema de diseño «Clara y de confianza» (dirección A)
--------------------------------------------------------------------------
Hoja compartida por todas las páginas públicas. Documentación y marcado de
ejemplo: DESIGN.md (scratchpad designA). Reglas de la casa:
· Todo lo propio lleva prefijo v- (clases y variables) para convivir con
las hojas antiguas durante la migración.
· Sin prefijo solo lo que genera o manipula static/js/landing.js y
static/js/home.js (user-button, user-dropdown, mobile-menu-item,
pricing-user-bar, sticky-cta-*, dropzone-status, dz-*, drop-veil,
#welcomeBanner, #vocapToast, ripple…). No renombrar esos ganchos.
· Fuentes: se cargan con en el (no @import; ver DESIGN.md).
· Carga: primero vocap.css, después la hoja propia de la página.
========================================================================== */
/* ---------- Métricas de respaldo: el texto no salta al llegar la fuente ---------- */
@font-face {
font-family: "Figtree Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica");
size-adjust: 99.45%;
ascent-override: 95.53%;
descent-override: 25.14%;
line-gap-override: 0%;
}
@font-face {
font-family: "Plus Jakarta Sans Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
font-weight: 600 800;
size-adjust: 99.6%;
ascent-override: 104.2%;
descent-override: 22.3%;
line-gap-override: 0%;
}
/* ---------- Tokens ---------- */
:root {
/* Neutros */
--v-ink: #0D1B2E; /* titulares y texto fuerte · 17,3:1 */
--v-text: #434D5E; /* texto de lectura · 8,6:1 */
--v-prose: #2A3445; /* cuerpo de artículos (algo más oscuro) */
--v-text-2: #394355; /* texto dentro de tarjetas pequeñas */
--v-muted: #6B7587; /* secundario sobre blanco · 4,65:1 */
--v-muted-soft: #5F6B7E; /* secundario sobre grises y tintes · ≥ 4,68:1 */
--v-line: #E5E9F0;
--v-line-2: #D5DCE6; /* bordes de controles */
--v-line-3: #BFC8D6; /* borde en hover */
--v-soft: #F5F7FA; /* fondo gris de sección / footer */
--v-soft-2: #EBEFF5; /* bandeja bajo tarjetas */
--v-slate-50: #EEF1F5;
--v-slate: #475467;
--v-white: #FFFFFF;
/* Azul VOCAP */
--v-brand: #1F5FEF; /* botones, iconos · blanco encima 5,3:1 */
--v-brand-600: #1A52D4; /* hover */
--v-brand-700: #1744B3; /* texto azul y enlaces · 8,4:1 */
--v-brand-100: #DCE6FE;
--v-brand-50: #EEF3FF;
--v-brand-25: #F7F9FF;
--v-brand-dash: #AFC4F8; /* borde discontinuo del dropzone */
/* Apoyo: SOLO iconos de tipo de resultado y estados.
Base = icono (≥ 3:1 sobre su tinte). -700 = texto sobre el tinte (≥ 4,5:1). */
--v-green: #0C8F63; --v-green-50: #E6F6EF; --v-green-700: #087453; --v-green-line: #C7EBDA;
--v-amber: #A76200; --v-amber-50: #FFF3DC; --v-amber-700: #8C5300; --v-amber-line: #F3DDAE;
--v-rose: #C93A55; --v-rose-50: #FDEDF0; --v-rose-700: #B42332; --v-rose-line: #F6CBD4;
--v-sky: #0A7FA5; --v-sky-50: #E3F4FA; --v-sky-700: #066A8C;
/* Tipografía */
--v-font-display: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--v-font-body: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--v-fs-xs: .8125rem; /* 13 · pies, metadatos */
--v-fs-sm: .875rem; /* 14 */
--v-fs-ui: .9375rem; /* 15 · navegación, botones pequeños */
--v-fs-base: 1.0625rem; /* 17 · cuerpo (16 en móvil) */
--v-fs-md: 1.1875rem; /* 19 · entradilla de sección */
--v-fs-lg: 1.25rem; /* 20 · entradilla de hero */
--v-fs-h4: 1.0625rem; /* 17 */
--v-fs-h3: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem); /* 18 → 21 */
--v-fs-h2: clamp(2rem, 1.55rem + 1.9vw, 2.75rem); /* 32 → 44 */
--v-fs-h1: clamp(2.5rem, 1.72rem + 3.4vw, 3.875rem); /* 40 → 62 */
--v-fs-h1-article: clamp(2rem, 1.45rem + 2.4vw, 3.25rem); /* 32 → 52 */
--v-lh-tight: 1.08;
--v-lh-head: 1.15;
--v-lh-body: 1.6;
--v-lh-prose: 1.75;
--v-track-display: -.026em;
--v-track-head: -.018em;
/* Espaciado (base 4) */
--v-sp-1: 4px; --v-sp-2: 8px; --v-sp-3: 12px; --v-sp-4: 16px; --v-sp-5: 20px;
--v-sp-6: 24px; --v-sp-8: 32px; --v-sp-10: 40px; --v-sp-12: 48px; --v-sp-14: 56px;
--v-sp-16: 64px; --v-sp-18: 72px; --v-sp-22: 88px; --v-sp-28: 112px;
--v-sec-y: clamp(72px, 4.4rem + 3.2vw, 112px); /* padding vertical de sección */
/* Radios */
--v-r-xs: 6px; /* chips cuadrados */
--v-r-sm: 8px;
--v-r-md: 10px; /* botón pequeño, iconos de 36-40 */
--v-r: 12px; /* botón, icono de 40-52 */
--v-r-card: 16px; /* tarjeta */
--v-r-lg: 18px; /* dropzone, tarjeta grande */
--v-r-xl: 20px;
--v-r-2xl: 28px; /* bandas de CTA */
--v-r-pill: 999px;
/* Sombras */
--v-sh-1: 0 1px 2px rgba(13, 27, 46, .05), 0 1px 3px rgba(13, 27, 46, .04);
--v-sh-2: 0 1px 2px rgba(13, 27, 46, .04), 0 10px 28px -10px rgba(13, 27, 46, .14);
--v-sh-3: 0 2px 6px rgba(13, 27, 46, .05), 0 40px 80px -24px rgba(19, 45, 110, .28);
--v-sh-pop: 0 16px 40px -12px rgba(13, 27, 46, .25);
--v-sh-brand: 0 1px 2px rgba(13, 27, 46, .04), 0 12px 32px -14px rgba(31, 95, 239, .28);
/* Maquetación */
--v-wrap: 1200px;
--v-gutter: 24px;
--v-nav-h: 72px;
/* Capas */
--v-z-sticky: 900;
--v-z-menu: 999;
--v-z-nav: 1000;
--v-z-dropdown: 1100;
--v-z-modal: 1500;
--v-z-veil: 1800;
--v-z-skip: 2000;
--v-focus: 2px solid var(--v-brand);
--v-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 640px) {
:root { --v-gutter: 20px; --v-nav-h: 64px; }
}
@media (max-width: 400px) {
:root { --v-gutter: 16px; }
}
/* ---------- Reset mínimo y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--v-nav-h) + 16px);
}
body {
margin: 0;
background: var(--v-white);
color: var(--v-text);
font-family: var(--v-font-body);
font-size: var(--v-fs-base);
font-weight: 400;
line-height: var(--v-lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
@media (max-width: 640px) { body { font-size: 1rem; } }
h1, h2, h3, h4, h5, h6 {
font-family: var(--v-font-display);
color: var(--v-ink);
font-weight: 700;
letter-spacing: var(--v-track-head);
text-wrap: balance;
}
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
img, svg, video { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--v-brand-700); text-underline-offset: 3px; }
::selection { background: var(--v-brand-100); color: var(--v-ink); }
:focus-visible { outline: var(--v-focus); outline-offset: 2px; }
/* Destinos de ancla que landing.js enfoca para el teclado: sin marco alrededor de la sección */
[tabindex="-1"]:focus { outline: none; }
.v-sr-only, .sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.v-nowrap { white-space: nowrap; }
.v-list-reset { list-style: none; margin: 0; padding: 0; }
.v-skip {
position: absolute; left: 16px; top: -120px; z-index: var(--v-z-skip);
background: var(--v-brand); color: #fff; padding: 10px 16px; border-radius: var(--v-r-md);
font-weight: 600; text-decoration: none;
}
.v-skip:focus { top: 12px; outline: 2px solid var(--v-ink); outline-offset: 2px; box-shadow: var(--v-sh-2); }
/* ---------- Maquetación ---------- */
.v-wrap {
width: 100%;
max-width: calc(var(--v-wrap) + 2 * var(--v-gutter));
margin-inline: auto;
padding-inline: var(--v-gutter);
}
.v-sec { padding-block: var(--v-sec-y); }
.v-sec-soft { background: var(--v-soft); }
/* Sobre gris, el secundario se oscurece para mantener 4,5:1 */
.v-sec-soft, .v-foot, .v-card-soft, .v-card-brand, .v-tray, .v-drop, .v-menu { --v-muted: var(--v-muted-soft); }
.v-eyebrow {
display: inline-block; margin: 0 0 12px;
font-family: var(--v-font-body); font-weight: 700; font-size: var(--v-fs-ui);
letter-spacing: 0; color: var(--v-brand-700);
}
.v-head { max-width: 680px; }
.v-head-center { margin-inline: auto; text-align: center; }
.v-head > p:not(.v-eyebrow), .v-head .v-sub { margin: 16px 0 0; font-size: var(--v-fs-md); line-height: 1.6; color: var(--v-text); }
.v-h1 { margin: 0; font-size: var(--v-fs-h1); line-height: 1.05; font-weight: 800; letter-spacing: -.028em; word-spacing: .03em; }
.v-h1-article { margin: 0; font-size: var(--v-fs-h1-article); line-height: 1.1; font-weight: 800; letter-spacing: var(--v-track-display); word-spacing: .03em; }
.v-h2 { margin: 0; font-size: var(--v-fs-h2); line-height: 1.12; font-weight: 800; letter-spacing: -.024em; word-spacing: .03em; }
.v-h3 { margin: 0; font-size: var(--v-fs-h3); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }
.v-h4 { margin: 0; font-size: var(--v-fs-h4); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.v-lead { margin: 0; font-size: var(--v-fs-lg); line-height: 1.58; color: var(--v-text); }
.v-small { font-size: var(--v-fs-sm); color: var(--v-muted); }
@media (max-width: 640px) {
.v-h1 { line-height: 1.06; letter-spacing: -.035em; }
.v-lead { font-size: 1.09375rem; line-height: 1.55; }
.v-head > p:not(.v-eyebrow), .v-head .v-sub { font-size: var(--v-fs-base); margin-top: 12px; }
.v-eyebrow { font-size: var(--v-fs-sm); margin-bottom: 8px; }
}
/* ---------- Iconos (máscara SVG: toman el color del texto) ----------
Tamaño: 20 px; cámbialo con --v-i-size o width/height. */
.v-i {
display: inline-block; flex: none;
width: var(--v-i-size, 20px); height: var(--v-i-size, 20px);
vertical-align: -.22em;
background-color: currentColor;
-webkit-mask: var(--v-i) center / contain no-repeat;
mask: var(--v-i) center / contain no-repeat;
}
@media (forced-colors: active) {
.v-i { forced-color-adjust: none; background-color: CanvasText; }
}
/* Bloque generado por build/icons.py desde los sprites de las maquetas A */
.v-i-alert{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.8 17.5A2 2 0 0 0 4.5 20.5h15a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01' stroke-width='2.4'/%3E%3C/svg%3E")}
.v-i-arrow,.v-link-arrow{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.v-i-arrow-r{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
.v-i-audio{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9.5 13v3M12 11v7M14.5 13v3'/%3E%3C/svg%3E")}
.v-i-bolt{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E")}
.v-i-book{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5'/%3E%3C/svg%3E")}
.v-i-bulb{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2v.2h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.v-i-cal,.v-kind-dates{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.v-i-cam{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6.5' width='12.5' height='11' rx='2.5'/%3E%3Cpath d='m15.5 10.5 5-3v9l-5-3'/%3E%3C/svg%3E")}
.v-i-cap{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5 12 5l9.5 4.5L12 14z'/%3E%3Cpath d='M6.5 11.8v4c1.4 1.4 3.3 2.2 5.5 2.2s4.1-.8 5.5-2.2v-4M21.5 9.5v5.5'/%3E%3C/svg%3E")}
.v-i-card{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E")}
.v-i-chat{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 21l1.4-4.5A8.5 8.5 0 1 1 20.5 12z'/%3E%3Cpath d='M9 11v2M12 9v6M15 11v2'/%3E%3C/svg%3E")}
.v-i-check,.v-checks li,.v-lang-menu a[aria-current]{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.v-i-chev{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.v-i-clock,.v-nav .user-button{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.v-i-consult{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4.5' width='14' height='16.5' rx='2.5'/%3E%3Cpath d='M9 4.5V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v.5M12 10v6M9 13h6'/%3E%3C/svg%3E")}
.v-i-copy{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11.5' height='11.5' rx='2.5'/%3E%3Cpath d='M15.5 8.5V6.5A2.5 2.5 0 0 0 13 4H6.5A2.5 2.5 0 0 0 4 6.5V13a2.5 2.5 0 0 0 2.5 2.5h2'/%3E%3C/svg%3E")}
.v-i-doc,.v-kind-transcript{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
.v-i-download{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M5 20h14'/%3E%3C/svg%3E")}
.v-i-flag,.v-kind-decisions{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21V4.5M5.5 4.5h11.5l-2.5 4 2.5 4H5.5'/%3E%3C/svg%3E")}
.v-i-gift{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11.5' rx='2'/%3E%3Cpath d='M3 9h18M12 9v11.5M12 9c-1.5-3.5-5.5-4.2-5.5-1.7C6.5 8.6 8.5 9 12 9zm0 0c1.5-3.5 5.5-4.2 5.5-1.7 0 1.3-2 1.7-5.5 1.7z'/%3E%3C/svg%3E")}
.v-i-globe{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.2 2.4 3.3 5.2 3.3 8.5s-1.1 6.1-3.3 8.5c-2.2-2.4-3.3-5.2-3.3-8.5S9.8 5.9 12 3.5z'/%3E%3C/svg%3E")}
.v-i-help,.v-kind-questions{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2-2.4 3.6'/%3E%3Cpath d='M12 17.2h.01' stroke-width='2.6'/%3E%3C/svg%3E")}
.v-i-infinity{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c-2-2.6-3.6-4-5.5-4a4 4 0 0 0 0 8c1.9 0 3.5-1.4 5.5-4zm0 0c2 2.6 3.6 4 5.5 4a4 4 0 0 0 0-8c-1.9 0-3.5 1.4-5.5 4z'/%3E%3C/svg%3E")}
.v-i-link{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.v-i-list,.v-kind-keypoints{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6H20M9.5 12H20M9.5 18H20'/%3E%3Cpath d='M4.5 6h.01M4.5 12h.01M4.5 18h.01' stroke-width='3'/%3E%3C/svg%3E")}
.v-i-logout{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5H17a2.5 2.5 0 0 1 2.5 2.5v10a2.5 2.5 0 0 1-2.5 2.5h-2.5M10 16.5 5.5 12 10 7.5M5.5 12H15'/%3E%3C/svg%3E")}
.v-i-mail{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")}
.v-i-menu{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.v-i-mic{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E")}
.v-i-phone{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 14.5c5-4.7 12-4.7 17 0l-2.2 2.3-3.3-1.4v-2.2a11 11 0 0 0-6 0v2.2l-3.3 1.4z'/%3E%3C/svg%3E")}
.v-i-play{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10.3 9.3v5.4l4.4-2.7z'/%3E%3C/svg%3E")}
.v-i-plus{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.v-i-quote,.v-kind-quotes{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7H7a2 2 0 0 0-2 2v2.5a2 2 0 0 0 2 2h2.5V14a3 3 0 0 1-3 3M19.5 7h-3a2 2 0 0 0-2 2v2.5a2 2 0 0 0 2 2H19V14a3 3 0 0 1-3 3'/%3E%3C/svg%3E")}
.v-i-scale{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M5 7h14M5 7l-2.5 6a3 3 0 0 0 5 0zM19 7l-2.5 6a3 3 0 0 0 5 0z'/%3E%3C/svg%3E")}
.v-i-scale2{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='7' height='16' rx='2'/%3E%3Crect x='13.5' y='4' width='7' height='16' rx='2'/%3E%3C/svg%3E")}
.v-i-shield{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.3-2.9 7.9-7 9.5-4.1-1.6-7-5.2-7-9.5V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E")}
.v-i-spark{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v4M12 16.5v4M3.5 12h4M16.5 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6'/%3E%3C/svg%3E")}
.v-i-summary,.v-kind-summary{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 10.5h16M4 15h11M4 19.5h7'/%3E%3C/svg%3E")}
.v-i-task,.v-kind-tasks{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3.5'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E")}
.v-i-upload{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5V4M7.5 8.5 12 4l4.5 4.5'/%3E%3Cpath d='M4.5 15v2.5A2.5 2.5 0 0 0 7 20h10a2.5 2.5 0 0 0 2.5-2.5V15'/%3E%3C/svg%3E")}
.v-i-user{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}
.v-i-users{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.3'/%3E%3Cpath d='M3 19.5a6 6 0 0 1 12 0'/%3E%3Cpath d='M15.5 5.4a3.3 3.3 0 0 1 0 6.2M17.5 14a6 6 0 0 1 3.5 5.5'/%3E%3C/svg%3E")}
.v-i-x{--v-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E")}
/* ---------- Logo ---------- */
.v-logo {
display: inline-flex; align-items: center; gap: 10px; flex: none;
font: 800 1.25rem/1 var(--v-font-display); letter-spacing: -.03em;
color: var(--v-ink); text-decoration: none;
}
.v-logo-mark {
width: 32px; height: 32px; flex: none; border-radius: 9px;
background: var(--v-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%231F5FEF'/%3E%3Cg stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 13.5v5M12.7 10v12M16.9 12.5v7M21.1 8.5v15M25.3 13.5v5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (forced-colors: active) { .v-logo-mark { forced-color-adjust: none; } }
/* ---------- Botones ----------
.v-btn + .v-btn-primary | .v-btn-secondary | .v-btn-ghost | .v-btn-inverse
Tamaños: .v-btn-xs (32, barras de herramientas) · .v-btn-sm (40) · base (48) · .v-btn-lg (56) · .v-btn-block */
.v-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 0 22px; margin: 0;
border: 1px solid transparent; border-radius: var(--v-r);
font: 600 1rem/1.15 var(--v-font-body); letter-spacing: 0;
text-align: center; text-decoration: none; white-space: nowrap;
cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}
.v-btn .v-i { --v-i-size: 18px; }
.v-btn:active { transform: translateY(1px); }
.v-btn[disabled], .v-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.v-btn-primary {
background: var(--v-brand); color: #fff;
box-shadow: 0 1px 2px rgba(13, 27, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.v-btn-primary:hover { background: var(--v-brand-600); color: #fff; }
.v-btn-secondary {
background: #fff; color: var(--v-ink); border-color: var(--v-line-2); box-shadow: var(--v-sh-1);
}
.v-btn-secondary:hover { border-color: var(--v-line-3); background: var(--v-brand-25); color: var(--v-ink); }
.v-btn-ghost { background: transparent; color: var(--v-brand-700); }
.v-btn-ghost:hover { background: var(--v-brand-50); color: var(--v-brand-700); }
/* Sobre fondo azul (bandas de CTA) */
.v-btn-inverse { background: #fff; color: var(--v-brand-700); box-shadow: 0 1px 2px rgba(13, 27, 46, .12); }
.v-btn-inverse:hover { background: #F2F6FF; color: var(--v-brand-700); }
.v-on-blue :focus-visible, .v-btn-inverse:focus-visible { outline-color: #fff; }
.v-btn-sm { min-height: 40px; padding: 0 16px; font-size: var(--v-fs-ui); border-radius: var(--v-r-md); }
.v-btn-xs { min-height: 32px; padding: 0 11px; gap: 6px; font-size: .8125rem; border-radius: var(--v-r-sm); }
.v-btn-xs .v-i { --v-i-size: 15px; }
.v-btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; border-radius: 14px; }
.v-btn-block { display: flex; width: 100%; }
/* Pantallas estrechas: un texto largo (FR/DE…) salta de línea en vez de desbordar */
@media (max-width: 400px) { .v-btn { white-space: normal; padding-block: 8px; } .v-nav-cta { white-space: nowrap; padding-block: 0; } }
/* landing.js añade a algunos botones: no se usa */
.ripple { display: none !important; }
/* ---------- Enlaces ---------- */
.v-link {
color: var(--v-brand-700); font-weight: 600;
text-decoration: underline; text-decoration-color: var(--v-brand-100);
text-decoration-thickness: 2px; text-underline-offset: 3px;
transition: text-decoration-color .15s ease;
}
.v-link:hover { text-decoration-color: var(--v-brand); }
.v-link-arrow {
display: inline-flex; align-items: center; gap: 6px;
color: var(--v-brand-700); font-weight: 600; text-decoration: none;
}
.v-link-arrow::after {
content: ""; width: 17px; height: 17px; flex: none; background-color: currentColor;
-webkit-mask: var(--v-i) center / contain no-repeat; mask: var(--v-i) center / contain no-repeat;
transition: transform .15s ease;
}
.v-link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.v-link-arrow:hover::after { transform: translateX(2px); }
/* ---------- Tonos (tinte + icono + texto) ----------
Se combinan con .v-ico, .v-chip, .v-badge: class="v-chip v-t-amber" */
.v-t-blue { --v-tone: var(--v-brand); --v-tone-bg: var(--v-brand-50); --v-tone-text: var(--v-brand-700); --v-tone-line: var(--v-brand-100); }
.v-t-green { --v-tone: var(--v-green); --v-tone-bg: var(--v-green-50); --v-tone-text: var(--v-green-700); --v-tone-line: var(--v-green-line); }
.v-t-amber { --v-tone: var(--v-amber); --v-tone-bg: var(--v-amber-50); --v-tone-text: var(--v-amber-700); --v-tone-line: var(--v-amber-line); }
.v-t-rose { --v-tone: var(--v-rose); --v-tone-bg: var(--v-rose-50); --v-tone-text: var(--v-rose-700); --v-tone-line: var(--v-rose-line); }
.v-t-sky { --v-tone: var(--v-sky); --v-tone-bg: var(--v-sky-50); --v-tone-text: var(--v-sky-700); --v-tone-line: #BFE4F1; }
.v-t-slate { --v-tone: var(--v-slate); --v-tone-bg: var(--v-slate-50); --v-tone-text: var(--v-slate); --v-tone-line: var(--v-line); }
/* ---------- Iconos de tipo de resultado ----------
Tamaños: .v-ico-sm 26 · base 30 · .v-ico-md 40 · .v-ico-lg 44 */
/* Tono por defecto con especificidad 0: así .v-t-* y .v-kind-* lo sustituyen
aunque estén declarados antes (class="v-ico v-t-green" sale en verde). */
:where(.v-ico) { --v-tone: var(--v-brand); --v-tone-bg: var(--v-brand-50); }
.v-ico {
display: inline-grid; place-items: center; flex: none;
width: 30px; height: 30px; border-radius: 9px;
background: var(--v-tone-bg); color: var(--v-tone);
}
.v-ico .v-i { --v-i-size: 17px; }
.v-ico-sm { width: 26px; height: 26px; border-radius: 8px; }
.v-ico-sm .v-i { --v-i-size: 15px; }
.v-ico-md { width: 40px; height: 40px; border-radius: 12px; }
.v-ico-md .v-i { --v-i-size: 20px; }
.v-ico-lg { width: 44px; height: 44px; border-radius: 12px; }
.v-ico-lg .v-i { --v-i-size: 22px; }
.v-ico-xl { width: 52px; height: 52px; border-radius: 14px; }
.v-ico-xl .v-i { --v-i-size: 24px; }
.v-ico-white { background: #fff; }
/* Tipos de resultado de VOCAP: tono fijo por tipo (el icono lo pone el bloque de iconos) */
.v-kind-transcript, .v-kind-quotes { --v-tone: var(--v-slate); --v-tone-bg: var(--v-slate-50); }
.v-kind-summary, .v-kind-keypoints { --v-tone: var(--v-brand); --v-tone-bg: var(--v-brand-50); }
.v-kind-decisions { --v-tone: var(--v-sky); --v-tone-bg: var(--v-sky-50); }
.v-kind-tasks { --v-tone: var(--v-green); --v-tone-bg: var(--v-green-50); }
.v-kind-dates { --v-tone: var(--v-amber); --v-tone-bg: var(--v-amber-50); }
.v-kind-questions { --v-tone: var(--v-rose); --v-tone-bg: var(--v-rose-50); }
/* ---------- Pastillas, chips, badges, etiquetas ---------- */
/* Pastilla destacada (hero, categoría de artículo) */
.v-pill {
display: inline-flex; align-items: center; gap: 8px;
min-height: 32px; padding: 4px 14px 4px 10px; border-radius: var(--v-r-pill);
background: var(--v-brand-50); color: var(--v-brand-700); border: 1px solid var(--v-brand-100);
font: 600 .90625rem/1.2 var(--v-font-body); text-decoration: none;
}
.v-pill .v-i { --v-i-size: 16px; }
@media (max-width: 640px) { .v-pill { min-height: 30px; font-size: .84375rem; } }
/* Chip: neutro por defecto; con .v-t-* se tiñe (sin borde) */
.v-chip {
display: inline-flex; align-items: center; gap: 4px;
min-height: 24px; padding: 2px 10px; border-radius: var(--v-r-pill);
background: var(--v-soft); color: var(--v-slate); border: 1px solid var(--v-line);
font: 600 .78125rem/1.3 var(--v-font-body); white-space: nowrap;
}
.v-chip[class*="v-t-"] { background: var(--v-tone-bg); color: var(--v-tone-text); border-color: transparent; }
.v-chip .v-i { --v-i-size: 13px; }
.v-chip-sq { border-radius: var(--v-r-xs); padding: 1px 8px; min-height: 22px; font-size: .75rem; }
/* Badge de estado: «Transcripción completada» */
.v-badge {
--v-tone-bg: var(--v-green-50); --v-tone-text: var(--v-green-700);
display: inline-flex; align-items: center; gap: 6px;
min-height: 28px; padding: 3px 11px 3px 8px; border-radius: var(--v-r-pill);
background: var(--v-tone-bg); color: var(--v-tone-text);
font: 600 .8125rem/1.2 var(--v-font-body); white-space: nowrap;
}
.v-badge .v-i { --v-i-size: 16px; }
/* Etiqueta sólida: «Mejor precio por hora» */
.v-tag {
display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px;
border-radius: var(--v-r-pill); background: var(--v-brand); color: #fff;
font: 700 .78125rem/1.2 var(--v-font-body); white-space: nowrap;
}
/* Lista de comprobaciones: «Pago único, sin suscripción» */
.v-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: var(--v-fs-ui); color: var(--v-text); }
.v-checks li { display: inline-flex; align-items: flex-start; gap: 8px; }
.v-checks li::before {
content: ""; width: 18px; height: 18px; flex: none; margin-top: .12em;
background-color: var(--v-green);
-webkit-mask: var(--v-i) center / contain no-repeat; mask: var(--v-i) center / contain no-repeat;
}
.v-checks-col { flex-direction: column; }
/* ---------- Tarjetas ---------- */
.v-card {
background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-card);
padding: 24px 26px; box-shadow: var(--v-sh-1);
}
.v-card-sm { border-radius: 14px; padding: 14px 16px; }
.v-card-lg { border-radius: var(--v-r-xl); padding: 28px 30px; }
.v-card-hover { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.v-card-hover:hover { box-shadow: var(--v-sh-2); transform: translateY(-2px); }
.v-card-soft { background: var(--v-soft); box-shadow: none; }
.v-card-brand { background: var(--v-brand-25); border-color: var(--v-brand-100); box-shadow: none; }
.v-card-pop { box-shadow: var(--v-sh-3); border-radius: var(--v-r-lg); }
/* Enlace que ocupa toda la tarjeta */
a.v-card { display: block; color: inherit; text-decoration: none; }
a.v-card:hover .v-card-title { color: var(--v-brand-700); }
/* Bandeja gris bajo un grupo de tarjetas (maqueta de resultado) */
.v-tray { background: var(--v-soft-2); border: 1px solid var(--v-line); border-radius: var(--v-r-xl); padding: 14px; }
.v-card-head {
display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
font: 700 .9375rem/1.25 var(--v-font-display); color: var(--v-ink); letter-spacing: -.005em;
}
.v-card-count {
margin-left: auto; padding: 4px 8px; border-radius: var(--v-r-pill);
background: var(--v-soft); color: var(--v-muted-soft); font: 600 .75rem/1 var(--v-font-body);
}
.v-card-title { margin: 0; font: 700 var(--v-fs-h3)/1.3 var(--v-font-display); color: var(--v-ink); letter-spacing: -.015em; transition: color .15s ease; }
:where(.v-card) p { margin: 0; }
.v-card-title + p, .v-card .v-ico + .v-card-title { margin-top: 8px; }
.v-card .v-ico-lg + .v-card-title, .v-card .v-ico-md + .v-card-title { margin-top: 18px; }
/* ---------- Dropzone reutilizable ----------
Funciona con static/js/home.js: el contenedor lleva data-dropzone y
data-source; dentro, un input[type=file], un