/* variables.css — colores, tamaños y fuentes globales */
:root{
  --blue:#005BFD;
  --blue-2:#2f7bff;
  --blue-d:#0046c4;
  --blue-ink:#001b66;
  --blue-soft:#eaf1ff;
  /* Escala tonal de azul (rango de profundidad, mismo hue de marca) */
  --blue-50:#f2f6ff; --blue-100:#e3ecff; --blue-200:#c9dbff; --blue-300:#9cbcff;
  --ink:#0b1220;
  --ink-soft:#475569;
  --ink-faint:#7c8597;
  /* Superficie oscura navy para secciones de contraste (rompen la monotonía azul) */
  --navy:#0a0f1c;
  --navy-2:#111a30;
  --bg:#ffffff;
  --bg-soft:#f6f8fc;
  --bg-tint:#eef3fb;
  --line:#e6eaf2;
  --line-strong:#d6deec;
  --line-faint:#eef1f7;
  --radius:20px;
  --radius-lg:30px;
  --font-display:'IBM Plex Sans',system-ui,Arial,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Sombras premium multicapa (suaves, con profundidad) */
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.06);
  --shadow:0 6px 16px -6px rgba(16,24,40,.10),0 16px 40px -18px rgba(16,24,40,.18);
  --shadow-lg:0 24px 64px -24px rgba(16,24,40,.28),0 10px 24px -14px rgba(16,24,40,.14);
  --shadow-blue:0 16px 38px -14px rgba(0,91,253,.5);
  --glow-blue:0 24px 60px -22px rgba(0,91,253,.45);
  /* Tarjetas: reposo discreto + hover con realce (hairline + elevación) */
  --shadow-card:0 1px 2px rgba(16,24,40,.05),0 4px 14px -6px rgba(16,24,40,.10);
  --shadow-card-hover:0 2px 4px rgba(16,24,40,.05),0 20px 44px -18px rgba(16,24,40,.24);
  --ring-blue:0 0 0 1px rgba(0,91,253,.18);
  /* Radios coherentes (--radius/--radius-lg arriba quedan como alias) */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  /* Escala de espaciado (base 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px; --sp-12:96px;
  /* Escala tipográfica fluida */
  --fs-h1:clamp(34px,4.6vw,56px); --fs-h2:clamp(28px,3.6vw,42px); --fs-h3:clamp(21px,2.4vw,28px); --fs-h4:clamp(16px,1.4vw,18px);
  --fs-lead:clamp(17px,1.5vw,20px); --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px;
  /* Transiciones y easing estándar */
  --ease:cubic-bezier(.22,.7,.25,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.15s; --t:.25s; --t-slow:.4s;
  /* Espaciado fluido — responsive consistente en todos los tamaños */
  --section-y:clamp(58px,8.5vw,100px);   /* padding vertical de secciones */
  --container-x:clamp(18px,5vw,24px);    /* padding lateral del container */
}

/* base.css — reset, tipografía base, botones y utilidades */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,.logo{font-family:var(--font-display);letter-spacing:-.028em;line-height:1.1}
.container{max-width:1180px;margin:0 auto;padding:0 var(--container-x)}
section{scroll-margin-top:88px}

/* reveal on scroll (progressive enhancement) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.7,.25,1),transform .7s cubic-bezier(.22,.7,.25,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.product-grid .reveal:nth-child(2),.feature-grid .reveal:nth-child(2),.tcards .reveal:nth-child(2){transition-delay:.09s}
.product-grid .reveal:nth-child(3),.feature-grid .reveal:nth-child(3),.tcards .reveal:nth-child(3){transition-delay:.18s}
.feature-grid .reveal:nth-child(4){transition-delay:.27s}.feature-grid .reveal:nth-child(5){transition-delay:.36s}.feature-grid .reveal:nth-child(6){transition-delay:.45s}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:600;font-size:15px;padding:14px 28px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap;letter-spacing:-.01em}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 1px rgba(2,28,80,.18),0 10px 22px -10px rgba(0,91,253,.5)}
.btn-primary:hover{transform:translateY(-2px);background:#0a52e6;box-shadow:0 16px 30px -12px rgba(0,91,253,.58)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.btn-dark:hover{transform:translateY(-2px);background:#11151f}
.btn-white{background:#fff;color:var(--blue);box-shadow:0 14px 30px -14px rgba(0,0,0,.25)}
.btn-white:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);font-weight:600;border:1.5px solid var(--line)}
.btn-ghost:hover{color:var(--blue);border-color:rgba(0,91,253,.32);background:rgba(0,91,253,.04)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- section heads ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1.5px;border-radius:2px;background:currentColor;opacity:.55}
.section-head{max-width:740px;margin:0 auto 56px;text-align:center}
.section-head .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.section-head h2 .hl{color:var(--blue)}
.section-head p{margin-top:18px;font-size:18px;color:var(--ink-soft)}
/* Variante editorial alineada a la izquierda (se mezcla con las centradas para romper la monotonía) */
.section-head.left{margin-left:0;margin-right:0;text-align:left;max-width:680px}
.section-head.left .eyebrow{justify-content:flex-start}
.section-head.left p{margin-left:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* animations.css — animaciones e interacciones globales */

/* Variantes de aparición (se combinan con .reveal) */
.js .reveal-left { opacity: 0; transform: translateX(-44px); transition: opacity .7s cubic-bezier(.22,.7,.25,1), transform .7s cubic-bezier(.22,.7,.25,1); }
.js .reveal-right { opacity: 0; transform: translateX(44px); transition: opacity .7s cubic-bezier(.22,.7,.25,1), transform .7s cubic-bezier(.22,.7,.25,1); }
.js .reveal-zoom { opacity: 0; transform: scale(.9); transition: opacity .7s, transform .7s cubic-bezier(.22,.7,.25,1); }
.reveal-left.in, .reveal-right.in, .reveal-zoom.in { opacity: 1; transform: none; }

/* Flotación sutil de mockups y chips (respeta reduce-motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-art .mock { animation: floaty 6s ease-in-out infinite; }
  .chip-1 { animation: floaty 5s ease-in-out infinite; }
  .chip-2 { animation: floaty 7s ease-in-out infinite .6s; }
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Shimmer suave sobre las bandas azules */
@media (prefers-reduced-motion: no-preference) {
  .stats::after, .cta-final .box::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);
    background-size: 220% 100%; animation: shimmer 7s linear infinite;
  }
}
@keyframes shimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }

/* Botón "volver arriba" (lo inyecta main.js) */
.to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg,#2f7bff,#005BFD); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-blue); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, transform .3s, visibility .3s; z-index: 120; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }

/* Hover de imagen/cards un poco más vivo */
.bcard:hover .thumb { filter: saturate(1.15); }

/* Contener las animaciones direccionales para que NUNCA generen scroll horizontal */
.hero, .mission, .products, .features, .integrations, .contadores, .testimonials, .faq, .contact, .cta-final, .steps, .howit, .pricing, .page-section, .trust-band { overflow-x: clip; }

