/* ============================================================ DINASTÍA · PRODUCTOS — Website profesional de productos Embudo experiencial + gamificado. Implementa la "Animation Bible" del ebook (parallax, scroll reveals, stagger, tilt 3D, botón magnético, cursor, typewriter, gradient text, counting, scramble, sticky showcase, marquee, glassmorphism, partículas, loader, transición de página, FAQ accordion). Paleta de la marca: Negro / Oro / Verde. Respeta prefers-reduced-motion y pointer:fine. Acento por página: define --accent / --accent-2 en . ============================================================ */ :root{ --p-black:#FBFAF7; --p-black-2:#F4F5F8; --p-panel:#FFFFFF; --p-panel-2:#F4F5F8; --p-line:#DFE3EB; --p-gold:#BE8B3D; --p-gold-bright:#BE8B3D; --p-gold-deep:#C9A96A; --p-blue:#496DA9; --p-blue-bright:#203A67; --p-teal:#06b6d4; --p-text:#14213D; --p-dim:#64718A; --p-faint:#8A94A8; --p-maxw:1120px; --p-radius:18px; /* Acento por defecto (oro). Cada página lo redefine en . */ --accent:#BE8B3D; --accent-2:#203A67; --grad:linear-gradient(135deg,var(--accent) 0%, var(--accent-2) 100%); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:84px} section{scroll-margin-top:84px} body.pp{ font-family:'Montserrat',system-ui,sans-serif;background:var(--p-black);color:var(--p-text); line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden; -webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%; } /* Touch: sin retardo de 300ms ni "hover pegado" tras tocar */ .opt,.btn,.sbtn,.q-back,summary,.story-dot,.p-nav .links a,.glass,.prod-card,input[type=range]{touch-action:manipulation} @media (hover:none){ .opt:hover{transform:none;background:#F4F5F8;border-color:var(--p-line)} .glass:hover,.prod-card:hover,.btn-main:hover,.btn-wa:hover,.btn-line:hover{transform:none} } /* Fondo con gradiente animado + glows (efecto SaaS de la Bible) */ body.pp::before{ content:'';position:fixed;inset:0;z-index:-3; background: radial-gradient(900px 600px at 82% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(760px 560px at -5% 102%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 55%), var(--p-black); } body.pp::after{ /* textura de ruido sutil (premium) */ content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } h1,h2,h3{font-family:'Playfair Display',Georgia,serif;letter-spacing:.5px;text-transform:uppercase;line-height:1.05} h1{font-size:clamp(40px,9vw,104px);font-weight:700} h2{font-size:clamp(28px,4.6vw,50px);font-weight:700} h3{font-size:clamp(18px,2.4vw,24px);font-weight:600} p{font-size:clamp(15px,1.4vw,17px)} a{color:inherit} .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .wrap{max-width:var(--p-maxw);margin:0 auto;padding:0 24px} .sec{padding:88px 0} .sec-head{max-width:760px;margin:0 auto 40px;text-align:center} .kick{display:inline-block;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);padding:6px 14px;border-radius:var(--radius-pill); margin-bottom:18px;background:color-mix(in srgb, var(--accent) 8%, transparent)} .lead{color:var(--p-dim);font-size:clamp(16px,1.8vw,19px);max-width:680px;margin:16px auto 0} /* ---------- Top progress + nav ---------- */ .p-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:var(--grad); box-shadow:0 0 12px color-mix(in srgb, var(--accent) 60%, transparent)} .p-nav{position:fixed;top:0;left:0;right:0;z-index:250;display:flex;align-items:center;justify-content:space-between; gap:16px;padding:12px 24px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); background:color-mix(in srgb, var(--p-black) 72%, transparent);border-bottom:1px solid var(--p-line)} .p-nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Playfair Display',Georgia,serif; font-weight:700;letter-spacing:1.2px;color:var(--p-gold-bright);font-size:16px} .p-nav .brand img{width:34px;height:34px;object-fit:contain} .p-nav .links{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .p-nav .links a{position:relative;text-decoration:none;color:var(--p-dim);font-size:14px;font-weight:600; padding:8px 12px;border-radius:var(--radius-control);transition:var(--motion-quick) var(--ease-soft)} .p-nav .links a::after{content:'';position:absolute;left:12px;right:12px;bottom:5px;height:2px;width:0;margin:auto; background:var(--grad);transition:width var(--motion-standard) cubic-bezier(.25,.46,.45,.94)} .p-nav .links a:hover{color:var(--p-text)} .p-nav .links a:hover::after{width:calc(100% - 24px)} .p-nav .links a.is-active{color:var(--p-text)} .p-nav .links a.is-active::after{width:calc(100% - 24px)} .p-nav .navcta{background:var(--grad);color:#FFFFFF!important;padding:9px 16px;border-radius:var(--radius-control);font-weight:800} .p-nav .navcta::after{display:none} .p-nav .burger{display:none;background:transparent;border:1px solid var(--p-line);color:var(--p-gold); width:42px;height:42px;border-radius:var(--radius-control);font-size:21px;cursor:pointer} /* ---------- Loader (loading screen de la Bible) ---------- */ .p-loader{position:fixed;inset:0;z-index:1150;background:var(--p-black);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:22px;transition:opacity .6s ease,visibility .6s ease} .p-loader.hide{opacity:0;visibility:hidden} .p-loader img{width:96px;height:96px;object-fit:contain;animation:pulseLogo 1.6s ease-in-out infinite} .p-loader .bar{width:210px;height:3px;background:rgba(255,255,255,.08);border-radius:var(--radius-control);overflow:hidden} .p-loader .bar i{display:block;height:100%;width:0;background:var(--grad);animation:loadFill 1.5s cubic-bezier(.25,.46,.45,.94) forwards} .p-loader span{font-family:'Playfair Display',Georgia,serif;letter-spacing:3px;font-size:12px;color:var(--p-faint);text-transform:uppercase} @keyframes loadFill{to{width:100%}} @keyframes pulseLogo{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}} /* ---------- Cursor personalizado ---------- */ @media (hover:hover) and (pointer:fine){ body.pp.cursor-on,body.pp.cursor-on *{cursor:none!important} .p-cur{position:fixed;top:0;left:0;pointer-events:none;z-index:1200;transform:translate(-50%,-50%);border-radius:50%} .p-cur-ring{width:34px;height:34px;border:1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); transition:width var(--motion-standard),height var(--motion-standard),background var(--motion-standard),border-color var(--motion-standard)} .p-cur-dot{width:6px;height:6px;background:var(--accent)} body.pp.cur-hot .p-cur-ring{width:56px;height:56px;background:color-mix(in srgb, var(--accent) 12%, transparent)} } /* ---------- Medios opcionales (fotos / B-roll) ---------- */ .hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease} .hero-bg.has-img{opacity:.22} .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,250,247,.55),rgba(251,250,247,.88))} .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none} .hero-vid.has-vid{opacity:.26} .prod-thumb{height:130px;border-radius:var(--radius);margin-bottom:14px;background:#F4F5F8 center/cover no-repeat;border:1px solid var(--p-line);display:none} .prod-thumb.has-img{display:block} .show-media{display:none}.show-media.has-img,.show-media.has-vid{display:block} /* ---------- Botón de música ambiental (abajo-izquierda) ---------- */ .music-btn{position:fixed;left:16px;bottom:16px;z-index:240;display:inline-flex;align-items:center;gap:8px; background:color-mix(in srgb,var(--p-panel) 92%,transparent);color:var(--p-text);border:1px solid var(--p-line); border-radius:var(--radius-pill);padding:11px 15px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer; box-shadow:var(--elev-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:var(--motion-quick) var(--ease-soft)} .music-btn:hover{border-color:var(--accent);color:var(--p-gold-bright)} .music-btn.on{border-color:var(--accent);color:var(--accent)} .music-btn .mi{font-size:16px;display:inline-block} .music-btn.on .mi{animation:spinMi 3.2s linear infinite} @keyframes spinMi{to{transform:rotate(360deg)}} @media (max-width:880px){ .music-btn .ml{display:none} .music-btn{left:14px;bottom:14px;padding:12px} } @media (prefers-reduced-motion:reduce){ .music-btn.on .mi{animation:none} } /* ---------- HERO ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:110px 0 70px} .hero canvas.particles{position:absolute;inset:0;z-index:0;opacity:.6} .hero .blob{position:absolute;width:520px;height:520px;filter:blur(60px);opacity:.4;z-index:0; background:var(--grad);animation:morphBlob 12s ease-in-out infinite} .hero .blob.b1{top:-120px;right:-80px} .hero .blob.b2{bottom:-160px;left:-120px;animation-delay:-4s;opacity:.3} @keyframes morphBlob{ 0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 25%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} 50%{border-radius:50% 60% 30% 60%/40% 30% 60% 50%} 75%{border-radius:40% 60% 60% 40%/60% 40% 60% 40%} 100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}} .hero-inner{position:relative;z-index:2;max-width:880px} /* Spotlight que sigue el cursor (premium, solo con mouse) */ @media (hover:hover) and (pointer:fine){ .hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(460px circle at var(--sx,50%) var(--sy,30%), color-mix(in srgb,var(--accent) 13%,transparent), transparent 62%)} } .hero .eyebrow{display:inline-block;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);padding:7px 16px;border-radius:var(--radius-pill); margin-bottom:24px;background:color-mix(in srgb, var(--p-black) 50%, transparent)} .hero h1{text-shadow:0 6px 40px rgba(11,28,58,.18)} .hero .type-line{color:var(--accent);min-height:1.1em} .hero .type-line .caret{display:inline-block;width:3px;background:var(--accent);margin-left:4px;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .hero-sub{font-size:clamp(17px,2.2vw,22px);color:var(--p-text);max-width:640px;margin:26px 0 0} .hero-sub strong{color:var(--accent)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px} .hero-trust{margin-top:26px;font-size:14px;color:var(--p-faint)} .hero-trust b{color:var(--p-dim)} /* ---------- Botones ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:16px;padding:15px 30px;border-radius:var(--radius); text-decoration:none;letter-spacing:.3px;transition:var(--motion-quick) var(--ease-soft);cursor:pointer;border:none;font-family:inherit;will-change:transform} .btn-main{background:var(--grad);color:#FFFFFF;box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 32%, transparent)} .btn-main:hover{transform:translateY(-2px);box-shadow:0 16px 40px color-mix(in srgb, var(--accent) 48%, transparent)} .btn-line{background:transparent;color:var(--p-text);border:1px solid var(--p-line);position:relative;overflow:hidden;z-index:0} .btn-line::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:0;z-index:-1; background:color-mix(in srgb, var(--accent) 16%, transparent);transition:height var(--motion-scene) cubic-bezier(.23,1,.32,1)} .btn-line:hover{border-color:var(--accent);color:var(--p-gold-bright)} .btn-line:hover::before{height:100%} .btn-wa{background:#1f9d55;color:#fff;box-shadow:0 10px 26px rgba(31,157,85,.35)} .btn-wa:hover{transform:translateY(-2px);filter:brightness(1.06)} /* ---------- Stats / counting ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:54px} .stat{background:color-mix(in srgb, var(--p-panel) 70%, transparent);border:1px solid var(--p-line); border-radius:var(--radius);padding:20px 14px;text-align:center} .stat .n{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(26px,3.4vw,38px);color:var(--accent)} .stat .l{font-size:12px;color:var(--p-dim);letter-spacing:.3px} /* ---------- Glass cards / grids ---------- */ .grid{display:grid;gap:18px} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .glass{background:color-mix(in srgb,#fff 5%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid color-mix(in srgb,#fff 10%,transparent);border-radius:var(--p-radius);padding:26px; position:relative;transition:transform var(--motion-scene) cubic-bezier(.23,1,.32,1),border-color var(--motion-standard),box-shadow var(--motion-standard)} .glass:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)} .glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--motion-standard);z-index:1; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%)} .glass:hover .glow{opacity:1} .glass .ic{font-size:36px;display:block;margin-bottom:14px} .glass h3{color:var(--p-gold-bright);margin-bottom:10px} .glass p{color:var(--p-dim)} .glass .badge{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800;letter-spacing:.6px; background:var(--grad);color:#FFFFFF;padding:4px 10px;border-radius:var(--radius-pill)} /* Tarjeta de producto (hub) */ .prod-card{display:flex;flex-direction:column;min-height:280px;text-decoration:none} .prod-card .ic{font-size:42px} .prod-card .go{margin-top:auto;padding-top:18px;font-weight:800;color:var(--accent);font-size:14px} .prod-card:hover .go{letter-spacing:.5px} /* ---------- Reveal / scroll animations ---------- */ @media (prefers-reduced-motion:no-preference){ .rv{opacity:0;transform:translateY(46px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)} .rv.in{opacity:1;transform:none} .rv-l{opacity:0;transform:translateX(-70px);transition:all .8s cubic-bezier(.25,.46,.45,.94)} .rv-r{opacity:0;transform:translateX(70px);transition:all .8s cubic-bezier(.25,.46,.45,.94)} .rv-l.in,.rv-r.in{opacity:1;transform:none} .rv-scale{opacity:0;transform:scale(.9) translateY(20px);transition:all .7s cubic-bezier(.34,1.56,.64,1)} .rv-scale.in{opacity:1;transform:none} .stagger>*{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .6s cubic-bezier(.22,.61,.36,1)} .stagger.in>*{opacity:1;transform:none} .stagger.in>*:nth-child(1){transition-delay:.06s}.stagger.in>*:nth-child(2){transition-delay:.14s} .stagger.in>*:nth-child(3){transition-delay:var(--motion-quick)}.stagger.in>*:nth-child(4){transition-delay:.30s} .stagger.in>*:nth-child(5){transition-delay:.38s}.stagger.in>*:nth-child(6){transition-delay:.46s} .stagger.in>*:nth-child(n+7){transition-delay:.54s} .tilt{transform-style:preserve-3d;will-change:transform} body.pp.leaving{opacity:0;transition:opacity .26s ease} } /* Gradient text animado */ .grad-anim{background:linear-gradient(-45deg,var(--accent),var(--accent-2),var(--p-gold-bright),var(--accent)); background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; animation:gradShift 5s ease infinite} @keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} /* ---------- Sticky showcase (estilo Stripe/Linear) ---------- */ .showcase{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:start} .showcase .sticky{position:sticky;top:96px;border-radius:var(--p-radius);overflow:hidden;border:1px solid var(--p-line); background:linear-gradient(160deg,var(--p-panel),var(--p-black-2));min-height:420px;display:flex;align-items:center;justify-content:center;padding:30px} .showcase .sticky .visual{text-align:center;transition:opacity var(--motion-scene) ease,transform var(--motion-scene) ease} .showcase .sticky .visual .em{font-size:96px;display:block;margin-bottom:14px} .showcase .sticky .visual .vt{font-family:'Playfair Display',Georgia,serif;font-size:24px;color:var(--p-gold-bright);text-transform:uppercase} .showcase .sticky .visual .vp{color:var(--p-dim);font-size:16px;margin-top:8px;max-width:280px;margin-inline:auto} .panel{padding:64px 0;min-height:62vh} .panel .n{font-family:'Playfair Display',Georgia,serif;font-size:14px;color:var(--accent);letter-spacing:2px} .panel h3{font-size:clamp(22px,3vw,30px);margin:12px 0 14px;color:var(--p-text)} .panel p{color:var(--p-dim)} /* ---------- Marquee ---------- */ .marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--p-line);padding:18px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee .track{display:inline-flex;gap:46px;animation:marquee 28s linear infinite} .marquee:hover .track{animation-play-state:paused} .marquee .track span{font-family:'Playfair Display',Georgia,serif;text-transform:uppercase;letter-spacing:1px;color:var(--p-faint);font-size:16px} .marquee .track span b{color:var(--accent)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ EMBUDO GAMIFICADO — quiz/simulador interactivo ============================================================ */ .funnel{max-width:760px;margin:0 auto;background:linear-gradient(165deg,var(--p-panel),var(--p-black-2)); border:1px solid var(--p-line);border-radius:var(--radius-feature);padding:clamp(24px,4vw,46px);position:relative;overflow:hidden} .funnel::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(600px 300px at 50% -10%, color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%)} .funnel-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px;position:relative} .funnel-top .step-label{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--p-faint)} .xp{display:inline-flex;align-items:center;gap:7px;font-family:'Playfair Display',Georgia,serif;font-size:14px;color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); padding:5px 12px;border-radius:var(--radius-pill);transition:transform var(--motion-standard)} .xp.bump{transform:scale(1.18)} .pbar{height:8px;border-radius:var(--radius-control);background:#FFFFFF;border:1px solid var(--p-line);overflow:hidden;margin:14px 0 26px;position:relative} .pbar i{display:block;height:100%;width:0;background:var(--grad);transition:width .6s cubic-bezier(.25,.46,.45,.94)} .q-step{display:none} .q-step.active{display:block;animation:stepIn var(--motion-scene) cubic-bezier(.22,.61,.36,1)} @keyframes stepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .q-step h3{font-size:clamp(20px,3vw,28px);color:var(--p-text);margin-bottom:6px} .q-step .q-help{color:var(--p-dim);margin-bottom:22px} .opts{display:grid;gap:12px} .opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:#F4F5F8;border:1px solid var(--p-line); border-radius:var(--radius);padding:16px 18px;color:var(--p-text);font-size:16px;font-weight:600;cursor:pointer; transition:var(--motion-quick) var(--ease-soft);font-family:inherit} .opt:hover{border-color:var(--accent);transform:translateX(4px);background:color-mix(in srgb,var(--accent) 7%,transparent)} .opt .e{font-size:24px} .opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)} /* Slider */ .slider-wrap{margin:10px 0 6px} .slider-wrap .val{font-family:'Playfair Display',Georgia,serif;font-size:clamp(34px,7vw,56px);color:var(--accent);text-align:center;display:block} .slider-wrap .vsub{text-align:center;color:var(--p-faint);font-size:13px;margin-bottom:18px} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--radius-control); background:linear-gradient(90deg,var(--accent) var(--fill,40%),#FFFFFF var(--fill,40%));outline:none} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%; background:var(--grad);border:3px solid #FBFAF7;cursor:pointer;box-shadow:var(--elev-1)} input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid #FBFAF7;cursor:pointer} .q-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px} .q-back{background:transparent;border:1px solid var(--p-line);color:var(--p-dim);padding:12px 20px;border-radius:var(--radius); cursor:pointer;font-family:inherit;font-weight:600;transition:var(--motion-quick) var(--ease-soft)} .q-back:hover{color:var(--p-text);border-color:var(--p-dim)} .q-back[disabled]{opacity:.35;cursor:not-allowed} /* Campos del gate */ .field{position:relative;margin-bottom:14px} .field input{width:100%;background:#F4F5F8;border:1px solid var(--p-line);border-radius:var(--radius);padding:16px 16px; color:var(--p-text);font-size:16px;font-family:inherit;transition:var(--motion-quick) var(--ease-soft)} .field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)} .note{font-size:13px;color:var(--p-faint);margin-top:6px} .shake{animation:shake var(--motion-scene)} @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}} /* Resultado del embudo */ .result{display:none} .result.show{display:block;animation:stepIn .6s cubic-bezier(.22,.61,.36,1)} .result .rb{font-size:60px;text-align:center;display:block;margin-bottom:6px} .result .rkick{text-align:center;color:var(--accent);font-size:13px;letter-spacing:1.6px;text-transform:uppercase} .result h3{text-align:center;font-size:clamp(24px,4vw,34px);margin:6px 0 18px} .result .big-num{font-family:'Playfair Display',Georgia,serif;font-size:clamp(40px,9vw,72px);text-align:center;display:block;line-height:1} .result .big-sub{text-align:center;color:var(--p-dim);margin:6px 0 24px} .rrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0} .rrow .rc{background:#F4F5F8;border:1px solid var(--p-line);border-radius:var(--radius);padding:16px;text-align:center} .rrow .rc .rn{font-family:'Playfair Display',Georgia,serif;font-size:26px;color:var(--accent)} .rrow .rc .rl{font-size:12px;color:var(--p-dim)} .result .cta-block{display:flex;flex-direction:column;gap:12px;margin-top:24px} .meter{height:14px;border-radius:var(--radius-control);background:#FFFFFF;border:1px solid var(--p-line);overflow:hidden;margin:8px 0 4px} .meter i{display:block;height:100%;width:0;background:var(--grad);transition:width 1.3s cubic-bezier(.25,.46,.45,.94)} /* Selector de perfil de crecimiento (IUL) */ .strat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 16px} .strat .sbtn{display:flex;flex-direction:column;align-items:center;gap:2px;background:#F4F5F8;border:1px solid var(--p-line); border-radius:var(--radius);padding:12px 8px;color:var(--p-dim);cursor:pointer;font-family:inherit;transition:var(--motion-quick) var(--ease-soft)} .strat .sbtn b{font-size:14px;color:var(--p-text)} .strat .sbtn span{font-family:'Playfair Display',Georgia,serif;font-size:18px;color:var(--p-faint)} .strat .sbtn:hover{border-color:var(--accent)} .strat .sbtn.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)} .strat .sbtn.sel span{color:var(--accent)} /* Badges de logro (gamificación) */ .achv{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px 0 4px} .achv .a{font-size:12px;font-weight:700;letter-spacing:.4px;border:1px solid var(--p-line);border-radius:var(--radius-pill); padding:6px 13px;color:var(--p-faint);opacity:.45;transition:var(--motion-standard) var(--ease-soft)} .achv .a.on{opacity:1;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 9%,transparent)} /* ---------- FAQ accordion ---------- */ .faq{max-width:760px;margin:0 auto;display:grid;gap:12px} .faq details{background:var(--p-panel);border:1px solid var(--p-line);border-radius:var(--radius);overflow:hidden} .faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;color:var(--p-text);display:flex; justify-content:space-between;gap:14px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary .pl{color:var(--accent);font-size:21px;transition:transform var(--motion-standard);flex:none} .faq details[open] summary .pl{transform:rotate(45deg)} .faq .ans{padding:0 22px 20px;color:var(--p-dim);animation:stepIn var(--motion-scene) ease} /* ---------- Steps / cómo funciona ---------- */ .steps{counter-reset:s;display:grid;gap:16px} .steps .st{display:flex;gap:18px;align-items:flex-start;background:var(--p-panel);border:1px solid var(--p-line); border-radius:var(--radius);padding:22px} .steps .st::before{counter-increment:s;content:counter(s);flex:none;width:42px;height:42px;border-radius:50%; display:grid;place-items:center;font-family:'Playfair Display',Georgia,serif;font-weight:700;background:var(--grad);color:#FFFFFF} .steps .st h3{color:var(--p-gold-bright);margin-bottom:6px} .steps .st p{color:var(--p-dim)} /* ---------- Oferta (offer stack + risk reversal) ---------- */ .offer{max-width:620px;margin:0 auto 26px;text-align:left;background:linear-gradient(165deg,var(--p-panel),var(--p-black-2)); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:var(--radius-pill);padding:26px 28px} .offer-tag{display:inline-block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:14px; background:color-mix(in srgb,var(--accent) 8%,transparent)} .offer h3{color:var(--p-gold-bright);margin-bottom:14px;text-transform:none;font-family:'Playfair Display',Georgia,serif} .offer-list{list-style:none;display:grid;gap:10px;margin:0 0 14px} .offer-list li{display:flex;gap:10px;align-items:flex-start;color:var(--p-text);font-size:16px;line-height:1.5} .offer-list li b{color:var(--accent)} .offer-list li .ck{flex:none;color:var(--accent);font-weight:800} .offer-why{font-size:14px;color:var(--p-dim);border-top:1px solid var(--p-line);padding-top:14px;margin-top:4px} .offer-why b{color:var(--p-text)} /* ---------- CTA band ---------- */ .cta-band{position:relative;text-align:center;border-radius:var(--radius-hero);padding:clamp(40px,6vw,72px) 24px;overflow:hidden; background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 16%,var(--p-panel)),var(--p-black-2)); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)} .cta-band h2{margin-bottom:14px} .cta-band p{color:var(--p-dim);max-width:560px;margin:0 auto 26px} /* ---------- Footer ---------- */ .p-foot{border-top:1px solid var(--p-line);padding:48px 24px 60px;text-align:center;color:var(--p-faint)} .p-foot .fq{font-family:'Playfair Display',Georgia,serif;font-size:clamp(18px,2.4vw,26px);color:var(--p-text);max-width:640px;margin:0 auto 18px;font-style:italic} .p-foot .fl{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:12px 0} .p-foot .fl a{color:var(--p-dim);text-decoration:none;font-weight:600;font-size:14px} .p-foot .fl a:hover{color:var(--p-gold-bright)} .p-foot .brand{font-family:'Playfair Display',Georgia,serif;letter-spacing:2px;color:var(--p-gold-bright);font-weight:700} .p-foot .disc{max-width:760px;margin:18px auto 0;font-size:12px;line-height:1.6;color:var(--p-faint);opacity:.85} /* ---------- Confetti ---------- */ .confetti{position:fixed;top:-12px;width:10px;height:14px;z-index:1100;pointer-events:none;border-radius:var(--radius-control); animation:fall linear forwards} @keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}} /* Corazones que caen (momento emocional) */ .heart{position:fixed;top:-20px;z-index:1100;pointer-events:none;font-size:21px;animation:fall linear forwards} /* Recompensa flotante de XP (+10 ⚡) */ .xp-pop{position:fixed;z-index:1090;pointer-events:none;font-family:'Playfair Display',Georgia,serif;font-weight:700; color:var(--accent);text-shadow:0 2px 10px rgba(11,28,58,.15);animation:floatUp .95s cubic-bezier(.22,.61,.36,1) forwards} @keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-52px) scale(1.15)}} /* Mensaje de ánimo del embudo (toast) */ .cheer{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);z-index:1090; background:linear-gradient(135deg,var(--p-panel),var(--p-black-2));border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); color:var(--p-text);padding:12px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;opacity:0;pointer-events:none; box-shadow:var(--elev-2);transition:opacity var(--motion-scene),transform var(--motion-scene)} .cheer.on{opacity:1;transform:translateX(-50%) translateY(0)} .cheer .e{margin-right:6px} /* ---------- Banda emocional de valores ---------- */ .values{text-align:center;position:relative;overflow:hidden} .values .vpre{font-family:'Playfair Display',Georgia,serif;text-transform:uppercase;letter-spacing:1px;color:var(--p-dim); font-size:clamp(20px,3.4vw,30px);margin-bottom:6px} .values .vwords{font-family:'Playfair Display',Georgia,serif;text-transform:uppercase;line-height:1.12; font-size:clamp(30px,6.4vw,68px);font-weight:700;max-width:980px;margin:0 auto} .values .vwords .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(18px); transition:opacity .7s cubic-bezier(.25,.46,.45,1),filter .7s,transform .7s} .values .vwords.in .w{opacity:1;filter:blur(0);transform:none} .values .vwords.in .w:nth-child(1){transition-delay:.05s} .values .vwords.in .w:nth-child(2){transition-delay:.30s} .values .vwords.in .w:nth-child(3){transition-delay:.55s} .values .vwords.in .w:nth-child(4){transition-delay:.80s} .values .vwords.in .w:nth-child(5){transition-delay:1.05s} .values .vwords .hot{background:linear-gradient(-45deg,var(--accent),var(--accent-2),var(--p-gold-bright),var(--accent)); background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; animation:gradShift 5s ease infinite} .values .vsub{color:var(--p-dim);max-width:560px;margin:22px auto 0;font-size:clamp(15px,1.8vw,18px)} .values .vemoji{font-size:28px;letter-spacing:10px;margin-top:8px;opacity:.9} /* Resaltado emocional dentro del resultado (por quién lo haces) */ .por-quien{text-align:center;font-size:16px;color:var(--p-dim);margin:2px 0 14px} .por-quien b{color:var(--accent)} /* ---------- Botón flotante de WhatsApp (siempre a un toque, móvil/iPad) ---------- */ .fab{position:fixed;right:16px;bottom:16px;z-index:240;display:flex;align-items:center;gap:9px; background:#1f9d55;color:#fff;font-weight:800;font-size:14px;padding:14px 17px;border-radius:var(--radius-pill); text-decoration:none;box-shadow:var(--elev-2);transform:translateY(140%);opacity:0; transition:transform var(--motion-scene) cubic-bezier(.22,.61,.36,1),opacity var(--motion-scene),filter var(--motion-quick)} .fab.show{transform:none;opacity:1} .fab:hover{filter:brightness(1.07)} .fab .ic{font-size:18px;line-height:1} .fab .lbl{white-space:nowrap;max-width:0;overflow:hidden;transition:max-width var(--motion-scene)} .fab:hover .lbl{max-width:220px} .fab.show::after{content:'';position:absolute;inset:-4px;border-radius:var(--radius-pill);border:2px solid rgba(31,157,85,.5); animation:fabPulse 2.2s ease-out infinite;pointer-events:none} @keyframes fabPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}} @media (max-width:880px){ .fab{right:14px;bottom:14px} .fab .lbl{max-width:220px} } @media (prefers-reduced-motion:reduce){ .fab{transition:opacity var(--motion-standard)} .fab.show::after{display:none} } /* ---------- Scrollytelling emocional (historia con scroll) ---------- */ .story{position:relative;height:calc(var(--scenes,5) * 92vh);height:calc(var(--scenes,5) * 92svh)} .story-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden} .story-stage::before{content:'';position:absolute;inset:0;z-index:0; background:radial-gradient(700px 460px at 50% 40%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 65%)} .story-scene{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px; opacity:0;transform:scale(1.05) translateY(14px);transition:opacity .9s ease,transform 1.3s cubic-bezier(.22,.61,.36,1);z-index:1} .story-scene.active{opacity:1;transform:none} .story-scene .inner{max-width:840px;position:relative} .story-scene .em{font-size:clamp(60px,13vw,130px);display:block;margin-bottom:18px;filter:drop-shadow(0 10px 30px rgba(11,28,58,.15))} .story-scene h3{font-family:'Playfair Display',Georgia,serif;text-transform:uppercase;line-height:1.08;font-size:clamp(26px,5.4vw,54px);font-weight:700} .story-scene p{color:var(--p-dim);max-width:600px;margin:16px auto 0;font-size:clamp(16px,2.1vw,21px)} .story-scene.final h3{color:var(--p-text)} .story-scene .story-cta{margin-top:30px} .story-prog{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:2} .story-dot{width:8px;height:8px;border-radius:50%;background:var(--p-line);transition:var(--motion-standard) var(--ease-soft)} .story-dot.on{background:var(--accent);width:24px;border-radius:var(--radius-control)} .story-hint{position:absolute;bottom:30px;right:24px;z-index:2;font-size:12px;letter-spacing:1px;color:var(--p-faint); text-transform:uppercase;animation:bobHint 1.8s ease-in-out infinite} @keyframes bobHint{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}} @media (prefers-reduced-motion:reduce){ .story{height:auto} .story-stage{position:static;height:auto;display:block} .story-scene{position:relative;inset:auto;opacity:1;transform:none;padding:56px 24px;border-bottom:1px solid var(--p-line)} .story-prog,.story-hint{display:none} } /* ---------- Responsive ---------- */ @media (max-width:880px){ .hero{padding:96px 0 56px} .sec{padding:64px 0} /* Historia más corta y cómoda en móvil (menos scroll por escena) */ .story{height:calc(var(--scenes,5) * 78svh)} .story-hint{right:50%;transform:translateX(50%)} .offer{padding:22px 18px} .g3,.g4{grid-template-columns:1fr}.g2{grid-template-columns:1fr} .showcase{grid-template-columns:1fr}.showcase .sticky{position:relative;top:0;min-height:300px;margin-bottom:10px} .panel{padding:34px 0;min-height:auto} .stats{grid-template-columns:repeat(2,1fr)} .rrow{grid-template-columns:1fr 1fr} .p-nav .links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch; background:var(--p-black-2);border-bottom:1px solid var(--p-line);padding:10px 16px;gap:2px} .p-nav .links.open{display:flex} .p-nav .links a{padding:12px}.p-nav .links a::after{display:none} .p-nav .burger{display:block} } @media (max-width:480px){.stats{grid-template-columns:1fr 1fr}.rrow{grid-template-columns:1fr}} /* ---------- Reduced motion: apaga todo lo cinético ---------- */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv,.rv-l,.rv-r,.rv-scale,.stagger>*{opacity:1!important;transform:none!important} .hero .blob{display:none}.hero canvas.particles{display:none} }