/* ==========================================================================
   BLIXTOR · legacy.css  (TEMPORAL, 5 oct 2026)
   --------------------------------------------------------------------------
   Piezas de página del sistema anterior (tarjetas, bandas, demos, etc.).
   Solo la cargan las páginas que todavía no pasan al sistema nuevo
   (lib.js page({ legacy: true })). Cuando ninguna página la use, se borra.
   No añadir nada aquí: lo nuevo va en site.css (compartido) o en
   css/p/<página>.css (propio de una página). Ver DESIGN.md.
   ========================================================================== */

.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:calc(var(--container-wide) + var(--gutter) * 2)}
.container--narrow{max-width:calc(var(--container-narrow) + var(--gutter) * 2)}

.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}

.link-arrow{
  display:inline;font-weight:600;color:var(--accent-deep);
  text-decoration:underline;text-decoration-color:rgba(122,34,71,.35);text-underline-offset:.25em;
}
.link-arrow .icon{width:1.05em;height:1.05em;margin-left:.3em;vertical-align:-.18em;transition:transform .25s var(--ease-out)}
.link-arrow:hover{text-decoration-color:currentColor}
.link-arrow:hover .icon{transform:translateX(3px)}

.tag{
  display:inline-flex;align-items:center;gap:.35rem;width:fit-content;
  padding:.28rem .7rem;border-radius:var(--r-pill);
  background:var(--tint-2);color:var(--accent-deep);
  font-size:.8rem;font-weight:600;line-height:1.3;
}
.tag .icon{width:14px;height:14px}
.tag--quiet{background:rgba(36,16,22,.06);color:var(--ink-2)}

/* ---------- Secciones ---------- */
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.5rem,2rem + 2.5vw,4rem)}
.section--flush-top{padding-top:0}
.section--blush{background:var(--surface-2)}
.section--white{background:var(--surface)}
.section-head{max-width:48rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3.25rem)}
.section-head > p{font-size:var(--step-1);margin-top:.9rem;max-width:60ch}
.section-head--center{text-align:center;margin-inline:auto}
.section-head--center > p{margin-inline:auto}
.lead{font-size:var(--step-1);color:var(--ink-2);max-width:60ch}

/* Banda oscura: una por página como máximo */
.band-night{
  background:
    radial-gradient(ellipse 60% 55% at 88% 6%,rgba(176,48,96,.24) 0%,transparent 62%),
    radial-gradient(ellipse 50% 45% at 4% 96%,rgba(74,27,47,.55) 0%,transparent 65%),
    var(--night);
  color:var(--cream);
}
.band-night h2,.band-night h3,.band-night h4,.band-night strong{color:var(--cream)}
.band-night p,.band-night li{color:var(--malva)}
.band-night :focus-visible{outline-color:var(--cream)}

/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* ---------- Héroe de la portada ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(2.5rem,1.5rem + 5vw,5.5rem) clamp(3rem,2rem + 5vw,6rem)}
.hero__canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero__title{font-size:var(--step-6);line-height:1.02;letter-spacing:-.04em}
.hero__title .deck{
  display:block;margin-bottom:.55em;
  font-size:clamp(1.05rem,.92rem + .6vw,1.45rem);font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--plum);
}
.hero__title .main{display:block;max-width:17ch}
.hero__sub{font-size:var(--step-1);max-width:46ch;margin-top:1.35rem}
.hero__actions{margin-top:2rem}
.hero__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(300px,34vw,460px)}

/* Cohete (identidad de Blixtor; mismo dibujo que la 404) */
.rocket{width:clamp(150px,17vw,250px);position:relative}
.rocket-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 26px rgba(176,48,96,.45)) drop-shadow(0 6px 46px rgba(176,48,96,.2))}
.rk-p{
  position:absolute;left:var(--rx,50%);top:var(--ry,50%);
  width:calc(var(--rs,.5) * 5px);height:calc(var(--rs,.5) * 5px);
  border-radius:50%;background:rgba(216,156,156,.85);opacity:.5;
}
.rk-fi,.rk-fm,.rk-fo{transform-box:fill-box;transform-origin:top center}
.rk-glow-el,.rk-spark,.rk-smoke{transform-box:fill-box;transform-origin:center}
.rk-spark,.rk-smoke{opacity:0}

/* ---------- Héroe de páginas interiores ---------- */
.page-hero{padding-block:clamp(1.25rem,1rem + 1.5vw,2rem) clamp(3rem,2rem + 4vw,5.5rem)}
.page-hero .breadcrumbs{margin-bottom:clamp(1.5rem,1rem + 2vw,2.75rem)}
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.page-hero__grid--solo{grid-template-columns:minmax(0,1fr);max-width:52rem}
.page-hero h1{max-width:20ch}
.page-hero h1 .deck{
  display:block;margin-bottom:.5em;
  font-size:clamp(1rem,.9rem + .55vw,1.4rem);font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--plum);
}
.page-hero__lead{font-size:var(--step-1);max-width:50ch;margin-top:1.25rem}
.page-hero__actions{margin-top:2rem}
.page-hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}

/* ---------- Servicios de la portada (bento de tres) ---------- */
.svc-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:clamp(.75rem,1.3vw,1.1rem)}
.svc-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:1rem;
  min-height:clamp(280px,25vw,330px);
  padding:clamp(1.5rem,1.2rem + 1.4vw,2.35rem);
  border-radius:var(--r-xl);color:#fff;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.svc-card--meta{grid-column:span 7;grid-row:span 2;background:var(--wine)}
