/* Sanartte Labs — inner pages: layout blocks + 3D layer */

/* ---------- 3D primitives ---------- */
.p3d{perspective:1100px}
.tilt{position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .4s var(--ease);mix-blend-mode:soft-light}
.tilt:hover .glare{opacity:1}
.tilt .lift,.tilt .lift-s{transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .tilt:hover .lift{transform:translateZ(34px)}
  .tilt:hover .lift-s{transform:translateZ(16px)}
}

/* ---------- page hero with depth ---------- */
.ph{position:relative;min-height:100svh;background:var(--olive-900);color:var(--bone);overflow:hidden;display:grid;align-items:end}
.ph-bg{position:absolute;inset:-6%;z-index:0;will-change:transform}
.ph-bg img{width:100%;height:100%;object-fit:cover}
.ph-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(31,35,18,.78),rgba(31,35,18,.42) 45%,rgba(31,35,18,.92))}
.ph-grain{position:absolute;inset:0;z-index:2;opacity:.055;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph-obj{position:absolute;z-index:3;right:8%;top:22%;width:clamp(150px,19vw,270px);aspect-ratio:26/30;pointer-events:none;will-change:transform}
.ph-obj svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 40px 34px rgba(0,0,0,.5)) drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.ph-inner{position:relative;z-index:4;padding:130px 0 64px;width:100%}
.ph-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:rgba(233,234,223,.6);margin-bottom:22px}
.ph-crumb a:hover{color:var(--bone)}
.ph h1{max-width:15ch}
.ph .ph-claim{margin-top:14px;color:var(--olive-300);font-size:clamp(1.2rem,2.2vw,1.8rem);letter-spacing:-.015em;max-width:26ch}
.ph .lead{color:rgba(233,234,223,.8);margin-top:22px}
.ph-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.ph-sub{position:relative;z-index:4;border-top:1px solid rgba(233,234,223,.14)}
.ph-sub ul{list-style:none;display:flex;gap:6px 22px;flex-wrap:wrap;padding:16px 0}
.ph-sub a{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:rgba(233,234,223,.72);font-size:.95rem;transition:color .25s var(--ease)}
.ph-sub a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.ph-sub a:hover{color:var(--bone)}

/* ---------- section scaffolding ---------- */
.sec{padding:clamp(80px,11vw,160px) 0;position:relative}
.sec.bone{background:var(--bone)}
.sec.paper{background:var(--paper)}
.sec.sand{background:var(--bone-2)}
.sec.dark{background:var(--olive-900);color:var(--bone)}
.sec.sage{background:var(--olive-500);color:var(--olive-900)}
.sec.dark .kicker{color:var(--olive-300)}
.sec.dark .lead{color:rgba(233,234,223,.76)}
.sec.sage .kicker{color:var(--olive-900)}
.sec.sage .lead{color:rgba(31,35,18,.82)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(40px,6vw,72px);max-width:880px}
.sec-head.split{max-width:none;grid-template-columns:1fr}
@media (min-width:900px){ .sec-head.split{grid-template-columns:1.1fr .9fr;align-items:end;gap:48px} }

/* ---------- starts: three entry doors ---------- */
.doors{display:grid;grid-template-columns:1fr;gap:18px}
.door{background:var(--paper);border:1px solid var(--bone-2);border-radius:20px;padding:34px 28px 30px;min-height:250px;display:grid;align-content:space-between;gap:26px;overflow:hidden}
.door .n{font:500 11px var(--mono);letter-spacing:.1em;color:var(--gold)}
.door h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.door p{color:var(--ink-2)}
.sec.dark .door{background:rgba(233,234,223,.05);border-color:rgba(233,234,223,.12)}
.sec.dark .door p{color:rgba(233,234,223,.72)}
@media (min-width:860px){ .doors{grid-template-columns:repeat(3,1fr)} }

