/* ============================================================ Tienly · Design V6 — Modern LIGHT "product" (aurora claro) Misma estructura/estética que V5 pero en claro: lienzo lavanda, texto tinta, tarjetas blancas con sombras suaves, acentos de aurora violeta/índigo de marca. Fuentes: Outfit + DM Sans. ============================================================ */ /* Fuentes auto-hospedadas (variables) — evita el salto/FOUT del CDN. Se precargan en el para que estén listas antes del primer pintado. */ @font-face{font-family:'Outfit';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/outfit.woff2?h=fdf9c509) format("woff2")} @font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/dmsans.woff2?h=7c87a648) format("woff2")} :root{ --violet:#7C3AED; --indigo:#5B6CF5; --violet-lite:#6D28D9; --bg-deep:#F6F3FF; --bg:#FBF9FF; --bg-elev:#FFFFFF; --fg:#1A1730; --fg-muted:#57506e; --fg-dim:#8a83a0; --surface:#FFFFFF; --surface-2:#FBFAFF; --line:rgba(26,23,48,.09); --line-2:rgba(26,23,48,.16); --wa:#25D366; --grad:linear-gradient(120deg,#7C3AED,#5B6CF5); --glow:0 12px 34px rgba(124,58,237,.32); --ease:cubic-bezier(.16,1,.3,1); --shadow:0 10px 34px rgba(46,26,110,.09); --shadow-lg:0 30px 70px rgba(46,26,110,.14); --r:16px; --maxw:1200px; } *{box-sizing:border-box; margin:0; padding:0} html{scroll-behavior:smooth; overflow-x:hidden} body{ font-family:'DM Sans',system-ui,sans-serif; color:var(--fg); background:var(--bg-deep); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; } h1,h2,h3,h4{font-family:'Outfit',sans-serif; font-weight:600; line-height:1.05; letter-spacing:-.02em; color:var(--fg)} a{color:inherit; text-decoration:none} img,svg,video{display:block; max-width:100%} .wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px} /* Logo: versión con letras oscuras (claro) y letras blancas (oscuro) */ .logo-dark{display:none} :root[data-theme="dark"] .logo-light{display:none} :root[data-theme="dark"] .logo-dark{display:inline-block} .center{text-align:center} strong{color:var(--fg); font-weight:600} /* Fondo: gradiente claro + blobs aurora + grid tenue + grano */ .bg{position:fixed; inset:0; z-index:-3; background: radial-gradient(55% 45% at 50% -6%, rgba(124,58,237,.16), transparent 60%), radial-gradient(40% 40% at 86% 18%, rgba(91,108,245,.13), transparent 60%), linear-gradient(180deg,#FAF7FF 0%,#F3F0FE 58%,#F7F4FF 100%);} .bg-grid{position:fixed; inset:0; z-index:-2; opacity:.6; pointer-events:none; background-image:linear-gradient(rgba(26,23,48,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,23,48,.05) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%)} /* Glows del fondo con radial-gradient (sin filter:blur para no repintar cada frame) */ .blob{position:fixed; z-index:-2; border-radius:50%; opacity:.42; pointer-events:none; will-change:transform} .blob--1{width:560px; height:560px; top:-180px; left:-140px; background:radial-gradient(circle at center, var(--violet) 0%, transparent 62%); animation:fl 22s var(--ease) infinite alternate} .blob--2{width:600px; height:600px; top:28%; right:-200px; background:radial-gradient(circle at center, var(--indigo) 0%, transparent 62%); animation:fl 28s var(--ease) infinite alternate-reverse} @keyframes fl{to{transform:translate(60px,60px)}} /* Grano sutil, SIN mix-blend-mode (evita re-mezclar todo el viewport al hacer scroll) */ body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} @media(prefers-reduced-motion:reduce){.blob{animation:none}} /* Chip */ .chip{display:inline-flex; align-items:center; gap:9px; font-size:.76rem; font-weight:500; letter-spacing:.02em; padding:7px 15px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--violet-lite); box-shadow:var(--shadow)} .chip i{font-size:.85rem} .chip--dot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 8px rgba(124,58,237,.6)} .hero .chip--dot{font-size:1.1rem; padding:13px 26px; gap:13px} .hero .chip--dot::before{width:11px; height:11px} /* Botones */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:'Outfit',sans-serif; font-weight:600; font-size:14.5px; padding:12px 22px; border-radius:12px; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s} .btn--primary{background:var(--grad); color:#fff; box-shadow:var(--glow)} .btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 44px rgba(124,58,237,.42)} .btn--ghost{background:#fff; color:var(--fg); border-color:var(--line-2); box-shadow:var(--shadow)} .btn--ghost:hover{background:#FAF8FF; border-color:var(--violet)} .btn--wa{background:var(--wa); color:#04240f} .btn--lg{padding:15px 28px; font-size:15.5px} .btn--sm{padding:9px 16px; font-size:13.5px} .btn--block{width:100%} .gtext{background:linear-gradient(100deg,#7C3AED,#5B6CF5); -webkit-background-clip:text; background-clip:text; color:transparent} .asterisk{color:var(--violet-lite); font-weight:600; font-size:.7em; vertical-align:super} /* Superficie */ .card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)} .card::before{display:none} /* ============ NAV ============ */ .nav{position:sticky; top:0; z-index:80; background:rgba(250,247,255,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)} .nav__in{display:flex; align-items:center; justify-content:space-between; height:66px; gap:18px} .nav__links{display:flex; gap:26px} .nav__links a{font-size:14px; color:var(--fg-muted); font-weight:500; transition:color .2s} .nav__links a:hover{color:var(--violet)} .nav__cta{display:flex; align-items:center; gap:12px} .burger{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:#fff; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px} .burger span{width:18px; height:2px; background:var(--fg); border-radius:2px} /* ============ HERO ============ */ .hero{padding:70px 0 60px; text-align:center; position:relative} .hero__glow{position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:680px; height:340px; background:radial-gradient(50% 50% at 50% 50%,rgba(124,58,237,.22),transparent 70%); filter:blur(30px); z-index:-1} .hero h1{font-size:clamp(2.7rem,6vw,4.6rem); font-weight:700; letter-spacing:-.03em; max-width:15ch; margin:22px auto 0} .hero__lead{font-size:1.15rem; color:var(--fg-muted); margin:22px auto 0; max-width:44ch} .hero__notes{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:20px} .hero__ai{display:inline-flex; gap:11px; align-items:center; padding:10px 18px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.92rem; color:var(--fg); box-shadow:var(--shadow)} .hero__ai i{color:var(--violet)} .hero__note{display:inline-flex; gap:11px; align-items:flex-start; text-align:left; padding:12px 18px; border-radius:16px; background:#fff; border:1px solid var(--line); font-size:.9rem; line-height:1.5; color:var(--fg-muted); box-shadow:var(--shadow); max-width:46ch} .hero__note i{color:var(--violet); margin-top:3px; flex-shrink:0} .hero__note strong{color:var(--fg); font-weight:600} .hero__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px} .hero__bullets{display:flex; gap:8px 26px; justify-content:center; flex-wrap:wrap; margin-top:26px; list-style:none} .hero__bullets li{display:flex; gap:8px; align-items:center; font-size:.86rem; color:var(--fg-muted)} .hero__bullets i{color:var(--violet)} /* Mockup del hero */ .showcase{margin-top:56px; position:relative} .showcase__frame{max-width:960px; margin:0 auto; border-radius:20px; overflow:hidden; border:1px solid var(--line-2); background:#fff; box-shadow:var(--shadow-lg), 0 0 80px rgba(124,58,237,.14)} .showcase__bar{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line); background:#FAF8FF} .showcase__bar .d{width:11px; height:11px; border-radius:50%; background:rgba(26,23,48,.14)} .showcase__bar small{margin-left:10px; color:var(--fg-dim); font-size:12px; font-family:'DM Sans'} .showcase__body{display:grid; grid-template-columns:1.1fr .9fr; gap:0} .showcase__media{background:#ECEAF6} .showcase__media video{width:100%; height:100%; object-fit:cover; display:block} .showcase__side{padding:26px; display:flex; flex-direction:column; gap:14px; justify-content:center; border-left:1px solid var(--line)} .mini{padding:16px; border-radius:14px; background:#F7F5FE; border:1px solid var(--line)} .mini__t{display:flex; align-items:center; gap:10px; font-weight:600; font-family:'Outfit'; color:var(--fg); font-size:.95rem} .mini__t .ic{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:14px} .mini--pay .ic{background:rgba(37,211,102,.16); color:#12A150} .mini--wa .ic{background:rgba(37,211,102,.16); color:#12A150} .mini--stat{background:var(--grad); border-color:transparent} .mini--stat b{font-family:'Outfit'; font-size:1.9rem; color:#fff; display:block; line-height:1} .mini--stat span{font-size:.8rem; color:rgba(255,255,255,.9)} .mini p{font-size:.82rem; color:var(--fg-muted); margin-top:6px} .float-tag{position:absolute; top:-14px; right:6%; z-index:2; background:var(--grad); color:#fff; font-family:'Outfit'; font-weight:600; font-size:12px; padding:7px 15px; border-radius:999px; box-shadow:var(--glow)} /* ============ Marquee ============ */ .mq{margin-top:64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:16px 0} .mq__row{display:flex; width:max-content; gap:14px; animation:mq 32s linear infinite} @keyframes mq{to{transform:translateX(-50%)}} /* ============ Secciones ============ */ .sec{padding:56px 0 88px; position:relative} .sec__head{max-width:680px; margin:0 auto 52px; text-align:center} .sec__head h2{font-size:clamp(2rem,4vw,3rem); font-weight:700; margin:16px 0 12px} .sec__head p{color:var(--fg-muted); font-size:1.08rem} .sec__head--left{margin:0 0 44px; text-align:left} /* ============ FEATURES (bento claro) ============ */ .grp{margin-bottom:44px} .grp__head{display:flex; align-items:center; gap:16px; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line)} .grp__n{font-family:'Outfit'; font-weight:700; font-size:.9rem; color:var(--violet-lite); border:1px solid var(--line-2); border-radius:8px; padding:5px 10px; background:#fff} .grp__head h3{font-size:1.4rem} .grp__head .gi{margin-left:auto; width:40px; height:40px; border-radius:11px; background:var(--grad); display:grid; place-items:center; color:#fff; font-size:16px; box-shadow:var(--glow)} .fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .fcard{padding:24px; transition:transform .35s var(--ease), border-color .3s, box-shadow .3s} .fcard:hover{transform:translateY(-5px); border-color:rgba(124,58,237,.3); box-shadow:0 20px 46px rgba(46,26,110,.14)} .fcard__ic{width:46px; height:46px; border-radius:13px; background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.2); color:var(--violet); display:grid; place-items:center; font-size:20px; margin-bottom:15px} .fcard h4{font-size:1.08rem; margin-bottom:8px} .fcard p{font-size:.92rem; color:var(--fg-muted)} .fcard__more{display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-size:.82rem; font-weight:600; color:var(--violet)} .fcard__more i{transition:transform .3s var(--ease)} .fcard:hover .fcard__more i{transform:translateX(4px)} .card__opt{display:inline-block; font-family:'Outfit'; font-size:.58rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--violet); padding:2px 7px; border-radius:5px; margin-left:6px; vertical-align:middle} /* ============ PAGOS ============ */ .pay2{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center} .pay-list{display:grid; gap:14px; margin:26px 0} .pay{display:flex; gap:15px; align-items:flex-start; padding:18px} .pay__ic{width:48px; height:48px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; font-size:20px; color:#fff} .pay__ic--card{background:var(--grad)} .pay__ic--wa{background:var(--wa)} .pay h3{font-size:1.02rem; margin-bottom:5px} .pay p{font-size:.9rem; color:var(--fg-muted)} .pay-note{font-size:.82rem; color:var(--fg-dim); padding:14px 18px; border-radius:14px} .checkout{padding:26px; position:relative; cursor:pointer; transition:transform .35s var(--ease), box-shadow .3s} .checkout:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg),0 0 50px rgba(124,58,237,.16)} .checkout__ex{position:absolute; top:-12px; right:20px; background:var(--grad); color:#fff; font-size:12px; font-weight:600; font-family:'Outfit'; padding:5px 12px; border-radius:999px} .checkout h4{font-size:1.2rem; margin-bottom:16px} .co-opt{display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-radius:12px; font-weight:600; font-size:.9rem; background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.22)} .co-opt .ck{width:24px; height:24px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:12px} .co-field{padding:13px 15px; margin-top:11px; border-radius:12px; color:var(--fg-muted); font-size:.9rem; background:#F7F5FE; border:1px solid var(--line); font-variant-numeric:tabular-nums} .co-row{display:grid; grid-template-columns:1fr 1fr; gap:11px} .co-div{text-align:center; position:relative; margin:16px 0; color:var(--fg-dim); font-size:12px} .co-div::before{content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line)} .co-div span{position:relative; background:#fff; padding:0 12px} .co-wa{width:100%; border:0; border-radius:12px; background:var(--wa); color:#04240f; font-family:'Outfit'; font-weight:600; padding:13px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer} .co-note{display:block; text-align:center; margin-top:12px; font-size:12px; color:var(--fg-dim)} /* ============ STEPS ============ */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .step{padding:30px} .step__n{font-family:'Outfit'; font-weight:700; font-size:2.4rem; line-height:1; margin-bottom:14px} .step__n span{background:linear-gradient(120deg,#7C3AED,#5B6CF5); -webkit-background-clip:text; background-clip:text; color:transparent} .step h3{font-size:1.22rem; margin-bottom:8px} .step p{color:var(--fg-muted); font-size:.94rem} /* ============ TABLAS ============ */ .tablewrap{overflow:hidden; padding:6px} .tscroll{overflow-x:auto; border-radius:14px} table.cmp{width:100%; border-collapse:collapse; min-width:620px} table.cmp th, table.cmp td{padding:15px 14px; text-align:center; border-bottom:1px solid var(--line)} table.cmp tbody tr:last-child td, table.cmp tbody tr:last-child th{border-bottom:0} .cmp .rowh{text-align:left; font-weight:500; color:var(--fg-muted)} .cmp thead .rowh{font-family:'Outfit'; font-weight:700; color:var(--fg); font-size:1.02rem} .cmp__logo{height:34px; font-size:25px; display:flex; align-items:center; justify-content:center; color:var(--fg)} .cmp__logo .fa-shopify{color:#95BF47}.cmp__logo .fa-wordpress{color:#21759B} .cmp__nm{display:block; margin-top:5px; font-weight:600; font-size:.88rem; color:var(--fg-muted)} .cmp .tienlycol,.cmp .tienlycell{background:rgba(124,58,237,.07)} .cmp .tienlycol .cmp__nm{color:var(--violet)} .mk{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:11px} .mk--y{background:rgba(124,58,237,.16); color:var(--violet)} .mk--n{background:rgba(26,23,48,.05); color:var(--fg-dim)} .cmp__val{font-family:'Outfit'; font-weight:600; font-size:.92rem; color:var(--fg)} .cmp__plan{display:block; font-family:'Outfit'; font-weight:700; font-size:1.14rem; color:var(--fg)} .cmp__price{display:block; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums; color:var(--fg)} .cmp__price small{color:var(--fg-dim); font-weight:400; font-size:.72rem} .cmp .grouprow th{background:#F4F1FE; text-align:left; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:var(--violet-lite); font-weight:700; font-family:'Outfit'} .poptag{display:inline-block; background:var(--grad); color:#fff; border-radius:999px; font-size:.6rem; padding:2px 9px; margin-bottom:6px; text-transform:uppercase; font-weight:700; font-family:'Outfit'} /* ============ PRECIOS ============ */ .promo{padding:30px; margin-bottom:32px; border-radius:var(--r); border:1px solid rgba(124,58,237,.24); background:linear-gradient(120deg, rgba(124,58,237,.1), rgba(91,108,245,.06)); position:relative; overflow:hidden; box-shadow:var(--shadow)} .promo::after{content:""; position:absolute; top:-60px; right:-40px; width:260px; height:260px; background:radial-gradient(50% 50% at 50% 50%,rgba(124,58,237,.22),transparent 70%); filter:blur(20px)} .promo__badge{display:inline-flex; gap:8px; align-items:center; font-family:'Outfit'; font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--violet-lite)} .promo h3{font-size:1.6rem; margin:14px 0 6px} .promo__sub{color:var(--fg-muted); margin-bottom:20px; max-width:40em} .promo__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative; z-index:1} .offer{padding:18px; border-radius:14px; cursor:pointer; background:#fff; border:1px solid var(--line); transition:transform .3s var(--ease), border-color .3s; box-shadow:var(--shadow)} .offer:hover{transform:translateY(-3px); border-color:var(--violet)} .offer__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px} .offer__plan{font-family:'Outfit'; font-weight:600; color:var(--fg)} .offer__deal{font-family:'Outfit'; font-weight:600; font-size:.72rem; background:rgba(124,58,237,.14); border:1px solid rgba(124,58,237,.3); border-radius:999px; padding:2px 9px; color:var(--violet-lite)} .offer__deal--free{background:rgba(37,211,102,.14); border-color:rgba(37,211,102,.32); color:#12A150} .offer p{color:var(--fg-muted); font-size:.9rem; margin-bottom:12px} .ticket{display:flex; align-items:center; justify-content:space-between; gap:10px; border:2px dashed rgba(124,58,237,.55); border-radius:12px; padding:9px 9px 9px 14px; background:rgba(124,58,237,.06)} .ticket code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; font-size:15px; letter-spacing:.09em; color:var(--violet); overflow:hidden; text-overflow:ellipsis} .ticket span{display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-family:'Outfit'; font-weight:700; font-size:12.5px; color:#fff; background:var(--violet); border-radius:8px; padding:8px 12px; transition:filter .15s, transform .1s} .offer:hover .ticket span{transform:translateY(-1px); filter:brightness(1.08)} .ticket--free{border-color:rgba(52,211,153,.6)} .ticket--free code{color:#047857} .ticket--free span{background:#059669} .promo__note{margin-top:16px; font-size:.8rem; color:var(--fg-dim); position:relative; z-index:1} .plans{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:start} .plan{padding:32px; position:relative} .plan--pro{border-color:rgba(124,58,237,.4); background:linear-gradient(180deg, rgba(124,58,237,.08), #fff); box-shadow:0 20px 60px rgba(124,58,237,.16)} .plan__pop{position:absolute; top:-13px; right:24px; background:var(--grad); color:#fff; border-radius:999px; font-family:'Outfit'; font-weight:600; font-size:.7rem; text-transform:uppercase; padding:5px 13px; box-shadow:var(--glow)} .plan__name{font-size:1.5rem} .plan__price{font-family:'Outfit'; font-weight:700; font-size:2.2rem; margin:6px 0 2px; color:var(--fg); font-variant-numeric:tabular-nums} .plan__price span{font-size:.9rem; color:var(--fg-dim); font-weight:400} .plan__desc{color:var(--fg-muted); margin-bottom:14px} .plan__ex{display:inline-block; margin:0 0 20px; font-size:.72rem; font-weight:600; line-height:1.45; color:#0E7490; background:#E0F7FA; border:1px solid #B6E6EC; padding:7px 10px; border-radius:9px} .plan__ex i{margin-right:5px; color:#0891B2} .plan__feat{list-style:none; display:grid; gap:12px; margin-bottom:24px} .plan__feat li{display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color:var(--fg)} .plan__feat i{color:var(--violet); margin-top:4px} /* ============ FAQ ============ */ .faq{max-width:820px; margin:0 auto; display:grid; gap:12px} .acc{padding:2px 22px} .acc summary{cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative; font-family:'Outfit'; font-weight:600; font-size:1.04rem; color:var(--fg)} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--violet); position:absolute; right:0; top:50%; transform:translateY(-50%); transition:transform .3s var(--ease)} .acc[open] summary::after{transform:translateY(-50%) rotate(180deg)} .acc p{color:var(--fg-muted); padding:0 0 18px} /* ============ CTA (banda violeta) ============ */ .cta{position:relative; padding:96px 0; text-align:center; overflow:hidden; background:linear-gradient(120deg,#7C3AED,#5B6CF5); color:#fff} .cta__glow{position:absolute; inset:0; z-index:0; background:radial-gradient(60% 100% at 50% 120%,rgba(255,255,255,.18),transparent 70%)} .cta .wrap{position:relative; z-index:1} .cta h2{color:#fff; font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:16px} .cta p{color:rgba(255,255,255,.9); max-width:34em; margin:0 auto 28px} .cta .gtext{background:linear-gradient(100deg,#fff,#E7DBFF); -webkit-background-clip:text; background-clip:text; color:transparent} .cta .chip{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); color:#fff; box-shadow:none} .cta .chip--dot::before{background:#fff; box-shadow:0 0 8px rgba(255,255,255,.7)} .cta .btn--ghost{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.42); color:#fff; box-shadow:none} .cta .btn--ghost:hover{background:rgba(255,255,255,.24)} .cta .btn--primary{background:#fff; color:var(--violet); box-shadow:0 12px 30px rgba(0,0,0,.18)} .cta .btn--primary:hover{box-shadow:0 18px 40px rgba(0,0,0,.25)} /* CTA embebido en el contenido de un artículo (viene como