.svc-card--google{grid-column:span 5;background:var(--accent-deep)}
.svc-card--web{grid-column:span 5;background:var(--accent)}
.svc-card__title{font-size:clamp(1.85rem,1.4rem + 1.7vw,2.9rem);line-height:1;letter-spacing:-.04em;color:#fff}
.svc-card--meta .svc-card__title{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.6rem)}
.svc-card__title a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.svc-card__title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.svc-card__title .icon{width:.7em;height:.7em;opacity:.8;transition:transform .3s var(--ease-out)}
.svc-card__lede{color:rgba(255,255,255,.88);font-size:1.02rem;max-width:34ch}
.svc-card__list{list-style:none;display:grid;gap:.55rem;margin-top:auto}
.svc-card__list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.6rem;color:rgba(255,255,255,.9);font-size:.97rem;line-height:1.45}
.svc-card__list .icon{width:18px;height:18px;margin-top:.15rem;color:var(--rose)}
.svc-card--web .svc-card__list .icon{color:#fff}
.svc-card__more{position:relative;z-index:2;font-size:.92rem;color:rgba(255,255,255,.9)}
.svc-card__more a{color:#fff;font-weight:600}
.svc-card__art{position:absolute;right:-1.25rem;top:-1.25rem;z-index:-1;width:clamp(120px,13vw,190px);height:clamp(120px,13vw,190px);fill:currentColor;color:rgba(255,255,255,.08)}
.svc-card--meta .svc-card__art{top:auto;bottom:22%;right:-2.5rem;width:clamp(220px,26vw,360px);height:clamp(220px,26vw,360px);color:rgba(216,156,156,.12);transform:rotate(-8deg)}
.svc-card:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.svc-card :focus-visible{outline:none}
@media(hover:hover){
  .svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .svc-card:hover .svc-card__title .icon{transform:translate(3px,-3px)}
}

/* ---------- Para quién sí / para quién no ---------- */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.fit__col{border-radius:var(--r-lg);padding:clamp(1.4rem,1.1rem + 1.4vw,2.25rem);display:flex;flex-direction:column;gap:1.25rem}
.fit__col h3{font-size:var(--step-2)}
.fit__list{list-style:none;display:grid;gap:1rem}
.fit__list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:.8rem;align-items:start;line-height:1.55}
.fit__mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-top:.05rem}
.fit__mark .icon{width:15px;height:15px}
/* Sobre la banda oscura */
.band-night .fit__col{background:var(--night-2);border:1px solid rgba(243,233,227,.1)}
.band-night .fit__col--yes .fit__mark{background:var(--accent);color:#fff}
.band-night .fit__col--no .fit__mark{background:rgba(198,167,174,.16);color:var(--malva)}
/* Sobre fondo claro */
.fit--light .fit__col{background:var(--surface);border:1px solid var(--line)}
.fit--light .fit__col--no{background:var(--surface-3)}
.fit--light .fit__col--yes .fit__mark{background:var(--accent);color:#fff}
.fit--light .fit__col--no .fit__mark{background:rgba(36,16,22,.07);color:var(--ink-2)}
.fit__list strong{font-weight:600}

/* ---------- Pasos del proceso ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2rem)}
.steps--4{--cols:4}
.step{position:relative;display:flex;flex-direction:column;gap:.6rem}
.step__num{
  position:relative;z-index:1;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;flex:none;margin-bottom:.6rem;
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  box-shadow:0 0 0 6px rgba(176,48,96,.1);
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
/* Conector al siguiente paso. --seg va de 0 a 1 (motion.js lo mueve con el
   scroll); sin JS o con movimiento reducido vale 1 y el proceso se ve completo. */
.step:not(:last-child)::before,
.step:not(:last-child)::after{
  content:"";position:absolute;top:23px;left:58px;right:calc(-1 * clamp(1.25rem,2.4vw,2rem) + 10px);height:2px;border-radius:2px;
}
.step:not(:last-child)::before{background:var(--line-strong)}
.step:not(:last-child)::after{background:linear-gradient(90deg,var(--wine),var(--accent));transform-origin:left center;transform:scaleX(var(--seg,1))}
.steps.is-live .step:not(.is-on) .step__num{background:var(--bg);color:var(--plum);box-shadow:inset 0 0 0 2px var(--line-strong)}
.step h3{font-size:var(--step-2)}
.step p{max-width:42ch}
.step__gets{
  margin-top:auto;padding:.85rem 1rem;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  font-size:.95rem;line-height:1.5;color:var(--ink-body);
}
.step__gets strong{display:block;font-size:.82rem;color:var(--accent-deep);margin-bottom:.15rem}

/* Proceso largo (8 pasos): rejilla de tarjetas numeradas */
.timeline{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem);counter-reset:tl}
.timeline__item{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:.4rem 1rem;align-content:start;
  padding:clamp(1.2rem,1rem + .8vw,1.6rem);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
}
.timeline__num{
  grid-row:span 3;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--tint-2);color:var(--accent-deep);font-family:var(--font-display);font-weight:700;
}
.timeline__item h3{font-size:1.12rem;line-height:1.3;align-self:center}
.timeline__item p{font-size:.97rem;line-height:1.55}
.timeline__gets{font-size:.93rem;color:var(--ink-body);padding-top:.55rem;margin-top:.15rem;border-top:1px solid var(--line)}
.timeline__gets strong{color:var(--accent-deep)}