/* ---------- feature rows: numbered services ---------- */
.rows{display:grid;gap:clamp(18px,3vw,28px)}
.row{display:grid;grid-template-columns:1fr;gap:26px;background:var(--paper);border:1px solid var(--bone-2);border-radius:24px;overflow:hidden;scroll-margin-top:90px}
.row-media{position:relative;min-height:260px;overflow:hidden;background:var(--olive-700)}
.row-media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.row-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(31,35,18,.05),rgba(31,35,18,.45))}
.row-media .big-n{position:absolute;left:22px;bottom:12px;z-index:2;font-size:clamp(4rem,9vw,8rem);letter-spacing:-.05em;line-height:1;color:rgba(233,234,223,.92)}
.row-body{padding:6px 28px 32px;display:grid;gap:14px;align-content:center}
.row-body h2,.row-body h3{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:400;letter-spacing:-.025em;line-height:1.06}
.row-body .claim{font-size:1.15rem;color:var(--olive-500);letter-spacing:-.01em}
.row-body p{color:var(--ink-2);max-width:56ch}
.row-body .arrow{justify-self:start;margin-top:6px}
@media (min-width:900px){
  .row{grid-template-columns:.95fr 1.05fr;gap:0;min-height:440px}
  .row.flip .row-media{order:2}
  .row-body{padding:46px 52px}
}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips li{list-style:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(31,35,18,.16);background:rgba(255,255,255,.35);font-size:.9rem;color:var(--ink)}
.sec.dark .chips li,.ph .chips li{border-color:rgba(233,234,223,.2);background:rgba(233,234,223,.06);color:var(--bone)}
.sec.sage .chips li{border-color:rgba(31,35,18,.25);background:rgba(233,234,223,.28)}
.chips.big li{min-height:48px;padding:0 20px;font-size:1.05rem}

/* ---------- flow chain (idea → ... → producto terminado) ---------- */
.flow{list-style:none;display:grid;grid-template-columns:1fr;gap:0;counter-reset:f}
.flow li{counter-increment:f;position:relative;display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid currentColor;border-color:rgba(31,35,18,.2);font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:-.015em}
.sec.dark .flow li{border-color:rgba(233,234,223,.16)}
.flow li::before{content:"0" counter(f);font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--gold);width:26px;flex:none}
.flow li::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:currentColor;transform:scaleX(var(--p,0));transform-origin:0 50%}
@media (min-width:1000px){
  .flow.h{grid-template-columns:repeat(var(--n,7),1fr);gap:10px}
  .flow.h li{flex-direction:column;align-items:flex-start;gap:26px;padding:18px 0 0;font-size:1.12rem;min-height:130px}
}

