/* Landing de TiendaPropia.
   Todo el color sale de las variables de la paleta (--ink, --bg, --surface, --soft, --accent…): las paletas y las
   plantillas (dynamic / premium / clean) solo cambian variables. El movimiento de las imágenes que se configura en
   Super Admin vive al final del archivo y no debe moverse de ahí (lo valida scripts/smoke-landing.mjs). */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---------- Paletas ----------
   :root es «Impulso» (la predeterminada): los colores del logo de TiendaPropia (morado, lila e índigo).
   --on-accent es el texto sobre un relleno de acento; --accent-text, el acento cuando se usa como texto. */
:root{
  --page-gutter:clamp(48px,9.5vw,180px);
  --ink:#0b0a36;--ink-2:#322f5e;--bg:#f6f4fd;--surface:#fff;--muted:#5a5c82;--line:#e1ddf2;
  --accent:#6f43f0;--accent-2:#bda1fa;--accent-3:#ff6b4a;--soft:#ece6ff;--soft-2:#f3efff;
  --on-accent:#fff;--accent-text:#5a2fd8;
  --radius:28px;--shadow:0 24px 60px -24px rgba(11,10,54,.3);
}
body[data-landing-palette="esmeralda"]{--ink:#0d1f2d;--ink-2:#27415a;--bg:#f2f9f5;--muted:#587083;--line:#d6e6dd;--accent:#19c26b;--accent-2:#ffc53d;--accent-3:#ff6b4a;--soft:#d9f6e6;--soft-2:#fff0c9;--on-accent:#04231a;--accent-text:#067a41;--shadow:0 24px 60px -24px rgba(13,31,45,.28)}
body[data-landing-palette="atardecer"]{--ink:#2a1233;--ink-2:#5a3558;--bg:#fff7f4;--muted:#7a5b69;--line:#f1ddd6;--accent:#ff6b4a;--accent-2:#ffc65c;--accent-3:#8b5cf6;--soft:#ffe6df;--soft-2:#fff0d6;--on-accent:#2a1233;--accent-text:#c2381f;--shadow:0 24px 60px -24px rgba(42,18,51,.3)}
/* Plantillas: solo variables. */
body[data-landing-template="premium"]{--bg:#0b1019;--surface:#111927;--ink:#f6f8fb;--ink-2:#d5dceb;--muted:#9aa7ba;--line:#25344a;--soft:#162235;--soft-2:#1b2940;--shadow:0 30px 80px -30px rgba(0,0,0,.6)}
body[data-landing-template="clean"]{--radius:18px;--shadow:0 18px 40px -26px rgba(11,10,54,.2);--bg:#fff}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.5;background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul{margin:0}
.shell{width:min(1560px,calc(100% - var(--page-gutter) - var(--page-gutter)));margin-inline:auto}
[hidden],[data-off]{display:none!important}
html:not(.tp-edit-mode) [data-empty]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.eyebrow{display:inline-block;min-height:0;padding:0 0 5px;border:0;border-bottom:1px solid #6F43F0;border-radius:0;background:transparent;color:#6F43F0;font-size:12px;font-weight:600;letter-spacing:.12em}
.eyebrow-light{background:transparent;color:#6F43F0}
.section-heading{max-width:760px}
.section-heading h2,.story-copy h2,.final-cta h2{font-size:clamp(34px,4.6vw,56px);font-weight:600;line-height:1.04;letter-spacing:-.04em}
.section-heading .eyebrow,.story-copy .eyebrow{margin-bottom:18px}
.section-heading>p,.story-copy p{margin-top:18px;color:var(--muted);font-size:18px;line-height:1.6}
.pricing-heading,.center-heading{margin-inline:auto;text-align:center}
.pricing-heading>p,.center-heading>p{margin-inline:auto;max-width:620px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;border:2px solid transparent;font-size:16px;font-weight:600;text-decoration:none;transition:transform .2s ease,opacity .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 16px 34px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}

/* ---------- Encabezado ---------- */
.site-header{position:sticky;top:12px;z-index:50;width:100%;min-height:68px;margin:12px 0 0;padding:8px var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);border-radius:0;background:color-mix(in srgb,var(--surface) 48%,transparent);box-shadow:none;backdrop-filter:blur(18px) saturate(1.15)}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{display:block;width:auto;height:46px}
.brand-logo--full{width:240px;height:46px;object-fit:cover;object-position:center}
.brand-logo--icon{display:none}
.brand--footer{gap:12px}
.brand-icon{width:46px;height:46px;object-fit:contain}
/* En el pie (fondo oscuro) la palabra va en blanco; el icono conserva su color. */
.brand-word{width:auto;height:24px;filter:brightness(0) invert(1)}
.site-nav{display:flex;align-items:center;gap:2px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s ease,text-shadow .2s ease}
.site-nav a:hover{background:transparent;color:var(--accent-text);text-shadow:0 1px 9px color-mix(in srgb,var(--accent) 58%,transparent)}
.site-nav .nav-login{margin-left:6px}
.site-nav .nav-cta{padding-inline:20px;background:transparent;color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:#FFB020;text-decoration-thickness:.75px;text-underline-offset:5px}
.site-nav .nav-cta:hover{background:transparent;color:var(--accent);text-decoration-color:#FFB020;text-shadow:0 1px 9px color-mix(in srgb,var(--accent) 58%,transparent)}

/* ---------- Portada ---------- */
.hero.shell{width:100%}
.hero{position:relative;isolation:isolate;margin-top:12px;min-height:570px;padding:0 0 0 max(var(--page-gutter),calc((100vw - 1560px)/2 + var(--page-gutter)));display:grid;grid-template-columns:minmax(360px,.78fr) minmax(540px,1.22fr);align-items:stretch;gap:0;overflow:hidden;border:0;border-radius:0;background:var(--surface)}
.hero-copy{position:relative;z-index:2;align-self:center;max-width:650px;padding:48px clamp(32px,4vw,72px) 48px 0}
.hero h1{max-width:520px;margin-top:18px;font-size:clamp(42px,4.1vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.045em}
.hero-lead{max-width:560px;margin-top:20px;color:var(--muted);font-size:20px;line-height:1.45}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-actions .btn{border-radius:8px}
.hero-actions .btn-primary{box-shadow:none}
.hero-actions .btn-ghost{border-color:var(--accent);background:var(--surface);color:var(--accent)}
.hero-actions .btn:hover{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 65%,transparent)}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;color:var(--ink-2);font-size:15px;font-weight:500}
.trust-row span::before{content:"✓";margin-right:8px;color:#FFB020;font-weight:600}

.hero-canvas{position:absolute;z-index:0;inset:0;min-width:0;min-height:570px;pointer-events:none}
.hero-layer{position:absolute;inset:0;transition:transform .35s ease-out;will-change:transform}
.hero-photo{position:absolute;inset:0;margin:0;overflow:hidden;border:0;border-radius:0;background:var(--surface);box-shadow:none}
.hero-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:right center;transform-origin:right center;scale:1.06}
.live-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);font-size:14px;line-height:1.25}
.live-chip small{display:block;color:var(--muted);font-size:12px}
.live-chip strong{display:block;font-weight:600}
.live-store{left:-7%;top:8%;width:min(270px,48%);display:block;padding:0 12px;overflow:hidden}
.live-store__head{display:flex;align-items:center;gap:12px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.live-store__head>img{width:48px;height:48px;flex:0 0 48px;border-radius:12px;object-fit:cover}
.live-store__head>div{min-width:0;flex:1}
.live-store__head strong,.live-store__head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-store__head strong{font-size:15px}
.live-store__head small{margin-top:3px;color:var(--muted);font-size:12px}
.live-store__share{color:var(--muted);font-size:22px;line-height:1}
.live-store__tabs{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0 10px;border-bottom:1px solid var(--line);font-size:12px;white-space:nowrap}
.live-store__tabs strong{padding-bottom:8px;margin-bottom:-11px;border-bottom:2px solid var(--accent);color:var(--accent-text);font-weight:600}
.live-store__tabs span{color:var(--ink-2)}
.live-store__product{display:flex;align-items:center;gap:10px;min-height:72px;border-bottom:1px solid var(--line)}
.live-store__product:last-child{border-bottom:0}
.live-store__product>img{width:48px;height:48px;flex:0 0 48px;border-radius:10px;object-fit:cover}
.live-store__product>span{min-width:0;flex:1}
.live-store__product strong,.live-store__product small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-store__product strong{font-size:13px;font-weight:600}
.live-store__product small{margin-top:3px;color:var(--muted);font-size:12px}
.live-store__product>b{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;font-size:21px;font-weight:400;line-height:1}
.live-order{right:4%;bottom:15%;width:min(330px,60%);padding:12px 16px;animation:tp-float 6s ease-in-out infinite}
.live-order__whatsapp{width:40px;height:40px;flex:0 0 40px}
.live-order>div{min-width:0;flex:1}
.live-order strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-order time{align-self:flex-start;color:var(--muted);font-size:12px;white-space:nowrap}
@keyframes tp-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
@keyframes tp-float{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ---------- Franja de rubros ---------- */
.marquee{margin-top:26px;overflow:hidden;border-block:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.marquee-track{display:flex;width:max-content;animation:tp-marquee 30s linear infinite;will-change:translate}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;flex:none;align-items:center;justify-content:space-around;min-width:100vw;gap:clamp(24px,3.5vw,52px);padding:18px clamp(22px,3vw,48px);white-space:nowrap}
.marquee-group strong{display:inline-flex;align-items:center;gap:clamp(24px,3.5vw,52px);color:var(--ink-2);font-size:clamp(15px,1.2vw,18px);font-weight:600;letter-spacing:.015em}
.marquee-group strong::after{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--accent);opacity:.55}
@keyframes tp-marquee{0%{translate:0 0}100%{translate:-50% 0}}

/* ---------- Cifras ---------- */
.stats{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:center}
.stat b{display:block;color:var(--accent-text);font-size:clamp(40px,4.6vw,60px);font-weight:600;line-height:1;letter-spacing:-.05em}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:15px;font-weight:500}

/* ---------- Bloques con imagen ---------- */
.story-section{padding:104px 0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}
.story-section--open{--open-white:#FFFFFF;--open-lavender:#F3F0FD;--open-purple:#7042F5;--open-amber:#FFB547;--open-card-radius:20px;--open-row-radius:16px;--open-float-shadow:0 12px 32px rgba(17,19,34,.12);width:100%;max-width:none;margin:0;padding:clamp(72px,7vw,112px) var(--page-gutter);grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);background:radial-gradient(ellipse 55% 80% at 8% 50%,color-mix(in srgb,var(--open-lavender) 94%,transparent),transparent 74%),radial-gradient(ellipse 42% 60% at 94% 6%,color-mix(in srgb,var(--open-lavender) 76%,transparent),transparent 74%),var(--open-white)}
.story-section--open .eyebrow{color:var(--open-purple);border-color:var(--open-purple)}
.story-section--open .story-copy .eyebrow{width:max-content;max-width:100%;padding:0;border:0}
.story-section--open .story-copy .eyebrow::after{display:block;width:100%;height:1px;margin-top:3px;background:color-mix(in srgb,var(--open-purple) 55%,transparent);content:""}
.story-section--open .story-copy{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.story-section--open .story-copy h2{font-size:clamp(30px,3vw,44px)}
.story-section--open .story-copy p{margin-top:12px;font-size:clamp(15px,1.25vw,18px);line-height:1.45}
.story-media{position:relative;min-height:520px;overflow:hidden;background:var(--surface);border-radius:36px;box-shadow:var(--shadow)}
.story-visual-stage{position:relative;isolation:isolate;min-width:0;min-height:0;aspect-ratio:1.65/1;margin-left:calc(-1 * (var(--page-gutter) + var(--story-image-bleed, 20px)));width:calc(100% + var(--page-gutter) + var(--story-image-bleed, 20px));display:grid;align-items:stretch}
.story-visual-glow{position:absolute;z-index:0;inset:-12% -8% -10% -14%;border-radius:50%;background:radial-gradient(ellipse at 48% 48%,var(--open-lavender) 0%,color-mix(in srgb,var(--open-lavender) 58%,transparent) 40%,transparent 74%);pointer-events:none}
.story-section--open .story-media{position:relative;z-index:1;width:100%;height:100%;min-height:0;margin:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.story-media img{position:absolute;inset:-20%;left:calc(-20% + 20%);width:140%;height:140%;object-fit:contain}

.section-sales-card{position:absolute;z-index:2;top:7%;right:46%;display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--open-purple) 10%,transparent);border-radius:var(--open-row-radius);background:var(--open-white);box-shadow:var(--open-float-shadow)}
.section-sales-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--open-purple);color:var(--open-white)}
.section-sales-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.section-sales-copy{display:grid;gap:1px;white-space:nowrap}
.section-sales-copy small,.section-order-copy small{color:var(--muted);font-size:13px}
.section-sales-copy strong{font-size:20px;line-height:1.1}
.section-sales-growth{color:var(--open-amber);font-size:13px;white-space:nowrap}
.section-sales-chart{width:46px;height:28px;fill:none;stroke:var(--open-purple);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.section-order-toast{position:absolute;z-index:2;right:0;bottom:9%;display:flex;align-items:center;gap:12px;width:min(360px,62%);padding:12px 16px;border:1px solid color-mix(in srgb,var(--open-purple) 10%,transparent);border-radius:var(--open-row-radius);background:var(--open-white);box-shadow:var(--open-float-shadow)}
.section-order-whatsapp{flex:none;width:40px;height:40px}
.section-order-copy{display:grid;min-width:0;flex:1;gap:2px}
.section-order-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.section-order-toast time{align-self:flex-start;color:var(--muted);font-size:13px;white-space:nowrap}
.image-badge{position:absolute;z-index:2;left:22px;bottom:22px;padding:11px 16px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600}
.image-badge-dark{background:var(--ink);color:var(--bg)}
.bullet-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.bullet-grid span{display:flex;align-items:center;min-height:52px;padding:10px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:15px;font-weight:500}
.bullet-grid-open{grid-template-columns:1fr;gap:clamp(6px,.7vw,10px);margin-top:clamp(14px,1.7vw,24px)}
.bullet-grid-open article{display:flex;align-items:center;gap:14px;min-width:0;min-height:58px;padding:6px 12px;border:1px solid color-mix(in srgb,var(--open-purple) 10%,var(--line));border-radius:16px;background:var(--open-white)}
.bullet-grid-open__icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--open-lavender);color:var(--open-purple)}
.bullet-grid-open__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bullet-grid-open__copy{display:grid;min-width:0;gap:2px}
.bullet-grid-open__copy strong{font-size:clamp(15px,1.45vw,20px);font-weight:600;line-height:1.25}
.bullet-grid-open__copy small{color:color-mix(in srgb,var(--muted) 82%,var(--bg));font-size:clamp(12px,1vw,14px);line-height:1.4}
.bullet-grid span::before{content:"";flex:none;width:10px;height:10px;margin-right:12px;border-radius:50%;background:var(--accent)}
.color-band{background:var(--soft)}
.color-band .eyebrow,.steps-section .eyebrow{background:transparent}
.story-section-reverse .story-copy{order:1}
.story-section-reverse .story-media{order:2}

.landing-image-story{margin-block:24px;padding:64px;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:56px;border-radius:40px;background:var(--soft-2)}
.landing-image-story__copy h2{margin-top:16px;font-size:clamp(34px,4.6vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.045em}
.landing-image-story__copy p{max-width:480px;margin-top:20px;color:var(--ink-2);font-size:18px;line-height:1.6}
.landing-image-story__media{overflow:hidden;border-radius:30px;box-shadow:var(--shadow);background:var(--surface)}
.landing-image-story__media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- Tú eres el dueño ---------- */
.owner{margin-top:96px;padding:88px 0;background:var(--ink);color:var(--bg)}
.owner-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:start;gap:64px}
.owner h2{font-size:clamp(34px,4.6vw,56px);font-weight:600;line-height:1.04;letter-spacing:-.04em}
.owner-lead{margin-top:20px;color:color-mix(in srgb,var(--bg) 74%,transparent);font-size:19px;line-height:1.6}
.owner-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.owner-card{padding:26px;border:1px solid color-mix(in srgb,var(--bg) 16%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--bg) 7%,transparent)}
.owner-card b{display:block;margin-bottom:10px;color:var(--accent-2);font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.owner-card p{color:color-mix(in srgb,var(--bg) 78%,transparent);font-size:15px;line-height:1.55}

/* ---------- Funciones ---------- */
.features-section{padding:104px 0 40px}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.feature-card{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:transform .25s ease,border-color .25s ease}
.feature-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.feature-card svg{width:46px;height:46px;padding:11px;border-radius:15px;background:var(--soft);color:var(--accent-text);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature-card h3{margin-top:18px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.feature-card p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.55}
.features-note{margin-top:26px;text-align:center;color:var(--muted);font-size:15px}
.features-note a{color:var(--accent-text);font-weight:600}

/* ---------- Planes ----------
   Tarjetas con la capacidad al frente y la lista completa de lo que incluye cada plan. Los números y las líneas salen de
   Super Admin (data-plan-* en index.html; las líneas que el plan no incluye llevan [hidden]). */
.pricing-section{padding:96px 0}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:64px;align-items:stretch}
.plan-card{position:relative;display:flex;flex-direction:column;gap:26px;padding:38px 32px 32px;border:1px solid var(--line);border-radius:32px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.plan-card--featured{border:2px solid var(--accent);box-shadow:0 30px 80px -30px color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-14px)}
.plan-card--pro{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.plan-card__flag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);padding:9px 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;letter-spacing:.1em;white-space:nowrap}
.plan-card--pro .plan-card__flag{background:var(--accent-2);color:#0b0a36}
.plan-card__head{display:grid;gap:0}
.plan-card__tag{color:var(--accent-text);font-size:12px;font-weight:600;letter-spacing:.14em}
.plan-card--pro .plan-card__tag{color:var(--accent-2)}
.plan-card__head h3{margin:8px 0 0;font-size:38px;font-weight:600;line-height:1;letter-spacing:-.045em}
.plan-card__head p{min-height:72px;margin:14px 0 0;color:var(--muted);font-size:16px;line-height:1.5}
.plan-card--pro .plan-card__head p{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.plan-card__price{display:flex;align-items:baseline;gap:6px;margin-top:18px}
.plan-card__price strong{font-size:60px;font-weight:600;line-height:1;letter-spacing:-.055em}
.plan-card__price span{color:var(--muted);font-size:17px;font-weight:500}
.plan-card--pro .plan-card__price span{color:color-mix(in srgb,var(--bg) 62%,transparent)}
.plan-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;list-style:none}
.plan-stats li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 6px 16px;border-radius:20px;background:var(--soft);text-align:center}
.plan-stats b{font-size:36px;font-weight:600;line-height:1;letter-spacing:-.045em}
.plan-stats span{color:var(--muted);font-size:14px;font-weight:500}
.plan-stats li:nth-child(3)::before{content:"o";position:absolute;left:-15px;top:50%;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font-size:11px;font-weight:600;transform:translateY(-50%)}
.plan-card--pro .plan-stats li{background:color-mix(in srgb,var(--bg) 10%,transparent)}
.plan-card--pro .plan-stats span{color:color-mix(in srgb,var(--bg) 66%,transparent)}
.plan-card--pro .plan-stats li:nth-child(3)::before{border-color:color-mix(in srgb,var(--bg) 24%,transparent);background:var(--ink);color:color-mix(in srgb,var(--bg) 66%,transparent)}
.plan-card__body{display:grid;gap:16px;align-content:start}
.plan-card__body h4{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.14em}
.plan-card--pro .plan-card__body h4{color:color-mix(in srgb,var(--bg) 62%,transparent)}
.plan-features{display:grid;gap:15px;padding:0;list-style:none}
.plan-features li{display:flex;align-items:flex-start;gap:12px;color:var(--ink-2);font-size:16px;font-weight:500;line-height:1.4}
.plan-features li::before{content:"✓";flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-text);font-size:13px;font-weight:600}
.plan-features b{font-weight:600}
.plan-features small{display:block;margin-top:2px;color:var(--muted);font-size:13px;font-weight:500}
.plan-card--pro .plan-features li{color:color-mix(in srgb,var(--bg) 90%,transparent)}
.plan-card--pro .plan-features li::before{background:color-mix(in srgb,var(--accent-2) 22%,transparent);color:var(--accent-2)}
.plan-card--pro .plan-features small{color:color-mix(in srgb,var(--bg) 62%,transparent)}
/* El cintillo es una condición del plan, no un beneficio: se muestra como dato, sin palomita. */
.plan-features li[data-plan-feature$=":promotionalBrandingEnabled"]:not([data-plan-feature^="!"])::before{content:"i";background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted);font-size:12px;font-style:italic;font-family:Georgia,serif}
.plan-features li[data-plan-feature$=":promotionalBrandingEnabled"]:not([data-plan-feature^="!"]){color:var(--muted);font-weight:400}
.plan-card--pro .plan-features li[data-plan-feature$=":promotionalBrandingEnabled"]:not([data-plan-feature^="!"]){color:color-mix(in srgb,var(--bg) 66%,transparent)}
.plan-card__cta{display:flex;align-items:center;justify-content:center;min-height:56px;margin-top:auto;border:2px solid var(--line);border-radius:999px;color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;transition:transform .2s ease,opacity .2s ease}
.plan-card--featured .plan-card__cta{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.plan-card--pro .plan-card__cta{border-color:var(--accent-2);background:var(--accent-2);color:#0b0a36}
.plan-card__cta:hover{transform:translateY(-2px)}
.plans-note{margin:36px auto 0;max-width:640px;text-align:center;color:var(--muted);font-size:15px;line-height:1.5}
.plans-note em{font-style:normal;font-weight:600;color:var(--ink)}
[data-plan-feature][hidden]{display:none!important}

/* ---------- Preguntas frecuentes ---------- */
.faq-section{padding:96px 0}
.faq-list{max-width:820px;margin:48px auto 0;display:grid;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:22px;background:var(--surface);transition:border-color .2s ease}
.faq-item[open]{border-color:var(--accent)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:18px 24px;cursor:pointer;list-style:none;font-size:18px;font-weight:600;letter-spacing:-.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--accent-text);font-size:22px;font-weight:500;line-height:1;transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 24px 24px;color:var(--muted);font-size:16px;line-height:1.65}

/* ---------- Cierre ---------- */
.final-cta{position:relative;margin-bottom:72px;padding:64px;display:flex;align-items:center;justify-content:space-between;gap:40px;overflow:hidden;border-radius:40px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,var(--accent-2)));color:var(--on-accent)}
.final-cta h2{max-width:640px}
.final-cta p{max-width:520px;margin-top:16px;font-size:19px;line-height:1.55;opacity:.86}
.final-cta .eyebrow{background:transparent;color:#6F43F0}
.btn-final{flex:none;min-height:60px;padding:0 34px;background:var(--surface);color:var(--accent-text);font-size:17px;font-weight:600;text-decoration:none}
.btn-final:hover{background:var(--surface)}

/* ---------- Pie de página ---------- */
.site-footer{margin-top:0;padding:0;background:var(--ink);color:color-mix(in srgb,var(--bg) 78%,transparent)}
.footer-inner{width:min(1560px,calc(100% - var(--page-gutter) - var(--page-gutter)));margin-inline:auto;padding:72px 0 28px}
.footer-grid{display:flex;flex-wrap:wrap;gap:40px}
.footer-about{flex:1.6 1 280px}
.footer-col{flex:1 1 150px}
.site-footer .brand{color:var(--bg)}
.footer-about p{max-width:300px;margin-top:18px;font-size:15px;line-height:1.6}
.footer-cta{display:inline-flex;align-items:center;min-height:48px;margin-top:22px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;text-decoration:none}
.footer-col h4{margin-bottom:16px;color:var(--bg);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.footer-col ul{padding:0;list-style:none;display:grid;gap:4px}
.footer-col a{display:inline-flex;align-items:center;min-height:36px;color:inherit;font-size:15px;text-decoration:none}
.footer-col a:hover{color:var(--accent-2)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--bg) 16%,transparent);font-size:14px}

