/* ═══════════════════════════════════════════════════════════
   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}
/* Títulos en líneas equilibradas; en japonés, sin partir palabras */
.feature__text h2,.section-title,.concept>h2{text-wrap:balance}
:lang(ja) .feature__text h2,:lang(ja) .section-title,:lang(ja) .concept>h2{word-break:auto-phrase}

/* ─── Concepto ─── */
.concept{
  width:min(var(--maxw), calc(100% - 2rem));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}
/* «Y hay más»: nueve funciones en una cuadrícula de 3 × 3 */
.more__grid{grid-template-columns:repeat(3,1fr)}
.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: una tarjeta por sistema; la del visitante, en amarillo ─── */
.download{padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) clamp(3rem,6vw,5rem)}
.download__head{max-width:640px;margin:0 auto 1.8rem;text-align:center}
.download__icon{width:74px;height:74px;border-radius:16px;margin:0 auto 1rem;box-shadow:var(--shadow-soft)}
.download__head h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:820;margin-bottom:.3rem}
.download__sub{color:var(--ink-soft)}
.dlgrid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:stretch;
}
.dlcard{
  display:flex;flex-direction:column;gap:.75rem;
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:1.4rem 1.3rem 1.3rem;box-shadow:var(--shadow-soft);
}
.dlcard.is-yours{background:var(--paper-yellow);border-color:rgba(0,0,0,.08);box-shadow:var(--shadow)}
.dlcard__top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dlcard__os{font-size:1.25rem;font-weight:820;letter-spacing:-.01em;margin-right:auto}
.dlcard__tag{
  font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:.2rem .55rem;background:var(--bg-warm);color:var(--ink-soft);
}
.dlcard.is-yours .dlcard__tag{background:#fff8c4}
.dlcard__tag--yours{display:none}
.dlcard.is-yours .dlcard__tag--yours{display:inline-block;background:var(--ink);color:#fff}
.dlcard__ver{color:var(--ink-soft);font-weight:600;font-size:.92rem}
.dlcard.is-yours .dlcard__ver,.dlcard.is-yours .dlcard__hint,.dlcard.is-yours .dlcard__sha{color:#7a6a2e}
.dlcard .btn{width:100%;justify-content:center;text-align:center;white-space:normal}
/* Con el sistema detectado, los otros botones pasan a segundo plano. */
.dlgrid.has-yours .dlcard:not(.is-yours) .btn{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.dlgrid.has-yours .dlcard:not(.is-yours) .btn:hover{background:var(--ink);color:#fff}
.dlcard__hint{font-size:.84rem;color:var(--ink-soft);line-height:1.5;overflow-wrap:anywhere}
.dlcard__sha{margin-top:auto;font-size:.75rem;color:var(--ink-soft)}
.dlcard__sha summary{cursor:pointer;width:max-content}
.dlcard__sha code{display:block;margin-top:.35rem;word-break:break-all;font-size:.72rem}
/* Código de acceso a las descargas */
.dlgate{max-width:560px;margin:0 auto 1.4rem;text-align:center}
.dlgate__lead{color:var(--ink-soft);margin-bottom:.8rem}
.dlgate__form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.dlgate__form[hidden]{display:none}
.dlgate__form input{
  flex:1 1 14rem;max-width:20rem;font:inherit;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.72rem 1rem;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);
}
.dlgate__form input::placeholder{text-transform:none;letter-spacing:normal}
.dlgate__form input:focus{outline:2px solid var(--pin);outline-offset:1px;border-color:transparent}
.dlgate__msg{font-size:.95rem;min-height:1.4rem;margin-top:.6rem}
.dlgate__msg.is-error{color:var(--pin-dark);font-weight:600}
.dlgate__msg.is-ok{color:#2b6b39;font-weight:650}
.dlgate.is-open .dlgate__lead{display:none}
/* Bloqueadas: los botones se ven, con candado, y llevan al formulario */
.dlgrid.is-locked .dlcard .btn{opacity:.6}
.dlgrid.is-locked .dlcard .btn::before{content:"🔒";font-size:.9em}
/* Aviso de privacidad y cookies */
.notice{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:60;
  width:min(680px, calc(100% - 2rem));
  display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:.85rem 1rem;box-shadow:var(--shadow);font-size:.9rem;color:var(--ink-soft);
}
.notice[hidden]{display:none}
.notice p{flex:1 1 20rem;margin:0;line-height:1.45}
.notice__actions{display:flex;align-items:center;gap:.9rem;margin-left:auto}
.notice__actions a{text-decoration:underline;text-underline-offset:3px;color:var(--ink);font-weight:600}
.notice .btn{padding:.5rem 1.1rem;font-size:.95rem}
.hero__other{font-size:.9rem;font-weight:600;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.hero__other:hover{color:var(--ink)}
@media (max-width:900px){
  .dlgrid{grid-template-columns:1fr;max-width:560px}
  .dlcard.is-yours{order:-1}
}

/* ─── 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}
  .more__grid .mini:last-child:nth-child(odd){grid-column:1 / -1}
  .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}
  /* En japonés «ダウンロード» es ancho: sin esto el selector pisa el nombre. */
  .nav{gap:.8rem}
  .nav__right{gap:.5rem}
  .nav .btn--pill{padding:.45rem .8rem;font-size:.92rem}
}
@media (max-width:370px){
  .brand__name{display:none}   /* el icono basta: si no, no cabe todo */
}
@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="7"] .mac__postik,.stage[data-step="8"] .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{position:relative;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="5"] .line--target,.stage[data-step="6"] .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="6"].is-scrolled .doc__scroll{transform:translateY(-58%)}
.stage[data-step="6"].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="7"] .m-menu,.stage[data-step="8"] .m-menu{opacity:1;transform:none}
.stage[data-step="1"] .m-menu__item:nth-child(1){background:var(--paper-yellow)}
.stage[data-step="7"] .m-menu__item:nth-child(5){background:var(--paper-yellow)}
.stage[data-step="8"] .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="4"] .m-note--a,.stage[data-step="7"] .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="4"] .m-note__pin,.stage[data-step="7"] .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 7): 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="7"] .m-note--b,.stage[data-step="7"] .m-note--c{opacity:1;transform:rotate(1.5deg) scale(1)}
.stage[data-step="7"] .m-note--a{left:40%;top:26%}
.stage[data-step="7"] .m-note--b{left:43%;top:30%}
.stage[data-step="7"] .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="5"] .m-flag,.stage[data-step="6"] .m-flag{opacity:1;transform:none}
.stage[data-step="5"] .m-flag__btn{opacity:1}
.stage[data-step="5"].is-pinned .m-flag__btn{opacity:0}
/* Paso 6: al hacer scroll la banderita se acopla al borde derecho (riel) */
.stage[data-step="6"].is-scrolled .m-flag{left:auto;right:0;top:20%;left:calc(100% - 2.2em)}
.stage[data-step="6"].is-scrolled .m-flag__label{opacity:0}
.stage[data-step="6"].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="7"] .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="8"] .m-keys{opacity:1;transform:none}

