: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}
}

/* botón "Mirá el prompt" */
.prompt-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.prompt-btn{font:inherit;font-weight:600;font-size:.9rem;color:var(--g1);background:var(--mint);
  border:1.5px solid var(--g3);border-radius:99px;padding:.4rem 1rem;min-height:40px;cursor:pointer;
  animation:prompt-pulse 2.6s ease-in-out infinite;transition:background .2s,color .2s}
.prompt-btn:hover,.prompt-btn:focus-visible{background:var(--g3);color:var(--white);animation-play-state:paused}
.prompt-btn:focus-visible,.copy-btn:focus-visible,.close-btn:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
@keyframes prompt-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(43,182,115,.45);transform:translateX(0)}
  50%{box-shadow:0 0 0 7px rgba(43,182,115,0);transform:translateX(3px)}
}
.static .prompt-btn{animation:none}
@media (prefers-reduced-motion:reduce){.prompt-btn{animation:none}}

/* modal */
body.modal-open{overflow:hidden}
.modal-overlay{position:fixed;inset:0;z-index:50;background:rgba(11,79,67,.45);display:flex;
  align-items:center;justify-content:center;padding:1rem}
.modal-overlay[hidden]{display:none}
.modal-dialog{background:var(--white);border:1px solid var(--line);border-radius:14px;width:100%;max-width:720px;
  max-height:min(86vh,86dvh);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(11,79,67,.18);overflow:hidden}
.modal-head{position:sticky;top:0;display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;
  background:var(--white);border-bottom:1px solid var(--line);flex:none}
.modal-head h2{flex:1;font-size:1.1rem;font-weight:600;color:var(--g1);line-height:1.25}
.copy-btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:600;font-size:.95rem;color:var(--g1);
  background:var(--mint);border:1.5px solid var(--g3);border-radius:99px;padding:.35rem .9rem;min-height:40px;cursor:pointer;flex:none}
.copy-btn:hover{background:var(--g3);color:var(--white)}
.copy-btn.done{background:var(--g1);border-color:var(--g1);color:var(--white)}
.copy-btn .ico{display:inline-flex}
.copy-btn .ico[hidden]{display:none}
.close-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--g1);
  font-size:1.6rem;line-height:1;cursor:pointer;flex:none}
.close-btn:hover{background:var(--mint)}
.modal-body{overflow-y:auto;padding:1rem 1.15rem 1.3rem;background:var(--cream);-webkit-overflow-scrolling:touch}
.modal-body pre{font-family:'Jost',system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--g2);
  white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
@media (max-width:700px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-dialog{max-width:none;border-radius:14px 14px 0 0;max-height:92vh;max-height:92dvh}
  .modal-head h2{font-size:1rem}
}