/* ---------- Aparecer al hacer scroll (landing.js agrega .js y .is-visible; sin JS todo se ve) ---------- */
.js [data-reveal]{opacity:0;translate:0 26px;transition:opacity .7s ease-out,translate .7s ease-out;transition-delay:var(--reveal-delay,0ms)}
.js [data-reveal].is-visible{opacity:1;translate:0 0}

/* ---------- Adaptación ---------- */
@media(max-width:1060px){
  .hero{grid-template-columns:1fr;gap:24px;min-height:0;padding:48px 0 0 var(--page-gutter)}
  .hero-copy{max-width:720px;padding:0 var(--page-gutter) 0 0}
  .hero-canvas{position:relative;inset:auto;min-height:0;width:calc(100% + var(--page-gutter));margin-left:calc(-1 * var(--page-gutter));aspect-ratio:1672/941}
  .story-section{grid-template-columns:1fr;gap:40px;padding:72px 0}
  :root{--page-gutter:44px}
  .story-section--open{grid-template-columns:1fr;gap:40px;padding:64px var(--page-gutter)}
  .story-visual-stage{min-height:0;margin-left:calc(-1 * (var(--page-gutter) + var(--story-image-bleed, 20px)));width:calc(100% + var(--page-gutter) + var(--story-image-bleed, 20px))}
  .story-visual-stage{aspect-ratio:1.65/1}
  .story-section--open .story-media{height:100%;aspect-ratio:auto;min-height:0}
  .section-sales-card{top:5%;right:46%}
  .section-order-toast{right:0;bottom:6%;width:min(360px,62%)}
  .story-section-reverse .story-copy,.story-section-reverse .story-media{order:0}
  .story-media{min-height:420px}
  .landing-image-story{grid-template-columns:1fr;padding:44px 32px;gap:32px}
  .owner-grid{grid-template-columns:1fr;gap:40px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto;gap:36px}
  .plan-card--featured{transform:none}
  .plan-card__head p{min-height:0}
  .footer-grid{gap:36px}
  .footer-about{flex-basis:100%}
  .final-cta{flex-direction:column;align-items:flex-start;padding:48px 36px}
}
@media(min-width:1061px) and (max-width:1120px){
  .story-section--open{grid-template-columns:1fr;gap:40px;padding-block:64px}
}
@media(max-width:1060px){
  .story-section--open{grid-template-columns:1fr;gap:40px;padding-block:64px}
  .story-visual-stage{min-height:0}
  .section-sales-card{top:5%;right:46%}
  .section-order-toast{right:0;bottom:6%;width:min(360px,62%)}
}
@media(max-width:980px){.site-nav>a:not(.nav-login):not(.nav-cta){display:none}}
@media(max-width:760px){
  body{font-size:16px}
  .stats{grid-template-columns:1fr 1fr}
  .owner-cards{grid-template-columns:1fr}
  .bullet-grid{grid-template-columns:1fr}
  .section-heading>p,.story-copy p{font-size:16px}
}
@media(max-width:560px){
  :root{--page-gutter:28px}
  .shell{width:min(1560px,calc(100% - var(--page-gutter) - var(--page-gutter)))}
  .footer-inner{width:min(1560px,calc(100% - var(--page-gutter) - var(--page-gutter)))}
  .site-header{top:8px;width:100%;margin:8px 0 0;padding:8px var(--page-gutter);flex-wrap:nowrap}
  .brand-logo{height:40px;width:auto;object-fit:contain}
  .brand-logo--full{display:none}
  .brand-logo--icon{display:block;width:40px}
  .site-header>.site-nav .nav-login{display:none}
  .hero{gap:22px;padding:28px 0 0 var(--page-gutter);border-radius:0}
  .hero-copy{padding-right:var(--page-gutter)}
  .hero h1{margin-top:16px;font-size:38px;line-height:1.04}
  .hero-lead{margin-top:18px;font-size:18px;line-height:1.45}
  .hero-actions{margin-top:24px}
  .hero-actions .btn{width:100%}
  .trust-row{margin-top:20px;gap:8px 18px;font-size:14px}
  .hero-canvas{min-height:0}
  .story-section--open{gap:30px;padding:48px var(--page-gutter)}
  .story-visual-stage{min-height:0}
  .section-sales-card{top:2%;right:min(46%,calc(100% - 320px));gap:8px;min-height:62px;padding:8px 10px}
  .section-sales-icon{width:34px;height:34px}
  .section-sales-copy strong{font-size:17px}
  .section-sales-growth{font-size:13px}
  .section-sales-chart{display:none}
  .section-order-toast{right:5%;bottom:5%;width:90%;gap:9px;padding:9px 11px}
  .section-order-whatsapp{width:34px;height:34px}
  .bullet-grid-open{margin-top:24px}
  .bullet-grid-open article{gap:12px;min-height:58px;padding:6px 10px}
  .bullet-grid-open__icon{width:38px;height:38px}
  .bullet-grid-open__copy strong{font-size:15px}
  .bullet-grid-open__copy small{font-size:12px}
  .live-store{left:-2%;top:2%;width:72%;padding-inline:12px}
  .live-store__head{padding-top:10px}
  .live-store__head>img,.live-store__product>img{width:42px;height:42px;flex-basis:42px}
  .live-store__product{min-height:60px}
  .live-order{right:0;bottom:10%;width:88%;padding:10px 12px;gap:10px}
  .live-order__whatsapp{width:36px;height:36px;flex-basis:36px}
  .feature-grid{grid-template-columns:1fr}
  .landing-image-story{padding:32px 20px;border-radius:30px}
  .owner{padding:64px 0;margin-top:64px}
  .pricing-section,.faq-section,.features-section,.steps-section{padding:64px 0}
  .plan-card{padding:34px 22px 26px;border-radius:26px}
  .plan-card__head h3{font-size:34px}
  .plan-card__price strong{font-size:52px}
  .plan-stats b{font-size:30px}
  .plan-stats span{font-size:13px}
  .plan-features li{font-size:15px}
  .faq-item summary{font-size:16px;padding:16px 18px}
  .faq-item p{padding:0 18px 20px}
  .final-cta{padding:40px 24px;border-radius:30px}
  .final-cta .btn-final{width:100%}
  .footer-col{flex-basis:calc(50% - 20px)}
}

