/* =========================================================
   LANDING 2026 · "precision bruta"
   Capa de diseno de la landing reconstruida. Reglas:
   - Colores: solo los tokens de marca (--s-* de site.css y el
     verde #1FBF6B). Ningun hex nuevo: los tonos intermedios
     salen de mezclar tokens.
   - Tipografia: .font-black (Inter) en titulares, Archivo en
     cuerpo, Playfair italic para UNA palabra de acento por
     bloque, Anton en eyebrows y numerales. .font-black NO se
     toca: vive en site.css.
   - Todo funciona en los dos temas (oscuro / papel).
   ========================================================= */

:root {
  --g: #1FBF6B;
  --g-12: rgba(31,191,107,.12);
  --g-20: rgba(31,191,107,.20);
  --g-35: rgba(31,191,107,.35);
  /* texto de lectura: hueso al 76%, bastante mas legible que el muted */
  --x-body: rgba(246,244,239,.76);
  --x-dim: rgba(246,244,239,.5);
  --x-card: color-mix(in srgb, var(--s-panel) 92%, var(--s-text) 3%);
  --x-card-hi: color-mix(in srgb, var(--s-panel) 88%, var(--s-text) 7%);
  --x-edge: color-mix(in srgb, var(--s-text) 10%, transparent);
  --x-edge-hi: color-mix(in srgb, var(--s-text) 18%, transparent);
  --x-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
  --x-wrap: 1200px;
  --x-gut: 16px;
}
@media (min-width: 768px) { :root { --x-gut: 32px; } }
html[data-theme="papel"] {
  --x-body: rgba(22,21,15,.78);
  --x-dim: rgba(22,21,15,.52);
  --x-card: #FFFFFF;
  --x-card-hi: #FFFFFF;
  --x-edge: rgba(22,21,15,.11);
  --x-edge-hi: rgba(22,21,15,.2);
  --x-shadow: 0 30px 70px -35px rgba(22,21,15,.35);
}

html { scroll-behavior: auto; }
body { overflow-x: clip; }
.x-wrap { width: 100%; max-width: var(--x-wrap); margin-inline: auto; padding-inline: var(--x-gut); }
.x-narrow { max-width: 860px; }
.x-sec { position: relative; padding-block: clamp(5.5rem, 11vw, 10rem); }
.x-center { text-align: center; }
.x-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tipografia ---------- */
.x-h1 { font-size: clamp(2.55rem, 7.6vw, 6.1rem); line-height: .98; }
.x-h2 { font-size: clamp(2.05rem, 5.2vw, 4.2rem); line-height: 1.02; text-wrap: balance; }
.x-h3 { font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.15; }
.x-lead { font-size: clamp(1.08rem, 1.55vw, 1.32rem); line-height: 1.6; color: var(--x-body); text-wrap: pretty; }
.x-p { font-size: 1.03rem; line-height: 1.7; color: var(--x-body); text-wrap: pretty; }
.x-small { font-size: .9rem; line-height: 1.6; color: var(--x-body); }
.x-acc { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; color: var(--g); letter-spacing: normal; }
.x-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Anton', sans-serif; font-size: .78rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--x-dim);
}
.x-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 12px var(--g); }
.x-eyebrow.no-dot::before { display: none; }
.x-mono { font-family: Archivo, sans-serif; font-weight: 600; font-size: .86rem; letter-spacing: 0; color: var(--x-body); }

/* ---------- fondo vivo (canvas) ---------- */
#xBg { position: fixed; inset: 0; z-index: -2; pointer-events: none; width: 100%; height: 100%; opacity: .9; }
html[data-theme="papel"] #xBg { opacity: .7; }
/* halo verde que respira detras del hero */
.x-aura {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(1100px, 140vw); aspect-ratio: 1.6; left: 50%; top: -18%; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--g-20), transparent 70%);
  filter: blur(20px); animation: xBreath 9s ease-in-out infinite;
}
@keyframes xBreath { 0%,100% { opacity: .55; transform: translateX(-50%) scale(1); } 50% { opacity: .9; transform: translateX(-50%) scale(1.08); } }

/* ---------- header ---------- */
.x-head { transition: height .3s ease, background-color .3s ease; }
.x-nav { display: none; gap: 2rem; font-size: .92rem; color: var(--x-body); }
.x-nav a { position: relative; transition: color .2s; }
.x-nav a:hover { color: var(--s-text); }
.x-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--g); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.x-nav a:hover::after { transform: scaleX(1); }
@media (min-width: 1024px) { .x-nav { display: flex; } }

/* ---------- botones ---------- */
.x-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border-radius: 999px; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 1.1rem 1.9rem; background: var(--g); color: #0A0A0A; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(31,191,107,.5), 0 12px 40px -12px rgba(31,191,107,.65);
  transition: transform .2s ease, box-shadow .2s ease;
}
.x-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.x-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(31,191,107,.7), 0 18px 50px -12px rgba(31,191,107,.8); }
.x-btn:hover::before { transform: translateX(120%); }
.x-btn .x-arrow { transition: transform .2s; }
.x-btn:hover .x-arrow { transform: translateX(3px); }
.x-btn-sm { padding: .72rem 1.2rem; font-size: .88rem; }
.x-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; font-weight: 600; line-height: 1; padding: 1.05rem 1.7rem;
  border: 1px solid var(--x-edge-hi); color: var(--s-text); background: color-mix(in srgb, var(--s-bg) 60%, transparent);
  backdrop-filter: blur(8px); transition: border-color .2s, color .2s;
}
.x-btn-ghost:hover { border-color: var(--g); color: var(--g); }

/* ---------- pastillas / chips ---------- */
.x-chip {
  display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px;
  padding: .45rem .85rem; font-size: .8rem; font-weight: 600; color: var(--x-body);
  border: 1px solid var(--x-edge); background: color-mix(in srgb, var(--s-panel) 70%, transparent);
}
.x-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); display: inline-block; }
.x-tag { display: inline-flex; align-items: center; border-radius: 6px; padding: .22rem .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; border: 1px solid; }
.x-tag.pos { color: var(--g); border-color: var(--g-35); background: var(--g-12); }
.x-tag.neg { color: #c84040; border-color: rgba(200,64,64,.35); background: rgba(200,64,64,.1); }
.x-tag.neu { color: var(--x-dim); border-color: var(--x-edge-hi); }

/* ---------- HERO ---------- */
.x-hero { position: relative; padding-top: clamp(3.2rem, 8vw, 6.5rem); text-align: center; }
.x-trust {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .7rem;
  padding: .4rem .9rem .4rem .45rem; border-radius: 999px;
  border: 1px solid var(--x-edge); background: color-mix(in srgb, var(--s-panel) 75%, transparent); backdrop-filter: blur(8px);
  font-size: .84rem; color: var(--x-body);
}
.x-avs { display: flex; }
.x-avs img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--s-bg); background: var(--s-avatar); object-fit: contain; margin-left: -8px; }
.x-avs img:first-child { margin-left: 0; }
.x-stars { color: var(--g); letter-spacing: .08em; font-size: .8rem; }
.x-rot { display: grid; justify-items: center; }
.x-rot > span { grid-area: 1 / 1; white-space: nowrap; font-size: clamp(1.5rem, 6.6vw, 5.4rem); line-height: 1.12; }
.x-rot .x-l { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.28em);
  transition: opacity .45s ease, filter .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * 26ms); }
.x-rot > span.is-on .x-l { opacity: 1; filter: blur(0); transform: none; }
.x-rot > span.is-out .x-l { opacity: 0; filter: blur(10px); transform: translateY(-.2em); transition-delay: calc(var(--i) * 14ms); }
.x-seals { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.x-hero-flow { margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* entrada del hero por lineas */
.x-in { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease; }
.x-in.is-in { opacity: 1; transform: none; filter: none; }
.x-d1 { transition-delay: .08s; } .x-d2 { transition-delay: .18s; } .x-d3 { transition-delay: .3s; } .x-d4 { transition-delay: .42s; } .x-d5 { transition-delay: .54s; }

/* ---------- regla / divisor de precision ---------- */
.x-ruler { height: 14px; width: 100%; opacity: .7;
  background:
    linear-gradient(var(--x-edge-hi), var(--x-edge-hi)) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--x-edge-hi) 0 1px, transparent 1px 12px) 0 100%/100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--x-edge-hi) 0 1px, transparent 1px 120px) 0 100%/100% 14px no-repeat;
}

/* ---------- GALERIA DE TRABAJO (marco de lienzo) ---------- */
.x-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) { .x-gal { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.x-gcol { display: grid; gap: 14px; will-change: transform; }
@media (min-width: 900px) { .x-gcol { gap: 22px; } }
.x-gcol:nth-child(2) { margin-top: 3rem; }
.x-gcol:nth-child(4) { margin-top: 2rem; }
.x-frame { position: relative; padding-top: 22px; }
.x-frame figcaption { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: .5rem; }
.x-frame figcaption span { font-family: Archivo, sans-serif; font-weight: 600; font-size: .74rem; color: var(--x-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-frame .x-canvas { position: relative; border: 1px solid var(--g-35); }
.x-frame .x-canvas::before, .x-frame .x-canvas::after,
.x-frame .x-canvas i::before, .x-frame .x-canvas i::after {
  content: ""; position: absolute; width: 7px; height: 7px; background: var(--s-bg); border: 1px solid var(--g); z-index: 2;
}
.x-frame .x-canvas::before { top: -4px; left: -4px; } .x-frame .x-canvas::after { top: -4px; right: -4px; }
.x-frame .x-canvas i::before { bottom: -4px; left: -4px; } .x-frame .x-canvas i::after { bottom: -4px; right: -4px; }
.x-frame img { display: block; width: 100%; height: auto; filter: grayscale(.85) contrast(1.05); transition: filter .5s ease, transform .6s ease; }
.x-frame:hover img { filter: none; }
@media (hover: none) { .x-frame img { filter: none; } }
.x-gal-fade { position: relative; }
.x-gal-fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to bottom, transparent, var(--s-bg)); pointer-events: none; }

/* ---------- LOGOS ---------- */
.x-logos { position: relative; overflow: hidden; display: grid; gap: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.x-lrow { display: flex; gap: 12px; width: max-content; animation: xMarq 48s linear infinite; }
.x-lrow.rev { animation-direction: reverse; animation-duration: 56s; }
.x-logos:hover .x-lrow { animation-play-state: paused; }
@keyframes xMarq { to { transform: translateX(-50%); } }
.x-logo {
  display: grid; place-items: center; width: 170px; height: 76px; border-radius: 14px;
  border: 1px solid var(--x-edge); background: color-mix(in srgb, var(--s-panel) 80%, transparent);
  transition: border-color .3s, background .3s;
}
.x-logo img { max-width: 116px; max-height: 38px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1); opacity: .62; transition: filter .3s, opacity .3s; }
.x-logo:hover { border-color: var(--g-35); }
.x-logo:hover img { filter: none; opacity: 1; }
html[data-theme="papel"] .x-logo img { filter: grayscale(1) brightness(0); opacity: .55; }
html[data-theme="papel"] .x-logo:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .x-lrow { animation: none; } }

/* ---------- escena fija por scroll (formula / metodo) ---------- */
.x-scene { position: relative; }
.x-stick { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: 72px; box-sizing: border-box; }

/* FORMULA */
.x-formula-scene { height: 300vh; }
.x-formula { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1em .3em; font-size: clamp(2.6rem, 7.4vw, 7rem); line-height: 1; }
@media (min-width: 641px) { .x-formula { flex-wrap: nowrap; font-size: clamp(2.4rem, 6.6vw, 6.4rem); } }
.x-term { position: relative; color: var(--x-dim); transition: color .6s ease, opacity .6s ease, text-shadow .6s ease; }
.x-op { color: var(--x-dim); opacity: .5; font-weight: 400; }
.x-term.is-grey { color: var(--x-dim); text-decoration: line-through; text-decoration-color: rgba(200,64,64,.8); text-decoration-thickness: .06em; }
.x-term.is-green { color: var(--g); text-shadow: 0 0 40px rgba(31,191,107,.35); }
.x-term.is-bone { color: var(--s-text); }
.x-term sup { position: absolute; left: 50%; top: -1.4em; transform: translateX(-50%); font-family: 'Anton', sans-serif; font-size: .7rem; letter-spacing: .2em; white-space: nowrap; color: currentColor; opacity: 0; transition: opacity .5s; }
.x-term.is-grey sup, .x-term.is-green sup { opacity: 1; }
.x-fcap { min-height: 3.6em; transition: opacity .5s; }
.x-fbar { width: min(420px, 80%); height: 2px; background: var(--x-edge); border-radius: 2px; overflow: hidden; margin-inline: auto; }
.x-fbar b { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--g); box-shadow: 0 0 12px var(--g); }
@media (max-width: 640px) {
  .x-formula { flex-direction: column; align-items: center; gap: .05em; font-size: clamp(2.6rem, 14vw, 4.2rem); }
  .x-term sup { display: none; }
}

/* CONTRASTE (tachado) */
.x-vs { display: grid; gap: 0; border-top: 1px solid var(--x-edge); }
.x-vs-row { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: 1.4rem 0; border-bottom: 1px solid var(--x-edge); align-items: center; }
@media (min-width: 768px) { .x-vs-row { grid-template-columns: 1fr 60px 1fr; padding: 1.9rem 0; } }
.x-vs-old { position: relative; font-size: clamp(1.25rem, 2.4vw, 2rem); color: var(--x-dim); width: fit-content; }
.x-vs-old::after { content: ""; position: absolute; left: -2%; top: 54%; height: .09em; width: 0; background: rgba(200,64,64,.85); transition: width .7s cubic-bezier(.6,0,.2,1); }
.x-vs-row.is-in .x-vs-old::after { width: 104%; }
.x-vs-arrow { color: var(--g); font-size: 1.4rem; text-align: center; opacity: 0; transform: translateX(-10px); transition: opacity .5s .5s, transform .5s .5s; display: none; }
@media (min-width: 768px) { .x-vs-arrow { display: block; } }
.x-vs-new { font-size: clamp(1.25rem, 2.4vw, 2rem); color: var(--s-text); opacity: 0; transform: translateY(8px); transition: opacity .6s .55s, transform .6s .55s; }
.x-vs-row.is-in .x-vs-arrow, .x-vs-row.is-in .x-vs-new { opacity: 1; transform: none; }

/* ---------- METODO ---------- */
.x-method-scene { height: 430vh; }
.x-method { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; }
@media (min-width: 960px) { .x-method { grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: center; } }
.x-steps { display: grid; gap: .3rem; }
.x-step { position: relative; padding: 1.1rem 0 1.1rem 1.4rem; border-left: 1px solid var(--x-edge); opacity: .38; transition: opacity .5s ease; cursor: default; }
.x-step::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 0; background: var(--g); box-shadow: 0 0 12px var(--g); transition: height .6s ease; }
.x-step.is-on { opacity: 1; }
.x-step.is-on::before { height: 100%; }
.x-step-num { font-family: 'Anton', sans-serif; font-size: .8rem; letter-spacing: .24em; color: var(--g); }
.x-step h3 { margin-top: .35rem; }
.x-step p { margin-top: .45rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s ease, opacity .5s ease; }
.x-step.is-on p { max-height: 10em; opacity: 1; }
.x-metric { display: inline-flex; margin-top: .8rem; }
.x-step:not(.is-on) .x-metric { display: none; }
.x-bigno { font-family: 'Anton', sans-serif; font-size: clamp(5rem, 11vw, 9rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--g-35); }

.x-stage { position: relative; aspect-ratio: 1.05; width: 100%; }
.x-vis { position: absolute; inset: 0; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.x-vis.is-on { opacity: 1; transform: none; pointer-events: auto; }
.x-panel {
  position: relative; border-radius: 22px; background: var(--x-card); border: 1px solid var(--x-edge);
  box-shadow: var(--x-shadow); overflow: hidden;
}
.x-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 80%) var(--my, 0%), var(--g-12), transparent 45%); }
.x-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--x-edge); }
.x-dots { display: flex; gap: 6px; } .x-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--x-edge-hi); }

/* metodo en movil: sin escena fija, todo apilado */
@media (max-width: 959px) {
  .x-method-scene { height: auto; }
  .x-method-scene .x-stick { position: relative; min-height: 0; display: block; padding-block: 0; }
  .x-steps { gap: 3rem; }
  .x-step { opacity: 1; border-left: 0; padding-left: 0; }
  .x-step::before { display: none; }
  .x-step p { max-height: none; opacity: 1; }
  .x-step .x-metric { display: inline-flex !important; }
  .x-stage { display: none; }
  .x-step-vis { display: block !important; margin-top: 1.4rem; }
}
.x-step-vis { display: none; }

/* visual 01: tabla de insights */
.x-ins { width: 100%; border-collapse: collapse; font-size: .8rem; }
.x-ins th { text-align: left; font-weight: 600; color: var(--x-dim); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem .8rem; border-bottom: 1px solid var(--x-edge); }
.x-ins td { padding: .75rem .8rem; border-bottom: 1px solid var(--x-edge); color: var(--x-body); vertical-align: middle; }
.x-ins td:first-child { color: var(--s-text); font-weight: 600; }
.x-ins tr { opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s; }
.x-vis.is-on .x-ins tr, .x-step-vis .x-ins tr { opacity: 1; transform: none; }
.x-ins tr:nth-child(2) { transition-delay: .1s; } .x-ins tr:nth-child(3) { transition-delay: .2s; } .x-ins tr:nth-child(4) { transition-delay: .3s; } .x-ins tr:nth-child(5) { transition-delay: .4s; }
.x-num { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .x-ins .x-hide-s { display: none; } }