/* ---------- Tarjetas de caso con captura real ---------- */
.cases{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem)}
.case-card{
  --tone-bg:var(--surface-2);--tone-ink:var(--ink);--tone-ink-2:var(--ink-2);
  position:relative;isolation:isolate;overflow:hidden;grid-column:span 6;
  display:flex;flex-direction:column;
  min-height:clamp(400px,36vw,540px);
  padding:clamp(1.4rem,1.1rem + 1.4vw,2.25rem) clamp(1.4rem,1.1rem + 1.4vw,2.25rem) 0;
  border-radius:var(--r-xl);background:var(--tone-bg);color:var(--tone-ink);
  transition:box-shadow .35s var(--ease-out);
}
.case-card--7{grid-column:span 7}
.case-card--5{grid-column:span 5}
.case-card--12{grid-column:span 12;min-height:clamp(380px,32vw,500px)}
.case-card--wine{--tone-bg:var(--wine);--tone-ink:#fff;--tone-ink-2:rgba(243,233,227,.82)}
.case-card--deep{--tone-bg:var(--accent-deep);--tone-ink:#fff;--tone-ink-2:rgba(243,233,227,.85)}
.case-card--white{--tone-bg:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.case-card--blush{--tone-bg:var(--surface-2)}
.case-card__title{font-size:var(--step-3);line-height:1.12;letter-spacing:-.03em;color:var(--tone-ink);max-width:24ch}
.case-card__title a{color:inherit;text-decoration:none}
.case-card__title a::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.case-card__title .muted{color:var(--tone-ink-2);font-weight:600}
.case-card__meta{margin-top:.75rem;font-size:var(--step--1);color:var(--tone-ink-2);display:flex;flex-wrap:wrap;gap:.25rem .9rem}
.case-card__meta span{display:inline-flex;align-items:center;gap:.35rem}
.case-card__meta .icon{width:15px;height:15px}
.case-card__media{margin-top:auto;padding-top:clamp(1.5rem,3vw,2.25rem);display:flex;align-items:flex-end;gap:1rem}
.case-card__media .browser{flex:1;transform:translateY(10px);transition:transform .45s var(--ease-out)}
.case-card:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.case-card :focus-visible{outline:none}
@media(hover:hover){
  .case-card:hover{box-shadow:var(--shadow-lg)}
  .case-card:hover .browser{transform:translateY(0)}
}

/* Marco de navegador para capturas reales (la URL es la del sitio real) */
.browser{
  border-radius:14px 14px 0 0;overflow:hidden;background:#fff;
  border:1px solid rgba(36,16,22,.1);border-bottom:0;
  box-shadow:0 30px 60px -34px rgba(21,10,14,.55),0 8px 22px -14px rgba(21,10,14,.3);
}
.browser--full{border-radius:14px;border-bottom:1px solid rgba(36,16,22,.1)}
.browser__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#F7EFEB;border-bottom:1px solid rgba(36,16,22,.07)}
.browser__dot{width:9px;height:9px;border-radius:50%;background:rgba(36,16,22,.16)}
.browser__url{
  margin-left:10px;flex:1;max-width:min(320px,62%);height:21px;border-radius:999px;background:#fff;
  display:flex;align-items:center;gap:5px;padding:0 10px;
  font-size:.72rem;line-height:1;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.browser__url .icon{width:11px;height:11px;color:#3E8E5B}
.browser__screen{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:var(--surface-3)}

/* Marco de teléfono para capturas móviles */
.phone{
  position:relative;flex:none;width:clamp(120px,17%,190px);padding:7px;border-radius:28px;
  background:#1B0E13;box-shadow:0 34px 60px -30px rgba(21,10,14,.7),0 10px 24px -14px rgba(21,10,14,.45);
}
.phone__screen{display:block;width:100%;height:auto;aspect-ratio:390/780;object-fit:cover;object-position:top center;border-radius:22px;background:var(--surface-3)}

/* ---------- Quién opera tu cuenta ---------- */
.operator{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.operator__photo{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);max-width:440px}
.operator__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.operator__copy h2{margin-bottom:1rem}
.operator__copy p+p{margin-top:.9rem}
.operator__copy p{font-size:var(--step-1);max-width:52ch}
.operator__list{list-style:none;display:grid;gap:.6rem;margin-top:1.4rem}
.operator__list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.65rem;color:var(--ink-body)}
.operator__list .icon{width:20px;height:20px;color:var(--accent);margin-top:.15rem}
.operator__copy .btn-row{margin-top:1.75rem}


.faq-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.faq-layout__side{position:sticky;top:calc(var(--header-h) + 2rem)}
.faq-layout__side p{margin-top:.9rem;font-size:var(--step-1)}
.faq-layout__side .btn{margin-top:1.6rem}


/* ---------- Tarjeta de cierre (CTA) ---------- */
.cta-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:end;
  padding:clamp(2rem,1.4rem + 3.6vw,4.5rem);
  border-radius:var(--r-xl);background:var(--grad);color:#fff;box-shadow:var(--shadow-lg);
}
.cta-card::before{
  content:"";position:absolute;z-index:-1;width:640px;height:640px;left:-220px;bottom:-430px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,156,156,.34),transparent 62%);
}
.cta-card h2{color:#fff;font-size:clamp(1.9rem,1.4rem + 2.3vw,3.1rem);max-width:17ch}
.cta-card p{color:rgba(255,255,255,.88);font-size:var(--step-1);max-width:44ch;margin-top:1rem}
.cta-card__actions{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.cta-card__alt{font-size:.95rem;color:rgba(255,255,255,.88)!important;margin:0!important}
.cta-card__alt a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.cta-card :focus-visible{outline-color:#fff}

/* ---------- Datos del negocio ---------- */
.nap{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 3rem;align-items:center;
  padding:clamp(1.4rem,1.1rem + 1.4vw,2rem);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
}
.nap h2{font-size:var(--step-2)}
.nap address{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:.6rem;color:var(--ink-2)}
.nap address a,.nap address span{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;color:var(--ink);text-decoration:none}
.nap address a:hover{text-decoration:underline}
.nap .icon{width:18px;height:18px;color:var(--plum)}
.nap__claim{font-family:var(--font-display);font-weight:600;color:var(--accent-deep);font-size:1.05rem;letter-spacing:-.01em}

/* ---------- Qué incluye (entregables) ---------- */
.deliver{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 2.25rem}
.deliver li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.9rem;align-items:start;padding-block:.35rem}
.deliver__ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--tint);border:1px solid var(--line);color:var(--accent-deep)}
.deliver__ico .icon{width:21px;height:21px}
.deliver h3{font-size:1.06rem;line-height:1.3;letter-spacing:-.01em}
.deliver p{font-size:.97rem;line-height:1.55;margin-top:.2rem}

/* Bloque destacado + lista (layout de "incluye / no incluye") */
.split-panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1rem,2vw,1.5rem);align-items:start}
.panel{border-radius:var(--r-lg);padding:clamp(1.4rem,1.1rem + 1.4vw,2.25rem);background:var(--surface);border:1px solid var(--line)}
.panel--blush{background:var(--surface-2);border-color:rgba(176,48,96,.12)}
.panel--quiet{background:var(--surface-3);border-color:var(--line-ink)}
.panel h3{margin-bottom:1rem}
.panel > p{font-size:.98rem}
.ticks{list-style:none;display:grid;gap:.7rem}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.65rem;line-height:1.5;color:var(--ink-body)}
.ticks .icon{width:19px;height:19px;margin-top:.18rem;color:var(--accent)}
.ticks--no .icon{color:var(--ink-2)}
.ticks--no li{color:var(--ink-2)}

/* ---------- Tipos de campaña ---------- */
.kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem)}
.kind{
  display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.3rem,1.1rem + 1vw,1.9rem);
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
}
.kind--feature{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 2.5rem;background:var(--surface-2);border-color:rgba(176,48,96,.12)}
.kind__head{display:flex;align-items:center;gap:.75rem}
.kind__ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff;flex:none}
.kind__ico .icon{width:21px;height:21px}
.kind h3{font-size:1.25rem}
.kind p{font-size:.98rem}
.kind__when{font-size:.93rem;color:var(--ink-body);padding-top:.7rem;border-top:1px solid var(--line);margin-top:auto}
.kind__when strong{color:var(--accent-deep)}
.kinds--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- De la métrica a la decisión (banda oscura) ---------- */
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem)}
.metric-row{padding:clamp(1.25rem,1rem + 1vw,1.75rem);border-radius:var(--r-lg);background:var(--night-2);border:1px solid rgba(243,233,227,.1)}
.metric-row:first-child{grid-column:1 / -1}
.metric-row h3{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;color:var(--cream)}
.metric-row h3 .icon{width:20px;height:20px;color:var(--rose)}
.metric-row__q{margin-top:.75rem;font-family:var(--font-display);font-weight:500;font-size:clamp(1.12rem,1rem + .5vw,1.35rem);line-height:1.35;letter-spacing:-.012em;color:var(--cream)!important}
.metric-row p:last-child{margin-top:.6rem;font-size:.97rem}

