/* All Prozar · motor 3 · lote 2: navegaciones, héroes con foto y secciones nuevas */

/* ---- navegaciones nuevas ---- */
body[data-nav=stack] .nav{flex-direction:column;gap:6px;padding:14px 20px 0;align-items:center}
body[data-nav=stack] .nav .links{margin:0;justify-content:center;border-top:1px solid var(--line);padding-top:8px;width:100%;max-width:760px}
body[data-nav=stack] .nav>.btn{display:none}body[data-nav=stack] .nav.sc{padding-block:8px 0}
body[data-nav=ghost] .nav{padding-block:22px}body[data-nav=ghost] .nav.sc{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line)}
body[data-nav=ghost] .links a{text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;font-weight:700}
body[data-nav=ghost] .nav>.btn{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none;border-radius:0;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px}
body[data-nav=ghost] .nav>.btn:hover{background:var(--ink);color:var(--bg)}
body[data-nav=rail] .nav{left:auto;right:0;top:0;bottom:0;width:78px;flex-direction:column;justify-content:center;padding:18px 0;border-left:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
body[data-nav=rail] .brand span:last-child{display:none}body[data-nav=rail] .links,body[data-nav=rail] .nav>.btn{display:none}
body[data-nav=rail] .burger{display:inline-flex;margin:0;writing-mode:vertical-rl;min-height:120px;padding:14px 0;border-radius:999px;border:1px solid var(--line);background:none;cursor:pointer;font:700 13px var(--bd);letter-spacing:.16em;text-transform:uppercase}
body[data-nav=rail] main,body[data-nav=rail] .foot{margin-right:78px}
body[data-nav=rail] .menu-panel{display:flex;position:fixed;inset:0;z-index:49;background:color-mix(in srgb,var(--bg) 97%,transparent);flex-direction:column;justify-content:center;gap:6px;padding:80px 26px;opacity:0;visibility:hidden;transition:opacity .25s}body[data-nav=rail] .menu-panel.open{opacity:1;visibility:visible}body[data-nav=rail] .menu-panel a{font:var(--hdw,700) 30px/1.5 var(--hd);text-decoration:none;border-bottom:1px solid var(--line)}body[data-nav=rail] .menu-panel .btn{margin-top:22px;border:0;font-size:17px}
@media (max-width:900px){body[data-nav=rail] .nav{inset:0 0 auto 0;width:auto;flex-direction:row;padding:12px 16px;border-left:0;justify-content:space-between}body[data-nav=rail] .burger{writing-mode:horizontal-tb;min-height:44px;padding:0 16px}body[data-nav=rail] .brand span:last-child{display:inline}body[data-nav=rail] main,body[data-nav=rail] .foot{margin-right:0}body[data-nav=stack] .nav{flex-direction:row;padding:12px 16px}body[data-nav=stack] .nav .links{display:none}}


/* ---- héroe 3D: variantes de composición ---- */
.hero[data-l=bottom]{align-items:flex-end;padding-bottom:max(60px,9vh)}.hero[data-l=bottom] .copy{max-width:min(720px,92vw)}.hero[data-l=bottom] h1{font-size:clamp(34px,5vw,70px)}
.hero[data-l=frame] .copy{padding:clamp(22px,3vw,40px);border:1px solid var(--line);border-radius:var(--r,22px);background:color-mix(in srgb,var(--bg) 66%,transparent);backdrop-filter:blur(14px);max-width:min(520px,92vw)}
.hero[data-l=frame] h1{font-size:clamp(32px,4.2vw,58px)}
.hero[data-l=top]{align-items:flex-start;padding-top:140px}.hero[data-l=top] .copy{max-width:min(640px,92vw)}
@media (max-width:900px){.hero[data-l=top]{align-items:flex-end;padding-top:104px}.hero[data-l=frame] .copy{padding:18px}}

/* ---- héroe profesional con foto ---- */
.hb-bg{min-height:100svh;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,rgba(8,8,10,.8),rgba(8,8,10,.35) 70%,rgba(8,8,10,.15)),var(--img) center/cover no-repeat;padding-top:140px}
.hb-bg .lead{color:rgba(255,255,255,.86)}.hb-bg h1{color:#fff}.hb-bg h1 em{color:#fff;border-bottom:4px solid var(--ac);font-family:var(--hde,var(--hd));font-style:var(--emst,italic)}.hb-bg .eyebrow{color:#fff}.hb-bg .btn.ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.hb-bg .wrap{width:100%;position:relative}.hb-bg .copy{max-width:min(660px,92vw)}
.hb-pts{list-style:none;padding:0;margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:600;font-size:15px}.hb-pts li::before{content:"✓";margin-right:8px;color:var(--ac)}
.hb-bg .hb-pts li::before{color:#fff}
.hb-side{position:absolute;right:clamp(18px,4vw,40px);bottom:-20px;display:grid;gap:12px}.hb-side .hb-chip{position:static}
.hb-chip{z-index:3;position:absolute;padding:13px 18px;border-radius:var(--r,16px);background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:0 22px 44px -22px rgba(0,0,0,.45);animation:fcf 6s ease-in-out infinite}
.hb-chip small{display:block;font:700 11px var(--bd);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}.hb-chip b{font:700 17px var(--hd)}
.hb-chip.k0{left:-4%;top:14%}.hb-chip.k1{right:-3%;bottom:22%;animation-delay:-2s}.hb-chip.k2{left:8%;bottom:-3%;animation-delay:-4s}
.hb-frame figure{position:absolute;inset:0;border-radius:var(--r,22px);overflow:hidden;box-shadow:0 40px 70px -34px rgba(0,0,0,.5)}.hb-frame figure img,.hb-arch figure img,.hb-coll img,.hb-half-img img{width:100%;height:100%;object-fit:cover}
.hb-frame::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid var(--ac);border-radius:var(--r,22px);z-index:0}.hb-frame figure{z-index:1}
.hb-arch figure{position:absolute;inset:0 8% 0 8%;border-radius:999px 999px var(--r,22px) var(--r,22px);overflow:hidden}
.hb-coll{min-height:clamp(340px,44vw,580px)}.hb-coll figure{position:absolute;overflow:hidden;border-radius:var(--r,18px);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);border:6px solid var(--bg)}
.hb-coll .c1{left:0;top:0;width:62%;height:68%;transform:rotate(-3deg)}.hb-coll .c2{right:0;top:12%;width:44%;height:46%;transform:rotate(4deg)}.hb-coll .c3{left:18%;bottom:0;width:52%;height:42%;transform:rotate(2deg)}
.hb-half .grid{position:relative}.hb-half{padding:0}.hb-half .wrap.grid{grid-template-columns:1fr 1fr;gap:0;align-items:stretch;max-width:none;padding:0}
.hb-half .copy{padding:clamp(130px,14vw,190px) clamp(24px,5vw,70px) clamp(60px,8vw,110px) max(clamp(24px,5vw,70px),calc((100vw - var(--w,1180px))/2 + 20px));display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hb-half-box{position:relative;min-height:70vh}.hb-half-img{position:absolute;inset:0;margin:0}.hb-half-img img{position:absolute;inset:0}.hb-half .hb-chip.k0{left:24px;bottom:12%;top:auto;z-index:3}.hb-half .hb-chip.k1{left:auto;right:24px;top:18%;bottom:auto}
@media (max-width:900px){.hb-bg{background:linear-gradient(180deg,rgba(8,8,10,.55),rgba(8,8,10,.82)),var(--img) center/cover no-repeat;align-items:flex-end;padding:120px 0 44px}.hb-side{position:static;margin-top:20px}.hb-chip{display:none}.hb-side .hb-chip{display:block}
.hb-half .wrap.grid{grid-template-columns:1fr}.hb-half .copy{padding:110px 20px 36px}.hb-half-box{min-height:340px}.hb-frame::before{inset:-8px 8px 8px -8px}.hb-coll{min-height:360px}}

/* ---- galería ---- */
.gal{display:grid;gap:clamp(10px,1.4vw,18px)}.gal figure{position:relative;overflow:hidden;border-radius:var(--r,16px);margin:0;background:var(--bg2)}.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:14px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(8,8,10,.62);backdrop-filter:blur(8px);color:#fff;font:600 13px var(--bd)}
.gal-mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,16vw,230px)}.gal-mosaic .g0{grid-column:span 2;grid-row:span 2}.gal-mosaic .g3{grid-column:span 2}
.gal-duo{grid-template-columns:1.4fr 1fr;grid-auto-rows:clamp(150px,18vw,260px)}.gal-duo .g0{grid-row:span 2}
.gal-trio{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(220px,28vw,420px)}.gal-trio .g1{margin-top:clamp(20px,4vw,56px);height:calc(100% - clamp(20px,4vw,56px))}
.gal-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(clamp(18px,4vw,40px)*-1);padding:0 clamp(18px,4vw,40px) 12px;scrollbar-width:none}.gal-strip::-webkit-scrollbar{display:none}.gal-strip figure{flex:0 0 min(420px,78%);aspect-ratio:4/5;scroll-snap-align:center}
@media (max-width:900px){.gal-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.gal-mosaic .g0{grid-column:span 2;grid-row:span 1}.gal-mosaic .g3{grid-column:span 1}.gal-duo{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.gal-duo .g0{grid-column:span 2;grid-row:auto}.gal-trio{grid-template-columns:1fr;grid-auto-rows:240px}.gal-trio .g1{margin-top:0;height:100%}}

/* ---- cifras ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px);border-top:1px solid var(--line)}.stat{padding:clamp(20px,3vw,36px) 0;border-bottom:1px solid var(--line)}
.stat b{display:block;font:var(--hdw,700) clamp(40px,6vw,84px)/1 var(--hd);color:var(--ac);letter-spacing:var(--hdls,-.01em)}.stat span{display:block;margin-top:8px;color:var(--mut);font-size:15.5px;max-width:15em}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}}

/* ---- foto + texto ---- */
.ps{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,5vw,76px);align-items:center}.ps.flip .ps-img{order:2}
.ps-img{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--r,22px);overflow:hidden}.ps-img img{width:100%;height:100%;object-fit:cover}
.ps-tag{position:absolute;left:16px;bottom:16px;padding:10px 16px;border-radius:999px;background:var(--bg);color:var(--ink);font:700 13px var(--bd);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.ps .t{margin-bottom:20px}.ps .lead{margin-bottom:20px}.ps .ticks{margin-top:4px}
@media (max-width:900px){.ps,.ps.flip{grid-template-columns:1fr}.ps.flip .ps-img{order:0}.ps-img{aspect-ratio:4/3}}

/* ---- línea de tiempo ---- */
.tls{list-style:none;padding:0;position:relative;max-width:900px;margin:0 auto}.tls::before{content:"";position:absolute;left:34px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:0 0 clamp(26px,3vw,40px);position:relative}.tl-n{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:var(--bg);border:2px solid var(--ac);color:var(--ac);font:var(--hdw,700) 22px var(--hd);position:relative;z-index:1}
.tl h3{font:700 clamp(20px,2vw,26px)/1.2 var(--hd);margin:6px 0 6px}.tl p{color:var(--mut);max-width:34em}
.tlw .t{margin-inline:auto;text-align:center}.tlw>.eyebrow{display:block;text-align:center}

/* ---- cita grande ---- */
.qb{text-align:center;max-width:920px;position:relative}.qm{display:block;font:var(--hdw,700) 140px/.6 var(--hd);color:var(--ac);opacity:.35;margin-bottom:10px}
.qb blockquote{font:var(--qw,500) clamp(24px,3.6vw,46px)/1.22 var(--hq,var(--hd));text-wrap:balance;letter-spacing:var(--hdls,0)}.qwho{margin-top:26px}.qwho b{display:block;font:700 18px var(--hd)}.qwho span{color:var(--mut);font-size:15px}

/* ---- insignias ---- */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,22px)}.bdg{padding:clamp(20px,2.4vw,30px);border-radius:var(--r,18px);border:1px solid var(--line);background:var(--card);text-align:left}
.bdg i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ac);color:var(--on);font:normal 22px/1 var(--bd);margin-bottom:16px}.bdg b{display:block;font:700 19px/1.2 var(--hd);margin-bottom:6px}.bdg span{color:var(--mut);font-size:15px}
@media (max-width:900px){.badges{grid-template-columns:1fr 1fr}}

