/* ===== Hero orgánico: historia con scroll ===== */
:root{--bgc:#f0e4d4}
.oh{position:relative;height:480vh;background:var(--bgc)}
.oh-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bgc)}
#storyCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translate3d(calc(var(--mx,0)*-10px),calc(var(--my,0)*-7px),0) scale(1.03);will-change:transform}
.oh-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bgc) 0,rgba(240,228,212,.7) 25%,rgba(240,228,212,0) 42%)}
.oh-intro,.oh-step{position:absolute;z-index:3;left:max(1.4rem,calc((100vw - 1180px)/2));top:50%;width:min(31rem,37vw);transform:translateY(calc(-50% + 26px));opacity:0;visibility:hidden;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1),visibility 0s .7s}
.oh-intro.on,.oh-step.on{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1),visibility 0s}
.oh-logo{width:78px;height:78px;border-radius:50%;object-fit:cover;object-position:50% 52%;margin-bottom:.8rem;box-shadow:0 6px 18px #1a354940}
.oh-intro .eyebrow{color:var(--teal);font-size:clamp(1.6rem,4vw,2.2rem)}
.oh-intro h1{font-family:"Abril Fatface","Playfair Display",serif;font-weight:400;color:var(--navy);font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1.02;margin:.3rem 0 1rem}
.oh-intro h1 em{font-family:"Playfair Display",serif;font-style:italic;font-weight:500;color:#9a6a3c;font-size:.6em;display:inline-block;margin-top:.35rem}
.oh-intro .subtitle{color:var(--navy)}.oh-intro .subtitle::before{background:var(--kraft)}
.oh-step .num{display:block;font-family:"Abril Fatface",serif;font-size:clamp(5rem,13vw,10.5rem);line-height:.85;color:transparent;-webkit-text-stroke:1.5px #9a6a3c;opacity:.85;letter-spacing:.02em}
.oh-step h2{font-family:"Abril Fatface",serif;font-weight:400;color:var(--navy);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.02;margin:.4rem 0 .7rem}
.oh-step p{color:var(--ink);opacity:.8;font-size:1.05rem;max-width:26rem}
.oh-step .cta-row{margin-top:1.4rem}
.oh-tags{list-style:none;padding:0;margin:0;position:absolute;inset:0;z-index:4;pointer-events:none}
.oh-tags li{position:absolute;left:calc(var(--ix,0px) + var(--iw,0px)*var(--tx));top:calc(var(--iy,0px) + var(--ih,0px)*var(--ty));display:flex;align-items:center;gap:.5rem;
 padding:.55rem 1rem .55rem .7rem;border-radius:999px;background:rgba(255,251,245,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(154,106,60,.25);
 color:var(--navy);font-weight:600;font-size:.92rem;letter-spacing:.02em;box-shadow:0 10px 30px rgba(90,53,32,.12);white-space:nowrap;
 opacity:0;transform:translate(-50%,-50%) translate3d(calc(var(--mx,0)*var(--d)*1px),calc(12px + var(--my,0)*var(--d)*.7px),0) scale(.94);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.oh-tags li i{width:9px;height:9px;border-radius:50%;background:#9a6a3c;box-shadow:0 0 0 4px rgba(154,106,60,.18)}
.oh-tags li.on{opacity:1;transform:translate(-50%,-50%) translate3d(calc(var(--mx,0)*var(--d)*1px),calc(var(--my,0)*var(--d)*.7px),0) scale(1)}
.oh-tags .t1{--tx:.30;--ty:.22;--d:18}.oh-tags .t2{--tx:.70;--ty:.14;--d:-14}.oh-tags .t3{--tx:.76;--ty:.56;--d:22}.oh-tags .t4{--tx:.30;--ty:.80;--d:-12}
.oh-tags .t2.on{transition-delay:.12s}.oh-tags .t3.on{transition-delay:.24s}.oh-tags .t4.on{transition-delay:.36s}
.oh-rail{position:absolute;z-index:5;right:max(1rem,calc((100vw - 1180px)/2 - 1.5rem));top:50%;transform:translateY(-50%);list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.oh-rail li{width:8px;height:8px;border-radius:50%;background:rgba(26,53,73,.22);transition:.4s}
.oh-rail li.on{height:28px;border-radius:6px;background:var(--navy)}
.oh-hint{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--navy);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;transition:opacity .4s}
.oh-hint i{width:22px;height:34px;border:2px solid var(--navy);border-radius:12px;position:relative}
.oh-hint i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--navy);animation:hint 1.6s infinite}
.oh.scrolled .oh-hint{opacity:0}
@keyframes hint{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.nubes{background:linear-gradient(180deg,var(--bgc) 0%,#dce9f0 50%,#cfe0ea 72%,var(--cream) 100%)}

@media(max-width:899px){
 .oh{height:400vh}
 .oh-fade{background:linear-gradient(180deg,var(--bgc) 0,var(--bgc) 36%,rgba(240,228,212,0) 50%)}
 .oh-intro,.oh-step{left:1.2rem;right:1.2rem;width:auto;top:4.4rem;transform:translateY(20px)}
 .oh-intro.on,.oh-step.on{transform:none}
 .oh-logo{position:absolute;right:0;top:0;width:58px;height:58px;margin:0}
 .oh-intro h1{font-size:clamp(1.9rem,8.6vw,2.6rem);padding-right:64px}
 .oh-intro .cta-row{margin-top:1rem;gap:.5rem}.oh-intro .cta-row .btn,.oh-step .cta-row .btn{padding:.68rem 1rem;font-size:.86rem}
 .oh-step{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:end}
 .oh-step .num{font-size:4.4rem;grid-row:span 2}
 .oh-step h2{font-size:1.9rem;margin:0 0 .2rem}.oh-step p{grid-column:1/-1;font-size:.95rem;margin-top:.5rem}
 .oh-step .cta-row{grid-column:1/-1;margin-top:.9rem}
 .oh-tags li{font-size:.78rem;padding:.4rem .75rem .4rem .55rem}
 .oh-tags .t1{--tx:.24;--ty:.14}.oh-tags .t2{--tx:.76;--ty:.10}.oh-tags .t3{--tx:.80;--ty:.74}.oh-tags .t4{--tx:.24;--ty:.80}
 .oh-rail{right:.6rem;top:auto;bottom:110px;transform:none}
 .oh-hint{display:none}
}
@media(prefers-reduced-motion:reduce){.oh-intro,.oh-step,.oh-tags li{transition:none}}

/* === v4: rendimiento en móvil === */
.oh{height:480vh}
@media(max-width:899px){
 .oh{height:400vh;height:400svh}
 #storyCanvas{transform:none;will-change:auto}
 .oh-tags li{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,251,245,.94);box-shadow:0 6px 16px rgba(90,53,32,.12);transform:translate(-50%,-50%) translateY(10px) scale(.94)}
 .oh-tags li.on{transform:translate(-50%,-50%)}
 .nav,.sticky{backdrop-filter:none;-webkit-backdrop-filter:none}
 .banner img{will-change:auto;transform:none}
 .nubes .cl{translate:none}
 .fab{display:none}
 body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .sticky{padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px))}
}