/* ---------- Cómo se cobra: dos pagos separados ---------- */
.billing{
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-md);
  padding:clamp(1.6rem,1.2rem + 2.5vw,3.25rem);
}
.billing__origin{
  display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.1rem;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-weight:600;font-size:.95rem;
}
.billing__origin .icon{width:18px;height:18px;color:var(--rose)}
.billing__lines{display:block;width:100%;height:auto;margin:-2px 0 -4px;overflow:visible}
.billing__lines path{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round}
.billing__lines circle{fill:var(--accent)}
.billing__head{display:grid;justify-items:center;text-align:center}
.billing__pays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.25rem)}
.pay{border-radius:var(--r-md);padding:clamp(1.2rem,1rem + 1vw,1.75rem);display:flex;flex-direction:column;gap:.55rem}
.pay--platform{background:var(--bg);border:1px solid var(--line-strong)}
.pay--blixtor{background:var(--surface-2);border:1px solid rgba(176,48,96,.12)}
.pay h3{font-size:1.25rem;margin-top:.25rem}
.pay p{font-size:.97rem}
.pay ul{list-style:none;display:grid;gap:.45rem;margin-top:.35rem}
.pay li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.55rem;font-size:.95rem;color:var(--ink-body);line-height:1.5}
.pay li .icon{width:16px;height:16px;margin-top:.22rem;color:var(--accent)}
.pay__foot{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--ink)}
.billing__note{margin-top:1.5rem;font-size:.95rem;max-width:62ch}
.billing__factors{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}

/* ---------- Comparativa (tabla que se apila en móvil) ---------- */
.compare-wrap{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden}
.compare{width:100%;font-size:.98rem}
.compare caption{text-align:left;padding:1.1rem 1.25rem 0;font-size:.92rem;color:var(--ink-2)}
.compare th,.compare td{padding:1rem 1.25rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);background:var(--surface-3)}
.compare tbody th{font-weight:600;color:var(--ink);width:28%}
.compare td{color:var(--ink-body);line-height:1.55}
.compare .is-pick{color:var(--accent-deep);font-weight:600}

/* ---------- Aviso / nota ---------- */
.callout{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;max-width:44rem;
  padding:1.05rem 1.25rem;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);
}
.callout > .icon{width:22px;height:22px;color:var(--accent-deep);margin-top:.1rem}
.callout p{font-size:.97rem;color:var(--ink-body)}
.callout p+p{margin-top:.5rem}
.callout--example{background:var(--surface-3);border:1px dashed var(--line-strong)}
.callout--example .callout__label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--accent-deep);margin-bottom:.3rem}