/* ---------- 3D stack of cards (formats, categories) ---------- */
.stack{display:grid;grid-template-columns:1fr;gap:18px}
.card3{background:var(--paper);border:1px solid var(--bone-2);border-radius:22px;padding:30px 28px;display:grid;gap:14px;align-content:start;min-height:100%;scroll-margin-top:90px}
.card3 .n{font:500 11px var(--mono);letter-spacing:.1em;color:var(--gold)}
.card3 h3{font-size:clamp(1.45rem,2.3vw,1.95rem);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.card3 .claim{color:var(--olive-500);font-size:1.05rem}
.card3 p{color:var(--ink-2)}
.card3 .ideal{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.sec.dark .card3{background:rgba(233,234,223,.05);border-color:rgba(233,234,223,.12)}
.sec.dark .card3 p{color:rgba(233,234,223,.74)}
@media (min-width:760px){ .stack{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .stack.three{grid-template-columns:repeat(3,1fr)} }

/* mini 3D pack icon for format cards */
.pack{width:74px;height:74px;perspective:420px;margin-bottom:6px}
.pack i{display:block;width:100%;height:100%;border-radius:12px;background:linear-gradient(145deg,var(--bone),var(--olive-300));box-shadow:inset 0 0 0 1px rgba(31,35,18,.12),0 14px 20px -12px rgba(31,35,18,.5);transform:rotateX(18deg) rotateY(-24deg);transition:transform .8s var(--ease)}
.card3:hover .pack i{transform:rotateX(6deg) rotateY(18deg)}
.pack.tri i{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.pack.bag i{clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);border-radius:6px}
.pack.stick i{width:34%;margin:0 auto;border-radius:6px}
.pack.jar i{border-radius:14px 14px 22px 22px;width:70%;margin:0 auto}
.pack.box i{border-radius:4px}

/* ---------- evaluate grid (words) ---------- */
.words{display:flex;flex-wrap:wrap;gap:10px 12px}
.words span{font-size:clamp(1.3rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.words span:not(:last-child)::after{content:"·";color:var(--gold);margin-left:12px}
.sec.dark .words span{color:var(--bone)}

/* ---------- statement ---------- */
.statement-big{font-size:clamp(2.2rem,6.4vw,6rem);letter-spacing:-.035em;line-height:1.02;max-width:16ch}
.grow-lines p{letter-spacing:-.025em;line-height:1.1;margin-top:18px}
.grow-lines p:nth-child(1){font-size:clamp(1.25rem,2.1vw,1.8rem);opacity:.6}
.grow-lines p:nth-child(2){font-size:clamp(1.8rem,3.6vw,3.1rem);opacity:.8}
.grow-lines p:nth-child(3){font-size:clamp(2.3rem,5.8vw,5.2rem);max-width:17ch}

/* ---------- split text + image ---------- */
.split2{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.frame{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--olive-700)}
.frame img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.frame .cut{position:absolute;right:8%;top:10%;width:30%;aspect-ratio:1/1;background:var(--bone);z-index:2}
.sec.dark .frame .cut{background:var(--olive-900)}
@media (min-width:900px){ .split2{grid-template-columns:1fr 1fr;gap:72px} .split2.flip > :first-child{order:2} }

/* ---------- values grid ---------- */
.values{display:grid;grid-template-columns:1fr;gap:16px}
.value{background:rgba(233,234,223,.05);border:1px solid rgba(233,234,223,.12);border-radius:20px;padding:28px 26px;display:grid;gap:12px;align-content:start}
.value .n{font:500 11px var(--mono);letter-spacing:.1em;color:var(--gold)}
.value h3{font-size:1.45rem;font-weight:400;letter-spacing:-.02em;line-height:1.15}
.value p{color:rgba(233,234,223,.74)}
@media (min-width:760px){ .values{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .values{grid-template-columns:repeat(4,1fr)} .value.wide{grid-column:span 2} }

/* ---------- list with lines ---------- */
.lines-list{list-style:none;border-top:1px solid rgba(31,35,18,.16)}
.lines-list li{padding:16px 0;border-bottom:1px solid rgba(31,35,18,.16);font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.01em}
.sec.dark .lines-list,.sec.dark .lines-list li{border-color:rgba(233,234,223,.14)}

/* ---------- mission / vision ---------- */
.mv{display:grid;grid-template-columns:1fr;gap:18px}
.mv > *{border-radius:24px;padding:clamp(30px,4vw,52px);display:grid;gap:16px;align-content:start}
.mv .vision{background:var(--olive-900);color:var(--bone)}
.mv .mission{background:var(--olive-500);color:var(--olive-900)}
.mv .kicker{color:inherit;opacity:.92}
.mv h3{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:400;letter-spacing:-.025em;line-height:1.08}
@media (min-width:900px){ .mv{grid-template-columns:1fr 1fr} }

/* ---------- blog categories ---------- */
.topic{display:grid;grid-template-columns:1fr;gap:22px;padding:clamp(34px,5vw,56px) 0;border-top:1px solid var(--bone-2);scroll-margin-top:90px}
.topic .n{font:500 11px var(--mono);letter-spacing:.1em;color:var(--gold)}
.topic h2{font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:400;letter-spacing:-.025em;line-height:1.06}
.topic .claim{color:var(--olive-500);font-size:1.12rem}
.topic p{color:var(--ink-2);max-width:52ch}
.articles{list-style:none;display:grid;grid-template-columns:1fr;gap:10px}
.articles li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:14px 18px;border-radius:14px;background:var(--paper);border:1px solid var(--bone-2);font-size:1.02rem}
.articles li span.micro{color:var(--ink-3);white-space:nowrap}
@media (min-width:900px){ .topic{grid-template-columns:.9fr 1.1fr;gap:56px} .articles{grid-template-columns:1fr 1fr} }

/* ---------- closing CTA ---------- */
.close{background:var(--olive-900);color:var(--bone);padding:clamp(100px,13vw,180px) 0;overflow:hidden;position:relative}
.close .statement-big{color:var(--bone)}
.close .statement-big em{font-style:normal;color:var(--olive-300)}
.close p{margin-top:22px;color:rgba(233,234,223,.74);max-width:46ch;font-size:1.08rem}
.close-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.close .pill,.ph .pill,.sec.dark .pill{color:var(--bone)}
.sign{margin-top:48px;display:grid;gap:6px;color:var(--olive-300)}

@media (max-width:759px){
  .ph-obj{right:5%;top:78px;width:22vw}
  .ph-inner{padding:110px 0 44px}
  .row-media{min-height:210px}
}
@media (prefers-reduced-motion:reduce){
  .tilt{transform:none!important}
}