:root {
    --vf-dark: #1a173a;
    --vf-primary: #2d2a7d;
    --vf-violet: #6e65aa;
    --vf-sky: #55b2e4;
    --white: #ffffff;
    --bg: #ffffff;
    --bg-soft: #f7f8fc;
    --bg-warm: #f4f3fa;
    --text: #1a173a;
    --text-muted: #6b6885;
    --line: rgba(26, 23, 58, 0.10);
    --line-strong: rgba(26, 23, 58, 0.18);
    --gradient-brand: linear-gradient(120deg, var(--vf-primary) 0%, var(--vf-violet) 50%, var(--vf-sky) 100%);
    --gradient-anim: linear-gradient(120deg, #2d2a7d, #6e65aa, #55b2e4, #6e65aa, #2d2a7d);
    --green: #22b573;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 16px; line-height: 1.55;
    color: var(--text); background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; }
  .container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

  .grad-anim, .grad {
    background: var(--gradient-anim);
    background-size: 300% 300%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: grad-flow 8s ease-in-out infinite;
  }
  @keyframes grad-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  .tech-bg-light { position: relative; overflow: hidden; }
  .tech-bg-light::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(45, 42, 125, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(45, 42, 125, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none; z-index: 0;
  }
  .tech-bg-light::after {
    content: '';
    position: absolute; top: -200px; right: -100px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(85, 178, 228, 0.10), transparent 70%);
    pointer-events: none; z-index: 0;
  }
  .tech-bg-light > .container { position: relative; z-index: 2; }

  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.visible { opacity: 1; transform: none; }

  .section-header { max-width: 760px; margin-bottom: 56px; }
  .section-header h2 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(32px, 4.4vw, 52px);
    font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
    margin: 14px 0 16px;
  }
  .section-header h2 em { font-style: normal; }
  .section-header h2 em {
    background: var(--gradient-anim); background-size: 300% 300%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: grad-flow 8s ease-in-out infinite;
  }
  .section-header p { color: var(--text-muted); font-size: 17px; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--vf-primary); font-weight: 500;
  }
  .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gradient-brand); animation: pulse-dot 2s infinite; }
  @keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.6} }

  /* ============= NAV ============= */
  /* Acotado a body > nav: la regla suelta "nav { position: fixed }" también
     agarraba el menú del footer y lo mandaba a la parte de arriba de la
     pantalla, encima de todo. */
  body > nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 14px 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    max-width: 1320px; margin: 0 auto; padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
  }
  .nav-logo { height: 42px; width: auto; display: block; }
  .nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
  .nav-links a {
    text-decoration: none; font-size: 14.5px; font-weight: 500;
    color: var(--text); position: relative; transition: color .2s;
  }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
    background: var(--gradient-brand); transition: width .25s;
  }
  .nav-links a:hover::after { width: 100%; }
  .nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 999px;
    background: var(--gradient-anim); background-size: 300% 300%;
    animation: grad-flow 8s ease-in-out infinite;
    color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none;
    box-shadow: 0 6px 18px rgba(45, 42, 125, 0.28);
    transition: transform .2s, box-shadow .2s;
    border: none; cursor: pointer; font-family: 'Inter', sans-serif;
  }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(45, 42, 125, 0.36); }
  .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
  .mobile-menu-toggle svg { width: 26px; height: 26px; stroke: var(--text); }
  .mobile-menu {
    position: fixed; inset: 0; z-index: 200; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    transform: translateX(100%); transition: transform .35s ease;
  }
  .mobile-menu.open { transform: none; }
  .mobile-menu a { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 700; color: var(--text); text-decoration: none; }
  .mobile-menu-close { position: absolute; top: 22px; right: 26px; background: none; border: none; cursor: pointer; }
  .mobile-menu-close svg { width: 30px; height: 30px; stroke: var(--text); }

  /* ---- botones (los usa toda la landing) ---- */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px; border-radius: 999px;
    background: var(--gradient-anim); background-size: 300% 300%;
    animation: grad-flow 8s ease-in-out infinite;
    color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
    box-shadow: 0 10px 28px rgba(45, 42, 125, 0.32);
    transition: transform .2s, box-shadow .2s;
    border: none; cursor: pointer; font-family: 'Inter', sans-serif;
    white-space: nowrap;
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(45, 42, 125, 0.42); }
  .btn-primary svg, .btn-ghost svg { width: 18px; height: 18px; flex: none; }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px; border-radius: 999px;
    border: 1.5px solid var(--line-strong); color: var(--text);
    font-weight: 600; font-size: 16px; text-decoration: none;
    transition: border-color .2s, background .2s, transform .2s;
    background: rgba(255,255,255,.6); cursor: pointer; font-family: 'Inter', sans-serif;
    white-space: nowrap;
  }
  .btn-ghost:hover { border-color: var(--vf-violet); background: #fff; transform: translateY(-2px); }

  /* ============= HERO (v3) ============= */
  .hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100vh; min-height: 100svh;
    padding: clamp(104px, 12vh, 150px) 0 clamp(44px, 6vh, 72px);
    background: #0b0a1e; color: #fff;
  }
  /* el .container es hijo flex en columna: ocupa el ancho real de la pantalla */
  .hero > .container { width: 100%; }
  .hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: .55; filter: saturate(.9); }
  .hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 88% 78% at 50% 42%, #000 22%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 42%, #000 22%, transparent 76%);
  }
  .hero-veil {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(1200px 640px at 50% 8%, rgba(85,178,228,.20), transparent 60%),
      linear-gradient(180deg, rgba(11,10,30,.84) 0%, rgba(24,22,56,.70) 40%, rgba(11,10,30,.92) 100%),
      linear-gradient(118deg, rgba(45,42,125,.52) 0%, rgba(11,10,30,.12) 48%, rgba(85,178,228,.28) 100%);
  }

  .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1000px; margin: 0 auto; text-align: center; }

  /* ---- kicker editorial ---- */
  .hero-kick {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    max-width: 100%; margin: 0 auto clamp(20px, 2.8vw, 30px);
  }
  .hk-txt {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(9.5px, 1vw, 11.5px); line-height: 1.5;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.62); white-space: nowrap;
  }
  .hk-line {
    height: 1px; width: clamp(18px, 6vw, 72px); flex: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.32));
  }
  .hk-line:last-child { background: linear-gradient(90deg, rgba(255,255,255,.32), transparent); }

  /* ---- título ---- */
  .hero h1 {
    font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: clamp(34px, 7.2vw, 82px); line-height: 1.02;
    letter-spacing: -.04em; margin: 0 auto clamp(16px, 2vw, 22px);
    max-width: 15ch; text-wrap: balance;
  }
  .hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #7ec8f0, #b3a9ee 55%, #7ec8f0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  .hero-sub {
    font-size: clamp(15px, 1.45vw, 18.5px); line-height: 1.62;
    color: rgba(255,255,255,.78);
    max-width: 62ch; margin: 0 auto clamp(28px, 3.6vw, 38px);
    text-wrap: pretty;
  }

  /* ---- llamados a la acción ---- */
  .hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: clamp(44px, 6vw, 68px); }
  .hero .btn-primary {
    background: linear-gradient(100deg, #55b2e4, #6e65aa 58%, #7c74d6);
    animation: none; box-shadow: 0 14px 34px rgba(85,178,228,.28);
    padding: 17px 36px;
  }
  .hero .btn-primary:hover { box-shadow: 0 20px 44px rgba(85,178,228,.42); }
  .hero-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; color: rgba(255,255,255,.62); text-decoration: none;
    transition: color .2s;
  }
  .hero-link svg { width: 15px; height: 15px; }
  .hero-link:hover { color: #fff; }

  /* ---- carrusel de marcas ---- */
  .hero-marcas { margin-bottom: clamp(30px, 4vw, 44px); }
  .hm-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.42); margin-bottom: 20px;
  }
  .hm-wrap {
    overflow: hidden; min-width: 0;
    mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  }
  .hm-track { display: flex; width: max-content; align-items: center; animation: hm-scroll 42s linear infinite; }
  .hm-wrap:hover .hm-track { animation-play-state: paused; }
  .hm-set { display: flex; align-items: center; gap: clamp(38px, 5.5vw, 76px); padding-right: clamp(38px, 5.5vw, 76px); flex: none; }
  .hm-set img {
    height: clamp(22px, 2.5vw, 32px); width: auto; flex: none;
    filter: brightness(0) invert(1); opacity: .46;
    transition: opacity .25s;
  }
  .hm-set img:hover { opacity: .95; }
  @keyframes hm-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-33.3333%,0,0); } }

  /* ---- reforzador de confianza ---- */
  .vf-trust {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    max-width: 100%; padding: 9px 8px; border-radius: 999px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
  }
  .vf-ti {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 18px; white-space: nowrap;
    font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.88);
    background: none; border: none; font-family: 'Inter', sans-serif;
    text-decoration: none; position: relative;
  }
  .vf-ti b { font-weight: 800; color: #fff; }
  .vf-ti sup { font-size: .62em; top: -.45em; position: relative; }
  a.vf-ti, button.vf-ti { cursor: pointer; border-radius: 999px; transition: background .2s, color .2s; }
  a.vf-ti:hover, button.vf-ti:hover { background: rgba(255,255,255,.08); color: #fff; }
  .vf-div { width: 1px; height: 20px; background: rgba(255,255,255,.16); flex: none; }
  .vf-stars { color: #fbbc04; font-size: 14px; letter-spacing: 1.5px; line-height: 1; }
  .vf-ic-spark { color: #b3a9ee; font-size: 14px; }
  .vf-ic-check {
    display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
    background: #1f9d76; color: #fff; flex: none;
  }
  .vf-ic-check svg { width: 10px; height: 10px; }
  .vf-q {
    display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
    font-size: 9.5px; font-weight: 700; flex: none;
    background: rgba(255,255,255,.2); color: #fff;
  }

  /* tooltip (lo comparten el reforzador y cualquier otro dato con condiciones) */
  .hp-tipbox {
    position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px);
    width: min(360px, 86vw); padding: 14px 16px; border-radius: 14px;
    background: #16142f; border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 24px 52px rgba(0,0,0,.55);
    font-size: 12.5px; line-height: 1.55; font-weight: 400;
    color: rgba(255,255,255,.86); white-space: normal; text-align: left;
    opacity: 0; visibility: hidden; transition: opacity .22s, transform .22s, visibility .22s;
    z-index: 6; pointer-events: none;
  }
  .hp-tipbox::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: #16142f;
  }
  .vf-ti-tip.open .hp-tipbox { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  @media (hover: hover) { .vf-ti-tip:hover .hp-tipbox { opacity: 1; visibility: visible; transform: translate(-50%, 0); } }

  /* ---- móvil: nada cortado ---- */
  @media (max-width: 820px) {
    .hero { min-height: 100svh; padding: 96px 0 44px; }
    .hero-badge { padding: 8px 14px 8px 12px; gap: 8px; }
    .hero h1 { max-width: 100%; letter-spacing: -.035em; }
    .hero-sub { max-width: 46ch; }
    .hero-ctas { gap: 14px; }
    .hero .btn-primary { width: 100%; justify-content: center; padding: 16px 24px; }
    .hero-link { font-size: 13px; }
    /* una sola fila: se acortan los textos, no se apilan */
    .vf-trust {
      display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
      width: 100%; max-width: 100%; padding: 10px 4px; border-radius: 16px; gap: 0;
    }
    .vf-ti { padding: 3px 7px; font-size: 11.5px; gap: 6px; position: static; min-width: 0; }
    .vf-corto { display: none; }
    .vf-div { height: 16px; }
    .vf-stars { font-size: 11px; letter-spacing: .5px; }
    .vf-ic-check { width: 15px; height: 15px; }
    .vf-ic-check svg { width: 8px; height: 8px; }
    .vf-ic-spark { font-size: 12px; }
    /* el tooltip se centra sobre la barra completa: en pantallas angostas,
       anclarlo al botón lo sacaba de la pantalla */
    .vf-ti-tip .hp-tipbox { left: 50%; width: calc(100vw - 40px); max-width: 360px; }
  }
  @media (max-width: 420px) {
    .hero-kick { gap: 10px; }
    .vf-ti { font-size: 10.5px; padding: 3px 5px; gap: 5px; }
    .vf-trust { padding: 9px 2px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hm-track { animation: none; }
  }

  @keyframes hv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

  /* ============= SERVICIOS ============= */
  .services { padding: 110px 0; }
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .svc-card {
    position: relative; border-radius: 22px; padding: 34px 30px;
    background: #fff; border: 1px solid var(--line);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    overflow: hidden;
  }
  .svc-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-brand); opacity: 0; transition: opacity .25s;
  }
  .svc-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(26,23,58,.10); border-color: transparent; }
  .svc-card:hover::before { opacity: 1; }
  .svc-icon {
    width: 52px; height: 52px; border-radius: 14px; margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(45,42,125,.08), rgba(85,178,228,.12));
    display: flex; align-items: center; justify-content: center; font-size: 24px;
  }
  .svc-card h3 { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
  .svc-card p { font-size: 14.5px; color: var(--text-muted); }
  .svc-tag {
    position: absolute; top: 22px; right: 22px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em;
    padding: 4px 10px; border-radius: 999px; color: #fff;
    background: var(--gradient-brand);
  }
  .services-manifesto {
    margin-top: 60px; text-align: center; max-width: 880px; margin-left: auto; margin-right: auto;
    font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: clamp(21px, 2.8vw, 30px); letter-spacing: -0.02em; line-height: 1.3;
  }
  .services-manifesto span {
    background: var(--gradient-anim); background-size: 300% 300%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: grad-flow 8s ease-in-out infinite;
  }

/* ================================================= */

/* ============= PORTAFOLIO (dark) ============= */
  .portfolio {
    position: relative; padding: 120px 0 110px;
    background: var(--vf-dark); color: #fff; overflow: hidden;
  }
  .portfolio::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 56px 56px; pointer-events: none;
  }
  .portfolio .container { position: relative; z-index: 2; }
  .portfolio .section-header h2 { color: #fff; }
  .portfolio .section-header p { color: rgba(255,255,255,.62); }
  .portfolio .eyebrow { color: var(--vf-sky); }

  .pf-stats { display: flex; gap: 48px; flex-wrap: wrap; margin: -12px 0 52px; }
  .pf-stat b {
    display: block; font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em;
    background: linear-gradient(120deg, #8f88d8, #55b2e4);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .pf-stat span { font-size: 13.5px; color: rgba(255,255,255,.55); }

  .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1200px; }
  .pf-card {
    position: relative; border-radius: 22px; overflow: hidden;
    aspect-ratio: 4 / 3; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    cursor: pointer; display: block;
    transform-style: preserve-3d; transition: transform .18s ease-out, border-color .3s;
    will-change: transform;
  }
  .pf-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .6s ease; }
  .pf-card:hover img { transform: scale(1.06); }
  .pf-card:hover { border-color: rgba(85,178,228,.45); }
  .pf-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,23,58,.92) 0%, rgba(26,23,58,.25) 45%, transparent 70%);
    opacity: 0; transition: opacity .35s; display: flex; align-items: flex-end;
  }
  .pf-card:hover .pf-veil { opacity: 1; }
  .pf-meta { padding: 22px 24px; transform: translateY(12px); transition: transform .35s; width: 100%; }
  .pf-card:hover .pf-meta { transform: none; }
  .pf-meta h3 { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; color: #fff; }
  .pf-meta span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--vf-sky); }
  .pf-meta .pf-open {
    position: absolute; right: 20px; bottom: 20px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--gradient-brand); display: flex; align-items: center; justify-content: center;
  }
  .pf-meta .pf-open svg { width: 16px; height: 16px; stroke: #fff; }

  /* card CTA "tu marca" con isotipo */
  .pf-card.is-cta {
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
    text-decoration: none; text-align: center; padding: 30px;
    background:
      radial-gradient(340px 220px at 80% 0%, rgba(85,178,228,.22), transparent 70%),
      radial-gradient(300px 220px at 10% 100%, rgba(110,101,170,.25), transparent 70%),
      rgba(255,255,255,.04);
    border: 1px dashed rgba(85,178,228,.45);
  }
  .pf-card.is-cta:hover { border-style: solid; }
  .pf-card.is-cta .cta-iso { width: 74px; height: 74px; object-fit: contain; }
  .pf-card.is-cta h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 21px; color: #fff; line-height: 1.25; letter-spacing: -0.01em; }
  .pf-card.is-cta h3 em { font-style: normal; background: linear-gradient(120deg, #8f88d8, #55b2e4); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pf-card.is-cta .cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff;
    background: var(--gradient-anim); background-size: 300% 300%;
    animation: grad-flow 8s ease-in-out infinite;
  }
  .pf-more { text-align: center; margin-top: 46px; }

  .lightbox {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(15, 13, 34, .9); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center; padding: 40px;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .lightbox.open { opacity: 1; pointer-events: auto; }
  .lightbox img { max-width: min(920px, 92vw); max-height: 84vh; border-radius: 18px; box-shadow: 0 40px 120px rgba(0,0,0,.5); }
  .lightbox-close { position: absolute; top: 26px; right: 30px; background: none; border: none; cursor: pointer; }
  .lightbox-close svg { width: 32px; height: 32px; stroke: #fff; }

  /* ============= MAPA (fondo decorativo en Nosotros) ============= */
  .about { position: relative; }
  .about-mapbg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    opacity: .55;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 35%, transparent 78%);
  }
  .about-mapbg svg { width: 110%; height: auto; min-width: 900px; }
  .about > .container { position: relative; z-index: 2; }
  .mapdot { fill: var(--vf-sky); opacity: .55; }
  .mapdot.hq { fill: var(--vf-primary); opacity: .9; }
  .mapdot-ring {
    fill: none; stroke: var(--vf-sky); stroke-width: 1;
    transform-origin: center; transform-box: fill-box;
    animation: ring-pulse 3s ease-out infinite;
  }
  @keyframes ring-pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }

  /* ============= NOSOTROS ============= */
  .about { padding: 110px 0; }
  .about-top { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 64px; }
  .about-top .section-header { margin-bottom: 0; }
  .about-copy p { color: var(--text-muted); font-size: 16px; margin-bottom: 16px; }
  .about-copy p b { color: var(--text); }
  .about-collage { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; gap: 14px; }
  .about-collage img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 18px;
    border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(26,23,58,.10);
    transition: transform .3s;
  }
  .about-collage img:hover { transform: scale(1.03); }
  .about-collage .big { grid-column: span 2; grid-row: span 2; }
  .about-collage .tall { grid-row: span 2; }
  .about-industries { text-align: center; }
  .about-industries h3 { font-family: 'Manrope', sans-serif; font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
  .about-industries > p { color: var(--text-muted); font-size: 15px; margin-bottom: 28px; }
  .ind-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 900px; margin: 0 auto; }
  .ind-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: #fff;
    font-size: 14.5px; font-weight: 600; color: var(--text);
    transition: transform .2s, border-color .2s, box-shadow .2s;
  }
  .ind-chip:hover { transform: translateY(-4px) !important; border-color: var(--vf-violet); box-shadow: 0 12px 26px rgba(45,42,125,.14); }

  /* ============= PROCESO ============= */
  .process { padding: 110px 0; background: var(--bg-soft); }
  .process-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .step {
    position: relative; border-radius: 20px; background: #fff;
    border: 1px solid var(--line); padding: 26px 20px 24px;
    transition: transform .25s, box-shadow .25s;
  }
  .step:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(26,23,58,.08); }
  .step .s-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--vf-sky); font-weight: 500; display: block; margin-bottom: 12px; }
  .step .s-emoji { font-size: 26px; display: block; margin-bottom: 12px; }
  .step h3 { font-family: 'Manrope', sans-serif; font-size: 15.5px; font-weight: 700; margin-bottom: 7px; }
  .step p { font-size: 12.8px; color: var(--text-muted); }
  .step::after { content: ''; position: absolute; top: 50%; right: -14px; width: 12px; height: 2px; background: var(--line-strong); }
  .step:last-child::after { display: none; }