/* ---------- Ilustraciones explicativas de los héroes ---------- */
.demo{position:relative;margin:0;justify-self:end;width:min(100%,520px)}
.demo__stage{position:relative;padding:0 0 2.2rem 2.2rem}
.demo__card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 44px 90px -44px rgba(74,27,47,.42),0 14px 34px -22px rgba(176,48,96,.3);padding:1rem;
}
.demo__cap{margin-top:1rem;font-size:.8rem;line-height:1.45;color:var(--ink-2);text-align:right}
.demo-toast{
  position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:.75rem;
  padding:.8rem 1.05rem .8rem .85rem;border-radius:16px;background:var(--ink);color:var(--cream);
  box-shadow:0 26px 50px -22px rgba(36,16,22,.6);
}
.demo-toast__ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;flex:none}
.demo-toast__ico .icon{width:17px;height:17px}
.demo-toast strong{display:block;font-size:.88rem;line-height:1.25;color:#fff}
.demo-toast small{display:block;font-size:.76rem;line-height:1.35;color:var(--malva)}

/* Demo de búsqueda (Google Ads) */
.serp__bar{
  display:flex;align-items:center;gap:.65rem;min-height:52px;padding:.7rem 1.1rem;border-radius:var(--r-pill);
  background:var(--bg);border:1px solid var(--line);font-size:.95rem;color:var(--ink);
}
.serp__bar .icon{width:18px;height:18px;color:var(--plum)}
.serp__q{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp__caret{display:inline-block;width:2px;height:1.15em;margin-left:1px;background:var(--accent);opacity:0;flex:none}
.is-typing .serp__caret{opacity:1;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.serp__results{padding:1rem .25rem .25rem}
.serp-ad{padding:1rem 1.05rem 1.1rem;border-radius:14px;background:linear-gradient(180deg,rgba(176,48,96,.07),rgba(176,48,96,.015));border:1px solid rgba(176,48,96,.24)}
.serp-ad__label{font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.serp-ad__site{display:flex;align-items:center;gap:.6rem;margin:.55rem 0}
.serp-ad__fav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font:700 .8rem/1 var(--font-display);flex:none}
.serp-ad__site strong{display:block;font-size:.84rem;line-height:1.2;color:var(--ink)}
.serp-ad__site small{display:block;font-size:.74rem;line-height:1.3;color:var(--ink-2)}
.serp-ad__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,.95rem + .3vw,1.14rem);line-height:1.3;color:var(--accent-deep)}
.serp-ad__desc{font-size:.85rem;line-height:1.5;margin-top:.35rem}
.serp-ad__links{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem}
.serp-ad__links span{position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.36rem .8rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:#fff;font-size:.78rem;font-weight:600;color:var(--accent-deep)}
.serp-ad__links .icon{width:14px;height:14px}
.serp-ad__links .is-pressed{background:var(--accent);border-color:var(--accent);color:#fff}
.serp__ring{position:absolute;inset:-5px;border-radius:inherit;border:2px solid var(--accent);opacity:0;pointer-events:none}
.serp__organic{display:grid;gap:1rem;padding:1.15rem .65rem .5rem}
.serp__organic span{display:grid;gap:.45rem}
.serp__organic i{display:block;height:8px;border-radius:99px;background:rgba(36,16,22,.08)}
.serp__organic i:first-child{width:38%;background:rgba(36,16,22,.12)}
.serp__organic i:nth-child(2){width:86%}
.serp__organic i:nth-child(3){width:64%}

/* Demo de anuncio de clic a WhatsApp (Meta Ads) */
.feed-ad__head{display:flex;align-items:center;gap:.6rem;padding:.25rem .25rem .75rem}
.feed-ad__avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font:700 .85rem/1 var(--font-display);flex:none}
.feed-ad__head strong{display:block;font-size:.86rem;line-height:1.2;color:var(--ink)}
.feed-ad__head small{display:block;font-size:.74rem;color:var(--ink-2)}
.feed-ad__media{
  position:relative;overflow:hidden;border-radius:14px;aspect-ratio:4/3;
  background:
    radial-gradient(ellipse 70% 60% at 75% 25%,rgba(216,156,156,.55),transparent 60%),
    radial-gradient(ellipse 60% 70% at 15% 90%,rgba(176,48,96,.55),transparent 60%),
    var(--wine);
  display:flex;align-items:flex-end;padding:1rem;
}
.feed-ad__media p{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,1rem + .7vw,1.45rem);line-height:1.15;letter-spacing:-.02em;color:#fff;max-width:14ch}
.feed-ad__cta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.75rem;padding:.7rem .8rem;border-radius:12px;background:var(--surface-3)}
.feed-ad__cta small{font-size:.76rem;color:var(--ink-2);line-height:1.3}
.feed-ad__btn{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap}
.feed-ad__btn .icon{width:15px;height:15px}
.feed-ad__btn.is-pressed{background:var(--accent)}
.demo[data-demo="chat"] .demo__stage{padding-bottom:3.25rem}
.chat{position:absolute;right:-6px;bottom:0;z-index:2;width:min(270px,64%);border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(36,16,22,.55);overflow:hidden}
.chat__head{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;background:var(--ink);color:#fff;font-size:.8rem;font-weight:600}
.chat__head .icon{width:16px;height:16px;color:var(--rose)}
.chat__body{padding:.75rem;display:grid;gap:.45rem;background:var(--surface-3)}
.chat__msg{justify-self:end;max-width:92%;padding:.55rem .7rem;border-radius:12px 12px 4px 12px;background:var(--surface-2);font-size:.8rem;line-height:1.4;color:var(--ink)}
.chat__msg--in{justify-self:start;border-radius:12px 12px 12px 4px;background:#fff;border:1px solid var(--line)}

/* Anatomía de una landing (diagrama) */
.anatomy{position:relative;justify-self:center;width:min(100%,460px);display:flex;justify-content:flex-start;padding-right:150px}
.anatomy__phone{position:relative;width:min(250px,64vw);padding:9px;border-radius:34px;background:#1B0E13;box-shadow:var(--shadow-lg)}
.anatomy__screen{border-radius:26px;background:var(--bg);padding:1.1rem .9rem 1.2rem;display:flex;flex-direction:column;gap:.75rem;min-height:400px}
.anatomy__logo{width:56px;height:10px;border-radius:99px;background:rgba(36,16,22,.18)}
.anatomy__h{position:relative;font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.anatomy__p{display:grid;gap:.4rem}
.anatomy__p i{display:block;height:7px;border-radius:99px;background:rgba(36,16,22,.1)}
.anatomy__p i:nth-child(2){width:84%}
.anatomy__p i:nth-child(3){width:62%}
.anatomy__offer{position:relative;border-radius:14px;background:var(--surface-2);padding:.8rem;display:grid;gap:.35rem}
.anatomy__offer strong{font-family:var(--font-display);font-size:.95rem;color:var(--accent-deep)}
.anatomy__offer i{display:block;height:6px;border-radius:99px;background:rgba(122,34,71,.18)}
.anatomy__offer i+i{width:70%}
.anatomy__proof{position:relative;display:flex;gap:.4rem}
.anatomy__proof i{flex:1;height:38px;border-radius:10px;background:rgba(36,16,22,.06)}
.anatomy__wa{position:relative;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:.85rem;font-weight:600}
.anatomy__wa .icon{width:17px;height:17px}
/* Cada nota se ancla a su pieza: sale del borde derecho del teléfono */
.anatomy__note{
  position:absolute;top:50%;left:calc(100% + 1.1rem);transform:translateY(-50%);
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--font-body);font-size:.84rem;font-weight:600;letter-spacing:0;color:var(--ink);
}
.anatomy__note::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--accent)}

/* ---------- Composición de capturas (héroe de páginas web) ---------- */
.showcase{position:relative;justify-self:end;width:min(100%,600px);padding-bottom:2.5rem}
.showcase .browser{border-radius:14px;border-bottom:1px solid rgba(36,16,22,.1)}
.showcase .phone{position:absolute;right:-.5rem;bottom:0;width:clamp(110px,30%,170px)}
.showcase__cap{margin-top:1rem;font-size:.82rem;color:var(--ink-2)}

/* ---------- Portafolio (lista con capturas) ---------- */
.portfolio{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.work{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.25rem,3vw,2.75rem);align-items:center;
  padding:clamp(1.25rem,1rem + 1.5vw,2.25rem);border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);
  transition:box-shadow .35s var(--ease-out),border-color .35s;
}
.work:nth-child(even){background:var(--surface-3)}
.work h3{font-size:var(--step-3);letter-spacing:-.03em}
.work h3 a{color:inherit;text-decoration:none}
.work h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.work__meta{margin-top:.6rem;font-size:var(--step--1);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.work__meta span{display:inline-flex;align-items:center;gap:.35rem}
.work__meta .icon{width:15px;height:15px;color:var(--plum)}
.work p{margin-top:.9rem;max-width:48ch}
.work__links{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.2rem}
.work__links a{font-size:.95rem}
.work__site{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong)}
.work__site:hover{color:var(--ink)}
.work__site .icon{width:15px;height:15px}
.work:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.work :focus-visible{outline:none}
@media(hover:hover){.work:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}}

