/* Landing: misma dirección visual de la app (crema con papel milimetrado, Playfair con cursiva, halos, píldoras negras). */
@font-face{font-family:'Playfair Display';src:url(/fonts/PlayfairDisplay-Variable.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(/fonts/PlayfairDisplay-Italic-Variable.woff2) format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url(/fonts/Jost-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--cream:#FBF7F0;--paper:#FFFDF9;--ink:#1F1A17;--muted:#5E544B;--line:#E6DDCF;--grid:rgba(120,92,60,.07);--pink:#F8C8D8;--peach:#FFD9B8;--violet:#CFC3F5;--focus:#5B3FD0;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;--sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;--r:22px;--shadow:0 1px 2px rgba(60,40,20,.06),0 12px 30px -14px rgba(60,40,20,.22)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font:400 1.0625rem/1.55 var(--sans);color:var(--ink);background-color:var(--cream);overflow-x:hidden;position:relative;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);margin:0;letter-spacing:-.01em;line-height:1.1}
h1,h2{font-weight:600}h3{font-weight:600;font-size:1.2rem}
em{font-style:italic;font-weight:500}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
.halo{position:absolute;inset:0 0 auto 0;height:760px;z-index:-1;pointer-events:none;overflow:hidden}
.halo i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.7}
.halo i:nth-child(1){width:440px;height:440px;left:-140px;top:-120px;background:var(--pink)}
.halo i:nth-child(2){width:400px;height:400px;right:-120px;top:60px;background:var(--violet)}
.halo i:nth-child(3){width:360px;height:360px;left:32%;top:230px;background:var(--peach)}
.ico{width:24px;height:24px;flex:none}.ico.big{width:44px;height:44px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:500 1rem var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.main{background:var(--ink);color:var(--cream);min-height:56px;padding:0 34px;font-size:1.1rem}
.btn.sm{min-height:44px;padding:0 20px;background:var(--ink);color:var(--cream)}
.sticker{display:inline-grid;place-items:center;border-radius:50%;background:var(--peach);border:1.5px solid var(--ink);font:600 .78rem/1.1 var(--sans);text-align:center;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.sticker.alt{background:var(--paper)}

.top{max-width:1080px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font:700 1.25rem var(--serif);text-decoration:none}
.brand svg{width:30px;height:30px}
.wm{font-weight:500;letter-spacing:-.01em}.wm em{font-style:italic;font-weight:400}
.top nav{display:none;gap:26px}
.top nav a{text-decoration:none;font-weight:500;padding:10px 2px}
.top nav a:hover{text-decoration:underline;text-underline-offset:5px}
@media(min-width:860px){.top nav{display:flex}}

.hero{display:grid;gap:34px;padding-top:26px;padding-bottom:56px;align-items:center}
.hero h1{font-size:clamp(2.4rem,9vw,4.4rem);line-height:1.02}
.sub{font-size:1.2rem;color:var(--muted);max-width:28em;margin-top:16px}
.ctas{margin-top:26px}.micro{font-size:.95rem;color:var(--muted);margin-top:12px}
.mock{position:relative;width:min(100%,430px);aspect-ratio:1/1.02;margin:0 auto}
.mock .pdf{position:absolute;width:56%;transform:translate3d(calc(var(--mx,0)*var(--d,12)*1px),calc(var(--my,0)*var(--d,12)*1px),0);transition:transform .25s ease-out}
.mock .pdf img{width:100%;height:auto;border-radius:6px;box-shadow:0 18px 40px -16px rgba(40,25,10,.45),0 0 0 1px rgba(0,0,0,.05);background:#fff;transform:rotate(var(--rot))}
.mock .m1{left:0;top:9%;--rot:-8deg;--d:10;z-index:1}
.mock .m2{right:0;top:2%;--rot:7deg;--d:20;z-index:2}
.mock .m3{left:22%;top:28%;--rot:-1deg;--d:32;z-index:3}
.mock .s1{position:absolute;right:-2px;bottom:8%;width:92px;height:92px;--rot:-10deg;transform:rotate(var(--rot));z-index:4}
.mock .s2{position:absolute;left:-4px;bottom:2%;width:70px;height:70px;--rot:8deg;transform:rotate(var(--rot));z-index:4;font-size:.7rem}
@media(min-width:860px){.hero{grid-template-columns:1.05fr .95fr;gap:50px;padding-top:50px;padding-bottom:80px}.mock{width:100%;max-width:470px}}

.sec{padding-top:46px;padding-bottom:46px}
.sec h2,.cta h2{font-size:clamp(1.9rem,6vw,3rem)}
.lead{color:var(--muted);margin-top:10px;max-width:34em}
.small{font-size:.9rem;color:var(--muted)}.note{margin-top:16px}

.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.steps li{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 22px 24px 22px}
.steps .n{position:absolute;right:18px;top:6px;font:italic 500 3.2rem/1 var(--serif);color:var(--peach);-webkit-text-stroke:1px var(--ink)}
.steps .big{margin-bottom:14px}.steps p{color:var(--muted);margin-top:6px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}

.gal{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px}
@media(min-width:620px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.gal{grid-template-columns:repeat(4,1fr);gap:30px 20px}}
.pair{position:relative;aspect-ratio:1/1.2;margin-bottom:6px}
.pair img{position:absolute;width:70%;border-radius:5px;box-shadow:0 12px 26px -12px rgba(40,25,10,.45),0 0 0 1px rgba(0,0,0,.06);background:#fff}
.pair .pg1{left:0;top:0;z-index:2;transform:rotate(-2deg)}
.pair .pg2{right:0;top:9%;transform:rotate(4deg)}
.gal .nm{display:block;font:600 1.02rem var(--serif);text-align:center}

.who{display:grid;gap:26px}
.chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:9px 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);font-weight:500}
.chips li:nth-child(3n+1){background:var(--peach)}.chips li:nth-child(3n+2){background:#F3DDF0}
.ben{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ben li{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.ben .ico{margin-top:2px;width:28px;height:28px}.ben p{color:var(--muted);margin-top:2px}
@media(min-width:860px){.who{grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}}

.plans{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.plan{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 22px;display:flex;flex-direction:column;gap:6px}
.plan.feat{border:2px solid var(--ink)}
.plan .pl{position:absolute;right:-8px;top:-18px;width:78px;height:78px;transform:rotate(9deg)}
.price b{font:700 2.4rem var(--serif)}.price span{color:var(--muted);margin-left:4px}
.cat{font-weight:500}
.plan ul{list-style:none;margin:10px 0 18px;padding:0;display:grid;gap:8px;flex:1}
.plan ul li{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.plan ul .ico{width:20px;height:20px;margin-top:3px;color:var(--ink)}
.plan .btn{width:100%}
@media(min-width:620px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.plans{grid-template-columns:repeat(4,1fr)}}

.faq>div{margin-top:24px;max-width:780px}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:56px;padding:14px 4px;display:flex;align-items:center;justify-content:space-between;gap:14px;font:600 1.1rem var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:transform .25s}.faq details[open] summary .ico{transform:rotate(180deg)}
.faq p{padding:0 4px 18px;color:var(--muted);max-width:42em}

.cta{margin:30px auto 50px;max-width:1040px;padding-top:44px;padding-bottom:48px;text-align:center;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow);
  background:radial-gradient(circle at 15% 20%,var(--pink),transparent 55%),radial-gradient(circle at 85% 80%,var(--violet),transparent 55%),var(--peach)}
.cta p{margin-top:12px}.cta .ctas{margin-top:24px}
@media(max-width:1100px){.cta{margin-left:16px;margin-right:16px}}

.foot{border-top:1px solid var(--line);background:rgba(255,253,249,.8)}
.foot-in{padding-top:28px;padding-bottom:36px;display:grid;gap:18px}
.foot-in p{color:var(--muted);margin-top:6px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}.foot nav a{padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
@media(min-width:760px){.foot-in{grid-template-columns:1.3fr 1fr auto;align-items:start}}

.legal{max-width:720px;padding-top:30px;padding-bottom:60px;display:grid;gap:16px}
.legal h1{font-size:clamp(2rem,6vw,2.8rem)}
.draft{display:inline-block;justify-self:start;padding:6px 14px;border-radius:999px;background:#FFE9B8;border:1.5px solid var(--ink);font-weight:600;font-size:.9rem}
/* Movimiento de la landing (solo transform/opacity; sin layout shift). Con prefers-reduced-motion todo queda quieto. */
.price{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:2px}.price span{margin-left:4px}
.plan ul{align-content:start}
.price b{display:inline-block;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.plan>h3,.plan>.price,.plan>.cat,.plan>ul,.plan>.btn{position:relative;z-index:1}
.plan .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease-out;
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.6),rgba(255,255,255,0) 62%)}
.plan.tilting .glare{opacity:1}
.plan{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .3s}
.plan .ring{position:absolute;inset:-3px;border-radius:calc(var(--r) + 3px);padding:3px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.feat .r1{background:linear-gradient(135deg,var(--pink),var(--peach),var(--violet))}
.feat .r2{background:linear-gradient(135deg,var(--violet),var(--pink),var(--peach));opacity:0}
.prem .r1{background:linear-gradient(135deg,#C9A66B,#F1DFAE,#C9A66B)}
.prem .r2{background:linear-gradient(135deg,#B9A7FF,#F1DFAE,#B9A7FF);opacity:0}

/* Premium: carbón con detalles dorados */
.plan.prem{background:#1B1917;border-color:#C9A66B;color:#F6EEDF}
.prem h3,.prem .cat{color:#F6EEDF}.prem .price b{color:#E7C987}
.prem .price span{color:#CFC6B8}.prem ul li{color:#D8CFC0}.prem ul .ico{color:#E7C987}
.prem .btn{background:linear-gradient(135deg,#E7C987,#C9A66B);color:#1B1917;border-color:#E7C987;font-weight:600}
.prem .glare{background:radial-gradient(280px circle at var(--gx,50%) var(--gy,0%),rgba(255,236,190,.34),rgba(255,236,190,0) 62%)}
.badge{position:absolute;left:20px;top:-14px;z-index:2;padding:4px 14px;border-radius:999px;background:#1B1917;color:#E7C987;border:1.5px solid #C9A66B;font:600 .75rem var(--sans);letter-spacing:.16em;text-transform:uppercase}

.chips li{transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.chips li.more{background:linear-gradient(120deg,var(--pink),var(--peach),var(--violet));font-weight:600}
.gal .nm{position:relative}
.gal .nm::after{content:'';position:absolute;left:18%;right:18%;bottom:-3px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .35s ease-out}
.pair img,.gal .pair,.gal .nm{transition:transform .35s ease-out,box-shadow .35s ease-out,opacity .35s ease-out}

@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{transform:translateY(46px) rotate(0deg)}to{transform:translateY(0) rotate(var(--rot))}}
  @keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot))}50%{transform:translateY(-9px) rotate(calc(var(--rot) + .8deg))}}
  @keyframes pop{0%{opacity:0;transform:scale(.2) rotate(-40deg)}60%{opacity:1;transform:scale(1.18) rotate(calc(var(--rot) + 6deg))}100%{opacity:1;transform:scale(1) rotate(var(--rot))}}
  @keyframes sway{0%,100%{transform:rotate(var(--rot))}50%{transform:rotate(calc(var(--rot) + 4deg))}}
  @keyframes ringfade{0%,100%{opacity:0}50%{opacity:1}}
  @keyframes spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-16deg) translateY(-3px) scale(1.12)}100%{transform:rotate(0) scale(1)}}
  .mock .pdf img{animation:rise .9s cubic-bezier(.2,.8,.2,1) var(--dl) backwards,float var(--fd) ease-in-out calc(var(--dl) + .9s) infinite}
  .mock .m1{--dl:.05s;--fd:7s}.mock .m2{--dl:.2s;--fd:8.5s}.mock .m3{--dl:.35s;--fd:6.5s}
  .mock .s1{animation:pop .7s cubic-bezier(.3,1.4,.5,1) .9s backwards,sway 5s ease-in-out 1.6s infinite}
  .mock .s2{animation:pop .7s cubic-bezier(.3,1.4,.5,1) 1.1s backwards,sway 6s ease-in-out 1.8s infinite}
  .feat .r2{animation:ringfade 7s ease-in-out infinite}
  .prem .r2{animation:ringfade 9s ease-in-out infinite}
}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*80ms)}
  [data-reveal].in{opacity:1;transform:none}
  .plan[data-reveal].in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .plan[data-reveal].in.done{transition:transform .18s ease-out,box-shadow .3s;transition-delay:0s}
  .ben li.done{transition:transform .3s ease-out,box-shadow .3s ease-out,border-color .3s;transition-delay:0s}
  .gal li.done{transition:none}
  .plan ul li{opacity:0;transform:translateX(-10px);transition:opacity .4s ease-out,transform .4s ease-out}
  .plan.in ul li{opacity:1;transform:none;transition-delay:calc(var(--j)*110ms + .45s + var(--i,0)*80ms)}
}
@media (hover:hover) and (pointer:fine){
  .gal:has(li:hover) li:not(:hover) .pair,.gal:has(li:hover) li:not(:hover) .nm{opacity:.5}
  .gal li:hover .pg1{transform:translateY(-10px) scale(1.06) rotate(-3deg);box-shadow:0 28px 42px -14px rgba(40,25,10,.55),0 0 0 1px rgba(0,0,0,.06);z-index:3}
  .gal li:hover .pg2{transform:translate(12%,3%) rotate(12deg)}
  .gal li:hover .nm::after{transform:scaleX(1)}
  .ben li:hover{transform:translateY(-7px);box-shadow:0 24px 38px -16px rgba(60,40,20,.38);border-color:#E3B88E}
  .ben li:hover .ico{animation:spin .6s cubic-bezier(.3,1.4,.5,1)}
  .chips li:hover{transform:scale(1.08) rotate(-2deg)}.chips li:nth-child(even):hover{transform:scale(1.08) rotate(2deg)}
  .plan:hover{box-shadow:0 26px 44px -18px rgba(60,40,20,.4)}
}
@media (hover:none){
  .gal li:active .pg1{transform:translateY(-6px) scale(1.04) rotate(-3deg);z-index:3}
  .gal li:active .pg2{transform:translate(8%,2%) rotate(9deg)}
  .ben li:active{transform:translateY(-3px);border-color:#E3B88E}
  .chips li:active{transform:scale(1.06)}
  .plan:active{transform:scale(.985)}
}
.plan .btn{padding:0 14px;text-align:center}
.hdr-r{display:flex;align-items:center;gap:6px}
.top .lnk{background:none;border:0;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;font:500 1rem var(--sans);text-decoration:none;color:inherit}
.top .lnk:hover{text-decoration:underline;text-underline-offset:5px}

.ai-note{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--ink);background:linear-gradient(120deg,var(--pink),var(--peach),var(--violet));font-weight:500}
.ai-note .ico{width:20px;height:20px}

.plan .cop{margin:0 0 4px;font-size:.9rem;color:var(--muted)}
.plan.prem .cop{color:#E4D9C3}

/* páginas legales */
.legal section{display:grid;gap:10px}.legal h2{font-size:1.35rem;margin-top:14px}.legal p,.legal li{line-height:1.6}.legal ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.legal .toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:28px;font-size:.95rem}.legal .toc a{display:inline-block;padding:2px 0;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.legal .toc ol{columns:1}.legal .toc a{padding:11px 0}}
mark.review,mark.pending{padding:1px 6px;border-radius:6px;font-weight:600;font-size:.85em;color:#1F1A17}mark.review{background:#FFD9A8}mark.pending{background:#CFE8FF}

/* Pantallas grandes: contenedor ancho con márgenes proporcionales; desde 1920 px la tipografía y los espacios (rem) escalan. */
html{font-size:clamp(100%,calc(.5vw + 6.4px),150%)}
:root{--w:67.5rem;--gx:20px}
.wrap,.top{max-width:var(--w);padding-left:var(--gx);padding-right:var(--gx)}
.cta{max-width:calc(var(--w) - 2*var(--gx))}
@media(min-width:1200px){
  :root{--w:78rem;--gx:clamp(24px,3.2vw,56px)}
  .sec{padding-top:clamp(56px,5vw,96px);padding-bottom:clamp(56px,5vw,96px)}
  .sec h2,.cta h2{font-size:clamp(2.6rem,3vw,3.6rem)}
  .lead{font-size:1.15rem}
  .top{padding-top:22px;padding-bottom:22px}
  .hero{grid-template-columns:1.08fr .92fr;gap:clamp(48px,5vw,100px);padding-top:clamp(56px,6vw,104px);padding-bottom:clamp(84px,8vw,140px)}
  .hero h1{font-size:clamp(4.4rem,4.5vw,6.4rem)}
  .sub{font-size:clamp(1.25rem,1.5vw,1.6rem);max-width:26em;margin-top:22px}
  .ctas{margin-top:34px}
  .mock{max-width:min(100%,36rem)}
  .steps{gap:26px;margin-top:40px}
  .steps li{padding:32px 30px 34px}
  .steps h3{font-size:1.45rem}
  .gal{grid-template-columns:repeat(6,1fr);gap:36px 24px;margin-top:40px}
  .who{grid-template-columns:.85fr 1.15fr;gap:clamp(48px,5vw,96px)}
  .ben{grid-template-columns:1fr 1fr;gap:20px}
  .ben li{padding:22px 22px}
  .plans{gap:24px;margin-top:44px}
  .plan{padding:32px 26px}
  .foot-in{padding-top:44px;padding-bottom:52px}
}
@media(min-width:1000px){
  .faq>div{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,96px);align-items:start;max-width:none;margin-top:36px}
  .faq details:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .faq p{max-width:none}
}
@media(min-width:1600px){:root{--w:85rem}}
.legal{max-width:760px}
.hero{overflow-x:clip}