/* Interactive ANF (análisis financiero). Light, calm, readable while two people look at the same screen. */
body.anf{background:var(--papel); color:var(--ink); color-scheme:light}
.anf .eyebrow{color:var(--miel-ink)}
.anf-top{position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:14px; justify-content:space-between; padding:12px clamp(16px,4vw,40px); background:rgba(247,244,236,.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(30,74,59,.12)}
.anf-brand{-webkit-touch-callout:none; user-select:none; -webkit-user-select:none; display:flex; align-items:center; gap:10px; font:400 20px/1 var(--serif); color:var(--selva)}
.anf-brand svg{width:34px; height:auto}
.anf-actions{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:#fff; border:1.5px solid rgba(30,74,59,.18); border-radius:999px; padding:8px 14px; font:600 14px/1 var(--sans); color:var(--selva); cursor:pointer}
.chip:hover{border-color:var(--selva)}
.chip[aria-pressed="true"]{background:var(--selva); color:var(--caliza); border-color:var(--selva)}

.anf-wrap{display:grid; grid-template-columns:1fr; gap:24px; max-width:1240px; margin:0 auto; padding:24px clamp(16px,4vw,40px) 120px}
@media (min-width:1000px){ .anf-wrap{grid-template-columns:230px 1fr} }
.rail{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px}
@media (min-width:1000px){ .rail{flex-direction:column; position:sticky; top:84px; align-self:start; overflow:visible} }
.rail button{display:flex; align-items:center; gap:10px; text-align:left; background:none; border:0; border-radius:12px; padding:10px 12px; font:600 15px/1.2 var(--sans); color:var(--muted); cursor:pointer}
.rail button span{display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:rgba(30,74,59,.08); font-size:13px; font-weight:800}
.rail button[aria-current="step"]{background:#fff; color:var(--selva); box-shadow:0 2px 10px rgba(30,74,59,.08)}
.rail button[aria-current="step"] span{background:var(--selva); color:var(--caliza)}
.rail button.done span{background:var(--miel); color:var(--on-miel)}
@media (max-width:999px){ .rail button{white-space:nowrap} } /* horizontal strip on narrow screens; long names wrap in the side column */

.panel{display:flex; flex-direction:column; gap:22px; min-width:0}
.panel h1{font:400 clamp(34px,4.6vw,56px)/1.05 var(--serif); color:var(--selva)}
.panel .sub{font-size:19px; color:var(--muted); max-width:52ch}
.guide{border-left:3px solid var(--miel); background:rgba(195,146,55,.09); border-radius:0 12px 12px 0; padding:12px 16px; font-size:15.5px; color:var(--miel-ink)}
body:not(.show-guide) .guide{display:none}

.box{background:#fff; border:1.5px solid rgba(30,74,59,.12); border-radius:20px; padding:clamp(18px,2.4vw,28px)}
.fields{display:grid; gap:16px 20px; grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.f{display:flex; flex-direction:column; gap:6px}
.f.wide{grid-column:1/-1}
.f label{font-size:14.5px; font-weight:700; color:var(--selva)}
.f small{font-size:13px; color:var(--muted)}
.f input,.f select,.f textarea{width:100%; min-height:48px; border:1.5px solid rgba(30,74,59,.2); border-radius:12px; background:var(--papel); padding:10px 14px; font:17px/1.4 var(--sans); color:var(--ink)}
.f textarea{min-height:92px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--selva); background:#fff; box-shadow:0 0 0 3px rgba(63,122,90,.18)}
.money{position:relative}
.money::before{content:"$"; position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.money input{padding-left:28px}

.rows{display:flex; flex-direction:column; gap:14px}
.row-item{position:relative; border:1.5px dashed rgba(30,74,59,.2); border-radius:16px; padding:16px 16px 18px}
.row-item .rm{position:absolute; top:8px; right:8px; background:none; border:0; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; min-width:40px; min-height:40px}
.row-item .rm:hover{color:var(--ink)}
.add{align-self:flex-start; background:none; border:1.5px dashed rgba(30,74,59,.35); border-radius:999px; padding:10px 18px; font:700 15px/1 var(--sans); color:var(--selva); cursor:pointer}
.add:disabled{opacity:.4; cursor:default}

/* Live, gentle results */
.insight{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.stat{background:var(--selva); color:var(--caliza); border-radius:18px; padding:18px 20px}
.stat b{display:block; font:400 clamp(26px,2.6vw,36px)/1.1 var(--serif); overflow-wrap:anywhere}
.stat span{font-size:14px; color:var(--soft)}
.stat.soft{background:#fff; color:var(--selva); border:1.5px solid rgba(30,74,59,.12)}
.stat.soft span{color:var(--muted)}
.meter{height:18px; border-radius:999px; background:rgba(30,74,59,.1); overflow:hidden; display:flex}
.meter i{display:block; height:100%; transition:width .5s ease}
.meter .g{background:var(--hoja)} .meter .m{background:var(--miel)}
.legend{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; color:var(--muted)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px}
.note{font-size:16.5px; line-height:1.55; color:var(--ink); background:rgba(63,122,90,.08); border-radius:14px; padding:14px 18px}
.ladder{display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr))}
.rung{border-radius:16px; padding:14px 16px; border:1.5px solid rgba(30,74,59,.14); background:#fff}
.rung b{display:block; font:400 24px/1.15 var(--serif); color:var(--selva)}
.rung span{font-size:13.5px; color:var(--muted)}
.rung.goal{border-color:var(--hoja)}
@media (max-width:560px){ .ladder{grid-template-columns:1fr} } /* phones: three amounts don't fit side by side */
.sec2{font:400 clamp(24px,2.6vw,30px)/1.2 var(--serif); color:var(--selva); margin-top:6px}
.rueda{display:grid; gap:18px 28px; grid-template-columns:1fr; align-items:center}
@media (min-width:760px){ .rueda{grid-template-columns:minmax(200px,260px) 1fr} }
.rueda-svg{width:100%; max-width:260px; height:auto; justify-self:center}
.rueda-list{list-style:none; margin:0; padding:0; display:grid; gap:8px 20px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.rueda-list li{display:flex; align-items:center; gap:10px; font-size:16px}
.rueda-list i{width:14px; height:14px; border-radius:4px; flex:none}
.rueda-list span{flex:1}
.rueda-list b{font-weight:700; color:var(--selva)}
.rueda-note{grid-column:1/-1}
.goal-cards{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

.sum-part{display:flex; flex-direction:column; gap:12px; padding-top:6px}
.consejos{margin:0; padding-left:24px; display:grid; gap:10px; font-size:17px; line-height:1.5; color:var(--ink)}
.consejos li::marker{color:var(--miel-ink); font-weight:700}
.consejos .libera{font-weight:700; color:var(--hoja)}
.sum-part h2{font:400 clamp(24px,2.6vw,30px)/1.2 var(--serif); color:var(--selva)}
.nav{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:6px}
.btn.light{background:none; color:var(--selva); border-color:rgba(30,74,59,.3)}
.btn.light:hover{border-color:var(--selva); background:none}
.privacy{margin-top:8px; font-size:13.5px; color:var(--muted); display:flex; gap:8px; align-items:flex-start}
.privacy::before{content:""; flex:none; width:14px; height:14px; margin-top:2px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 10V8a6 6 0 1 1 12 0v2h1v11H5V10zm2 0h8V8a4 4 0 1 0-8 0z%27/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 10V8a6 6 0 1 1 12 0v2h1v11H5V10zm2 0h8V8a4 4 0 1 0-8 0z%27/%3E%3C/svg%3E") center/contain no-repeat}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:9; background:var(--selva-deep); color:var(--caliza); padding:12px 18px; border-radius:12px; font-size:15px; box-shadow:0 12px 30px rgba(0,0,0,.2)}
@media print{ .anf-top,.rail,.nav,.guide{display:none !important} .anf-wrap{display:block} }

/* Save status + saved-analyses list (Option+O) */
.estado{font-size:13.5px; color:var(--muted); white-space:nowrap}
.lista-dlg{border:0; border-radius:20px; padding:22px; width:min(560px,92vw); max-height:80vh; background:var(--papel); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.25)}
.lista-dlg::backdrop{background:rgba(15,42,32,.45)}
.lista-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.lista-head h2{font:400 26px/1.1 var(--serif); color:var(--selva)}
.lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.lista button{width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:#fff; border:1.5px solid rgba(30,74,59,.14); border-radius:14px; padding:12px 16px; cursor:pointer}
.lista button:hover{border-color:var(--selva)}
.lista button b{font-size:16.5px; color:var(--selva)}
.lista button span{font-size:13.5px; color:var(--muted)}
/* "Así crece mi Ceiba": the video on the left (9:16), controls on the right */
.ceiba-dlg{border:0; border-radius:24px; padding:24px; width:min(900px,94vw); background:var(--papel); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.25)}
.ceiba-dlg[open]{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center}
.ceiba-dlg::backdrop{background:rgba(15,42,32,.55)}
.ceiba-stage canvas,.ceiba-stage video{display:block; height:min(78vh,720px); width:auto; aspect-ratio:9/16; border-radius:18px; background:var(--caliza); box-shadow:0 10px 30px rgba(15,42,32,.15)}
.resumen-dlg .ceiba-stage canvas{aspect-ratio:4/5}
.ceiba-side{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.ceiba-side h2{font:400 40px/1.1 var(--serif); color:var(--selva); margin:0}
.ceiba-switch{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--selva); cursor:pointer}
.ceiba-switch input{width:20px; height:20px; accent-color:var(--selva)}
@media (max-width:700px){ .ceiba-dlg[open]{grid-template-columns:1fr} .ceiba-stage canvas,.ceiba-stage video{height:60vh} }
/* Guided copy (guia.py): progress bar and Omar's speech bubble */
.burbuja{display:flex; gap:12px; align-items:flex-start; margin:6px 0 22px}
.burbuja img{width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:#fff; border:2px solid rgba(30,74,59,.12)}
.globo{position:relative; background:#fff; border:1.5px solid rgba(30,74,59,.14); border-radius:4px 18px 18px 18px; padding:12px 16px; max-width:640px; box-shadow:0 6px 18px rgba(30,74,59,.06)}
.globo p{margin:0; line-height:1.5}
.globo p + p{margin-top:6px}
.globo .quien{font-size:13px; font-weight:700; color:var(--selva); letter-spacing:.02em}
.globo .quien span{font-weight:400; color:var(--muted)}
.globo .hola{font:400 22px/1.2 var(--serif); color:var(--selva)}
.listo p + p{margin-top:12px}
.avance{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.avance .arbol{width:104px; flex:none; transition:width .4s ease}
.avance.grande .arbol{width:168px}
.avance .arbol svg{display:block; width:100%; height:auto; overflow:visible}
.avance .nuevo{transform-box:fill-box; transform-origin:center; animation:brota .7s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes brota{from{transform:scale(.55)} to{transform:none}} /* movement only */
.avance .copa{transform-box:view-box; transform-origin:60px 102px; transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.avance .familia{animation:aparece .6s .4s ease both}
@keyframes aparece{from{transform:translateY(6px)} to{transform:none}}
.avance .eyebrow{margin:0}
.globo .reaccion{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(30,74,59,.18); color:var(--miel-ink); font-weight:600}
.rapidas{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.rapidas .chip{min-height:40px; padding:10px 14px; font-size:14px; line-height:1.2; text-align:left}
.rapidas .chip:hover{border-color:var(--selva)}
.box.destacado{border:2px solid var(--miel); background:#FFFBF2}
.box.destacado .eyebrow{color:var(--miel-ink)}
.panel.entra{animation:entra .35s ease both}
@keyframes entra{from{transform:translateX(18px)} to{transform:none}} /* movement only: never invisible if the animation is paused */
.hojas{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:50}
.hojas i{position:absolute; top:-24px; width:14px; height:9px; border-radius:0 100% 0 100%; background:var(--hoja); opacity:.85; animation:caer linear both}
.hojas i:nth-child(3n){background:var(--miel)}
.hojas i:nth-child(3n+1){background:var(--selva)}
@keyframes caer{to{transform:translate(40px,105vh) rotate(540deg)}}
@media (prefers-reduced-motion: reduce){ .panel.entra{animation:none} .avance .copa{transition:none} .avance .familia,.avance .nuevo{animation:none} }
.privacy a{display:inline-block; padding:6px 0; color:inherit; text-decoration:underline; text-underline-offset:3px} /* easy to tap */
/* Her life moment (guided copy, welcome step) */
.momentos{margin-top:22px}
.momento-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:12px}
.momento{display:flex; flex-direction:column; align-items:center; gap:6px; min-height:44px; padding:10px 8px 12px; background:#fff; border:1.5px solid rgba(30,74,59,.14); border-radius:16px; cursor:pointer; font:600 14.5px/1.25 var(--sans); color:var(--selva); text-align:center}
.momento img{width:100%; max-width:120px; height:auto}
.momento:hover{border-color:var(--selva)}
.momento[aria-pressed="true"]{border:2px solid var(--miel); background:#FFFBF2; box-shadow:0 6px 16px rgba(195,146,55,.18)}
@media (max-width:560px){ .anf-top{padding-right:112px} .anf-brand{font-size:17px; gap:8px} .anf-brand svg{width:28px} } /* room for the ES/EN switch on phones */