:root{
  --sage:#F5F7F2; --g1:#037A62; --g2:#0B4F43; --g3:#2BB673; --mint:#DFF0E6;
  --line:#D6E0D6; --orange:#F2B670; --cream:#FFF8EE; --muted:#8E9892; --white:#fff;
  --top:56px;
  --fs:clamp(14px, min(1.02vw, 1.8vh), 21px); /* escala base */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Jost',system-ui,sans-serif;background:var(--sage);color:var(--g2);
  font-size:var(--fs);line-height:1.45;overflow-x:hidden}

/* topbar */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:10;display:flex;align-items:center;
  gap:16px;padding:0 clamp(16px,3vw,48px);background:rgba(245,247,242,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line)}
.logo{height:60%;width:auto;max-width:140px;object-fit:contain}
.dots{display:flex;gap:10px;margin:0 auto}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:.3s}
.dots button.on{background:var(--g1);transform:scale(1.35)}
.count{color:var(--muted);font-size:.85rem;min-width:44px;text-align:right}
.count b{color:var(--g1)}
.bar{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:transparent}
.bar i{display:block;height:100%;width:0;background:var(--g3);transition:width .5s ease}

/* deck */
.deck{position:relative;height:100vh;height:100dvh;padding-top:var(--top)}
.slide{position:absolute;inset:var(--top) 0 0 0;overflow-y:auto;overflow-x:hidden;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
  display:flex;flex-direction:column;justify-content:center;
  padding:1.2rem clamp(16px,5vw,96px) 1.6rem}
.slide.active{opacity:1;visibility:visible}
.inner{width:100%;max-width:1500px;margin:auto}

.eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g1);font-weight:600;margin-bottom:.4rem}
h1{font-size:2.5rem;line-height:1.1;font-weight:700;color:var(--g2);margin-bottom:.5rem;letter-spacing:-.01em}
h1 .g{color:var(--g1)}
.lead{font-size:1.25rem;color:var(--g1);margin-bottom:1.1rem}
h3{font-size:1.15rem;font-weight:600;color:var(--g1);margin-bottom:.35rem}
p,li{font-size:1rem}

/* grids */
.grid{display:grid;gap:.9rem;margin-top:.9rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g5{grid-template-columns:repeat(6,1fr)}
.g5 .card:nth-child(-n+3){grid-column:span 2}
.g5 .card:nth-child(n+4){grid-column:span 3}

.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1rem 1.15rem}
.card.mint{background:var(--mint);border-color:var(--g3)}
.card.warm{background:var(--cream);border-color:var(--orange)}
.card.warm h3{color:var(--g2)}
.card.sm p{font-size:.9rem;line-height:1.4}
.card.tall{padding-top:1.4rem}
.num{position:absolute;top:-.8rem;left:1.1rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--g1);
  color:#fff;font-weight:600;display:grid;place-items:center}
ul,ol{padding-left:1.1rem}
li{margin-top:.4rem}
.steps{list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:2rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:.05rem;width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--mint);color:var(--g1);font-size:.8rem;font-weight:600;display:grid;place-items:center}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .5rem}
.chips span{background:var(--mint);color:var(--g2);border-radius:99px;padding:.15rem .7rem;font-size:.85rem;font-weight:500}
.band{margin-top:1rem;border-radius:14px;padding:.9rem 1.2rem;font-size:1.05rem}
.band.warm{background:var(--cream);border:1px solid var(--orange)}
.band p{font-size:1.05rem}
.closer{margin-top:1rem;text-align:center;font-size:1.5rem;font-weight:700;color:var(--g1)}

/* nav arrows */
.nav{position:fixed;top:50%;transform:translateY(-50%);z-index:9;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--g1);font-size:1.6rem;line-height:1;cursor:pointer;
  opacity:.8;transition:.2s}
.nav:hover{background:var(--mint);opacity:1}
.nav.prev{left:10px}.nav.next{right:10px}
.nav[disabled]{opacity:0;pointer-events:none}

/* reveals */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.slide.active .rv{opacity:1;transform:none}
.slide.active .rv:nth-child(2){transition-delay:.08s}
.slide.active .rv:nth-child(3){transition-delay:.16s}
.slide.active .rv:nth-child(4){transition-delay:.26s}
.slide.active .rv:nth-child(5){transition-delay:.36s}
.slide.active .rv:nth-child(6){transition-delay:.46s}
.static .rv,.static .slide,.static .bar i,.static .dots button{transition:none!important}
.static .rv{opacity:1;transform:none}