/* ---------- Velocidad y SEO / bloques de cualidades ---------- */
.qualities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem)}
.quality{padding:clamp(1.25rem,1rem + 1vw,1.75rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.quality .icon{width:26px;height:26px;color:var(--accent);margin-bottom:.9rem}
.quality h3{font-size:1.12rem}
.quality p{font-size:.96rem;margin-top:.4rem}
.quality--wide{grid-column:span 2;background:var(--surface-2);border-color:rgba(176,48,96,.12)}
/* La última tarjeta cierra la rejilla a todo lo ancho (6 tarjetas con una doble
   dejaban la sexta sola en su fila): icono a un lado y texto al otro. */
.quality--full{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.1rem;align-items:start}
.quality--full .icon{grid-row:span 2;margin:.15rem 0 0}
.quality--wide p,.quality--full p{max-width:64ch}

/* ---------- Tarjetas de decisión (página completa vs landing) ---------- */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem)}
.choice{display:flex;flex-direction:column;gap:.8rem;padding:clamp(1.3rem,1.1rem + 1vw,1.9rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.choice--pick{background:var(--wine);border-color:var(--wine);color:var(--cream)}
.choice--pick h3,.choice--pick strong{color:#fff}
.choice--pick p,.choice--pick li{color:var(--malva)}
.choice--pick .ticks .icon{color:var(--rose)}
.choice h3{font-size:1.3rem}
.choice p{font-size:.97rem}
.choice .ticks{margin-top:.25rem}
.choice .ticks li{font-size:.95rem}
.choice__foot{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);font-size:.93rem}
.choice--pick .choice__foot{border-top-color:rgba(243,233,227,.16)}
.choice--pick .link-arrow{color:#fff;text-decoration-color:rgba(255,255,255,.45)}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1rem,2vw,1.5rem);align-items:stretch}
.contact-card{display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.5rem,1.2rem + 1.6vw,2.5rem);border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line)}
.contact-card--primary{background:var(--wine);border-color:var(--wine);color:var(--cream)}
.contact-card--primary h2,.contact-card--primary strong{color:#fff}
.contact-card--primary p{color:var(--malva)}
.contact-card h2{font-size:var(--step-3)}
.contact-card__big{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);letter-spacing:-.02em;color:inherit;text-decoration:none;word-break:break-word}
.contact-card__big:hover{text-decoration:underline}
.contact-card .btn{align-self:flex-start;margin-top:auto}
.contact-card__hint{margin-top:.25rem;padding-top:1rem;border-top:1px solid rgba(243,233,227,.16);font-size:.95rem}
.contact-card__hint strong{display:block;color:#fff;margin-bottom:.35rem}
.contact-card__hint ul{list-style:none;display:grid;gap:.3rem;color:var(--malva)}
.contact-card__hint li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rose);margin:0 .6rem .12rem 0}
.contact-list{list-style:none;display:grid;gap:.6rem}
.contact-list a,.contact-list span{display:inline-flex;align-items:center;gap:.6rem;min-height:40px;color:var(--ink);text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.contact-list .icon{width:20px;height:20px;color:var(--plum)}

/* ---------- Blog ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
/* Los filtros del blog solo existen con JS. La clase .js la pone el <head>
   antes del primer pintado, así que la barra no aparece después y no mueve
   la lista (con el atributo hidden la destapaba site.js y causaba CLS). */
.chips[data-filters]{display:none}
.js .chips[data-filters]{display:flex}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.45rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-size:.93rem;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;
}
.chip:hover{border-color:var(--plum)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip__count{font-size:.8rem;opacity:.7}
.post-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
.post-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.75rem;
  padding:clamp(1.3rem,1.1rem + 1vw,1.9rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  transition:box-shadow .3s var(--ease-out),border-color .3s;
}
.post-card--feature{grid-column:1 / -1;background:var(--wine);border-color:var(--wine);color:var(--cream);padding:clamp(1.6rem,1.2rem + 2vw,2.75rem)}
.post-card.post-card--feature h2,.post-card.post-card--feature h3{color:#fff;font-size:var(--step-4);max-width:24ch}
.post-card--feature p{color:var(--malva);font-size:var(--step-1)}
.post-card--feature .tag{background:rgba(255,255,255,.14);color:#fff}
.post-card--feature .post-card__meta{color:var(--malva)}
.post-card h2,.post-card h3{font-size:var(--step-2);line-height:1.2}
.post-card h2 a,.post-card h3 a{color:inherit;text-decoration:none}
.post-card h2 a::after,.post-card h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.post-card p{font-size:.98rem}
.post-card__meta{margin-top:auto;padding-top:.5rem;font-size:.86rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.post-card:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.post-card :focus-visible{outline:none}
.post-card[hidden]{display:none}
@media(hover:hover){.post-card:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}}
.filter-status{margin-top:1rem;font-size:.92rem;color:var(--ink-2)}

/* ---------- Artículo ---------- */
.article-head{padding-block:clamp(1.25rem,1rem + 1.5vw,2rem) clamp(2rem,1.5rem + 2.5vw,3.25rem)}
.article-head .breadcrumbs{margin-bottom:clamp(1.5rem,1rem + 2vw,2.5rem)}
.article-head h1{font-size:var(--step-5);max-width:22ch;margin-top:1rem}
.article-head__dek{font-size:var(--step-1);max-width:58ch;margin-top:1.1rem}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;margin-top:1.6rem;font-size:.92rem;color:var(--ink-2)}
.article-meta a{color:var(--ink);font-weight:600;text-decoration:none}
.article-meta a:hover{text-decoration:underline}
.article-meta__author{display:inline-flex;align-items:center;gap:.6rem}
.article-meta__author img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.article-layout{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.article-layout > aside{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.toc h2{font-family:var(--font-body);font-size:.85rem;font-weight:700;letter-spacing:.01em;color:var(--ink);margin-bottom:.7rem}
.toc ol{list-style:none;display:grid;gap:.1rem;border-left:1px solid var(--line)}
.toc a{display:block;padding:.35rem 0 .35rem .9rem;margin-left:-1px;border-left:2px solid transparent;font-size:.9rem;line-height:1.4;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink);border-left-color:var(--line-strong)}
.toc a.is-active{color:var(--accent-deep);border-left-color:var(--accent);font-weight:600}
.toc-mobile{display:none;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:2rem}
.toc-mobile summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:.75rem 1rem;font-weight:600;cursor:pointer}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--plum);border-bottom:2px solid var(--plum);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.toc-mobile[open] summary::after{transform:rotate(-135deg)}
.toc-mobile ol{padding:0 1rem 1rem 2rem;display:grid;gap:.35rem}
.toc-mobile a{color:var(--ink-2);font-size:.95rem}

.prose{max-width:60ch;color:var(--ink-body);font-size:clamp(1.03rem,1rem + .15vw,1.1rem);line-height:1.75}
.prose > * + *{margin-top:1.15em}
.prose p{color:var(--ink-body)}
.prose h2{font-size:var(--step-3);margin-top:2.3em;scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.prose h3{font-size:var(--step-2);margin-top:1.9em}
.prose h2 + *,.prose h3 + *{margin-top:.7em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--accent)}
.prose a:not(.btn){color:var(--accent-deep);font-weight:550;text-decoration:underline;text-decoration-color:rgba(122,34,71,.38)}
.prose a:not(.btn):hover{text-decoration-color:currentColor}
.prose .answer{
  padding:1.2rem 1.35rem;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line-strong);
  font-size:1.06em;color:var(--ink);
}
.prose .answer strong{color:var(--accent-deep)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.table-wrap table{width:100%;min-width:520px;font-size:.95rem;line-height:1.5}
.table-wrap th,.table-wrap td{padding:.75rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table-wrap thead th{font-family:var(--font-display);font-weight:600;color:var(--ink);background:var(--surface-3)}
.table-wrap tbody tr:last-child td,.table-wrap tbody tr:last-child th{border-bottom:0}
.table-wrap tbody th{font-weight:600;color:var(--ink)}
.formula{
  display:block;padding:1rem 1.2rem;border-radius:var(--r-md);background:var(--surface);border:1px dashed var(--line-strong);
  font-family:var(--font-display);font-weight:600;font-size:1.04rem;line-height:1.5;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.formula small{display:block;font-family:var(--font-body);font-weight:400;font-size:.88rem;color:var(--ink-2);margin-top:.3rem}
.sources{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.sources h2{font-size:1.2rem;margin-top:0}
.sources ol{margin-top:.8rem;padding-left:1.2em;font-size:.93rem;line-height:1.55}
.sources li + li{margin-top:.5em}
.sources a{word-break:break-word}
.author-box{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem 1.25rem;align-items:center;margin-top:3rem;
  padding:1.3rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.author-box p{font-size:.95rem}
.author-box strong a{color:var(--ink);text-decoration:none}
.author-box strong a:hover{text-decoration:underline}
.article-cta{margin-top:3rem}
.related{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem)}

/* ---------- Calculadora ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.calc__form{padding:clamp(1.3rem,1.1rem + 1vw,2rem);border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line)}
.calc__form fieldset{border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1rem}
.calc__form fieldset + fieldset{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.calc__form legend{grid-column:1 / -1;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--ink);margin-bottom:.35rem;float:left;width:100%}
.field{display:grid;gap:.4rem;align-content:start}
.field--full{grid-column:1 / -1}
.field label{font-weight:600;font-size:.93rem;color:var(--ink)}
.field__help{font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.field__control{
  display:flex;align-items:center;min-height:52px;border-radius:var(--r-sm);background:var(--bg);
  border:1px solid var(--line-strong);transition:border-color .2s,box-shadow .2s;
}
.field__control:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,48,96,.16)}
.field__control input{flex:1;min-width:0;height:50px;border:0;background:transparent;padding:0 .9rem;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.field__control input:focus{outline:none}
.field__affix{padding:0 .85rem;color:var(--ink-2);font-weight:600;font-size:.95rem}
.field__affix:first-child{padding-right:0}
.field__affix:last-child{padding-left:0}
.field[data-invalid] .field__control{border-color:#A3263A}
.field__error{font-size:.84rem;font-weight:600;color:#A3263A}
.calc__results{position:sticky;top:calc(var(--header-h) + 1.25rem);padding:clamp(1.3rem,1.1rem + 1vw,2rem);border-radius:var(--r-xl);background:var(--wine);color:var(--cream);box-shadow:var(--shadow-lg)}
.calc__results h2{color:#fff;font-size:1.35rem}
.calc__results > p{color:var(--malva);font-size:.95rem;margin-top:.35rem}
.results{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1.25rem}
.result{padding:.95rem 1rem;border-radius:var(--r-md);background:rgba(243,233,227,.06);border:1px solid rgba(243,233,227,.12)}
.result--main{grid-column:1 / -1;background:rgba(176,48,96,.28);border-color:rgba(216,156,156,.4)}
.result__label{display:block;font-size:.84rem;line-height:1.35;color:var(--malva)}
.result__value{display:block;margin-top:.3rem;font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.result--main .result__value{font-size:clamp(1.8rem,1.5rem + 1.4vw,2.6rem)}
.result__hint{display:block;margin-top:.25rem;font-size:.8rem;line-height:1.4;color:var(--malva)}
.verdict{margin-top:1.1rem;padding:1rem 1.1rem;border-radius:var(--r-md);background:rgba(243,233,227,.08);border:1px solid rgba(243,233,227,.14);font-size:.95rem;line-height:1.55;color:var(--cream)}
.verdict strong{color:#fff}
.verdict[data-tone="bad"]{background:rgba(163,38,58,.32);border-color:rgba(231,140,155,.45)}
.verdict[data-tone="ok"]{background:rgba(62,142,91,.22);border-color:rgba(140,210,165,.4)}
.calc__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.calc__results .btn--ghost{color:#fff;border-color:rgba(243,233,227,.35)}
.calc__results .btn--ghost:hover{background:rgba(243,233,227,.08);border-color:var(--cream)}
.calc__results :focus-visible{outline-color:var(--cream)}

/* ---------- Casos: ficha, PageSpeed y navegación ---------- */
.case-hero__media{position:relative;margin:0;padding-bottom:2rem;justify-self:end;width:min(100%,600px)}
.case-hero__media .browser{border-radius:14px;border-bottom:1px solid rgba(36,16,22,.1)}
.case-hero__media .phone{position:absolute;right:-.5rem;bottom:0;width:clamp(100px,26%,160px)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;border-radius:var(--r-lg);overflow:hidden;background:var(--line);border:1px solid var(--line)}
.facts div{padding:1rem 1.15rem;background:var(--surface)}
.facts dt{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.facts dd{margin-top:.25rem;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);line-height:1.35}
.facts dd a{color:var(--accent-deep)}
.build-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem);list-style:none}
.build-list li{padding:clamp(1.2rem,1rem + .8vw,1.6rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.build-list h3{font-size:1.12rem}
.build-list p{font-size:.97rem;margin-top:.4rem}
.psi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 1.25rem;align-items:center;padding:1.25rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.psi__gauge{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--ink);background:conic-gradient(var(--psi-color,var(--line-strong)) calc(var(--psi,0) * 1%),rgba(36,16,22,.08) 0)}
.psi__gauge span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--surface)}
.psi p{font-size:.95rem}
.psi small{display:block;font-size:.84rem;color:var(--ink-2);margin-top:.25rem}
.case-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.case-nav a{display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.3rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .25s,box-shadow .25s}
.case-nav a:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.case-nav small{font-size:.84rem;color:var(--ink-2)}
.case-nav strong{font-family:var(--font-display);font-size:1.1rem}
.case-nav a:last-child{text-align:right}

/* ---------- Recursos ---------- */
.tools{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem)}
.tool{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.4rem,1.1rem + 1.4vw,2.25rem);border-radius:var(--r-xl);background:var(--wine);color:var(--cream);min-height:280px}
.tool h2,.tool h3{color:#fff;font-size:var(--step-3)}
.tool h2 a,.tool h3 a{color:inherit;text-decoration:none}
.tool h2 a::after,.tool h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tool p{color:var(--malva)}
.tool .tag{background:rgba(255,255,255,.14);color:#fff}
.tool__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--accent);color:#fff}
.tool__ico .icon{width:26px;height:26px}
.tool:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.tool :focus-visible{outline:none}
.guides{list-style:none;display:grid;gap:.25rem}
.guides a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:1.08rem}
.guides a:hover{color:var(--accent-deep)}
.guides .icon{width:18px;height:18px;color:var(--plum)}