/* ===== Etapa 2 — pulido de la home ===== */
/* Íconos en la banda de stats */
.stat .sic { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: #fff; }
.stat .sic svg { width: 19px; height: 19px; }
/* Sello "PAC autorizado por el SAT" en la sección de compatibilidad */
.pac-seal { display: inline-flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 20px; box-shadow: var(--shadow-sm); margin-bottom: 26px; font-family: var(--font-display); font-weight: 700; font-size: 15px; text-align: left; }
.pac-seal .pac-ic { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#2f7bff,#005BFD); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.pac-seal .pac-ic svg { width: 18px; height: 18px; }
.pac-seal small { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 500; letter-spacing: .02em; }
/* Etiqueta "Más usado" en tarjetas de producto */
.pcard { position: relative; }
.pcard .ptag { position: absolute; top: -11px; left: 24px; background: linear-gradient(180deg,#2f7bff,#005BFD); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: 999px; box-shadow: var(--shadow-blue); letter-spacing: .02em; }
/* Pill de calificación en testimonios */
.rating-pill { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; box-shadow: var(--shadow-sm); font-size: 14px; margin-top: 16px; }
.rating-pill b { color: var(--ink); font-family: var(--font-display); }
.rating-pill .stars { color: #ffb020; letter-spacing: 1px; }
/* Chips flotantes sobre paneles (sobresalen arriba/abajo, nunca por los lados → no rompen responsive) */
.mission .art, .faq .reveal-left { position: relative; }
.chip-float { position: absolute; z-index: 3; background: rgba(255,255,255,.93); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 12px; padding: 9px 13px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.chip-float .ic { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg,#2f7bff,#005BFD); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.chip-tr { top: -14px; right: 16px; }
.chip-bl { bottom: -14px; left: 16px; }
@media (max-width: 560px) { .chip-float { display: none; } }

/* ===== Etapa 3 — páginas internas ===== */
/* Motivo de ondas en los encabezados de las páginas internas */
.page-hero::after { content: ""; position: absolute; inset: 0; background: url('../img/wave-soft.webp') center right/cover no-repeat; opacity: .95; filter: saturate(1.7); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
/* Tarjetas de blog: imagen con patrón sutil */
.bcard .thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 80px at 80% 20%, rgba(255,255,255,.18), transparent 60%); }
/* Miembros del equipo: leve realce al pasar el cursor */
.member .av { transition: transform .25s, box-shadow .25s; }
.member:hover .av { transform: translateY(-4px) scale(1.04); }
/* Filas de funciones (frow): el mockup luce un poco más */
.frow .fimg { transition: transform .35s var(--ease), box-shadow .35s; }
.frow:hover .fimg { transform: translateY(-5px); box-shadow: 0 34px 64px -32px rgba(0,91,253,.5); }

/* ===== Etapa 4 — banner de cookies ===== */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 130; max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 22px; transform: translateY(170%); transition: transform .55s cubic-bezier(.22,.7,.25,1); }
.cookie-bar .ck-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cookie-bar.show { transform: none; }
.cookie-bar .ck-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.cookie-bar .ck-ic svg { width: 22px; height: 22px; }
.cookie-bar .ck-tx { flex: 1; min-width: 210px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.cookie-bar .ck-tx b { color: var(--ink); font-family: var(--font-display); display: block; font-size: 14.5px; margin-bottom: 2px; }
.cookie-bar .ck-tx a { color: var(--blue); font-weight: 600; }
.cookie-bar .ck-act { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-bar .btn { padding: 11px 18px; font-size: 13.5px; }
.cookie-bar .btn-light { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.cookie-bar .btn-light:hover { background: var(--bg-soft); }
/* Panel de opciones (consentimiento granular) */
.cookie-bar .ck-options { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 15px; display: grid; gap: 12px; animation: ckslide .3s ease; }
.cookie-bar .ck-options[hidden] { display: none; }
@keyframes ckslide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cookie-bar .ck-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
.cookie-bar label.ck-opt { cursor: pointer; }
.cookie-bar .ck-opt-tx b { display: block; font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.cookie-bar .ck-opt-tx span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.cookie-bar .ck-opt-act { display: flex; justify-content: flex-end; margin-top: 2px; }
/* Interruptor (sirve para <input checkbox> y para el <span> de Esenciales) */
.ck-switch { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 25px; border-radius: 999px; background: #cbd3e0; position: relative; cursor: pointer; transition: background .2s; border: 0; margin: 0; }
.ck-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.ck-switch:checked, .ck-switch.is-on { background: var(--blue); }
.ck-switch:checked::after, .ck-switch.is-on::after { transform: translateX(19px); }
.ck-switch.is-locked { opacity: .55; cursor: not-allowed; }
.ck-switch:focus-visible { outline: 3px solid rgba(0,91,253,.4); outline-offset: 2px; }
@media (max-width: 560px) {
  .cookie-bar { padding: 16px; }
  .cookie-bar .ck-main { gap: 12px; }
  .cookie-bar .ck-act { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookie-bar .ck-act .btn { justify-content: center; padding: 11px 8px; }
  .cookie-bar .ck-act .btn-primary { grid-column: 1 / -1; }
}

/* ===== Etapa 4 — estados del formulario de contacto ===== */
.field.err input, .field.err textarea { border-color: #e5484d; background: #fff6f6; }
.field .err-msg { display: none; color: #e5484d; font-size: 12.5px; margin-top: 6px; font-weight: 600; }
.field.err .err-msg { display: block; }
.check.err-check { color: #e5484d; }
.check.err-check input { outline: 2px solid #e5484d; outline-offset: 2px; }
.form-note { display: none; align-items: center; gap: 11px; border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.form-note.show { display: flex; }
.form-note.ok { background: #e9f9ef; color: #15803d; border: 1px solid #bfe9cd; }
.form-note .nic { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #15803d; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.btn.loading { opacity: .65; pointer-events: none; }

/* ===== Pulido — accesibilidad: foco visible para navegación por teclado ===== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(0,91,253,.5); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 3px; }
/* Quita el contorno por defecto solo cuando el foco viene del mouse (no teclado) */
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* ===== Logo — animación del ícono (entrada al cargar + reacción al hover) ===== */
.logo-mark { transition: transform .4s var(--ease-spring), filter .3s ease; transform-origin: 60% 60%; }
.logo:hover .logo-mark { transform: translateY(-2px) scale(1.12) rotate(-6deg); filter: drop-shadow(0 8px 16px rgba(0,91,253,.5)); }
.logo:active .logo-mark { transform: scale(.93); transition-duration: .1s; }
/* El triángulo se "dibuja" al cargar (premium); reduce-motion lo deja fijo */
@media (prefers-reduced-motion: no-preference) {
  .js .logo-mark polygon { stroke: var(--blue); stroke-width: 3.5; stroke-linejoin: round; stroke-dasharray: 262; animation: logo-draw 1.15s var(--ease) .1s both; }
}
@keyframes logo-draw {
  0%   { stroke-dashoffset: 262; fill-opacity: 0; }
  55%  { stroke-dashoffset: 0; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

/* ===== Fase 5 — microinteracciones y hovers globales ===== */
/* Botones: feedback táctil + estado deshabilitado */
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .5; pointer-events: none; }
/* Tarjetas de función: el ícono reacciona al pasar el cursor */
.feature .fico { transition: transform .25s var(--ease-spring), box-shadow .25s, background .25s, color .25s; }
.feature:hover .fico { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 20px -8px rgba(0,91,253,.55); background: linear-gradient(135deg,#005BFD,#3b86ff); color: #fff; }
/* FAQ: feedback antes de abrir */
.faq-item { transition: box-shadow .2s, border-color .2s; }
.faq-item:hover { border-color: rgba(0,91,253,.28); }
.faq-q { transition: color .2s; }
.faq-q:hover { color: var(--blue); }
/* Pasos "cómo funciona": leve elevación */
.step { transition: transform .25s, box-shadow .25s, border-color .25s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(0,91,253,.25); }
/* KPIs de la misión */
.kpi { transition: transform .25s, box-shadow .25s; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* Enlaces del footer: indicador animado al pasar */
.fcol a { position: relative; transition: color .2s, padding-left .2s; }
.fcol a:hover { padding-left: 7px; }
.fcol a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 6px; border-radius: 3px; background: var(--blue); transform: translateY(-50%); transition: width .2s; }
.fcol a:hover::before { width: 4px; }
/* Reveal con stagger en más grids (entrada escalonada por sección) */
.steps-grid .reveal:nth-child(2), .price-grid .reveal:nth-child(2), .blog-grid .reveal:nth-child(2), .team-grid .reveal:nth-child(2), .howit-grid .reveal:nth-child(2) { transition-delay: .08s; }
.steps-grid .reveal:nth-child(3), .price-grid .reveal:nth-child(3), .blog-grid .reveal:nth-child(3), .team-grid .reveal:nth-child(3), .howit-grid .reveal:nth-child(3) { transition-delay: .16s; }
.howit-grid .reveal:nth-child(4) { transition-delay: .24s; }
.blog-grid .reveal:nth-child(4), .team-grid .reveal:nth-child(4), .feature-grid .reveal:nth-child(7) { transition-delay: .24s; }
.feature-grid .reveal:nth-child(8) { transition-delay: .32s; }
/* Stagger para la banda de stats */
.stats-grid .reveal:nth-child(2) { transition-delay: .07s; }
.stats-grid .reveal:nth-child(3) { transition-delay: .14s; }
.stats-grid .reveal:nth-child(4) { transition-delay: .21s; }
.stats-grid .reveal:nth-child(5) { transition-delay: .28s; }

/* header.css — cabecera, navegación, dropdown y menú móvil */
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid rgba(233,237,244,.9);transition:background .25s,box-shadow .25s,border-color .25s}
.site-header.scrolled{background:rgba(255,255,255,.9);box-shadow:0 6px 24px -14px rgba(16,24,40,.2);border-bottom-color:rgba(233,237,244,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
.logo-mark{width:34px;height:34px;display:block;filter:drop-shadow(0 4px 8px rgba(0,91,253,.35))}
.logo .accent{color:var(--blue)}
.menu{display:flex;gap:30px;font-size:15px;font-weight:500;color:var(--ink-soft)}
.menu a{position:relative;transition:color .2s}
.menu a:hover{color:var(--ink)}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;background:var(--blue);transition:right .25s}
.menu a:hover::after{right:0}
.has-dropdown{position:relative}
.has-dropdown>a{display:inline-flex;align-items:center;gap:5px}
.has-dropdown>a .chev{width:13px;height:13px;transition:transform .25s}
.has-dropdown:hover>a{color:var(--ink)}
.has-dropdown:hover>a .chev{transform:rotate(180deg)}
.has-dropdown:hover>a::after{right:0}
.dropdown{position:absolute;top:100%;left:50%;margin-top:14px;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:10px;width:330px;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s;z-index:80}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.dropdown a{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;transition:background .15s,transform .18s}
.dropdown a::after{display:none}
.dropdown a:hover{background:var(--bg-soft);transform:translateX(3px)}
.dropdown a:hover .di{transform:scale(1.08)}
.dropdown .di{flex:none;width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#eaf1ff,#d4e4ff);color:var(--blue);display:flex;align-items:center;justify-content:center}
.dropdown .di svg{width:20px;height:20px}
.dropdown .dt b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25}
.dropdown .dt span{font-size:12.5px;color:var(--ink-soft)}
/* Mega-menú de 3 columnas */
.dropdown.mega{width:min(740px,calc(100vw - 32px));left:0;transform:translateX(-20%) translateY(8px);padding:16px}
.has-dropdown:hover .dropdown.mega{transform:translateX(-20%) translateY(0)}
.mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 6px}
.mega-col h6{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9aa1ad;margin:0;padding:8px 12px 4px}
.dropdown.mega a{padding:9px 12px}
.dropdown.mega .di{width:38px;height:38px}
.dropdown.mega .dt b{font-size:13.5px}
.dropdown.mega .dt span{font-size:12px}
.mega-foot{display:flex;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.mega-foot a{flex:1;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--blue);background:var(--blue-soft);border-radius:12px;padding:11px 14px;display:flex;align-items:center;gap:6px;transition:background .2s,transform .2s}
.mega-foot a:hover{background:#dceaff;transform:translateY(-1px)}
.mega-foot a::after{display:none}
.mega-foot .arrow{transition:transform .2s}
.mega-foot a:hover .arrow{transform:translateX(3px)}
.header-cta{display:flex;gap:12px;align-items:center}
.header-cta .login{font-size:15px;font-weight:600;color:var(--ink-soft);transition:color .2s}
.header-cta .login:hover{color:var(--blue)}
.header-cta .btn{padding:11px 20px;font-size:14px}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;position:relative;z-index:210}
.hamb span{width:24px;height:2px;background:var(--ink);display:block;border-radius:2px;transition:transform .28s,opacity .2s}
body.nav-open .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .hamb span:nth-child(2){opacity:0}
body.nav-open .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-overlay{position:fixed;inset:0;background:rgba(5,7,13,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.3s;z-index:190}
body.nav-open .mobile-overlay{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:#fff;box-shadow:-24px 0 70px rgba(5,7,13,.22);transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:200;padding:94px 26px 28px;display:flex;flex-direction:column;overflow-y:auto}
body.nav-open .mobile-menu{transform:translateX(0)}
.mobile-menu .m-link{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--ink);padding:15px 4px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;transition:color .2s}
.mobile-menu .m-link:hover{color:var(--blue)}
.mobile-menu .m-link .ar{color:var(--blue);opacity:.45;font-size:18px}
.mobile-menu .m-cta{margin-top:auto;padding-top:24px;display:grid;gap:12px}
.mobile-menu .m-cta .btn{width:100%;justify-content:center}

/* sections.css — secciones del sitio (hero, stats, productos, footer, etc.) */
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(rgba(11,18,32,.038) 1px,transparent 1px) 0 0/26px 26px,
  radial-gradient(1000px 520px at 88% -10%,rgba(0,91,253,.12),transparent 60%),
  #fff}
.hero::after{content:"";position:absolute;inset:0;background:url('../img/wave-soft.webp') center right/cover no-repeat;opacity:.9;filter:saturate(1.6);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:50px;align-items:center;padding:84px 0 92px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:var(--shadow-sm);backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px 7px 12px;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:22px}
.hero-badge b{color:var(--blue)}
.hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(0,91,253,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,91,253,.5)}70%{box-shadow:0 0 0 8px rgba(0,91,253,0)}100%{box-shadow:0 0 0 0 rgba(0,91,253,0)}}
.hero h1{font-size:clamp(42px,5.8vw,68px);line-height:.98;font-weight:800;margin-bottom:22px;letter-spacing:-.04em}
.hero h1 .hl{color:var(--blue)}
.hero p.desc{font-size:17px;color:var(--ink-soft);margin-bottom:30px;max-width:480px;line-height:1.65}
/* mock CFDI real */
.mf-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.mf-row:last-of-type{border-bottom:0}
.mf-lbl{font-size:11.5px;color:var(--ink-soft);font-weight:600;white-space:nowrap;flex-shrink:0}
.mf-val{font-size:12.5px;font-family:var(--font-mono);color:var(--ink);font-weight:600;text-align:right}
.mf-truncate{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-sep{height:1px;background:var(--line);margin:8px 0 4px}
/* dashboard rows (mission mock) */
.mdash-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.mdash-row:last-child{border-bottom:0}
.mdash-ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center}
.mdash-info{flex:1;min-width:0}
.mdash-info b{display:block;font-size:11.5px;font-family:var(--font-mono);color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdash-info span{font-size:11px;color:var(--ink-soft)}
.mdash-ok{flex:none;width:22px;height:22px;border-radius:50%;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft)}
.hero-trust .ht{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.hero-trust .ht svg{width:17px;height:17px;color:var(--blue);flex:none}

/* hero art */
.hero-art{position:relative}
.hero-art .glow{position:absolute;inset:-8% -6% -10% -6%;background:radial-gradient(closest-side,rgba(0,91,253,.32),transparent 72%);filter:blur(36px);z-index:0}
.mock{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden}
.mock-top{background:#0a0e16;color:#fff;padding:14px 18px;display:flex;align-items:center;gap:8px;font-size:13px}
.dot{width:11px;height:11px;border-radius:50%;background:#ffffff33}
.dot:nth-child(1){background:#ff5f57}.dot:nth-child(2){background:#febc2e}.dot:nth-child(3){background:#28c840}
.mock-body{padding:26px}
.mock-row{height:12px;border-radius:6px;background:linear-gradient(90deg,#eef2f8,#f6f9fd);margin:12px 0}
.mock-row.s{width:55%}.mock-row.m{width:75%}
.mock-badge{display:inline-flex;align-items:center;gap:7px;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:12px;padding:7px 13px;border-radius:999px;margin-bottom:16px}
.mock-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.mock-total{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-weight:800;font-family:var(--font-display)}
.mock-total .big{font-size:27px}
.chip{position:absolute;z-index:2;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);border-radius:14px;padding:11px 14px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px}
.chip .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex:none}
.chip-1{top:14%;left:-34px}
.chip-1 .ic{background:linear-gradient(135deg,#28c840,#16a34a)}
.chip-2{bottom:12%;right:-26px}
.chip-2 .ic{background:linear-gradient(135deg,#2f7bff,#005BFD)}
.chip-2 b{color:var(--blue)}

/* ---------- trusted strip ---------- */
.trusted{border-top:1px solid var(--line);background:var(--bg)}
.trusted .inner{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;padding:26px 0;opacity:.85}
.trusted span{font-size:13px;color:var(--ink-soft);font-weight:600}
.trusted .marks{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.trusted .marks b{font-family:var(--font-display);font-weight:800;color:#aab2c2;font-size:18px;letter-spacing:-.02em}

/* ---------- stats ---------- */
.stats{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(120deg,#0046c4,#005BFD 48%,#2f7bff)}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 15% 0%,rgba(255,255,255,.18),transparent 60%),radial-gradient(500px 220px at 90% 120%,rgba(255,255,255,.12),transparent 60%)}
.stats-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:56px 0}
.stat{text-align:center;padding:8px 16px}
.stat .num{font-family:var(--font-display);font-size:clamp(40px,4.5vw,56px);font-weight:800;letter-spacing:-.05em;line-height:1}
.stat .lab{font-size:13.5px;color:#bcd4ff;margin-top:8px;font-weight:500}
.stat+.stat{border-left:1px solid rgba(255,255,255,.14)}
.stat .sic{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.stat .sic svg{width:24px;height:24px}

/* ---------- band cta ---------- */
.band{color:#fff}
.band-cta{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(120deg,#0046c4,#005BFD 55%,#2f7bff)}
.band-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 12% 10%,rgba(255,255,255,.18),transparent 55%)}
.band-cta .inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:56px 0}
.band-cta h2{font-size:clamp(24px,3vw,32px);font-weight:800;max-width:640px;line-height:1.15;letter-spacing:-.02em}
.band-cta p{color:#dbe7ff;margin-top:12px;max-width:600px;line-height:1.6}

/* ---------- mission ---------- */
.mission{padding:var(--section-y) 0;background:var(--bg)}
.mission h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.12}
.mission h2 .hl{color:var(--blue)}
.mission p{margin-top:18px;color:var(--ink-soft);font-size:17px}
.mission .art{position:relative;background:linear-gradient(150deg,#eef4ff,#dbe7ff);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--glow-blue)}
.kpi-row{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap}
.kpi{flex:1;min-width:120px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:16px;padding:18px}
.kpi b{display:block;font-family:var(--font-display);font-size:26px;color:var(--blue)}
.kpi span{font-size:13px;color:var(--ink-soft)}

/* ---------- products ---------- */
.products{padding:var(--section-y) 0;background:var(--bg-soft)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;box-shadow:var(--shadow-card)}
.pcard:hover{transform:translateY(-6px);border-color:var(--blue-200);box-shadow:var(--shadow-card-hover)}
/* Íconos de producto: azul sólido (jerarquía primaria, frente al tinte de los features) */
.pico{width:56px;height:56px;border-radius:16px;background:linear-gradient(140deg,var(--blue-2),var(--blue));box-shadow:0 10px 22px -10px rgba(0,91,253,.6),inset 0 1px 0 rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:20px;transition:transform .3s var(--ease-spring),box-shadow .3s}
.pcard:hover .pico{transform:translateY(-2px) scale(1.05);box-shadow:0 16px 30px -10px rgba(0,91,253,.7)}
.pico svg{width:27px;height:27px}
.pcard h3{font-size:21px;font-weight:700;margin-bottom:10px}
.pcard p{color:var(--ink-soft);font-size:15px;margin-bottom:18px}
.pcard a{color:var(--blue);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.pcard a .arrow{transition:transform .2s}
.pcard:hover a .arrow{transform:translateX(4px)}
.product-grid.trio{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;max-width:1080px;margin:0 auto;gap:20px}
.product-grid.trio .pcard{height:100%;box-shadow:var(--shadow-sm)}
.product-grid.trio .pcard.l{border-radius:var(--radius)}
.product-grid.trio .pcard.r{border-radius:var(--radius);text-align:left}
.product-grid.trio .pcard.r .pico{margin-left:0}
.product-grid.trio .center{position:relative;z-index:3;transform:translateY(-18px);transition:transform .3s var(--ease)}
.product-grid.trio .center:hover{transform:translateY(-22px)}
/* ---------- pcenter card ---------- */
.pcenter-card{position:relative;background:linear-gradient(150deg,#0046c4,#005BFD 58%,#2f7bff);border-radius:var(--radius-lg);padding:36px 28px 38px;color:#fff;overflow:hidden;box-shadow:var(--glow-blue),var(--shadow-lg);display:flex;flex-direction:column;min-height:100%}
.pcenter-glow{position:absolute;top:-25%;right:-8%;width:65%;height:65%;background:radial-gradient(closest-side,rgba(255,255,255,.20),transparent);pointer-events:none}
.pcenter-card .ptag{display:inline-block;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:5px 14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.pcenter-ico{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;margin-bottom:18px;backdrop-filter:blur(4px)}
.pcenter-ico svg{width:27px;height:27px;color:#fff}
.pcenter-card h3{font-size:clamp(18px,1.9vw,21px);font-weight:800;color:#fff;margin-bottom:11px;line-height:1.2}
.pcenter-card>p{color:rgba(255,255,255,.82);font-size:14.5px;margin-bottom:20px;line-height:1.6}
.pcenter-list{list-style:none;display:grid;gap:10px;margin-bottom:24px;flex:1}
.pcenter-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.9)}
.pc-ck{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:2px}

/* ---------- features ---------- */
.features{padding:var(--section-y) 0;background:var(--bg)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;grid-auto-flow:row dense}
.feature{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--blue-200)}
.fico{flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#eaf1ff,#d4e4ff);box-shadow:inset 0 0 0 1px rgba(0,91,253,.1);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.fico svg{width:22px;height:22px}
.feature h4{font-size:17px;font-weight:700;margin-bottom:4px}
.feature p{font-size:14.5px;color:var(--ink-soft)}
a.feature{color:inherit;text-decoration:none;cursor:pointer}
.feature.feat-wide{grid-column:span 2;background:linear-gradient(135deg,#f5f8ff,#edf3ff);border-color:rgba(0,91,253,.10)}
.feature.feat-wide .fico{width:52px;height:52px}

/* ---------- integrations ---------- */
.integrations{padding:clamp(44px,6vw,70px) 0;background:var(--bg-soft);text-align:center}
.integrations p{font-weight:600;color:var(--ink-soft);margin-bottom:28px}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:13px 22px;font-weight:700;color:var(--ink);font-size:15px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.badge:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.badge .d{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(0,91,253,.14)}

/* ---------- contadores band ---------- */
.contadores{position:relative;overflow:hidden;color:#fff;padding:var(--section-y) 0;background:
  radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(135deg,#0046c4,#005BFD 55%,#2f7bff)}
.contadores::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 12% 10%,rgba(255,255,255,.16),transparent 55%)}
.contadores .container{position:relative}
.contadores .eyebrow{color:#bcd4ff}
.contadores .eyebrow::before{background:linear-gradient(90deg,#fff,transparent)}
.contadores h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;line-height:1.14}
.contadores p{margin-top:16px;color:#dbe7ff;font-size:17px}
.contadores .art{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);padding:30px;backdrop-filter:blur(6px)}
.clist{list-style:none;display:grid;gap:16px}
.clist li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px}
.clist .ck{flex:none;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
/* mini price tiers inside contadores art box */
.mini-prices{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.mp{flex:1;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 8px}
.mp b{display:block;font-family:var(--font-display);font-weight:800;font-size:15px;color:#fff}
.mp span{font-size:11px;color:rgba(255,255,255,.72);display:block;margin-top:3px}
.mp.popular{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}

/* ---------- testimonials ---------- */
.testimonials{padding:var(--section-y) 0;background:var(--bg)}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{background:linear-gradient(180deg,#fff,#f8faff);border:1px solid var(--line);border-radius:var(--radius);padding:30px;position:relative;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;overflow:hidden}
.tcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),rgba(47,123,255,.3));opacity:.7;transition:opacity .25s}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:var(--blue-200)}
.tcard:hover::before{opacity:1}
.quote{font-size:52px;line-height:.7;color:var(--blue);font-weight:800;font-family:Georgia,serif;height:26px}
.tcard p{font-size:15.5px;color:var(--ink);margin:14px 0 20px}
.tperson{display:flex;align-items:center;gap:12px}
.avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#2f7bff,#005BFD);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);box-shadow:var(--shadow-blue)}
.tperson b{display:block;font-size:15px}
.tperson span{font-size:12.5px;color:var(--ink-soft);display:block}
/* Avatares: paleta de marca (azul/navy), descartados morado/cian/verde fuera de marca */
.av-1{background:linear-gradient(135deg,#0046c4,#2f7bff)}
.av-2{background:linear-gradient(135deg,#06317f,#005BFD);box-shadow:0 8px 20px -8px rgba(6,49,127,.55)}
.av-3{background:linear-gradient(135deg,#0a0f1c,#2b3a55);box-shadow:0 8px 20px -8px rgba(10,15,28,.5)}
.av-4{background:linear-gradient(135deg,#1d4ed8,#3b86ff);box-shadow:0 8px 20px -8px rgba(29,78,216,.5)}
.tverified{font-size:11px;color:#16a34a;font-weight:700;letter-spacing:.01em;margin-top:4px;display:flex;align-items:center;gap:5px}
.tverified::before{content:"✓";width:15px;height:15px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;flex:none}
.demo-note{text-align:center;font-size:12px;color:#9aa1ad;margin-top:22px}

/* ---------- faq ---------- */
.faq{padding:var(--section-y) 0;background:var(--bg-soft)}
.faq h2{font-size:clamp(26px,3.2vw,36px);font-weight:800}
.faq .lead{color:var(--ink-soft);margin-top:14px;font-size:17px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1.5px solid var(--line);border-radius:18px;overflow:hidden;transition:box-shadow .25s,border-color .25s}
.faq-item.open{border-color:rgba(0,91,253,.35);box-shadow:var(--shadow),0 0 0 4px rgba(0,91,253,.05)}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 22px;font-family:var(--font-display);font-size:15.5px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink)}
.faq-num{flex:none;width:32px;height:32px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-family:var(--font-mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;letter-spacing:0}
.faq-item.open .faq-num{background:var(--blue);color:#fff}
.faq-text{flex:1}
.faq-q .ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:transform .3s var(--ease-spring),background .2s,color .2s}
.faq-item.open .faq-q .ic{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.22,.7,.25,1);color:var(--ink-soft);font-size:15px}
.faq-a div{padding:0 22px 22px;padding-left:calc(22px + 32px + 14px)}
.faq-item.open .faq-a{max-height:280px}

/* ---------- contact ---------- */
.contact{padding:var(--section-y) 0;background:var(--bg)}
.contact h2{font-size:clamp(26px,3.2vw,36px);font-weight:800}
.contact .lead{color:var(--ink-soft);margin-top:14px;font-size:17px}
.contact .info{margin-top:28px;display:grid;gap:16px}
.contact .info div{display:flex;gap:13px;align-items:center;color:var(--ink-soft);font-size:15px}
.contact .info .ic{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#eaf1ff,#d4e4ff);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-lg)}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.field input,.field textarea{width:100%;border:1px solid var(--line);background:var(--bg-soft);border-radius:12px;padding:13px 15px;font:inherit;font-size:15px;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field textarea:focus{outline:0;background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,91,253,.12)}
.field .req{color:#e23b3b}
.check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-soft);margin-bottom:20px}

/* ---------- cta final ---------- */
.cta-final{padding:var(--section-y) 0}
.cta-final .box{position:relative;overflow:hidden;color:#fff;border-radius:32px;padding:72px 40px;text-align:center;box-shadow:var(--glow-blue);background:
  radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(135deg,#0046c4,#005BFD 55%,#2f7bff)}
.cta-final .box::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 220px at 50% -20%,rgba(255,255,255,.22),transparent 60%);pointer-events:none}
.cta-final h2{position:relative;font-size:clamp(28px,3.6vw,40px);font-weight:800}
.cta-final p{position:relative;margin:16px auto 28px;max-width:520px;color:#dbe7ff;font-size:17px}
.cta-final .btn{position:relative}

/* ---------- footer ---------- */
.site-footer{position:relative;background:linear-gradient(rgba(246,248,252,.78),rgba(246,248,252,.78)),url('../img/wave-soft.webp') center/cover no-repeat var(--bg-soft);border-top:1px solid var(--line);padding:0 0 30px}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:46px 0;border-bottom:1px solid var(--line)}
.footer-top h3{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.02em}
.footer-top p{color:var(--ink-soft);font-size:15px;margin-top:6px;max-width:430px}
.newsletter{display:flex;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 8px;box-shadow:var(--shadow-sm);min-width:min(430px,92vw)}
.newsletter input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;padding:0 12px;color:var(--ink)}
.newsletter .btn{white-space:nowrap}
.nl-msg{flex-basis:100%;margin-top:10px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s}
.nl-msg.show{opacity:1;max-height:44px}
.nl-msg.ok{color:#16a34a}
.nl-msg.err{color:#e23b3b}
.nl-msg .nic{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#16a34a;color:#fff;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;padding:52px 0 0}
.site-footer .logo{margin-bottom:16px}
.fdesc{color:var(--ink-soft);font-size:14px;max-width:280px}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s,color .2s}
.socials a:hover{transform:translateY(-3px);background:var(--blue);color:#fff}
.socials svg{width:17px;height:17px}
.fcol h5{font-family:var(--font-display);font-size:14px;font-weight:700;margin-bottom:16px;letter-spacing:.02em}
.fcol a{display:block;color:var(--ink-soft);font-size:14px;margin-bottom:10px;transition:color .2s}
.fcol a:hover{color:var(--blue)}
.footer-bottom{margin-top:46px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-soft);font-size:13px}
.fbadges{display:flex;gap:18px;flex-wrap:wrap}
.fbadges span{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.fbadges .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* ---------- how it works (homepage 4-step) ---------- */
.howit{padding:var(--section-y) 0;background:var(--bg-soft)}
.howit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.howit-grid::before{content:"";position:absolute;top:62px;left:calc(12.5% + 8px);right:calc(12.5% + 8px);height:2px;background:linear-gradient(90deg,rgba(0,91,253,.55),rgba(0,91,253,.12));border-radius:2px;pointer-events:none;z-index:0}
.hstep{position:relative;z-index:1;text-align:center;padding:26px 20px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.hstep:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:var(--blue-200)}
.hs-num{width:70px;height:70px;border-radius:22px;background:linear-gradient(135deg,#2f7bff,#005BFD);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:var(--shadow-blue);border:3px solid #fff}
.hs-num svg{width:30px;height:30px}
.hs-step-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;display:block;margin-bottom:8px}
.hstep h4{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}
.hstep p{color:var(--ink-soft);font-size:14px;line-height:1.65}
/* ---------- how it works (inner pages, 3-step) ---------- */
.steps{padding:var(--section-y) 0;background:var(--bg)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow-card)}
.step .n{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#2f7bff,#005BFD);color:#fff;font-family:var(--font-display);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-blue);margin-bottom:20px}
.step h4{font-size:19px;font-weight:700;margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:15px}
.step:not(:last-child)::after{content:"\2192";position:absolute;top:54px;right:-22px;color:#c7d2e6;font-size:24px;font-weight:700;z-index:1}

/* ---------- pricing ---------- */
.pricing{padding:var(--section-y) 0;background:var(--bg-soft)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 30px;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.price:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-color:var(--blue-200)}
.price.featured:hover{box-shadow:var(--glow-blue),var(--shadow-lg)}
.price.featured{border:2px solid var(--blue);box-shadow:var(--glow-blue);position:relative}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#2f7bff,#005BFD);color:#fff;font-size:12px;font-weight:700;padding:6px 16px;border-radius:999px;box-shadow:var(--shadow-blue);white-space:nowrap}
.price h3{font-family:var(--font-display);font-size:18px;font-weight:700}
.price .desc2{color:var(--ink-soft);font-size:14px;margin-top:6px;min-height:40px}
.price .amount{display:flex;align-items:flex-end;gap:6px;margin:18px 0 4px}
.price .amount b{font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1}
.price .amount span{color:var(--ink-soft);font-size:14px;padding-bottom:7px}
.price ul{list-style:none;display:grid;gap:13px;margin:22px 0 28px}
.price li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
.price li .ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:2px}
.price .btn{margin-top:auto;width:100%;justify-content:center}
.price-note{text-align:center;font-size:13px;color:#9aa1ad;margin-top:26px}

/* ---------- testimonial stars ---------- */
.tstars{color:#ffb020;letter-spacing:2px;font-size:14px;margin-bottom:4px}

/* === Ondas de acento en secciones claras — motivo de marca repetido en varias secciones === */
.integrations,.testimonials{position:relative;overflow:hidden}
.integrations>.container,.testimonials>.container{position:relative;z-index:1}
.integrations::before,.testimonials::before{content:"";position:absolute;top:-28%;right:-6%;width:52%;height:165%;background:url('../img/wave-soft.webp') top right/contain no-repeat;filter:saturate(1.7);opacity:.6;pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(72% 72% at 92% 16%,#000,transparent 72%);mask-image:radial-gradient(72% 72% at 92% 16%,#000,transparent 72%)}
/* Propagación del motivo de ondas a más secciones claras (mismo diseño top-right, más sutil) */
.products,.pricing,.steps,.page-section.alt,.howit,.contact{position:relative;overflow:hidden}
.products>.container,.pricing>.container,.steps>.container,.page-section.alt>.container,.howit>.container,.contact>.container{position:relative;z-index:1}
.products::before,.pricing::before,.steps::before,.page-section.alt::before,.howit::before,.contact::before{content:"";position:absolute;top:-26%;right:-7%;width:48%;height:160%;background:url('../img/wave-soft.webp') top right/contain no-repeat;filter:saturate(1.7);opacity:.45;pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(70% 70% at 92% 14%,#000,transparent 72%);mask-image:radial-gradient(70% 70% at 92% 14%,#000,transparent 72%)}

/* pages.css — páginas internas (subpáginas, legal, blog, equipo, vacantes) */
/* ---------- subpages ---------- */
.menu a.active{color:var(--blue)}
.menu a.active::after{right:0}
.page-hero{position:relative;overflow:hidden;background:radial-gradient(rgba(11,18,32,.045) 1px,transparent 1px) 0 0/24px 24px,#fff;border-bottom:1px solid var(--line);padding:72px 0 62px;text-align:center}
.page-hero .eyebrow{justify-content:center}
.page-hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;line-height:1.06}
.page-hero h1 .hl{color:var(--blue)}
.page-hero p{max-width:640px;margin:18px auto 0;font-size:18px;color:var(--ink-soft)}
.page-hero .pcta{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== Fase 2 — Page-hero a 2 columnas (texto editorial izq + panel der) ===== */
.page-hero.ph-split{text-align:left}
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,58px);align-items:center}
.page-hero.ph-split .eyebrow{justify-content:flex-start}
.page-hero.ph-split h1{margin:0}
.page-hero.ph-split p{margin:18px 0 0;max-width:520px}
.page-hero.ph-split .pcta{justify-content:flex-start}
.page-hero.ph-split .cred-strip{justify-content:flex-start}
/* Panel lateral del hero (mini-mock / credenciales del tema) */
/* Panel lateral estilo "ventana" (barra negra arriba, igual que el mock del home) */
.hero-aside{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:0;overflow:hidden;box-shadow:var(--shadow-lg),0 26px 54px -30px rgba(0,91,253,.42)}
.hero-aside .ha-bar{background:#0a0e16;color:#fff;display:flex;align-items:center;gap:8px;padding:13px 16px}
.hero-aside .ha-bar .dot{width:11px;height:11px;border-radius:50%}
.hero-aside .ha-file{margin-left:6px;color:rgba(255,255,255,.82);font-family:var(--font-mono);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-aside .ha-body{padding:22px 22px 20px}
.hero-aside .ha-body .mock-badge{margin-bottom:16px}
.hero-aside .ha-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-faint);font-size:13.5px}
.hero-aside .ha-row:last-child{border-bottom:0}
.hero-aside .ha-row .l{color:var(--ink-soft);font-weight:600}
.hero-aside .ha-row .v{font-family:var(--font-mono);font-weight:600;color:var(--ink)}
.hero-aside .ha-ok{display:flex;align-items:center;gap:6px;color:#16a34a;font-weight:700;font-size:13px;margin-top:14px}

/* ===== Fase 2 — Tira de credenciales bajo los heros (sustancia, menos vacío) ===== */
.cred-strip{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px}
.page-hero:not(.ph-split) .cred-strip{justify-content:center}
.cred{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow-sm)}
.cred svg{width:15px;height:15px;color:var(--blue);flex:none}

.page-section{padding:var(--section-y) 0}
.page-section.alt{background:var(--bg-soft)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:64px}
.frow:last-child{margin-bottom:0}
.frow.rev .ftext{order:2}
.ftag{display:inline-block;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.frow .ftext h3{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.15;margin-bottom:14px}
.frow .ftext p{color:var(--ink-soft);font-size:16px}
.frow .ftext .mini{list-style:none;margin-top:18px;display:grid;gap:10px}
.frow .ftext .mini li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.frow .ftext .mini .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.frow .fimg{position:relative;min-height:300px;border-radius:var(--radius-lg);box-shadow:var(--glow-blue);overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#eef4ff,#dbe7ff);border:1px solid var(--line)}
.frow .fimg .mock{width:84%}
.compare-wrap{overflow-x:auto;position:relative;-webkit-overflow-scrolling:touch}
.compare-hint{display:none;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:12px}
@media(max-width:620px){
  .compare-hint{display:block}
  .compare-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:46px;background:linear-gradient(90deg,transparent,var(--bg-soft));pointer-events:none}
}
.compare{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:14.5px;transition:background .15s}
.compare th:first-child,.compare td:first-child{text-align:left;font-weight:600}
.compare thead th{font-family:var(--font-display);font-size:15px;background:var(--bg-soft);font-weight:700}
.compare thead th.feat{color:var(--blue);background:rgba(0,91,253,.06)}
.compare tbody td.feat{background:rgba(0,91,253,.03)}
.compare tbody tr:hover td{background:rgba(0,91,253,.025)}
.compare tbody tr:hover td.feat{background:rgba(0,91,253,.06)}
.compare td .y{color:var(--blue);font-weight:800}
.compare td .n{color:#c2c8d2}
.compare tbody tr:last-child td{border-bottom:0}
.faq-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 40px}
.faq-cat h3{font-family:var(--font-display);font-size:18px;margin-bottom:16px;display:flex;align-items:center;gap:11px}
.faq-cat h3 .ic{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#eaf1ff,#d4e4ff);color:var(--blue);display:flex;align-items:center;justify-content:center}
.helpbar{max-width:560px;margin:28px auto 0;display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:var(--shadow-sm)}
.helpbar input{flex:1;border:0;outline:0;font:inherit;font-size:15px;color:var(--ink);background:transparent}

/* legal / prose */
.legal{max-width:780px;margin:0 auto}
.legal h2{font-family:var(--font-display);font-size:21px;font-weight:800;margin:36px 0 12px}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--ink-soft);font-size:15.5px;margin-bottom:14px;line-height:1.75}
.legal ul{margin:0 0 16px 20px;color:var(--ink-soft);font-size:15.5px}
.legal li{margin-bottom:8px}
.legal .updated{font-size:13px;color:#9aa1ad;margin-bottom:26px}
.legal-note{background:var(--blue-soft);border:1px solid rgba(0,91,253,.16);border-radius:14px;padding:16px 18px;font-size:14px;color:var(--ink);margin-bottom:30px}
/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:var(--blue-200)}
.bcard .thumb{height:158px;background:linear-gradient(135deg,#0046c4,#2f7bff);position:relative}
.bcard .thumb span{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);color:var(--blue);font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.bcard .bbody{padding:22px;display:flex;flex-direction:column;flex:1}
.bcard h3{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.3}
.bcard p{font-size:14px;color:var(--ink-soft);margin-bottom:16px;flex:1}
.bcard .bmeta{font-size:12.5px;color:#9aa1ad}
/* equipo / valores */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.member{text-align:center}
.member .av{width:84px;height:84px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(135deg,#2f7bff,#005BFD);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:26px;box-shadow:var(--shadow-blue)}
.member b{display:block;font-size:15px}
.member span{font-size:13px;color:var(--ink-soft)}
/* vacantes */
.jobs{max-width:760px;margin:0 auto;display:grid;gap:14px}
.job{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;box-shadow:var(--shadow-card);transition:border-color .2s,box-shadow .2s}
.job:hover{border-color:rgba(0,91,253,.3);box-shadow:var(--shadow)}
.job h4{font-size:16px;font-weight:700}
.job .jmeta{font-size:13px;color:var(--ink-soft);margin-top:3px}
.job .jtag{background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;white-space:nowrap}

/* barra de búsqueda ayuda — temas populares */
.help-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.help-tags span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:default;transition:color .15s,border-color .15s}
.help-tags span:hover{color:var(--blue);border-color:rgba(0,91,253,.3)}
/* banda de sellos en la página de contacto */
.trust-band{padding:32px 0;background:var(--bg-soft);border-top:1px solid var(--line)}
.tband-inner{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.tb-item svg{color:var(--blue);flex:none}
.tb-sep{width:1px;height:18px;background:var(--line)}
@media(max-width:640px){.tb-sep{display:none}.tband-inner{gap:14px 20px}}
/* ===== Etapa 4 — página 404 ===== */
.notfound{min-height:64vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(900px 440px at 50% -25%,rgba(0,91,253,.14),transparent 60%),var(--bg-soft);padding:80px 0}
.notfound .container{position:relative;z-index:1}
.notfound .code{font-family:var(--font-display);font-weight:800;font-size:clamp(92px,20vw,184px);line-height:1;background:linear-gradient(120deg,var(--blue),#3b86ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.notfound h1{font-family:var(--font-display);font-size:clamp(24px,3.6vw,36px);font-weight:800;margin-top:6px}
.notfound p{max-width:520px;margin:14px auto 0;color:var(--ink-soft);font-size:17px}
.notfound .pcta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.notfound .quick{margin-top:36px;display:flex;gap:10px 20px;justify-content:center;flex-wrap:wrap;align-items:center;font-size:14px}
.notfound .quick a{color:var(--ink-soft);font-weight:600}
.notfound .quick a:hover{color:var(--blue)}
/* carreras */
.jend{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.japply{font-size:13px;font-weight:700;color:var(--blue)}
.japply:hover{text-decoration:underline}
/* blog */
.bread{display:block;font-size:13px;font-weight:700;color:var(--blue);margin-bottom:10px}
.bread:hover{text-decoration:underline}

/* responsive.css — breakpoints ordenados (desktop-first)
   Escala de cortes:
     ≤1024  laptop / tablet horizontal      → solo afina separaciones
     ≤900   tablet vertical                 → menú→hamburguesa, hero/splits a 1 col, grids a 2 col
     ≤640   móvil                           → grids a 1 col, CTAs a lo ancho
     ≤400   móvil pequeño                   → ajustes finos de padding
     ≤360   muy pequeño                     → titular del hero
   El espaciado de secciones (--section-y) y el padding del container (--container-x)
   son fluidos con clamp() en variables.css, así que escalan solos entre estos cortes. */

/* ===== ≤1024px — laptops y tablets en horizontal ===== */
@media(max-width:1024px){
  .hero-grid{gap:40px}
  .split{gap:44px}
  .feature-grid{gap:24px 32px}
  .product-grid,.tcards,.steps-grid,.price-grid,.blog-grid{gap:20px}
}

/* ===== ≤900px — tablet vertical: navegación móvil y layouts a 2 columnas ===== */
@media(max-width:900px){
  /* navegación */
  .menu,.header-cta{display:none}
  .hamb{display:flex}
  /* hero, splits y filas a una sola columna */
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:56px 0 64px}
  .split{grid-template-columns:1fr;gap:38px}
  .frow{grid-template-columns:1fr;gap:32px}
  .ph-grid{grid-template-columns:1fr;gap:32px}
  .page-hero.ph-split{text-align:center}
  .page-hero.ph-split .eyebrow,.page-hero.ph-split .pcta,.page-hero.ph-split .cred-strip{justify-content:center}
  .page-hero.ph-split p{margin-left:auto;margin-right:auto}
  .frow.rev .ftext{order:0}
  .band-cta .inner{flex-direction:column;align-items:flex-start;gap:22px}
  .chip-1{left:6px}.chip-2{right:6px}
  /* grids de contenido: 2 columnas en tablet (mejor que saltar directo a 1) */
  .product-grid,.feature-grid,.tcards,.steps-grid,.blog-grid,.faq-cats{grid-template-columns:repeat(2,1fr)}
  /* bento: en tablet las feat-wide vuelven a span normal para evitar overflow */
  .feature.feat-wide{grid-column:span 1}
  /* howit: 2 columnas en tablet */
  .howit-grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .howit-grid::before{display:none}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  /* banda de stats: 3 columnas, sin separadores verticales */
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .stat+.stat{border-left:0}
  /* vacantes */
  .job{flex-direction:column;align-items:flex-start}
  /* precios: el plan destacado primero, una columna centrada y legible */
  .price-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .price.featured{order:-1}
  /* trío de productos de la home */
  .product-grid.trio{grid-template-columns:1fr}
  .product-grid.trio .pcard.l,.product-grid.trio .pcard.r{border-radius:var(--radius)}
  .product-grid.trio .center{order:-1;transform:none}
  .step:not(:last-child)::after{display:none}
  /* footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .fbrand{grid-column:1/-1}
  .footer-top{flex-direction:column;align-items:flex-start}
  .newsletter{width:100%;min-width:0}
  .footer-bottom{justify-content:flex-start}
}

/* ===== ≤640px — móvil: todo a una columna, botones a lo ancho ===== */
@media(max-width:640px){
  .product-grid,.feature-grid,.tcards,.steps-grid,.blog-grid,.faq-cats,.team-grid,.howit-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* CTAs apilados y a lo ancho → mayor área táctil */
  .hero-cta,.pcta{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.pcta .btn{width:100%;justify-content:center}
  .chip{display:none}
}

/* ===== ≤400px — móvil pequeño: paddings internos más ajustados ===== */
@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-final .box{padding:44px 20px}
  .mock-body{padding:20px}
  .pcard,.step,.price,.form{padding-left:22px;padding-right:22px}
  .mission .art,.contadores .art{padding:22px}
}

/* ===== ≤360px — pantallas muy pequeñas: titular del hero ===== */
@media(max-width:360px){
  .hero h1{font-size:34px}
}