/* ================================================= */

/* ============= PLANES ============= */
  .plans { padding: 110px 0; }
  .plans .section-header { margin-left: auto; margin-right: auto; text-align: center; }
  .plans .eyebrow { justify-content: center; }
  .coupon-bar {
    max-width: 620px; margin: 0 auto 54px;
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 22px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(45,42,125,.06), rgba(85,178,228,.10));
    border: 1px dashed var(--vf-violet); font-size: 14.5px; text-align: center;
  }
  .coupon-code {
    font-family: 'JetBrains Mono', monospace; font-weight: 500; letter-spacing: .08em;
    background: #fff; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line-strong);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .coupon-code .ok { color: var(--green); font-weight: 700; font-size: 12px; }
  .plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
  .plan {
    position: relative; border-radius: 26px; background: #fff;
    border: 1px solid var(--line); padding: 38px 32px 34px;
    display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s;
  }
  .plan:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(26,23,58,.10); }
  .plan.featured {
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--gradient-anim) border-box;
    background-size: auto, 300% 300%;
    animation: grad-flow 8s ease-in-out infinite;
    box-shadow: 0 26px 60px rgba(45,42,125,.16);
  }
  .plan-flag {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    padding: 6px 18px; border-radius: 999px; white-space: nowrap;
    background: var(--gradient-brand); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
  }
  .plan-flag.alt { background: var(--vf-dark); }
  .plan h3 { font-family: 'Manrope', sans-serif; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
  .plan .plan-tag { font-size: 14px; color: var(--text-muted); margin: 6px 0 20px; }
  /* El bloque del precio reserva siempre el mismo alto, tenga o no tachado
     arriba. Así una tarjeta con promoción y otra sin ella siguen alineadas,
     y cuando no hay descuento el precio queda centrado en ese espacio en vez
     de dejar un hueco vacío encima. */
  .plan-precio-bloque {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 128px; margin: 2px 0 0;
  }
  .price-old { font-size: 14.5px; color: var(--text-muted); }
  .price-old s { opacity: .8; }
  .plan.sin-desc .price-old { display: none; }
  .plan-price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
  .plan-price .desde { font-size: 15px; color: var(--text-muted); font-weight: 600; }
  .plan-price b { font-family: 'Manrope', sans-serif; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; }
  .plan-price span { font-size: 14px; color: var(--text-muted); }
  .plan-iva { font-size: 12px; color: var(--text-muted); margin-bottom: 22px; }
  .plan ul { list-style: none; margin-bottom: 28px; flex: 1; }
  .plan ul li { position: relative; padding: 8px 0 8px 30px; font-size: 14.5px; border-bottom: 1px dashed var(--line); }
  .plan ul li:last-child { border-bottom: none; }
  .plan ul li::before {
    content: ''; position: absolute; left: 0; top: 11px;
    width: 18px; height: 18px; border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2a7d' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 11px; background-repeat: no-repeat; background-position: center;
    background-color: rgba(85,178,228,.14);
  }
  .plan ul li[data-tip] { cursor: help; }
  .plan ul li[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 26px; bottom: calc(100% + 2px); z-index: 20;
    width: 240px; padding: 10px 13px; border-radius: 10px;
    background: var(--vf-dark); color: #fff; font-size: 12px; line-height: 1.45;
    opacity: 0; pointer-events: none; transform: translateY(4px);
    transition: opacity .2s, transform .2s;
    box-shadow: 0 12px 30px rgba(26,23,58,.3);
  }
  .plan ul li[data-tip]:hover::after { opacity: 1; transform: none; }
  .plan-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 24px; border-radius: 999px; text-decoration: none;
    font-weight: 700; font-size: 15.5px; transition: transform .2s, box-shadow .2s;
    border: none; cursor: pointer; font-family: 'Inter', sans-serif; width: 100%;
  }
  .plan-cta.solid {
    background: var(--gradient-anim); background-size: 300% 300%;
    animation: grad-flow 8s ease-in-out infinite;
    color: #fff; box-shadow: 0 10px 26px rgba(45,42,125,.3);
  }
  .plan-cta.solid:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(45,42,125,.4); }
  .plan-cta.dark { background: var(--vf-dark); color: #fff; }
  .plan-cta.dark:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(26,23,58,.32); }
  .plan-foot { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
  .plan-foot span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
  .plan-foot svg { width: 14px; height: 14px; flex: none; }
      .plans-legal { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 40px; max-width: 760px; margin-left: auto; margin-right: auto; }

  /* ============= WIZARD DE COMPRA ============= */
  .wizard-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(15,13,34,.72); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .wizard-overlay.open { opacity: 1; pointer-events: auto; }
  .wizard {
    width: min(680px, 100%); max-height: 90vh; overflow-y: auto;
    background: #fff; border-radius: 26px; padding: 36px 38px 30px;
    box-shadow: 0 40px 120px rgba(0,0,0,.4);
    transform: translateY(16px); transition: transform .3s;
  }
  .wizard-overlay.open .wizard { transform: none; }
  .wz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 8px; }
  .wz-head h3 { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
  .wz-close { background: none; border: none; cursor: pointer; padding: 4px; }
  .wz-close svg { width: 26px; height: 26px; stroke: var(--text-muted); }
  .wz-steps { display: flex; gap: 8px; margin: 14px 0 26px; }
  .wz-steps .st {
    flex: 1; height: 5px; border-radius: 99px; background: var(--line);
    position: relative; overflow: hidden;
  }
  .wz-steps .st.on::after { content: ''; position: absolute; inset: 0; background: var(--gradient-brand); }
  .wz-pane { display: none; }
  .wz-pane.on { display: block; animation: wz-in .3s ease; }
  @keyframes wz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
  .wz-option {
    display: flex; gap: 14px; align-items: flex-start;
    border: 1.5px solid var(--line-strong); border-radius: 16px;
    padding: 16px 18px; margin-bottom: 12px; cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  .wz-option:hover { border-color: var(--vf-violet); }
  .wz-option.sel { border-color: var(--vf-primary); background: rgba(45,42,125,.04); }
  .wz-option input { margin-top: 4px; accent-color: var(--vf-primary); width: 17px; height: 17px; flex: none; }
  .wz-option .wo-body { flex: 1; }
  .wz-option .wo-title { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15px; font-family: 'Manrope', sans-serif; }
  .wz-option .wo-title .price { white-space: nowrap; }
  .wz-option .wo-title .price s { color: var(--text-muted); font-weight: 500; font-size: 13px; margin-right: 6px; }
  .wz-option .wo-desc { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
  .wz-badge {
    display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    padding: 3px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
    background: rgba(34,181,115,.12); color: var(--green);
  }
  .wz-guarantee {
    border-radius: 14px; padding: 14px 18px; margin: 6px 0 12px;
    background: rgba(34,181,115,.07); border: 1px solid rgba(34,181,115,.25);
    font-size: 13px;
  }
  .wz-guarantee b { color: var(--green); }
  .wz-guarantee button { background: none; border: none; color: var(--vf-primary); font-weight: 700; cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
  .wz-total {
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 2px solid var(--line); margin-top: 18px; padding-top: 16px;
  }
  .wz-total .lbl { font-size: 14px; color: var(--text-muted); }
  .wz-total .amt { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
  .wz-total .amt small { font-size: 13px; color: var(--text-muted); font-weight: 500; }
  .wz-save { text-align: right; font-size: 12.5px; color: var(--green); font-weight: 700; margin-top: 2px; }
  .wz-nav { display: flex; gap: 12px; margin-top: 22px; }
  .wz-nav .btn-primary, .wz-nav .btn-ghost { flex: 1; justify-content: center; padding: 15px 20px; font-size: 15px; }
  .wz-bank {
    border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg-soft);
    padding: 18px 20px; font-size: 14px; margin-top: 14px;
  }
  .wz-bank div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
  .wz-bank div:last-child { border-bottom: none; }
  .wz-bank b { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
  .wz-note { font-size: 12.5px; color: var(--text-muted); margin-top: 12px; text-align: center; }

  /* modal política */
  .policy-overlay {
    position: fixed; inset: 0; z-index: 450;
    background: rgba(15,13,34,.72); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .policy-overlay.open { opacity: 1; pointer-events: auto; }
  .policy-box {
    width: min(620px, 100%); max-height: 84vh; overflow-y: auto;
    background: #fff; border-radius: 22px; padding: 34px 36px;
  }
  .policy-box h3 { font-family: 'Manrope', sans-serif; font-size: 21px; font-weight: 800; margin-bottom: 16px; }
  .policy-box p, .policy-box li { font-size: 13.8px; color: var(--text-muted); margin-bottom: 10px; }
  .policy-box ol { padding-left: 20px; }

  /* ============= REGISTRO DE MARCA ============= */
  .imss { padding: 0 0 110px; }
  .imss-card {
    border-radius: 28px; padding: 52px 56px;
    background: var(--vf-dark); color: #fff;
    display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: center;
    position: relative; overflow: hidden;
  }
  .imss-card::before {
    content: ''; position: absolute; top: -180px; right: -120px; width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(85,178,228,.22), transparent 70%);
  }
  .imss-card h2 { font-family: 'Manrope', sans-serif; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 14px; }
  .imss-card p { color: rgba(255,255,255,.65); font-size: 15.5px; margin-bottom: 22px; }
  .imss-list { list-style: none; display: grid; gap: 10px; position: relative; z-index: 2; }
  .imss-list li { display: flex; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.85); }
  .imss-list li::before { content: '✓'; color: var(--vf-sky); font-weight: 700; }
  .imss-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
  .imss-price { font-size: 13.5px; color: rgba(255,255,255,.7); }
  .imss-price b { color: #fff; font-size: 17px; }
  .btn-light {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.25); color: #fff;
    font-weight: 600; font-size: 15px; text-decoration: none;
    transition: border-color .25s, background .25s, transform .2s;
    background: none; cursor: pointer; font-family: 'Inter', sans-serif;
  }
  .btn-light:hover { border-color: var(--vf-sky); background: rgba(85,178,228,.12); transform: translateY(-2px); }

  /* ============= TESTIMONIOS ============= */
  .testimonials { padding: 110px 0; background: var(--bg-soft); }
  .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .testi {
    border-radius: 22px; background: #fff; border: 1px solid var(--line);
    padding: 32px 30px; display: flex; flex-direction: column; gap: 16px;
    transition: transform .25s, box-shadow .25s;
  }
  .testi:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(26,23,58,.09); }
  .testi .stars { color: #f6b73c; letter-spacing: 2px; font-size: 15px; }
  .testi p { font-size: 14.5px; color: var(--text); }
  .testi .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .testi .who .avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    background: var(--gradient-brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px;
  }
  .testi .who b { display: block; font-size: 14px; }
  .testi .who span { font-size: 12.5px; color: var(--text-muted); }

  /* ============= FAQ ============= */
  .faq { padding: 110px 0; }
  .faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
  .faq-item { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
  .faq-item[open] { border-color: var(--vf-violet); box-shadow: 0 14px 36px rgba(26,23,58,.08); }
  .faq-item summary {
    list-style: none; cursor: pointer; padding: 22px 26px;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16.5px;
    display: flex; justify-content: space-between; align-items: center; gap: 18px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .fx {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    border: 1.5px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; color: var(--vf-primary); transition: transform .3s, background .3s, color .3s;
  }
  .faq-item[open] summary .fx { transform: rotate(45deg); background: var(--vf-primary); color: #fff; border-color: var(--vf-primary); }
  .faq-item .faq-body { padding: 0 26px 24px; font-size: 14.8px; color: var(--text-muted); }
  .faq-item .faq-body a { color: var(--vf-primary); font-weight: 600; }

  /* ============= CONTACTO ============= */
  .contact { padding: 110px 0; background: var(--bg-warm); }
  .contact-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
  .contact-side h2 { font-family: 'Manrope', sans-serif; font-size: clamp(30px, 3.8vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 14px 0 18px; }
  .contact-side h2 em { font-style: normal; background: var(--gradient-anim); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-flow 8s ease-in-out infinite; }
  .contact-side > p { color: var(--text-muted); margin-bottom: 28px; }
  .contact-quick { display: grid; gap: 14px; margin-bottom: 26px; }
  .cq-item {
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
    color: var(--text); transition: transform .2s, box-shadow .2s;
  }
  .cq-item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,23,58,.08); }
  .cq-item .cq-ic {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
    background: linear-gradient(135deg, rgba(45,42,125,.08), rgba(85,178,228,.14));
  }
  .cq-item b { display: block; font-size: 14.5px; }
  .cq-item span { font-size: 12.5px; color: var(--text-muted); }
  .contact-office { border-radius: 18px; overflow: hidden; position: relative; border: 1px solid var(--line); }
  .contact-office img { width: 100%; height: 210px; object-fit: cover; display: block; }
  .contact-office figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
    background: linear-gradient(to top, rgba(26,23,58,.85), transparent);
    color: #fff; font-size: 13px; font-weight: 600;
  }
  .contact-form-card {
    background: #fff; border-radius: 26px; border: 1px solid var(--line);
    padding: 42px 40px; box-shadow: 0 24px 60px rgba(26,23,58,.08);
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .field { margin-bottom: 18px; }
  .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
  .field input, .field select, .field textarea {
    width: 100%; padding: 14px 16px; border-radius: 12px;
    border: 1.5px solid var(--line-strong); background: var(--bg-soft);
    font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text);
    transition: border-color .2s, background .2s; outline: none;
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--vf-violet); background: #fff; }
  .field textarea { min-height: 120px; resize: vertical; }
  .field-error { display: block; font-size: 12px; color: #d64545; min-height: 16px; margin-top: 4px; }
  .form-submit {
    width: 100%; padding: 17px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--gradient-anim); background-size: 300% 300%;
    animation: grad-flow 8s ease-in-out infinite;
    color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px;
    box-shadow: 0 10px 26px rgba(45,42,125,.3); transition: transform .2s, box-shadow .2s;
  }
  .form-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(45,42,125,.4); }
  .form-submit:disabled { opacity: .6; cursor: wait; transform: none; }
  .form-meta { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 14px; }
  .form-status { text-align: center; font-size: 14px; font-weight: 600; margin-top: 12px; min-height: 20px; }
  .form-status.ok { color: var(--green); }
  .form-status.err { color: #d64545; }
  .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

  /* ============= OTROS SERVICIOS (acordeón, cierre elegante) ============= */
  .more-services {
    padding: 96px 0 100px; position: relative; overflow: hidden;
    background:
      radial-gradient(700px 400px at 90% 0%, rgba(85,178,228,.08), transparent 65%),
      radial-gradient(600px 400px at 5% 100%, rgba(110,101,170,.08), transparent 65%),
      var(--bg-warm);
  }
  .more-services::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(45,42,125,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(45,42,125,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
  }
  .ms-inner { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
  .ms-copy .eyebrow { margin-bottom: 4px; }
  .ms-copy h2 {
    font-family: 'Manrope', sans-serif; font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800; letter-spacing: -0.028em; line-height: 1.12; margin: 12px 0 14px;
  }
  .ms-copy h2 em { font-style: normal; background: var(--gradient-anim); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-flow 8s ease-in-out infinite; }
  .ms-copy p { font-size: 15px; color: var(--text-muted); max-width: 420px; }
  .ms-acc { display: grid; gap: 12px; }
  .ms-item {
    border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.8);
    backdrop-filter: blur(6px); overflow: hidden; transition: border-color .25s, box-shadow .25s;
  }
  .ms-item[open] { border-color: var(--vf-violet); box-shadow: 0 14px 36px rgba(26,23,58,.08); background: #fff; }
  .ms-item summary {
    list-style: none; cursor: pointer; padding: 18px 22px;
    display: flex; align-items: center; gap: 14px;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15.5px;
  }
  .ms-item summary::-webkit-details-marker { display: none; }
  .ms-item summary .ic { font-size: 19px; }
  .ms-item summary .fx {
    margin-left: auto; width: 26px; height: 26px; border-radius: 50%; flex: none;
    border: 1.5px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; color: var(--vf-primary); transition: transform .3s, background .3s, color .3s;
  }
  .ms-item[open] summary .fx { transform: rotate(45deg); background: var(--vf-primary); color: #fff; border-color: var(--vf-primary); }
  .ms-item .ms-body { padding: 0 22px 18px; font-size: 13.8px; color: var(--text-muted); }
  .ms-item .ms-body a { color: var(--vf-primary); font-weight: 700; text-decoration: none; }

  /* ============= CTA DELGADO ESPECIALISTA ============= */
  .cta-strip { padding: 0; }
  .cta-strip-inner {
    margin: 0 auto; max-width: 1320px; padding: 0 32px;
  }
  .cta-strip-box {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    padding: 26px 36px; border-radius: 20px;
    background: linear-gradient(120deg, rgba(45,42,125,.05), rgba(85,178,228,.09));
    border: 1px solid var(--line);
  }
  .cta-strip-box p { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(16px, 2vw, 20px); letter-spacing: -0.01em; }
  .cta-strip-box p span { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 13.5px; color: var(--text-muted); margin-top: 3px; }
  .btn-wa {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px; border-radius: 999px; text-decoration: none;
    background: #25d366; color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 10px 26px rgba(37,211,102,.35); transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
  }
  .btn-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(37,211,102,.45); }
  .btn-wa svg { width: 18px; height: 18px; fill: #fff; flex: 0 0 auto; }
  /* En pantallas muy angostas (iPhone SE, 320px) el botón con nowrap medía
     más que la pantalla y empujaba la página 8px hacia la derecha. */
  @media (max-width: 380px) {
    .cta-strip-inner { padding: 0 16px; }
    .cta-strip-box { padding: 22px 18px; }
    .btn-wa { white-space: normal; padding: 14px 20px; width: 100%; justify-content: center; }
  }

  /* ============= DIVISOR CIENTÍFICO 97% ============= */
  .stat97 {
    position: relative; padding: 84px 0; overflow: hidden;
    background: linear-gradient(120deg, #14122e 0%, var(--vf-dark) 55%, #232052 100%);
    color: #fff;
  }
  .stat97::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(85,178,228,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(85,178,228,.07) 1px, transparent 1px);
    background-size: 44px 44px;
  }
  .stat97::after {
    content: ''; position: absolute; left: -30%; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(85,178,228,.10), transparent);
    animation: scan-sweep 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes scan-sweep { 0%,100% { transform: translateX(0); } 50% { transform: translateX(320%); } }
  .stat97-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center;
    max-width: 1000px; margin: 0 auto; padding: 0 32px;
  }
  .stat97-ring { position: relative; width: 210px; height: 210px; flex: none; }
  .stat97-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .stat97-ring .track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 10; }
  .stat97-ring .bar {
    fill: none; stroke: url(#grad97); stroke-width: 10; stroke-linecap: round;
    stroke-dasharray: 565.5; stroke-dashoffset: 565.5;
    transition: stroke-dashoffset 2.2s cubic-bezier(.22,1,.36,1);
    filter: drop-shadow(0 0 8px rgba(85,178,228,.55));
  }
  .stat97-num {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .stat97-num b { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 52px; letter-spacing: -0.03em; line-height: 1;
    background: linear-gradient(120deg, #8f88d8, #55b2e4); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stat97-num span { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 6px; }
  .stat97-copy .kicker {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--vf-sky); display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  }
  .stat97-copy .kicker::before { content: ''; width: 26px; height: 1px; background: var(--vf-sky); }
  .stat97-copy h2 {
    font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.025em;
    font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; margin-bottom: 14px;
  }
  .stat97-copy h2 em { font-style: normal; background: linear-gradient(120deg, #8f88d8, #55b2e4); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stat97-copy blockquote {
    border-left: 2px solid rgba(85,178,228,.5); padding-left: 18px;
    font-size: 14.5px; color: rgba(255,255,255,.7); line-height: 1.65;
  }
  .stat97-copy blockquote footer { margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.45); }
  .stat97-meta { display: flex; gap: 26px; margin-top: 20px; flex-wrap: wrap; }
  .stat97-meta span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 7px; }
  .stat97-meta span i { width: 6px; height: 6px; border-radius: 50%; background: var(--vf-sky); animation: pulse-dot 2s infinite; }

  /* ============= WIZARD extras ============= */
  .wz-savings {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 16px; padding: 10px 16px; border-radius: 12px;
    background: rgba(34,181,115,.08); border: 1px dashed rgba(34,181,115,.4);
    font-size: 13.5px; font-weight: 700; color: var(--green);
  }
  .wz-upsell {
    border: 2px solid transparent; border-radius: 16px; padding: 16px 18px; margin-bottom: 12px;
    background: linear-gradient(#fff, #fff) padding-box, var(--gradient-anim) border-box;
    background-size: auto, 300% 300%; animation: grad-flow 8s ease-in-out infinite;
    cursor: pointer; display: flex; gap: 14px; align-items: flex-start;
    transition: box-shadow .2s;
  }
  .wz-upsell:hover { box-shadow: 0 14px 34px rgba(45,42,125,.16); }
  .wz-upsell.sel { box-shadow: 0 14px 34px rgba(45,42,125,.2); }
  .wz-upsell input { margin-top: 4px; accent-color: var(--vf-primary); width: 17px; height: 17px; flex: none; }
  .wz-upsell .wo-title { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 15px; font-family: 'Manrope', sans-serif; }
  .wz-upsell .wo-desc { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
  .wz-once {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px; margin-bottom: 6px;
    background: var(--gradient-brand); color: #fff;
  }
  .wz-file { margin-top: 14px; }
  .wz-file label {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 2px dashed var(--line-strong); border-radius: 14px; padding: 22px;
    cursor: pointer; text-align: center; font-size: 13.5px; color: var(--text-muted);
    transition: border-color .2s, background .2s;
  }
  .wz-file label:hover { border-color: var(--vf-violet); background: var(--bg-soft); }
  .wz-file label.has { border-color: var(--green); background: rgba(34,181,115,.06); color: var(--text); }
  .wz-file input { display: none; }

  /* ============= FOOTER ============= */
  footer { background: var(--vf-dark); color: rgba(255,255,255,.75); padding: 70px 0 36px; }
  /* Footer en tres columnas: quién somos, a dónde ir, dónde estamos.
     Sólo enlaces internos: quien llegó hasta aquí sigue en la página, no se
     manda a otro sitio. La barra final va centrada. */
  .footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1.1fr; gap: 56px;
    align-items: start; margin-bottom: 44px;
  }
  .footer-logo { height: 42px; width: auto; margin-bottom: 20px; display: block; }
  .footer-marca p { font-size: 14.2px; line-height: 1.7; color: rgba(255,255,255,.58); max-width: 380px; }
  .footer-grid h4 {
    font-family: 'Manrope', sans-serif; color: #fff; font-size: 12.5px;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px;
  }
  .footer-menu ul { list-style: none; display: grid; gap: 11px; }
  .footer-menu a {
    color: rgba(255,255,255,.62); text-decoration: none; font-size: 14px;
    transition: color .2s;
  }
  .footer-menu a:hover { color: var(--vf-sky); }
  .footer-hq p { font-size: 13.8px; line-height: 1.7; color: rgba(255,255,255,.55); margin: 0 0 8px; }
  .footer-hq a { color: var(--vf-sky); text-decoration: none; }
  .footer-hq a:hover { text-decoration: underline; }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center; font-size: 12.8px; color: rgba(255,255,255,.45);
  }
  .footer-legal { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
  .footer-bottom a, .footer-bottom button {
    background: none; border: none; padding: 0; color: rgba(255,255,255,.45);
    cursor: pointer; font-size: 12.8px; font-family: inherit; text-decoration: underline;
  }
  .footer-bottom a:hover, .footer-bottom button:hover { color: var(--vf-sky); }

  /* ============= RESPONSIVE ============= */
  @media (max-width: 1024px) {
    .services-grid, .pf-grid, .testi-grid, .plans-grid { grid-template-columns: repeat(2, 1fr); }
    .process-track { grid-template-columns: repeat(3, 1fr); }
    .step::after { display: none; }
    .imss-card { grid-template-columns: 1fr; padding: 42px 36px; }
    .contact-inner { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-marca { grid-column: 1 / -1; }
    .about-top { grid-template-columns: 1fr; }
    .ms-inner { grid-template-columns: 1fr; gap: 36px; }
    .stat97-inner { grid-template-columns: 1fr; text-align: center; gap: 36px; }
    .stat97-ring { margin: 0 auto; }
    .stat97-copy .kicker { justify-content: center; }
    .stat97-copy blockquote { text-align: left; }
  }
  @media (max-width: 680px) {
    .container { padding: 0 20px; }
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .mobile-menu-toggle { display: block; }
    .hero { padding: 130px 0 64px; }
    .services-grid, .pf-grid, .testi-grid, .plans-grid { grid-template-columns: 1fr; }
    .process-track { grid-template-columns: 1fr 1fr; }
    .pf-stats { gap: 28px; }
    .form-row { grid-template-columns: 1fr; }
    .contact-form-card { padding: 30px 22px; }
    .plan.featured { order: -1; }
    .wizard { padding: 28px 22px; }
    .about-collage { grid-auto-rows: 100px; }
    .cta-strip-box { padding: 22px 22px; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
    .footer-logo { margin-left: auto; margin-right: auto; }
    .footer-marca p { margin: 0 auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
  }

  /* ============= V4: overrides y nuevos componentes ============= */
  /* cupón en una sola fila, sin caja */
  .coupon-row {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    margin: 0 auto 50px; font-size: 15px; text-align: center;
    padding: 14px 0; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong);
  }
  .coupon-chip {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; font-size: 14px;
    background: #fff; padding: 8px 16px; border-radius: 10px;
    border: 1.5px dashed var(--vf-violet); transition: border-color .2s, transform .15s, box-shadow .2s;
  }
  .coupon-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(45,42,125,.12); }
  .coupon-chip .st { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .04em; color: var(--green); }
  .coupon-chip:not(.on) { border-color: var(--line-strong); opacity: .75; }
  .coupon-chip:not(.on) .st { color: var(--text-muted); }
  .cr-hint { font-size: 12px; color: var(--text-muted); }

  /* banda horizontal de naming */
  .naming-band {
    margin-top: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
    padding: 26px 30px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    transition: transform .25s, box-shadow .25s;
  }
  .naming-band:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(26,23,58,.09); }
  .naming-band .nb-icon {
    width: 56px; height: 56px; border-radius: 16px; flex: none; font-size: 26px;
    background: linear-gradient(135deg, rgba(45,42,125,.08), rgba(85,178,228,.14));
    display: flex; align-items: center; justify-content: center;
  }
  .naming-band .nb-body { flex: 1 1 340px; }
  .naming-band .nb-body h3 { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 4px; }
  .naming-band .nb-body p { font-size: 13.5px; color: var(--text-muted); }
  .naming-band .nb-price { text-align: right; }
  .naming-band .nb-price .plan-price b { font-size: 32px; }
  .naming-band .plan-cta { width: auto; padding: 14px 34px; flex: none; }

  .pf-stage { position: relative; }

  /* registro: watermark ® */
  .imss-r {
    position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 380px; line-height: 1;
    color: rgba(255,255,255,.05); pointer-events: none; user-select: none; z-index: 1;
  }

  /* franja + Servicios */
  .ms-strip {
    padding: 34px 0; background: var(--bg-warm);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .ms-strip-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
  .ms-plus {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 500; color: #fff; padding: 7px 16px; border-radius: 999px;
    background: var(--gradient-anim); background-size: 300% 300%; animation: grad-flow 8s ease-in-out infinite;
    white-space: nowrap;
  }
  .ms-sep { width: 1px; height: 22px; background: var(--line-strong); }
  .ms-list { font-size: 14px; color: var(--text-muted); font-weight: 500; text-align: center; }
  .ms-cta { font-size: 13.5px; font-weight: 700; color: var(--vf-primary); text-decoration: none; white-space: nowrap; }
  .ms-cta:hover { text-decoration: underline; }

  /* wizard: timer, resumen por item, modalidad/método */
  .wz-timer {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(214,69,69,.08); border: 1px solid rgba(214,69,69,.3); color: #d64545;
  }
  .wz-timer b { font-weight: 500; }
  .wz-subhead { font-weight: 700; font-family: 'Manrope', sans-serif; font-size: 14px; margin: 16px 0 10px; }
  .wz-metodo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wz-metodo .wz-option { margin-bottom: 0; }
  .wz-items { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 8px; }
  .wz-items .it { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line); }
  .wz-items .it:last-child { border-bottom: none; }
  .wz-items .it .nm { color: var(--text); }
  .wz-items .it .pr { white-space: nowrap; font-weight: 600; }
  .wz-items .it .pr s { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-right: 7px; }
  .wz-total { border-top-width: 2px; margin-top: 6px; }

  /* píldora de carrito guardado */
  .cart-pill {
    position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: 95;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 20px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--vf-dark); color: #fff; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
    box-shadow: 0 14px 40px rgba(26,23,58,.35);
    animation: pill-in .4s ease;
  }
  @keyframes pill-in { from { opacity: 0; transform: translate(-50%, -10px); } }
  .cart-pill b { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: #ffb3b3; }
  .cart-pill .go { color: var(--vf-sky); font-weight: 700; }
  .cart-pill:hover .go { text-decoration: underline; }

  @media (max-width: 680px) {
    .naming-band { padding: 22px; }
    .naming-band .nb-price { text-align: left; }
    .wz-metodo { grid-template-columns: 1fr; }
    .imss-r { font-size: 220px; right: -20px; }
    .ms-sep { display: none; }
  }

  /* ============= V5 ============= */
  .pf-showmore {
    display: none; margin: 26px auto 0;
    align-items: center; gap: 8px;
    padding: 13px 28px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid rgba(255,255,255,.25); background: none; color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  }
  .wz-garantia {
    border: 2px solid rgba(34,181,115,.45); border-radius: 16px;
    padding: 16px 18px; margin-bottom: 16px; cursor: pointer;
    background: rgba(34,181,115,.05);
    display: flex; gap: 14px; align-items: flex-start;
    transition: box-shadow .2s, background .2s;
  }
  .wz-garantia:hover { box-shadow: 0 12px 30px rgba(34,181,115,.15); }
  .wz-garantia.sel { background: rgba(34,181,115,.10); box-shadow: 0 12px 30px rgba(34,181,115,.18); }
  .wz-garantia input { margin-top: 4px; accent-color: var(--green); width: 17px; height: 17px; flex: none; }
  .wz-garantia .wo-title { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 15px; font-family: 'Manrope', sans-serif; }
  .wz-garantia .wo-desc { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
  .wz-garantia .g-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; background: var(--green); color: #fff; }
  .wz-tip { position: relative; cursor: help; border-bottom: 1px dotted var(--text-muted); }
  .wz-tip::after {
    content: attr(data-tip);
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
    width: 260px; padding: 10px 13px; border-radius: 10px;
    background: var(--vf-dark); color: #fff; font-size: 12px; line-height: 1.45; font-weight: 400;
    opacity: 0; pointer-events: none; transform: translateY(4px);
    transition: opacity .2s, transform .2s;
  }
  .wz-tip:hover::after { opacity: 1; transform: none; }
  .coupon-chip.lvl2 { border-color: #f6b73c; }
  .coupon-chip.lvl2 .st { color: #b7791f; }
  @media (max-width: 680px) {
    .pf-grid.collapsed .pf-card:nth-child(n+4) { display: none; }
    .pf-showmore { display: inline-flex; }
    .pf-showmore.done { display: none; }
    .naming-band .plan-cta { width: 100%; }
    .coupon-row { gap: 8px; font-size: 13.5px; }
    .wz-timer { font-size: 11px; padding: 5px 10px; }
    .about-collage { grid-auto-rows: 84px; gap: 10px; }
    .imss-ctas .btn-primary { width: 100%; justify-content: center; }
    .cta-strip-box { flex-direction: column; text-align: center; }
    .stat97 { padding: 64px 0; }
  }

  /* fixes de auditoría */
  .wz-head { flex-wrap: wrap; }
  .cart-pill { max-width: 94vw; white-space: nowrap; overflow: hidden; }
  @media (max-width: 680px) {
    .wz-metodo { gap: 10px; }
    .coupon-row .cr-hint { width: 100%; }
    .tk-meta { flex-wrap: wrap; }
  }

  .g-no {
    display: inline-block; margin-top: 10px; background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-muted); text-decoration: underline;
    padding: 0;
  }
  .g-no:hover { color: var(--text); }
  .wz-items .it.sum { border-bottom: none; padding: 4px 0; }
  .wz-items .it.sum .nm { color: var(--text-muted); font-size: 12.5px; }
  .wz-items .it.sum .pr { font-weight: 500; font-size: 13px; }
  .wz-items .it.sum:first-of-type { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }

  .g-title {
    font-size: 16px;
    background: var(--gradient-anim); background-size: 300% 300%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: grad-flow 8s ease-in-out infinite;
    border-bottom-color: var(--vf-violet);
  }
  .wz-garantia .g-tag {
    background: var(--gradient-anim); background-size: 300% 300%;
    animation: grad-flow 8s ease-in-out infinite;
    text-transform: none; letter-spacing: .02em; font-size: 11px;
  }

  /* ============= V8: wizard simple + contraste ============= */
  .wz-t { font-weight: 700; font-family: 'Manrope', sans-serif; margin-bottom: 14px; }
  .wz-sec {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted); margin: 18px 0 8px;
  }
  .wz-link {
    background: none; border: none; padding: 0; cursor: pointer; display: inline-block;
    color: var(--vf-primary); font-weight: 600; font-size: 13px; text-decoration: underline;
    font-family: 'Inter', sans-serif; margin-bottom: 6px;
  }
  /* fila compacta de adicional/mejora: 1 línea de descripción */
  .wz-row {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1.5px solid var(--line-strong); border-radius: 14px;
    padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  .wz-row:hover { border-color: var(--vf-violet); }
  .wz-row.sel { border-color: var(--vf-primary); background: rgba(45,42,125,.04); }
  .wz-row input { margin-top: 3px; accent-color: var(--vf-primary); width: 16px; height: 16px; flex: none; }
  .wz-row .rw { flex: 1; min-width: 0; }
  .wz-row .rt { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 14px; font-family: 'Manrope', sans-serif; }
  .wz-row .rt .price { white-space: nowrap; }
  .wz-row .rt .price s { color: var(--text-muted); font-weight: 500; font-size: 12px; margin-right: 5px; }
  .wz-row .rd { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
  .wz-row .rd .wz-info { color: var(--vf-primary); cursor: pointer; font-weight: 700; text-decoration: underline; }
  .wz-legal {
    display: none; font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
    background: var(--bg-soft); border-radius: 10px; padding: 10px 12px; margin-top: 8px;
  }
  .wz-legal.open { display: block; }
  /* garantía compacta (mantiene protagonismo sutil) */
  .wz-garantia { padding: 12px 14px; margin-bottom: 10px; }
  .wz-garantia .g-tag { margin-bottom: 4px; }
  .wz-garantia .wo-title { font-size: 14px; }
  .wz-garantia .wo-desc { font-size: 12.5px; }
  .g-title { font-size: 14.5px; }
  /* carrito */
  .wz-cart {
    border: 1px solid var(--line); border-radius: 16px; background: var(--bg-soft);
    padding: 16px 18px; margin-top: 18px;
  }
  .wz-cart .wz-items { border-top: none; margin-top: 0; padding-top: 0; }
  .wz-total { border-top: 2px solid var(--line-strong); margin-top: 8px; padding-top: 12px; }
  .wz-total .lbl small { font-weight: 400; color: var(--text-muted); }
  .wz-hoy {
    margin-top: 10px; padding: 10px 14px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line); font-size: 13px;
  }
  .wz-hoy b { font-family: 'Manrope', sans-serif; font-size: 16px; }
  .wz-hoy .hd { color: var(--text-muted); font-size: 12px; margin-top: 3px; line-height: 1.5; }
  /* términos */
  .wz-terms {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    margin-top: 16px; font-size: 13px; cursor: pointer;
  }
  .wz-terms input { accent-color: var(--vf-primary); width: 16px; height: 16px; flex: none; }
  /* contraste: gradiente SOLO en botones de dinero */
  .nav-cta, .form-submit, .hero .btn-primary, .pf-more .btn-primary, .wz-nav .btn-primary:not(.btn-pay) {
    background: var(--vf-dark); animation: none; box-shadow: 0 8px 22px rgba(26,23,58,.28);
  }
  .nav-cta:hover, .form-submit:hover, .hero .btn-primary:hover, .pf-more .btn-primary:hover, .wz-nav .btn-primary:not(.btn-pay):hover {
    box-shadow: 0 12px 30px rgba(26,23,58,.38);
  }
  .btn-pay {
    background: var(--gradient-anim) !important; background-size: 300% 300% !important;
    animation: grad-flow 8s ease-in-out infinite !important;
    box-shadow: 0 10px 28px rgba(45,42,125,.35) !important;
  }
  /* fatiga de features: SOLO móvil */
  .plan-more-feats { display: none; }
  @media (max-width: 680px) {
    .plan ul.collapsed li:nth-child(n+7) { display: none; }
    .plan-more-feats {
      display: inline-block; background: none; border: none; cursor: pointer; padding: 6px 0 0;
      color: var(--vf-primary); font-weight: 700; font-size: 13px; font-family: 'Inter', sans-serif;
      margin-bottom: 16px;
    }
    .plan ul:not(.collapsed) + .plan-more-feats { display: none; }
  }

  .wz-garantia .price { white-space: nowrap; flex: none; }
  .wz-garantia .price s { color: var(--text-muted); font-weight: 500; font-size: 12px; margin-right: 7px; }
  .wz-garantia .wo-title { gap: 14px; align-items: baseline; }

  /* ============= V9: wizard móvil fullscreen + compacto ============= */
  .wizard .price s { margin-right: 6px; }
  .wz-upsell .wo-title .price s, .wz-garantia .price s { margin-right: 6px; }
  .wz-badge { white-space: nowrap; }
  @media (max-width: 680px) {
    /* pantalla completa: cada pixel cuenta */
    .wizard-overlay { padding: 0; align-items: stretch; }
    .wizard {
      width: 100%; max-height: none; height: 100dvh; border-radius: 0;
      padding: 16px 16px 28px;
    }
    .wz-head { position: sticky; top: -16px; z-index: 5; background: #fff; padding: 12px 0 10px; margin: -16px 0 0; }
    .wz-head h3 { font-size: 18px; }
    .wz-head > div > span { display: none; } /* subtítulo fuera: gana espacio */
    .wz-close { padding: 8px; }
    .wz-close svg { width: 28px; height: 28px; }
    .wz-t { font-size: 15px; margin-bottom: 10px; }
    .wz-sec { margin: 14px 0 6px; }
    /* filas compactas */
    .wz-option, .wz-row { padding: 11px 12px; margin-bottom: 8px; border-radius: 12px; }
    .wz-option .wo-title, .wz-row .rt { font-size: 13.5px; flex-wrap: wrap; row-gap: 2px; }
    .wz-option .wo-desc, .wz-row .rd { font-size: 11.5px; }
    .wz-row .rt .price, .wz-option .wo-title .price { font-size: 13.5px; }
    .wz-badge { font-size: 9px; padding: 2px 8px; margin-left: 6px; }
    .wz-upsell { padding: 12px; margin-bottom: 8px; }
    .wz-upsell .wo-title { font-size: 13.5px; flex-wrap: wrap; row-gap: 2px; }
    .wz-upsell .wo-desc { font-size: 11.5px; }
    .wz-once { font-size: 9px; padding: 2px 8px; margin-bottom: 4px; }
    .wz-garantia { padding: 12px; }
    .wz-garantia .g-tag { font-size: 9.5px; padding: 3px 8px; line-height: 1.35; }
    .g-title { font-size: 13.5px; }
    .wz-garantia .wo-desc { font-size: 11.5px; }
    .g-no { font-size: 11px; margin-top: 8px; }
    /* carrito compacto */
    .wz-cart { padding: 12px 14px; margin-top: 14px; }
    .wz-items .it { font-size: 12px; padding: 6px 0; }
    .wz-items .it .pr s { font-size: 10.5px; margin-right: 4px; }
    .wz-total .amt { font-size: 24px; }
    .wz-hoy { padding: 9px 12px; font-size: 12px; }
    .wz-hoy b { font-size: 14.5px; }
    .wz-hoy .hd { font-size: 10.5px; }
    .wz-link { font-size: 12px; }
    .wz-savings { font-size: 12px; padding: 8px 12px; margin-top: 12px; }
    .wz-terms { font-size: 12px; margin-top: 12px; }
    .wz-bank { padding: 12px 14px; font-size: 12px; }
    .wz-file label { padding: 14px; font-size: 12px; }
    /* nav pegado abajo con botones cómodos */
    .wz-nav { gap: 10px; margin-top: 16px; }
    .wz-nav .btn-ghost { flex: 0 0 auto; padding: 13px 18px; font-size: 13.5px; }
    .wz-nav .btn-primary { flex: 1; padding: 14px 16px; font-size: 14.5px; }
    .wz-note { font-size: 11px; }
    .field label { font-size: 12px; }
    .field input, .field select, .field textarea { padding: 12px 14px; font-size: 16px; } /* 16px evita zoom iOS */
    .wz-steps { margin: 10px 0 16px; }
    .wz-timer { font-size: 10.5px; padding: 4px 9px; }
  }

  .wz-gnote {
    font-size: 12.5px; color: var(--text-muted); margin: 14px 0 4px;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(34,181,115,.06); border: 1px dashed rgba(34,181,115,.35);
  }
  .wz-gnote b { color: var(--green); }
  /* anti-cortes de texto en todo el sitio */
  h1, h2, h3, p, li, .wo-title, .rt { overflow-wrap: break-word; min-width: 0; }

  .wz-cup { margin-top: 4px; }
  .wz-cupbox { display: flex; gap: 8px; margin-top: 6px; }
  .wz-cupbox input {
    flex: 1; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line-strong);
    background: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .06em;
    text-transform: uppercase; outline: none; min-width: 0;
  }
  .wz-cupbox input:focus { border-color: var(--vf-violet); }
  .wz-cupbox button {
    padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--vf-dark); color: #fff; font-weight: 700; font-size: 13px; font-family: 'Inter', sans-serif;
  }
  .wz-cupmsg { display: block; font-size: 11.5px; margin-top: 5px; min-height: 14px; }
  /* Quitar el cupón: discreto, pero siempre a la vista. Un descuento que no
     se puede deshacer obliga a recargar la página para volver atrás, y ahí se
     pierde el carrito. */
  .wz-cupquita {
    background: none; border: 0; padding: 0 0 0 6px; font: inherit; font-size: 11.5px;
    color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  }
  .wz-cupquita:hover { color: #d64545; }

  .wz-upsell { position: relative; animation: grad-flow 8s ease-in-out infinite, hv-float 5s ease-in-out infinite; }
  .wz-upclose {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 13px; padding: 4px; line-height: 1;
  }
  .wz-upclose:hover { color: var(--text); }
  .wz-upreopen {
    background: none; border: 1px dashed var(--line-strong); border-radius: 999px;
    padding: 8px 16px; cursor: pointer; font-family: 'Inter', sans-serif;
    font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px;
  }
  .wz-upreopen:hover { color: var(--vf-primary); border-color: var(--vf-violet); }
  .wz-cup .wz-link { color: #a3a1b5; font-weight: 500; text-decoration: underline dotted; font-size: 12px; }
  .wz-cup .wz-link:hover { color: var(--text-muted); }

  .wz-sec-cart { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .wz-modo {
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 11px;
    letter-spacing: .02em; text-transform: none; padding: 4px 11px; border-radius: 999px;
  }
  .wz-modo.ok { color: var(--green); background: rgba(34,181,115,.12); }
  .wz-modo.warn { color: #b7791f; background: rgba(246,183,60,.16); }

  .wz-items .it.disc .nm, .wz-items .it.disc .pr { color: var(--green) !important; font-weight: 700; }

  /* El descuento cuelga del concepto de arriba: sin línea que los separe,
     sangrado y en chico. Se lee como una nota al pie del renglón, no como
     otro concepto de la compra. */
  .wz-items .it.it-desc {
    border-bottom: none; padding: 0 0 7px 14px; margin-top: -5px;
    font-size: 12px; border-top: none;
  }
  .wz-items .it.it-desc .nm { color: var(--text-muted); }
  .wz-items .it.it-desc .pr { color: var(--green); font-weight: 600; }
  .wz-items .it.it-desc-tog {
    width: 100%; background: none; border: none; border-bottom: 1px dashed var(--line);
    font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
    padding: 7px 0; color: var(--text-muted); align-items: center;
  }
  .wz-items .it.it-desc-tog .nm { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
  .wz-items .it.it-desc-tog .pr { color: var(--green); font-weight: 700; }
  .wz-items .it.it-desc-tog:hover .nm { color: var(--text); }

  .pay-methods {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    margin-top: 46px; font-size: 15.5px; color: var(--text);
  }
  .pay-methods svg { height: 30px; width: auto; display: block; }
  .plans-legal { margin-top: 18px; font-size: 14px; }

/* ================================================= */
/* Ajustes v2 — título de contacto en una sola fila   */
.contact-side h2.h2-una-fila {
  white-space: nowrap;
  font-size: clamp(24px, 3.4vw, 44px);
  letter-spacing: -.03em;
}
@media (max-width: 900px) {
  .contact-side h2.h2-una-fila { font-size: clamp(21px, 5.6vw, 34px); }
}
@media (max-width: 380px) {
  /* en pantallas muy angostas dejamos que respire en dos líneas */
  .contact-side h2.h2-una-fila { white-space: normal; }
}

/* ============================================================
   v2 — CARRUSEL DE PORTAFOLIO, SLIDER DE NOSOTROS Y FAQ EN DOS COLUMNAS
   ============================================================ */

/* ---------- botón principal sobre fondo oscuro ---------- */
.hero .btn-primary {
  background: linear-gradient(100deg, #55b2e4, #6e65aa 55%, #7c74d6);
  background-size: 100% 100%;
  animation: none;
  box-shadow: 0 12px 30px rgba(85, 178, 228, .30);
}
.hero .btn-primary:hover { box-shadow: 0 18px 40px rgba(85, 178, 228, .42); }

/* ---------- PORTAFOLIO: una sola fila, carrusel ---------- */
.pf-carousel { position: relative; }
.pf-track {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* 'start' y no 'center': con center, avanzar el ancho de una tarjeta caía
     entre dos puntos de anclaje y el navegador regresaba al inicio — por eso
     las flechas parecían no hacer nada en escritorio. */
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 4px 4px 18px;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.pf-track::-webkit-scrollbar { display: none; }
.pf-track.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.pf-track > .pf-card {
  flex: 0 0 clamp(258px, 27vw, 392px);
  aspect-ratio: 4 / 3; height: auto; margin: 0;
  scroll-snap-align: start;
}
.pf-track > .pf-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-track > .pf-card.is-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.pf-arrow {
  position: absolute; top: calc(50% - 9px); transform: translateY(-50%);
  z-index: 6; width: 46px; height: 46px; border-radius: 50%;
  pointer-events: auto;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .10); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s, opacity .2s, transform .2s;
}
.pf-arrow:hover { background: rgba(255, 255, 255, .22); transform: translateY(-50%) scale(1.06); }
.pf-arrow svg { width: 20px; height: 20px; }
.pf-arrow.prev { left: -8px; }
.pf-arrow.next { right: -8px; }
.pf-arrow[disabled] { opacity: .2; pointer-events: none; }
.pf-carousel { position: relative; padding: 0 6px; }
@media (max-width: 900px) {
  .pf-arrow { display: none; }
  .pf-track { gap: 14px; padding-bottom: 14px; }
  .pf-track > .pf-card { flex-basis: 78vw; }
}

/* ---------- NOSOTROS: slider (solo fotos horizontales) ---------- */
.about-slider {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 4 / 3; background: rgba(26, 23, 58, .06);
}
.as-track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.as-slide { flex: 0 0 100%; height: 100%; }
.as-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-slide.oculta { display: none; }
.as-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  display: flex; justify-content: center; gap: 7px;
}
.as-dots button {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .45); transition: width .25s, background .25s;
}
.as-dots button.on { width: 22px; border-radius: 4px; background: #fff; }
.as-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, .30); border: 1px solid rgba(255, 255, 255, .25);
  opacity: 0; transition: opacity .25s, background .2s;
}
.as-arrow svg { width: 17px; height: 17px; }
.as-arrow.prev { left: 12px; }
.as-arrow.next { right: 12px; }
.about-slider:hover .as-arrow { opacity: 1; }
.as-arrow:hover { background: rgba(0, 0, 0, .5); }
@media (hover: none) { .as-arrow { opacity: 1; } }
@media (max-width: 900px) { .about-slider { aspect-ratio: 16 / 10; } }

/* ---------- FAQ en dos columnas ---------- */
/* ---------- FAQ: dos columnas, a todo lo ancho y sin cajas ---------- */
.faq-list {
  max-width: none; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px); align-items: start;
}
.faq-item {
  border: 0; border-radius: 0; background: none; box-shadow: none;
  border-bottom: 1px solid var(--line);
  margin: 0; transition: none;
}
.faq-item[open] { border-color: var(--line-strong); box-shadow: none; }
.faq-item summary {
  align-items: flex-start; gap: 18px;
  padding: 22px 0; font-size: 16.5px; line-height: 1.4;
}
.faq-item summary .fx {
  margin-top: 1px; flex: none;
  background: none; border: 1px solid var(--line-strong); color: var(--text-muted);
}
.faq-item[open] summary .fx { background: var(--vf-primary); border-color: var(--vf-primary); color: #fff; }
.faq-item .faq-body { padding: 0 46px 24px 0; font-size: 15px; line-height: 1.65; }
.faq-item .faq-body p + p { margin-top: 10px; }

@media (max-width: 860px) {
  .faq-list { grid-template-columns: 1fr; gap: 0; }
  .faq-item summary { font-size: 15.5px; padding: 19px 0; gap: 14px; }
  .faq-item .faq-body { padding-right: 34px; font-size: 14.5px; }
}

/* ---------- testimonios: franja mientras no hay reseñas cargadas ---------- */
.testi-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: clamp(38px, 5vw, 58px) clamp(22px, 4vw, 48px);
  border-radius: 24px; text-align: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(85,178,228,.10), transparent 70%),
    var(--bg-soft);
}
.tv-num { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tv-num b {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(46px, 6vw, 68px); line-height: 1; letter-spacing: -.04em;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.testi-vacio .tv-stars { color: #fbbc04; font-size: 22px; letter-spacing: 4px; line-height: 1; }
.tv-fuente {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
}
.tv-copy { max-width: 52ch; font-size: 15.5px; line-height: 1.65; color: var(--text-muted); text-wrap: pretty; }
.testi-mas { text-align: center; margin-top: 34px; }

/* ============================================================
   v2 — TICKET DEL ASISTENTE: grupos, asterisco y anticipo
   ============================================================ */
.wz-grupo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); opacity: .8;
  padding: 14px 0 6px; border-bottom: 0;
}
.wz-items .wz-grupo:first-child { padding-top: 2px; }

.wz-total.wz-total-hoy {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--line);
}
.wz-total-hoy .lbl { font-weight: 700; color: var(--text); }
.wz-total-hoy .amt { color: var(--vf-primary); }

/* --- Cómo se paga: un solo bloque, plegado por defecto ------------------
   Lo esencial (cuánto hoy) siempre visible; el desglose y el porqué del
   precio sin descuento sólo si el cliente los pide. Así no hay dos avisos
   diciendo lo mismo ni un muro de texto sobre el botón de pagar. */
.wz-pagos {
  margin-top: 12px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.wz-pagos > summary {
  list-style: none; cursor: pointer; padding: 12px 14px;
  font-size: 13px; color: var(--text); display: flex;
  flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.wz-pagos > summary::-webkit-details-marker { display: none; }
.wz-pagos > summary b { font-weight: 700; }
.wz-pagos-ver {
  color: var(--vf-primary); font-size: 12px; font-weight: 600;
  white-space: nowrap; text-decoration: underline; text-underline-offset: 2px;
}
.wz-pagos[open] .wz-pagos-ver { text-decoration: none; opacity: .6; }
.wz-pagos-ver::after { content: ' ▾'; text-decoration: none; }
.wz-pagos[open] .wz-pagos-ver::after { content: ' ▴'; }
.wz-pagos-cuerpo { padding: 2px 14px 13px; border-top: 1px solid var(--line); }
.wz-pg {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; font-size: 13px; color: var(--text-muted);
  border-bottom: 1px dashed var(--line);
}
.wz-pg:last-of-type { border-bottom: 0; }
.wz-pg b { color: var(--text); font-weight: 700; white-space: nowrap; }
.wz-pagos-cuerpo p {
  margin-top: 10px; font-size: 12.2px; line-height: 1.6; color: var(--text-muted);
}
.wz-pagos-cuerpo p b { color: var(--text); }

/* Desglose de pagos: cada producto en el grupo que le toca.
   Mezclar en un solo "Hoy" la mitad de un logotipo y un naming completo no
   se puede seguir con la cabeza — hay que separar qué se paga entero y qué
   va con anticipo, y decir el porcentaje de cada pago. */
.wz-pg-t {
  margin: 13px 0 2px !important; font-size: 10.5px !important; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #a9a6ba !important;
}
.wz-pagos-cuerpo .wz-pg-t:first-child { margin-top: 4px !important; }
.wz-pg .pct { font-size: 11px; color: #a9a6ba; margin-left: 5px; }
.wz-pg-hoy {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: var(--bg-soft, #f6f6fb); border: 1px solid var(--line);
}
.wz-pg-hoy span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vf-primary);
}
.wz-pg-hoy b { font-family: 'Manrope', sans-serif; font-size: 17px; color: var(--text); white-space: nowrap; }
.wz-pg-sep { height: 1px; background: var(--line); margin: 13px 0; }

/* Recordatorio discreto del cobro, justo encima del botón de pagar. */
.wz-pay-total {
  text-align: center; font-size: 12.5px; color: var(--text-muted);
  margin: 0 0 10px; letter-spacing: .01em;
}
.wz-pay-total b { color: var(--text); font-weight: 700; }

/* El botón de pagar no lleva el degradado en movimiento: en el paso del
   cobro, un color que se desplaza solo se lee como algo que falla. */
.btn-pay {
  animation: none !important;
  background: linear-gradient(120deg, var(--vf-primary), var(--vf-violet)) !important;
  background-size: auto !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-pay:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 16px 34px rgba(45,42,125,.38); }
.btn-pay:active { transform: translateY(0); filter: brightness(.98); }
.btn-pay:disabled { opacity: .65; cursor: progress; transform: none; filter: none; }

/* persona física / moral */
.wz-persona-ops { display: flex; gap: 10px; flex-wrap: wrap; }
.wz-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--text);
  transition: border-color .2s, background .2s, color .2s;
}
.wz-chip input { accent-color: var(--vf-primary); margin: 0; }
.wz-chip.sel { border-color: var(--vf-primary); background: rgba(45,42,125,.06); }
.wz-persona-hint { display: block; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.lbl-opt { font-weight: 400; color: var(--text-muted); font-size: .9em; }

@media (max-width: 680px) {
  .wz-persona-ops .wz-chip { flex: 1; justify-content: center; padding: 11px 12px; font-size: 13.5px; }
  .wz-pagos > summary { font-size: 12.5px; padding: 11px 12px; }
  .wz-pagos-cuerpo { padding: 2px 12px 12px; }
}

/* ---------- FAQ: 3 filas visibles, el resto se degrada ---------- */
.faq-wrap { position: relative; }
.faq-wrap.cortado { max-height: 340px; overflow: hidden; }
.faq-wrap.cortado .faq-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(247,248,252,0), var(--bg-soft) 78%);
}
.faq-fade { display: none; }
.faq-wrap.cortado .faq-fade { display: block; }
.faq-mas { text-align: center; margin-top: 26px; }
.faq-mas .btn-ghost { padding: 13px 26px; font-size: 15px; }
.faq-mas .btn-ghost svg { transition: transform .25s; }
.faq-mas.abierto .btn-ghost svg { transform: rotate(180deg); }
@media (max-width: 860px) { .faq-wrap.cortado { max-height: 300px; } }

/* ---------- enlace de texto "Ver planes" ---------- */
.link-planes { margin-top: 14px; }
.link-planes a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; color: var(--vf-primary);
  text-decoration: none; border-bottom: 1px solid rgba(45,42,125,.28);
  padding-bottom: 2px; transition: gap .2s, border-color .2s;
}
.link-planes a:hover { gap: 11px; border-color: var(--vf-primary); }
.link-planes a span { transition: transform .2s; }
.link-planes a:hover span { transform: translateY(2px); }
.services .link-planes { text-align: center; }
.services .section-header + .link-planes { margin: -14px 0 34px; }

/* ---------- métodos de pago: una sola fila en móvil ---------- */
.pay-methods { flex-wrap: nowrap; }
@media (max-width: 680px) {
  .pay-methods {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: nowrap; overflow: visible;
  }
  .pay-methods > span { font-size: 11.5px; white-space: nowrap; }
  .pay-methods svg { height: 24px; width: auto; flex: none; }
}
@media (max-width: 420px) {
  .pay-methods { gap: 6px; }
  .pay-methods > span { font-size: 10.5px; }
  .pay-methods svg { height: 21px; }
}

/* ---------- contador: alerta cuando se acaba el tiempo ---------- */
.wz-timer.acabado { background: rgba(214,69,69,.12); border-color: rgba(214,69,69,.35); color: #d64545; }
.wz-timer.acabado b { color: #d64545; }
.coupon-row.acabado .cr-hint { color: #d64545; font-weight: 600; }
.coupon-chip.acabado { border-color: #d64545; }
.coupon-chip.acabado .st { color: #d64545; }

/* ---------- asistente: menos aire entre campos ---------- */
.wizard .field { margin-bottom: 12px; }
.wizard .field label { margin-bottom: 5px; font-size: 12.5px; }
.wizard .field input, .wizard .field select, .wizard .field textarea { padding: 11px 13px; font-size: 14.5px; }
.wizard .form-row { gap: 0 12px; margin-bottom: 0; }
.wizard .wz-t { margin-bottom: 10px; }
.wizard .field-error:empty { display: none; }
.wizard .wz-pane > p + p { margin-bottom: 12px; }

/* ---------- formulario de contacto: mismo criterio ---------- */
.contact-form-card .field { margin-bottom: 13px; }
.contact-form-card .field label { margin-bottom: 5px; }
.contact-form-card .field-error:empty { display: none; }
.contact-form-card textarea { min-height: 104px; }
.contact-form-card .form-submit { margin-top: 6px; }

/* ---------- etiqueta por línea del ticket ---------- */
.wz-items .it .nm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.5;
}
.wz-tag.contado { background: rgba(34,181,115,.12); color: #17845a; }
.wz-tag.anticipo { background: rgba(246,183,60,.16); color: #8a6414; }
.wz-tag.desc { background: rgba(85,178,228,.14); color: #1f6f9c; }

/* ============================================================
   v3 — servicios, portafolio, testimonios en carrusel
   ============================================================ */
.svc-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--vf-primary); text-decoration: none;
  opacity: .75; transition: opacity .2s, gap .2s;
}
.svc-link:hover { opacity: 1; gap: 9px; }
.svc-link span { transition: transform .2s; }
.svc-link:hover span { transform: translateY(2px); }
.svc-card { display: flex; flex-direction: column; }
.svc-card p { flex: 1; }

/* --- contador del portafolio con calificación --- */
.pf-stat-google { text-decoration: none; display: block; transition: transform .2s; }
.pf-stat-google:hover { transform: translateY(-2px); }
.pf-stat-google b { display: inline-flex; align-items: baseline; gap: 8px; }
.pf-stars { color: #fbbc04; font-size: .42em; letter-spacing: 2px; line-height: 1; }
.pf-stat-google span { display: inline-flex; align-items: center; gap: 7px; }
.pf-gico, .vf-gico { width: 1em; height: 1em; object-fit: contain; flex: none; }
.pf-gico { width: 15px; height: 15px; }
.vf-gico { width: 14px; height: 14px; }

/* --- testimonios: encabezado + carrusel de una fila --- */
.testi-carrusel { position: relative; }
.testi-track {
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 4px 4px 18px; scrollbar-width: none; cursor: grab;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-track.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.testi-track > .testi {
  flex: 0 0 clamp(280px, 31vw, 400px); scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column;
}
.testi-track > .testi p { flex: 1; }
.ts-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--text);
  background: #fff; border: 1px solid var(--line-strong);
  box-shadow: 0 8px 22px rgba(26,23,58,.10);
  transition: background .2s, opacity .2s, transform .2s;
}
.ts-arrow svg { width: 18px; height: 18px; }
.ts-arrow:hover { transform: translateY(-50%) scale(1.06); border-color: var(--vf-violet); }
.ts-arrow.prev { left: -14px; }
.ts-arrow.next { right: -14px; }
.ts-arrow[disabled] { opacity: .2; pointer-events: none; }
@media (max-width: 900px) {
  .ts-arrow { display: none; }
  .testi-track > .testi { flex-basis: 82vw; }
}

/* --- CONTACTO: las dos columnas parejas ---
   Medido en escritorio: la columna izquierda daba 717px de alto y la tarjeta
   del formulario 618. Esos 99px de diferencia son lo que hacía ver la sección
   chueca por abajo. Se reparten entre los dos arreglos posibles:

     · el formulario arranca a la altura del TÍTULO, no del "Contacto"
       de arriba  ..................................................  35px
     · la foto del estudio baja lo que falta  ......................  64px

   Sólo en escritorio. Abajo de 1024px las columnas se apilan y un margen
   superior dejaría un hueco tonto entre la foto y el formulario. */
@media (min-width: 1025px) {
  .contact-form-card { margin-top: 35px; }
}
.contact-office.alta img { height: clamp(210px, 22vw, 276px); object-fit: cover; width: 100%; }

/* --- FOOTER: el menú en dos columnas ---
   Con los siete enlaces en una sola tira, esa columna medía 275px contra 159
   de la marca y 145 del domicilio: el footer se veía desbalanceado, con un
   pico en medio. En dos columnas baja a ~150px y las tres quedan a la par.
   La columna del centro se ensancha para que "Preguntas frecuentes" quepa
   en un renglón. En móvil vuelve a una sola tira. */
.footer-grid { grid-template-columns: 1.5fr 1.35fr 1fr; }
.footer-menu ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px; row-gap: 11px;
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-menu ul { grid-template-columns: 1fr; }
}


/* --- contador de la promoción, visible en planes --- */
.coupon-timer {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; letter-spacing: .04em;
  background: rgba(45,42,125,.08); color: var(--vf-primary); border: 1px solid rgba(45,42,125,.16);
}
.coupon-timer.acabado { background: rgba(214,69,69,.10); color: #d64545; border-color: rgba(214,69,69,.30); }
@media (max-width: 680px) { .coupon-timer { font-size: 12px; padding: 4px 9px; } }

/* --- Nosotros con video --- */
.about-video iframe, .about-video video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

/* antispam Turnstile — sólo aparece si hay llaves configuradas */
.vf-ts { margin: 4px 0 16px; min-height: 0; }
.vf-ts:empty { display: none; }