/* tablet */
@media (max-width:1199px){
  :root{--fs:16px}
  .g3{grid-template-columns:1fr}
  .g5{grid-template-columns:repeat(2,1fr)}
  .g5 .card:nth-child(n){grid-column:span 1}
  .g5 .card:last-child{grid-column:span 2}
  :root{--bar:56px}
  body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(var(--bar) + env(safe-area-inset-bottom,0px));
    background:var(--sage);border-top:1px solid var(--line);z-index:8;pointer-events:none}
  .nav{top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));transform:none;width:40px;height:40px}
  .nav.prev{left:14px}.nav.next{right:14px}
  .slide{justify-content:flex-start;padding-bottom:calc(var(--bar) + 1.5rem + env(safe-area-inset-bottom,0px))}
  .card.tall{margin-top:.6rem}
  h1{font-size:2.2rem}
}
/* mobile */
@media (max-width:700px){
  :root{--top:52px}
  .g2,.g5{grid-template-columns:1fr}
  .g5 .card:last-child{grid-column:auto}
  h1{font-size:1.8rem}
  .lead{font-size:1.1rem}
  .closer{font-size:1.25rem}
  .count{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv,.slide{transition:none}
}

/* cover */
.cover .inner{max-width:1200px}
.cover-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center}
.cover-art{order:2;display:flex;justify-content:center}
.cover-text{order:1}
.cover h1{font-size:3.6rem}
.cover .lead{font-size:1.5rem;text-wrap:balance}
.sub{font-size:1.15rem;margin-bottom:1.1rem;max-width:34em}
.pill{display:inline-block;background:var(--mint);border:1.5px solid var(--g3);color:var(--g1);font-weight:600;border-radius:99px;padding:.4rem 1.1rem}
.halo{width:min(30rem,38vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,var(--cream) 0,var(--mint) 70%)}
.avatar{--bob:8px;width:74%;height:auto;display:block;overflow:visible;animation:bob 5s ease-in-out infinite}
.avatar .eye{transform-box:fill-box;transform-origin:center;animation:blink 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(calc(var(--bob) * -1)) rotate(3deg)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
.static .avatar,.static .avatar .eye{animation:none}
@media (prefers-reduced-motion:reduce){.avatar,.avatar .eye{animation:none}}

/* example slides */
h2{font-size:2.2rem;line-height:1.12;font-weight:700;color:var(--g2);margin-bottom:.7rem;letter-spacing:-.01em;max-width:30em}
h2 .g{color:var(--g1)}
.badge{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .4rem;margin-right:.6rem;border-radius:99px;
  background:var(--g1);color:#fff;font-size:.75rem;letter-spacing:.04em;vertical-align:middle}
.ex .inner{max-width:1150px}
.shot{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 22px rgba(11,79,67,.08);
  padding:.6rem;display:flex;justify-content:center;width:fit-content;max-width:100%;margin:0 auto}
.shot img{display:block;max-width:100%;width:auto;height:auto;object-fit:contain;
  max-height:calc(100vh - var(--top) - 12.5rem);max-height:calc(100dvh - var(--top) - 12.5rem)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.scrollcol{min-width:0}
.shot.scroll{display:block;width:100%;overflow-y:auto;padding:.5rem;
  height:calc(100vh - var(--top) - 14.5rem);height:calc(100dvh - var(--top) - 14.5rem)}
.shot.scroll img{width:100%;max-height:none}
.hint{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.3rem}

/* closing */
.closer-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem}
.closer-row .avatar{--bob:3px;height:4.2rem;width:auto}
.closer-row .closer{margin:0;text-align:left}
.closer-row .closer-sub{margin:.3rem 0 0;font-size:1.1rem;font-weight:500;color:#8E9892;text-align:left}
.card h3{margin-top:.2rem}
.band.mint{background:var(--mint);border:1px solid var(--g3);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.band.mint .chips{margin:0}
.band.mint .chips span{background:var(--white)}

@media (max-width:1199px){
  .cover-grid{grid-template-columns:1fr;gap:1rem;text-align:center;justify-items:center}
  .cover-art{order:1}.cover-text{order:2}
  .halo{width:min(14rem,60vw)}
  .cover h1{font-size:2.6rem}
  .sub{margin-left:auto;margin-right:auto}
  h2{font-size:1.8rem}
  .shot img{max-height:none}
  .shot{width:100%}
  .shot.scroll{height:auto;max-height:70vh;max-height:70dvh}
  .pair{grid-template-columns:1fr}
  .slide.cover{justify-content:center}
}
@media (max-width:700px){
  .cover h1{font-size:2.2rem}
  .cover .lead{font-size:1.15rem}
  .halo{width:min(10rem,50vw)}
  h2{font-size:1.45rem}
  .shot{padding:.35rem;border-radius:10px}
  .band.mint{display:block}
  .band.mint .chips{margin-top:.4rem}
  .closer-row{flex-direction:column;text-align:center}
  .closer-row .closer,.closer-row .closer-sub{text-align:center}
  .closer-row .closer-sub{font-size:1rem}
}

/* lightbox */
.shot img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:100;display:none;overflow:auto;background:rgba(245,247,242,.97);
  touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.lightbox.open{display:flex}
.lightbox img{display:block;flex:none;max-width:none;width:auto;height:auto;margin:auto;padding:3.5rem 1rem 1.5rem;cursor:default}
.lb-close{position:fixed;top:12px;right:14px;z-index:101;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--g1);font-size:1.2rem;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(11,79,67,.15)}
.lb-close:hover{background:var(--mint)}
.m-only{display:none}
.hint.m-only,.hint .m-only{color:var(--muted)}
@media (max-width:700px){
  .d-only{display:none}
  .m-only{display:inline}
  p.hint.m-only{display:block}
  .slide{padding-top:24px}
  .slide:not(.cover) .inner{margin:0 auto}
  .slide.cover .inner{margin:auto}
  .slide.cover{padding-top:1.2rem}
}

/* warning callout */
.warn{display:flex;align-items:flex-start;gap:.55rem;margin-top:.8rem;padding:.6rem .8rem;background:var(--cream);
  border:1.5px solid var(--orange);border-left-width:4px;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--g2);line-height:1.35}
.warn svg{flex:none;margin-top:.05rem}
.closer-row .avatar{shape-rendering:geometricPrecision}