/* ---------- Plantillas interactivas ---------- */
.showcase-section{padding:104px 0 56px}
.tpl-showcase{margin-top:44px}
.tpl-tabs{display:flex;gap:8px;margin-bottom:22px;padding:4px 2px 10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;justify-content:center;flex-wrap:wrap}
.tpl-tabs::-webkit-scrollbar{display:none}
.tpl-tab{flex:none;min-height:46px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:15px;font-weight:500;cursor:pointer;scroll-snap-align:center;transition:background-color .2s ease,color .2s ease,transform .2s ease}
.tpl-tab:hover{transform:translateY(-2px)}
.tpl-tab.is-active{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}
.browser-frame{overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow)}
.browser-bar{display:flex;align-items:center;gap:7px;height:44px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.browser-bar span{margin-left:14px;padding:5px 16px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:13px}
.tpl-screens{position:relative;aspect-ratio:8/5;background:var(--bg)}
.tpl-screen{position:absolute;inset:0;margin:0;opacity:0;translate:0 10px;scale:.992;transition:opacity .55s ease,translate .55s ease,scale .55s ease;pointer-events:none}
.tpl-screen.is-active{opacity:1;translate:0 0;scale:1;pointer-events:auto}
.tpl-screen img{width:100%;height:100%;object-fit:cover;object-position:center}
.tpl-caption{margin:22px auto 0;max-width:620px;text-align:center;color:var(--ink-2);font-size:18px;font-weight:500;line-height:1.5}

/* Tienda de muestra: se pinta con las variables --m-* (las pone landing.js desde config/color-palettes.js). */
.mock-store{--m-primary:#123F46;--m-accent:#2A8C95;--m-bg:#EEF5F5;--m-surface:#F9FCFC;--m-card:#DDEBEC;--m-text:#123F46;--m-on-primary:#fff;position:relative;display:grid;gap:14px;padding:18px;border-radius:26px;background:var(--m-bg);color:var(--m-text);box-shadow:var(--shadow);transition:background-color .4s ease,color .4s ease}
.mock-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:16px;background:var(--m-surface);transition:background-color .4s ease}
.mock-bar b{font-size:16px;font-weight:600}
.mock-pill{padding:6px 14px;border:1px solid color-mix(in srgb,var(--m-text) 20%,transparent);border-radius:999px;font-size:12px}
.mock-hero{display:grid;gap:10px;justify-items:start;padding:28px 24px;border-radius:20px;background:var(--m-card);transition:background-color .4s ease}
.mock-hero small{color:var(--m-accent);font-size:11px;font-weight:600;letter-spacing:.12em;transition:color .4s ease}
.mock-hero h4{max-width:300px;font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.03em}
.mock-btn{padding:10px 20px;border-radius:999px;background:var(--m-primary);color:var(--m-on-primary);font-size:13px;font-weight:600;transition:background-color .4s ease,color .4s ease}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mock-card{display:grid;gap:4px;padding:10px;border-radius:16px;background:var(--m-surface);transition:background-color .4s ease}
.mock-card i{aspect-ratio:1;border-radius:11px;background:linear-gradient(135deg,var(--m-card),color-mix(in srgb,var(--m-accent) 55%,var(--m-card)));transition:background .4s ease}
.mock-card b{font-size:13px;font-weight:600}
.mock-card em{color:var(--m-accent);font-size:13px;font-style:normal;font-weight:600;transition:color .4s ease}
.mock-fab{position:absolute;right:16px;bottom:-14px;padding:10px 18px;border-radius:999px;background:var(--m-accent);color:var(--m-on-accent,#fff);font-size:13px;font-weight:600;box-shadow:0 14px 28px -14px rgba(0,0,0,.45);transition:background-color .4s ease}

/* ---------- Pasos interactivos ---------- */
.steps-section{padding:96px 0;background:var(--soft)}
.stepper{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:stretch;margin-top:48px}
.stepper-list{display:grid;gap:14px;align-content:start}
.step-item{position:relative;display:grid;gap:8px;padding:26px 28px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:transform .25s ease,border-color .25s ease,opacity .25s ease;opacity:.72}
.step-item:hover{opacity:1}
.step-item.is-active{border-color:var(--accent);opacity:1;transform:translateX(8px);box-shadow:var(--shadow)}
.step-meta{display:flex;align-items:center;justify-content:space-between}
.step-number{color:var(--accent-text);font-size:40px;font-weight:600;line-height:1;letter-spacing:-.05em}
.step-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent);transform:translateX(var(--step-icon-offset,0px))}
.step-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step-item h3{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.step-item p{color:var(--muted);font-size:16px;line-height:1.5}
.step-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.step-item.is-active .step-progress{animation:tp-progress var(--step-time,5s) linear forwards}
.stepper.is-manual .step-item.is-active .step-progress{animation:none;transform:scaleX(1)}
@keyframes tp-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stepper-stage{position:relative;min-height:440px;overflow:hidden;border-radius:var(--radius);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent) 14%,var(--surface)));border:1px solid var(--line)}
.stage-panel{position:absolute;inset:0;display:grid;place-items:center;padding:28px;opacity:0;translate:0 14px;transition:opacity .5s ease,translate .5s ease;pointer-events:none}
.stage-panel.is-active{opacity:1;translate:0 0}
.stage-card{display:grid;gap:12px;width:min(380px,100%);padding:26px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
.stage-title{font-size:20px;font-weight:600;letter-spacing:-.02em}
.fake-field{display:grid;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;color:var(--ink-2);font-size:15px}
.fake-field small,.stage-label{color:var(--muted);font-size:12px}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{padding:14px;border:2px solid var(--line);border-radius:16px;text-align:center;font-size:15px;font-weight:600}
.choice.is-picked{border-color:var(--accent);background:var(--soft);color:var(--accent-text)}
.stage-panel.is-active .choice:not(.is-picked){animation:tp-pick 4s ease-in-out infinite}
.stage-panel.is-active .choice.is-picked{animation:tp-pick-off 4s ease-in-out infinite}
@keyframes tp-pick{0%,45%{border-color:var(--line);background:transparent;color:var(--ink)}55%,90%{border-color:var(--accent);background:var(--soft);color:var(--accent-text)}100%{border-color:var(--line);background:transparent;color:var(--ink)}}
@keyframes tp-pick-off{0%,45%{border-color:var(--accent);background:var(--soft);color:var(--accent-text)}55%,90%{border-color:var(--line);background:transparent;color:var(--ink)}100%{border-color:var(--accent);background:var(--soft);color:var(--accent-text)}}
.stage-btn{display:flex;justify-content:center;padding:14px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600}
.stepper-stage .mock-store{width:min(440px,100%);margin-top:6px}
.stage-chat{gap:10px}
.stage-chat .bubble{max-width:86%;padding:9px 13px;border-radius:16px;font-size:13px;line-height:1.35;opacity:0;animation:none}
.stage-chat .bubble-in{align-self:flex-start;border-bottom-left-radius:5px;background:var(--soft);color:var(--ink)}
.stage-chat .bubble-out{align-self:flex-end;border-bottom-right-radius:5px;background:var(--accent);color:var(--on-accent)}
.stage-panel.is-active .stage-chat .bubble{animation:tp-chat 9s ease-in-out infinite both}
.stage-chat .bubble:nth-of-type(1){animation-delay:.2s}
.stage-chat .bubble:nth-of-type(2){animation-delay:1.6s}
.stage-chat .bubble:nth-of-type(3){animation-delay:3s}
.stage-link{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:8px 14px;border-radius:999px;background:var(--soft);color:var(--accent-text);font-size:13px;font-weight:600}
.stage-link i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.stage-sold{justify-self:center;margin-top:4px;padding:9px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:600;opacity:0}
.stage-panel.is-active .stage-sold{animation:tp-chat 9s ease-in-out 4.4s infinite both}
@keyframes tp-chat{0%{opacity:0;translate:0 12px}10%,86%{opacity:1;translate:0 0}95%,100%{opacity:0;translate:0 -6px}}

/* Fotos que reaccionan al cursor: un acercamiento suave. Solo con mouse. */
@media (hover:hover) and (pointer:fine){
  .story-media img,.landing-image-story__media img{transition:scale .7s ease}
  .story-media:hover img,.landing-image-story__media:hover img{scale:1.045}
  .section-sales-card,.section-order-toast{transition:translate .28s ease,scale .28s ease,box-shadow .28s ease}
  .section-sales-card:hover,.section-order-toast:hover{translate:0 -6px;scale:1.025;box-shadow:0 20px 44px -20px rgba(17,19,34,.24)}
}

@media(max-width:1060px){
  .stepper{grid-template-columns:1fr}
  .stepper-stage{min-height:420px}
  .step-item.is-active{transform:none}
}
@media(max-width:560px){
  .showcase-section{padding:64px 0 40px}
  .tpl-tabs{justify-content:flex-start;flex-wrap:nowrap}
  .tpl-tab{min-height:44px;padding:0 16px;font-size:14px}
  .tpl-caption{font-size:16px}
  .browser-bar span{display:none}
  .mock-hero h4{font-size:21px}
  .step-item{padding:22px 20px}
  .stage-panel{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .tpl-screen,.stage-panel{transition:none;translate:none;scale:none}
  .step-item.is-active .step-progress{animation:none;transform:scaleX(1)}
  .stage-panel.is-active .choice,.stage-panel.is-active .stage-chat .bubble,.stage-panel.is-active .stage-sold{animation:none;opacity:1}
  .tpl-tab,.step-item{transition:none}
  .story-media img,.landing-image-story__media img{transition:none}
  .section-sales-card,.section-order-toast{transition:none!important}
  .section-sales-card:hover,.section-order-toast:hover{translate:none;scale:none}
}

/* Sin movimiento para quien lo pide: todo queda visible y quieto. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;translate:none;transition:none}
  .bubble{animation:none;opacity:1;translate:none}
  .live-link .dot,.live-order,.marquee-track{animation:none}
  .marquee-track{flex-wrap:wrap;width:auto}
  .marquee-group[aria-hidden="true"]{display:none}
  .hero-layer{transition:none;transform:none!important}
  .btn,.plan-card__cta,.steps-grid article,.feature-card{transition:none}
}

/* Beneficios junto a la imagen: presentación de la referencia, sin cambiar el bloque visual. */
#para-quien .story-copy .eyebrow{letter-spacing:.14em;font-size:13px;font-weight:600}
#para-quien .story-copy h2{letter-spacing:-.045em;line-height:1.08}
#para-quien .story-copy>p{color:var(--muted)}
:is(#para-quien,#servicios-citas) .bullet-grid-open{gap:10px;margin-top:24px}
:is(#para-quien,#servicios-citas) .bullet-grid-open article{--benefit-tint:#eee8ff;position:relative;isolation:isolate;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:12px;min-height:86px;padding:12px 110px 12px 14px;overflow:hidden;border:1px solid #f0ebfc;border-radius:26px;background:linear-gradient(115deg,#fff 30%,#fbfaff 100%);box-shadow:0 6px 18px -12px rgba(112,66,245,.22)}
:is(#para-quien,#servicios-citas) .bullet-grid-open article::before{position:absolute;z-index:-1;content:"";right:-28px;bottom:-28px;width:150px;height:130px;border-radius:70% 40% 0 60%;background:linear-gradient(145deg,transparent 5%,var(--benefit-tint) 80%);transform:rotate(-12deg)}
:is(#para-quien,#servicios-citas) .bullet-grid-open article:nth-child(1){--benefit-tint:#d9f4ed}
:is(#para-quien,#servicios-citas) .bullet-grid-open article:nth-child(2){--benefit-tint:#eee8ff}
:is(#para-quien,#servicios-citas) .bullet-grid-open article:nth-child(3){--benefit-tint:#fff0cb}
:is(#para-quien,#servicios-citas) .bullet-grid-open__icon{width:46px;height:52px;border-radius:13px;border:1px solid color-mix(in srgb,var(--open-purple) 8%,transparent);background:color-mix(in srgb,var(--open-purple) 5%,#fff);color:var(--open-purple)}
:is(#para-quien,#servicios-citas) .bullet-grid-open__icon svg{width:24px;height:24px;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;filter:none}
:is(#para-quien,#servicios-citas) .bullet-grid-open__copy{position:relative;min-width:0;gap:6px;padding-left:12px;border-left:1px solid #e4dcfa}
:is(#para-quien,#servicios-citas) .bullet-grid-open__copy strong{font-size:18px;line-height:1.22;font-weight:600;letter-spacing:-.025em}
:is(#para-quien,#servicios-citas) .bullet-grid-open__copy small{font-size:12.5px;line-height:1.45;color:#7a7891}
:is(#para-quien,#servicios-citas) .benefit-mini{position:absolute;z-index:-1;right:-6px;bottom:-5px;width:104px;height:104px;overflow:visible;pointer-events:none}
:is(#para-quien,#servicios-citas) .bullet-grid-open article:nth-child(4) .benefit-mini{right:0;width:104px}
@media(hover:hover) and (pointer:fine){
  :is(#para-quien,#servicios-citas) .benefit-mini{transition:translate .3s ease}
  :is(#para-quien,#servicios-citas) .bullet-grid-open article:hover .benefit-mini{translate:0 -4px}
}
@media(min-width:761px) and (max-width:1120px){
  :is(#para-quien,#servicios-citas) .bullet-grid-open article{min-height:84px;padding-right:156px;grid-template-columns:50px minmax(0,1fr)}
  :is(#para-quien,#servicios-citas) .benefit-mini{right:12px;width:145px;height:116px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open article:nth-child(4) .benefit-mini{right:3px;width:155px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open article::before{width:220px;height:150px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open__copy strong{font-size:20px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open__copy small{font-size:13px}
}
@media(max-width:760px){
  :is(#para-quien,#servicios-citas) .bullet-grid-open{gap:10px;margin-top:22px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open article{grid-template-columns:38px minmax(0,1fr);gap:9px;min-height:92px;padding:10px 75px 10px 10px;border-radius:22px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open__icon{width:38px;height:46px;border-radius:12px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open__icon svg{width:22px;height:22px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open__copy{padding-left:9px;gap:5px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open__copy strong{font-size:16px;line-height:1.22}
  :is(#para-quien,#servicios-citas) .bullet-grid-open__copy small{font-size:12px;line-height:1.4}
  :is(#para-quien,#servicios-citas) .benefit-mini{right:-4px;width:72px;height:98px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open article:nth-child(4) .benefit-mini{right:-3px;width:76px}
  :is(#para-quien,#servicios-citas) .bullet-grid-open article::before{width:110px;height:145px;right:-40px}
}
@media(prefers-reduced-motion:reduce){
  :is(#para-quien,#servicios-citas) .benefit-mini{transition:none!important;translate:none!important}
}
/* Distribución de Más para tu negocio; conserva la imagen y sus atributos del administrador. */
#para-quien.story-section--open{grid-template-columns:minmax(0,48fr) minmax(0,52fr);align-items:center;gap:clamp(28px,3vw,48px);padding-block:80px;background:var(--open-white)}
#para-quien .story-copy{align-self:center;justify-content:center}
#para-quien .benefits-heading .eyebrow{margin-bottom:14px}
#para-quien .benefits-heading>p{margin-top:10px;color:var(--muted);font-size:clamp(15px,1.25vw,18px);line-height:1.45}
#para-quien .story-visual-stage{align-self:center;width:100%;margin:0;aspect-ratio:1.65/1}
#para-quien .story-visual-glow{inset:-22% -8%;border:0;box-shadow:none;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--open-purple) 9%,transparent) 0%,color-mix(in srgb,var(--open-purple) 4%,transparent) 44%,transparent 74%)}
@media(max-width:1120px){
  #para-quien.story-section--open{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:64px}
  #para-quien .story-copy{display:contents;opacity:1;translate:none}
  #para-quien .benefits-heading{grid-column:1;grid-row:1;min-width:0}
  #para-quien .story-visual-stage{grid-column:1;grid-row:2;width:100%;max-width:700px;justify-self:center;margin:0}
  #para-quien .bullet-grid-open{grid-column:1;grid-row:3;margin-top:0}
}
@media(max-width:760px){
  #para-quien.story-section--open{gap:28px;padding-block:48px}
  #para-quien .benefits-heading .eyebrow{margin-bottom:14px}
  #para-quien .benefits-heading>p{font-size:16px;line-height:1.45}
  #para-quien .story-visual-glow{inset:-8% -4%}
}

/* En escritorio, el área visual iguala la altura del contenido derecho. */
@media(min-width:1121px){
  #para-quien .story-visual-stage{align-self:stretch;aspect-ratio:auto;min-height:0}
}


/* Servicios: mismas tarjetas que «Haz más con tu tienda»; la imagen se integra sin marco. */
.services-band{--open-white:#FFFFFF;--open-lavender:#F3F0FD;--open-purple:#7042F5;--open-amber:#FFB547}
.services-band .story-section{grid-template-columns:minmax(0,50fr) minmax(0,50fr);align-items:center;gap:clamp(28px,4vw,64px);padding-block:80px}
.services-band .story-copy{align-self:center;justify-content:center}
.services-band .story-copy h2{font-size:clamp(30px,3vw,44px);letter-spacing:-.045em;line-height:1.08}
.services-band .benefits-heading>p{margin-top:10px;color:var(--muted);font-size:clamp(15px,1.25vw,18px);line-height:1.45}
#servicios-citas .bullet-grid-open article:nth-child(1){--benefit-tint:#eee8ff}
#servicios-citas .bullet-grid-open article:nth-child(2){--benefit-tint:#fff0cb}
#servicios-citas .bullet-grid-open article:nth-child(3){--benefit-tint:#eee8ff}
#servicios-citas .bullet-grid-open article:nth-child(4){--benefit-tint:#d9f4ed}
.services-band .story-media-two{min-height:0;overflow:hidden;border-radius:12px;background:transparent;box-shadow:none}
.services-band .story-media-two img{position:static;inset:auto;display:block;width:100%;height:auto;object-fit:cover}
.services-band .story-media-two .image-badge{left:16px;bottom:16px}
@media(max-width:1120px){
  .services-band .story-section{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:64px}
  .services-band .story-media-two{max-width:700px;justify-self:center;width:100%}
}
/* Haz más con tu tienda: tarjetas de fondo lila. */
#para-quien .bullet-grid-open article{background:#f1edff;border-color:#e2d9fb}
#para-quien .bullet-grid-open__icon{background:#fff;border-color:#e2d9fb}

/* Restaurantes: franja lavanda a todo el ancho, imagen abierta y sin marco. */
.landing-image-story-restaurant{width:100%;max-width:none;margin:0;padding:clamp(40px,5vw,64px) max(var(--page-gutter),calc((100% - 1560px)/2));grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);border-radius:0;background:var(--soft-2)}
.landing-image-story-restaurant .landing-image-story__copy h2{font-size:clamp(30px,3vw,44px);letter-spacing:-.045em;line-height:1.08}
.landing-image-story-restaurant .landing-image-story__copy p{margin-top:12px;font-size:clamp(15px,1.25vw,18px);line-height:1.45}
.landing-image-story-restaurant .landing-image-story__media{border-radius:12px;box-shadow:none;background:transparent}
@media(max-width:1120px){
  .landing-image-story-restaurant{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:44px}
}
@media(max-width:760px){
  .landing-image-story-restaurant{padding:36px var(--page-gutter);border-radius:0}
}
/* La franja de Restaurantes termina pegada a la sección siguiente (sin el hueco de antes). */
.landing-image-story-restaurant+.owner{margin-top:0}

/* La imagen de Restaurantes es un recorte con fondo transparente: se muestra completa, sin recortar. */
.landing-image-story-restaurant .landing-image-story__media img{aspect-ratio:auto;height:auto;object-fit:contain}

/* Haz más con tu tienda: lista editorial, sin tarjetas ni ilustraciones. */
#para-quien .bullet-grid-open{gap:0;margin-top:20px;padding-top:2px;background:linear-gradient(#FFB020,#FFB020) 0 0/32px 2px no-repeat}
#para-quien .bullet-grid-open article{grid-template-columns:28px minmax(0,1fr);gap:16px;min-height:0;padding:15px 0;overflow:visible;border:0;border-top:1px solid #ebe8f4;border-radius:0;background:none;box-shadow:none}
#para-quien .bullet-grid-open article:first-child{border-top:0;padding-top:18px}
#para-quien .bullet-grid-open article::before{display:none}
#para-quien .bullet-grid-open__icon{width:28px;height:28px;border:0;border-radius:0;background:none;color:#6F43F0}
#para-quien .bullet-grid-open__icon svg{width:24px;height:24px;stroke-width:1.7}
#para-quien .bullet-grid-open__copy{gap:3px;padding-left:0;border-left:0}
#para-quien .bullet-grid-open__copy strong{color:#141b4d;font-size:17px;font-weight:600;letter-spacing:-.02em}
#para-quien .bullet-grid-open__copy small{color:#6b6f80;font-size:14px;line-height:1.45}
@media(max-width:760px){
  #para-quien .bullet-grid-open article{grid-template-columns:26px minmax(0,1fr);gap:14px;padding:13px 0}
  #para-quien .bullet-grid-open__copy strong{font-size:16px}
  #para-quien .bullet-grid-open__copy small{font-size:13px}
}

/* Servicios: mismas características en lista editorial, sobre el fondo lavanda. */
#servicios-citas .bullet-grid-open{gap:0;margin-top:20px;padding-top:2px;background:linear-gradient(#FFB020,#FFB020) 0 0/32px 2px no-repeat}
#servicios-citas .bullet-grid-open article{grid-template-columns:28px minmax(0,1fr);gap:16px;min-height:0;padding:15px 0;overflow:visible;border:0;border-top:1px solid #d9d0f5;border-radius:0;background:none;box-shadow:none}
#servicios-citas .bullet-grid-open article:first-child{border-top:0;padding-top:18px}
#servicios-citas .bullet-grid-open article::before{display:none}
#servicios-citas .bullet-grid-open__icon{width:28px;height:28px;border:0;border-radius:0;background:none;color:#6F43F0}
#servicios-citas .bullet-grid-open__icon svg{width:24px;height:24px;stroke-width:1.7}
#servicios-citas .bullet-grid-open__copy{gap:3px;padding-left:0;border-left:0}
#servicios-citas .bullet-grid-open__copy strong{color:#141b4d;font-size:17px;font-weight:600;letter-spacing:-.02em}
#servicios-citas .bullet-grid-open__copy small{color:#6b6f80;font-size:14px;line-height:1.45}
@media(max-width:760px){
  #servicios-citas .bullet-grid-open article{grid-template-columns:26px minmax(0,1fr);gap:14px;padding:13px 0}
  #servicios-citas .bullet-grid-open__copy strong{font-size:16px}
  #servicios-citas .bullet-grid-open__copy small{font-size:13px}
}
/* Tú eres el dueño: ventajas en cuadrícula 2 × 2 abierta, separadas por líneas finas. */
.owner-cards{gap:0;border-top:1px solid rgba(255,255,255,.14)}
.owner-card{padding:30px 36px 32px 0;border:0;border-radius:0;background:none}
.owner-card:nth-child(even){padding-left:36px;padding-right:0;border-left:1px solid rgba(255,255,255,.14)}
.owner-card:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
.owner-card:first-child::before{content:"";display:block;width:32px;height:2px;margin:-31px 0 29px;background:#FFB020}
.owner-card b{display:flex;align-items:flex-end;margin-bottom:12px;color:#fff;font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;line-height:1.15}
.owner-card:nth-child(-n+2) b{min-height:clamp(48px,4.8vw,66px)}
.owner-card:first-child b{font-size:clamp(44px,4.8vw,66px);letter-spacing:-.045em;line-height:1}
.owner-card p{color:#c9c3e6;font-size:15px;line-height:1.6}
@media(max-width:760px){
  .owner-cards{grid-template-columns:1fr}
  .owner-card,.owner-card:nth-child(even){padding:24px 0;border-left:0}
  .owner-card:nth-child(n+2){border-top:1px solid rgba(255,255,255,.14)}
  .owner-card:first-child::before{margin:-25px 0 23px}
  .owner-card:nth-child(-n+2) b{min-height:0}
  .owner-card:first-child b{font-size:48px}
}
.owner-card b{align-items:flex-start}
.owner-card:nth-child(-n+2) b{min-height:0}
.owner-card:first-child b{font-size:clamp(38px,3.8vw,54px)}
/* Cómo funciona: pasos sobre una línea de progreso y demostración flotante, sin tarjetas. */
.steps-section .stepper{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,88px);align-items:center;margin-top:56px}
.steps-section .stepper-list{gap:0;align-content:center}
.steps-section .step-item{display:block;min-height:0;padding:0 0 40px 76px;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;opacity:.58;transform:none;transition:opacity .3s ease}
.steps-section .step-item:last-child{padding-bottom:0}
.steps-section .step-item:hover,.steps-section .step-item.is-active{opacity:1;transform:none;box-shadow:none}
.steps-section .step-item:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:8px}
.steps-section .step-meta{position:absolute;left:0;top:0;display:block}
.steps-section .step-icon{display:none}
.steps-section .step-number{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:50%;background:var(--soft);color:var(--accent-text);font-size:16px;font-weight:600;letter-spacing:0;transition:background .3s ease,color .3s ease,border-color .3s ease}
.steps-section .step-item.is-active .step-number{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.steps-section .step-item h3{font-size:clamp(21px,1.8vw,26px);transition:color .3s ease}
.steps-section .step-item.is-active h3{color:var(--accent-text)}
.steps-section .step-item p{margin-top:8px;max-width:420px;font-size:16px}
/* Conector vertical entre números; el paso activo lo va rellenando mientras avanza. */
.steps-section .step-item::before{content:"";position:absolute;left:23px;top:56px;bottom:8px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.steps-section .step-item:last-child::before{display:none}
.steps-section .step-progress{position:absolute;left:23px;right:auto;top:56px;bottom:8px;width:2px;height:auto;border-radius:2px;background:#FFB020;transform:scaleY(0);transform-origin:top}
.steps-section .step-item.is-active .step-progress{animation:tp-progress-y var(--step-time,5s) linear forwards}
.steps-section .stepper.is-manual .step-item.is-active .step-progress{animation:none;transform:scaleY(1)}
.steps-section .step-item:last-child .step-progress{display:none}
@keyframes tp-progress-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Demostración: solo la interfaz, flotando sobre el lavanda. */
.stepper-demo{display:grid;justify-items:center;gap:28px;min-width:0}
.steps-section .stepper-stage{width:100%;min-height:500px;overflow:visible;border:0;border-radius:0;background:none}
.steps-section .stage-panel{padding:0}
.steps-section .stage-card{width:min(440px,100%);padding:30px;border:0;border-radius:20px;box-shadow:0 36px 70px -34px rgba(48,24,140,.4),0 12px 28px -18px rgba(48,24,140,.22)}
.steps-section .stepper-stage .mock-store{width:min(560px,100%);margin-top:0;border-radius:20px;box-shadow:0 36px 70px -34px rgba(48,24,140,.4),0 12px 28px -18px rgba(48,24,140,.22)}
.stepper-cta{display:flex;justify-content:center}
@media(max-width:1060px){
  .steps-section .stepper{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:40px}
  .steps-section .stepper-stage{order:0;min-height:460px}
  .steps-section .stepper-list{order:-1}
}
@media(max-width:560px){
  .steps-section .step-item{padding:0 0 32px 64px}
  .steps-section .step-number{width:42px;height:42px;font-size:15px}
  .steps-section .step-item::before,.steps-section .step-progress{left:20px;top:50px}
  .steps-section .stepper-stage{min-height:440px}
  .steps-section .stage-card{padding:22px}
  .stepper-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .steps-section .step-item.is-active .step-progress{animation:none;transform:scaleY(1)}
}
/* Paso 03: micro escena de venta (enlace compartido → consulta → confirmación → pedido). */
.steps-section .sale-scene{gap:14px;padding:22px 22px 20px;background:#fff}
.sale-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sale-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eceef3;color:var(--ink-2);font-size:13px;font-weight:600}
.sale-head b{display:block;font-size:15px;line-height:1.2}
.sale-head small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.sale-head small i{width:7px;height:7px;border-radius:50%;background:#22b573}
.sale-thread{display:grid;gap:8px}
.sale-msg{display:grid;gap:6px;max-width:84%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.4;opacity:0}
.sale-msg--in{justify-self:start;border-bottom-left-radius:4px;background:#eff1f5;color:var(--ink)}
.sale-msg--out{justify-self:end;border-bottom-right-radius:4px;background:#f1edff;color:var(--ink)}
.sale-link{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:#fff;color:var(--accent-text);font-size:12.5px;font-weight:600}
.sale-link i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sale-order{display:grid;gap:9px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fafafc;opacity:0}
.sale-order__head{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sale-order__head svg{flex:none;width:18px;height:18px;color:#22b573}
.sale-order__head b{font-size:15px}
.sale-order__head small{margin-left:auto;color:var(--muted);font-size:12px}
.sale-order__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.sale-order__row span{color:var(--muted)}
.sale-order__row b{font-weight:600}
.sale-status{padding:3px 10px;border-radius:999px;background:#e5f6ee;color:#13824f;font-size:13px}
.stage-panel.is-active .sale-msg{animation:tp-chat 9s ease-in-out infinite both}
.stage-panel.is-active .sale-m1{animation-delay:.2s}
.stage-panel.is-active .sale-m2{animation-delay:1s}
.stage-panel.is-active .sale-m3{animation-delay:1.8s}
.stage-panel.is-active .sale-order{animation:tp-chat 9s ease-in-out 2.8s infinite both}
@media(max-width:560px){.steps-section .sale-scene{padding:18px 16px}.sale-msg{max-width:92%}}
@media(prefers-reduced-motion:reduce){.stage-panel.is-active .sale-msg,.stage-panel.is-active .sale-order{animation:none;opacity:1}}
/* La escena se arma una vez al activar el paso y queda completa (sin desvanecerse en bucle). */
@keyframes tp-sale-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.stage-panel.is-active .sale-msg{animation:tp-sale-in .5s ease both}
.stage-panel.is-active .sale-m1{animation-delay:.25s}
.stage-panel.is-active .sale-m2{animation-delay:1s}
.stage-panel.is-active .sale-m3{animation-delay:1.75s}
.stage-panel.is-active .sale-order{animation:tp-sale-in .55s ease 2.6s both}
@media(prefers-reduced-motion:reduce){.stage-panel.is-active .sale-msg,.stage-panel.is-active .sale-order{animation:none;opacity:1}}
/* Paso 02: tienda de muestra con aspecto terminado (portada con foto, productos con imagen, estilo visible). */
.steps-section .mock-store{gap:12px;padding:16px;border-radius:20px}
.steps-section .mock-bar{padding:10px 14px;border-radius:14px;gap:12px}
.steps-section .mock-bar b{font-size:15px;letter-spacing:-.01em}
.mock-nav{display:flex;gap:16px;margin-left:auto;color:color-mix(in srgb,var(--m-text) 62%,transparent);font-size:12px}
.steps-section .mock-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:14px;padding:20px 20px 20px 24px;border-radius:16px;background:var(--m-primary);color:var(--m-on-primary);transition:background-color .5s ease,color .5s ease}
.mock-hero__copy{display:grid;gap:10px;justify-items:start}
.steps-section .mock-hero small{color:color-mix(in srgb,var(--m-on-primary) 72%,transparent)}
.steps-section .mock-hero h4{max-width:none;font-size:clamp(22px,2.2vw,28px)}
.steps-section .mock-btn{background:var(--m-accent);color:var(--m-on-accent,#fff)}
.mock-hero__media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:var(--m-card)}
.mock-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mock-hero__media .is-alt{opacity:0;animation:tp-mock-swap 7s ease-in-out infinite}
@keyframes tp-mock-swap{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.steps-section .mock-grid{gap:10px}
.steps-section .mock-card{gap:6px;padding:8px;border-radius:14px}
.steps-section .mock-card img{display:block;width:100%;aspect-ratio:1/1;border-radius:10px;object-fit:cover;background:var(--m-card)}
.steps-section .mock-card b{padding:0 2px}
.steps-section .mock-card em{padding:0 2px 2px}
.mock-style{position:absolute;left:50%;bottom:-18px;display:flex;align-items:center;gap:14px;padding:8px 16px;translate:-50% 0;border-radius:999px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(48,24,140,.45)}
.mock-style>span{display:flex;align-items:center;gap:7px}
.mock-style>span+span{padding-left:14px;border-left:1px solid var(--line)}
.mock-style__colors i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:background-color .5s ease}
.mock-style__colors i:nth-of-type(1){background:var(--m-primary)}
.mock-style__colors i:nth-of-type(2){background:var(--m-accent)}
.mock-style__colors i:nth-of-type(3){background:var(--m-card)}
.steps-section .mock-fab{right:14px;bottom:-16px}
@media(max-width:560px){
  .mock-nav{display:none}
  .steps-section .mock-hero{grid-template-columns:minmax(0,1fr) 38%;padding:16px}
  .mock-style{gap:10px;padding:7px 12px;font-size:11px}
  .mock-style>span+span{padding-left:10px}
  .steps-section .mock-fab{display:none}
}
@media(prefers-reduced-motion:reduce){.mock-hero__media .is-alt{animation:none}}
.steps-section .mock-hero{justify-items:stretch}
.mock-hero__media{width:100%}
.mock-hero__media{aspect-ratio:4/3}
.steps-section .stepper-stage{min-height:580px}
@media(max-width:560px){.steps-section .stepper-stage{min-height:560px}}
/* Paso 01 pulido: sin recuadro en el paso activo, línea de progreso como indicador y formulario más compacto. */
.steps-section .step-item,.steps-section .step-item:hover,.steps-section .step-item.is-active{opacity:1}
.steps-section .step-item:focus,.steps-section .step-item:focus-visible{outline:0}
.steps-section .step-item:focus-visible .step-number{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.steps-section .step-item h3{color:var(--ink)}
.steps-section .step-item.is-active h3{color:var(--accent-text)}
.steps-section .step-item p{color:var(--ink-2)}
.steps-section .step-item.is-active p{color:var(--ink)}
.steps-section .step-number{background:#fff}
.steps-section .step-item.is-active .step-number{background:var(--accent)}
/* Tramos ya recorridos en morado; el del paso activo se va llenando. */
.steps-section .step-item:has(~ .step-item.is-active)::before{background:var(--accent)}
.steps-section .step-progress{background:var(--accent)}
.steps-section .stage-card:not(.sale-scene){gap:10px;width:min(366px,100%);padding:24px;border-radius:18px}
.steps-section .stage-card:not(.sale-scene) .stage-title{font-size:18px;margin-bottom:2px}
.steps-section .stage-card:not(.sale-scene) .fake-field{padding:8px 12px;border-radius:12px;font-size:14px}
.steps-section .stage-card:not(.sale-scene) .choice{padding:11px;border-radius:14px;font-size:14px}
.steps-section .stage-card:not(.sale-scene) .stage-btn{padding:12px;font-size:14px}
.stage-confirm{display:flex;align-items:center;gap:7px;color:#13824f;font-size:12.5px;font-weight:600;opacity:0}
.stage-confirm svg{flex:none;width:16px;height:16px;color:#22b573}
.stage-panel.is-active .stage-confirm{animation:tp-confirm 4s ease-in-out infinite}
@keyframes tp-confirm{0%{opacity:0;translate:0 4px}8%,42%{opacity:1;translate:0 0}50%{opacity:0;translate:0 4px}58%,92%{opacity:1;translate:0 0}100%{opacity:0;translate:0 4px}}
@media(prefers-reduced-motion:reduce){.stage-panel.is-active .stage-confirm{animation:none;opacity:1}}
/* Funciones: cuadrícula abierta 4 × 2 separada por líneas finas, sin tarjetas. */
.features-section{padding:80px 0 32px}
.features-section .feature-grid{gap:0;margin-top:40px;border-top:1px solid #dcd6ee;background:linear-gradient(#FFB020,#FFB020) 0 0/32px 2px no-repeat;background-origin:border-box}
.features-section .feature-card{padding:26px 26px 28px 28px;border:0;border-bottom:1px solid #dcd6ee;border-radius:0;background:none;box-shadow:none;transition:none}
.features-section .feature-card:hover{transform:none;border-color:#dcd6ee}
.features-section .feature-card:not(:nth-child(4n+1)){border-left:1px solid #dcd6ee}
.features-section .feature-card:nth-child(4n+1){padding-left:0}
.features-section .feature-card svg{display:block;width:28px;height:28px;padding:0;border-radius:0;background:none;color:var(--accent-text);stroke-width:1.7}
.features-section .feature-card h3{margin-top:16px;color:#141b4d;font-size:18px}
.features-section .feature-card p{margin-top:6px;color:#5a5f78;font-size:15px;line-height:1.5}
.features-section .features-note{margin-top:22px}
@media(max-width:1060px){
  .features-section .feature-card:not(:nth-child(4n+1)){border-left:0}
  .features-section .feature-card:nth-child(4n+1){padding-left:28px}
  .features-section .feature-card:nth-child(2n){border-left:1px solid #dcd6ee}
  .features-section .feature-card:nth-child(2n+1){padding-left:0}
}
@media(max-width:560px){
  .features-section{padding:56px 0 28px}
  .features-section .feature-grid{margin-top:32px}
  .features-section .feature-card,.features-section .feature-card:nth-child(n){padding:22px 0;border-left:0}
}
/* Funciones → Planes: dos etapas distintas (informativa sobre lavanda; comercial sobre blanco cálido). */
.features-section{padding-bottom:88px}
.pricing-section{width:100%;max-width:none;margin:0;padding:96px max(var(--page-gutter),calc((100% - 1560px)/2)) 104px;background:#fffdf9;border-top:1px solid #e6e0f4}
@media(max-width:560px){
  .features-section{padding-bottom:56px}
  .pricing-section{padding-block:64px 72px}
}
/* Cómo funciona: más compacta (menos aire arriba, abajo y entre título, pasos y demostración). */
.steps-section{padding:64px 0 72px}
.steps-section .section-heading{margin-bottom:0}
.steps-section .stepper{margin-top:32px;gap:clamp(32px,4vw,64px)}
.steps-section .step-item{padding-bottom:30px}
.steps-section .step-item:last-child{padding-bottom:0}
.steps-section .stepper-demo{gap:22px}
.steps-section .stepper-stage{min-height:520px}
.mock-hero__media{aspect-ratio:16/10}
@media(max-width:1060px){
  .steps-section .stepper{margin-top:28px;gap:32px}
  .steps-section .stepper-stage{min-height:500px}
}
@media(max-width:560px){
  .steps-section{padding:48px 0 56px}
  .steps-section .step-item{padding-bottom:26px}
  .steps-section .stepper-stage{min-height:490px}
}
.steps-section .stepper{align-items:start}
.steps-section .stepper-list{padding-top:28px}
@media(max-width:1060px){.steps-section .stepper-list{padding-top:0}}
/* El botón principal va bajo el paso 03 y con esquinas cuadradas, igual que el del hero. */
.steps-section .stepper-side{display:grid;gap:30px;align-content:start;min-width:0;padding-top:28px}
.steps-section .stepper-side .stepper-list{padding-top:0}
.steps-section .stepper-cta{justify-content:flex-start}
.steps-section .stepper-cta .btn{border-radius:8px;box-shadow:none}
@media(max-width:1060px){
  .steps-section .stepper-side{order:-1;padding-top:0}
  .steps-section .stepper-list{order:0}
}
@media(max-width:560px){.steps-section .stepper-cta .btn{width:100%}}
/* Planes compactos: capacidad y tres beneficios a la vista; el resto, desplegable. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pricing-section .plans-grid{gap:20px;margin-top:48px}
.pricing-section .plans-grid.has-open{align-items:start}
.pricing-section .plan-card{gap:16px;padding:28px 26px 24px;border-radius:26px}
.pricing-section .plan-card__head h3{margin-top:6px;font-size:32px}
.pricing-section .plan-card__head p{min-height:0;margin-top:10px;font-size:15px;line-height:1.45}
.pricing-section .plan-card__price{margin-top:12px}
.pricing-section .plan-card__price strong{font-size:48px}
.pricing-section .plan-card__price span{font-size:16px}
.pricing-section .plan-stats{gap:8px}
.pricing-section .plan-stats li{gap:4px;padding:11px 6px 10px;border-radius:14px}
.pricing-section .plan-stats b{font-size:26px}
.pricing-section .plan-stats span{font-size:13px}
.pricing-section .plan-features{gap:11px}
.pricing-section .plan-features li{gap:10px;font-size:15px;line-height:1.35}
.pricing-section .plan-features li::before{width:22px;height:22px}
.plan-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:10px 0 0;border:0;border-top:1px solid var(--line);background:none;color:var(--accent-text);font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer}
.plan-toggle svg{flex:none;width:18px;height:18px;transition:rotate .3s ease}
.plan-card.is-open .plan-toggle svg{rotate:180deg}
.plan-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.plan-card--pro .plan-toggle{border-top-color:color-mix(in srgb,var(--bg) 22%,transparent);color:var(--accent-2)}
.plan-more{display:grid;grid-template-rows:0fr;margin-top:-6px;transition:grid-template-rows .38s ease}
.plan-card.is-open .plan-more{grid-template-rows:1fr;margin-top:0}
.plan-more__inner{min-height:0;overflow:hidden}
.plan-more .plan-card__body{padding-top:4px}
.pricing-section .plan-card__cta{min-height:50px;border-radius:12px}
/* Comparación de planes */
.plans-compare{margin-top:30px;text-align:center}
.plans-compare__toggle{padding:6px 4px;border:0;background:none;color:var(--accent-text);font:inherit;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.plans-compare__toggle:focus-visible,.plans-compare__close:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.plans-compare__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.plans-compare__panel.is-open{grid-template-rows:1fr}
.plans-compare__inner{min-height:0;overflow:hidden}
.plans-table-wrap{max-width:980px;margin:22px auto 0;overflow-x:auto}
.plans-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center;font-size:14.5px}
.plans-table th,.plans-table td{padding:12px 10px;border-bottom:1px solid var(--line)}
.plans-table thead th{position:sticky;top:0;color:var(--ink);font-size:15px;font-weight:600}
.plans-table th:first-child{width:42%;text-align:left}
.plans-table tbody th{color:var(--ink-2);font-weight:500}
.plans-table td{color:var(--ink);font-weight:600}
.plans-table td.is-yes{color:var(--accent-text)}
.plans-table td.is-no{color:var(--muted);font-weight:400}
.plans-table .is-featured{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.plans-table thead th.is-featured{color:var(--accent-text)}
.plans-compare__close{margin:14px auto 0;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media(max-width:1060px){
  .pricing-section .plans-grid{gap:30px}
  .pricing-section .plans-grid.has-open{align-items:stretch}
}
@media(max-width:560px){
  .pricing-section .plan-card{padding:26px 20px 22px}
  .plans-table{font-size:13px}
  .plans-table th,.plans-table td{padding:10px 6px}
  .plans-table th:first-child{width:40%}
}
@media(prefers-reduced-motion:reduce){
  .plan-more,.plans-compare__panel,.plan-toggle svg{transition:none}
}
/* Ajuste fino de la altura compacta. */
.pricing-section .plan-card{gap:12px;padding:24px 22px 20px}
.pricing-section .plan-card__tag{font-size:11px}
.pricing-section .plan-card__head h3{margin-top:4px;font-size:28px}
.pricing-section .plan-card__head p{margin-top:8px;font-size:14px;line-height:1.4}
.pricing-section .plan-card__price{margin-top:8px}
.pricing-section .plan-card__price strong{font-size:42px}
.pricing-section .plan-card__price span{font-size:15px}
.pricing-section .plan-stats li{padding:8px 4px 7px;border-radius:12px}
.pricing-section .plan-stats b{font-size:22px}
.pricing-section .plan-stats span{font-size:12px}
.pricing-section .plan-features{gap:8px}
.pricing-section .plan-features li{gap:9px;font-size:14px;line-height:1.3}
.pricing-section .plan-features li::before{width:20px;height:20px;font-size:12px}
.pricing-section .plan-features small{font-size:12px}
.plan-toggle{min-height:38px;padding-top:8px;font-size:14px}
.pricing-section .plan-card__cta{min-height:46px;font-size:15px}
.pricing-section .plans-grid{margin-top:40px}
@media(max-width:560px){.pricing-section .plan-card{padding:22px 18px 18px}}
/* Planes: la tarjeta sube un poco al pasar el cursor (solo con mouse; solo transform). */
@media (hover:hover) and (pointer:fine){
  .pricing-section .plan-card{transition:transform .25s ease,box-shadow .25s ease}
  .pricing-section .plan-card:hover{transform:translateY(-8px)}
  .pricing-section .plan-card--featured{transition:transform .25s ease}
  .pricing-section .plan-card--featured:hover{transform:translateY(-22px)}
}
@media (hover:hover) and (pointer:fine) and (max-width:1060px){
  .pricing-section .plan-card--featured:hover{transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){
  .pricing-section .plan-card,.pricing-section .plan-card:hover,.pricing-section .plan-card--featured:hover{transition:none;transform:none}
  .pricing-section .plan-card--featured,.pricing-section .plan-card--featured:hover{transform:translateY(-14px)}
}

/* Preguntas frecuentes: dos columnas independientes, sin tarjetas, separadas por líneas finas. */
.faq-section{padding:64px 0 56px}
.faq-section .faq-list{max-width:none;margin:36px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px);align-items:start}
.faq-col{display:grid;border-top:1px solid var(--line)}
.faq-section .faq-item{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;transition:none}
.faq-section .faq-item[open]{border-color:var(--line)}
.faq-section .faq-item summary{min-height:0;padding:16px 0;gap:16px;font-size:17px;line-height:1.35;color:#141b4d}
.faq-section .faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.faq-section .faq-item summary::after{content:"+";width:22px;height:22px;border-radius:0;background:none;color:var(--accent-text);font-size:24px;font-weight:400;transition:none}
.faq-section .faq-item[open] summary::after{content:"−";transform:none}
.faq-section .faq-item p{box-sizing:border-box;padding:0 38px 18px 0;color:var(--muted);font-size:15.5px;line-height:1.6;overflow:hidden}
@media(max-width:760px){
  .faq-section{padding:48px 0 44px}
  .faq-section .faq-list{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .faq-col + .faq-col{border-top:0}
  .faq-section .faq-item summary{font-size:16px}
}
/* CTA final: franja de ancho completo, texto a la izquierda y botón a la derecha. */
.final-cta.shell{width:100%;max-width:none;margin:0;padding:38px max(var(--page-gutter),calc((100% - 1560px)/2));display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:40px;overflow:visible;border-radius:0;background:#3a1fa0;color:#fff}
.final-cta.shell h2{max-width:800px;font-size:clamp(26px,2.7vw,36px);line-height:1.12}
.final-cta.shell p{max-width:640px;margin-top:8px;font-size:16px;line-height:1.5;opacity:.88}
.final-cta.shell .eyebrow{margin-bottom:12px;color:#cdbfff;border-color:rgba(205,191,255,.5)}
.final-cta.shell .btn-final{min-height:56px;padding:0 30px;border-radius:8px;box-shadow:none}
@media(max-width:760px){
  .final-cta.shell{flex-direction:column;align-items:flex-start;gap:24px;padding:40px var(--page-gutter)}
}
@media(max-width:560px){
  .final-cta.shell .btn-final{width:100%}
}

/* Pie de página compacto: mismo logotipo del encabezado, sin botón, columnas y enlaces más ajustados. */
.site-footer .brand--footer{gap:0}
.site-footer .brand-logo--full{display:block;width:240px;max-width:100%;height:46px;object-fit:cover;object-position:center;filter:brightness(0) invert(1)}
.site-footer .brand-logo--icon{display:none}
.footer-inner{padding:44px 0 20px}
.footer-grid{gap:28px}
.footer-about p{max-width:320px;margin-top:12px;font-size:14.5px;line-height:1.55}
.footer-col h4{margin-bottom:8px;font-size:12px}
.footer-col ul{gap:0}
.footer-col a{min-height:30px;font-size:14.5px}
.footer-bottom{margin-top:28px;padding-top:16px;font-size:13.5px}
@media(max-width:560px){
  .footer-inner{padding:36px 0 20px}
  .footer-grid{gap:24px 20px}
  .footer-col a{min-height:40px}
  .footer-bottom{margin-top:20px;flex-direction:column;align-items:flex-start;gap:6px}
}

/* Cintillo de rubros: franja morada oscura, continua y sin bordes, pegada a la portada. */
.marquee{margin-top:0;border-block:0;background:#2a1773}
.marquee-group strong{color:#f3eeff}
.marquee-group strong::after{content:none}

/* Cada rubro con su propia tipografía, como una marca distinta (autoalojadas en assets/fonts). */
@font-face{font-family:"TP Syne";src:url("/assets/fonts/rubros/syne-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TP Playfair";src:url("/assets/fonts/playfair-display/playfair-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TP Space Grotesk";src:url("/assets/fonts/rubros/space-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"TP Bodoni";src:url("/assets/fonts/rubros/bodoni-moda-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"TP Pacifico";src:url("/assets/fonts/rubros/pacifico-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TP DM Serif";src:url("/assets/fonts/rubros/dm-serif-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TP Archivo Black";src:url("/assets/fonts/rubros/archivo-black-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
.marquee-group strong{font-size:clamp(20px,1.9vw,28px);line-height:1.2;font-weight:400;letter-spacing:0}
.marquee-group strong[data-landing="marqueeItem1"]{font-family:"TP Syne",Inter,sans-serif;font-weight:700;letter-spacing:.01em}
.marquee-group strong[data-landing="marqueeItem2"]{font-family:"TP Playfair",Georgia,serif;font-weight:700}
.marquee-group strong[data-landing="marqueeItem3"]{font-family:"TP Space Grotesk",Inter,sans-serif;font-weight:600;letter-spacing:-.01em}
.marquee-group strong[data-landing="marqueeItem4"]{font-family:"TP Bodoni",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:.01em}
.marquee-group strong[data-landing="marqueeItem5"]{font-family:"TP Pacifico",cursive;font-size:clamp(18px,1.7vw,25px)}
.marquee-group strong[data-landing="marqueeItem6"]{font-family:"TP DM Serif",Georgia,serif}
.marquee-group strong[data-landing="marqueeItem7"]{font-family:"TP Archivo Black",Inter,sans-serif;font-size:clamp(17px,1.5vw,22px);letter-spacing:.02em}
.marquee-group strong[data-landing="marqueeItem8"]{font-family:"TP Syne",Inter,sans-serif;font-weight:700}

/* Restaurantes: la imagen es un recorte sin fondo; al hacer zoom con el cursor no debe cortarse en el borde del marco. */
.landing-image-story-restaurant .landing-image-story__media{overflow:visible;border-radius:0}

/* Encabezado en celular: el logo completo (el mismo de escritorio, más chico) en lugar del icono suelto. */
@media(max-width:560px){
  .site-header .brand-logo--full{display:block;flex:none;width:146px;height:28px;max-width:none;object-fit:cover;object-position:center}
  .site-header .nav-cta{white-space:nowrap}
  .site-header .brand-logo--icon{display:none}
}

/* MOVIMIENTO DE IMÁGENES — 2026-10-02
   Se configura en Super Admin → Web de TiendaPropia. Solo se animan translate/scale (propiedades de
   transform) y opacity, sobre el contenedor de cada imagen (data-motion-target). Se usan translate y scale
   individuales para no pisar el transform que ya tienen algunos contenedores (los giros del diseño).
   landing.js solo pone data-motion si el efecto está activo y el interruptor general encendido. */
[data-motion]{--tp-motion-float:6px;--tp-motion-reveal:18px;--tp-motion-lift:4px;--tp-motion-scale:1.01;--tp-motion-float-time:6s;--tp-motion-reveal-time:700ms;--tp-motion-lift-time:250ms}
[data-motion][data-motion-intensity="medium"]{--tp-motion-float:12px;--tp-motion-reveal:32px;--tp-motion-lift:8px;--tp-motion-scale:1.02}
[data-motion][data-motion-speed="slow"]{--tp-motion-float-time:9s;--tp-motion-reveal-time:1100ms;--tp-motion-lift-time:400ms}
/* En móvil y pantallas táctiles, recorridos más cortos. */
@media (max-width:760px),(pointer:coarse){
  [data-motion]{--tp-motion-float:3px;--tp-motion-reveal:10px}
  [data-motion][data-motion-intensity="medium"]{--tp-motion-float:6px;--tp-motion-reveal:18px}
}
/* Flotar: vaivén vertical continuo. */
[data-motion="float"]{animation:tp-motion-float var(--tp-motion-float-time) ease-in-out infinite}
@keyframes tp-motion-float{0%,100%{translate:0 0}50%{translate:0 calc(var(--tp-motion-float) * -1)}}
/* Aparecer al entrar en pantalla: landing.js agrega .is-visible con IntersectionObserver. */
[data-motion="reveal"]{opacity:0;translate:0 var(--tp-motion-reveal);transition:opacity var(--tp-motion-reveal-time) ease-out,translate var(--tp-motion-reveal-time) ease-out}
[data-motion="reveal"].is-visible{opacity:1;translate:0 0}
/* Elevarse al pasar el cursor: solo con mouse; en pantallas táctiles no hay efecto de cursor. */
@media (hover:hover) and (pointer:fine){
  [data-motion="lift"]{transition:translate var(--tp-motion-lift-time) ease-out,scale var(--tp-motion-lift-time) ease-out}
  [data-motion="lift"]:hover{translate:0 calc(var(--tp-motion-lift) * -1);scale:var(--tp-motion-scale)}
}
/* Quien pide menos movimiento en su sistema no ve ninguno, y todo queda visible. */
@media (prefers-reduced-motion:reduce){
  [data-motion]{animation:none !important;transition:none !important;opacity:1 !important;translate:none !important;scale:none !important}
}
@media(max-width:1060px){.stepper-stage{order:-1}}