/* ---------- Sobre Blixtor ---------- */
.about-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-hero__photo{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);max-width:420px;justify-self:end}
.about-hero__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}

/* ---------- Legal (contenido de /privacy, sin tocar su texto) ---------- */
.legal-wrap{max-width:780px;margin-inline:auto;padding-block:clamp(1rem,2vw,2rem) clamp(4rem,8vw,7rem)}
.legal-wrap h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:.5rem}
.legal-meta{display:block;font-weight:600;font-size:.8rem;color:var(--plum);letter-spacing:.04em;margin-bottom:3rem}
.legal-section{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--line)}
.legal-section:last-child{border-bottom:0}
.legal-section h2{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:1.25rem}
.legal-section h3{font-size:1rem;color:var(--plum);font-family:var(--font-body);font-weight:650;letter-spacing:.01em;margin:1.5rem 0 .6rem}
.legal-section p{line-height:1.75;margin-bottom:.9rem}
.legal-section ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:.9rem}
.legal-section ul li{color:var(--ink-2);padding-left:1.4rem;position:relative;line-height:1.65}
.legal-section ul li::before{content:"";position:absolute;left:.2rem;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--rose)}
.legal-section a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.legal-section a:hover{color:var(--ink)}
.legal-highlight{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:1rem 1.25rem;margin-bottom:1rem}
.legal-highlight p{margin-bottom:0}
.divider-label{display:flex;align-items:center;gap:1rem;margin:4rem 0 3rem}
.divider-label span{font-weight:650;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);white-space:nowrap}
.divider-label::before,.divider-label::after{content:"";flex:1;height:1px;background:var(--line)}