/* visual 02: comparador antes/despues */
.x-cmp { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 1; user-select: none; touch-action: pan-y; --pos: 50%; }
.x-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-cmp .x-after { clip-path: inset(0 0 0 var(--pos)); }
.x-cmp .x-bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--g); box-shadow: 0 0 16px var(--g); transform: translateX(-1px); }
.x-cmp .x-knob { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--g); color: #0A0A0A; display: grid; place-items: center; font-weight: 900; box-shadow: 0 0 0 6px rgba(31,191,107,.25); }
.x-cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.x-cmp-lab { position: absolute; top: 12px; padding: .3rem .6rem; border-radius: 6px; font-family: 'Anton', sans-serif; font-size: .62rem; letter-spacing: .16em; background: rgba(7,7,7,.75); color: #F6F4EF; }
.x-kit { position: absolute; padding: .8rem .9rem; border-radius: 14px; background: var(--x-card-hi); border: 1px solid var(--x-edge); box-shadow: var(--x-shadow); font-size: .75rem; color: var(--x-body); }
.x-kit b { display: block; color: var(--s-text); font-size: .78rem; margin-bottom: .35rem; }

/* visual 03: doble embudo */
.x-funnel svg { width: 100%; height: 100%; display: block; }
.x-funnel .ln { fill: none; stroke: var(--x-edge-hi); stroke-width: 1.5; }
.x-funnel .ln-g { fill: none; stroke: var(--g); stroke-width: 1.5; stroke-dasharray: 6 8; animation: xDash 1.6s linear infinite; }
@keyframes xDash { to { stroke-dashoffset: -28; } }
.x-funnel text { font-family: Archivo, sans-serif; fill: var(--x-body); }
.x-funnel .t-big { font-family: 'InterVariable', Archivo, sans-serif; font-weight: 700; fill: var(--s-text); letter-spacing: -.02em; }
.x-funnel .t-lab { font-family: 'Anton', sans-serif; letter-spacing: .18em; fill: var(--x-dim); }

/* visual 04: organico vs PPC */
.x-split { display: flex; height: 64px; border-radius: 14px; overflow: hidden; border: 1px solid var(--x-edge); }
.x-split .o { width: 0; background: linear-gradient(90deg, rgba(31,191,107,.55), var(--g)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); display: flex; align-items: center; padding-left: 1rem; color: #0A0A0A; font-weight: 800; white-space: nowrap; overflow: hidden; }
.x-split .p { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: 1rem; color: var(--x-body); font-weight: 700; background: color-mix(in srgb, var(--s-text) 6%, transparent); }
.x-vis.is-on .x-split .o, .x-step-vis .x-split .o { width: 76%; }
.x-flags { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.x-flag { border: 1px solid var(--x-edge); border-radius: 12px; padding: .8rem; text-align: center; }
.x-flag b { display: block; font-family: 'Anton', sans-serif; font-size: 1.4rem; letter-spacing: .06em; color: var(--s-text); }
.x-flag span { font-size: .7rem; color: var(--x-dim); }

/* ---------- BENTO ---------- */
.x-bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .x-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .x-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(260px, auto); gap: 18px; } }
.x-tile { position: relative; overflow: hidden; border-radius: 22px; background: var(--x-card); border: 1px solid var(--x-edge); padding: 1.6rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; isolation: isolate; transition: border-color .3s, transform .4s ease; }
.x-tile:hover { border-color: var(--g-35); transform: translateY(-3px); }
.x-tile::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--g-12), transparent 50%); opacity: 0; transition: opacity .3s; }
.x-tile:hover::before { opacity: 1; }
.x-tile > * { position: relative; z-index: 1; }
.x-tile .x-tile-img { position: absolute; inset: 0; z-index: -1; }
.x-tile .x-tile-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .8s ease; }
.x-tile:hover .x-tile-img img { transform: scale(1.07); }
.x-tile .x-tile-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,.05) 10%, rgba(7,7,7,.55) 45%, rgba(7,7,7,.95) 85%); }
.x-tile.has-img h3, .x-tile.has-img .x-mono { color: #F6F4EF; }
.x-tile.has-img p { color: rgba(246,244,239,.8); }
@media (min-width: 1024px) {
  .x-t-tall { grid-row: span 2; }
  .x-t-wide { grid-column: span 2; }
}
.x-tile h3 { margin-top: .4rem; }
.x-tile p { margin-top: .45rem; font-size: .95rem; line-height: 1.6; color: var(--x-body); }
.x-qr { width: 64px; height: 64px; border-radius: 8px; background:
  conic-gradient(from 90deg at 3px 3px, transparent 25%, var(--s-text) 0) 0 0/8px 8px;
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%) 0 0/8px 8px; opacity: .85; }
.x-rufus { display: grid; gap: .5rem; margin-bottom: auto; }
.x-bubble { max-width: 90%; padding: .6rem .8rem; border-radius: 14px; font-size: .82rem; line-height: 1.45; }
.x-bubble.q { background: color-mix(in srgb, var(--s-text) 8%, transparent); color: var(--x-body); border-bottom-left-radius: 4px; }
.x-bubble.a { margin-left: auto; background: var(--g-12); border: 1px solid var(--g-35); color: var(--s-text); border-bottom-right-radius: 4px; }
.x-meter { display: grid; gap: .9rem; margin-bottom: auto; }
.x-meter-row { display: grid; grid-template-columns: 44px 1fr auto; gap: .7rem; align-items: center; font-size: .8rem; color: var(--x-body); }
.x-meter-row b { font-family: 'Anton', sans-serif; letter-spacing: .1em; font-weight: 400; }
.x-meter-bar { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--s-text) 8%, transparent); overflow: hidden; }
.x-meter-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(200,64,64,.8), var(--g)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.is-in .x-meter-bar i { width: 88%; }

