/* ═══════════════════════════════════════════════════════════
   Postik — landing page
   Paleta tomada de los colores de papel reales de la app.
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper-yellow:#fdef8a;
  --paper-pink:#ffbecf;
  --paper-blue:#b0ddf3;
  --paper-green:#caeaaa;
  --paper-orange:#ffca8d;
  --paper-purple:#dbcaf3;
  --ink:#2b2410;
  --ink-soft:#6b6350;
  --bg:#fbf7ee;
  --bg-warm:#f4ecdb;
  --card:#fffdf7;
  --pin:#e02b2b;
  --pin-dark:#a01414;
  --line:#e7ddc6;
  --shadow:0 18px 40px -18px rgba(60,45,10,.35);
  --shadow-soft:0 8px 22px -12px rgba(60,45,10,.28);
  --hand:'Bradley Hand','Marker Felt','Comic Sans MS',cursive;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #fff6d6 0%, transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, #ffe9ef 0%, transparent 55%),
    var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ─── Botones ─── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:650;font-size:1rem;
  padding:.72rem 1.3rem;border-radius:999px;
  border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-soft)}
.btn--primary:hover{background:#000}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--pill{background:var(--paper-yellow);color:var(--ink);border-color:rgba(0,0,0,.06);padding:.5rem 1.1rem;box-shadow:var(--shadow-soft)}
.btn--lg{font-size:1.08rem;padding:.9rem 1.7rem}
.btn__free{background:#ffffff44;border:1px solid #ffffff55;font-size:.78rem;padding:.1rem .5rem;border-radius:999px;font-weight:700;letter-spacing:.03em}

/* ─── Nav ─── */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.5rem;
  padding:.8rem clamp(1rem,4vw,2.5rem);
  background:rgba(251,247,238,.82);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem}
.brand__icon{width:30px;height:30px;border-radius:8px;box-shadow:var(--shadow-soft)}
.nav__links{display:flex;gap:1.4rem;margin-left:1rem;font-weight:550;color:var(--ink-soft)}
.nav__links a:hover{color:var(--ink)}
.nav__right{display:flex;align-items:center;gap:.9rem;margin-left:auto}
.langswitch{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px;box-shadow:var(--shadow-soft)}
.langswitch button{white-space:nowrap;
  border:0;background:transparent;font:inherit;font-size:.82rem;font-weight:650;
  color:var(--ink-soft);padding:.28rem .6rem;border-radius:999px;cursor:pointer;
}
.langswitch button.is-active{background:var(--ink);color:#fff}

/* ─── Hero ─── */
.hero{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.5rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
.eyebrow{
  display:inline-block;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  font-size:.78rem;color:var(--pin-dark);
  background:#fff;border:1px solid var(--line);padding:.3rem .7rem;border-radius:999px;
  margin-bottom:1.1rem;box-shadow:var(--shadow-soft);
}
.hero h1{
  font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.08;font-weight:820;
  letter-spacing:-.02em;margin-bottom:1.1rem;
}
.hl{
  background:linear-gradient(180deg,transparent 62%,var(--paper-yellow) 62%);
  padding:0 .1em;border-radius:2px;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);max-width:34ch;margin-bottom:1.6rem}
.hero__cta{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.hero__meta{font-size:.85rem;color:var(--ink-soft)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chips li{
  font-size:.82rem;font-weight:600;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.32rem .8rem;
}
.chips li::before{content:"✓";color:#3a9d4e;font-weight:800;margin-right:.35rem}

/* ─── Capturas (marco tipo post-it con chinche) ─── */
.shot{
  position:relative;border-radius:16px;padding:12px;
  background:var(--card);box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.05);
  transform:rotate(-1.4deg);
  transition:transform .3s ease;
}
.shot:hover{transform:rotate(0deg) scale(1.015)}
.shot img{border-radius:9px;width:100%}
.shot::before{ /* chinche roja */
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #ff8a8a 0%, var(--pin) 45%, var(--pin-dark) 100%);
  box-shadow:0 4px 8px -2px rgba(120,10,10,.5), inset -1px -2px 3px rgba(0,0,0,.25);
  z-index:2;
}
.shot::after{ /* aguja */
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:3px;height:12px;background:linear-gradient(#c9c9c9,#7d7d7d);border-radius:2px;z-index:1;
}
.shot--hero{transform:rotate(1.6deg)}
.shot--yellow{background:var(--paper-yellow)}
.shot--pink{background:var(--paper-pink)}
.shot--blue{background:var(--paper-blue)}

/* ─── Features ─── */
#features{max-width:var(--maxw);margin:0 auto;padding:clamp(1rem,4vw,2rem) clamp(1rem,4vw,2.5rem)}
.feature{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);
  align-items:center;padding:clamp(2.5rem,6vw,4.5rem) 0;
}
.feature+.feature{border-top:1px dashed var(--line)}
.feature--reverse .feature__media{order:2}
.tag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;font-size:.9rem;color:var(--pin-dark);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.35rem .85rem;margin-bottom:1rem;box-shadow:var(--shadow-soft);
}
.tag img{width:18px;height:18px}
.feature__text h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.12;letter-spacing:-.015em;margin-bottom:.9rem;font-weight:800}
.feature__text p{font-size:1.08rem;color:var(--ink-soft);max-width:44ch}

/* ─── Concepto ─── */
.concept{
  max-width:var(--maxw);margin:1rem auto;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.3rem,4vw,3rem);
  text-align:center;
  background:linear-gradient(180deg,#fff 0%,var(--bg-warm) 100%);
  border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-soft);
}
.concept>h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:820;letter-spacing:-.02em;margin-bottom:.8rem}
.concept>p{font-size:1.12rem;color:var(--ink-soft);max-width:60ch;margin:0 auto 2.5rem}
.concept__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;text-align:left}
.mini{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.3rem}
.mini__ico{font-size:1.7rem;display:block;margin-bottom:.5rem}
.mini h3{font-size:1.02rem;margin-bottom:.3rem}
.mini p{font-size:.92rem;color:var(--ink-soft)}