/* ---- pestañas ---- */
.tabbar{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin-bottom:22px}.tabbar::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:48px;padding:0 22px;border-radius:var(--rb,999px);border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);background:transparent;cursor:pointer;font:700 15px var(--bd);transition:all .2s}.tab:hover{border-color:var(--ac)}.tab.on{background:var(--ac);border-color:var(--ac);color:var(--on)}
.pane{display:none;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(22px,3vw,40px);border-radius:var(--r,22px);background:var(--card);border:1px solid var(--line)}.pane.on{display:grid;animation:paneIn .5s}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}}
.pane h3{font:700 clamp(24px,2.6vw,34px)/1.15 var(--hd);margin-bottom:10px}.pane p{color:var(--mut);margin-bottom:16px}.pane figure{margin:0;border-radius:calc(var(--r,22px)*.8);overflow:hidden;aspect-ratio:4/3}.pane figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.pane.on{grid-template-columns:1fr}}

/* ---- comparación ---- */
.cmp{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r,20px);background:var(--card)}.cmp table{width:100%;border-collapse:collapse;min-width:560px}.cmp th,.cmp td{padding:16px 20px;text-align:center;border-bottom:1px solid var(--line);font-size:16px}.cmp th:first-child,.cmp td:first-child{text-align:left;font-weight:600}
.cmp th{font:700 17px var(--hd)}.cmp .hot{background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ink);font-weight:700}.cmp tr:last-child td{border-bottom:0}

/* ---- logos / sellos ---- */
.logos{text-align:center}.logos p{font:700 12.5px var(--bd);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:22px}.lg{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 38px}.lg span{font:var(--hdw,700) clamp(19px,2vw,26px) var(--hd);color:var(--mut);opacity:.8}

/* ---- tienda: tarjetas con foto (b-libreria, etc.) ---- */
.prod .im.ph{background:var(--bg2)}.prod .im.ph img{object-fit:cover}