/* Paso 4: el navegador. Pestañas en la barra de título; la segunda es otra
   página y la nota fijada a la primera se aparta mientras está abierta. */
.m-tabs{
  position:absolute;left:5em;right:1em;top:0;bottom:0;display:flex;align-items:flex-end;gap:.25em;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.m-tab{
  min-width:0;max-width:40%;padding:.4em .9em;border-radius:.55em .55em 0 0;background:#e3e3e8;color:#777;
  font-size:.85em;font-weight:600;transition:background .25s, color .25s, box-shadow .25s;
}
.m-tab span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage[data-step="4"] .m-tabs{opacity:1}
.stage[data-step="4"] .mac__title{opacity:0}
.stage[data-step="4"] .m-tab--a,.stage[data-step="4"].is-tab2 .m-tab--b{background:#fff;color:#222}
.stage[data-step="4"].is-tab2 .m-tab--a{background:#e3e3e8;color:#777}
.stage[data-step="4"]:not(.is-tab2) .m-tab--b,.stage[data-step="4"].is-tab2 .m-tab--a{animation:tabpulse 1.6s ease-out infinite}
@keyframes tabpulse{0%{box-shadow:0 0 0 0 rgba(224,43,43,.55)}100%{box-shadow:0 0 0 .7em rgba(224,43,43,0)}}
.m-page2{
  position:absolute;inset:0;padding:1.6em 2.4em 0 2.2em;background:#fff;
  display:flex;flex-direction:column;gap:1.05em;opacity:0;transition:opacity .3s;pointer-events:none;
}
.m-page2__hero{height:6em;flex:none;border-radius:.8em;background:linear-gradient(135deg,#ffe3a3,#ffb86b);display:grid;place-items:center}
.m-page2__hero span{font-size:2.6em;line-height:1}
.stage[data-step="4"].is-tab2 .m-page2{opacity:1}
.stage[data-step="4"].is-tab2 .m-note--a{opacity:0;transform:rotate(-2deg) scale(.9)}

/* 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="5"] .coach{opacity:1;left:65%;top:36.5%}
.stage[data-step="6"] .coach{opacity:0}
.stage[data-step="6"].is-scrolled .coach{opacity:1;left:calc(100% - 3.1em);top:18.5%}
.stage[data-step="7"] .coach{opacity:1;left:63%;top:50%}
.stage[data-step="8"] .coach{opacity:1;left:calc(100% - 3.9em);top:-.3em}

/* 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)}
/* En un móvil los puntos no caben junto a «Siguiente →» (en español la fila se
   salía de la pantalla): el número del paso ya dice dónde estás. */
@media (max-width:480px){
  .tour__dots{display:none}
  .tour__btn--icon{margin-left:auto}
}
.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}
.tour__more{display:inline-block;margin-top:1rem;font-weight:650;color:var(--pin-dark);border-bottom:2px solid var(--paper-yellow)}
.tour__more:hover{border-bottom-color:var(--pin)}
.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-tabs,.m-tab,.m-page2,.coach{transition:none}
  .m-tab{animation:none !important}
}


/* ─── 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}}

/* ─── Aviso del código de descarga (salta al pedir una descarga sin código) ─── */
.codeform{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1.3rem 0 .5rem}
.codeform input{
  flex:1 1 12rem;max-width:19rem;font:inherit;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.8rem 1rem;border-radius:14px;border:1.5px solid rgba(0,0,0,.14);background:#fff;color:var(--ink);
}
.codeform input::placeholder{text-transform:none;letter-spacing:normal}
.codeform input:focus{outline:2px solid var(--pin);outline-offset:1px;border-color:transparent}
.codeform .btn{justify-content:center}
.codeform .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.codeform.is-shake{animation:codeshake .4s}
@keyframes codeshake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.modal__card p.codeform__msg{min-height:1.5rem;font-size:.95rem;margin:.2rem auto .6rem}
.modal__card p.codeform__msg.is-error{color:var(--pin-dark);font-weight:650}
.modal__card p.codeform__msg.is-ok{color:#2b6b39;font-weight:650}
@media (max-width:480px){
  .codeform input,.codeform .btn{flex:1 1 100%;max-width:none}
}
@media (prefers-reduced-motion:reduce){.codeform.is-shake{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} }


/* ═══════════════════════════════════════════════════════════
   Navegador: maqueta animada de una nota fijada a una pestaña
   Todo va en em sobre un tamaño de letra proporcional al marco (cqw), así
   la maqueta escala entera, como un vídeo. data-phase = paso de la lista.
   ═══════════════════════════════════════════════════════════ */
.shot--green{background:var(--paper-green)}
.bdemo{
  position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;container-type:inline-size;
  background:linear-gradient(160deg,#f0f1f4 0%,#e3e5ea 100%);
}
.bdemo__in{position:absolute;inset:0;font-size:clamp(6px,.74vw,9.5px);font-size:1.9cqw;line-height:1.35;color:#202124}
.bwin{
  position:absolute;left:3.2em;right:3.2em;top:2.2em;bottom:-1.2em;display:flex;flex-direction:column;
  background:#fff;border-radius:.9em .9em 0 0;
  box-shadow:0 1.4em 3em -1.2em rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);
}
.bwin__tabs{
  height:2.8em;flex:none;display:flex;align-items:flex-end;gap:.2em;padding:0 .9em;
  background:#e2e4e8;border-radius:.9em .9em 0 0;
}
.bwin__lights{display:flex;gap:.45em;align-self:center;margin-right:.9em}
.bwin__lights .tl{width:.8em;height:.8em}
.btab{
  position:relative;flex:0 1 13em;min-width:0;height:2.15em;display:flex;align-items:center;gap:.45em;
  padding:0 .9em;border-radius:.6em .6em 0 0;color:#5f6368;font-size:.95em;transition:background .25s, color .25s;
}
.btab__ico{flex:none}
.btab__t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btab--a{background:#fff;color:#202124}
.btab__plus{align-self:center;color:#5f6368;font-size:1.2em;margin-left:.3em}
.bwin__nav{height:2.6em;flex:none;display:flex;align-items:center;gap:.9em;padding:0 1em;border-bottom:1px solid #eceef1}
.bwin__arrows{color:#9aa0a6;font-size:1.2em;letter-spacing:.3em;white-space:nowrap}
.bwin__url{flex:1;height:1.75em;display:flex;align-items:center;gap:.6em;padding:0 .9em;border-radius:1em;background:#f1f3f4}
.bwin__lock{font-size:.75em;opacity:.7}
.bwin__addr{height:.55em;width:44%;border-radius:.3em;background:#cfd3d8;transition:width .35s}
.bwin__view{position:relative;flex:1;overflow:hidden}
.bpage{position:absolute;inset:0;padding:1.5em 2.2em;transition:opacity .35s}
.bpage--b{opacity:0}
.bpage__h{font-size:2em;font-weight:800;letter-spacing:-.02em;line-height:1.1;max-width:62%}
.bpage__meta{color:#70757a;margin-top:.35em}
.bpage__photo{
  position:absolute;top:1.5em;right:2.2em;width:31%;height:8.2em;border-radius:.8em;
  background:linear-gradient(135deg,#ffe3a3,#ffb86b);display:grid;place-items:center;
}
.bpage__photo span{font-size:3.4em;line-height:1}
.bpage__sub{font-weight:700;margin:1.1em 0 .45em}
.bpage__list{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:.3em}
.bpage__list li{position:relative;padding:.12em .45em;margin-left:-.45em;border-radius:.35em;color:#3c4043;white-space:nowrap;transition:background .3s, box-shadow .3s}
.bpage__list li::before{content:"•";color:#b0b5bb;margin-right:.5em}
.bpage .line{margin-top:.95em}
.bpage__search{display:flex;gap:.6em;align-items:center;margin:.9em 0 1em}
.bpage__search span{height:2em;flex:1;border-radius:.5em;border:1px solid #dadce0}
.bpage__search b{height:2em;width:3.2em;border-radius:.5em;background:#2f7cf6;color:#fff;display:grid;place-items:center}
.bpage__flights{list-style:none;display:flex;flex-direction:column;gap:.55em}
.bpage__flights li{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.7em 1em;border:1px solid #e3e5e8;border-radius:.6em}
.bpage__flights sup{font-size:.7em;color:#70757a;margin-left:.1em}
.bpage__flights span{color:#5f6368;white-space:nowrap}
/* La nota adhesiva (fijada a la primera pestaña) */
.bnote{
  position:absolute;left:61%;top:51%;width:26%;aspect-ratio:1/.92;z-index:3;
  background:var(--paper-yellow);border-radius:.3em;padding:1.9em 1em 1em;font-family:var(--hand);color:var(--ink);
  box-shadow:0 1em 1.8em -1em rgba(60,45,10,.6),0 .2em .4em -.2em rgba(0,0,0,.3);
  opacity:0;transform:rotate(-2deg) scale(.6);transition:opacity .3s, transform .4s cubic-bezier(.3,.8,.3,1.2);
}
.bnote__text{font-size:1.45em;line-height:1.2}
.bnote__pin{
  position:absolute;top:-.6em;left:50%;width:1.5em;height:1.5em;margin-left:-.75em;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);transform:scale(0);transition:transform .35s cubic-bezier(.3,.8,.3,1.4);
}
.bnote__btn{
  position:absolute;bottom:.8em;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--sans);font-size:.85em;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:.3em .8em;
  opacity:0;transition:opacity .3s;
}
/* La banderita (paso 5), junto a su línea */
.bflag{
  position:absolute;left:100%;top:50%;margin-left:1.3em;display:flex;align-items:center;gap:.4em;
  opacity:0;transform:translate(1.2em,-50%);transition:opacity .3s, transform .45s cubic-bezier(.3,.7,.2,1);
}
.bflag__label{
  font-family:var(--hand);font-size:1.15em;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:.4em;padding:.1em .5em;box-shadow:0 .3em .6em -.4em rgba(0,0,0,.35);
}
.bflag__tab{position:relative;width:1.5em;height:1.5em;border-radius:.3em;background:#f25a8e;box-shadow:0 .3em .6em -.3em rgba(0,0,0,.5)}
/* Fases: 1 página · 2 fijar · 3 otra pestaña · 4 volver · 5 banderita */
.bdemo[data-phase="3"] .btab--a{background:transparent;color:#5f6368}
.bdemo[data-phase="3"] .btab--b{background:#fff;color:#202124}
.bdemo[data-phase="3"] .bwin__addr{width:30%}
.bdemo[data-phase="3"] .bpage--a{opacity:0}
.bdemo[data-phase="3"] .bpage--b{opacity:1}
.bdemo[data-phase="2"] .bnote,.bdemo[data-phase="4"] .bnote,.bdemo[data-phase="5"] .bnote{opacity:1;transform:rotate(-2deg) scale(1)}
.bdemo[data-phase="3"] .bnote{opacity:0;transform:rotate(-2deg) scale(.92)}
.bdemo[data-phase="2"]:not(.is-pinned) .bnote__btn{opacity:1}
.bdemo.is-pinned .bnote__pin,.bdemo[data-phase="3"] .bnote__pin,
.bdemo[data-phase="4"] .bnote__pin,.bdemo[data-phase="5"] .bnote__pin{transform:scale(1)}
.bdemo[data-phase="5"] .bflag{opacity:1;transform:translate(0,-50%)}
.bdemo[data-phase="5"] .bpage__target{background:var(--paper-yellow);box-shadow:0 0 0 .3em rgba(253,239,138,.6)}
/* Anillo guía sobre lo que se pulsa en cada fase (como en el tour) */
.btab::after,.bnote__btn::after,.bnote__pin::after,.bflag__tab::after{
  content:"";position:absolute;left:50%;top:50%;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;
  border-radius:50%;border:.2em solid var(--pin);opacity:0;pointer-events:none;
}
.bdemo[data-phase="1"] .btab--a::after,
.bdemo[data-phase="2"]:not(.is-pinned) .bnote__btn::after,
.bdemo[data-phase="2"].is-pinned .bnote__pin::after,
.bdemo[data-phase="3"] .btab--b::after,
.bdemo[data-phase="4"] .btab--a::after,
.bdemo[data-phase="5"] .bflag__tab::after{animation:coach 1.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){
  .bdemo *,.bdemo *::after{transition:none !important;animation:none !important}
}


/* ═══════════════════════════════════════════════════════════
   Mapeo de apps (nuevo en 1.3): la captura de ejemplo con sus zonas
   ═══════════════════════════════════════════════════════════ */
:root{
  --z-list:#2f7cf6; --z-title:#f08a00; --z-content:#2ea44f; --z-scroll:#9b51e0;
}
.shot--purple{background:var(--paper-purple)}
.mapping{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem)}
.mapping__head{text-align:center;margin-bottom:2.2rem}
.mapping__head .section-title{margin-bottom:.6rem}
.mapping__sub{color:var(--ink-soft);font-size:1.08rem;max-width:66ch;margin:0 auto}
.mapping__body{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.mapping__shot{transform:rotate(-.8deg)}
.mapping__shot:hover{transform:rotate(0deg)}

/* La captura y sus zonas: todo en % del marco para que escale con la imagen */
.mapfig{margin:0}
.mapfig__frame{position:relative;border-radius:9px;overflow:hidden;line-height:0}
.mapfig__frame img{width:100%;height:auto;border-radius:9px}
.mz,.mz-row{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  border-radius:4px;transition:opacity .3s, box-shadow .3s, background .3s;
}
.mz{border:2px dashed var(--c);background:color-mix(in srgb, var(--c) 10%, transparent);opacity:.55;cursor:pointer}
.mz--scroll{z-index:2}
.mz--list{--c:var(--z-list)}
.mz--title{--c:var(--z-title)}
.mz--content{--c:var(--z-content)}
.mz--scroll{--c:var(--z-scroll);min-width:6px}
.mz__tag{
  position:absolute;left:4px;top:4px;line-height:1.2;white-space:nowrap;z-index:2;
  font-size:clamp(9px,1.05vw,12px);font-weight:750;color:#fff;background:var(--c);
  padding:.18em .5em;border-radius:4px;box-shadow:0 2px 6px -2px rgba(0,0,0,.35);
}
.mz--scroll .mz__tag{left:auto;right:6px;top:4px}
/* Etiquetas donde no tapan lo que se explica (la fila resaltada, la cabecera) */
.mz--title .mz__tag{top:calc(100% + 4px);left:0}
.mz--list .mz__tag{top:auto;bottom:4px}
.mz--content .mz__tag{top:auto;bottom:4px}
.mz__x{display:none}
/* Zona elegida: trazo continuo, relleno y asas (esquinas y bordes) */
.mapfig[data-zone="list"] .mz--list,
.mapfig[data-zone="title"] .mz--title,
.mapfig[data-zone="content"] .mz--content,
.mapfig[data-zone="scroll"] .mz--scroll{
  opacity:1;border-style:solid;background:color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow:0 0 0 1px #fff inset;z-index:3;
}
.mz__h{
  position:absolute;width:9px;height:9px;margin:-5px 0 0 -5px;background:#fff;border:1.5px solid var(--c);
  border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);opacity:0;transition:opacity .25s;
}
.mapfig[data-zone="list"] .mz--list .mz__h,
.mapfig[data-zone="title"] .mz--title .mz__h,
.mapfig[data-zone="content"] .mz--content .mz__h,
.mapfig[data-zone="scroll"] .mz--scroll .mz__h{opacity:1}
/* «Nombre del chat»: aquí la cabecera muestra el modelo → la zona se quita */
.mapfig[data-zone="title"] .mz--title{background:repeating-linear-gradient(135deg,color-mix(in srgb, var(--z-title) 22%, transparent) 0 6px,transparent 6px 12px)}
.mapfig[data-zone="title"] .mz__x{
  display:grid;place-items:center;position:absolute;right:-11px;top:-11px;width:22px;height:22px;border-radius:50%;
  background:var(--pin);color:#fff;font-size:12px;font-weight:900;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.35);
  animation:mzpop .35s cubic-bezier(.3,.8,.3,1.4);
}
@keyframes mzpop{from{transform:scale(0)}to{transform:scale(1)}}
/* Fila resaltada = chat abierto (lo que usa Postik si no hay zona naranja) */
.mz-row{border:2px solid var(--z-list);border-radius:8px;opacity:0;box-shadow:0 0 0 4px color-mix(in srgb, var(--z-list) 25%, transparent)}
.mapfig[data-zone="title"] .mz-row,.mapfig[data-zone="list"] .mz-row{opacity:1;animation:mzpulse 1.6s ease-in-out infinite}
@keyframes mzpulse{50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--z-list) 12%, transparent)}}

/* Resultado de «Probar» bajo la captura */
.mapfig__status{
  margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;
  font-size:.9rem;line-height:1.45;color:var(--ink);display:flex;flex-direction:column;gap:.1rem
}
.mapfig__status span{white-space:normal}
.mapfig__status b{color:#2b7a3d}

/* Botones de zona */
.mapping__chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem;justify-content:center}
.mchip{
  font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;
  background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:.4rem .85rem;
  transition:background .15s, border-color .15s, color .15s, transform .15s;
}
.mchip:hover{transform:translateY(-1px)}
.mchip i{width:.7rem;height:.7rem;border-radius:50%;background:var(--c)}
.mchip--list{--c:var(--z-list)}.mchip--title{--c:var(--z-title)}.mchip--content{--c:var(--z-content)}.mchip--scroll{--c:var(--z-scroll)}
.mchip[aria-selected="true"]{background:var(--c);border-color:var(--c);color:#fff}
.mchip[aria-selected="true"] i{background:#fff}
.mchip:focus-visible{outline:2px solid var(--pin);outline-offset:2px}

/* Texto de la zona y pasos */
.mapping__lead{color:var(--ink-soft);font-size:1.02rem;margin-bottom:1rem}
.mapping__lead b{color:var(--ink)}
.mapping__zone{
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--zc, var(--z-list));
  border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--shadow-soft);min-height:7.5rem;
}
.mapping__zone h3{font-size:1.15rem;font-weight:800;margin-bottom:.3rem}
.mapping__zone p{color:var(--ink-soft);font-size:.98rem}
.mapping__howto{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pin-dark);margin:1.4rem 0 .2rem}
.mapping__steps{max-width:none}

@media (max-width:860px){
  .mapping__body{grid-template-columns:1fr}
}
@media (max-width:480px){
  .mz__tag{display:none}
  .mapfig[data-zone] .mz.is-sel .mz__tag{display:block}
}
@media (prefers-reduced-motion:reduce){
  .mz-row{animation:none !important}
  .mapfig[data-zone="title"] .mz__x{animation:none}
}

/* Tour · paso 9: zonas del mapeo sobre la ventana de ejemplo */
.m-zones{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:3}
.m-zone{position:absolute;border:.18em solid var(--c);border-radius:.3em;background:color-mix(in srgb, var(--c) 16%, transparent)}
.m-zone--list{--c:var(--z-list);left:.3em;top:2.7em;width:calc(18% - .6em);bottom:.4em}
.m-zone--title{--c:var(--z-title);left:30%;width:40%;top:.25em;height:1.9em;border-style:dashed}
.m-zone--content{--c:var(--z-content);left:calc(18% + .3em);right:1.6em;top:2.7em;bottom:.4em}
.m-zone--scroll{--c:var(--z-scroll);right:.25em;width:1em;top:3.3em;bottom:1em}
.stage[data-step="9"] .m-zones{opacity:1}
.stage[data-step="9"] .mac__side i:first-child{background:#c3c7d4;box-shadow:0 0 0 .3em #e3e6ee}
.m-mapping{
  position:absolute;right:1.2em;bottom:1.2em;width:34%;background:rgba(255,255,255,.97);border:1px solid #e3e3e8;border-radius:.8em;
  padding:.8em 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;
  font-size:.92em;color:#222;display:flex;flex-direction:column;gap:.3em;
}
.m-mapping__title{font-weight:800;margin-bottom:.15em}
.m-mapping__row{color:#2b7a3d;font-weight:600}
.stage[data-step="9"] .m-mapping{opacity:1;transform:none}
.stage[data-step="9"] .mac__postik{background:rgba(0,0,0,.14)}
.stage[data-step="9"] .coach{opacity:1;left:80%;top:62%}
@media (prefers-reduced-motion:reduce){ .m-zones,.m-mapping{transition:none} }

/* ── Chat «Escribir» ── */
.chat{max-width:460px;width:100%;text-align:left}
.chat h3{text-align:center}
.chat__intro{text-align:center;font-size:.92rem}
.chat__log{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:.55rem;margin:1rem 0;padding:.2rem}
.chat__m{background:#fff8d6;border-radius:12px 12px 12px 4px;padding:.55rem .75rem;max-width:88%;align-self:flex-end;border-radius:12px 12px 4px 12px}
.chat__m--admin{background:#fff;border:1px solid #efe3b0;align-self:flex-start;border-radius:12px 12px 12px 4px}
.chat__m b{font-size:.72rem;color:#7a6a2e;display:block}
.chat__m p{margin:.15rem 0;color:#2b2410;white-space:pre-wrap;overflow-wrap:anywhere;max-width:none}
.chat__m time{font-size:.68rem;color:#9a8a4e}
.chat__form{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem}
.chat__who{display:grid;gap:.5rem}
.chat__form input,.chat__form textarea{font:inherit;font-size:.95rem;padding:.6rem .75rem;border:1px solid #e6dbb0;border-radius:10px;background:#fffdf3;color:#2b2410;width:100%;box-sizing:border-box;resize:vertical}
.chat__hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.chat__row{display:flex;align-items:center;gap:.6rem;justify-content:space-between}
.chat__msg{font-size:.84rem;color:#7a6a2e}
.chat__who[hidden],.chat__log[hidden]{display:none}

/* ── Informar de un fallo (bugs.js): solo para beta testers ── */
/* Una banderita de papel en el borde derecho, como las de Postik. */
.bug-tab{
  position:fixed;right:0;bottom:5.5rem;z-index:60;cursor:pointer;
  font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);
  background:var(--paper-yellow);border:1px solid rgba(0,0,0,.08);border-right:0;
  padding:.55rem .9rem .55rem 1.1rem;border-radius:4px 0 0 4px;
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);
  box-shadow:var(--shadow-soft);transition:transform .15s ease;
}
.bug-tab:hover{transform:translateX(-4px)}
.bug-tab[hidden]{display:none}
.bug .bug__intro{text-align:center;font-size:.92rem}
.bug__code input{width:100%}
.bug__code[data-known="1"] input{display:none}
.bug__code[data-known=""] .bug__knownrow{display:none}
.bug__knownrow{margin:0;font-size:.88rem;color:#5e5430;max-width:none!important}
.bug__link{border:0;background:none;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.bug__row{display:flex;gap:.6rem;align-items:center}
.bug__add{padding:.45rem .9rem;font-size:.9rem}
.bug__add:disabled{opacity:.45;cursor:default;transform:none}
.bug__thumbs{display:flex;flex-wrap:wrap;gap:.5rem}
.bug__thumb{position:relative;margin:0;width:76px;height:76px;background:#fff;padding:4px;box-shadow:0 2px 6px rgba(0,0,0,.15);transform:rotate(-1.5deg)}
.bug__thumb:nth-child(even){transform:rotate(1.5deg)}
.bug__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bug__x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;background:var(--pin-dark,#b3261e);color:#fff;font-size:14px;line-height:22px;cursor:pointer;padding:0}
.bug__msg{font-size:.86rem;color:#7a6a2e;margin:0!important;max-width:none!important}
.bug__msg.is-error,.bug__waiting .is-error{color:var(--pin-dark,#b3261e);font-weight:650}
.bug__msg.is-ok{color:#2b6b39;font-weight:650}
.bug__waiting{background:#fff8d6;border:1px dashed #e0cf86;border-radius:10px;padding:.5rem .75rem;margin:.6rem 0 0;font-size:.86rem}
.bug__waiting p{margin:.1rem 0;max-width:none}
.bug__waiting[hidden]{display:none}