/* ─── Pricing ─── */
.pricing{max-width:900px;margin:0 auto;padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2.5rem)}
.section-title{text-align:center;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:820;letter-spacing:-.02em;margin-bottom:2.2rem}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:stretch}
.plan{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:2rem 1.8rem;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);
}
.plan--support{
  position:relative;border:2px solid var(--ink);
  background:linear-gradient(180deg,#fffef9,#fff8e6);
  box-shadow:var(--shadow);
}
.plan__note{font-size:.86rem;color:var(--ink-soft);text-align:center;margin-top:.6rem}
.plan__badge{
  position:absolute;top:-13px;right:20px;
  background:var(--pin);color:#fff;font-size:.75rem;font-weight:700;
  padding:.28rem .75rem;border-radius:999px;box-shadow:var(--shadow-soft);
}
.plan h3{font-size:1.3rem;margin-bottom:.3rem}
.plan__price{font-size:2.2rem;font-weight:830;letter-spacing:-.02em;margin-bottom:1.1rem}
.plan__price span{font-size:.95rem;font-weight:600;color:var(--ink-soft)}
.plan ul{list-style:none;margin-bottom:1.6rem;flex:1}
.plan li{padding:.4rem 0 .4rem 1.6rem;position:relative;color:var(--ink-soft)}
.plan li::before{content:"✓";position:absolute;left:0;color:#3a9d4e;font-weight:800}
.plan .btn{width:100%;justify-content:center}

/* ─── Download ─── */
.download{padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) clamp(3rem,6vw,5rem)}
.download__card{
  max-width:620px;margin:0 auto;text-align:center;
  background:var(--paper-yellow);
  border-radius:28px;padding:clamp(2rem,5vw,3.2rem);
  box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);
  position:relative;
}
.download__icon{width:74px;height:74px;border-radius:16px;margin:0 auto 1rem;box-shadow:var(--shadow-soft)}
.download__card h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:820;margin-bottom:.3rem}
.download__ver{color:#7a6a2e;font-weight:600;margin-bottom:1.4rem}
.download__hint{font-size:.86rem;color:#7a6a2e;margin-top:1rem;max-width:40ch;margin-inline:auto}

/* ─── Footer ─── */
.foot{
  border-top:1px solid var(--line);text-align:center;
  padding:2.5rem 1rem;color:var(--ink-soft);
}
.foot__brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;color:var(--ink);margin-bottom:.5rem}
.foot__brand img{width:26px;height:26px;border-radius:7px}
.foot__copy{font-size:.85rem;margin-top:.4rem}

/* ─── Reveal on scroll ─── */
/* El ocultado SOLO se aplica con JS activo (clase .js en <html>): sin JS o si
   algo falla, el contenido se ve entero (bueno para SEO y accesibilidad). */
.reveal{transition:opacity .6s ease, transform .6s ease}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none}