/* ---------- LIMITES ---------- */
.x-split2 { display: grid; gap: 14px; }
@media (min-width: 820px) { .x-split2 { grid-template-columns: 1.25fr 1fr; gap: 18px; } }
.x-side { border-radius: 22px; padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid var(--x-edge); background: var(--x-card); }
.x-side.us { border-color: var(--g-35); background: linear-gradient(160deg, var(--g-12), transparent 55%), var(--x-card); }
.x-list { display: grid; gap: .95rem; margin-top: 1.4rem; }
.x-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.05rem; color: var(--s-text); }
.x-list li::before { content: "✓"; flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 900; background: var(--g); color: #0A0A0A; margin-top: .05rem; }
.x-side.you .x-list li::before { content: "→"; background: transparent; border: 1px solid var(--x-edge-hi); color: var(--x-body); }
.x-side.you .x-list li { color: var(--x-body); }

/* ---------- SESION ---------- */
.x-session { display: grid; gap: 18px; }
@media (min-width: 960px) { .x-session { grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } }
.x-flow3 { display: grid; gap: 0; margin-top: 2rem; }
.x-flow3 li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1rem; padding-bottom: 1.6rem; }
.x-flow3 li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 48px; bottom: 4px; width: 1px; background: linear-gradient(var(--g), transparent); }
.x-flow3 .n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--g-35); color: var(--g); font-family: 'Anton', sans-serif; font-size: 1.1rem; background: var(--g-12); }
.x-form { display: grid; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.2rem); }
.x-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--x-body); margin-bottom: .45rem; }
.x-field input, .x-field select {
  width: 100%; border-radius: 12px; border: 1px solid var(--x-edge-hi); background: color-mix(in srgb, var(--s-bg) 70%, transparent);
  color: var(--s-text); padding: .9rem 1rem; font: inherit; font-size: .98rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.x-field input::placeholder { color: var(--x-dim); }
.x-field input:focus, .x-field select:focus { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-12); }
.x-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.x-pills label { margin: 0; }
.x-pills input { position: absolute; opacity: 0; pointer-events: none; }
.x-pills span { display: inline-flex; padding: .6rem .9rem; border-radius: 999px; border: 1px solid var(--x-edge-hi); font-size: .85rem; color: var(--x-body); cursor: pointer; transition: all .2s; }
.x-pills input:checked + span { border-color: var(--g); background: var(--g-12); color: var(--s-text); }
.x-pills input:focus-visible + span { outline: 2px solid var(--g); outline-offset: 2px; }
.x-grid2 { display: grid; gap: 1rem; }
@media (min-width: 560px) { .x-grid2 { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ ---------- */
.x-faq { border-top: 1px solid var(--x-edge); }
.x-faq details { border-bottom: 1px solid var(--x-edge); }
.x-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.6rem 0; cursor: pointer; font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq .pm { flex: 0 0 34px; height: 34px; border-radius: 50%; border: 1px solid var(--x-edge-hi); display: grid; place-items: center; color: var(--g); transition: transform .3s, background .3s; }
.x-faq details[open] .pm { transform: rotate(45deg); background: var(--g-12); }
.x-faq .ans { padding: 0 0 1.6rem; max-width: 62ch; }

/* ---------- pendiente de confirmar (§5) ---------- */
.x-pend { display: inline-flex; align-items: center; gap: .35rem; border: 1px dashed var(--x-edge-hi); border-radius: 999px; padding: .15rem .55rem; font-family: Archivo, sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--x-dim); white-space: nowrap; vertical-align: middle; }

/* reveal generico de esta capa */
.x-rv { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.x-rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .x-in, .x-rv { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .x-aura { animation: none; }
  .x-funnel .ln-g { animation: none; }
  .x-rot > span { transition: none; }
}

/* header compacto al bajar */
.x-head.is-scrolled > .x-wrap { height: 60px; }
.x-head > .x-wrap { transition: height .3s ease; }

/* Publicado sin cifras sin fuente (§5): las etiquetas [PENDIENTE CONFIRMACIÓN] y lo que
   dependen de ellas siguen en el HTML pero no se ven. Para activar un dato: poner la cifra
   real y quitar la clase x-pendiente / el span .x-pend. */
.x-pend, .x-pendiente { display: none !important; }
.x-meter-row { grid-template-columns: 44px 1fr; }


/* =========================================================
   RONDA 2 · formula fluida, metodo pro, nombre del metodo
   ========================================================= */
.x-method-name { font-family: 'Anton', sans-serif; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: .05em; color: var(--g); text-transform: uppercase; }
.x-method-name sup { font-size: .5em; letter-spacing: 0; }

/* ---- formula: se reproduce sola al entrar, sin fijar el scroll ---- */
.x-fsec .x-term { color: var(--x-dim); transition: color .6s ease, text-shadow .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.x-fsec .x-term[data-t="trafico"]::after { content: ""; position: absolute; left: -3%; top: 55%; height: .07em; width: 0; background: #c84040; border-radius: 1em; transition: width .6s cubic-bezier(.6,0,.2,1) .5s; }
.x-fsec.is-in .x-term[data-t="trafico"]::after { width: 106%; }
.x-fsec.is-in .x-term[data-t="ctr"] { color: var(--g); text-shadow: 0 0 40px rgba(31,191,107,.35); transform: translateY(-.04em); transition-delay: 1.2s; }
.x-fsec.is-in .x-term[data-t="cvr"] { color: var(--g); text-shadow: 0 0 40px rgba(31,191,107,.35); transform: translateY(-.04em); transition-delay: 1.8s; }
.x-fsec.is-in .x-term[data-t="ventas"] { color: var(--s-text); transition-delay: 2.4s; }
.x-fcards { display: grid; gap: 14px; text-align: left; }
@media (min-width: 820px) { .x-fcards { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.x-fcard { position: relative; border-radius: 22px; padding: 1.7rem; background: var(--x-card); border: 1px solid var(--x-edge); opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.x-fcard:nth-child(1) { transition-delay: .3s; } .x-fcard:nth-child(2) { transition-delay: 1.1s; } .x-fcard:nth-child(3) { transition-delay: 1.7s; }
.x-fsec.is-in .x-fcard { opacity: 1; transform: none; }
.x-fsec.is-in .x-fcard:not(.is-bad) { border-color: var(--g-35); }
.x-fcard.is-bad h3 { text-decoration: line-through; text-decoration-color: rgba(200,64,64,.8); text-decoration-thickness: .08em; color: var(--x-dim); }
.x-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.x-ring circle { fill: none; stroke-width: 6; }
.x-ring .bg { stroke: var(--x-edge); }
.x-ring .fg { stroke: var(--g); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) 1.4s; filter: drop-shadow(0 0 6px rgba(31,191,107,.6)); }
.x-fsec.is-in .x-ring .fg { stroke-dashoffset: 24; }
.x-fcard:nth-child(3) .x-ring .fg { transition-delay: 2s; }
.x-spend { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.x-spend i { width: 12px; border-radius: 4px 4px 0 0; background: rgba(200,64,64,.75); height: 8%; transition: height .9s cubic-bezier(.2,.8,.2,1); }
.x-fsec.is-in .x-spend i:nth-child(1) { height: 22%; transition-delay: .4s; } .x-fsec.is-in .x-spend i:nth-child(2) { height: 36%; transition-delay: .5s; }
.x-fsec.is-in .x-spend i:nth-child(3) { height: 50%; transition-delay: .6s; } .x-fsec.is-in .x-spend i:nth-child(4) { height: 66%; transition-delay: .7s; }
.x-fsec.is-in .x-spend i:nth-child(5) { height: 82%; transition-delay: .8s; } .x-fsec.is-in .x-spend i:nth-child(6) { height: 100%; transition-delay: .9s; }
.x-fclose { font-size: clamp(1.4rem, 3vw, 2.3rem); opacity: 0; transform: translateY(14px); transition: opacity .7s ease 2.6s, transform .7s ease 2.6s; }
.x-fsec.is-in .x-fclose { opacity: 1; transform: none; }
@media (max-width: 640px) { .x-fsec .x-formula { flex-direction: row; font-size: clamp(1.9rem, 9.4vw, 2.6rem); gap: .08em .22em; } }

/* ---- cabeceras de panel ---- */
.x-ph-t { display: block; font-family: 'InterVariable', Archivo, sans-serif; font-weight: 700; letter-spacing: -.01em; color: var(--s-text); font-size: 1rem; }
.x-ph-s { display: block; font-size: .78rem; color: var(--x-dim); margin-top: 2px; }
.x-count { display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--x-edge-hi); font-size: .72rem; font-weight: 600; color: var(--x-body); white-space: nowrap; }
.x-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid var(--x-edge); }

/* ---- 01 · diagnostico: paneles en capas ---- */
.x-v1 { position: relative; height: 100%; }
.x-v1-back { position: absolute; right: -4%; top: -5%; width: 62%; opacity: .55; transform: rotate(2deg); }
.x-v1-list { padding: .9rem 1.2rem; display: grid; gap: .6rem; font-size: .85rem; color: var(--x-body); }
.x-v1-list li::before { content: "• "; color: var(--g); }
.x-v1-front { position: relative; margin-top: 7%; }
.x-tabs { display: flex; gap: 1.2rem; padding: 0 1.2rem; border-bottom: 1px solid var(--x-edge); font-size: .8rem; font-weight: 600; color: var(--x-dim); overflow: hidden; white-space: nowrap; }
.x-tabs span { padding: .75rem 0; }
.x-tabs .on { color: var(--s-text); box-shadow: inset 0 -2px 0 var(--g); }
.x-rel { display: inline-block; width: 44px; height: 5px; border-radius: 5px; background: var(--x-edge); margin-right: .45rem; vertical-align: middle; overflow: hidden; }
.x-rel i { display: block; height: 100%; width: var(--w); background: var(--g); border-radius: 5px; }
.x-v1-foot { padding: .9rem 1.2rem; border-top: 1px solid var(--x-edge); font-size: .86rem; color: var(--x-body); }
.x-ins tbody tr:hover td { background: color-mix(in srgb, var(--s-text) 4%, transparent); }

/* ---- 02 · marca: comparador + brand kit ---- */
.x-v2 { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.x-v2 .x-cmp { width: min(100%, 400px); box-shadow: var(--x-shadow); border: 1px solid var(--x-edge-hi); cursor: ew-resize; touch-action: pan-y; }
.x-v2 .x-cmp input { pointer-events: none; }
.x-kit { display: flex; flex-direction: column; gap: .35rem; padding: .8rem .95rem; border-radius: 16px; background: var(--x-card-hi); border: 1px solid var(--x-edge); box-shadow: var(--x-shadow); font-size: .78rem; color: var(--x-body); }
.x-kit-l { font-size: .7rem; font-weight: 700; color: var(--x-dim); }
.x-kit-aa { font-size: 2rem; line-height: 1; color: var(--s-text); }
.x-kit-s { font-size: .72rem; color: var(--x-dim); }
.x-kit-tags { display: flex; flex-wrap: wrap; gap: .3rem; } .x-kit-tags i { font-style: normal; padding: .2rem .5rem; border-radius: 999px; border: 1px solid var(--x-edge-hi); font-size: .7rem; }
.x-kit-mood { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; } .x-kit-mood img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.x-sw { display: flex; gap: 6px; } .x-sw i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--x-edge-hi); }
.x-hint { margin-top: .9rem; font-size: .8rem; font-weight: 600; color: var(--x-dim); }
@media (min-width: 960px) {
  .x-kits { position: absolute; inset: 0; pointer-events: none; }
  .x-kit { position: absolute; width: 148px; }
  .x-kit.k1 { left: 0; top: 10%; } .x-kit.k2 { right: 0; top: 4%; }
  .x-kit.k3 { left: 2%; bottom: 12%; } .x-kit.k4 { right: 2%; bottom: 18%; }
  .x-kit { animation: xFloat 7s ease-in-out infinite; } .x-kit.k2 { animation-delay: -2s; } .x-kit.k3 { animation-delay: -4s; } .x-kit.k4 { animation-delay: -5s; }
}
@keyframes xFloat { 50% { translate: 0 -8px; } }
@media (max-width: 959px) {
  .x-kits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 12px; }
  .x-kits .x-kit { position: static; box-shadow: none; }
  .x-v2 .x-cmp { width: 100%; }
}

/* ---- 03 · motor ---- */
.x-v3 { height: 100%; padding: 1rem; display: flex; align-items: center; }
.x-funnel .ln-o { stroke: var(--g); stroke-width: 1.5; }
.x-funnel .pt { fill: var(--g); filter: drop-shadow(0 0 4px var(--g)); }
.x-funnel .loop { stroke-opacity: .6; }
.x-funnel .box { fill: color-mix(in srgb, var(--s-panel) 80%, #1FBF6B 20%); stroke: var(--g); stroke-width: 1.5; }
.x-funnel .chip rect { fill: var(--g-12); stroke: var(--g-35); }
.x-funnel .chip text { fill: var(--g); font-weight: 700; }
.x-funnel .t-lab { font-family: Archivo, sans-serif; font-weight: 700; letter-spacing: 0; fill: var(--x-body); }

/* ---- 04 · escala: grafico de barras ---- */
.x-v4 { display: flex; flex-direction: column; height: 100%; }
.x-v4-body { flex: 1; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.2rem; }
.x-bars { flex: 1; min-height: 150px; display: flex; align-items: stretch; gap: 6px; }
.x-b { flex: 1; display: flex; flex-direction: column-reverse; border-radius: 6px; overflow: hidden; }
.x-b .po { height: var(--o); background: linear-gradient(to top, rgba(31,191,107,.55), var(--g)); transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(.2,.8,.2,1) var(--d); }
.x-b .pp { flex: 1; background: color-mix(in srgb, var(--s-text) 10%, transparent); }
.x-vis.is-on .x-b .po, .x-step-vis .x-b .po { transform: none; }
.x-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: .8rem; color: var(--x-body); }
.x-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; vertical-align: middle; }
.x-legend .lo { background: var(--g); } .x-legend .lp { background: color-mix(in srgb, var(--s-text) 18%, transparent); }
.x-legend b { margin-left: auto; color: var(--g); font-size: 1rem; }
.x-flag { padding: .6rem; } .x-flag b { font-size: 1.15rem; }

/* movil: todo el bloque del metodo con altura natural y sin cortes */
@media (max-width: 959px) {
  .x-step-vis .x-v1-back { display: none; }
  .x-step-vis .x-v1-front { margin-top: 0; }
  .x-step-vis .x-v4-body { padding: 1rem; }
  .x-step-vis .x-bars { min-height: 130px; }
  .x-step-vis .x-flags { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .x-step-vis .x-flag { padding: .45rem .2rem; } .x-step-vis .x-flag span { display: none; }
  .x-step-vis .x-v3 { padding: .4rem; }
}


/* =========================================================
   RONDA 3 · cristal acanalado en el hero, logo en el H1,
   flujo de pedidos mejorado
   ========================================================= */
.x-glass { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: min(820px, 100%); z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
/* el logo en el titular, a la escala del H1 */
.x-h1 .amz-pill { font-size: 1em; border-radius: .22em; margin: 0 .1em .08em 0; vertical-align: .02em; }
html[data-theme="papel"] .x-h1 .amz-pill { background: #151515; border-color: #2A2A2A; }

/* haces de luz por los carriles */
/* carriles: pista ancha y tenue + rail punteado que avanza + dos haces */
.flow-lane svg path.flow-track { stroke: rgba(246,244,239,.045); stroke-width: 9; stroke-linecap: round; }
.flow-lane svg .flow-rail { fill: none; stroke: rgba(141,138,132,.55); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 11; animation: flowRail 1.6s linear infinite; }
@keyframes flowRail { to { stroke-dashoffset: -12; } }
.flow-lane svg .flow-beam { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 150 850; animation: flowBeam 3.9s linear infinite; filter: drop-shadow(0 0 5px rgba(31,191,107,.7)); }
.flow-lane svg .flow-beam-2 { stroke-width: 1.6; stroke-dasharray: 60 940; animation-duration: 2.7s; }
html[data-theme="papel"] .flow-lane svg path.flow-track { stroke: rgba(22,21,15,.06); }
html[data-theme="papel"] .flow-lane svg .flow-rail { stroke: rgba(22,21,15,.3); }
@keyframes flowBeam { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* tarjetas de pedido: entran con un salto y un acento verde */
@keyframes flow-outbound {
  0%   { offset-distance: 54%;  opacity: 0; transform: scale(.82); }
  7%   { opacity: 1; transform: scale(1.04); }
  12%  { transform: scale(1); }
  86%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; transform: scale(1); }
}
.flow-card { box-shadow: inset 2px 0 0 #1FBF6B, 0 10px 30px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(31,191,107,.08); }
.flow-card .flow-now { display: inline-flex; align-items: center; gap: 4px; color: #1FBF6B !important; }
.flow-card .flow-now i { width: 5px; height: 5px; border-radius: 50%; background: #1FBF6B; box-shadow: 0 0 6px #1FBF6B; animation: flowLive 1.2s ease-in-out infinite; }
@keyframes flowLive { 50% { opacity: .3; } }

/* llegada al nucleo: onda extra, latido y chispas */
.flow-core.is-hit img { animation: flow-flota 5.4s ease-in-out infinite, flowHit .5s cubic-bezier(.2,.8,.2,1); }
@keyframes flowHit { 30% { scale: 1.07; } 100% { scale: 1; } }
.flow-core.is-hit::before { animation: flowFlash .6s ease-out; }
@keyframes flowFlash { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
.flow-spark { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #1FBF6B; box-shadow: 0 0 8px #1FBF6B; z-index: 4; animation: flowSpark .7s cubic-bezier(.2,.8,.2,1) forwards; pointer-events: none; }
@keyframes flowSpark { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
/* contador de ventas del dia */
.flow-meter { position: absolute; left: 492px; top: 8px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px;
  background: var(--s-card); border: 1px solid var(--s-card-line); box-shadow: 0 10px 30px -12px rgba(0,0,0,.7); font-family: Archivo, sans-serif; white-space: nowrap; }
.flow-meter span { font-size: 11px; color: var(--s-card-sub); }
.flow-meter b { font-family: 'InterVariable', Archivo, sans-serif; font-feature-settings: 'tnum' 1, 'cv11' 1; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--s-card-text); }
.flow-meter em { font-style: normal; font-size: 11px; font-weight: 600; color: #1FBF6B; padding-left: 10px; border-left: 1px solid var(--s-card-line); }
.flow-meter.is-up b { animation: flowUp .7s ease; }
@keyframes flowUp { 20% { color: #1FBF6B; } 100% { color: inherit; } }
.flow-live { width: 7px; height: 7px; border-radius: 50%; background: #1FBF6B; box-shadow: 0 0 0 0 rgba(31,191,107,.6); animation: flowPing 1.8s infinite; }
@keyframes flowPing { 0% { box-shadow: 0 0 0 0 rgba(31,191,107,.6); } 100% { box-shadow: 0 0 0 10px rgba(31,191,107,0); } }
@media (prefers-reduced-motion: reduce) {
  .flow-lane svg .flow-beam, .flow-lane svg .flow-rail, .flow-live, .flow-card .flow-now i { animation: none; }
}


/* =========================================================
   RONDA 4 · hero compacto + bloques de la formula animados
   ========================================================= */
.x-hlead { font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.6; color: var(--x-body); text-wrap: pretty; }

.x-fcard { padding: 1.3rem; }
.x-fviz { position: relative; height: 220px; margin-bottom: 1.3rem; padding: 36px 14px 14px; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--s-bg) 70%, transparent); border: 1px solid var(--x-edge); }
.x-fviz::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px circle at 80% 0%, var(--g-12), transparent 60%); opacity: 0; transition: opacity .6s; }
.x-fcard:not(.is-bad) .x-fviz::after { opacity: 1; }
.x-flabel { position: absolute; left: 14px; top: 11px; font-size: .72rem; font-weight: 600; color: var(--x-dim); }
.x-fcard:hover { border-color: var(--g-35); }
.x-fcard.is-bad:hover { border-color: rgba(200,64,64,.4); }

/* 1 · trafico: el gasto sube, las ventas no */
.x-chart { width: 100%; height: 132px; overflow: visible; }
.x-chart .grid line { stroke: var(--x-edge); stroke-width: 1; }
.x-chart .spend { fill: none; stroke: #c84040; stroke-width: 2.6; stroke-linejoin: round; stroke-dasharray: 360; stroke-dashoffset: 360; }
.x-chart .sales { fill: none; stroke: var(--x-dim); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0; }
.x-chart .area { opacity: 0; }
.x-chart .dot { fill: #c84040; opacity: 0; }
.x-fsec.is-in .x-chart .spend { animation: xDraw 5s cubic-bezier(.5,0,.2,1) .3s infinite; }
.x-fsec.is-in .x-chart .area { animation: xArea 5s ease .3s infinite; }
.x-fsec.is-in .x-chart .sales { animation: xFade 5s ease .3s infinite; }
.x-fsec.is-in .x-chart .dot { animation: xDot 5s ease .3s infinite; }
@keyframes xDraw { 0% { stroke-dashoffset: 360; } 45%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes xArea { 0%, 25% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xFade { 0% { opacity: 0; } 20%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xDot { 0%, 44% { opacity: 0; r: 4; } 50% { opacity: 1; r: 7; } 56%, 90% { opacity: 1; r: 4; } 100% { opacity: 0; } }
.x-legend2 { display: flex; gap: 1rem; margin-top: .4rem; font-size: .74rem; color: var(--x-body); }
.x-legend2 i { display: inline-block; width: 14px; height: 3px; border-radius: 3px; margin-right: .4rem; vertical-align: middle; }
.x-legend2 .r { background: #c84040; } .x-legend2 .g { background: var(--x-dim); }

/* 2 · CTR: el cursor elige tu producto entre los resultados */
.x-serp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.x-tile2 { position: relative; border-radius: 10px; padding: 6px; background: color-mix(in srgb, var(--s-text) 5%, transparent); border: 1px solid var(--x-edge); transition: none; }
.x-tile2 img { display: block; width: 100%; height: 50px; object-fit: cover; border-radius: 6px; filter: grayscale(1); opacity: .55; }
.x-tile2 > i { display: block; height: 5px; border-radius: 5px; margin-top: 6px; background: color-mix(in srgb, var(--s-text) 14%, transparent); }
.x-tile2 > i.s { width: 55%; margin-top: 4px; }
.x-picked { position: absolute; top: -8px; right: -6px; padding: .15rem .45rem; border-radius: 999px; background: var(--g); color: #0A0A0A; font-size: .62rem; font-weight: 800; opacity: 0; transform: scale(.6); }
.x-fsec.is-in .x-tile2.is-us { animation: xUs 4.6s ease 1s infinite; }
.x-fsec.is-in .x-tile2.is-us img { animation: xUsImg 4.6s ease 1s infinite; }
.x-fsec.is-in .x-picked { animation: xPick 4.6s cubic-bezier(.2,.8,.2,1) 1s infinite; }
.x-fsec.is-in .x-tile2:not(.is-us) { animation: xOthers 4.6s ease 1s infinite; }
@keyframes xUs { 0%, 40% { border-color: var(--x-edge); transform: none; box-shadow: none; } 48%, 88% { border-color: var(--g); transform: scale(1.05); box-shadow: 0 0 0 4px var(--g-12), 0 10px 30px -10px rgba(31,191,107,.6); } 100% { border-color: var(--x-edge); transform: none; } }
@keyframes xUsImg { 0%, 40% { filter: grayscale(1); opacity: .55; } 48%, 88% { filter: none; opacity: 1; } 100% { filter: grayscale(1); opacity: .55; } }
@keyframes xPick { 0%, 44% { opacity: 0; transform: scale(.6); } 52%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes xOthers { 0%, 44% { opacity: 1; } 52%, 88% { opacity: .45; } 100% { opacity: 1; } }

.x-cur { position: absolute; width: 20px; height: 27px; z-index: 3; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); opacity: 0; pointer-events: none; }
.x-fsec.is-in .x-cur.c1 { animation: xCur1 4.6s cubic-bezier(.45,0,.2,1) 1s infinite; }
@keyframes xCur1 { 0% { left: 88%; top: 30%; opacity: 0; } 8% { opacity: 1; } 36% { left: 26%; top: 70%; transform: scale(1); } 41% { transform: scale(.8); } 46% { left: 26%; top: 70%; transform: scale(1); } 80% { left: 34%; top: 82%; opacity: 1; } 92%, 100% { opacity: 0; left: 34%; top: 82%; } }

/* 3 · CVR: la ficha convierte, el embudo se ensancha */
.x-pdp { position: relative; display: flex; gap: 10px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--s-text) 5%, transparent); border: 1px solid var(--x-edge); }
.x-pdp > img { width: 74px; height: 86px; object-fit: cover; border-radius: 8px; }
.x-pdp-i { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.x-pdp-i > i { display: block; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--s-text) 14%, transparent); }
.x-pdp-i > i.short { width: 60%; }
.x-stars2 { color: var(--g); font-size: .7rem; letter-spacing: .06em; }
.x-buy { margin-top: auto; align-self: flex-start; padding: .35rem .7rem; border-radius: 999px; background: var(--g); color: #0A0A0A; font-size: .66rem; font-weight: 800; }
.x-toast { position: absolute; right: 10px; top: -4px; padding: .25rem .55rem; border-radius: 8px; background: var(--x-card-hi); border: 1px solid var(--g-35); color: var(--g); font-size: .7rem; font-weight: 800; opacity: 0; }
.x-funnel2 { display: grid; gap: 7px; margin-top: 12px; }
.x-funnel2 > div { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; font-size: .72rem; color: var(--x-body); }
.x-funnel2 b { display: block; height: 9px; width: var(--w); border-radius: 9px; background: color-mix(in srgb, var(--s-text) 14%, transparent); transform-origin: left; }
.x-funnel2 b.g { background: linear-gradient(90deg, rgba(31,191,107,.5), var(--g)); box-shadow: 0 0 12px rgba(31,191,107,.4); transform: scaleX(.25); }
.x-fsec.is-in .x-cur.c2 { animation: xCur2 4.6s cubic-bezier(.45,0,.2,1) 1.8s infinite; }
@keyframes xCur2 { 0% { left: 90%; top: 88%; opacity: 0; } 8% { opacity: 1; } 34% { left: 42%; top: 44%; transform: scale(1); } 39% { transform: scale(.8); } 44% { left: 42%; top: 44%; transform: scale(1); } 80% { opacity: 1; left: 50%; top: 60%; } 92%, 100% { opacity: 0; left: 50%; top: 60%; } }
.x-fsec.is-in .x-buy { animation: xBuy 4.6s ease 1.8s infinite; }
@keyframes xBuy { 0%, 36% { transform: none; box-shadow: none; } 40% { transform: scale(.92); } 46% { transform: scale(1.06); box-shadow: 0 0 0 6px var(--g-20); } 56%, 100% { transform: none; box-shadow: none; } }
.x-fsec.is-in .x-toast { animation: xToast 4.6s cubic-bezier(.2,.8,.2,1) 1.8s infinite; }
@keyframes xToast { 0%, 40% { opacity: 0; transform: translateY(8px) scale(.8); } 48%, 84% { opacity: 1; transform: translateY(-4px) scale(1); } 100% { opacity: 0; transform: translateY(-14px); } }
.x-fsec.is-in .x-funnel2 b.g { animation: xGrow 4.6s cubic-bezier(.2,.8,.2,1) 1.8s infinite; }
@keyframes xGrow { 0%, 40% { transform: scaleX(.25); } 60%, 90% { transform: scaleX(1); } 100% { transform: scaleX(.25); } }

@media (prefers-reduced-motion: reduce) {
  .x-chart .spend { stroke-dashoffset: 0; } .x-chart .sales, .x-chart .area, .x-chart .dot { opacity: 1; }
  .x-cur { display: none; } .x-funnel2 b.g { transform: none; }
}

/* =========================================================
   RONDA 5 · pedido cuadrado y legible, nucleo con orbitas
   ========================================================= */
.flow-card {
  width: 156px; margin: 0; offset-anchor: 50% 50%;
  flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 14px 13px;
  border-radius: 18px; letter-spacing: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--s-card) 88%, #1FBF6B 12%), var(--s-card) 60%);
  border: 1px solid rgba(31,191,107,.35);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(31,191,107,.06), 0 0 30px -8px rgba(31,191,107,.35);
}
.flow-card .fo-head { display: flex; align-items: center; gap: 7px; }
.flow-card .flow-ico { width: 22px; height: 22px; border-radius: 6px; }
.flow-card .flow-ico img { width: 17px; height: 17px; }
.flow-card .fo-head b { font-size: 11px; font-weight: 700; color: var(--s-card-sub); }
.flow-card .fo-lab { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px; line-height: 1; color: #1FBF6B; font-weight: 700; }
.flow-card .fo-lab i { width: 6px; height: 6px; border-radius: 50%; background: #1FBF6B; box-shadow: 0 0 8px #1FBF6B; animation: flowLive 1.2s ease-in-out infinite; }
.flow-card .fo-amt { display: block; margin-top: 6px; font-family: 'InterVariable', Archivo, sans-serif; font-feature-settings: 'tnum' 1, 'cv11' 1; font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -.035em; color: var(--s-card-text); }
.flow-card .fo-amt small { font-size: .6em; color: var(--s-card-sub); letter-spacing: 0; }
.flow-card .fo-items { display: block; margin-top: 7px; font-size: 10.5px; line-height: 1.2; color: var(--s-card-sub); }
html[data-theme="papel"] .flow-card { background: linear-gradient(160deg, #EAF6EF, #FFFFFF 60%); }

/* pedidos: nacen pegados al logo, crecen y se alejan */
@keyframes flow-outbound {
  0%   { offset-distance: 56%; opacity: 0; transform: scale(.5); }
  8%   { opacity: 1; transform: scale(1.08); }
  14%  { transform: scale(1); }
  82%  { opacity: 1; }
  100% { offset-distance: 97%; opacity: 0; transform: scale(.94); }
}
@keyframes flow-outbound-m {
  0%   { offset-distance: 56%; opacity: 0; transform: scale(.5); }
  10%  { opacity: 1; transform: scale(1.08); }
  16%  { transform: scale(1); }
  80%  { opacity: 1; }
  100% { offset-distance: 73%; opacity: 0; transform: scale(.94); }
}
@media (max-width: 767px) { .flow-out { animation-name: flow-outbound-m !important; } }

/* clientes: al llegar se encogen y el logo "se los traga" */
@keyframes flow-inbound {
  0%   { offset-distance: 0%;  opacity: 0; transform: scale(.9); }
  12%  { opacity: 1; transform: scale(1); }
  86%  { opacity: 1; transform: scale(1); }
  100% { offset-distance: 46%; opacity: 0; transform: scale(.3); }
}

/* orbitas del nucleo */
.flow-orbit { position: absolute; left: 50%; top: 50%; width: 128%; height: 128%; margin: -64% 0 0 -64%; border-radius: 50%; z-index: 1; pointer-events: none;
  border: 1.5px solid transparent; border-top-color: #1FBF6B; border-right-color: rgba(31,191,107,.25);
  filter: drop-shadow(0 0 6px rgba(31,191,107,.6)); animation: flowOrbit 3.4s linear infinite; }
.flow-orbit.o2 { width: 150%; height: 150%; margin: -75% 0 0 -75%; border: 1px dashed rgba(31,191,107,.28); filter: none; animation-duration: 18s; animation-direction: reverse; }
@keyframes flowOrbit { to { transform: rotate(360deg); } }

/* el importe sube desde el logo */
.flow-coin { position: absolute; left: 50%; top: 18%; z-index: 5; padding: 4px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: #1FBF6B; color: #0A0A0A; font: 800 12px/1 Archivo, sans-serif; box-shadow: 0 8px 20px -6px rgba(31,191,107,.8);
  animation: flowCoin 1.5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes flowCoin { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -12px) scale(1.05); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -54px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flow-orbit, .flow-coin { display: none; } }

/* rotativo del hero: Inter en verde (Playfair partido en letras pierde el trazo) */
.x-rot > span.x-acc { font-family: 'InterVariable', Archivo, sans-serif; font-style: normal; font-weight: 700; letter-spacing: -.035em;
  font-feature-settings: 'cv11' 1, 'cv03' 1, 'cv04' 1, 'cv09' 1; color: #1FBF6B; text-shadow: 0 0 40px rgba(31,191,107,.25); }
.x-rot > span { font-size: clamp(1.7rem, 7vw, 5.6rem); line-height: 1.08; }

/* galeria: etiqueta sobre cada pieza, sin pisar a la vecina */
.x-frame { padding-top: 26px; }
.x-frame figcaption { gap: .6rem; align-items: baseline; }
.x-frame figcaption span { min-width: 0; }
.x-frame figcaption span:first-child { flex: 1 1 auto; }
.x-frame figcaption span:last-child { flex: 0 0 auto; color: var(--x-dim); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .x-gcol:nth-child(2), .x-gcol:nth-child(4) { margin-top: 0; }
  .x-frame { padding-top: 38px; }
  .x-frame figcaption { flex-direction: column; gap: 1px; }
  .x-frame figcaption span { font-size: .72rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* =========================================================
   MARCAS · rejilla escaneada
   ========================================================= */
.x-bgrid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--x-edge); border-left: 1px solid var(--x-edge); overflow: hidden; border-radius: 18px; }
@media (min-width: 720px) { .x-bgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .x-bgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.x-bcell { position: relative; display: grid; place-items: center; aspect-ratio: 1.5; padding: 14%; border-right: 1px solid var(--x-edge); border-bottom: 1px solid var(--x-edge); transition: background .4s; }
.x-bcell img { max-width: 100%; max-height: 36px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: .62; transition: filter .4s, opacity .4s, transform .4s; }
html[data-theme="papel"] .x-bcell img { filter: grayscale(1) brightness(0); opacity: .4; }
.x-bcell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(31,191,107,.22), transparent 70%); opacity: 0; }
.x-brands.is-in .x-bcell::after { animation: xCell 6s ease-in-out var(--d, 0s) infinite; }
.x-brands.is-in .x-bcell img { animation: xCellImg 6s ease-in-out var(--d, 0s) infinite; }
@keyframes xCell { 0%, 100% { opacity: 0; } 6% { opacity: 1; } 22% { opacity: 0; } }
@keyframes xCellImg { 0%, 100% { opacity: .62; } 6% { opacity: 1; filter: none; transform: scale(1.08); } 24% { opacity: .62; transform: none; } }
.x-bcell:hover { background: rgba(31,191,107,.06); }
.x-bcell:hover img { filter: none; opacity: 1; animation: none; }
.x-bmore { background: var(--g-12); grid-column: span 2; aspect-ratio: auto; }
.x-bmore b { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1; color: var(--g); }
.x-bmore span { font-size: .78rem; font-weight: 600; color: var(--x-body); margin-top: -8px; }
.x-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #1FBF6B; box-shadow: 0 0 18px 4px rgba(31,191,107,.55), 0 0 60px 18px rgba(31,191,107,.15); opacity: 0; pointer-events: none; }
.x-brands.is-in .x-scan { animation: xScan 6s linear infinite; }
@keyframes xScan { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .x-scan { display: none; } .x-bcell img, .x-bcell::after { animation: none !important; } }

/* =========================================================
   FORMULA · a lo bestia
   ========================================================= */
.x-fcards { perspective: 1200px; }
.x-fcard { transform-style: preserve-3d; will-change: transform; }
.x-fsec.is-in .x-fcard { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity .7s ease, transform .25s ease, border-color .3s; }
/* borde de luz que recorre las tarjetas buenas */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.x-glow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 60%, rgba(31,191,107,.9) 78%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .6s; animation: xAng 4s linear infinite; }
.x-fsec.is-in .x-glow::before { opacity: 1; transition-delay: 2s; }
.x-glow[data-t="cvr"]::before { animation-delay: -2s; }
@keyframes xAng { to { --ang: 360deg; } }
/* formula: barrido de luz sobre CTR y CVR */
.x-fsec .x-term[data-t="ctr"], .x-fsec .x-term[data-t="cvr"] { background: linear-gradient(100deg, currentColor 0 42%, #F6F4EF 50%, currentColor 58% 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.x-fsec.is-in .x-term[data-t="ctr"], .x-fsec.is-in .x-term[data-t="cvr"] { -webkit-text-fill-color: transparent; animation: xSweep 3.2s ease-in-out 2.6s infinite; }
@keyframes xSweep { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }
/* trafico: el dinero se quema */
.x-burn { position: absolute; inset: 0; pointer-events: none; }
.x-burn i { position: absolute; left: var(--x); bottom: 30%; font-style: normal; font-weight: 800; font-size: .8rem; color: #c84040; opacity: 0; }
.x-fsec.is-in .x-burn i { animation: xBurn 3.4s ease-in var(--dl) infinite; }
@keyframes xBurn { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-90px) scale(1.2) rotate(18deg); opacity: 0; filter: blur(2px); } }
/* CTR: etiqueta que sube tras elegir */
.x-badge-up { position: absolute; right: 12px; top: 9px; padding: .2rem .5rem; border-radius: 999px; background: var(--g); color: #0A0A0A; font-size: .68rem; font-weight: 800; opacity: 0; z-index: 4; }
.x-fsec.is-in .x-badge-up { animation: xUp 4.6s cubic-bezier(.2,.8,.2,1) 1s infinite; }
@keyframes xUp { 0%, 46% { opacity: 0; transform: translateY(10px); } 54%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
/* CVR: confeti en cada venta */
.x-confetti { position: absolute; left: 40%; top: 72%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.x-confetti i { position: absolute; width: 5px; height: 5px; border-radius: 1px; background: var(--g); opacity: 0; }
.x-confetti i:nth-child(3n) { background: #F6F4EF; } .x-confetti i:nth-child(4n) { border-radius: 50%; }
.x-fsec.is-in .x-confetti i { animation: xConf 4.6s cubic-bezier(.1,.7,.3,1) 1.8s infinite; }
@keyframes xConf { 0%, 39% { opacity: 0; transform: rotate(var(--a)) translateX(0); } 42% { opacity: 1; } 62% { opacity: 0; transform: rotate(var(--a)) translateX(46px) rotate(200deg); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .x-glow::before, .x-burn, .x-confetti, .x-badge-up { display: none; } .x-fsec .x-term { -webkit-text-fill-color: currentColor !important; animation: none !important; } }

/* =========================================================
   BENTO · marca, una vuelta mas
   ========================================================= */
/* 01 · reticula de enfoque que se clava en el producto */
.x-reticle { position: absolute; left: 18%; right: 18%; top: 12%; height: 44%; z-index: 1; pointer-events: none; }
.x-reticle i { position: absolute; width: 22px; height: 22px; border: 2px solid #1FBF6B; opacity: 0; transition: all .7s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(31,191,107,.7)); }
.x-reticle i:nth-child(1) { left: -30px; top: -30px; border-right: 0; border-bottom: 0; }
.x-reticle i:nth-child(2) { right: -30px; top: -30px; border-left: 0; border-bottom: 0; }
.x-reticle i:nth-child(3) { left: -30px; bottom: -30px; border-right: 0; border-top: 0; }
.x-reticle i:nth-child(4) { right: -30px; bottom: -30px; border-left: 0; border-top: 0; }
.x-t1.is-in .x-reticle i { opacity: 1; transition-delay: .4s; }
.x-t1.is-in .x-reticle i:nth-child(1) { left: 0; top: 0; } .x-t1.is-in .x-reticle i:nth-child(2) { right: 0; top: 0; }
.x-t1.is-in .x-reticle i:nth-child(3) { left: 0; bottom: 0; } .x-t1.is-in .x-reticle i:nth-child(4) { right: 0; bottom: 0; }
.x-reticle span { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; padding: .25rem .6rem; border-radius: 999px; background: #1FBF6B; color: #0A0A0A; font-size: .7rem; font-weight: 800; opacity: 0; transition: opacity .5s 1.1s; }
.x-t1.is-in .x-reticle span { opacity: 1; }

/* 02 · CTR x CVR = ranking */
.x-dual { display: flex; align-items: center; gap: .8rem; margin-bottom: auto; flex-wrap: wrap; }
.x-ringbox { position: relative; width: 92px; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.x-ringbox svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.x-ringbox circle { fill: none; stroke-width: 6; }
.x-ringbox .bg { stroke: var(--x-edge); }
.x-ringbox .fg { stroke: var(--g); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201; filter: drop-shadow(0 0 6px rgba(31,191,107,.6)); transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .3s; }
.x-ringbox .f2 { transition-delay: .7s; }
.x-t2.is-in .x-ringbox .fg { stroke-dashoffset: 30; }
.x-ringbox b { font-size: 1rem; line-height: 1; color: var(--s-text); }
.x-ringbox span { font-size: .56rem; color: var(--x-dim); margin-top: 3px; }
.x-times { font-size: 1.6rem; color: var(--x-dim); }
.x-rankbox { flex: 1; min-width: 140px; }
.x-rankbox span { display: block; font-size: .72rem; font-weight: 600; color: var(--x-body); margin-bottom: .4rem; }
.x-rankbox svg { width: 100%; height: 70px; overflow: visible; }
.x-rankbox .ln { fill: none; stroke: var(--g); stroke-width: 2.5; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.6s ease 1.2s; filter: drop-shadow(0 0 5px rgba(31,191,107,.6)); }
.x-rankbox .ar { fill: rgba(31,191,107,.14); opacity: 0; transition: opacity 1s ease 1.8s; }
.x-t2.is-in .x-rankbox .ln { stroke-dashoffset: 0; } .x-t2.is-in .x-rankbox .ar { opacity: 1; }

/* 03 · la oferta se construye */
.x-offer { position: absolute; top: 1.2rem; left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; z-index: 1; }
.x-offer span { align-self: flex-start; padding: .3rem .65rem; border-radius: 999px; background: rgba(7,7,7,.75); border: 1px solid rgba(31,191,107,.5); color: #F6F4EF; font-size: .74rem; font-weight: 700; backdrop-filter: blur(6px); opacity: 0; transform: translateX(-14px); transition: all .5s cubic-bezier(.2,.8,.2,1); }
.x-offer span:first-child { background: #1FBF6B; color: #0A0A0A; border-color: #1FBF6B; }
.x-t3.is-in .x-offer span { opacity: 1; transform: none; }
.x-t3.is-in .x-offer span:nth-child(2) { transition-delay: .25s; } .x-t3.is-in .x-offer span:nth-child(3) { transition-delay: .5s; }

/* 04 · Rufus */
.x-rufus2 { margin-bottom: auto; border-radius: 16px; overflow: hidden; background: #FFFFFF; color: #0F1111; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); font-family: Archivo, sans-serif; }
.rf-head { display: flex; align-items: center; gap: .45rem; padding: .6rem .8rem; border-bottom: 1px solid #E7E7E7; }
.rf-ico { width: 18px; height: 18px; border-radius: 6px; background: conic-gradient(from 200deg, #FF9900, #F08804, #00A8E1, #FF9900); }
.rf-head b { font-size: .85rem; }
.rf-tag { font-size: .6rem; font-weight: 700; padding: .05rem .35rem; border-radius: 4px; background: #F0F2F2; color: #565959; }
.rf-body { display: flex; flex-direction: column; gap: .45rem; padding: .7rem; min-height: 150px; }
.rf-q { align-self: flex-end; max-width: 82%; padding: .45rem .7rem; border-radius: 14px 14px 4px 14px; background: #232F3E; color: #FFFFFF; font-size: .78rem; opacity: 0; transform: translateY(6px); transition: all .4s ease .3s; }
.rf-typing { align-self: flex-start; display: flex; gap: 3px; padding: .5rem .6rem; border-radius: 14px 14px 14px 4px; background: #F0F2F2; opacity: 0; }
.rf-typing i { width: 5px; height: 5px; border-radius: 50%; background: #565959; animation: rfDot 1s infinite; }
.rf-typing i:nth-child(2) { animation-delay: .15s; } .rf-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes rfDot { 50% { transform: translateY(-3px); opacity: .4; } }
.rf-a { align-self: flex-start; max-width: 86%; padding: .45rem .7rem; border-radius: 14px 14px 14px 4px; background: #F0F2F2; font-size: .78rem; line-height: 1.4; display: none; }
.rf-prod { align-self: flex-start; display: none; align-items: center; gap: .5rem; padding: .35rem; padding-right: .6rem; border: 1px solid #D5D9D9; border-radius: 10px; }
.rf-prod img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.rf-prod span { display: flex; flex-direction: column; gap: 3px; } .rf-prod span i { width: 70px; height: 5px; border-radius: 5px; background: #D5D9D9; }
.rf-prod em { font-style: normal; font-size: .62rem; color: #FF9900; }
.rf-prod b { font-size: .68rem; padding: .2rem .5rem; border-radius: 999px; background: #FFD814; }
.x-t4.is-in .rf-q { opacity: 1; transform: none; }
.x-t4.is-in .rf-typing { animation: rfType 1.4s steps(1) .9s forwards; }
@keyframes rfType { 0% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; display: none; } }
.x-t4.is-in .rf-a { animation: rfShow .4s ease 2.2s both; display: block; }
.x-t4.is-in .rf-prod { animation: rfShow .4s ease 2.7s both; display: flex; }
@keyframes rfShow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 05 · la tarjeta sale de la caja */
.x-thanks { position: absolute; left: 1.2rem; right: 1.2rem; top: 1.2rem; z-index: 1; display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; align-items: center; padding: .8rem .9rem; border-radius: 12px; background: #F6F4EF; color: #0A0A0A; box-shadow: 0 14px 30px -10px rgba(0,0,0,.7); transform: translateY(40px) rotate(-4deg); opacity: 0; transition: all .8s cubic-bezier(.2,.8,.2,1) .3s; }
.x-thanks b { font-size: .86rem; } .x-thanks span { grid-column: 1; font-size: .72rem; color: #56544F; }
.x-thanks .x-qr { grid-row: 1 / 3; grid-column: 2; width: 42px; height: 42px; background:
  conic-gradient(from 90deg at 3px 3px, transparent 25%, #0A0A0A 0) 0 0/7px 7px; border-radius: 4px; opacity: 1; -webkit-mask: none; }
.x-t5.is-in .x-thanks { opacity: 1; transform: rotate(-2deg); }

/* 06 · cross-sell que no para */
.x-xsell { position: absolute; left: 1.2rem; right: 1.2rem; top: 1.2rem; z-index: 1; padding: .6rem; border-radius: 12px; background: rgba(7,7,7,.72); backdrop-filter: blur(8px); border: 1px solid rgba(246,244,239,.12); overflow: hidden; }
.x-xsell > span { display: block; font-size: .72rem; font-weight: 700; color: #F6F4EF; margin-bottom: .45rem; }
.x-xs-track { display: flex; gap: 8px; width: max-content; animation: xMarq 16s linear infinite; }
.x-xs-track img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(246,244,239,.15); }
@media (prefers-reduced-motion: reduce) { .x-xs-track { animation: none; } .rf-a, .rf-prod { display: block; } }

/* =========================================================
   NEWSLETTER · como el pop-up, pero dentro de la web
   ========================================================= */
.x-news { position: relative; display: grid; border-radius: 32px; overflow: hidden; border: 1px solid var(--x-edge); background: var(--x-card); box-shadow: var(--x-shadow), 0 0 120px -50px rgba(31,191,107,.55); }
@media (min-width: 900px) { .x-news { grid-template-columns: 1.12fr 1fr; min-height: 660px; } }
.x-news-vis { position: relative; min-height: 420px; overflow: hidden; isolation: isolate;
  background: radial-gradient(520px circle at var(--nx, 35%) var(--ny, 35%), rgba(31,191,107,.30), transparent 60%), radial-gradient(circle at 85% 95%, rgba(31,191,107,.22), transparent 50%), #0A0A0A; }
.x-news-grid { position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(246,244,239,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(246,244,239,.06) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%); mask: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%); }
.x-news-glow { position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; left: 18%; top: 18%; border-radius: 50%; background: rgba(31,191,107,.32); filter: blur(90px); animation: xBreath2 6s ease-in-out infinite; }
.x-news-glow.g2 { width: 40%; left: 55%; top: 55%; background: rgba(31,191,107,.22); animation-delay: -3s; }
@keyframes xBreath2 { 50% { transform: scale(1.15); opacity: .7; } }
.x-news-vis figure { position: absolute; margin: 0; display: flex; flex-direction: column; padding: 0 6px 6px; border-radius: 16px; background: rgba(18,18,18,.92);
  border: 1px solid rgba(246,244,239,.16); box-shadow: 0 40px 80px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s; will-change: transform; }
.x-news-vis figure:hover { border-color: rgba(31,191,107,.6); }
.x-news-vis figcaption { display: flex; justify-content: space-between; gap: .6rem; padding: .5rem .35rem; font: 600 .66rem/1 Archivo, sans-serif; letter-spacing: .02em; color: rgba(246,244,239,.55); white-space: nowrap; }
.x-news-vis figcaption span:first-child { color: rgba(246,244,239,.85); }
.x-news-vis .nv-img { position: relative; overflow: hidden; border-radius: 11px; background: #111; }
.x-news-vis .nv-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.24) 50%, transparent 65%); transform: translateX(-120%); animation: nvShine 7s ease-in-out infinite; }
.x-news-vis .nv2 .nv-img::after { animation-delay: -2.3s; } .x-news-vis .nv3 .nv-img::after { animation-delay: -4.6s; }
@keyframes nvShine { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.x-news-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-news-vis .nv1 { width: 46%; left: 5%; top: 8%; rotate: -6deg; z-index: 1; animation: xFloat 7s ease-in-out infinite; }
.x-news-vis .nv1 .nv-img { aspect-ratio: 1; }
.x-news-vis .nv2 { width: 30%; right: 6%; top: 5%; rotate: 5deg; z-index: 2; animation: xFloat 8s ease-in-out -2s infinite; }
.x-news-vis .nv2 .nv-img { aspect-ratio: .46; }
.x-news-vis .nv2 img { object-position: top; }
.x-news-vis .nv3 { width: 40%; left: 27%; bottom: 5%; rotate: 3deg; z-index: 3; animation: xFloat 9s ease-in-out -4s infinite; }
.x-news-vis .nv3 .nv-img { aspect-ratio: 1; }
.x-news-vis .nt { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; background: #1FBF6B; color: #0A0A0A;
  font: 400 1.25rem/1 'Anton', sans-serif; letter-spacing: .06em; box-shadow: 0 14px 40px -8px rgba(31,191,107,.8); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.x-news-vis .nt i { width: 8px; height: 8px; border-radius: 50%; background: #0A0A0A; box-shadow: 0 0 0 0 rgba(10,10,10,.5); animation: ntPing 2s ease-out infinite; }
.x-news-vis .nt2 i { animation-delay: -1s; }
@keyframes ntPing { 0% { box-shadow: 0 0 0 0 rgba(10,10,10,.45); } 80%, 100% { box-shadow: 0 0 0 9px rgba(10,10,10,0); } }
.x-news-vis .nt1 { left: 40%; top: 40%; } .x-news-vis .nt2 { right: 5%; bottom: 14%; }
.x-news-body { padding: clamp(1.6rem, 4.5vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.x-news-brand { font-family: 'Anton', sans-serif; letter-spacing: .04em; font-size: 1.1rem; color: var(--s-text); } .x-news-brand span { color: var(--g); }
.x-news-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; margin-top: 1.1rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid rgba(31,191,107,.45); background: var(--g-12); color: var(--g); font: 700 .8rem Archivo, sans-serif; letter-spacing: .02em; }
.x-news-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); animation: xBreath2 2s ease-in-out infinite; }
.x-news-h { margin-top: 1rem; font-size: clamp(2.2rem, 4.4vw, 4rem) !important; line-height: 1.02; }
.x-news-list { display: grid; gap: 10px; margin-top: 1.6rem; }
@media (min-width: 480px) { .x-news-list { grid-template-columns: 1fr 1fr; } }
.x-news-list li { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .85rem 2.4rem .9rem .95rem; border-radius: 14px; border: 1px solid var(--x-edge);
  background: color-mix(in srgb, var(--x-card) 88%, #1FBF6B 12%); transition: border-color .3s, transform .3s; animation: nlOn 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.x-news-list li:hover { transform: translateY(-2px); border-color: var(--g); }
.x-news-list .t { align-self: flex-start; padding: .15rem .5rem; border-radius: 6px; background: var(--g); color: #0A0A0A; font: 800 .64rem Archivo, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.x-news-list b { font: 700 .92rem/1.25 Archivo, sans-serif; color: var(--s-text); }
.x-news-list em { position: absolute; top: .7rem; right: .8rem; font: 400 1.05rem 'Anton', sans-serif; font-style: normal; color: var(--g); opacity: .55; }
@keyframes nlOn { 0%, 30%, 100% { box-shadow: none; } 8%, 20% { box-shadow: 0 0 0 1px rgba(31,191,107,.7), 0 0 30px -8px rgba(31,191,107,.7); } }
.x-news-row { display: grid; gap: 10px; }
@media (min-width: 560px) { .x-news-row { grid-template-columns: 1fr auto; } }
.x-news-row input { width: 100%; padding: 1.1rem 1.15rem; border-radius: 14px; border: 1px solid var(--x-edge-hi); background: color-mix(in srgb, var(--s-bg) 70%, transparent); color: var(--s-text); font: 1rem Archivo, sans-serif; outline: none; }
.x-news-row input:focus { border-color: var(--g); box-shadow: 0 0 0 4px var(--g-12); }
.x-news-row input[aria-invalid="true"] { border-color: #c84040; }
.x-news-ok { font-size: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 899px) {
  .x-news-vis { min-height: 0; height: clamp(360px, 100vw, 460px); }
  .x-news-vis .nv1 { width: 54%; left: 4%; top: 6%; }
  .x-news-vis .nv2 { width: 34%; right: 5%; top: 4%; }
  .x-news-vis .nv3 { width: 46%; left: 30%; bottom: 4%; }
  .x-news-vis figcaption { font-size: .56rem; padding: .4rem .25rem; }
  .x-news-vis figcaption span + span { display: none; }
  .x-news-vis .nt { font-size: .95rem; padding: .45rem .75rem; }
  .x-news-vis .nt1 { left: 6%; top: auto; bottom: 22%; } .x-news-vis .nt2 { right: 4%; bottom: 40%; }
}
@media (prefers-reduced-motion: reduce) { .x-news-vis figure, .x-news-glow, .x-news-vis .nv-img::after, .x-news-vis .nt i, .x-news-list li, .x-news-chip i { animation: none; } }

/* =========================================================
   FONDO · cuadricula de hoja de calculo (excepto el hero)
   ========================================================= */
#main { background-image:
    repeating-linear-gradient(0deg, var(--s-grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--s-grid) 0 1px, transparent 1px 64px);
  background-position: center 0; }
.x-hero-solid { background: var(--s-bg); isolation: isolate; }

/* pedidos apilados como notificaciones */
.flow-stack { position: absolute; left: 596px; top: 161px; width: 160px; height: 0; z-index: 4; }
.flow-note { position: absolute; left: 0; top: 0; width: 160px; transform-origin: 0% 50%;
  transition: transform .7s cubic-bezier(.22,.9,.24,1), opacity .55s ease; will-change: transform, opacity; }
.flow-note[data-i="in"]  { opacity: 0; transform: translate(-110px, -50%) scale(.45); }
.flow-note[data-i="0"]   { opacity: 1; transform: translate(0, -50%) scale(1); }
.flow-note[data-i="1"]   { opacity: .6; transform: translate(26px, calc(-50% - 16px)) scale(.9); }
.flow-note[data-i="2"]   { opacity: .28; transform: translate(50px, calc(-50% - 30px)) scale(.8); }
.flow-note[data-i="out"] { opacity: 0; transform: translate(80px, calc(-50% - 40px)) scale(.7); }
@media (max-width: 479px) { .flow-stack { left: 588px; } }

.x-bcell { min-width: 0; }
.x-bcell img { max-width: 100%; }
@media (max-width: 1023px) { .x-t1 { min-height: 460px; } .x-t3, .x-t5 { min-height: 340px; } }
.x-bmore { padding: 6px; }
@media (max-width: 1023px) { .x-reticle { top: 9%; height: 36%; } }

/* =========================================================
   03 · MOTOR (rediseño)
   ========================================================= */
.x-v3b { display: flex; flex-direction: column; height: 100%; }
.mt-body { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.1rem 1.2rem; }
.mt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-card { position: relative; border-radius: 14px; padding: .8rem .8rem .9rem; border: 1px solid var(--x-edge); background: color-mix(in srgb, var(--s-text) 4%, transparent); overflow: hidden; }
.mt-lab { display: block; font-size: .72rem; font-weight: 700; color: var(--x-body); margin-bottom: .7rem; }
/* ranking: tu producto escala posiciones */
.mr-list { position: relative; display: grid; gap: 6px; }
.mr-row { display: flex; align-items: center; gap: 6px; height: 16px; }
.mr-row i { width: 16px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--s-text) 12%, transparent); }
.mr-row span { flex: 1; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--s-text) 10%, transparent); }
.mr-you { position: absolute; left: -4px; right: -4px; top: 110px; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 7px;
  background: color-mix(in srgb, var(--s-panel) 70%, #1FBF6B 30%); border: 1px solid #1FBF6B; box-shadow: 0 6px 18px -6px rgba(31,191,107,.7); z-index: 1; }
.mr-you i { width: 14px; height: 14px; border-radius: 4px; background: #1FBF6B; }
.mr-you span { font-size: .66rem; font-weight: 800; color: var(--s-text); white-space: nowrap; }
.mr-you em { margin-left: auto; font-style: normal; font-weight: 900; color: #1FBF6B; font-size: .8rem; }
:is(.x-vis.is-on, .x-step-vis) .mr-you { animation: mrClimb 6s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes mrClimb { 0%, 8% { top: 110px; } 22% { top: 81px; } 36% { top: 59px; } 50% { top: 37px; } 64% { top: 15px; } 76%, 94% { top: -4px; } 100% { top: 110px; } }
/* PPC: aguja que se asienta en la zona objetivo y se ajusta */
.mt-gauge { display: block; width: 100%; height: auto; overflow: visible; }
.mt-gauge .g-track { fill: none; stroke: color-mix(in srgb, var(--s-text) 8%, transparent); stroke-width: 11; stroke-linecap: round; }
.mt-gauge .g-arc { fill: none; stroke-width: 5; stroke-linecap: round; opacity: .75; }
.mt-gauge .g-zone { fill: none; stroke: #1FBF6B; stroke-width: 13; stroke-linecap: round; opacity: .28; filter: drop-shadow(0 0 6px rgba(31,191,107,.8)); }
.mt-gauge .g-needle { transform-origin: 80px 86px; transform: rotate(-70deg); }
.mt-gauge .g-needle line { stroke: var(--s-text); stroke-width: 3; stroke-linecap: round; }
.mt-gauge .g-needle circle { fill: var(--s-text); stroke: #1FBF6B; stroke-width: 3; }
:is(.x-vis.is-on, .x-step-vis) .g-needle { animation: gNeedle 6s cubic-bezier(.3,1.3,.5,1) infinite; }
@keyframes gNeedle { 0% { transform: rotate(-70deg); } 18% { transform: rotate(52deg); } 26% { transform: rotate(33deg); } 36% { transform: rotate(40deg); } 50% { transform: rotate(35deg); } 64% { transform: rotate(39deg); } 78% { transform: rotate(36deg); } 92% { transform: rotate(38deg); } 100% { transform: rotate(-70deg); } }
.mt-gl { display: flex; justify-content: center; margin-top: .25rem; font-size: .66rem; font-weight: 800; color: #1FBF6B; }
/* los dos embudos confluyen en ventas */
.mt-flow { width: 100%; height: 70px; margin-top: 4px; overflow: visible; }
.mt-flow path { fill: none; stroke: rgba(31,191,107,.45); stroke-width: 2; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; animation: mtDash 1s linear infinite; }
@keyframes mtDash { to { stroke-dashoffset: -10; } }
.mt-pt { fill: #1FBF6B; filter: drop-shadow(0 0 5px #1FBF6B); }
.mt-sales { position: relative; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .7rem 1.6rem; border-radius: 16px;
  background: color-mix(in srgb, var(--s-panel) 72%, #1FBF6B 28%); border: 1px solid #1FBF6B; box-shadow: 0 0 40px -6px rgba(31,191,107,.55); }
.mt-sales b { font-size: 1.5rem; line-height: 1; color: var(--s-text); }
.mt-sales em { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--x-body); }
.mt-pulse { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid #1FBF6B; animation: mtPulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes mtPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.25, 1.5); opacity: 0; } }

/* =========================================================
   04 · ESCALA (rediseño)
   ========================================================= */
.x-v4b { display: flex; flex-direction: column; height: 100%; }
.es-body { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1.2rem 1.2rem; }
.es-chart { position: relative; flex: 1; min-height: 150px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--s-text) 3%, transparent); }
.es-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.es-grid line { stroke: var(--x-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.es-ppc { fill: color-mix(in srgb, var(--s-text) 8%, transparent); }
.es-line { fill: none; stroke: #1FBF6B; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(31,191,107,.8)); }
.es-rev { transform-origin: 0 0; transform: scaleX(0); }
:is(.x-vis.is-on, .x-step-vis) .es-rev { animation: esRev 7s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes esRev { 0% { transform: scaleX(0); } 45%, 92% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.es-tag { position: absolute; left: 10px; top: 8px; font-size: .66rem; font-weight: 800; color: var(--x-body); }
.es-tip { position: absolute; right: 8px; top: 8%; padding: .35rem .6rem; border-radius: 10px; background: #1FBF6B; color: #0A0A0A; font-size: .7rem; font-weight: 700; box-shadow: 0 10px 24px -8px rgba(31,191,107,.8); opacity: 0; transform: translateY(8px) scale(.9); }
.es-tip b { font-size: .95rem; }
:is(.x-vis.is-on, .x-step-vis) .es-tip { animation: esTip 7s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes esTip { 0%, 44% { opacity: 0; transform: translateY(8px) scale(.9); } 52%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.es-eu-l { display: block; font-size: .72rem; font-weight: 700; color: var(--x-body); margin-bottom: .6rem; }
.es-route { position: relative; display: flex; justify-content: space-between; }
.es-rail { position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; margin-top: -1px; background: var(--x-edge-hi); }
.es-rail b { display: block; height: 100%; width: 0; background: #1FBF6B; box-shadow: 0 0 10px #1FBF6B; }
:is(.x-vis.is-on, .x-step-vis) .es-rail b { animation: esRail 7s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes esRail { 0%, 10% { width: 0; } 70%, 92% { width: 100%; } 100% { width: 100%; opacity: 0; } }
.es-route span { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: 'Anton', sans-serif; font-size: .95rem; letter-spacing: .04em;
  color: var(--x-dim); background: var(--x-card); border: 1px solid var(--x-edge-hi); }
:is(.x-vis.is-on, .x-step-vis) .es-route span { animation: esNode 7s ease infinite; }
.es-route span:nth-of-type(2) { animation-delay: .9s !important; } .es-route span:nth-of-type(3) { animation-delay: 1.8s !important; } .es-route span:nth-of-type(4) { animation-delay: 2.7s !important; }
@keyframes esNode { 0%, 8% { color: var(--x-dim); border-color: var(--x-edge-hi); box-shadow: none; } 14%, 80% { color: #0A0A0A; background: #1FBF6B; border-color: #1FBF6B; box-shadow: 0 0 20px -2px rgba(31,191,107,.8); } 100% { color: var(--x-dim); } }
@media (prefers-reduced-motion: reduce) {
  .mr-you, .g-needle, .es-rev, .es-tip, .es-rail b, .es-route span, .mt-pulse, .mt-flow path { animation: none !important; }
  .es-rev { transform: none; } .es-tip { opacity: 1; transform: none; } .mr-you { top: -4px; } .g-needle { transform: rotate(36deg); }
}

/* =========================================================
   FONDOS · cristal al abrir y cerrar, fondo propio en medio
   ========================================================= */
.x-closing { position: relative; isolation: isolate; background: var(--s-bg); overflow: hidden; }
.x-closing .foot-outer { background: transparent; }
.x-glass-close { top: 0; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); }
/* la constelacion deja paso al fondo del cuerpo */
#xFondo { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
html.has-fondo #main { background-image: none; }
html.has-fondo #xBg { display: none; }
#xFondo canvas { width: 100%; height: 100%; display: block; }
/* 1 · linea de ventas: vive dentro de #main, detras del contenido */
.x-linea { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.x-linea .ghost { fill: none; stroke: var(--x-edge-hi); stroke-width: 1.5; stroke-dasharray: 2 7; }
.x-linea .draw { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(31,191,107,.35)); }
.x-linea .head { filter: drop-shadow(0 0 10px #1FBF6B); }
.x-linea text { font: 700 12px Archivo, sans-serif; }

/* =========================================================
   FONDO TERMINAL · entra y sale en degradado
   ========================================================= */
#trabajo::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(260px, 42vh, 460px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--s-bg) 0%, color-mix(in srgb, var(--s-bg) 70%, transparent) 45%, transparent 100%); }
#cta-final { position: relative; }
#cta-final::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(220px, 34vh, 380px); z-index: -1; pointer-events: none;
  background: linear-gradient(to top, var(--s-bg) 0%, color-mix(in srgb, var(--s-bg) 70%, transparent) 45%, transparent 100%); }

/* =========================================================
   RONDA 8
   ========================================================= */
/* avatares pixel art, mas grandes */
.x-avs img { width: 36px; height: 36px; margin-left: -10px; image-rendering: pixelated; border-width: 2px; }
.x-trust { padding: .45rem 1rem .45rem .5rem; }

/* galeria: color real siempre; al pasar, la pieza se levanta */
.x-frame img { filter: none !important; }
.x-frame .x-canvas { overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .3s; }
.x-frame:hover .x-canvas { transform: translateY(-6px) scale(1.03); border-color: #1FBF6B; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(31,191,107,.4), 0 0 40px -10px rgba(31,191,107,.5); }
.x-frame:hover img { transform: scale(1.06); }
.x-frame .x-canvas::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-120%); }
.x-frame:hover .x-canvas::after { transition: transform .9s ease; transform: translateX(120%); }

/* marcas: bloque solido con sombra, escaner con estela */
.x-bgrid { background: var(--x-card); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px var(--x-edge), 0 0 80px -30px rgba(31,191,107,.35); }
.x-bcell { transition: background .4s, transform .3s; }
.x-bcell:hover { transform: translateY(-2px); background: rgba(31,191,107,.08); z-index: 2; }
.x-scan::before { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 140px; background: linear-gradient(to left, rgba(31,191,107,.16), transparent); }
.x-bmore b { font-feature-settings: 'tnum' 1; }

/* pon tu cuenta en verde: fondo solido como antes + mas vida */
.cta-card { background-color: #0d0d0e !important; box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 0 1px #202026; }
html[data-theme="papel"] .cta-card { background-color: #EFEBDD !important; box-shadow: 0 40px 90px -40px rgba(22,21,15,.35), 0 0 0 1px rgba(22,21,15,.13); }
.x-cta-chart { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; z-index: 1; pointer-events: none; opacity: .9; }
.x-cta-chart .l { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1600; stroke-dashoffset: 1600; filter: drop-shadow(0 0 6px rgba(31,191,107,.6)); }
.x-cta-chart .a { opacity: 0; }
#cta-final.is-in .x-cta-chart .l { animation: ctaDraw 5.5s cubic-bezier(.5,0,.2,1) infinite; }
#cta-final.is-in .x-cta-chart .a { animation: ctaArea 5.5s ease infinite; }
@keyframes ctaDraw { 0% { stroke-dashoffset: 1600; } 55%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ctaArea { 0%, 40% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }
.x-status { position: relative; display: inline-grid; margin-bottom: 1.4rem; padding: .5rem 1rem .5rem 2rem; border-radius: 999px; font: 700 .85rem Archivo, sans-serif; border: 1px solid rgba(200,64,64,.5); background: rgba(200,64,64,.1); color: #e06a6a; overflow: hidden; }
.x-status > span { grid-area: 1 / 1; transition: opacity .4s, transform .4s; }
.x-status i { position: absolute; left: .85rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.x-status .s-g { opacity: 0; transform: translateY(100%); }
#cta-final.is-in .x-status { animation: stBox 5.5s ease infinite; }
#cta-final.is-in .x-status .s-r { animation: stR 5.5s ease infinite; }
#cta-final.is-in .x-status .s-g { animation: stG 5.5s ease infinite; }
@keyframes stBox { 0%, 45% { border-color: rgba(200,64,64,.5); background: rgba(200,64,64,.1); color: #e06a6a; } 55%, 95% { border-color: rgba(31,191,107,.55); background: rgba(31,191,107,.12); color: #1FBF6B; } 100% { border-color: rgba(200,64,64,.5); color: #e06a6a; } }
@keyframes stR { 0%, 45% { opacity: 1; transform: none; } 55%, 95% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: none; } }
@keyframes stG { 0%, 45% { opacity: 0; transform: translateY(100%); } 55%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .x-cta-chart .l { stroke-dashoffset: 0; } .x-status .s-r { opacity: 0; } .x-status .s-g { opacity: 1; transform: none; } }

/* animacion de Amazon · objetivo del dia, clic en el carril, brillo del pedido, minigrafica */
.flow-goal { position: absolute; left: 50%; top: 50%; width: 112%; height: 112%; margin: -56% 0 0 -56%; z-index: 1; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.flow-goal circle { fill: none; stroke-width: 3.5; }
.flow-goal .bg { stroke: rgba(31,191,107,.12); }
.flow-goal .fg { stroke: #1FBF6B; stroke-linecap: round; stroke-dasharray: 578; stroke-dashoffset: 578; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(31,191,107,.8)); }
.flow-core.is-goal .flow-goal { animation: goalPop .9s cubic-bezier(.2,.8,.2,1); }
@keyframes goalPop { 40% { transform: rotate(-90deg) scale(1.12); filter: drop-shadow(0 0 20px #1FBF6B); } 100% { transform: rotate(-90deg) scale(1); } }
.flow-goal-tag { position: absolute; left: 50%; bottom: -30px; z-index: 6; white-space: nowrap; padding: 5px 11px; border-radius: 999px; background: #1FBF6B; color: #0A0A0A; font: 800 11.5px/1 Archivo, sans-serif; box-shadow: 0 10px 24px -6px rgba(31,191,107,.8); animation: goalTag 2.2s cubic-bezier(.2,.8,.2,1) forwards; pointer-events: none; }
@keyframes goalTag { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.05); opacity: 1; } 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -6px); } }

.flow-clic { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; animation: clicFade 1.1s ease forwards; }
.flow-clic i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #1FBF6B; animation: clicRing 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.flow-clic b { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: rgba(31,191,107,.15); border: 1px solid rgba(31,191,107,.5); color: #1FBF6B; font: 800 10px/1.2 Archivo, sans-serif; letter-spacing: .02em; animation: clicUp 1.1s ease forwards; }
@keyframes clicRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes clicUp { 0% { transform: translate(-50%, 6px); opacity: 0; } 25% { transform: translate(-50%, 0); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -8px); opacity: 0; } }
@keyframes clicFade { to { opacity: 1; } }

.flow-note { overflow: hidden; }
.fo-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-130%); animation: foShine 1.1s ease .25s forwards; }
@keyframes foShine { to { transform: translateX(130%); } }

.flow-spark-l { width: 60px; height: 20px; overflow: visible; }
.flow-spark-l polyline { fill: none; stroke: #1FBF6B; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(31,191,107,.7)); }
@media (max-width: 479px) { .flow-spark-l { display: none; } .flow-clic b { display: none; } }
@media (prefers-reduced-motion: reduce) { .flow-goal, .fo-shine, .flow-clic { display: none; } }

/* pixel art: nitido, sin suavizado */
.x-avs img { background: #12301f; }
.flow-avatar { image-rendering: pixelated; width: 58px; height: 58px; margin: -29px 0 0 -29px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(31,191,107,.4)); }
html[data-theme="papel"] .flow-avatar { filter: drop-shadow(0 3px 8px rgba(22,21,15,.3)); }

/* =========================================================
   RONDA 9
   ========================================================= */
/* ---- marcas: a color, 2 filas, bloque solido ---- */
.x-bgrid { display: block; padding: 0; }
.x-btrack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); }
.x-bcell img { filter: none !important; opacity: 1 !important; max-height: 30px; }
html[data-theme="papel"] .x-bcell img { filter: none !important; }
.x-bcell { aspect-ratio: 1.35; padding: 16%; background: color-mix(in srgb, var(--s-text) 2.5%, transparent); }
.x-brands.is-in .x-bcell img { animation: xCellPop 6s ease-in-out var(--d, 0s) infinite; }
@keyframes xCellPop { 0%, 100% { transform: none; } 6% { transform: scale(1.14); } 20% { transform: none; } }
.x-bmore { grid-column: auto; aspect-ratio: 1.35; }
.x-bmore b { font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
@media (max-width: 1023px) {
  .x-bgrid { overflow: hidden; }
  .x-btrack { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 84px); grid-template-columns: none; grid-auto-columns: 118px; width: max-content;
    animation: xBslide 22s ease-in-out infinite alternate; }
  .x-bcell, .x-bmore { aspect-ratio: auto; }
}
@keyframes xBslide { from { transform: translateX(0); } to { transform: translateX(var(--shift, -50%)); } }

/* ---- testimonios ---- */
.x-testis { padding-block: 1rem clamp(3rem, 6vw, 5rem); display: grid; gap: 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.x-testis[hidden] { display: none; }
.x-ttrack { display: flex; gap: 16px; width: max-content; animation: xMarq 60s linear infinite; }
.x-tmarq.rev .x-ttrack { animation-direction: reverse; animation-duration: 70s; }
.x-testis:hover .x-ttrack { animation-play-state: paused; }
.x-tcard { margin: 0; width: 340px; padding: 1.3rem 1.4rem; border-radius: 20px; background: var(--x-card); border: 1px solid var(--x-edge); box-shadow: 0 20px 50px -25px rgba(0,0,0,.9); transition: border-color .3s, transform .3s; }
.x-tcard:hover { border-color: var(--g-35); transform: translateY(-3px); }
.x-tstars { color: #1FBF6B; letter-spacing: .1em; font-size: .9rem; }
.x-tcard blockquote { margin: .7rem 0 1rem; font-size: .95rem; line-height: 1.55; color: var(--x-body); }
.x-tcard figcaption { display: flex; align-items: center; gap: .7rem; }
.x-tcard figcaption img { width: 38px; height: 38px; border-radius: 50%; background: #12301f; image-rendering: pixelated; }
.x-tcard figcaption b { display: block; font-size: .88rem; color: var(--s-text); }
.x-tcard figcaption i { font-style: normal; font-size: .76rem; color: var(--x-dim); }

/* ---- formula destacada ---- */
.x-fhero { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(2.6rem, 5vw, 4.2rem) clamp(1rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.2rem);
  background: radial-gradient(90% 120% at 50% 0%, rgba(31,191,107,.14), transparent 60%), linear-gradient(180deg, #0f1210, #0a0a0a);
  border: 1px solid rgba(31,191,107,.28); box-shadow: 0 40px 120px -40px rgba(31,191,107,.35), inset 0 1px 0 rgba(246,244,239,.06); }
html[data-theme="papel"] .x-fhero { background: radial-gradient(90% 120% at 50% 0%, rgba(31,191,107,.16), transparent 60%), #FFFFFF; }
.x-fhero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(31,191,107,.07) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(31,191,107,.07) 0 1px, transparent 1px 32px);
  -webkit-mask: radial-gradient(70% 80% at 50% 50%, #000, transparent); mask: radial-gradient(70% 80% at 50% 50%, #000, transparent); }
.x-fh-lab { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-size: .78rem; font-weight: 700; color: var(--x-body); }
.x-fh-lab i { width: 7px; height: 7px; border-radius: 50%; background: #1FBF6B; box-shadow: 0 0 10px #1FBF6B; animation: flowLive 1.2s ease-in-out infinite; }
.x-fh-scan { position: absolute; top: 0; bottom: 0; width: 30%; left: -30%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(31,191,107,.12), transparent); animation: fhScan 5s ease-in-out infinite; }
@keyframes fhScan { 0% { left: -30%; } 60%, 100% { left: 110%; } }
.x-fhero .x-formula { position: relative; }
/* tarjetas: cabecera con numero y estado */
.x-fcard { background: linear-gradient(180deg, color-mix(in srgb, var(--x-card) 90%, #1FBF6B 10%), var(--x-card) 40%); overflow: hidden; }
.x-fcard.is-bad { background: linear-gradient(180deg, color-mix(in srgb, var(--x-card) 88%, #c84040 12%), var(--x-card) 40%); }
.x-fc-top { display: flex; align-items: center; gap: .6rem; margin: -1.3rem -1.3rem 1.1rem; padding: .8rem 1.3rem; border-bottom: 1px solid var(--x-edge); }
.x-fc-n { font-family: 'Anton', sans-serif; font-size: .95rem; letter-spacing: .06em; color: #1FBF6B; }
.x-fc-top.bad .x-fc-n { color: #c84040; }
.x-fc-k { font-size: .8rem; font-weight: 700; color: var(--x-body); }
.x-fc-top i { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #1FBF6B; box-shadow: 0 0 10px #1FBF6B; }
.x-fc-top.bad i { background: #c84040; box-shadow: 0 0 10px #c84040; animation: flowLive 1s ease-in-out infinite; }
/* conector y eslogan */
.x-fjoin { height: 90px; margin-top: -2px; }
.x-fjoin svg { width: 100%; height: 100%; overflow: visible; }
.x-fjoin path { fill: none; stroke: var(--x-edge-hi); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.x-fjoin path.b { stroke: rgba(200,64,64,.35); stroke-dasharray: 4 6; }
.x-fjoin path.f { stroke: #1FBF6B; stroke-width: 2; stroke-dasharray: 30 200; animation: fjFlow 2.2s linear infinite; filter: drop-shadow(0 0 5px #1FBF6B); }
@keyframes fjFlow { from { stroke-dashoffset: 230; } to { stroke-dashoffset: 0; } }
@media (max-width: 819px) { .x-fjoin { display: none; } }
.x-fslogan { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.4rem 2.2rem; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--x-card) 80%, #1FBF6B 20%), var(--x-card)); border: 1px solid rgba(31,191,107,.45); box-shadow: 0 0 60px -12px rgba(31,191,107,.55); }
.x-fslogan p { font-size: clamp(1.3rem, 2.8vw, 2.2rem); line-height: 1.1; }
.x-fs-sub { font-size: .9rem; color: var(--x-body); }
.x-fs-dot { position: absolute; top: -1px; left: 50%; width: 40%; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #1FBF6B, transparent); }
@media (max-width: 819px) { .x-fslogan { margin-top: 2.5rem; padding: 1.2rem 1.2rem; } }

/* ---- veinte estrategias ---- */
.x-strat-grid { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 900px) { .x-strat-grid { grid-template-columns: 1fr 60px 1fr; } }
.x-chaos, .x-order { position: relative; border-radius: 24px; padding: 1.6rem; overflow: hidden; }
.x-chaos { background: linear-gradient(180deg, color-mix(in srgb, var(--x-card) 90%, #c84040 10%), var(--x-card)); border: 1px solid rgba(200,64,64,.3); }
.x-order { background: linear-gradient(180deg, color-mix(in srgb, var(--x-card) 84%, #1FBF6B 16%), var(--x-card)); border: 1px solid rgba(31,191,107,.4); box-shadow: 0 0 70px -20px rgba(31,191,107,.5); }
.x-plab { display: inline-flex; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800; background: rgba(31,191,107,.14); color: #1FBF6B; border: 1px solid rgba(31,191,107,.4); }
.x-plab.bad { background: rgba(200,64,64,.12); color: #e06a6a; border-color: rgba(200,64,64,.4); }
.x-chips { position: relative; height: 190px; margin: 1rem 0 1.2rem; }
.x-chips span { position: absolute; left: var(--x); top: var(--y); padding: .3rem .6rem; border-radius: 8px; white-space: nowrap; font-size: .74rem; font-weight: 700; color: var(--x-body);
  background: color-mix(in srgb, var(--s-text) 7%, transparent); border: 1px solid var(--x-edge-hi); rotate: var(--r); animation: chipJit 2.4s ease-in-out var(--d) infinite; transition: opacity .6s, filter .6s; }
@keyframes chipJit { 0%, 100% { translate: 0 0; } 25% { translate: 3px -4px; } 50% { translate: -3px 2px; } 75% { translate: 2px 4px; } }
.x-strat.is-in .x-chips span { animation: chipJit 2.4s ease-in-out var(--d) infinite, chipOff 5s ease var(--d) infinite; }
@keyframes chipOff { 0%, 45% { opacity: 1; filter: none; text-decoration: none; } 60%, 90% { opacity: .22; filter: blur(1px); text-decoration: line-through; } 100% { opacity: 1; } }
.x-olist, .x-nlist { display: grid; gap: .7rem; }
.x-olist li { position: relative; width: fit-content; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 700; color: var(--x-dim); }
.x-olist li::after { content: ""; position: absolute; left: -2%; top: 55%; height: 2px; width: 0; background: #c84040; transition: width .6s cubic-bezier(.6,0,.2,1) calc(var(--k) * .15s + .3s); }
.x-strat.is-in .x-olist li::after { width: 104%; }
.x-nlist li { display: flex; gap: .7rem; align-items: center; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 700; color: var(--s-text); opacity: 0; transform: translateX(-10px); transition: all .5s ease calc(var(--k) * .15s + .8s); }
.x-nlist li::before { content: "✓"; flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1FBF6B; color: #0A0A0A; font-size: .7rem; font-weight: 900; }
.x-strat.is-in .x-nlist li { opacity: 1; transform: none; }
.x-one { position: relative; display: flex; align-items: baseline; gap: .6rem; margin: 1rem 0 1.4rem; }
.x-one b { font-size: clamp(5rem, 9vw, 7.5rem); line-height: .85; color: #1FBF6B; text-shadow: 0 0 60px rgba(31,191,107,.55); }
.x-one span { font-size: 1.3rem; font-weight: 800; color: var(--s-text); }
.x-one i { position: absolute; left: 0; bottom: -8px; height: 2px; width: 0; background: linear-gradient(90deg, #1FBF6B, transparent); transition: width 1.2s ease .6s; }
.x-strat.is-in .x-one i { width: 70%; }
.x-smid { display: grid; place-items: center; }
.x-smid span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; color: #0A0A0A; background: #1FBF6B; box-shadow: 0 0 30px rgba(31,191,107,.6); animation: smid 2s ease-in-out infinite; }
@keyframes smid { 50% { transform: translateX(6px); } }
@media (max-width: 899px) { .x-smid span { transform: rotate(90deg); animation: none; } }

/* ---- nombre del metodo ---- */
.x-method-name { font-size: clamp(2rem, 5vw, 3.8rem); letter-spacing: .04em; line-height: 1; }
.x-mn-t { position: relative; display: inline-block; color: #1FBF6B; text-shadow: 0 0 30px rgba(31,191,107,.45), 0 0 80px rgba(31,191,107,.25); }
.x-mn-t::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: mnShine 3.6s ease-in-out infinite; text-shadow: none; }
@keyframes mnShine { 0% { background-position: 150% 0; } 50%, 100% { background-position: -50% 0; } }
.x-method-name sup { color: #1FBF6B; }

/* ---- ventanas estilo Mac ---- */
.x-mac { display: inline-flex; gap: 6px; margin-right: 12px; flex: none; }
.x-mac i { width: 11px; height: 11px; border-radius: 50%; background: #c84040; }
.x-mac i:nth-child(2) { background: #8D8A84; } .x-mac i:nth-child(3) { background: #1FBF6B; }
.x-panel-head { justify-content: flex-start; background: color-mix(in srgb, var(--s-text) 3%, transparent); }
.x-panel-head > :last-child { margin-left: auto; }
.x-panel-head > .x-mac + div, .x-panel-head > .x-mac + b { flex: 1; }

/* ---- diagnostico interactivo ---- */
.x-tabs { position: relative; padding: 0 1.2rem; }
.x-tabs button { position: relative; padding: .75rem 0; margin-right: 1.2rem; font: 600 .8rem Archivo, sans-serif; color: var(--x-dim); background: none; border: 0; cursor: pointer; transition: color .2s; }
.x-tabs button:hover { color: var(--x-body); }
.x-tabs button.on { color: var(--s-text); box-shadow: none; }
.x-tab-ink { position: absolute; bottom: -1px; height: 2px; background: #1FBF6B; box-shadow: 0 0 8px #1FBF6B; transition: left .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1); }
.x-panes { position: relative; }
.x-pane { display: none; animation: paneIn .45s cubic-bezier(.2,.8,.2,1); }
.x-pane.on { display: block; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.x-mot { display: grid; gap: 1rem; padding: 1.2rem; }
.x-mot li { display: grid; grid-template-columns: 1fr auto; row-gap: .4rem; font-size: .86rem; color: var(--s-text); font-weight: 600; }
.x-mot b { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--s-text) 8%, transparent); position: relative; overflow: hidden; }
.x-mot b::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 8px; background: linear-gradient(90deg, rgba(31,191,107,.5), #1FBF6B); animation: motGrow 1s cubic-bezier(.2,.8,.2,1); }
@keyframes motGrow { from { width: 0; } }
.x-mot em { font-style: normal; color: #1FBF6B; font-weight: 800; }
.x-opo { display: grid; gap: .7rem; padding: 1.2rem; }
.x-opo li { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem; border-radius: 12px; border: 1px solid var(--x-edge); background: color-mix(in srgb, var(--s-text) 3%, transparent); animation: paneIn .5s cubic-bezier(.2,.8,.2,1) both; }
.x-opo li:nth-child(2) { animation-delay: .1s; } .x-opo li:nth-child(3) { animation-delay: .2s; }
.x-opo i { flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: .8rem; background: #1FBF6B; color: #0A0A0A; }
.x-opo b { display: block; font-size: .88rem; color: var(--s-text); } .x-opo span { font-size: .8rem; color: var(--x-body); }

/* ---- motor: registro de ajustes ---- */
.mt-log { margin-top: .6rem; height: 22px; overflow: hidden; font-size: .68rem; font-weight: 700; color: var(--x-body); text-align: center; }
.mt-log li { height: 22px; line-height: 22px; animation: mtLog 6s steps(1) infinite; }
.mt-log li::before { content: "✓ "; color: #1FBF6B; }
@keyframes mtLog { 0% { transform: translateY(0); } 25% { transform: translateY(-22px); } 50% { transform: translateY(-44px); } 75% { transform: translateY(-66px); } }
.mt-card { background: color-mix(in srgb, var(--s-text) 5%, transparent); box-shadow: inset 0 1px 0 rgba(246,244,239,.05); }
.x-v3b .mt-card:first-child { border-color: rgba(31,191,107,.3); }

/* ---- escala: barras + marketplaces ---- */
.es-bars { padding: 2.4rem .8rem .6rem; display: flex; }
.es-bars .x-bars { flex: 1; min-height: 140px; }
.es-legend { display: flex; gap: 1rem; font-size: .76rem; color: var(--x-body); }
.es-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; vertical-align: middle; }
.es-legend .lo { background: #1FBF6B; } .es-legend .lp { background: color-mix(in srgb, var(--s-text) 18%, transparent); }
.es-mk { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.es-mk-t { display: flex; gap: 8px; width: max-content; animation: xMarq 26s linear infinite; }
.es-mk-t span { padding: .4rem .75rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--s-text); border: 1px solid rgba(31,191,107,.35); background: rgba(31,191,107,.08); white-space: nowrap; }
:is(.x-vis.is-on, .x-step-vis) .es-tip { animation: esTip 7s cubic-bezier(.2,.8,.2,1) infinite; }

/* ---- cross-sell ---- */
.x-xs-track { animation-duration: 40s; }

/* ---- FAQ en dos columnas ---- */
.x-faq2 { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .x-faq2 { grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; } .x-faq-side { position: sticky; top: 110px; } }
.x-faq-cta { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.4rem; border-radius: 20px; border: 1px solid rgba(31,191,107,.35);
  background: linear-gradient(180deg, color-mix(in srgb, var(--x-card) 85%, #1FBF6B 15%), var(--x-card)); box-shadow: 0 0 50px -18px rgba(31,191,107,.5); }
.x-faq-cta span { font-size: .92rem; color: var(--x-body); margin-bottom: .6rem; }
.x-faqlist { display: grid; gap: 12px; }
.x-q { border-radius: 18px; border: 1px solid var(--x-edge); background: var(--x-card); transition: border-color .3s, box-shadow .3s, transform .3s; }
.x-q:hover { border-color: var(--g-35); transform: translateX(4px); }
.x-q[open] { border-color: rgba(31,191,107,.5); box-shadow: 0 0 40px -16px rgba(31,191,107,.5); }
.x-q summary { list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; cursor: pointer; }
.x-q summary::-webkit-details-marker { display: none; }
.x-qn { font-family: 'Anton', sans-serif; color: #1FBF6B; font-size: 1rem; letter-spacing: .05em; }
.x-qt { flex: 1; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--s-text); }
.x-q .pm { position: relative; flex: 0 0 30px; height: 30px; border-radius: 50%; border: 1px solid var(--x-edge-hi); transition: background .3s, transform .3s; }
.x-q .pm::before, .x-q .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: #1FBF6B; border-radius: 2px; transition: transform .3s; }
.x-q .pm::after { transform: rotate(90deg); }
.x-q[open] .pm { background: rgba(31,191,107,.14); transform: rotate(180deg); }
.x-q[open] .pm::after { transform: rotate(0); }
.x-qa { padding: 0 1.3rem 1.3rem calc(1.3rem + 2.4rem); animation: paneIn .4s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 600px) { .x-qa { padding-left: 1.3rem; } }

/* ---- Amazon: reseña que sale del pedido y logo que sigue al raton ---- */
.flow-review { position: absolute; z-index: 6; left: 596px; top: 161px; white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: var(--s-card); border: 1px solid rgba(31,191,107,.45); color: var(--s-card-text);
  font: 700 11.5px/1 Archivo, sans-serif; box-shadow: 0 10px 24px -8px rgba(0,0,0,.7); animation: revUp 2.6s cubic-bezier(.2,.8,.2,1) forwards; pointer-events: none; }
.flow-review em { font-style: normal; color: #1FBF6B; letter-spacing: .08em; margin-right: 5px; }
@keyframes revUp { 0% { transform: translate(20px, -60px) scale(.7); opacity: 0; } 15% { transform: translate(40px, -92px) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(52px, -130px); opacity: 0; } }
.flow-core { transform: perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .4s ease-out; }
@media (prefers-reduced-motion: reduce) { .x-chips span, .x-fh-scan, .x-mn-t::after, .mt-log li, .es-mk-t, .x-ttrack, .x-btrack { animation: none !important; } .x-nlist li { opacity: 1; transform: none; } }
.x-method { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .x-method { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.x-steps, .x-step, .x-step-vis, .x-v4b, .es-body, .es-eu, .es-mk { min-width: 0; }
.x-fhero .x-formula { font-size: clamp(2rem, 5.4vw, 5.2rem); }
@media (max-width: 640px) { .x-fhero .x-formula { font-size: clamp(1.7rem, 8.4vw, 2.4rem); } }
/* logos sobre ficha clara: se ve el color real de cada marca */
.x-btrack { gap: 8px; padding: 10px; }
.x-bcell { border: 0 !important; border-radius: 12px; background: #F6F4EF; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.x-bcell:hover { background: #FFFFFF; box-shadow: 0 0 0 2px #1FBF6B, 0 12px 26px -10px rgba(31,191,107,.6); }
.x-bcell::after { border-radius: 12px; }
.x-bmore { background: #1FBF6B !important; }
.x-bmore b { color: #0A0A0A !important; } .x-bmore span { color: #0A0A0A !important; }
.x-bgrid { border: 0 !important; border-radius: 20px; }

/* =========================================================
   RONDA 10
   ========================================================= */
/* ---- header en pastilla flotante ---- */
.x-head2 { background: transparent !important; border: 0 !important; backdrop-filter: none !important; padding: 12px 12px 0; pointer-events: none; }
.x-hbar { pointer-events: auto; position: relative; max-width: 1200px; margin: 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 0 10px 0 22px; border-radius: 999px; background: color-mix(in srgb, var(--s-bg) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--s-text) 10%, transparent); box-shadow: 0 20px 50px -25px rgba(0,0,0,.9), inset 0 1px 0 rgba(246,244,239,.06);
  transition: height .35s ease, max-width .35s ease, box-shadow .35s; overflow: hidden; }
.x-head2.is-scrolled .x-hbar { height: 56px; max-width: 1080px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(31,191,107,.18), 0 0 40px -18px rgba(31,191,107,.45); }
.x-hbar-beam { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, #1FBF6B, transparent) -30% 0 / 30% 100% no-repeat; animation: hbBeam 5s ease-in-out infinite; }
@keyframes hbBeam { 0% { background-position: -30% 0; } 60%, 100% { background-position: 130% 0; } }
.x-head2 .x-nav { position: relative; gap: 0; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--s-text) 4%, transparent); }
.x-head2 .x-nav a { position: relative; z-index: 1; padding: .5rem 1rem; border-radius: 999px; color: var(--x-body); }
.x-head2 .x-nav a::after { display: none; }
.x-head2 .x-nav a:hover { color: var(--s-text); }
.x-nav-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: color-mix(in srgb, #1FBF6B 16%, transparent); border: 1px solid rgba(31,191,107,.4); opacity: 0; transition: left .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.x-head2 .brand-word { font-size: 1.15rem; }
@media (max-width: 640px) { .x-head2 { padding: 8px 8px 0; } .x-hbar { height: 56px; padding: 0 6px 0 16px; } .x-head2 .brand-word { font-size: .95rem; } }
#main { padding-top: 88px !important; }

/* ---- marcas: la ultima casilla ocupa dos ---- */
.x-bmore { grid-column: span 2 !important; aspect-ratio: auto !important; flex-direction: row; gap: .5rem; }
.x-bmore span { margin-top: 0 !important; }
@media (max-width: 1023px) { .x-bmore { grid-column: auto !important; grid-row: span 2; } }

/* ---- formula en fichas ---- */
.x-eq { display: flex; align-items: stretch; justify-content: center; gap: 12px; flex-wrap: wrap; }
.x-eqt { position: relative; flex: 1 1 0; min-width: 0; max-width: 270px; padding: 1.6rem 1.2rem 1.4rem; border-radius: 22px; overflow: hidden; text-align: center;
  background: var(--x-card); border: 1px solid var(--x-edge-hi); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), border-color .6s, box-shadow .6s; }
.x-eq.is-in .x-eqt { opacity: 1; transform: none; }
.x-eq.is-in .x-eqt:nth-of-type(2) { transition-delay: .15s; } .x-eq.is-in .x-eqt:nth-of-type(3) { transition-delay: .3s; } .x-eq.is-in .x-eqt:nth-of-type(4) { transition-delay: .45s; }
.x-eqk { display: block; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1; color: var(--s-text); }
.x-eqc { display: block; margin-top: .7rem; font-size: .82rem; font-weight: 600; color: var(--x-body); }
.x-eqb { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.x-eqo { align-self: center; font: 700 clamp(1.4rem, 2.6vw, 2.2rem)/1 'InterVariable', Archivo, sans-serif; color: var(--x-dim); }
.x-eqt.t .x-eqk { color: var(--x-dim); position: relative; display: inline-block; }
.x-eqt.t .x-eqk::after { content: ""; position: absolute; left: -4%; top: 52%; height: .08em; width: 0; background: #c84040; transition: width .6s cubic-bezier(.6,0,.2,1) 1s; }
.x-eq.is-in .x-eqt.t .x-eqk::after { width: 108%; }
.x-eq.is-in .x-eqt.t { border-color: rgba(200,64,64,.4); background: linear-gradient(180deg, rgba(200,64,64,.1), var(--x-card) 70%); }
.x-eqt.c1 .x-eqk, .x-eqt.c2 .x-eqk { color: #1FBF6B; }
.x-eq.is-in .x-eqt.c1, .x-eq.is-in .x-eqt.c2 { border-color: rgba(31,191,107,.55); background: radial-gradient(120% 90% at 50% 0%, rgba(31,191,107,.2), var(--x-card) 70%); box-shadow: 0 0 60px -14px rgba(31,191,107,.6); animation: eqPulse 3s ease-in-out 1.6s infinite; }
.x-eq.is-in .x-eqt.c2 { animation-delay: 2.1s; }
@keyframes eqPulse { 50% { box-shadow: 0 0 80px -8px rgba(31,191,107,.8); } }
.x-eq.is-in .x-eqt.c1 .x-eqb, .x-eq.is-in .x-eqt.c2 .x-eqb { width: 100%; background: linear-gradient(90deg, transparent, #1FBF6B, transparent); transition-delay: 1.4s; }
.x-eq.is-in .x-eqt.v { border-color: rgba(246,244,239,.25); }
.x-eq.is-in .x-eqt.v .x-eqk { text-shadow: 0 0 40px rgba(246,244,239,.25); }
.x-eqt.c1 .x-eqk, .x-eqt.c2 .x-eqk { background: linear-gradient(100deg, #1FBF6B 0 42%, #F6F4EF 50%, #1FBF6B 58% 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.x-eq.is-in .x-eqt.c1 .x-eqk, .x-eq.is-in .x-eqt.c2 .x-eqk { animation: xSweep 3.2s ease-in-out 2s infinite; }
@media (max-width: 760px) { .x-eq { gap: 8px; } .x-eqt { flex: 1 1 40%; max-width: none; padding: 1.1rem .8rem; } .x-eqo { display: none; } }

/* ---- eslogan: borde de luz y pasos ---- */
.x-fslogan { isolation: isolate; }
.x-fs-beam { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 55%, #1FBF6B 75%, #F6F4EF 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: xAng 3.4s linear infinite; }
.x-fs-steps { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.x-fs-steps span { padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800; border: 1px solid var(--x-edge-hi); color: var(--x-dim); animation: fsStep 4.5s ease infinite; }
.x-fs-steps span:nth-of-type(2) { animation-delay: .9s; } .x-fs-steps span:nth-of-type(3) { animation-delay: 1.8s; }
.x-fs-steps i { font-style: normal; color: #1FBF6B; }
@keyframes fsStep { 0%, 100% { color: var(--x-dim); background: transparent; border-color: var(--x-edge-hi); } 12%, 40% { color: #0A0A0A; background: #1FBF6B; border-color: #1FBF6B; box-shadow: 0 0 18px rgba(31,191,107,.6); } }
.x-fslogan .text-profit { background: linear-gradient(100deg, #1FBF6B 0 40%, #F6F4EF 50%, #1FBF6B 60% 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: xSweep 3s ease-in-out infinite; }

/* ---- estrategias: minigraficas y anillos ---- */
.x-noise, .x-calm { width: 100%; height: 50px; display: block; margin-top: .8rem; overflow: visible; }
.x-noise path { fill: none; stroke: #c84040; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .7; animation: noiseJ .35s steps(2) infinite; }
@keyframes noiseJ { 50% { transform: translateY(3px) scaleY(1.12); } }
.x-calm path { fill: none; stroke: #1FBF6B; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; filter: drop-shadow(0 0 6px rgba(31,191,107,.7)); }
.x-strat.is-in .x-calm path { animation: calmD 4s ease-in-out .6s infinite; }
@keyframes calmD { 0% { stroke-dashoffset: 400; } 50%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.x-ring1 { position: absolute; left: .6rem; top: 50%; width: 90px; height: 90px; margin-top: -45px; border-radius: 50%; border: 2px solid rgba(31,191,107,.5); animation: ring1 2.6s ease-out infinite; pointer-events: none; }
.x-ring1.r2 { animation-delay: 1.3s; }
@keyframes ring1 { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.x-order::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 60%, #1FBF6B 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: xAng 4s linear infinite; }
.x-chaos { animation: chaosShake 6s ease-in-out infinite; }
@keyframes chaosShake { 0%, 100% { transform: none; } 2% { transform: translateX(-2px); } 4% { transform: translateX(2px); } 6% { transform: none; } }

/* ---- nombre del metodo: brillo mas frecuente ---- */
.x-mn-t::after { animation-duration: 2.4s; }

/* ---- diagnostico mas limpio ---- */
.x-v1-back { display: none !important; }
.x-v1-front { margin-top: 0 !important; }
.x-ins { font-size: .9rem; }
.x-ins td { padding: .85rem .9rem; }
.x-ins tbody tr { transition: background .3s; }
.x-ins tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--s-text) 2%, transparent); }
.x-pane.on .x-ins tbody tr { animation: rowIn .5s cubic-bezier(.2,.8,.2,1) both; }
.x-pane.on .x-ins tbody tr:nth-child(2) { animation-delay: .08s; } .x-pane.on .x-ins tbody tr:nth-child(3) { animation-delay: .16s; } .x-pane.on .x-ins tbody tr:nth-child(4) { animation-delay: .24s; } .x-pane.on .x-ins tbody tr:nth-child(5) { animation-delay: .32s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-12px); } }
.x-v1-front { border-color: rgba(31,191,107,.3); box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 60px -30px rgba(31,191,107,.4); }
.x-mot li, .x-opo b { font-size: .95rem; }

/* ---- marca: comparador grande y limpio ---- */
.x-v2 .x-cmp { width: min(100%, 520px); border-radius: 22px; box-shadow: 0 40px 90px -35px rgba(0,0,0,.95), 0 0 0 1px rgba(31,191,107,.35), 0 0 70px -25px rgba(31,191,107,.5); }
.x-v2 .x-knob { animation: knobP 2s ease-in-out infinite; }
@keyframes knobP { 50% { box-shadow: 0 0 0 10px rgba(31,191,107,.18), 0 0 30px rgba(31,191,107,.7); } }
.x-hint { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--x-edge-hi); }

/* ---- motor con color ---- */
.x-v3b { border-color: rgba(31,191,107,.35) !important; background: radial-gradient(120% 80% at 50% 110%, rgba(31,191,107,.22), transparent 60%), var(--x-card) !important; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 60px -28px rgba(31,191,107,.5) !important; }
.mt-card { background: linear-gradient(180deg, color-mix(in srgb, var(--s-panel) 80%, #1FBF6B 10%), color-mix(in srgb, var(--s-panel) 94%, transparent)) !important; border-color: rgba(31,191,107,.3) !important; }
.mr-row i { background: rgba(31,191,107,.18); }
.mr-row span { background: linear-gradient(90deg, rgba(246,244,239,.16), rgba(246,244,239,.04)); }
.mt-gauge .g-track { stroke: rgba(31,191,107,.12); }
.mt-sales { padding: .9rem 2.2rem; }
.mt-sales b { font-size: 1.9rem; }
.mt-flow path { stroke: rgba(31,191,107,.7); }

/* ---- escala: KPIs ---- */
.es-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.es-kpi { position: relative; padding: .8rem .7rem; border-radius: 14px; border: 1px solid rgba(31,191,107,.35); background: linear-gradient(180deg, rgba(31,191,107,.14), transparent); overflow: hidden; }
.es-kpi b { font-size: 1.1rem; color: var(--s-text); }
.es-kpi em { position: absolute; right: .7rem; top: .55rem; font-style: normal; font-weight: 900; font-size: 1.2rem; color: #1FBF6B; animation: kpiB 2s ease-in-out infinite; }
.es-kpi:nth-child(2) em { animation-delay: .4s; } .es-kpi:nth-child(3) em { animation: kpiR 4s linear infinite; }
@keyframes kpiB { 50% { transform: translateY(-3px); } }
@keyframes kpiR { to { transform: rotate(360deg); } }
.es-kpi span { display: block; margin-top: .2rem; font-size: .72rem; color: var(--x-body); }
.es-tip { opacity: 1 !important; transform: none !important; animation: tipPop .7s cubic-bezier(.2,.8,.2,1) both !important; }
@keyframes tipPop { from { opacity: 0; transform: scale(.7); } }

/* ---- bento 02 a lo bestia ---- */
.x-t2 { background: radial-gradient(100% 90% at 80% 10%, rgba(31,191,107,.2), transparent 60%), var(--x-card); border-color: rgba(31,191,107,.3); }
.x-dual2 { display: flex; align-items: center; gap: 1rem; margin-bottom: auto; flex-wrap: wrap; }
.x-rbig { position: relative; width: 118px; height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.x-rbig svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.x-rbig circle { fill: none; stroke-width: 7; }
.x-rbig .bg { stroke: rgba(31,191,107,.12); }
.x-rbig .fg { stroke: #1FBF6B; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; filter: drop-shadow(0 0 8px rgba(31,191,107,.8)); }
.x-t2.is-in .x-rbig .fg { animation: rbFill 4.5s cubic-bezier(.2,.8,.2,1) infinite; }
.x-t2.is-in .x-rbig.c2 .fg { animation-delay: .5s; }
@keyframes rbFill { 0% { stroke-dashoffset: 314; } 45%, 90% { stroke-dashoffset: 40; } 100% { stroke-dashoffset: 314; } }
.x-rbig b { font-size: 1.4rem; line-height: 1; color: var(--s-text); } .x-rbig span { font-size: .66rem; color: var(--x-body); margin-top: 4px; }
.x-op2 { font-size: 2rem; color: #1FBF6B; text-shadow: 0 0 20px rgba(31,191,107,.6); }
.x-rank2 { flex: 1; min-width: 200px; }
.x-r2l { display: block; font-size: .78rem; font-weight: 700; color: var(--x-body); margin-bottom: .3rem; }
.x-rank2 svg { width: 100%; height: 100px; overflow: visible; }
.x-rank2 .ln { fill: none; stroke: #1FBF6B; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(31,191,107,.8)); }
.x-rank2 .dt { fill: #F6F4EF; stroke: #1FBF6B; stroke-width: 3; }
.x-pages { display: flex; gap: 6px; margin-top: .4rem; }
.x-pages span { flex: 1; text-align: center; padding: .3rem 0; border-radius: 8px; font-size: .7rem; font-weight: 800; color: var(--x-dim); border: 1px solid var(--x-edge-hi); animation: pgOn 3.4s steps(1) infinite; }
.x-pages span:nth-child(1) { animation-delay: 0s; } .x-pages span:nth-child(2) { animation-delay: 1.1s; } .x-pages span:nth-child(3) { animation-delay: 2.2s; }
@keyframes pgOn { 0%, 33% { color: #0A0A0A; background: #1FBF6B; border-color: #1FBF6B; } 34%, 100% { color: var(--x-dim); background: transparent; border-color: var(--x-edge-hi); } }
@media (min-width: 1024px) { .x-t2 { min-height: 300px; } }

/* ---- bento 05: tarjeta arriba, texto legible ---- */
.x-t5 { padding-top: 132px; }
.x-thanks { left: 1.2rem; right: auto; width: min(260px, 80%); top: 1rem; }
@media (min-width: 1024px) { .x-t5 { min-height: 380px; } }

/* ---- formulario de sesion ---- */
.x-form2 { position: relative; display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: 28px; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 0%, rgba(31,191,107,.2), transparent 55%), linear-gradient(180deg, #111413, #0b0b0b);
  border: 1px solid rgba(31,191,107,.45); box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 100px -30px rgba(31,191,107,.55); }
html[data-theme="papel"] .x-form2 { background: radial-gradient(120% 70% at 50% 0%, rgba(31,191,107,.18), transparent 55%), #FFFFFF; }
.x-f2-beam { position: absolute; inset: -1px; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 60%, #1FBF6B 78%, #F6F4EF 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: xAng 4s linear infinite; }
.x-f2-head h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; margin-top: .7rem; }
.x-f2-head p { margin-top: .4rem; font-size: .95rem; color: var(--x-body); }
.x-f2-live { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 800; color: #1FBF6B; background: rgba(31,191,107,.12); border: 1px solid rgba(31,191,107,.4); }
.x-f2-live i { width: 7px; height: 7px; border-radius: 50%; background: #1FBF6B; animation: flowPing 1.8s infinite; }
.x-f2-leg { font-size: .8rem; font-weight: 600; color: var(--x-body); margin-bottom: .5rem; }
.x-form2 .x-field input { background: rgba(7,7,7,.6); border-color: rgba(246,244,239,.16); padding: 1rem 1.05rem; }
html[data-theme="papel"] .x-form2 .x-field input { background: #F4F1E8; }
.x-pills-r span { min-width: 64px; justify-content: center; }
.x-f2-btn { padding: 1.35rem 1.9rem; font-size: 1.08rem; margin-top: .4rem; animation: f2Btn 2.6s ease-in-out infinite; }
.x-f2-btn::before { animation: f2Shine 2.6s ease-in-out infinite; }
@keyframes f2Shine { 0%, 40% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }
@keyframes f2Btn { 50% { box-shadow: 0 0 0 1px rgba(31,191,107,.7), 0 18px 60px -10px rgba(31,191,107,.95); } }
.x-f2-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; font-size: .82rem; color: var(--x-body); }
.x-f2-trust li::before { content: "✓ "; color: #1FBF6B; font-weight: 900; }

/* ---- FAQ como chat ---- */
.x-chat { display: flex; flex-direction: column; gap: .6rem; padding: 0 1.3rem 1.3rem !important; }
.x-cq { align-self: flex-end; display: flex; align-items: flex-end; gap: .5rem; max-width: 85%; }
.x-cq span { padding: .65rem .9rem; border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--s-text) 9%, transparent); color: var(--s-text); font-size: .92rem; }
.x-cq img { width: 28px; height: 28px; border-radius: 50%; background: #12301f; image-rendering: pixelated; flex: none; }
.x-ctyping, .x-ca { align-self: flex-start; display: flex; align-items: flex-end; gap: .5rem; max-width: 88%; }
.x-ctyping b, .x-ca b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #1FBF6B; color: #0A0A0A; font: 400 .75rem 'Anton', sans-serif; }
.x-ctyping span { display: flex; gap: 4px; padding: .8rem .9rem; border-radius: 16px 16px 16px 4px; background: rgba(31,191,107,.12); border: 1px solid rgba(31,191,107,.35); }
.x-ctyping span i { width: 6px; height: 6px; border-radius: 50%; background: #1FBF6B; animation: rfDot 1s infinite; }
.x-ctyping span i:nth-child(2) { animation-delay: .15s; } .x-ctyping span i:nth-child(3) { animation-delay: .3s; }
.x-ca p { padding: .75rem 1rem; border-radius: 16px 16px 16px 4px; background: rgba(31,191,107,.12); border: 1px solid rgba(31,191,107,.35); color: var(--s-text); font-size: .95rem; line-height: 1.55; }
.x-q[open] .x-cq { animation: chatIn .35s ease both; }
.x-q[open] .x-ctyping { animation: chatType 1.1s steps(1) .35s both; }
.x-q[open] .x-ca { animation: chatIn .4s ease 1.3s both; }
@keyframes chatIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes chatType { 0% { opacity: 1; height: auto; } 99% { opacity: 1; } 100% { opacity: 0; height: 0; overflow: hidden; margin: 0; padding: 0; display: none; } }
@media (prefers-reduced-motion: reduce) { .x-q[open] .x-ctyping { display: none; } .x-q[open] .x-ca { animation: none; } }
.x-pills label { position: relative; }
.x-pills input { left: 0; top: 0; width: 1px; height: 1px; margin: 0; }
.x-steps { width: 100%; }
.x-step-num { width: fit-content; }
@media (min-width: 960px) { .x-step > .x-step-vis { grid-row: 1 / span 6; } .x-step-vis { max-width: 620px; width: 100%; justify-self: center; } }
.mt-log { height: 22px !important; }
.mt-log li { white-space: nowrap; }

.x-v1-front .x-panes { min-height: 0; }
.x-v1-foot { padding: .75rem 1.2rem; }
.x-v2 { gap: .6rem; }
.x-v2 .x-cmp { width: min(100%, 460px); }

.x-ins tr, .x-pane.on .x-ins tbody tr { opacity: 1 !important; transform: none !important; animation: none !important; }
.x-ins td .x-tag { white-space: nowrap; }

/* ---- metodo: escena fija en escritorio, mas corta y fluida ---- */
@media (min-width: 960px) {
  .x-method-scene { height: 190vh; }
  .x-step { cursor: pointer; }
  .x-step:not(.is-on):hover { opacity: .75; }
  .x-step:not(.is-on):hover h3 { color: #1FBF6B; }
  .x-stick { padding-top: 84px; }
  .x-steps { gap: .2rem; }
  .x-step h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
  .x-step p { transition: max-height .45s ease, opacity .35s ease; }
  .x-step { transition: opacity .35s ease; }
  .x-vis { transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
  .x-stage { aspect-ratio: auto; min-height: 560px; }
  .x-stage .x-vis { display: flex; align-items: center; }
  .x-stage .x-vis > * { width: 100%; }
}

/* ---- metodo en movil: apilado ---- */
@media (max-width: 959px) {
  .x-method-scene { height: auto !important; }
  .x-method-scene .x-stick { position: relative !important; min-height: 0 !important; display: block !important; padding: 1rem 0 0 !important; }
  .x-steps { gap: clamp(2.2rem, 6vw, 3.4rem) !important; }
  .x-step { opacity: 0 !important; transform: translateY(30px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
  .x-step.is-in { opacity: 1 !important; transform: none; }
  .x-step-num { display: inline-flex; width: fit-content; padding: .25rem .6rem; border-radius: 8px; background: rgba(31,191,107,.12); border: 1px solid rgba(31,191,107,.35); }
}

/* ---- RONDA 12 ---- */
/* el hero (cristal) llega hasta arriba, detras del header */
#main { padding-top: 0 !important; }
.x-hero-solid { padding-top: calc(88px + clamp(3.2rem, 8vw, 6.5rem)); }
@media (max-width: 640px) { .x-hero-solid { padding-top: calc(72px + 2.4rem); } }
.x-glass { height: min(900px, 100%); }
/* aguila en el header */
.x-brand { display: inline-flex; align-items: center; gap: .6rem; }
.x-brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(31,191,107,.35), 0 0 18px -4px rgba(31,191,107,.6); transition: transform .3s; }
.x-brand:hover img { transform: rotate(-6deg) scale(1.06); }
@media (max-width: 640px) { .x-brand img { width: 28px; height: 28px; border-radius: 8px; } .x-brand { gap: .45rem; } }
/* aguila como avatar del chat */
.x-ctyping b, .x-ca b { background: #070707; box-shadow: 0 0 0 1.5px #1FBF6B, 0 0 12px -2px rgba(31,191,107,.7); overflow: hidden; width: 32px; height: 32px; }
.x-ctyping b img, .x-ca b img { width: 100%; height: 100%; object-fit: cover; }
/* aguila sin recuadro */
.x-brand img { border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 0 8px rgba(31,191,107,.35)); }
.x-ctyping b, .x-ca b { background: transparent !important; box-shadow: none !important; border-radius: 0; overflow: visible; }
.x-ctyping b img, .x-ca b img { object-fit: contain; filter: drop-shadow(0 0 6px rgba(31,191,107,.35)); }
html[data-theme="papel"] .x-brand img, html[data-theme="papel"] .x-ca b img, html[data-theme="papel"] .x-ctyping b img { filter: invert(1) hue-rotate(180deg); }

/* =========================================================
   RONDA 13
   ========================================================= */
/* ---- rendimiento: lo que no se ve, no se anima ---- */
.x-off, .x-off *, .x-off *::before, .x-off *::after { animation-play-state: paused !important; }
#xFondo canvas { image-rendering: pixelated; }

/* ---- marcas: logos centrados y del mismo peso ---- */
.x-bcell { padding: 10% 12% !important; }
.x-bcell img { max-width: 86% !important; max-height: 52% !important; width: auto; height: auto; object-fit: contain; }
@media (min-width: 1024px) { .x-bcell img { max-height: 30px !important; } }
.x-brands.is-in .x-bcell img { animation: none !important; }
.x-brands.is-in .x-bcell::after { background: radial-gradient(circle, rgba(31,191,107,.35), transparent 70%); }

/* ---- formula: ejemplo que multiplica ---- */
.x-eq2 { position: relative; border-radius: 28px; padding: clamp(1.2rem, 3vw, 2rem); overflow: hidden;
  background: radial-gradient(90% 120% at 50% 0%, rgba(31,191,107,.14), transparent 60%), var(--x-card); border: 1px solid rgba(31,191,107,.3);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.95), 0 0 80px -40px rgba(31,191,107,.5); }
.x-e2-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.x-e2-tag { font-size: .78rem; font-weight: 700; color: var(--x-dim); }
.x-e2-sw { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--s-text) 6%, transparent); border: 1px solid var(--x-edge-hi); }
.x-e2-sw button { position: relative; z-index: 1; padding: .5rem 1rem; border: 0; background: none; border-radius: 999px; font: 700 .85rem Archivo, sans-serif; color: var(--x-body); cursor: pointer; transition: color .3s; }
.x-e2-sw button.on { color: #0A0A0A; }
.x-e2-sw i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #1FBF6B; box-shadow: 0 0 20px rgba(31,191,107,.6); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.x-eq2.is-b .x-e2-sw i { transform: translateX(100%); }
.x-e2-row { display: flex; align-items: stretch; gap: 10px; }
.x-e2c { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.2rem .8rem 1.1rem; border-radius: 20px;
  background: color-mix(in srgb, var(--s-bg) 55%, transparent); border: 1px solid var(--x-edge-hi); transition: border-color .5s, box-shadow .5s, background .5s; }
.x-e2c .k { font-size: .8rem; font-weight: 800; color: var(--x-body); }
.x-e2c b { display: block; margin-top: .3rem; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1; color: var(--s-text); font-feature-settings: 'tnum' 1, 'cv11' 1; transition: color .4s, transform .4s; }
.x-e2c .u { margin-top: .4rem; font-size: .76rem; color: var(--x-dim); }
.x-e2c em { margin-top: .7rem; font-style: normal; font-size: .72rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: opacity .4s .2s, transform .4s .2s; }
.x-e2c em.st { color: var(--x-dim); border: 1px solid var(--x-edge-hi); }
.x-e2c em.up { color: #0A0A0A; background: #1FBF6B; }
.x-e2c em.big { font-size: .9rem; padding: .3rem .8rem; box-shadow: 0 0 24px rgba(31,191,107,.7); }
.x-eq2.is-b .x-e2c em { opacity: 1; transform: none; }
.x-eq2.is-b .x-e2c.g, .x-eq2.is-b .x-e2c.v { border-color: rgba(31,191,107,.6); background: radial-gradient(120% 90% at 50% 0%, rgba(31,191,107,.18), transparent 70%); box-shadow: 0 0 50px -14px rgba(31,191,107,.6); }
.x-eq2.is-b .x-e2c.g b, .x-eq2.is-b .x-e2c.v b { color: #1FBF6B; text-shadow: 0 0 30px rgba(31,191,107,.4); }
.x-eq2.is-b .x-e2c.v b { transform: scale(1.08); }
.x-e2c.roll b { animation: e2roll .5s cubic-bezier(.2,.8,.2,1); }
@keyframes e2roll { 0% { transform: translateY(-40%); opacity: 0; filter: blur(4px); } 100% { opacity: 1; filter: none; } }
.x-e2o { align-self: center; font: 700 clamp(1.3rem, 2.4vw, 2rem)/1 'InterVariable', Archivo, sans-serif; color: var(--x-dim); }
.x-e2-bar { height: 3px; margin-top: 1.2rem; border-radius: 3px; background: var(--x-edge); overflow: hidden; }
.x-e2-bar i { display: block; height: 100%; width: 0; background: #1FBF6B; box-shadow: 0 0 10px #1FBF6B; }
.x-eq2.run .x-e2-bar i { animation: e2bar 4s linear infinite; }
@keyframes e2bar { to { width: 100%; } }
@media (max-width: 760px) {
  .x-e2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .x-e2o { display: none; }
  .x-e2c.v { grid-column: 1 / -1; }
  .x-e2c b { font-size: 2rem; }
  .x-e2-top { justify-content: center; }
}

/* ---- conector movil hacia el eslogan ---- */
.x-fjoin-m { display: none; }
@media (max-width: 819px) {
  .x-fjoin-m { display: block; position: relative; width: 2px; height: 70px; margin: 1.2rem auto 0; background: var(--x-edge-hi); overflow: hidden; }
  .x-fjoin-m i { position: absolute; left: 0; width: 100%; height: 30px; background: linear-gradient(transparent, #1FBF6B); box-shadow: 0 0 8px #1FBF6B; animation: fjm 1.6s linear infinite; }
  .x-fjoin-m::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #1FBF6B; }
  .x-fslogan { margin-top: 0 !important; }
}
@keyframes fjm { from { top: -30px; } to { top: 70px; } }

/* ---- estrategias: mismas alturas, sin huecos ---- */
.x-strat-grid { align-items: stretch; }
.x-chaos, .x-order { display: flex; flex-direction: column; }
.x-chips { flex: 1 1 auto; min-height: 170px; }
.x-order .x-calm { flex: 1 1 auto; min-height: 80px; height: auto; }
.x-olist, .x-nlist { margin-top: auto; }
.x-one { align-items: center; }
.x-aim { position: absolute; left: -12px; top: 50%; width: 110px; height: 110px; margin-top: -55px; pointer-events: none; }
.x-aim circle, .x-aim path { fill: none; stroke: rgba(31,191,107,.55); stroke-width: 1.5; }
.x-aim .c { fill: #1FBF6B; stroke: none; }
.x-strat.is-in .x-aim { animation: aimLock 4s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes aimLock { 0% { transform: scale(1.8) rotate(-40deg); opacity: 0; } 30% { transform: scale(1) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.x-order { padding-top: 1.6rem; }
.x-nlist li { padding: .55rem .7rem; border-radius: 12px; background: rgba(31,191,107,.07); border: 1px solid rgba(31,191,107,.18); }
.x-olist li { padding: .55rem .2rem; }

/* ---- indicadores del metodo ---- */
.x-kp2 { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin-top: 1.1rem; }
.x-kp2 small { flex: 1 0 100%; font-size: .78rem; font-weight: 700; color: var(--x-dim); }
.x-kp2 .k2 { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 14px; border: 1px solid rgba(31,191,107,.4); background: linear-gradient(180deg, rgba(31,191,107,.14), rgba(31,191,107,.03)); }
.x-kp2 .k2 b { font-size: 1.25rem; line-height: 1; color: var(--s-text); }
.x-kp2 .k2 em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-weight: 900; font-size: .9rem; background: #1FBF6B; color: #0A0A0A; box-shadow: 0 0 14px rgba(31,191,107,.6); }
.x-kp2 .k2 em.tx { width: auto; padding: 0 .5rem; border-radius: 999px; font-size: .7rem; }
.x-kp2 .k2 em.dn { background: #F6F4EF; }
.x-step:not(.is-on) .x-kp2 { display: none !important; }
@media (max-width: 959px) { .x-step .x-kp2 { display: flex !important; } .x-kp2 .k2 { flex: 1; justify-content: center; } }

/* ---- bento 03/05/06 ---- */
.x-offer span { font-size: .78rem; }
.x-t5 { padding-top: 1.6rem !important; }
.x-journey { position: relative; display: grid; gap: .45rem; margin-bottom: auto; padding: .9rem 1rem .9rem 1.6rem; border-radius: 14px; background: rgba(7,7,7,.72); backdrop-filter: blur(8px); border: 1px solid rgba(246,244,239,.12); }
.x-journey .jl { position: absolute; left: 1.05rem; top: 1.2rem; bottom: 1.2rem; width: 2px; background: rgba(246,244,239,.15); }
.x-journey .jl::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: #1FBF6B; box-shadow: 0 0 8px #1FBF6B; }
.x-t5.is-in .x-journey .jl::after { animation: jfill 5s ease-in-out infinite; }
@keyframes jfill { 0% { height: 0; } 80%, 100% { height: 100%; } }
.x-journey span { position: relative; display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; color: rgba(246,244,239,.55); }
.x-journey span b { position: absolute; left: -.85rem; width: 9px; height: 9px; border-radius: 50%; background: #2A2A2A; border: 2px solid rgba(246,244,239,.3); }
.x-t5.is-in .x-journey span { animation: jstep 5s ease-in-out calc(var(--k) * .57s) infinite; }
.x-t5.is-in .x-journey span b { animation: jdot 5s ease-in-out calc(var(--k) * .57s) infinite; }
@keyframes jstep { 0% { color: rgba(246,244,239,.55); } 8%, 90% { color: #F6F4EF; } 100% { color: rgba(246,244,239,.55); } }
@keyframes jdot { 0% { background: #2A2A2A; } 8%, 90% { background: #1FBF6B; border-color: #1FBF6B; box-shadow: 0 0 8px #1FBF6B; } 100% { background: #2A2A2A; } }
@media (min-width: 1024px) { .x-t5 { min-height: 460px; } .x-t5 .x-tile-img::after { background: linear-gradient(180deg, rgba(7,7,7,.35), rgba(7,7,7,.95) 75%); } }
.x-store { display: flex; align-items: center; gap: .9rem; margin: -.1rem 0 .6rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(246,244,239,.12); font-size: .72rem; color: rgba(246,244,239,.6); white-space: nowrap; overflow: hidden; }
.x-store b { font-size: .8rem; color: #F6F4EF; letter-spacing: .04em; }
.x-store .on { color: #1FBF6B; box-shadow: inset 0 -2px 0 #1FBF6B; padding-bottom: 2px; }

/* ---- formulario: selects ---- */
.x-form2 select { width: 100%; border-radius: 12px; border: 1px solid rgba(246,244,239,.16); background: rgba(7,7,7,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231FBF6B' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 1rem center; color: var(--s-text);
  padding: 1rem 2.4rem 1rem 1.05rem; font: 1rem Archivo, sans-serif; -webkit-appearance: none; appearance: none; outline: none; }
.x-form2 select:focus { border-color: #1FBF6B; box-shadow: 0 0 0 4px var(--g-12); }
.x-form2 select option { background: #111; color: #F6F4EF; }
html[data-theme="papel"] .x-form2 select { background-color: #F4F1E8; }

/* ---- FAQ: en movil la tarjeta va despues de las preguntas ---- */
.x-faq-cta-m { display: none; }
@media (max-width: 959px) { .x-faq-side .x-faq-cta { display: none; } .x-faq-cta-m { display: flex; margin-top: 1.4rem; } }

/* ---- CTA final: sin esquinas verdes ---- */
.cta-card { clip-path: inset(0 round 28px); }

.x-eq2 { display: block !important; }
.x-e2-row { width: 100%; }
.x-e2c { flex: 1 1 0 !important; max-width: none !important; }
@media (max-width: 760px) { .x-e2c.v { grid-column: auto !important; } }

/* ---- WhatsApp: tira bajo el FAQ + botón flotante ---- */
.x-wa-strip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem 1rem; margin-top: 8px; padding: 1.2rem 1.3rem; border-radius: 18px;
  border: 1px solid rgba(31,191,107,.35); background: linear-gradient(180deg, color-mix(in srgb, var(--x-card) 85%, #1FBF6B 15%), var(--x-card)); box-shadow: 0 0 40px -18px rgba(31,191,107,.5); }
.x-wa-strip > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.x-wa-strip > div span { font-size: .92rem; color: var(--x-body); }
.x-wa-strip .x-btn { grid-column: 1 / -1; justify-self: start; }
.x-wa-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--g); color: #0A0A0A; }
.x-wa-ic svg { width: 22px; height: 22px; }
@media (min-width: 640px) { .x-wa-strip { grid-template-columns: auto 1fr auto; } .x-wa-strip .x-btn { grid-column: auto; } }

.x-wa-float { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: block; width: 60px; height: 60px; transition: transform .2s ease; }
.x-wa-float img { display: block; width: 100%; height: 100%; }
.x-wa-float:hover { transform: scale(1.06); }
.x-wa-float:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 50%; }
@media print { .x-wa-float { display: none; } }
/* newsletter · ajuste escritorio: composicion a la altura real de la tarjeta y campo de email ancho */
@media (min-width: 900px) {
  .x-news { grid-template-columns: 1.05fr 1fr; }
  .x-news-h { font-size: clamp(2.2rem, 3.6vw, 3.5rem) !important; }
  .x-news-vis .nv1 { width: 50%; left: 4%; top: 6%; }
  .x-news-vis .nv2 { width: 33%; right: 5%; top: 4%; }
  .x-news-vis .nv3 { width: 46%; left: 22%; bottom: 5%; }
  .x-news-vis .nt1 { left: 36%; top: 45%; } .x-news-vis .nt2 { right: 6%; bottom: 22%; }
  .x-news-row { grid-template-columns: 1fr; }
  .x-news-row .x-btn { width: 100%; }
}
@media (min-width: 1680px) { .x-news-row { grid-template-columns: 1fr auto; } .x-news-row .x-btn { width: auto; } }
@media (min-width: 600px) and (max-width: 899px) {
  .x-news-vis .nv1 { width: 38%; left: 5%; top: 7%; }
  .x-news-vis .nv2 { width: 24%; right: 6%; top: 5%; }
  .x-news-vis .nv3 { width: 34%; left: 36%; bottom: 5%; }
  .x-news-vis .nt1 { left: 8%; bottom: 14%; } .x-news-vis .nt2 { right: 6%; bottom: 12%; }
}

/* ---- formula: calculadora interactiva (sustituye al ejemplo Hoy / Con marca) ---- */
.x-calc { position: relative; border-radius: 28px; padding: clamp(1.1rem, 3vw, 2rem); text-align: left;
  background: radial-gradient(90% 120% at 50% 0%, rgba(31,191,107,.14), transparent 60%), var(--x-card); border: 1px solid rgba(31,191,107,.3);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.95), 0 0 80px -40px rgba(31,191,107,.5); }
.x-cc-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.x-cc-tag { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 700; color: var(--x-body); }
.x-cc-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); animation: xBreath2 2s ease-in-out infinite; }
.x-cc-sw { display: inline-grid; grid-template-columns: 1fr 1fr; }
.x-cc-sw button { white-space: nowrap; }
.x-calc.is-b .x-cc-sw i { transform: translateX(100%); }
.x-calc.is-free .x-cc-sw i { opacity: 0; }
.x-cc-sw i { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.x-cc-row { display: flex; align-items: stretch; gap: 10px; }
.x-cc-c { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.2rem 1rem 1rem; border-radius: 20px;
  background: color-mix(in srgb, var(--s-bg) 55%, transparent); border: 1px solid var(--x-edge-hi); transition: border-color .4s, box-shadow .4s, background .4s; }
.x-cc-c .k, .x-cc-foot .k { font-size: .8rem; font-weight: 800; color: var(--x-body); }
.x-cc-c b { display: block; margin-top: .3rem; font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1; color: var(--s-text); font-feature-settings: 'tnum' 1, 'cv11' 1; white-space: nowrap; transition: color .3s; }
.x-cc-c .u, .x-cc-foot .u { margin-top: .4rem; font-size: .76rem; color: var(--x-dim); }
.x-cc-c.on, .x-cc-tk.on { border-color: rgba(31,191,107,.7); box-shadow: 0 0 40px -12px rgba(31,191,107,.6); }
.x-cc-c.on b { color: var(--g); }
.x-calc.is-up .x-cc-c.v { border-color: rgba(31,191,107,.6); background: radial-gradient(120% 90% at 50% 0%, rgba(31,191,107,.18), transparent 70%); box-shadow: 0 0 50px -14px rgba(31,191,107,.6); }
.x-calc.is-up .x-cc-c.v b { color: var(--g); text-shadow: 0 0 30px rgba(31,191,107,.4); }
.x-calc.flash .x-cc-c.v, .x-calc.flash .x-cc-fact { animation: ccFlash .8s ease; }
@keyframes ccFlash { 40% { transform: scale(1.03); box-shadow: 0 0 70px -10px rgba(31,191,107,.8); } }
.x-cc-x { margin-top: auto; padding: .25rem .6rem; border-radius: 999px; font-style: normal; font-size: .72rem; font-weight: 800; color: var(--x-dim); border: 1px solid var(--x-edge-hi); white-space: nowrap; transition: background .3s, color .3s; }
.x-cc-c.v .x-cc-x { margin-top: .9rem; }
.x-cc-x.up { color: #0A0A0A; background: #1FBF6B; border-color: #1FBF6B; box-shadow: 0 0 24px rgba(31,191,107,.6); }
.x-cc-x.down { color: #F6F4EF; background: rgba(200,64,64,.85); border-color: rgba(200,64,64,.9); }
.x-cc-lim { display: flex; justify-content: space-between; width: 100%; margin-top: .2rem; font-size: .66rem; font-weight: 600; color: var(--x-dim); font-feature-settings: 'tnum' 1; }

/* deslizador */
.x-cc-r { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: .9rem 0 0; background: transparent; cursor: pointer; --p: 50%; }
.x-cc-r:focus { outline: none; }
.x-cc-r::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #1FBF6B var(--p), color-mix(in srgb, var(--s-text) 14%, transparent) var(--p)); box-shadow: 0 0 12px -2px rgba(31,191,107,.5); }
.x-cc-r::-moz-range-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--s-text) 14%, transparent); }
.x-cc-r::-moz-range-progress { height: 6px; border-radius: 6px; background: #1FBF6B; }
.x-cc-r::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #F6F4EF; border: 4px solid #1FBF6B;
  box-shadow: 0 0 0 6px rgba(31,191,107,.18), 0 6px 16px rgba(0,0,0,.5); transition: transform .15s, box-shadow .2s; }
.x-cc-r::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #F6F4EF; border: 4px solid #1FBF6B; box-shadow: 0 0 0 6px rgba(31,191,107,.18), 0 6px 16px rgba(0,0,0,.5); }
.x-cc-r:hover::-webkit-slider-thumb, .x-cc-r:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(31,191,107,.22), 0 6px 16px rgba(0,0,0,.5); }
.x-cc-r:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--s-bg), 0 0 0 6px #1FBF6B; }
.x-cc-r:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--s-bg), 0 0 0 6px #1FBF6B; }

/* franja de facturacion */
.x-cc-foot { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; margin-top: 10px; }
.x-cc-foot > div { display: flex; flex-direction: column; justify-content: center; padding: 1.1rem 1.2rem; border-radius: 20px; border: 1px solid var(--x-edge-hi); background: color-mix(in srgb, var(--s-bg) 55%, transparent); transition: border-color .4s, box-shadow .4s, background .4s; }
.x-cc-foot b { display: block; margin-top: .3rem; line-height: 1; color: var(--s-text); font-feature-settings: 'tnum' 1, 'cv11' 1; white-space: nowrap; }
.x-cc-tk b { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.x-cc-tk .x-cc-r { margin-top: .5rem; }
.x-cc-fact { align-items: center; text-align: center; border-color: rgba(31,191,107,.45) !important; background: radial-gradient(120% 100% at 50% 0%, rgba(31,191,107,.16), transparent 70%) !important; }
.x-cc-fact b { font-size: clamp(2.2rem, 4.6vw, 3.8rem); color: var(--g); text-shadow: 0 0 34px rgba(31,191,107,.35); }
.x-cc-fact .u span { color: var(--s-text); font-weight: 700; }
.x-cc-delta b { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.x-cc-delta .k { font-weight: 700; }
.x-cc-delta.up { border-color: rgba(31,191,107,.55); } .x-cc-delta.up b { color: var(--g); }
.x-cc-delta.down { border-color: rgba(200,64,64,.55); } .x-cc-delta.down b { color: #e06060; }
.x-cc-note { margin-top: 1rem; font-size: .74rem; line-height: 1.5; color: var(--x-dim); text-align: center; }

@media (max-width: 1023px) {
  .x-cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .x-cc-row .x-e2o { display: none; }
  .x-cc-foot { grid-template-columns: 1fr 1fr; }
  .x-cc-fact { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 560px) {
  .x-cc-top { justify-content: center; text-align: center; }
  .x-cc-row { grid-template-columns: 1fr; }
  .x-cc-c { display: grid; grid-template-columns: 1fr auto; align-items: baseline; text-align: left; padding: .95rem 1rem .8rem; column-gap: .8rem; }
  .x-cc-c .k { grid-column: 1; grid-row: 1; } .x-cc-c b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 2rem; margin: 0; }
  .x-cc-c .u { grid-column: 1; grid-row: 2; margin-top: .15rem; }
  .x-cc-c .x-cc-r, .x-cc-c .x-cc-lim { grid-column: 1 / -1; }
  .x-cc-c .x-cc-r { margin-top: .5rem; }
  .x-cc-c.v .x-cc-x { grid-column: 1 / -1; justify-self: start; margin-top: .6rem; }
  .x-cc-foot { grid-template-columns: 1fr; }
  .x-cc-r::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  .x-cc-r { height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .x-cc-tag i, .x-calc.flash .x-cc-c.v, .x-calc.flash .x-cc-fact { animation: none; } }