/* Private presentations (not part of the public site). Brand tokens mirror sitio/styles.css and marca/BRAND.md. */
:root{
  --selva:#1E4A3B; --selva-deep:#163A2E; --hoja:#3F7A5A; --caliza:#EFEADF; --papel:#F7F4EC; --miel:#C39237; --miel-ink:#7E5B1C; --miel-light:#E2B862; --on-miel:#0F2A20;
  --ink:#17231E; --muted:#56635C; --soft:#C9D3CB; --line:rgba(239,234,223,.16);
  --serif:"Marcellus", Georgia, serif; --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0; height:100%}
body{background:var(--selva); color:var(--caliza); font:18px/1.55 var(--sans); -webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:400; font-family:var(--serif); text-wrap:balance}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--miel); outline-offset:3px; border-radius:6px}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--miel-light)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; font:700 16.5px/1 var(--sans); text-decoration:none; border:2px solid transparent; cursor:pointer; background:var(--miel); color:var(--on-miel)}
.btn:hover{background:#D0A248}
.btn-ghost{background:none; color:var(--caliza); border-color:rgba(239,234,223,.4)}
.btn-ghost:hover{background:none; border-color:var(--caliza)}

/* ---------- Deck ---------- */
.deck{position:fixed; inset:0; overflow:hidden}
.slide{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:clamp(28px,6vh,72px) clamp(24px,7vw,110px) clamp(64px,10vh,96px); opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s}
.slide.on{opacity:1; visibility:visible; transition:opacity .5s ease}
/* Small screens (a phone in an emergency): a screen taller than the display scrolls instead of being cut top and bottom. */
.slide{overflow-y:auto; overflow-x:hidden}
.slide > .in{margin:auto}
.slide.light{background:var(--papel); color:var(--ink)}
.slide.light .eyebrow{color:var(--miel-ink)}
.slide.light h2{color:var(--selva)}
.in{width:100%; max-width:1180px; display:flex; flex-direction:column; gap:22px}
.center{align-items:center; text-align:center}
.slide h1{font-size:clamp(46px,7.5vw,104px); line-height:1.02}
.slide h2{font-size:clamp(36px,5vw,68px); line-height:1.06}
.lead{font-size:clamp(19px,2vw,25px); line-height:1.5; color:var(--soft); max-width:40ch}
.slide.light .lead{color:var(--muted)}
.two{display:grid; gap:clamp(24px,5vw,72px); grid-template-columns:minmax(0,1fr); align-items:center}
@media (min-width:900px){ .two{grid-template-columns:1.05fr .95fr} }

/* Reveal pieces one click at a time (data-step="n"). */
[data-step]{transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1)}
.slide [data-step].wait{opacity:0; transform:translateY(10px); pointer-events:none}
.slide.light [data-step].wait.keep-space{visibility:hidden}
.slide.instant [data-step],.slide.instant .part{transition:none !important}

/* Cards / lists */
.grid4{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){ .grid4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.card{background:rgba(239,234,223,.06); border:1.5px solid var(--line); border-radius:18px; padding:22px 20px; display:flex; flex-direction:column; gap:10px}
.slide.light .card{background:#fff; border-color:rgba(30,74,59,.14)}
.card h3{font:700 19px/1.3 var(--sans)}
.card p{font-size:16px; line-height:1.5; color:var(--soft)}
.slide.light .card p{color:var(--muted)}
.card svg{width:44px; height:44px; color:var(--miel-light)}
.slide.light .card svg{color:var(--miel-ink)}
.num{font:400 44px/1 var(--serif); color:var(--miel-light)}
.slide.light .num{color:var(--miel-ink)}

/* Timeline of facts ("algunos momentos de mi vida") */
.facts{display:grid; gap:18px 36px; grid-template-columns:repeat(2,minmax(0,1fr))}
.fact span{display:block; font:italic 400 clamp(19px,1.8vw,24px)/1.3 var(--serif); color:var(--selva)}
.fact b{display:block; margin-top:4px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.polaroid{background:#fff; padding:14px 14px 44px; border-radius:6px; box-shadow:0 18px 40px rgba(23,35,30,.18); transform:rotate(-3deg); width:min(320px,70%); justify-self:center}
.polaroid img{display:block; width:100%; height:auto; border-radius:2px; background:var(--caliza)}

/* Steps row */
.steps{display:grid; gap:14px; grid-template-columns:1fr; counter-reset:s}
@media (min-width:900px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.step{position:relative; padding:22px 20px; border-radius:18px; border:1.5px solid var(--line); background:rgba(239,234,223,.05)}
.step::before{counter-increment:s; content:counter(s); display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:rgba(239,234,223,.1); font-weight:800; margin-bottom:12px}
.step h3{font:700 18.5px/1.3 var(--sans)}
.step.now{border-color:var(--miel); background:rgba(195,146,55,.12)}
.step.now::before{background:var(--miel); color:var(--on-miel)}
.tag{display:inline-block; margin-top:10px; font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--miel-light)}

/* Layered illustrations (building / ceiba) with labels */
.layers{display:grid; gap:12px}
.layer{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:baseline; padding:14px 0; border-top:1.5px solid var(--line)}
.layer:last-child{border-bottom:1.5px solid var(--line)}
.layer i{font:italic 400 clamp(24px,2.4vw,32px)/1.1 var(--serif); color:var(--caliza); font-style:normal}
.layer b{font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--miel-light); justify-self:end}
.layer p{grid-column:1/-1; font-size:16.5px; color:var(--soft)}
.art{width:100%; max-height:66vh; overflow:visible}
.art .part{transition:opacity .6s ease, fill .6s ease}
.art .dim{opacity:.18}
.art .hot{fill:var(--miel)}

/* Firm logos */
.logos{display:flex; flex-wrap:wrap; gap:18px; align-items:center}
.logo-card{background:#fff; border-radius:16px; padding:18px 26px; display:grid; place-items:center; height:104px}
.logo-card img{max-height:68px; max-width:100%; width:auto; object-fit:contain}

/* Chrome: progress, hints, notes */
.bar{position:fixed; left:0; bottom:0; height:4px; background:var(--miel); transition:width .4s ease; z-index:5}
.hud{position:fixed; right:18px; bottom:14px; z-index:5; display:flex; gap:10px; align-items:center; font-size:13px; color:rgba(239,234,223,.7); background:rgba(22,58,46,.85); padding:6px 14px; border-radius:999px}
.hud button{background:rgba(239,234,223,.08); border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; color:inherit}
.hud button:hover{color:var(--caliza)}
body.clean .hud{opacity:0; transition:opacity .4s}
body.clean:hover .hud{opacity:1}
.notes{position:fixed; left:16px; right:16px; bottom:40px; z-index:6; max-width:760px; margin:0 auto; background:rgba(15,42,32,.96); border:1px solid rgba(226,184,98,.5); border-radius:14px; padding:14px 18px; font-size:15.5px; line-height:1.5; color:var(--caliza); box-shadow:0 20px 50px rgba(0,0,0,.35)}
.notes b{color:var(--miel-light)}

@media (prefers-reduced-motion: reduce){
  .slide,[data-step],.art .part,.bar{transition:none}
}