@media(prefers-reduced-motion:no-preference){
  .rocket{animation:rk-float 5.5s ease-in-out infinite}
  .rk-fi{animation:rk-flicker .09s ease-in-out infinite alternate}
  .rk-fm{animation:rk-flicker .13s ease-in-out infinite alternate-reverse}
  .rk-fo{animation:rk-flicker .1s ease-in-out infinite alternate}
  .rk-glow-el{animation:rk-glow 2.2s ease-in-out infinite}
  .rk-spark{animation:rk-spark 1.5s cubic-bezier(.25,.46,.45,.94) infinite var(--del,0s)}
  .rk-smoke{animation:rk-smoke 2.4s ease-out infinite var(--del,0s)}
  .rk-p{animation:rk-blink 3.5s ease-in-out infinite var(--rd,0s)}
  /* Fuera de pantalla el cohete se congela (motion.js pone la clase) */
  .is-offscreen .rocket,.is-offscreen .rocket *{animation-play-state:paused}
}
@keyframes rk-float{
  0%,100%{transform:translateY(0) rotate(10deg)}
  50%{transform:translateY(-22px) rotate(6deg)}
}
@keyframes rk-flicker{from{transform:scaleY(.86) scaleX(1.07)}to{transform:scaleY(1.15) scaleX(.91)}}
@keyframes rk-glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.92;transform:scale(1.32)}}
@keyframes rk-spark{
  0%{transform:translate(0,0) scale(1);opacity:.9}
  72%{opacity:.12}
  100%{transform:translate(var(--tx,0px),var(--ty,20px)) scale(0);opacity:0}
}
@keyframes rk-smoke{
  0%{transform:translate(0,0) scale(.55);opacity:0}
  18%{opacity:.35}
  100%{transform:translate(var(--sx,0px),var(--sy,35px)) scale(2.1);opacity:0}
}
@keyframes rk-blink{0%,100%{opacity:.1;transform:scale(.7)}50%{opacity:.9;transform:scale(1.3)}}
.rocket{transform:rotate(10deg)}

@media(max-width:960px){
  .hero__grid,.page-hero__grid,.operator,.faq-layout,.cta-card,.about-hero,.calc,.split-panel,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .hero__visual{display:none}
  .faq-layout__side,.calc__results,.article-layout > aside{position:static}
  .operator__photo,.about-hero__photo{max-width:min(300px,78vw);justify-self:start}
  .demo,.anatomy,.showcase{justify-self:center}
  .svc-card--meta,.svc-card--google,.svc-card--web{grid-column:span 12;grid-row:auto}
  .case-card--7,.case-card--5,.case-card{grid-column:span 12}
  .steps{--cols:1;gap:0}
  .step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:1.1rem;padding-bottom:2rem}
  .step:last-child{padding-bottom:0}
  .step__num{grid-row:1 / span 4;margin-bottom:0}
  .step > :not(.step__num){grid-column:2}
  .step:not(:last-child)::before,.step:not(:last-child)::after{left:23px;right:auto;width:2px;top:56px;bottom:8px;height:auto}
  .step:not(:last-child)::after{background:linear-gradient(180deg,var(--wine),var(--accent));transform-origin:center top;transform:scaleY(var(--seg,1))}
  .step__gets{margin-top:.6rem}
  .qualities,.choices,.related,.kinds--3{grid-template-columns:minmax(0,1fr)}
  .quality--wide,.quality--full{grid-column:auto}
  .quality--full{display:block}
  .quality--full .icon{margin:0 0 .9rem}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .article-layout > aside{display:none}
  .toc-mobile{display:block}
  .work{grid-template-columns:minmax(0,1fr)}
  .kind--feature{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .fit,.deliver,.kinds,.kinds--3,.metrics,.timeline,.billing__pays,.post-list,.build-list,.tools,.dodont,.case-nav{grid-template-columns:minmax(0,1fr)}
  .billing__lines{display:none}
  .billing__head{justify-items:start;text-align:left}
  .nap{grid-template-columns:minmax(0,1fr)}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
  .compare tr{padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
  .compare tbody tr:last-child{border-bottom:0}
  .compare th,.compare td{padding:0;border:0}
  .compare tbody th{width:auto;font-family:var(--font-display);font-size:1.05rem;margin-bottom:.5rem}
  .compare td{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.75rem;padding-block:.35rem}
  .compare td::before{content:attr(data-label);font-weight:600;color:var(--ink-2);font-size:.9rem}
  .case-nav a:last-child{text-align:left}
  .results{grid-template-columns:minmax(0,1fr)}
  .calc__form fieldset{grid-template-columns:minmax(0,1fr)}
  .anatomy{padding-right:0;justify-content:center}
  .anatomy__note{display:none}
  .case-card__media .phone{display:none}
}
@media(max-width:560px){
  .btn--lg{font-size:1rem;padding-inline:1.15rem}
  .hero__actions .btn,.page-hero__actions .btn,.cta-card__actions .btn{width:100%}
  .cta-card__actions{align-items:stretch}
  .demo__stage{padding:0 0 2.6rem}
  .demo-toast{left:.75rem;right:.75rem}
  .demo__cap{text-align:left}
  .chat{right:.25rem;width:72%}
  .showcase .phone{right:0}
}