/* ─── Responsive ─── */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero__cta{align-items:center}
  .lede{margin-inline:auto}
  .chips{justify-content:center}
  .hero__media{order:-1}
  .feature{grid-template-columns:1fr;gap:1.6rem}
  .feature--reverse .feature__media{order:0}
  .feature__text{text-align:center}
  .feature__text p{margin-inline:auto}
  .concept__grid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr}
  .nav__links{display:none}
}
@media (max-width:480px){
  .concept__grid{grid-template-columns:1fr}
  .langswitch button{padding:.28rem .45rem;font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .shot{transition:none}
}

/* ═══════════════════════════════════════════════════════════
   Tour interactivo (walkthrough por pasos con maqueta de Mac)
   ═══════════════════════════════════════════════════════════ */
.tour{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem)}
.tour__head{text-align:center;margin-bottom:2rem}
.tour__head .section-title{margin-bottom:.5rem}
.tour__sub{color:var(--ink-soft);font-size:1.05rem}
.tour__body{display:grid;grid-template-columns:270px 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}

/* Lista de pasos */
.tour__steps{list-style:none;display:flex;flex-direction:column;gap:.35rem;position:sticky;top:84px}
.tour__step{
  display:grid;grid-template-columns:30px 1fr;gap:.6rem;align-items:center;
  width:100%;text-align:left;font:inherit;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:14px;padding:.55rem .7rem;
  color:var(--ink-soft);transition:background .15s, color .15s, border-color .15s;
}
.tour__step:hover{background:#fff;border-color:var(--line)}
.tour__step[aria-selected="true"]{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-soft)}
.tour__step__n{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:.82rem;font-weight:800;background:var(--bg-warm);color:var(--ink-soft);
}
.tour__step[aria-selected="true"] .tour__step__n{background:var(--ink);color:#fff}
.tour__step.is-done .tour__step__n{background:var(--paper-green);color:#2b4a1c}
.tour__step__t{font-weight:650;font-size:.95rem;line-height:1.25}

/* Escenario */
.tour__stagewrap{min-width:0}
.stage{
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:12px;
  box-shadow:var(--shadow);
}
.mac{
  position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#dfe8f7 0%,#f3e3ef 45%,#fbe9d3 100%);
  font-size:clamp(9px,1.25vw,13px);
}
.mac__bar{
  position:absolute;inset:0 0 auto 0;height:2.2em;display:flex;align-items:center;gap:1.1em;
  padding:0 1.2em;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  font-weight:700;color:#222;z-index:5;
}
.mac__apple{width:1.1em;height:1.1em;border-radius:50%;background:#222;opacity:.85}
.mac__spacer{flex:1}
.mac__postik{font-size:1.15em;padding:.1em .3em;border-radius:.4em;transition:background .25s}
.stage[data-step="1"] .mac__postik,.stage[data-step="6"] .mac__postik,.stage[data-step="7"] .mac__postik{background:rgba(0,0,0,.14)}

/* Ventana de la app */
.mac__win{
  position:absolute;left:6%;top:14%;width:74%;height:80%;
  background:#fff;border-radius:.9em .9em 0 0;box-shadow:0 1.5em 3em -1.4em rgba(0,0,0,.45);
  overflow:hidden;transition:opacity .35s, filter .35s;
}
.mac__titlebar{height:2.4em;display:flex;align-items:center;gap:.5em;padding:0 .9em;background:#f1f1f3;border-bottom:1px solid #e2e2e6}
.tl{width:.9em;height:.9em;border-radius:50%}
.tl--r{background:#ff5f57}.tl--y{background:#febc2e}.tl--g{background:#28c840}
.mac__title{margin-left:auto;margin-right:auto;font-weight:600;color:#555;font-size:.95em;transition:opacity .2s}
.mac__content{display:flex;height:calc(100% - 2.4em)}
.mac__side{width:18%;background:#f7f7f9;border-right:1px solid #ececf0;padding:1.2em .8em;display:flex;flex-direction:column;gap:.9em}
.mac__side i{display:block;height:.7em;border-radius:.35em;background:#dcdce3;width:80%}
.mac__side i:nth-child(2){width:60%}.mac__side i:nth-child(4){width:70%}
.mac__doc{position:relative;flex:1;overflow:hidden;padding:1.6em 2.4em 0 2.2em}
.doc__scroll{display:flex;flex-direction:column;gap:1.05em;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.line{height:.78em;border-radius:.4em;background:#e4e6ec}
.w55{width:55%}.w60{width:60%}.w66{width:66%}.w70{width:70%}.w75{width:75%}.w80{width:80%}
.w85{width:85%}.w88{width:88%}.w90{width:90%}.w92{width:92%}.w94{width:94%}.w95{width:95%}
.line--target{background:#d9dde7;transition:background .3s, box-shadow .3s}
.stage[data-step="4"] .line--target,.stage[data-step="5"] .line--target{background:var(--paper-yellow);box-shadow:0 0 0 .35em #fdef8a66}
.mac__scrollbar{position:absolute;right:.35em;top:1em;bottom:1em;width:.5em;border-radius:.25em;background:#f0f0f3}
.mac__scrollbar span{position:absolute;left:0;right:0;top:4%;height:26%;border-radius:.25em;background:#c4c4cc;transition:top .9s cubic-bezier(.3,.7,.2,1)}
.stage[data-step="5"].is-scrolled .doc__scroll{transform:translateY(-58%)}
.stage[data-step="5"].is-scrolled .mac__scrollbar span{top:62%}
/* Paso 3: la app cambia → la nota fijada desaparece */
.stage[data-step="3"].is-switched .mac__win{filter:saturate(.6);opacity:.55}

/* Menú desplegable de Postik */
.m-menu{
  position:absolute;right:1.1em;top:2.5em;width:15em;background:rgba(255,255,255,.96);
  border:1px solid #e3e3e8;border-radius:.7em;box-shadow:0 1em 2.4em -1em rgba(0,0,0,.4);
  padding:.35em;z-index:6;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s, transform .25s;
}
.m-menu__item{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:.45em;font-size:.95em;color:#222}
.m-menu__item img{width:1.2em;height:1.2em}
.m-menu__sep{height:1px;background:#e8e8ec;margin:.3em .4em}
.stage[data-step="1"] .m-menu,.stage[data-step="6"] .m-menu,.stage[data-step="7"] .m-menu{opacity:1;transform:none}
.stage[data-step="1"] .m-menu__item:nth-child(1){background:var(--paper-yellow)}
.stage[data-step="6"] .m-menu__item:nth-child(5){background:var(--paper-yellow)}
.stage[data-step="7"] .m-menu__item:nth-child(6){background:var(--paper-yellow)}

/* Nota adhesiva */
.m-note{
  position:absolute;left:46%;top:30%;width:22%;aspect-ratio:1;
  background:var(--paper-yellow);border-radius:.25em;
  box-shadow:0 .9em 1.6em -.9em rgba(60,45,10,.6), 0 .2em .4em -.2em rgba(0,0,0,.3);
  transform:rotate(-2deg) scale(.6);opacity:0;transition:transform .4s cubic-bezier(.3,.8,.3,1.2), opacity .3s, left .6s, top .6s;
  padding:1.6em .9em .8em;font-family:var(--hand);color:var(--ink);z-index:4;
}
.m-note__text{font-size:1.15em;line-height:1.25}
.m-note__pin{
  position:absolute;top:-.5em;left:50%;transform:translateX(-50%) scale(0);width:1.3em;height:1.3em;border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #ff8a8a 0%, var(--pin) 45%, var(--pin-dark) 100%);
  box-shadow:0 .25em .4em -.1em rgba(120,10,10,.5);transition:transform .35s cubic-bezier(.3,.8,.3,1.4);
}
.m-note__tools{
  position:absolute;top:.3em;left:.5em;right:.5em;display:flex;justify-content:space-between;
  font-family:var(--sans);font-size:.75em;color:#6b6350;opacity:0;transition:opacity .3s;
}
.m-note__pinbtn{
  position:absolute;bottom:.55em;left:50%;transform:translateX(-50%);
  font:inherit;font-family:var(--sans);font-size:.72em;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:.25em .7em;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.stage[data-step="2"] .m-note--a,.stage[data-step="3"] .m-note--a,.stage[data-step="6"] .m-note--a{opacity:1;transform:rotate(-2deg) scale(1)}
.stage[data-step="2"] .m-note__tools{opacity:1}
.stage[data-step="3"] .m-note__pinbtn{opacity:1}
.stage[data-step="3"].is-pinned .m-note__pinbtn{opacity:0}
.stage[data-step="3"].is-pinned .m-note__pin,.stage[data-step="6"] .m-note__pin{transform:translateX(-50%) scale(1)}
.stage[data-step="3"].is-switched .m-note--a{opacity:0;transform:rotate(-2deg) scale(.9)}
/* Grupo (paso 6): las tres notas apiladas en cascada */
.m-note--b{background:var(--paper-pink);left:48%;top:33%;z-index:3}
.m-note--c{background:var(--paper-blue);left:50%;top:36%;z-index:2}
.stage[data-step="6"] .m-note--b,.stage[data-step="6"] .m-note--c{opacity:1;transform:rotate(1.5deg) scale(1)}
.stage[data-step="6"] .m-note--a{left:40%;top:26%}
.stage[data-step="6"] .m-note--b{left:43%;top:30%}
.stage[data-step="6"] .m-note--c{left:46%;top:34%}

/* Banderita */
.m-flag{
  position:absolute;left:58%;top:38.5%;display:flex;align-items:center;gap:.3em;z-index:4;
  opacity:0;transform:translateX(12px);transition:opacity .3s, transform .5s cubic-bezier(.3,.7,.2,1), left .6s, top .6s;
}
.m-flag__label{
  font-family:var(--hand);font-size:1.05em;background:#fff;border:1px solid var(--line);border-radius:.4em;padding:.15em .5em;color:var(--ink);
  transition:opacity .3s, width .3s;
}
.m-flag__tab{width:1.5em;height:1.5em;border-radius:.3em;background:#f25a8e;box-shadow:0 .3em .6em -.3em rgba(0,0,0,.5)}
.m-flag__btn{
  font:inherit;font-family:var(--sans);font-size:.72em;font-weight:700;color:#fff;background:var(--ink);
  border:0;border-radius:999px;padding:.3em .7em;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;
}
.stage[data-step="4"] .m-flag,.stage[data-step="5"] .m-flag{opacity:1;transform:none}
.stage[data-step="4"] .m-flag__btn{opacity:1}
.stage[data-step="4"].is-pinned .m-flag__btn{opacity:0}
/* Paso 5: al hacer scroll la banderita se acopla al borde derecho (riel) */
.stage[data-step="5"].is-scrolled .m-flag{left:auto;right:0;top:20%;left:calc(100% - 2.2em)}
.stage[data-step="5"].is-scrolled .m-flag__label{opacity:0}
.stage[data-step="5"].is-scrolled .m-flag__tab{animation:railpulse 1.4s ease-in-out infinite}
@keyframes railpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* Sticker */
.m-sticker{position:absolute;left:62%;top:52%;font-size:2.4em;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.25));opacity:0;transform:scale(.4) rotate(-20deg);transition:opacity .3s, transform .4s cubic-bezier(.3,.8,.3,1.3);z-index:4}
.stage[data-step="6"] .m-sticker{opacity:1;transform:scale(1) rotate(8deg)}

/* Atajos */
.m-keys{
  position:absolute;left:30%;top:30%;width:44%;background:rgba(255,255,255,.96);border:1px solid #e3e3e8;border-radius:.8em;
  padding:.9em 1em;box-shadow:0 1em 2.4em -1em rgba(0,0,0,.4);z-index:6;opacity:0;transform:translateY(8px);transition:opacity .3s, transform .3s;
  display:flex;flex-direction:column;gap:.55em;font-size:.95em;color:#222;
}
.m-keys__row{display:flex;align-items:center;gap:.3em}
.m-keys__row span{margin-left:.5em;color:#555}
.m-keys kbd{font:inherit;font-size:.9em;font-weight:700;background:#f3f3f6;border:1px solid #d9d9df;border-bottom-width:2px;border-radius:.35em;padding:.1em .45em;min-width:1.8em;text-align:center}
.stage[data-step="7"] .m-keys{opacity:1;transform:none}

/* Permisos */
.m-perm{
  position:absolute;left:24%;top:24%;width:52%;background:rgba(255,255,255,.97);border:1px solid #e3e3e8;border-radius:.9em;
  padding:1em 1.1em;box-shadow:0 1em 2.4em -1em rgba(0,0,0,.4);z-index:6;opacity:0;transform:scale(.96);transition:opacity .3s, transform .3s;
  font-size:.95em;color:#222;display:flex;flex-direction:column;gap:.6em;
}
.m-perm__title{font-weight:800;margin-bottom:.2em}
.m-perm__row{display:grid;grid-template-columns:auto auto 1fr;gap:.5em;align-items:center}
.m-perm__row b{font-weight:700}
.m-perm__row small{color:#666;font-size:.85em;text-align:right}
.m-perm__sw{width:2.2em;height:1.25em;border-radius:1em;background:#34c759;position:relative}
.m-perm__sw::after{content:"";position:absolute;top:.12em;right:.12em;width:1em;height:1em;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.m-perm__sw--off{background:#d1d1d6}.m-perm__sw--off::after{right:auto;left:.12em}
.stage[data-step="8"] .m-perm{opacity:1;transform:none}
.stage[data-step="8"] .mac__win{filter:saturate(.7);opacity:.6}

/* Coach mark: anillo pulsante que señala el elemento del paso */
.coach{position:absolute;width:3em;height:3em;pointer-events:none;z-index:7;opacity:0;transition:left .5s, top .5s, opacity .3s}
.coach__ring{position:absolute;inset:0;border-radius:50%;border:.22em solid var(--pin);animation:coach 1.6s ease-out infinite}
@keyframes coach{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
.stage[data-step="1"] .coach{opacity:1;left:calc(100% - 3.9em);top:-.3em}
.stage[data-step="2"] .coach{opacity:1;left:55%;top:38%}
.stage[data-step="3"] .coach{opacity:1;left:55.5%;top:46%}
.stage[data-step="3"].is-pinned .coach{left:55.5%;top:28%}
.stage[data-step="4"] .coach{opacity:1;left:65%;top:36.5%}
.stage[data-step="5"] .coach{opacity:0}
.stage[data-step="5"].is-scrolled .coach{opacity:1;left:calc(100% - 3.1em);top:18.5%}
.stage[data-step="6"] .coach{opacity:1;left:63%;top:50%}
.stage[data-step="7"] .coach{opacity:1;left:calc(100% - 3.9em);top:-.3em}
.stage[data-step="8"] .coach{opacity:1;left:30%;top:36%}

/* Texto del paso, controles y progreso */
.tour__caption{margin-top:1.1rem;min-height:5.5rem}
.tour__num{font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--pin-dark);margin-bottom:.2rem}
.tour__caption h3{font-size:1.25rem;font-weight:800;margin-bottom:.3rem;letter-spacing:-.01em}
.tour__caption p{color:var(--ink-soft);max-width:62ch}
.tour__controls{display:flex;align-items:center;gap:.8rem;margin-top:1rem}
.tour__btn{
  font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;
  background:#fff;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:.55rem 1.1rem;
  transition:transform .15s, background .15s, color .15s;
}
.tour__btn:hover{transform:translateY(-1px)}
.tour__btn:disabled{opacity:.35;cursor:default;transform:none}
.tour__btn--primary{background:var(--ink);color:#fff}
.tour__btn--icon{padding:.55rem .8rem;font-size:.8rem;letter-spacing:-.1em}
.tour__btn--icon[aria-pressed="false"]{letter-spacing:0}
.tour__dots{display:flex;gap:.4rem;margin-left:auto;margin-right:auto}
.tour__dots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--line);transition:background .2s, transform .2s}
.tour__dots i.is-on{background:var(--ink);transform:scale(1.3)}
.tour__progress{height:3px;background:var(--line);border-radius:2px;margin-top:.8rem;overflow:hidden}
.tour__progress span{display:block;height:100%;width:0;background:var(--pin);transition:width .2s linear}
.hero__tour{margin-top:.6rem;font-size:.95rem;padding:.55rem 1.1rem}

@media (max-width:860px){
  .tour__body{grid-template-columns:1fr}
  .tour__steps{position:static;flex-direction:row;overflow-x:auto;gap:.4rem;padding-bottom:.4rem;scrollbar-width:thin}
  .tour__step{grid-template-columns:26px auto;flex:0 0 auto;padding:.4rem .6rem}
  .tour__step__t{font-size:.86rem;white-space:nowrap}
  .tour__step__n{width:26px;height:26px;font-size:.76rem}
  .tour__caption{min-height:0}
  .hero__tour{margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .coach__ring{animation:none;opacity:.9}
  .m-flag__tab{animation:none !important}
  .doc__scroll,.mac__scrollbar span,.m-note,.m-flag,.m-sticker,.m-menu,.m-keys,.m-perm,.coach{transition:none}
}


/* ─── Contacto ─── */
.contact{
  max-width:720px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem) clamp(3rem,6vw,5rem);
  text-align:center;
}
.contact h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:820;letter-spacing:-.015em;margin-bottom:.4rem}
.contact p{color:var(--ink-soft);margin-bottom:1.1rem}
.foot__links{font-size:.9rem;margin-top:.5rem}
.foot__links a{color:var(--ink);font-weight:600}
.foot__links a:hover{text-decoration:underline}

/* ─── Modal "invítame a un café" ─── */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(43,36,16,.45);backdrop-filter:blur(3px)}
.modal__card{
  position:relative;width:min(520px,100%);text-align:center;
  background:var(--paper-yellow);border-radius:24px;padding:2.2rem 1.8rem 1.6rem;
  box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);
  animation:modal-in .28s cubic-bezier(.3,.8,.3,1.2);
}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal__x{
  position:absolute;top:.6rem;right:.8rem;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:1.6rem;line-height:1;color:var(--ink-soft);padding:.2rem .4rem;
}
.modal__cup{display:block;font-size:2.6rem;margin-bottom:.4rem}
.modal__card h3{font-size:1.45rem;font-weight:820;letter-spacing:-.015em;margin-bottom:.6rem}
.modal__card p{color:#5e5430;max-width:42ch;margin-inline:auto}
.modal__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.3rem 0 .9rem}
.modal__hint{font-size:.84rem;color:#7a6a2e}
.modal__hint a{text-decoration:underline}
body.modal-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.modal__card{animation:none}}


/* ─── Vídeos de demostración + pasos sincronizados ─── */
.shot video.demo-video{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:9px;background:#fbf7ee;object-fit:contain}
.demo-steps{list-style:none;counter-reset:demo;margin-top:1.1rem;display:flex;flex-direction:column;gap:.3rem;max-width:44ch}
.demo-steps li{
  counter-increment:demo;position:relative;padding:.38rem .6rem .38rem 2.35rem;border-radius:10px;
  color:var(--ink-soft);font-size:.97rem;line-height:1.35;transition:background .2s, color .2s;
}
.demo-steps li::before{
  content:counter(demo);position:absolute;left:.45rem;top:50%;transform:translateY(-50%);
  width:1.45rem;height:1.45rem;border-radius:50%;display:grid;place-items:center;
  font-size:.78rem;font-weight:800;background:var(--bg-warm);color:var(--ink-soft);transition:background .2s,color .2s;
}
.demo-steps.is-live li{cursor:pointer}
.demo-steps.is-live li:hover{background:#fff}
.demo-steps li.is-current{background:#fff;color:var(--ink);font-weight:650;box-shadow:var(--shadow-soft)}
.demo-steps li.is-current::before{background:var(--pin);color:#fff}
.demo-steps li.is-done::before{background:var(--paper-green);color:#2b4a1c}
.demo-steps li:focus-visible{outline:2px solid var(--pin);outline-offset:2px}
@media (max-width:860px){ .demo-steps{margin-inline:auto;text-align:left} }