.pl{color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.pl{color-scheme: light;
  --page: #f8f7f3;
  --paper: #fffef8;
  --card: #ffffff;
  --ink: #241c38;
  --soft: #6b6380;
  --faint: #8a8296;
  --line: #e4dfea;
  --purple: #522dd7;
  --purple-hover: #4120b2;
  --purple-tint: #efebfc;
  --hero: #ece6fb;
  --lime: #d6e761;
  --lime-tint: #eef3c9;
  --green: #13805a;
  --red: #c0392b;
  --banner: #241c38;
  --on-ink: #f6f3fb;
  --on-ink-soft: #c9c1d9;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;}
.pl *{box-sizing: border-box;}
.pl a{color: inherit;}
.pl img{display: block; max-width: 100%; height: auto;}
.pl :focus-visible{outline: 3px solid #a995f4; outline-offset: 3px; border-radius: 6px;}
.pl h1,.pl h2,.pl h3{text-wrap: balance; margin: 0; letter-spacing: -0.035em;}
.pl p{margin: 0;}
.pl .pl-wrap{width: 100%; max-width: 1100px; margin: 0 auto; padding-inline: 20px;}
.pl .kicker{font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: #655480; text-transform: uppercase;}
.pl .pl-btn{display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 13px; background: var(--purple); color: #fff; font-weight: 700; font-size: 15.5px; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 10px 24px #522dd733;}
.pl .pl-btn:hover{background: var(--purple-hover);}
.pl .pl-btn small{font-weight: 500; opacity: .85; font-size: 13.5px;}
.pl .text-link{font-size: 14.5px; font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; min-height: 44px; align-items: center;}
.pl .text-link:hover{color: var(--purple);}
.pl .pl-hero{background: var(--hero);}
.pl .pl-hero .pl-wrap{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "top demo" "bottom demo"; column-gap: 56px; row-gap: 0; align-items: center; padding-block: 28px 64px;}
.pl .hero-top{grid-area: top; align-self: end;}
.pl .hero-bottom{grid-area: bottom; align-self: start;}
.pl .demo{grid-area: demo;}
.pl .pl-hero h1{font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; margin: 14px 0 18px;}
.pl .pl-hero h1 em{font-style: normal; color: var(--purple);}
.pl .pl-hero .pl-lead{font-size: 17.5px; color: var(--soft); max-width: 500px;}
.pl .pl-actions{display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px;}
.pl .facts{display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--soft);}
.pl .facts li::before{content: "✓"; color: var(--purple); font-weight: 800; margin-right: 7px;}
.pl .demo{display: grid; justify-items: center; gap: 16px; min-width: 0;}
.pl .phone{position: relative; width: min(290px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 42px; background: #17121f; padding: 11px; box-shadow: 0 30px 70px #2b154038, inset 0 0 0 2px #3a3249;}
.pl .phone::before{content: ""; position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #17121f; z-index: 5;}
.pl .screen{position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #fff;}
.pl .scene{position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;}
.pl .scene.on{opacity: 1;}
.pl .cam{background: #0f0c14; display: flex; flex-direction: column;}
.pl .cam-top{height: 46px;}
.pl .viewfinder{position: relative; flex: 1; margin: 0 10px; border-radius: 14px; overflow: hidden; background: #3b3445; display: grid; place-items: center;}
.pl .corner{position: absolute; width: 22px; height: 22px; border: 3px solid #ffffffd0;}
.pl .corner.tl{top: 10px; left: 10px; border-right: 0; border-bottom: 0;}
.pl .corner.tr{top: 10px; right: 10px; border-left: 0; border-bottom: 0;}
.pl .corner.bl{bottom: 10px; left: 10px; border-right: 0; border-top: 0;}
.pl .corner.br{bottom: 10px; right: 10px; border-left: 0; border-top: 0;}
.pl .pl-notebook{width: 86%; aspect-ratio: 3 / 4; background: #fdfcf6; border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 10px 22px #0006; padding: 14% 9% 8% 16%; position: relative; background-image: linear-gradient(transparent calc(100% - 1px), #a9c4e6 1px); background-size: 100% 1.55em; font: 500 clamp(13px, 4.2vw, 17px)/1.55em var(--font-hand); color: #2a3a8f;}
.pl .pl-notebook::before{content: ""; position: absolute; top: 0; bottom: 0; left: 11%; width: 1.5px; background: #e8a3a3;}
.pl .pl-notebook .h{font-weight: 700; text-decoration: underline; text-underline-offset: 3px;}
.pl .pl-notebook .red{color: #c0392b; font-weight: 700; transform: rotate(-6deg); display: inline-block;}
.pl .cam-bottom{height: 92px; display: grid; place-items: center;}
.pl .shutter{width: 58px; height: 58px; border-radius: 50%; border: 4px solid #fff; background: #ffffff30;}
.pl .flash{position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;}
.pl .scene.on .flash{animation: flash 2.8s ease forwards;}
@keyframes flash{ 0%, 78% { opacity: 0; } 84% { opacity: .9; } 100% { opacity: 0; } }
.pl .chat{background: #f4f1fa; display: flex; flex-direction: column;}
.pl .chat-top{display: flex; align-items: center; gap: 9px; padding: 44px 14px 10px; background: #fff; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px;}
.pl .avatar{width: 30px; height: 30px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800;}
.pl .chat-top small{display: block; font-weight: 500; color: var(--faint); font-size: 11px; line-height: 1.2;}
.pl .msgs{flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 14px 12px; font-size: 12.5px; line-height: 1.45;}
.pl .msg{max-width: 82%; padding: 9px 11px; border-radius: 14px; opacity: 0; transform: translateY(6px);}
.pl .me{align-self: flex-end; background: var(--purple); color: #fff; border-bottom-right-radius: 4px;}
.pl .me .thumb{width: 120px; margin-bottom: 7px; border-radius: 8px; overflow: hidden;}
.pl .me .thumb .pl-notebook{width: 100%; transform: none; font-size: 7.5px; box-shadow: none; padding: 12% 8% 6% 15%;}
.pl .bot{align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px;}
.pl .open-card{display: block; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--purple-tint); color: var(--purple); font-weight: 700; font-size: 12px;}
.pl .typing{align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; opacity: 0;}
.pl .typing i{width: 6px; height: 6px; border-radius: 50%; background: #b9b0cc;}
.pl .scene.on .m1{animation: pop .35s ease .25s forwards;}
.pl .scene.on .typing{animation: blink 1.4s ease 1s forwards;}
.pl .scene.on .m2{animation: pop .35s ease 2.3s forwards;}
@keyframes pop{ to { opacity: 1; transform: none; } }
@keyframes blink{ 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
.pl .real{background: #fffdf8;}
.pl .real::before{content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40px; background: #fff; z-index: 2;}
.pl .real img{width: 100%;}
.pl .scroller{position: absolute; left: 0; right: 0; top: 40px;}
.pl .scene.on .scroller{animation:scrollsteps 11s ease-in-out .2s forwards}
@keyframes scrolldown{ to { transform: translateY(-48%); } }
.pl .real.q{display: flex; flex-direction: column; justify-content: center; padding: 48px 10px 18px; background: #fbfaf7;}
.pl .real.q img{border-radius: 10px;}
.pl .real.q .label{align-self: center; margin-bottom: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 20px;}
.pl .label.bad{background: #fdecea; color: var(--red);}
.pl .label.good{background: #e3f4ec; color: var(--green);}
.pl .steps-ctl{display: flex; gap: 6px; width: min(340px, 100%);}
.pl .steps-ctl button{flex: 1; min-width: 0; border: 0; background: #ffffffa0; border-radius: 10px; padding: 9px 6px 10px; font: 700 12px var(--font-ui); color: var(--soft); cursor: pointer; position: relative; overflow: hidden;}
.pl .steps-ctl button span{display: block; font-size: 10.5px; font-weight: 800; color: var(--faint);}
.pl .steps-ctl button[aria-pressed="true"]{background: #fff; color: var(--purple); box-shadow: 0 4px 12px #2b15400f;}
.pl .steps-ctl button i{position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--purple);}
.pl .caption{min-height: 3.2em; text-align: center; font-size: 15px; font-weight: 600; max-width: 330px;}
.pl .pl-section .pl-wrap{padding-block: 64px;}
.pl .section-head{max-width: 640px; margin-bottom: 32px;}
.pl .section-head h2{font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; margin-top: 10px;}
.pl .section-head p{color: var(--soft); margin-top: 12px; font-size: 16px;}
.pl .tour{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;}
.pl .fig{margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0;}
.pl .shot{background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: 0 14px 34px #2b15400c; height: 360px; overflow: hidden; position: relative;}
.pl .shot::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(transparent, var(--card));}
.pl .shot img{border-radius: 10px;}
.pl .shot.fit::after{display: none;}
.pl .fig figcaption{font-size: 14.5px; color: var(--soft);}
.pl .fig figcaption b{display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; letter-spacing: -0.01em;}
.pl .quote{background: var(--lime-tint); padding: 1px 5px; border-radius: 4px; color: var(--ink); font-weight: 600;}
.pl .extras{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; align-items: center; font-size: 14px; color: var(--soft);}
.pl .extras span.chip{background: var(--card); border: 1px solid var(--line); border-radius: 30px; padding: 7px 13px; color: var(--ink); font-weight: 600; font-size: 13.5px;}
.pl .compare{background: var(--ink); color: var(--on-ink);}
.pl .compare .section-head p{color: var(--on-ink-soft);}
.pl .compare .kicker{color: #b8a9e8;}
.pl .cols{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
.pl .col{border-radius: 18px; padding: 24px; background: #ffffff0d; border: 1px solid #ffffff1c; min-width: 0;}
.pl .col h3{font-size: 18px; letter-spacing: -0.02em;}
.pl .col .price{font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin: 12px 0 14px; font-variant-numeric: tabular-nums;}
.pl .col ul{list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14px; color: var(--on-ink-soft);}
.pl .col li{display: grid; grid-template-columns: 18px 1fr; gap: 6px;}
.pl .col li::before{content: "·"; font-weight: 800;}
.pl .col.us{background: var(--lime); border-color: var(--lime); color: var(--ink);}
.pl .col.us ul{color: #3d4318;}
.pl .col.us li::before{content: "✓"; color: var(--ink);}
.pl .source{margin-top: 16px; font-size: 12px; color: var(--on-ink-soft);}
.pl .price-zone{background: var(--purple-tint);}
.pl .plan{display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border-radius: 22px; box-shadow: 0 24px 60px #2b154018; overflow: hidden;}
.pl .plan-main,.pl .plan-side{padding: 32px; min-width: 0;}
.pl .plan-side{background: var(--paper); border-left: 1px solid var(--line);}
.pl .plan-name{display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.pl .plan-name h3{font-size: 24px;}
.pl .launch{font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 4px 8px; border-radius: 5px;}
.pl .plan-sub{color: var(--soft); font-size: 14px; margin-top: 6px;}
.pl .pay{display: grid; gap: 10px; margin: 22px 0; border: 0; padding: 0;}
.pl .pay legend{font-size: 12px; font-weight: 700; color: var(--soft); margin-bottom: 8px; padding: 0;}
.pl .opt{display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--card);}
.pl .opt:has(input:checked){border-color: var(--purple); background: #faf8ff;}
.pl .opt input{accent-color: var(--purple); width: 18px; height: 18px; margin: 0;}
.pl .o-title{font-weight: 700; font-size: 14.5px;}
.pl .o-price{font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap;}
.pl .o-desc{grid-column: 2 / 4; font-size: 12.5px; color: var(--soft);}
.pl .save{display: inline-block; font-size: 11px; font-weight: 700; color: var(--purple); background: var(--purple-tint); border-radius: 5px; padding: 2px 7px; margin-left: 6px;}
.pl .big-price{font-size: 44px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1;}
.pl .big-price small{font-size: 15px; font-weight: 600; color: var(--soft); letter-spacing: 0;}
.pl .per-class{font-size: 13px; color: var(--soft); margin-top: 6px;}
.pl .plan-cta{margin-top: 18px; display: grid; gap: 10px;}
.pl .plan-cta .pl-btn{width: 100%;}
.pl .plan-fine{font-size: 12.5px; color: var(--soft); text-align: center;}
.pl .side-title{font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--faint); text-transform: uppercase;}
.pl .includes{list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; font-size: 14.5px;}
.pl .includes li{display: grid; grid-template-columns: 22px 1fr; gap: 8px;}
.pl .includes li::before{content: "✓"; color: var(--purple); font-weight: 800;}
.pl .pl-faq{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px;}
.pl .pl-faq details{border-bottom: 1px solid var(--line); padding: 4px 0;}
.pl .pl-faq summary{cursor: pointer; font-weight: 700; padding: 14px 0;}
.pl .pl-faq details p{color: var(--soft); padding: 0 0 16px; font-size: 14.5px;}
.pl .wa{display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; font-size: 14px; text-decoration: none; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px 16px;}
.pl .final .pl-wrap{padding-block: 0 56px;}
.pl .final-box{display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 34px; border-radius: 22px; background: var(--purple); color: #fff;}
.pl .final-box h2{font-size: clamp(24px, 3vw, 32px); line-height: 1.2;}
.pl .final-box p{color: #ddd5fb; margin-top: 8px;}
.pl .final-box .pl-btn{background: var(--lime); color: var(--ink); box-shadow: none;}
.pl .final-box .pl-btn:hover{background: #c7d84f;}
.pl .site-foot .pl-wrap{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding-block: 22px 40px; font-size: 13px; color: var(--soft); border-top: 1px solid var(--line);}
.pl .site-foot a{font-weight: 700; color: var(--ink);}
@media (max-width: 980px){.pl .tour{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 860px){.pl .pl-hero .pl-wrap{grid-template-columns: 1fr; grid-template-areas: "top" "demo" "bottom"; row-gap: 26px; padding-block: 18px 48px;}
.pl .cols,.pl .plan{grid-template-columns: 1fr;}
.pl .plan-side{border-left: 0; border-top: 1px solid var(--line);}
.pl .pl-faq{grid-template-columns: 1fr; gap: 8px;}
.pl .pl-section .pl-wrap{padding-block: 48px;}}
@media (max-width: 560px){.pl .pl-wrap{padding-inline: 16px;}
.pl .pl-hero h1{font-size: 33px;}
.pl .pl-hero .pl-lead{font-size: 16px;}
.pl .pl-actions .pl-btn{width: 100%;}
.pl .tour{display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -16px; padding: 0 16px 8px; scrollbar-width: none;}
.pl .tour .fig{flex: 0 0 80%; scroll-snap-align: start;}
.pl .shot{height: 330px;}
.pl .swipe{display: block;}
.pl .plan-main,.pl .plan-side{padding: 22px;}
.pl .big-price{font-size: 38px;}
.pl .final-box{padding: 24px;}
.pl .final-box .pl-btn{width: 100%;}}
.pl .swipe{display: none; font-size: 12.5px; color: var(--faint); margin-top: 10px;}
/* «Leer con Loopin»: tres capturas reales; el aro marca el botón de voz en la primera. */
.pl .tour.tour-3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.pl .leer .shot{display: grid; place-items: center;}
.pl .leer .shot img{width: 100%;}
.pl .leer-tap{position: relative; display: block; width: 100%;}
.pl .leer-ring{position: absolute; left: 54.9%; top: 89.8%; width: 17%; aspect-ratio: 1; border: 3px solid #e4572e; border-radius: 50%; transform: translate(-50%, -50%); animation: leer-aro 2.2s ease-out infinite;}
@keyframes leer-aro{0%{transform: translate(-50%, -50%) scale(.8); opacity: 1;} 80%,100%{transform: translate(-50%, -50%) scale(1.25); opacity: 0;}}
@media (prefers-reduced-motion: reduce){.pl .leer-ring{animation: none;}}
@media (prefers-reduced-motion: reduce){.pl .scene,.pl .msg,.pl .typing{transition: none; animation: none !important;}
.pl .msg{opacity: 1; transform: none;}
.pl .typing{display: none;}
.pl .scene.on .scroller{animation: none;}}
.pl .pl-hero,.pl .compare,.pl .price-zone{clip-path:inset(0 -100vmax)}.pl .pl-hero{box-shadow:0 0 0 100vmax var(--hero)}.pl .compare{box-shadow:0 0 0 100vmax var(--ink)}.pl .price-zone{box-shadow:0 0 0 100vmax var(--purple-tint)}
.pl .pl-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;padding:4px 0 34px;font-size:13.5px;color:var(--soft)}.pl .pl-foot a{font-weight:700;color:var(--ink)}
.pl .reply{display:grid;align-items:start}.pl .reply>*{grid-area:1/1}.pl .reply .typing{justify-self:start}
/* Dedo: toques (disparador, «Abrir la clase», respuestas) y deslizamiento en la clase. */
.pl .cam-bottom,.pl .open-card,.pl .tapbox{position:relative}.pl .tapbox{display:block}
.pl .touch{position:absolute;left:var(--x,50%);top:var(--y,50%);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 0 2px rgba(82,45,215,.4),0 6px 14px rgba(20,10,40,.3);opacity:0;pointer-events:none;z-index:6}
.pl .touch::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(82,45,215,.55);opacity:0}
.pl .scene.on .touch.tap{animation:tap 1s ease var(--delay,0s) forwards}
.pl .scene.on .touch.tap::after{animation:ripple .6s ease-out calc(var(--delay,0s) + .5s) forwards}
@keyframes tap{0%{opacity:0;transform:scale(1.4)}30%{opacity:1;transform:scale(1)}50%{transform:scale(.75)}62%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes scrollsteps{0%,9%{transform:translateY(0)}17%,27%{transform:translateY(calc(var(--end,-1200px)*.2))}35%,45%{transform:translateY(calc(var(--end,-1200px)*.4))}53%,63%{transform:translateY(calc(var(--end,-1200px)*.6))}71%,81%{transform:translateY(calc(var(--end,-1200px)*.8))}89%,100%{transform:translateY(var(--end,-1200px))}}
.pl .touch.drag{top:auto;bottom:24%}
.pl .scene.on .touch.drag{animation:drag 11s ease-in-out .2s forwards}
@keyframes drag{0%,8%{opacity:0;transform:translateY(0)}9%{opacity:1;transform:translateY(0)}17%{opacity:1;transform:translateY(-170px)}18.5%,26%{opacity:0;transform:translateY(0)}27%{opacity:1;transform:translateY(0)}35%{opacity:1;transform:translateY(-170px)}36.5%,44%{opacity:0;transform:translateY(0)}45%{opacity:1;transform:translateY(0)}53%{opacity:1;transform:translateY(-170px)}54.5%,62%{opacity:0;transform:translateY(0)}63%{opacity:1;transform:translateY(0)}71%{opacity:1;transform:translateY(-170px)}72.5%,80%{opacity:0;transform:translateY(0)}81%{opacity:1;transform:translateY(0)}89%{opacity:1;transform:translateY(-170px)}90.5%,100%{opacity:0;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.pl .touch{display:none}}