/* ========================================================================== VeriGest · Sistema de diseño (css/verigest-ds.css) -------------------------------------------------------------------------- Documentación: design-system/verigest/MASTER.md Reglas: todo color pasa por variables; solo se animan transform, opacity, filter (con moderación) y clip-path; los estados ocultos de los efectos solo existen bajo html.fx (lo pone el arranque en ), así que sin JS o con "reducir movimiento" el contenido se ve desde el inicio. Índice 1. Fuentes 8. Tarjetas y bento 15. Formularios 2. Variables 9. Cabecera y menú 16. Maquetas del panel 3. Base 10. Desplegables 17. Lightbox 4. Tipografía 11. Pie 18. Efectos 5. Maquetación 12. Ventanas legales 19. Reducir movimiento 6. Iconos 13. Banner de cookies 20. Utilidades 7. Botones y chips 14. Interruptor 21. Patrones de página ========================================================================== */ /* 1. FUENTES ============================================================== */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700 800;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')} /* Titulares: Plus Jakarta Sans (variable 500–800, OFL; ver fonts/LICENSE-plus-jakarta-sans.txt) */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/plus-jakarta-sans.woff2') format('woff2')} /* Reservas con las métricas de Inter y Plus Jakarta Sans (medidas en Chrome): mientras llega la fuente, el texto ocupa casi lo mismo y el cambio no empuja el contenido (CLS) */ @font-face{font-family:'Inter Reserva';font-weight:400 500;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo');size-adjust:107%;ascent-override:90.6%;descent-override:22.4%;line-gap-override:0%} @font-face{font-family:'Inter Reserva';font-weight:600 800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arimo Bold');size-adjust:103.5%;ascent-override:93.7%;descent-override:23.2%;line-gap-override:0%} @font-face{font-family:'Jakarta Reserva';font-weight:500 800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arimo Bold');size-adjust:101%;ascent-override:103%;descent-override:21.8%;line-gap-override:0%} /* 2. VARIABLES ============================================================ */ :root{ /* — Paleta corporativa (intocable) — */ --primary:#004494; --primary-dark:#003371; --accent:#0066cc; --success:#10b981; --warning:#f59e0b; --ink-950:#0d1b2a; --navy-900:#0f2547; --ink-800:#1e293b; --ink-600:#475569; --surface-50:#f8fafc; --line-200:#dce4f0; --white:#fff; /* Excepción aprobada a la paleta: color de marca de WhatsApp en su botón flotante */ --brand-whatsapp:#25D366; /* Tripletes RGB de la misma paleta, para transparencias */ --rgb-primary:0 68 148; --rgb-primary-dark:0 51 113; --rgb-accent:0 102 204; --rgb-success:16 185 129; --rgb-warning:245 158 11; --rgb-ink:13 27 42; --rgb-navy:15 37 71; --rgb-line:220 228 240; --rgb-white:255 255 255; /* — Tonos derivados (mezclas de la paleta con blanco) — */ --primary-50:color-mix(in srgb,var(--primary) 4%,var(--white)); --primary-100:color-mix(in srgb,var(--primary) 8%,var(--white)); --primary-200:color-mix(in srgb,var(--primary) 16%,var(--white)); --primary-300:color-mix(in srgb,var(--primary) 28%,var(--white)); --accent-100:color-mix(in srgb,var(--accent) 10%,var(--white)); --accent-300:color-mix(in srgb,var(--accent) 45%,var(--white)); /* realce sobre fondo oscuro */ --success-100:color-mix(in srgb,var(--success) 14%,var(--white)); --warning-100:color-mix(in srgb,var(--warning) 16%,var(--white)); /* — Roles semánticos — */ --bg:var(--white); --bg-subtle:var(--surface-50); --bg-tint:var(--primary-50); --text:var(--ink-950); --text-strong:var(--navy-900); --text-body:var(--ink-800); --text-muted:var(--ink-600); --link:var(--primary); --border:var(--line-200); --border-strong:var(--primary-300); --border-control:color-mix(in srgb,var(--ink-600) 70%,var(--white)); /* 3,6:1 sobre blanco: bordes de campos y controles (WCAG 1.4.11) */ --on-dark:var(--white); --on-dark-muted:rgb(var(--rgb-white) / .78); --on-dark-subtle:rgb(var(--rgb-white) / .66); --on-dark-line:rgb(var(--rgb-white) / .16); --focus:var(--accent); /* — Degradados (solo entre colores de la paleta) — */ --grad-brand:linear-gradient(135deg,var(--accent) 0%,var(--primary) 100%); --grad-brand-hover:linear-gradient(135deg,var(--accent) 0%,var(--primary-dark) 100%); --grad-deep:linear-gradient(160deg,var(--primary-dark) 0%,var(--navy-900) 55%,var(--ink-950) 100%); --grad-sky:linear-gradient(180deg,var(--primary-50) 0%,var(--white) 100%); --grad-text:linear-gradient(100deg,var(--primary) 0%,var(--accent) 100%); /* — Tipografía — */ --font-sans:'Inter','Inter Reserva',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-display:'Plus Jakarta Sans','Jakarta Reserva','Inter','Inter Reserva',system-ui,sans-serif; --fs-2xs:.6875rem; /* 11px */ --fs-xs:.75rem; /* 12px */ --fs-sm:.875rem; /* 14px */ --fs-base:1rem; /* 16px */ --fs-md:1.0625rem; /* 17px */ --fs-lg:clamp(1.0625rem,1rem + .3vw,1.25rem); /* 17 → 20 */ --fs-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem); /* 20 → 24 */ --fs-2xl:clamp(1.5rem,1.2rem + 1.2vw,2.125rem); /* 24 → 34 */ --fs-3xl:clamp(1.875rem,1.4rem + 2vw,2.875rem); /* 30 → 46 */ --fs-display:clamp(2.25rem,1.5rem + 3.4vw,4.25rem); /* 36 → 68 */ /* Portadas: el mismo formato en todas las páginas (ver 21.0) */ --fs-hero:clamp(2rem,1.3rem + 2.2vw,3rem); /* 32 → 48 */ --fs-hero-lead:clamp(1.0625rem,1rem + .25vw,1.1875rem); /* 17 → 19 */ --lh-hero:1.1; --tracking-hero:-.02em; --hero-pad-top:clamp(var(--space-12),6vw,88px); /* aire sobre el contenido de la portada */ --hero-pad-bottom:clamp(var(--space-16),7vw,96px); /* aire bajo el contenido de la portada */ --lh-tight:1.12; --lh-snug:1.3; --lh-body:1.6; --tracking-display:-.028em; --tracking-heading:-.018em; --tracking-eyebrow:.08em; /* — Espaciado (escala 4/8) — */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; --section-y:clamp(var(--space-16),8vw,var(--space-32)); --gutter:clamp(var(--space-4),4vw,var(--space-8)); --container:1200px; --container-wide:1320px; --container-narrow:760px; /* — Radios — */ --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px; /* — Sombras en capas (tono de la paleta, nunca negro puro) — */ --shadow-xs:0 1px 2px rgb(var(--rgb-ink) / .06); --shadow-sm:0 1px 2px rgb(var(--rgb-ink) / .05),0 2px 6px -1px rgb(var(--rgb-primary) / .07); --shadow-md:0 1px 1px rgb(var(--rgb-ink) / .04),0 4px 10px -2px rgb(var(--rgb-primary) / .08),0 14px 28px -10px rgb(var(--rgb-primary) / .14); --shadow-lg:0 1px 1px rgb(var(--rgb-ink) / .04),0 8px 16px -4px rgb(var(--rgb-primary) / .08),0 28px 56px -16px rgb(var(--rgb-primary) / .22); --shadow-xl:0 2px 4px rgb(var(--rgb-ink) / .04),0 18px 36px -8px rgb(var(--rgb-navy) / .16),0 48px 96px -24px rgb(var(--rgb-navy) / .32); --shadow-brand:0 1px 2px rgb(var(--rgb-ink) / .18),0 8px 20px -6px rgb(var(--rgb-primary) / .55); --shadow-brand-hover:0 1px 2px rgb(var(--rgb-ink) / .18),0 14px 30px -8px rgb(var(--rgb-accent) / .6); --ring-highlight:inset 0 1px 0 rgb(var(--rgb-white) / .7); --ring-highlight-dark:inset 0 1px 0 rgb(var(--rgb-white) / .12); /* — Movimiento — */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:600ms; --dur-5:900ms; --stagger:70ms; /* — Capas — */ --z-header:200; --z-dropdown:300; --z-modal:9999; --z-cookie:99999; --header-h:72px; /* — Alias de las variables que usaban las páginas originales — (--text-dark/--bg-light se definían en cada página; --primary-hover, --dark, --light-bg y --muted se usaban sin definir: fallo previo que así queda resuelto) */ --text-dark:var(--ink-800); --bg-light:var(--surface-50); --light-bg:var(--surface-50); --dark:var(--ink-950); --muted:var(--ink-600); --primary-hover:var(--accent); color-scheme:light; } /* 3. BASE ================================================================= */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--space-4))} body{ font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-body); color:var(--text-body);background:var(--bg); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;overflow-x:clip; } img,picture,svg,video,canvas{display:block;max-width:100%} img{height:auto} input,button,textarea,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0} a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px} ::selection{background:var(--primary-200);color:var(--text-strong)} /* Foco visible en todo lo interactivo */ :focus{outline:none} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-xs)} .section--dark :focus-visible,.vg-footer :focus-visible,.on-dark :focus-visible{outline-color:var(--white)} /* 4. TIPOGRAFÍA =========================================================== */ /* Sin color: los encabezados heredan (así funcionan en los bloques oscuros de las páginas migradas). Dentro de los componentes del sistema toman --text-strong (ver abajo). */ h1,h2,h3,h4,h5,h6{ font-family:var(--font-display);font-weight:700; line-height:var(--lh-tight);letter-spacing:var(--tracking-heading);text-wrap:balance; } :where(.section,.vg-hero,.card,.mock,.stat-card,.vg-modal-box,.callout,.home,.trust-bar) :is(h1,h2,h3,h4,h5,h6){color:var(--text-strong)} h1{font-size:var(--fs-3xl);letter-spacing:var(--tracking-display)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-xl);line-height:var(--lh-snug)} h4{font-size:var(--fs-lg);line-height:var(--lh-snug)} p{text-wrap:pretty} strong,b{font-weight:700} /* hereda el color: así funciona igual sobre fondos claros y oscuros */ .display{font-size:var(--fs-display);letter-spacing:var(--tracking-display);line-height:1.04} .title-xl{font-size:var(--fs-3xl);letter-spacing:var(--tracking-display)} .title-lg{font-size:var(--fs-2xl)} .title-md{font-size:var(--fs-xl)} .vg-lead{font-size:var(--fs-lg);line-height:1.6;color:var(--text-muted)} .text-muted{color:var(--text-muted)} .text-gradient{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .vg-eyebrow{ display:inline-flex;align-items:center;gap:var(--space-2); font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:700; letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--primary); } .tabular{font-variant-numeric:tabular-nums} /* 5. MAQUETACIÓN ========================================================== */ .vg-container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)} .vg-container--wide{max-width:calc(var(--container-wide) + 2 * var(--gutter))} .vg-container--narrow{max-width:calc(var(--container-narrow) + 2 * var(--gutter))} .section{position:relative;padding-block:var(--section-y)} .section--tight{padding-block:clamp(var(--space-12),5vw,var(--space-20))} .section--tint{background:var(--bg-subtle)} .section--sky{background:var(--grad-sky)} .section--dark{background:var(--grad-deep);color:var(--on-dark-muted);isolation:isolate;overflow:hidden} .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,.section--dark strong{color:var(--on-dark)} /* Superficies claras dentro de un bloque oscuro recuperan los colores de texto normales */ .section--dark :is(.card:not(.card--dark),.mock,.stat-card,.callout){color:var(--text-body)} .section--dark :is(.card:not(.card--dark),.mock,.stat-card,.callout) :is(h1,h2,h3,h4,strong){color:var(--text-strong)} .section--line{border-top:1px solid var(--border)} .section-head{max-width:720px;margin:0 auto var(--space-12);text-align:center} .section-head > * + *{margin-top:var(--space-4)} .section-head--left{margin-inline:0;text-align:left} .stack{display:flex;flex-direction:column;gap:var(--stack-gap,var(--space-4))} .cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster-gap,var(--space-3))} .cluster--center{justify-content:center} .grid{display:grid;gap:var(--grid-gap,var(--space-6))} .grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))} .grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .split{display:grid;gap:clamp(var(--space-10),6vw,var(--space-20));align-items:center} @media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split--reverse > :first-child{order:2}} /* 6. ICONOS =============================================================== */ .icon{ width:var(--icon-size,1.25em);height:var(--icon-size,1.25em);flex-shrink:0;display:inline-block; fill:none;stroke:currentColor;stroke-width:var(--icon-stroke,1.75); stroke-linecap:round;stroke-linejoin:round;vertical-align:middle; } .icon--sm{--icon-size:16px} .icon--md{--icon-size:20px} .icon--lg{--icon-size:24px} .icon-badge{ --badge-size:44px; display:inline-grid;place-items:center;flex-shrink:0; width:var(--badge-size);height:var(--badge-size);border-radius:var(--radius-md); color:var(--primary); background:linear-gradient(180deg,var(--white),var(--primary-100)); box-shadow:var(--ring-highlight),0 0 0 1px var(--primary-200),var(--shadow-xs); } .icon-badge .icon{--icon-size:calc(var(--badge-size) * .48)} .icon-badge--sm{--badge-size:32px;border-radius:var(--radius-sm)} .icon-badge--lg{--badge-size:56px;border-radius:var(--radius-lg)} .icon-badge--brand{color:var(--white);background:var(--grad-brand);box-shadow:var(--ring-highlight-dark),var(--shadow-brand)} .icon-badge--success{color:var(--navy-900);background:var(--success-100);box-shadow:0 0 0 1px rgb(var(--rgb-success) / .35)} .icon-badge--success .icon{color:var(--success)} .icon-badge--on-dark{color:var(--white);background:rgb(var(--rgb-white) / .08);box-shadow:inset 0 0 0 1px var(--on-dark-line)} /* 7. BOTONES Y CHIPS ====================================================== */ .vg-btn{ --btn-h:48px;--lift:0px;--mag-x:0px;--mag-y:0px; position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); min-height:var(--btn-h);padding:0 var(--space-6); border-radius:var(--radius-md);border:1px solid transparent; font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:700;letter-spacing:.005em;line-height:1.2; text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none; transform:translate3d(var(--mag-x),calc(var(--mag-y) + var(--lift)),0); transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2),border-color var(--dur-2),color var(--dur-2); } .vg-btn:hover{--lift:-1px} .vg-btn:active{--lift:0px;transition-duration:var(--dur-1)} .vg-btn .icon{--icon-size:18px;transition:transform var(--dur-2) var(--ease-out)} .vg-btn:hover .icon--arrow{transform:translateX(3px)} .vg-btn--primary{color:var(--white);background:var(--grad-brand);box-shadow:var(--ring-highlight-dark),var(--shadow-brand)} .vg-btn--primary:hover{background:var(--grad-brand-hover);box-shadow:var(--ring-highlight-dark),var(--shadow-brand-hover);color:var(--white)} .vg-btn--secondary{color:var(--primary);background:var(--white);border-color:var(--border);box-shadow:var(--shadow-xs)} .vg-btn--secondary:hover{border-color:var(--border-strong);background:var(--primary-50);box-shadow:var(--shadow-sm)} .vg-btn--ghost{color:var(--primary);background:transparent} .vg-btn--ghost:hover{background:var(--primary-100)} .vg-btn--light{color:var(--primary-dark);background:var(--white);box-shadow:var(--ring-highlight),0 10px 30px -10px rgb(var(--rgb-ink) / .6)} .vg-btn--light:hover{background:var(--primary-50)} .vg-btn--outline-light{color:var(--white);background:rgb(var(--rgb-white) / .06);border-color:rgb(var(--rgb-white) / .32)} .vg-btn--outline-light:hover{background:rgb(var(--rgb-white) / .12);border-color:rgb(var(--rgb-white) / .55)} .vg-btn--sm{--btn-h:44px;padding:0 var(--space-4)} .vg-btn--lg{--btn-h:56px;padding:0 var(--space-8);font-size:var(--fs-base);border-radius:var(--radius-lg)} .vg-btn--block{display:flex;width:100%} /* Pantallas estrechas: un texto largo parte línea en vez de salirse */ @media (max-width:480px){.vg-btn{white-space:normal;text-align:center;max-width:100%;padding-block:var(--space-2)}} /* Brillo que recorre el botón */ .vg-btn--shine::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(110deg,transparent 30%,rgb(var(--rgb-white) / .32) 50%,transparent 70%); transform:translateX(-120%);transition:transform var(--dur-5) var(--ease-out); } .vg-btn--shine:hover::after{transform:translateX(120%)} /* Enlace con flecha */ .link-arrow{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:700;font-size:var(--fs-sm);color:var(--primary);text-decoration:none} .link-arrow:hover{text-decoration:underline} /* Chips */ .vg-chip{ display:inline-flex;align-items:center;gap:var(--space-2); min-height:32px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill); font-size:var(--fs-xs);font-weight:600;line-height:1.3;color:var(--primary-dark); background:var(--white);box-shadow:inset 0 0 0 1px var(--primary-200),var(--shadow-xs); } .vg-chip .icon{--icon-size:15px;color:var(--primary)} .vg-chip--tint{background:var(--primary-100);box-shadow:inset 0 0 0 1px var(--primary-200)} .vg-chip--success{color:var(--navy-900);background:var(--success-100);box-shadow:inset 0 0 0 1px rgb(var(--rgb-success) / .35)} .vg-chip--success .icon{color:var(--success)} .vg-chip--warning{color:var(--navy-900);background:var(--warning-100);box-shadow:inset 0 0 0 1px rgb(var(--rgb-warning) / .45)} .vg-chip--warning .icon{color:var(--warning)} .vg-chip--on-dark{color:var(--white);background:rgb(var(--rgb-white) / .1);box-shadow:inset 0 0 0 1px rgb(var(--rgb-white) / .28)} .vg-chip--on-dark .icon{color:var(--white)} .vg-chip--lg{min-height:36px;padding:var(--space-2) var(--space-4);font-size:var(--fs-sm)} .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0} .dot--success{background:var(--success)} .dot--warning{background:var(--warning)} .dot--primary{background:var(--primary)} /* 8. TARJETAS Y BENTO ===================================================== */ .card{ --lift:0px;--rx:0deg;--ry:0deg; position:relative;isolation:isolate; background:var(--white);border-radius:var(--radius-lg); padding:var(--card-pad,clamp(var(--space-5),2.4vw,var(--space-8))); box-shadow:0 0 0 1px var(--border),var(--shadow-sm); transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),0); transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out); } .card--interactive{color:inherit;text-decoration:none;cursor:pointer} .card--interactive:hover{--lift:-4px;box-shadow:0 0 0 1px var(--border-strong),var(--shadow-lg)} .card--tint{background:linear-gradient(180deg,var(--white),var(--primary-50))} .card--featured{background:linear-gradient(160deg,var(--white) 0%,var(--primary-100) 100%);box-shadow:0 0 0 1.5px var(--primary),var(--shadow-lg)} .card--dark{background:linear-gradient(160deg,rgb(var(--rgb-white) / .08),rgb(var(--rgb-white) / .02));box-shadow:inset 0 0 0 1px var(--on-dark-line);color:var(--on-dark-muted)} .card--flat{box-shadow:0 0 0 1px var(--border)} .card h3{font-size:var(--fs-lg)} .card > * + *{margin-top:var(--space-3)} .card__foot{margin-top:auto;padding-top:var(--space-4)} .card--col{display:flex;flex-direction:column} /* Borde con brillo que sigue al cursor (.card--glow) */ .card--glow::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:1;pointer-events:none; background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgb(var(--rgb-accent) / .85),rgb(var(--rgb-accent) / 0) 62%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity var(--dur-3); } .card--glow::after{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgb(var(--rgb-accent) / .07),transparent 60%); opacity:0;transition:opacity var(--dur-3); } .card--glow:hover::before,.card--glow:hover::after,.card--glow:focus-within::before{opacity:1} /* [data-glow]: el mismo borde con brillo para tarjetas propias de cada página (solo ::before, porque varias ya usan ::after) */ [data-glow]{position:relative} [data-glow]::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:1;pointer-events:none; background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgb(var(--rgb-accent) / .8),rgb(var(--rgb-accent) / 0) 62%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity var(--dur-3); } [data-glow]:hover::before{opacity:1} /* Inclinación para tarjetas propias: compone el giro con su transform de hover */ [data-tilt]:not(.card){transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3)} [data-tilt]:not(.card):hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-4px,0)} /* Bento: rejilla de 6 columnas; los hijos eligen su ancho */ .vg-bento{display:grid;gap:var(--space-4);grid-template-columns:repeat(6,minmax(0,1fr))} .vg-bento > *{grid-column:span 6} @media (min-width:700px){.vg-bento > *{grid-column:span 3}.vg-bento > .vg-bento-full{grid-column:span 6}} @media (min-width:1024px){ .vg-bento > .vg-bento-2{grid-column:span 2} .vg-bento > .vg-bento-3{grid-column:span 3} .vg-bento > .vg-bento-4{grid-column:span 4} .vg-bento > .vg-bento-tall{grid-row:span 2} } /* 9. CABECERA Y MENÚ ====================================================== */ /* Se aplica añadiendo class="vg-header" al
de cada página. Conserva todas las clases que usa el JS (navbar, nav-links, nav-link, nav-toggle, nav-dropdown*, nav-subdropdown*). */ .vg-header{position:sticky;top:0;z-index:var(--z-header);isolation:isolate} .vg-header::before{ content:"";position:absolute;inset:0;z-index:-1; background:rgb(var(--rgb-white) / .82); -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px); box-shadow:0 1px 0 rgb(var(--rgb-line) / .9); transition:background-color var(--dur-3); } .vg-header::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; box-shadow:0 10px 30px -12px rgb(var(--rgb-navy) / .22); opacity:0;transition:opacity var(--dur-3) var(--ease-out); } .vg-header.is-scrolled::before{background:rgb(var(--rgb-white) / .72)} .vg-header.is-scrolled::after{opacity:1} .vg-header .navbar{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4); min-height:var(--header-h);padding:0 clamp(var(--space-4),3vw,var(--space-12)); max-width:1600px;margin-inline:auto; } .vg-header .navbar > div:last-child,.vg-header .nav-actions{justify-self:end;display:flex;gap:var(--space-2);align-items:center;flex-wrap:nowrap} .vg-header button.nav-btn-outline{font-family:var(--font-sans);cursor:pointer} /* Escritorio estrecho: los iconos del primer nivel (decorativos) se ocultan para que todo quepa en una fila */ @media (min-width:1281px) and (max-width:1599px){ .vg-header .navbar{gap:var(--space-3);padding:0 var(--space-6)} .vg-header .nav-links > .nav-link .nav-icon, .vg-header .nav-links > .nav-dropdown > .nav-dropdown-btn .nav-icon{display:none} .vg-header .nav-link,.vg-header .nav-dropdown-btn{padding:0 10px} .vg-header .nav-btn,.vg-header .nav-btn-outline{padding:0 var(--space-3)} } .vg-header .logo-wrap{display:flex;align-items:center;flex-shrink:0;min-height:44px;text-decoration:none;border-radius:var(--radius-sm)} /* El PNG del logo trae margen blanco: se recorta con márgenes negativos */ .vg-header .logo-wrap img{ height:132px;width:auto;margin:-36px -12px; transform-origin:left center;transition:transform var(--dur-3) var(--ease-out); } .vg-header.is-scrolled .logo-wrap img{transform:scale(.86)} .vg-header .nav-links{display:flex;align-items:center;justify-content:center;gap:2px} .vg-header .nav-sep{display:none} .vg-header .nav-link, .vg-header .nav-dropdown-btn{ position:relative;display:flex;align-items:center;gap:var(--space-2); min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-sm);border:0; font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:600;line-height:1;letter-spacing:0; color:var(--text-body);background:transparent;text-decoration:none;white-space:nowrap; transition:color var(--dur-2),background-color var(--dur-2); } .vg-header .nav-link:hover, .vg-header .nav-dropdown-btn:hover, .vg-header .nav-dropdown.open > .nav-dropdown-btn{color:var(--primary);background:var(--primary-100)} .vg-header .nav-link.active, .vg-header .nav-dropdown-btn.active{color:var(--primary);background:var(--primary-100);box-shadow:inset 0 0 0 1px var(--primary-200)} .vg-header .nav-link.active::after, .vg-header .nav-dropdown-btn.active::after{ content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:5px;height:2px;border-radius:2px; background:var(--grad-brand); } .vg-header .nav-icon{display:inline-grid;place-items:center;line-height:1;font-size:1rem;color:var(--primary)} .vg-header .nav-icon .icon{--icon-size:17px} .vg-header .nav-dropdown-chevron, .vg-header .nav-subdropdown-chevron{ display:inline-block;font-size:.7rem;line-height:1;color:var(--text-muted); transition:transform var(--dur-2) var(--ease-out); } /* Botones de la derecha */ .vg-header .nav-btn, .vg-header .nav-btn-outline{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md); font-size:var(--fs-sm);font-weight:700;line-height:1;letter-spacing:0;text-decoration:none;white-space:nowrap; transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),background-color var(--dur-2),border-color var(--dur-2); } .vg-header .nav-btn{color:var(--white);background:var(--grad-brand);box-shadow:var(--ring-highlight-dark),var(--shadow-brand)} .vg-header .nav-btn:hover{transform:translateY(-1px);box-shadow:var(--ring-highlight-dark),var(--shadow-brand-hover)} .vg-header .nav-btn-outline{color:var(--primary);background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-xs)} .vg-header .nav-btn-outline:hover{border-color:var(--border-strong);background:var(--primary-50)} /* Hamburguesa */ .vg-header .nav-toggle{ display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px; width:44px;height:44px;border-radius:var(--radius-md);background:transparent; } .vg-header .nav-toggle:hover{background:var(--primary-100)} .vg-header .nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--primary-dark);transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2)} .vg-header .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .vg-header .nav-toggle.open span:nth-child(2){opacity:0} .vg-header .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* 10. DESPLEGABLES ======================================================== */ .vg-header .nav-dropdown{position:relative;display:inline-flex;align-items:center} .vg-header .nav-dropdown-menu, .vg-header .nav-subdropdown-menu{ position:absolute;z-index:var(--z-dropdown);min-width:220px;padding:var(--space-2); display:flex;flex-direction:column;gap:2px; background:rgb(var(--rgb-white) / .96); -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5); border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--border),var(--shadow-lg); opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2); } .vg-header .nav-dropdown-menu{top:calc(100% + 8px);left:50%;transform:translate(-50%,6px) scale(.98);transform-origin:top center} .vg-header .nav-dropdown-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .vg-header .nav-subdropdown{position:relative} .vg-header .nav-subdropdown-menu{top:calc(-1 * var(--space-2));left:calc(100% + 6px);transform:translateX(-4px);min-width:230px} .vg-header .nav-subdropdown-menu::before{content:"";position:absolute;top:0;bottom:0;left:-10px;width:10px} .vg-header .nav-dropdown-item, .vg-header .nav-subdropdown-btn{ display:flex;align-items:center;gap:var(--space-3);width:100%; min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm); font-size:var(--fs-sm);font-weight:600;line-height:1.25;color:var(--text-body); text-decoration:none;white-space:nowrap;text-align:left;background:transparent;border:0; transition:color var(--dur-1),background-color var(--dur-1); } .vg-header .nav-dropdown-item:hover, .vg-header .nav-subdropdown-btn:hover, .vg-header .nav-dropdown-item.active, .vg-header .nav-subdropdown.open > .nav-subdropdown-btn{color:var(--primary);background:var(--primary-100)} .vg-header .nav-dropdown-item .nav-icon, .vg-header .nav-subdropdown-btn .nav-icon{ width:30px;height:30px;border-radius:var(--radius-sm); background:var(--primary-50);box-shadow:inset 0 0 0 1px var(--primary-200); } .vg-header .nav-subdropdown-chevron{margin-left:auto;padding-left:var(--space-2)} @media (min-width:1281px){ .vg-header .nav-dropdown:not(.is-dismissed):hover > .nav-dropdown-menu, .vg-header .nav-dropdown.open > .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition-delay:0s} .vg-header .nav-subdropdown:hover > .nav-subdropdown-menu, .vg-header .nav-subdropdown.open > .nav-subdropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s} .vg-header .nav-dropdown:not(.is-dismissed):hover .nav-dropdown-chevron, .vg-header .nav-dropdown.open .nav-dropdown-chevron{transform:rotate(180deg)} .vg-header .nav-subdropdown:hover .nav-subdropdown-chevron, .vg-header .nav-subdropdown.open .nav-subdropdown-chevron{transform:translateX(2px)} } /* Menú móvil y tableta (≤1280 px): la cabecera sigue fija */ @media (max-width:1280px){ :root{--header-h:64px} .vg-header .navbar{display:flex;justify-content:space-between;gap:var(--space-2)} .vg-header .logo-wrap img{height:112px;margin:-30px -10px} .vg-header .nav-toggle{display:flex;order:3} .vg-header .nav-links{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:2px; max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain; padding:var(--space-3) var(--gutter) var(--space-6); background:var(--white);box-shadow:0 1px 0 var(--border),var(--shadow-lg); } .vg-header .nav-links.open{display:flex;animation:vg-menu-in var(--dur-3) var(--ease-out)} .vg-header .nav-link,.vg-header .nav-dropdown-btn{min-height:48px;width:100%;justify-content:flex-start;font-size:var(--fs-base);padding:0 var(--space-3)} .vg-header .nav-link.active::after,.vg-header .nav-dropdown-btn.active::after{display:none} .vg-header .nav-dropdown{display:block;width:100%} .vg-header .nav-dropdown-chevron{margin-left:auto} .vg-header .nav-dropdown.open .nav-dropdown-chevron{transform:rotate(180deg)} .vg-header .nav-subdropdown.open .nav-subdropdown-chevron{transform:rotate(90deg)} .vg-header .nav-dropdown-menu, .vg-header .nav-subdropdown-menu{ position:static;display:none;transform:none;opacity:1;visibility:visible;pointer-events:auto; min-width:0;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none; padding:var(--space-1) 0 var(--space-2) var(--space-4);margin-left:var(--space-4); border-left:2px solid var(--primary-200);border-radius:0;transition:none; } .vg-header .nav-dropdown.open > .nav-dropdown-menu, .vg-header .nav-subdropdown.open > .nav-subdropdown-menu{display:flex} .vg-header .nav-dropdown-item,.vg-header .nav-subdropdown-btn{min-height:48px;font-size:var(--fs-base);white-space:normal} .vg-header .navbar > div:last-child{margin-left:auto} } @media (max-width:520px){ .vg-header .navbar{padding:0 var(--space-2) 0 var(--space-3);gap:var(--space-1)} .vg-header .logo-wrap{min-width:0;flex-shrink:1} .vg-header .logo-wrap img{height:84px;margin:-22px -9px} .vg-header .nav-btn,.vg-header .nav-btn-outline{padding:0 10px;font-size:var(--fs-xs);border-radius:var(--radius-sm)} .vg-header .navbar > div:last-child{gap:var(--space-1);min-width:0} .vg-header .nav-toggle{flex-shrink:0;width:44px} } /* ≤640 px: las acciones pasan a una barra superior fina (orden visual, no del DOM); la cabecera se pega con top negativo para que, al hacer scroll, quede fija solo la barra del logo y la hamburguesa. */ @media (max-width:640px){ :root{--util-h:57px} .vg-header{top:calc(-1 * var(--util-h))} .vg-header .navbar{flex-wrap:wrap;row-gap:0} .vg-header .navbar > div:last-child,.vg-header .nav-actions{ order:-1;flex:0 0 100%;justify-content:stretch;gap:6px;margin:0; padding:6px 0;box-shadow:0 1px 0 var(--border); } .vg-header .nav-actions > *,.vg-header .navbar > div:last-child > *{flex:1 1 0;min-width:0;padding:0 6px;font-size:var(--fs-xs)} .vg-header .nav-links{max-height:calc(100dvh - var(--header-h) - var(--util-h))} } @media (max-width:389px){ .vg-header .logo-wrap img{height:72px;margin:-19px -8px} .vg-header .nav-btn,.vg-header .nav-btn-outline{padding:0 8px;font-size:var(--fs-2xs)} } @keyframes vg-menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* 11. PIE ================================================================= */ .vg-footer{ position:relative;isolation:isolate;overflow:hidden; background:var(--ink-950);color:var(--on-dark-subtle); padding:var(--space-20) var(--gutter) var(--space-10);text-align:center;font-family:var(--font-sans); } .vg-footer::before{ content:"";position:absolute;inset:0 0 auto;height:1px;z-index:-1; background:linear-gradient(90deg,transparent,rgb(var(--rgb-accent) / .8),transparent); } .vg-footer::after{ content:"";position:absolute;left:50%;top:0;width:min(900px,120%);height:320px;z-index:-1;pointer-events:none; transform:translate(-50%,-55%); background:radial-gradient(closest-side,rgb(var(--rgb-accent) / .22),transparent); } .vg-footer-brand{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;letter-spacing:var(--tracking-heading);color:var(--white);margin-bottom:var(--space-2)} .vg-footer-sub{font-size:var(--fs-sm);color:var(--on-dark-subtle);margin-bottom:var(--space-8)} .vg-footer-social{display:flex;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-8)} .vg-footer-social a{ display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-md); color:var(--on-dark-muted);background:rgb(var(--rgb-white) / .04);box-shadow:inset 0 0 0 1px var(--on-dark-line); text-decoration:none;transition:color var(--dur-2),background-color var(--dur-2),transform var(--dur-2) var(--ease-out); } .vg-footer-social a:hover{color:var(--white);background:rgb(var(--rgb-white) / .1);transform:translateY(-2px)} .vg-footer-copy{font-size:var(--fs-xs);color:var(--on-dark-subtle);margin-bottom:var(--space-3)} .vg-footer-phone{ display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3); font-size:var(--fs-sm);font-weight:600;color:var(--on-dark-muted);text-decoration:none;border-radius:var(--radius-sm); margin-bottom:var(--space-6); } .vg-footer-phone:hover{color:var(--white)} .vg-footer-links{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 var(--space-1); max-width:900px;margin:0 auto;padding-top:var(--space-6);border-top:1px solid var(--on-dark-line); font-size:var(--fs-xs); } .vg-footer-links button,.vg-footer-links a{ min-height:44px;padding:0 var(--space-2);border-radius:var(--radius-sm); font-size:var(--fs-xs);font-weight:500;color:var(--on-dark-subtle); background:none;border:0;cursor:pointer;text-decoration:none;transition:color var(--dur-2); } .vg-footer-links button:hover,.vg-footer-links a:hover{color:var(--white);text-decoration:underline} .vg-footer-sep{color:var(--on-dark-subtle)} /* 12. VENTANAS LEGALES ==================================================== */ .vg-modal-overlay{ display:none;position:fixed;inset:0;z-index:var(--z-modal); align-items:center;justify-content:center;padding:var(--space-4); background:rgb(var(--rgb-ink) / .55); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .vg-modal-overlay.active{display:flex;animation:vg-fade-in var(--dur-2) var(--ease-out)} .vg-modal-box{ display:flex;flex-direction:column;width:100%;max-width:720px;max-height:min(88vh,880px);overflow:hidden; background:var(--white);border-radius:var(--radius-xl);box-shadow:0 0 0 1px rgb(var(--rgb-white) / .4),var(--shadow-xl); } .vg-modal-overlay.active .vg-modal-box{animation:vg-pop-in var(--dur-3) var(--ease-out)} .vg-modal-header{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-shrink:0; padding:var(--space-4) var(--space-4) var(--space-4) var(--space-8); border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--primary-50),var(--white)); } .vg-modal-header h2{font-size:var(--fs-lg);color:var(--text-strong);margin:0} .vg-modal-close{ display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-md); font-size:1.5rem;line-height:1;color:var(--text-muted);background:transparent;border:0;cursor:pointer; transition:background-color var(--dur-1),color var(--dur-1); } .vg-modal-close:hover{background:var(--primary-100);color:var(--primary)} .vg-modal-body{ overflow-y:auto;overscroll-behavior:contain;padding:var(--space-6) var(--space-8) var(--space-8); font-size:var(--fs-sm);line-height:1.75;color:var(--text-body); } .vg-modal-body h3{font-size:var(--fs-base);color:var(--text-strong);margin:var(--space-6) 0 var(--space-2)} .vg-modal-body h3:first-child{margin-top:0} .vg-modal-body p{margin-bottom:var(--space-3);max-width:68ch} .vg-modal-body ul{margin:var(--space-2) 0 var(--space-4) var(--space-5)} .vg-modal-body li{margin-bottom:var(--space-1)} .vg-modal-body a{color:var(--link);font-weight:600} .vg-modal-body strong{font-weight:600;color:var(--text-strong)} @media (max-width:600px){ .vg-modal-overlay{padding:var(--space-2);align-items:flex-end} .vg-modal-box{max-height:92dvh;border-radius:var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md)} .vg-modal-header{padding-left:var(--space-5)} .vg-modal-body{padding:var(--space-5)} } @keyframes vg-fade-in{from{opacity:0}to{opacity:1}} @keyframes vg-pop-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}} /* 13. BANNER DE COOKIES =================================================== */ #vg-cc{ position:fixed;z-index:var(--z-cookie);left:var(--space-4);right:var(--space-4);bottom:var(--space-4); max-width:620px;margin-inline:auto; display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-4) var(--space-4) var(--space-6); background:rgb(var(--rgb-white) / .96); -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4); border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--border),var(--shadow-xl); font-family:var(--font-sans);animation:vg-cc-in var(--dur-4) var(--ease-out); } #vg-cc p{flex:1;margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--text-body)} #vg-cc a{color:var(--link);font-weight:600} #vg-cc .vg-cc-btns{display:flex;gap:var(--space-2);flex-shrink:0} #vg-cc .vg-cc-ok,#vg-cc .vg-cc-no{ min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md); font-size:var(--fs-sm);font-weight:700;white-space:nowrap;cursor:pointer; transition:background-color var(--dur-2),border-color var(--dur-2),box-shadow var(--dur-2); } #vg-cc .vg-cc-ok{color:var(--white);background:var(--grad-brand);border:0;box-shadow:var(--ring-highlight-dark),var(--shadow-brand)} #vg-cc .vg-cc-ok:hover{background:var(--grad-brand-hover)} #vg-cc .vg-cc-no{color:var(--text-body);background:var(--white);border:1px solid var(--border)} #vg-cc .vg-cc-no:hover{border-color:var(--border-strong);color:var(--primary)} @media (max-width:640px){ #vg-cc{flex-direction:column;align-items:stretch;text-align:left;gap:var(--space-3);left:var(--space-2);right:var(--space-2);bottom:var(--space-2);padding:var(--space-4)} #vg-cc .vg-cc-btns{flex-wrap:wrap} #vg-cc .vg-cc-btns > *{flex:1 1 140px;white-space:normal} } @keyframes vg-cc-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* 14. INTERRUPTOR (mensual/anual) ========================================= */ /* El botón mide 60×44 (zona táctil); la pista (::before) y el mando (::after) se pintan dentro. */ .switch,.pricing-toggle-btn{ position:relative;flex-shrink:0;width:60px;height:44px;border:0;padding:0; background:transparent;cursor:pointer;border-radius:var(--radius-pill); } .switch::before,.pricing-toggle-btn::before{ content:"";position:absolute;left:2px;right:2px;top:6px;bottom:6px;border-radius:var(--radius-pill); background:var(--border-control);box-shadow:inset 0 1px 2px rgb(var(--rgb-ink) / .14); transition:background-color var(--dur-3) var(--ease-out); } .switch::after,.pricing-toggle-btn::after{ content:"";position:absolute;top:10px;left:6px;width:24px;height:24px;border-radius:50%; background:var(--white);box-shadow:0 1px 2px rgb(var(--rgb-ink) / .2),0 3px 8px rgb(var(--rgb-ink) / .12); transition:transform var(--dur-3) var(--ease-spring); } .switch.on::before,.switch[aria-checked="true"]::before,.pricing-toggle-btn.on::before,.pricing-toggle-btn[aria-checked="true"]::before{background:var(--primary)} .switch.on::after,.switch[aria-checked="true"]::after,.pricing-toggle-btn.on::after,.pricing-toggle-btn[aria-checked="true"]::after{transform:translateX(24px)} .switch-label{font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);transition:color var(--dur-2)} .switch-label.active{font-weight:700;color:var(--text-strong)} /* 15. FORMULARIOS ========================================================= */ .field{display:flex;flex-direction:column;gap:var(--space-1)} .field > label,.field-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-strong);line-height:1.35} .field-hint{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45} .input,.field input[type="number"],.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field select,.field textarea{ width:100%;min-height:44px;padding:var(--space-2) var(--space-3); border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--white); font-size:var(--fs-base);color:var(--text); box-shadow:var(--shadow-xs);transition:border-color var(--dur-2),box-shadow var(--dur-2); } .input:hover,.field input:hover,.field select:hover{border-color:var(--ink-600)} .field textarea{min-height:120px;resize:vertical;line-height:1.5} .input:focus,.field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgb(var(--rgb-primary) / .14); } /* Aviso destacado (p. ej. "VeriFactu incluido") */ .callout{ position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:var(--space-4); padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);text-align:left; background:linear-gradient(135deg,rgb(var(--rgb-white) / .9),var(--primary-50)); box-shadow:inset 0 0 0 1px var(--primary-200),var(--shadow-sm); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } .callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-brand)} .callout p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--primary-dark)} .callout strong{color:var(--primary-dark)} /* 16. MAQUETAS DEL PANEL ================================================== */ /* Ventanas decorativas del producto. Las cifras se conservan tal cual. */ .mock{ position:relative;overflow:hidden;width:100%; background:var(--white);border-radius:var(--radius-xl); box-shadow:0 0 0 1px rgb(var(--rgb-line) / .9),var(--shadow-xl); font-family:var(--font-sans);text-align:left; } .mock::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--ring-highlight)} .mock__bar{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-3); padding:var(--space-3) var(--space-5);color:var(--white); background:linear-gradient(135deg,var(--navy-900),var(--primary-dark)); } .mock__title{font-size:var(--fs-sm);font-weight:700;color:var(--white)} .mock__sub{font-size:var(--fs-2xs);color:var(--on-dark-subtle);margin-top:2px} .mock__dots{display:flex;gap:6px} .mock__dots > *{width:10px;height:10px;border-radius:50%;background:rgb(var(--rgb-white) / .22)} .mock__dots > :nth-child(2){background:rgb(var(--rgb-white) / .34)} .mock__dots > :nth-child(3){background:rgb(var(--rgb-white) / .5)} .mock__body{padding:var(--space-4) var(--space-5)} .mock__section{font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)} .mock__foot{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-top:1px solid var(--border)} .mock-kpis{display:grid;grid-template-columns:repeat(var(--kpi-cols,2),minmax(0,1fr))} .mock-kpi{padding:var(--space-4) var(--space-5)} .mock-kpi + .mock-kpi{box-shadow:inset 1px 0 0 var(--border)} .mock-kpi__label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-1)} .mock-kpi__value{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;line-height:1.1;color:var(--text-strong);font-variant-numeric:tabular-nums} .mock-kpi__value--brand{color:var(--primary)} .mock-delta{display:inline-flex;align-items:center;gap:var(--space-1);margin-top:var(--space-2);padding:2px var(--space-2);border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:700;color:var(--navy-900);background:var(--success-100)} .mock-delta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)} .mock-list{display:flex;flex-direction:column;gap:var(--space-2)} .mock-row{ display:flex;justify-content:space-between;align-items:center;gap:var(--space-3); padding:var(--space-2) var(--space-3);border-radius:var(--radius-md); background:var(--surface-50);box-shadow:inset 0 0 0 1px var(--border); } .mock-row__name{font-size:var(--fs-xs);font-weight:700;color:var(--text-strong)} .mock-row__meta{font-size:var(--fs-2xs);color:var(--text-muted)} .mock-row__amount{font-size:var(--fs-sm);font-weight:700;color:var(--text-strong);text-align:right;font-variant-numeric:tabular-nums} .mock-totals strong,.mock-row strong,.stat-card strong{color:var(--text-strong)} .mock-totals{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-muted)} /* Estados con texto oscuro sobre tinte: contraste AA sin colores nuevos */ .status{display:inline-flex;align-items:center;gap:5px;padding:2px var(--space-2);border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:700;color:var(--navy-900);margin-top:2px} .status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .status--ok{background:var(--success-100)} .status--ok::before{background:var(--success)} .status--pending{background:var(--warning-100)} .status--pending::before{background:var(--warning)} .status--info{background:var(--primary-100)} .status--info::before{background:var(--primary)} /* Gráfico de barras: las barras crecen con scaleY */ .mock-chart{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-50);box-shadow:inset 0 0 0 1px var(--border)} .bar{transform-origin:50% 100%;border-radius:3px 3px 1px 1px} .bar--income{background:linear-gradient(180deg,var(--accent),var(--primary))} .bar--expense{background:var(--warning)} .bar--budget{background:var(--success)} /* Tarjetas de dato pequeñas (vcard) */ .stat-card{padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--white);box-shadow:0 0 0 1px var(--border),var(--shadow-md)} .stat-card__label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)} .stat-card__value{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;color:var(--text-strong);margin:var(--space-1) 0;font-variant-numeric:tabular-nums} .stat-card__sub{font-size:var(--fs-xs);color:var(--text-muted)} /* Marco de navegador para capturas */ .browser{overflow:hidden;border-radius:var(--radius-lg);background:var(--white);box-shadow:0 0 0 1px var(--border),var(--shadow-lg)} .browser__bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--surface-50);border-bottom:1px solid var(--border)} /* 17. LIGHTBOX ============================================================ */ .vg-lightbox{ position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center; padding:var(--space-6);background:rgb(var(--rgb-ink) / .82); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out; } .vg-lightbox.active,.vg-lightbox.open{display:flex;animation:vg-fade-in var(--dur-2) var(--ease-out)} .vg-lightbox img{max-width:min(1200px,100%);max-height:88vh;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);animation:vg-pop-in var(--dur-3) var(--ease-out)} /* 18. EFECTOS ============================================================= */ /* 18.1 Revelado al hacer scroll: [data-reveal] (+ "up" | "fade" | "scale" | "left" | "right" | "3d") Escalonado: [data-reveal-stagger] en el contenedor (el JS reparte --i). */ html.fx [data-reveal]{ opacity:0; transform:translate3d(0,24px,0); transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-5) var(--ease-out); transition-delay:calc(var(--i,0) * var(--stagger) + var(--reveal-delay,0ms)); } html.fx [data-reveal="fade"]{transform:none} html.fx [data-reveal="scale"]{transform:scale(.96)} html.fx [data-reveal="left"]{transform:translate3d(-32px,0,0)} html.fx [data-reveal="right"]{transform:translate3d(32px,0,0)} html.fx [data-reveal="3d"]{ transform:perspective(1400px) rotateX(16deg) translate3d(0,48px,0) scale(.96); transform-origin:50% 100%; transition-duration:var(--dur-5),1.1s; } html.fx [data-reveal].is-in{opacity:1;transform:none} /* 18.2 Titular por palabras: [data-split="words"] (el JS envuelve cada palabra) Sin máscara: cada palabra es visible desde el primer fotograma del fundido, así el titular cuenta para el LCP en cuanto empieza la animación. */ .fx-word{display:inline-block;vertical-align:top} .fx-word__in{display:inline-block} html.fx [data-split] .fx-word__in{ opacity:0;transform:translate3d(0,.4em,0);filter:blur(6px); transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out),filter var(--dur-4) var(--ease-out); transition-delay:calc(var(--w,0) * 45ms + var(--split-delay,0ms)); } html.fx [data-split].is-in .fx-word__in{opacity:1;transform:none;filter:none} /* 18.2b Entrada de portada SOLO con CSS (.fx-rise): arranca al pintar, sin esperar al JS, para no retrasar el LCP. Escalonado con --rise-delay. */ html.fx .fx-rise{animation:vg-rise var(--dur-5) var(--ease-out) backwards;animation-delay:var(--rise-delay,60ms)} /* Solo transform: el texto es visible (y cuenta para el LCP) desde el primer pintado */ @keyframes vg-rise{from{transform:translate3d(0,18px,0)}} /* 18.3 Fondo de malla de degradado animada lentamente */ .fx-mesh{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--grad-sky)} .fx-mesh::before{ /* margen vertical fijo: con % su borde superior dependería de la altura de la portada y se "movería" (CLS) si esta crece mientras se analiza el HTML */ content:"";position:absolute;inset:-160px -25%; background: radial-gradient(38% 42% at 18% 28%,rgb(var(--rgb-accent) / .30),transparent 70%), radial-gradient(34% 40% at 82% 18%,rgb(var(--rgb-primary) / .26),transparent 72%), radial-gradient(40% 36% at 70% 82%,rgb(var(--rgb-success) / .14),transparent 70%), radial-gradient(30% 30% at 12% 88%,rgb(var(--rgb-warning) / .08),transparent 70%); animation:vg-mesh 28s var(--ease-in-out) infinite alternate;will-change:transform; } .fx-mesh::after{ /* rejilla fina que se desvanece hacia los bordes */ content:"";position:absolute;inset:0; background-image:linear-gradient(rgb(var(--rgb-primary) / .07) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--rgb-primary) / .07) 1px,transparent 1px); background-size:44px 44px; -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%); } .fx-mesh--dark{background:var(--grad-deep)} .fx-mesh--dark::before{ background: radial-gradient(38% 42% at 20% 20%,rgb(var(--rgb-accent) / .42),transparent 70%), radial-gradient(36% 40% at 85% 30%,rgb(var(--rgb-primary) / .55),transparent 72%), radial-gradient(40% 36% at 60% 95%,rgb(var(--rgb-success) / .12),transparent 70%); } .fx-mesh--dark::after{background-image:linear-gradient(rgb(var(--rgb-white) / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--rgb-white) / .05) 1px,transparent 1px)} @keyframes vg-mesh{ 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 50%{transform:translate3d(4%,-3%,0) rotate(7deg) scale(1.06)} 100%{transform:translate3d(-3%,3%,0) rotate(-5deg) scale(1.02)} } /* Portadas de página: contenedor para la malla y el foco */ .fx-hero{position:relative;isolation:isolate;overflow:hidden} .fx-hero > .fx-mesh{z-index:-1} /* 18.4 Foco luminoso que sigue al cursor: [data-spotlight] (solo escritorio) */ [data-spotlight]{position:relative;isolation:isolate} [data-spotlight]::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(520px circle at var(--sx,50%) var(--sy,40%),rgb(var(--rgb-accent) / .16),transparent 62%); opacity:0;transition:opacity var(--dur-4) var(--ease-out); } [data-spotlight].is-lit::after{opacity:1} /* 18.5 Inclinación 3D: [data-tilt] (el JS fija --rx/--ry; máx. 6°) */ [data-tilt]{transform-style:preserve-3d;will-change:transform} [data-tilt].is-tilting{transition:transform 80ms linear,box-shadow var(--dur-3)} /* 18.6 Maquetas: barras que crecen y entrada con perspectiva */ html.fx [data-bars] .bar{transform:scaleY(0)} html.fx [data-bars].is-in .bar{transform:none;transition:transform var(--dur-5) var(--ease-out);transition-delay:calc(var(--i,0) * 45ms + 200ms)} .fx-float{animation:vg-float 7s var(--ease-in-out) infinite} @keyframes vg-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}} /* 18.7 Secciones fijadas (escritorio): [data-pin-group] > [data-pin-step] La maqueta fijada se aplica con html.fx (puesta en el , antes del primer pintado): así el JS no reorganiza la página ya pintada (CLS). El JS pone .pin-off si no puede fijarla. Cada paso tiene un [data-pin-visual] y un [data-pin-text]; en escritorio los visuales se apilan en una columna fija y cambian al avanzar el texto. */ .pin-progress{display:none} @media (min-width:1024px) and (pointer:fine){ [data-pin-group]:not(.pin-off):where(html.fx *){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(var(--space-12),6vw,var(--space-24));align-items:start} [data-pin-group]:not(.pin-off):where(html.fx *) > [data-pin-step], [data-pin-group]:not(.pin-off):where(html.fx *) [data-pin-contents]{display:contents} [data-pin-group]:not(.pin-off):where(html.fx *) [data-pin-visual]{ grid-column:1;grid-row:1 / span var(--pin-rows,3); position:sticky;top:var(--header-h);align-self:start;justify-self:center; min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center; opacity:0;visibility:hidden;transform:translate3d(0,24px,0) scale(.97); transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out),visibility 0s linear var(--dur-4); } [data-pin-group]:not(.pin-off):where(html.fx *) [data-pin-visual].is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s} /* Cada texto mide al menos una pantalla: así el último texto y su visual salen juntos */ [data-pin-group]:not(.pin-off):where(html.fx *) [data-pin-text]{grid-column:2;min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity var(--dur-4) var(--ease-out)} [data-pin-group]:not(.pin-off):where(html.fx *) [data-pin-text].is-active{opacity:1} [data-pin-group]:not(.pin-off):where(html.fx *) .pin-progress{ display:block;grid-column:1;grid-row:1;position:sticky;top:calc(var(--header-h) + var(--space-8));align-self:start; height:3px;border-radius:3px;background:var(--primary-100);overflow:hidden;z-index:1; } .pin-progress__bar{display:block;height:100%;background:var(--grad-brand);transform:scaleX(var(--p,0));transform-origin:left center} /* Tutoriales fijados (landing): el envoltorio pasa a ser el contenedor */ .pin-tour:not(.pin-off):where(html.fx *){max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding:var(--section-y) var(--gutter)} /* Las capturas fijadas caben siempre en la pantalla (bajo la cabecera y la barra de progreso) */ .pin-tour:not(.pin-off):where(html.fx *) [data-pin-visual] img{max-width:100%;height:auto;width:auto;max-height:calc(100vh - var(--header-h) - 140px)} } /* 18.8 Resultados de calculadora: transición suave al recalcular */ [data-fx-result].is-updating [data-fx-value], [data-fx-result].is-updating strong, [data-fx-result].is-updating .crm-value, [data-fx-result].is-updating .crm-mini-value{animation:vg-result var(--dur-3) var(--ease-out)} @keyframes vg-result{from{opacity:.35;transform:translate3d(0,3px,0)}to{opacity:1;transform:none}} /* 19. REDUCIR MOVIMIENTO ================================================== */ /* Sin movimiento: solo fundidos de opacidad ≤ 150 ms y todo visible desde el inicio. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important; transition-property:opacity,color,background-color,border-color,box-shadow!important; transition-duration:150ms!important;transition-delay:0s!important; } .fx-mesh::before,.fx-float{animation:none!important} .vg-btn,.card,[data-tilt],[data-magnetic],.vg-header .nav-btn,.vg-footer-social a{transform:none!important} html.fx [data-reveal],html.fx [data-split] .fx-word__in,html.fx [data-bars] .bar{opacity:1!important;transform:none!important;filter:none!important} [data-spotlight]::after,.vg-btn--shine::after{display:none} .vg-modal-overlay.active .vg-modal-box,.vg-lightbox img{animation:vg-fade-in 150ms linear!important} #vg-cc{animation:vg-fade-in 150ms linear!important} [data-fx-result].is-updating *{animation:vg-fade-in 120ms linear!important} } /* 20. UTILIDADES ========================================================== */ .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} .no-scroll{overflow:hidden} .text-center{text-align:center} .mx-auto{margin-inline:auto} .relative{position:relative} .on-dark{color:var(--on-dark-muted)} @media print{ .vg-header,.vg-footer,#vg-cc,.fx-mesh,[data-spotlight]::after{display:none!important} html.fx [data-reveal],html.fx [data-split] .fx-word__in{opacity:1!important;transform:none!important} .card,.mock{box-shadow:0 0 0 1px var(--border)!important} } /* 21. PATRONES DE PÁGINA ================================================== */ /* 21.0 Formato común de las portadas: titular, entradilla y rótulo iguales en todas las páginas (inicio, landing, VeriFactu, blog, herramientas, campañas y legales). Las pieles solo deciden la composición (centrada, a dos columnas, ilustración). "html body" delante: gana a las reglas de cada página y de cada piel sin !important. */ html body :is(.fx-hero,.vg-hero) h1, html body .blog-hero-text > p, html body > main > h1{ font-family:var(--font-display);font-size:var(--fs-hero);font-weight:700; line-height:var(--lh-hero);letter-spacing:var(--tracking-hero);text-wrap:balance;max-width:22ch; margin-bottom:var(--space-5); } html body :is(.fx-hero,.vg-hero) :is(h1 ~ p:not(.convenio-nota),.vg-hero__lead,.lead){ font-size:var(--fs-hero-lead);line-height:1.6;max-width:62ch; } html body :is(.fx-hero,.vg-hero) :is(.hero-badge,.tool-hero-badge,.blog-hero-badge,.eyebrow){ display:inline-flex;align-items:center;gap:var(--space-2);min-height:32px;padding:4px var(--space-4); border:0;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600; letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--white); background:rgb(var(--rgb-white) / .07);box-shadow:inset 0 0 0 1px var(--on-dark-line); } html body :is(.fx-hero,.vg-hero) :is(.hero-badge,.tool-hero-badge,.blog-hero-badge,.eyebrow) .icon{--icon-size:14px;color:var(--success)} /* 21.0b Escena 3D de portada (.hero-scene, js/hero-3d.js): landing e índice de calculadoras. Móvil/tableta, sin WebGL o con "reducir movimiento": la composición fija, inclinada. Desde 1200 px: hueco reservado (sin CLS) con un halo mientras llega el lienzo 3D. */ .hero-scene{position:relative;z-index:1;width:min(100%,520px);perspective:1400px} .hero-scene img{display:block;width:100%;height:auto;transform:rotateX(7deg) rotateY(-9deg) rotateZ(1deg);transform-origin:50% 60%} @media (min-width:1200px){ .hero-scene{width:100%;aspect-ratio:1000/720} .hero-scene::before{content:"";position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--rgb-accent) / .35),transparent);filter:blur(30px)} .hero-scene picture{position:absolute;inset:0;display:grid;place-items:center} .hero-scene:not(.is-static) img{visibility:hidden} /* el lienzo desborda su columna (sombras y tarjetas no se cortan); no captura clics */ .hero-scene .escena-3d{position:absolute;left:-6%;top:-14%;width:138%;height:130%;pointer-events:none;opacity:0;transition:opacity 700ms var(--ease-out)} .hero-scene.is-ready .escena-3d{opacity:1} } /* 21.1 Portada (hero) */ .vg-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center; padding:var(--hero-pad-top) 0 calc(var(--hero-pad-bottom) + var(--space-16))} /* + lo que monta la franja de confianza */ .vg-hero__content > * + *{margin-top:var(--space-6)} .vg-hero__title{margin-inline:auto;max-width:16ch} .vg-hero__lead{max-width:640px;margin-inline:auto} .vg-hero__compliance{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)} .vg-hero__compliance-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)} .vg-hero__callout{max-width:620px;margin-inline:auto} .vg-chip--link{min-height:44px;text-decoration:none;transition:background-color var(--dur-2),box-shadow var(--dur-2)} .vg-chip--link:hover{background:var(--primary-100);box-shadow:inset 0 0 0 1px var(--border-strong)} .callout__link{color:var(--primary);font-weight:700;white-space:nowrap} /* 21.2 Franja de confianza (cristal que monta sobre la portada) */ .trust-bar{position:relative;z-index:2;margin-top:calc(-1 * var(--space-16))} .trust-bar__inner{ display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4) var(--space-6); max-width:calc(var(--container) + 2 * var(--gutter)); padding:var(--space-5) clamp(var(--space-5),3vw,var(--space-10));border-radius:var(--radius-xl); background:rgb(var(--rgb-white) / .82);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4); box-shadow:var(--ring-highlight),0 0 0 1px var(--border),var(--shadow-lg); } .trust-bar__item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-sm);font-weight:600;color:var(--text-strong)} @media (max-width:900px){ .trust-bar{margin-inline:var(--gutter)} .trust-bar__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));padding:var(--space-5)} } /* 21.3 Listas con check (sustituye a ::before con "✓") */ .check-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)} .check-list li{position:relative;padding-left:var(--space-8);color:var(--text-body);line-height:1.5} .check-list li::before{ content:"";position:absolute;left:0;top:.1em;width:20px;height:20px;border-radius:50%; background:var(--success-100);box-shadow:inset 0 0 0 1px rgb(var(--rgb-success) / .4); } .check-list li::after{ content:"";position:absolute;left:5px;top:calc(.1em + 5px);width:10px;height:10px;background:var(--success); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } /* 21.4 Tarjetas de función */ .feature-card p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.65} .feature-card--lead{background:linear-gradient(160deg,var(--white) 30%,var(--primary-100))} /* 21.5 Funciones alternas */ .feat-visual{position:relative;isolation:isolate;gap:var(--space-3)} .feat-visual::before{content:"";position:absolute;inset:-8% 0;z-index:-1;pointer-events:none; background:radial-gradient(closest-side,rgb(var(--rgb-accent) / .14),transparent)} .feat-text > .vg-chip{align-self:flex-start} .feat-row + .feat-row{margin-top:var(--space-20)} @media (min-width:1024px) and (pointer:fine){[data-pin-group]:not(.pin-off):where(html.fx *) .feat-row + .feat-row{margin-top:0}} /* 21.6 Precios */ .pricing__toggle{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-10)} .pricing__cards{display:grid;gap:var(--space-6);max-width:1040px;margin-inline:auto;align-items:stretch} @media (min-width:860px){.pricing__cards{grid-template-columns:repeat(3,minmax(0,1fr))}} .price-card{display:flex;flex-direction:column;text-align:left} .price-card h3{font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--space-2)} .price-card .price{font-family:var(--font-display);font-size:clamp(2.25rem,1.8rem + 1.6vw,3rem);font-weight:700;letter-spacing:var(--tracking-display);color:var(--primary-dark);line-height:1.1;font-variant-numeric:tabular-nums} .price-card .price-sfx{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;letter-spacing:0;color:var(--text-muted);margin-left:var(--space-1)} .price-card__billing{align-self:flex-start;padding:2px var(--space-3);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700;color:var(--navy-900);background:var(--success-100);box-shadow:inset 0 0 0 1px rgb(var(--rgb-success) / .35)} .price-card__desc{font-size:var(--fs-sm);color:var(--text-muted)} .price-card > .price-card__cta{margin-top:auto} .price-card__desc + .price-card__cta{margin-top:var(--space-6)} .price-card--featured{--lift:-8px} .price-card__star .icon{--icon-size:18px;color:var(--warning);fill:var(--warning)} /* 21.7 Bloque de prueba gratuita (oscuro) */ .trial__pill{align-self:flex-start} .trial__em{font-style:normal;color:var(--accent-300)} .trial__small{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);font-size:var(--fs-xs);color:var(--on-dark-subtle)} .trial__small .icon{--icon-size:14px;color:var(--success)} .trial__visual{perspective:1400px} /* 21.8 Maqueta de resumen (dash) */ .dash{max-width:460px;margin-inline:auto} .dash__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)} .dash__kpi{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2) var(--space-1);border-radius:var(--radius-sm);background:var(--surface-50);box-shadow:inset 0 0 0 1px var(--border);text-align:center} .dash__kv{font-family:var(--font-display);font-size:var(--fs-base);font-weight:700;color:var(--text-strong);line-height:1.1;font-variant-numeric:tabular-nums} .dash__kv--brand{color:var(--primary)} .dash__kl{font-size:var(--fs-2xs);color:var(--text-muted);line-height:1.3} .dash__chart-title{font-size:var(--fs-2xs);font-weight:600;color:var(--text-muted);margin-bottom:var(--space-2)} .dash__bars{display:flex;align-items:flex-end;gap:6px;height:56px} .dash__group{display:flex;flex-direction:column;align-items:center;flex:1;gap:2px} .dash__wrap{display:flex;align-items:flex-end;gap:2px;height:44px} .dash__wrap .bar{width:9px} .dash__lbl{font-size:var(--fs-2xs);color:var(--text-muted)} .dash__legend{display:flex;gap:var(--space-3);margin-top:var(--space-2)} .dash__leg{display:flex;align-items:center;gap:var(--space-1);font-size:var(--fs-2xs);color:var(--text-muted)} .dash__fin{display:flex;flex-direction:column;font-size:var(--fs-xs)} .dash__row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border)} .dash__l{color:var(--text-body)} .dash__sub{font-size:var(--fs-2xs);color:var(--text-muted)} .dash__v{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums} .dash__total{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-3);font-size:var(--fs-sm);font-weight:700;color:var(--text-strong)} .dash__total-v{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--primary)} .dash__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:34px;padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:var(--fs-2xs);font-weight:600;color:var(--text-muted);background:var(--white);box-shadow:inset 0 0 0 1px var(--border)} .dash__btn .icon{--icon-size:14px} .dash__btn--primary{color:var(--white);background:var(--primary-dark);box-shadow:none} /* 21.9 Enlaces a calculadoras */ .tool-links{display:grid;gap:var(--space-4);max-width:880px;margin-inline:auto} @media (min-width:700px){.tool-links{grid-template-columns:repeat(2,minmax(0,1fr))}} .tool-link{--card-pad:var(--space-4) var(--space-5);display:flex;align-items:center;gap:var(--space-4);font-weight:600;color:var(--text-strong);text-decoration:none} .tool-link.card > * + *{margin-top:0} .tool-link__arrow{margin-left:auto;color:var(--primary);transition:transform var(--dur-2) var(--ease-out)} .tool-link:hover .tool-link__arrow{transform:translate(2px,-2px)} /* 21.10 Formulario de contacto (ventana) */ .vg-modal-header h2 .icon{--icon-size:20px;color:var(--primary);margin-right:var(--space-1);vertical-align:-3px} .contact__intro{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--space-5)} .contact__form{display:flex;flex-direction:column;gap:var(--space-4)} .contact__row{display:grid;gap:var(--space-4)} @media (min-width:520px){.contact__row{grid-template-columns:1.2fr 1fr}} .contact__legal{font-size:var(--fs-xs);color:var(--text-muted);text-align:center;margin:0} .vg-hp{position:absolute;left:-9999px} .form-alert{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-sm);line-height:1.5;color:var(--navy-900);margin-bottom:var(--space-4)} .form-alert .icon{--icon-size:18px;margin-top:2px} .form-alert--ok{background:var(--success-100);box-shadow:inset 0 0 0 1px rgb(var(--rgb-success) / .4)} .form-alert--ok .icon{color:var(--success)} .form-alert--error{background:var(--warning-100);box-shadow:inset 0 0 0 1px rgb(var(--rgb-warning) / .5)} /* 21.11 Botón flotante de WhatsApp: verde de WhatsApp con el icono en blanco (excepción aprobada) */ .vg-wa-float{ position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:500; display:grid;place-items:center;width:56px;height:56px;border-radius:50%; color:var(--white);background:var(--brand-whatsapp);text-decoration:none; box-shadow:0 4px 14px rgb(var(--rgb-ink) / .25); transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2); } .vg-wa-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgb(var(--rgb-ink) / .3)} @media (max-width:600px){.vg-wa-float{right:var(--space-4);bottom:var(--space-4);width:52px;height:52px}} @media (prefers-reduced-motion:reduce){.vg-wa-float{transform:none!important}} @media print{.vg-wa-float{display:none}} /* Formulario de contacto v2 — añadir a verigest-ds.css o en un