/*
Theme Name: Mariona Agency 2027
Theme URI: https://mariona.net
Author: Mariona Agency
Author URI: https://mariona-agency.com
Description: Sistema web de Mariona Agency. Agencia estratégica y creativa en Barcelona.
Version: 1.1
Text Domain: mariona2027
*/

/* ===== Tipografía ===== */
@font-face{font-family:'nh-light';src:url('assets/fonts/Nh-45l.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'nh-roman';src:url('assets/fonts/Nh-roman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'nh-medium';src:url('assets/fonts/Nh-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#1F2322; --ink2:#282D2B; --bone:#F6F5F3; --sand:#E9E8DD; --stone:#D6D1CA; --orange:#FF4D00;
  --paper:#F6F5F3;
  --t-1:var(--bone); --t-2:rgba(246,245,243,.72); --t-3:rgba(246,245,243,.5);
  --line:rgba(246,245,243,.12);
  --f-text:'nh-roman',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-label:'nh-medium',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  --ease-spring:cubic-bezier(.34,1.26,.4,1);
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--t-1);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}

.eyebrow{font-family:var(--f-label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:20px}
h1,h2,h3{font-family:var(--f-text);font-weight:400;line-height:1.02;letter-spacing:-.03em;color:var(--t-1)}
.h-big{font-size:clamp(30px,4.6vw,58px)}
.lede{font-size:clamp(18px,2vw,23px);color:var(--t-2);line-height:1.5;max-width:46ch}
.body-t{font-size:clamp(16px,1.25vw,18px);color:var(--t-2);line-height:1.62}
.block{padding:clamp(72px,10vw,140px) 0}
.block.tight{padding:clamp(52px,7vw,96px) 0}
.surface{background:var(--ink2)}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.mt-s{margin-top:20px}.mt-m{margin-top:34px}

/* ===== Cápsula de navegación → menú (morph) ===== */
.ma-shell{
  position:fixed;top:24px;left:50%;transform:translateX(-50%);
  width:min(90%,var(--maxw));height:55px;border-radius:10px;
  background:rgba(233,232,221,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  z-index:80;overflow:hidden;
  transition:top .62s var(--ease-sheet),width .62s var(--ease-sheet),height .62s var(--ease-sheet),border-radius .62s var(--ease-sheet),background-color .62s var(--ease-sheet);
}
body.menu-open .ma-shell{
  top:10px;width:calc(100vw - 20px);height:calc(100dvh - 20px);
  border-radius:18px;background:var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.ma-row{position:absolute;top:0;left:0;right:0;height:55px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 8px;z-index:3}
.ma-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;color:var(--ink);transition:color .5s}
body.menu-open .ma-logo{color:var(--bone)}
.ma-logo svg{display:block;height:16px;width:auto;fill:currentColor}
.ma-burger{width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;border-radius:12px}
.ma-burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);transition:transform .55s var(--ease-spring),top .55s var(--ease-spring),background .5s}
.ma-burger span:nth-child(1){top:18px}
.ma-burger span:nth-child(2){top:25px}
body.menu-open .ma-burger span{background:var(--bone)}
body.menu-open .ma-burger span:nth-child(1){top:21.5px;transform:rotate(45deg)}
body.menu-open .ma-burger span:nth-child(2){top:21.5px;transform:rotate(-45deg)}
.ma-pill{font-family:var(--f-label);font-size:12px;letter-spacing:.05em;text-decoration:none;background:var(--orange);color:#fff;padding:9px 18px;border-radius:999px;transition:opacity .3s,transform .3s,background .25s}
.ma-pill:hover{background:#E04400}
body.menu-open .ma-row .ma-pill{opacity:0;transform:scale(.9);pointer-events:none}

/* Interior del menú */
.ma-inner{position:absolute;inset:0;padding:12vh 6% 3.6vh;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .4s}
body.menu-open .ma-inner{opacity:1;visibility:visible;transition:opacity .3s ease .15s,visibility 0s}
.ma-nav{list-style:none;display:flex;flex-direction:column}
.ma-nav a{
  display:block;text-decoration:none;
  font-size:clamp(52px,12vh,150px);line-height:.94;letter-spacing:-.035em;
  color:rgba(246,245,243,.32);
  transform:translateX(6vw);opacity:0;
  transition:transform .3s var(--ease-spring),opacity .3s ease,color .35s ease;
  will-change:transform,opacity;
}
body.menu-open .ma-nav a{
  transform:translateX(0);opacity:1;
  transition:transform .8s var(--ease-spring),opacity .5s ease,color .35s ease;
  transition-delay:calc(.22s + var(--i)*.05s),calc(.22s + var(--i)*.05s),0s;
}
body.menu-open .ma-nav a:hover{color:var(--bone);transform:translateX(.8vw)}
body.menu-open .ma-nav a:active{color:var(--orange)}
.ma-menu-meta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 36px;padding-top:3vh;border-top:1px solid var(--line);opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .4s var(--ease-sheet)}
body.menu-open .ma-menu-meta{opacity:1;transform:none;transition-delay:.44s}
.ma-menu-meta .l{display:flex;flex-wrap:wrap;gap:8px 26px}
.ma-menu-meta .l a,.ma-menu-meta .l span{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-3);text-decoration:none}
.ma-menu-meta .l a:hover{color:var(--bone)}
.ma-cta{font-family:var(--f-label);font-size:13px;letter-spacing:.04em;text-decoration:none;background:var(--orange);color:#fff;padding:14px 28px;border-radius:999px;transition:transform .5s var(--ease-spring),background .3s}
.ma-cta:hover{transform:scale(1.05);background:#E04400}

/* Transición de salida */
main,footer{transition:opacity .3s ease}
body.pushing main,body.pushing footer{opacity:0}
body.pushing .ma-shell{opacity:0;transition:opacity .3s ease}

/* ===== Reveals ===== */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-rv].in{opacity:1;transform:none}
html.norv [data-rv]{opacity:1;transform:none}

/* ===== Hero portada ===== */
.home-hero{min-height:92vh;display:flex;align-items:flex-end;padding-bottom:9vh}
.home-hero h1{font-size:clamp(46px,8.2vw,124px)}
.home-hero .rot{display:inline-grid;color:var(--orange)}
.home-hero .rot b{grid-area:1/1;font-weight:400;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;white-space:nowrap}
.home-hero .rot b.on{opacity:1;transform:none}
.home-hero .lede{margin-top:26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{font-family:var(--f-label);font-size:14px;letter-spacing:.04em;text-decoration:none;padding:15px 30px;border-radius:999px;transition:transform .5s var(--ease-spring),background .3s,color .3s,border-color .3s;border:1px solid var(--bone);color:var(--bone)}
.btn:hover{transform:scale(1.04)}
.btn.solid{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.orange:hover{background:#E04400}

/* ===== Marquee ===== */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.mq .in{display:flex;gap:44px;white-space:nowrap;font-family:var(--f-label);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-3);animation:mamq 28s linear infinite;width:max-content}
.mq .in i{font-style:normal;color:var(--orange)}
@keyframes mamq{to{transform:translateX(-50%)}}

/* ===== Índice de servicios ===== */
.zn-page{height:100vh;overflow:hidden;position:relative}
.zn-head{position:fixed;top:104px;left:5%;z-index:5;pointer-events:none}
.zn-scroll{position:absolute;top:var(--bar-h,104px);left:0;right:0;bottom:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.zn-scroll::-webkit-scrollbar{display:none}
.zn-list{list-style:none;padding:42vh 5% 46vh}
.zn-list li{white-space:nowrap;line-height:.9;letter-spacing:-.04em;margin:0}
.zn-list a,.zn-list span{display:inline-block;text-decoration:none;color:var(--bone);transition:color .3s ease;will-change:opacity}
.zn-list .zi{cursor:pointer}
.zn-list li.on a,.zn-list li.on span{color:var(--bone)}
.zn-list .zi:hover{color:var(--orange)}
.zn-arrow{position:fixed;right:5%;bottom:4.5vh;z-index:5;pointer-events:none;opacity:.55;transition:opacity .6s ease;animation:znarrow 2.2s ease-in-out infinite}
.zn-arrow svg{display:block;width:20px;height:20px;stroke:var(--bone);stroke-width:1.5;fill:none}
body.zn-scrolled .zn-arrow{opacity:0;animation:none}
@keyframes znarrow{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ===== Landing de servicio ===== */
.sv-hero{min-height:78vh;display:flex;align-items:flex-end;padding:150px 0 9vh}
.sv-hero h1{font-size:clamp(56px,11vw,170px);letter-spacing:-.035em}
.sv-caps{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.sv-caps span{font-family:var(--f-label);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;border:1px solid rgba(246,245,243,.25);border-radius:100px;color:var(--t-2)}
.fase{display:grid;grid-template-columns:auto 1fr;gap:20px 28px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fase .num{font-family:var(--f-label);font-size:13px;letter-spacing:.12em;color:var(--orange)}
.fase h3{font-size:clamp(20px,2.2vw,28px)}
.fase p{color:var(--t-2);margin-top:6px;max-width:70ch}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.case{border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;text-decoration:none;background:var(--ink2);transition:transform .5s var(--ease-spring),border-color .3s;transform:translateZ(0)}
.case:hover{transform:translateY(-4px);border-color:var(--bone)}
.case .k{font-family:var(--f-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.case h3{font-size:clamp(19px,1.8vw,24px);margin-top:10px}
.case .go{font-family:var(--f-label);font-size:12px;letter-spacing:.06em;color:var(--t-3);margin-top:18px;display:block}

/* ===== Franja naranja (panel de marca: texto tinta) ===== */
.cta-band{background:var(--orange);color:var(--ink);border-radius:0}
.cta-band h2,.cta-band .lede,.cta-band .body-t{color:var(--ink)}
.cta-band h2{font-size:clamp(34px,5.4vw,72px);letter-spacing:-.025em}
.cta-band .eyebrow{color:var(--ink);opacity:.55}
.cta-band .btn{border-color:var(--ink);color:var(--ink);margin-top:30px}
.cta-band .btn:hover{background:var(--ink);color:var(--orange)}

/* Hero naranja de página */
.pg-orange{background:var(--orange);color:var(--ink)}
.pg-orange h1,.pg-orange .lede,.pg-orange p{color:var(--ink)}
.pg-orange .lede{opacity:.85}
.pg-orange .eyebrow{color:var(--ink);opacity:.55}

/* ===== Pie ===== */
.ma-foot{border-top:1px solid var(--line);padding:clamp(48px,7vw,90px) 0 40px}
.ma-foot .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start}
.ma-foot .wm svg{height:18px;width:auto;fill:var(--bone)}
.ma-foot .nap{font-size:15px;color:var(--t-2);line-height:1.7}
.ma-foot .nap a{text-decoration:none}
.ma-foot .nap a:hover{color:var(--orange)}
.ma-foot .legal{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--t-3)}
.ma-foot .legal a{text-decoration:none}
.ma-foot .legal a:hover{color:var(--orange)}
.ma-foot .about{margin-top:34px;max-width:70ch;font-size:14px;color:var(--t-3);line-height:1.65}
.ma-foot .social{display:flex;gap:26px;margin-top:26px}
.ma-foot .social a{font-family:var(--f-label);font-size:clamp(22px,3vw,40px);letter-spacing:-.01em;text-decoration:none;transition:color .3s}
.ma-foot .social a:hover{color:var(--orange)}
.ma-foot .fine{margin-top:38px;font-size:12px;color:var(--t-3)}

/* ===== Página interior ===== */
.pg-hero{padding:170px 0 0}
.pg-hero h1{font-size:clamp(40px,6.4vw,88px)}
.pg-hero .lede{margin-top:24px}
.pg-hero.pg-orange{padding:170px 0 clamp(52px,7vw,96px)}

/* Quiénes somos */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mv .cell{background:var(--ink2);border:1px solid var(--line);border-radius:20px;padding:30px 28px}
.mv h3{font-size:clamp(20px,2vw,26px);margin-bottom:10px}
.studio-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.studio-grid img{border-radius:18px;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.duo{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
.duo img{border-radius:20px}
.note{background:var(--ink2);border:1px solid var(--line);border-radius:22px;padding:clamp(28px,4vw,48px)}
.note .sign{margin-top:26px;font-family:var(--f-label);letter-spacing:.08em}
.note .sign small{display:block;font-size:11px;letter-spacing:.16em;color:var(--t-3);margin-top:4px;text-transform:uppercase}

/* Enlace editorial grande */
.biglink{display:block;text-decoration:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(28px,4vw,44px) 0;transition:padding .4s var(--ease-sheet)}
.biglink:hover{padding-left:14px}
.biglink .t{font-size:clamp(28px,4.6vw,58px);letter-spacing:-.025em;line-height:1.05}
.biglink .t i{font-style:normal;color:var(--orange)}
.biglink .s{font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-3);margin-top:10px;display:block}

/* Contacto */
.ct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ct-cell{background:var(--ink2);border:1px solid var(--line);border-radius:20px;padding:30px 28px}
.ct-cell .k{font-family:var(--f-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.ct-cell p,.ct-cell a{font-size:clamp(18px,1.8vw,24px);line-height:1.4;text-decoration:none;margin-top:12px;display:block;color:var(--t-1)}
.ct-cell a:hover{color:var(--orange)}

/* ===== Filosofía ===== */
.cf-hero{min-height:88vh;display:flex;align-items:flex-end;padding-bottom:8vh}
.cf-title{font-size:clamp(46px,8.4vw,128px);line-height:1}
.cf-title .w{display:inline-block;filter:blur(10px);opacity:0;letter-spacing:.08em;animation:settle 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.cf-title .w:nth-child(1){animation-delay:.15s}
.cf-title .w:nth-child(2){animation-delay:.3s}
.cf-title .amp{color:var(--orange);display:inline-block;filter:blur(10px);opacity:0;animation:settle 1.1s cubic-bezier(.2,.7,.2,1) .45s forwards}
.cf-title .w:nth-child(4){animation-delay:.6s}
.cf-title .w:nth-child(5){animation-delay:.75s}
@keyframes settle{to{filter:blur(0);opacity:1;letter-spacing:-.03em}}
.cf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-card{background:var(--ink2);border:1px solid var(--line);border-radius:22px;padding:clamp(28px,3.4vw,44px);transition:transform .6s var(--ease-spring),border-color .3s}
.cf-card:hover{transform:translateY(-4px);border-color:var(--bone)}
.cf-card h3{font-size:clamp(24px,2.6vw,34px)}
.cf-card .q{font-size:clamp(18px,1.9vw,23px);line-height:1.4;margin:16px 0 14px;color:var(--t-1)}
.cf-card .body-t{margin-bottom:16px}
.cf-card ul{list-style:none}
.cf-card li{font-family:var(--f-label);font-size:13px;letter-spacing:.02em;color:var(--t-2);padding:9px 0;border-top:1px solid var(--line)}
.cf-mani{background:var(--ink2);padding:clamp(110px,16vw,220px) 0;position:relative;overflow:hidden}
.cf-mani::before{content:"";position:absolute;inset:0;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");transition:opacity 1.6s ease}
.cf-mani.calm::before{opacity:0}
.cf-mani h2{font-size:clamp(48px,8.6vw,132px);letter-spacing:-.035em;position:relative;line-height:.98}
.cf-mani em{font-style:normal;color:rgba(246,245,243,.4)}
.cf-mani .body-t{max-width:72ch;position:relative}
.cf-disc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dc{background:var(--ink2);border:1px solid var(--line);border-radius:20px;padding:26px 24px;transition:transform .6s var(--ease-spring),border-color .3s}
.dc:hover{transform:translateY(-4px);border-color:var(--bone)}
.dc h3{font-size:clamp(19px,1.8vw,24px);margin-bottom:12px}
.dc p{font-size:14.5px;color:var(--t-2);line-height:1.55;margin-top:8px}
.dc b{font-family:var(--f-label);font-weight:500;color:var(--t-1)}
.cf-tl{position:relative;padding-left:34px}
.cf-tl .rail{position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:rgba(246,245,243,.14)}
.cf-tl .rail i{position:absolute;top:0;left:0;width:100%;height:0;background:var(--orange);transition:height .2s linear}
.cf-tl .step{display:grid;grid-template-columns:auto 1fr;gap:18px 24px;padding:26px 0;align-items:baseline;position:relative}
.cf-tl .step::before{content:"";position:absolute;left:-31px;top:36px;width:8px;height:8px;border-radius:50%;background:rgba(246,245,243,.25);transition:background .4s,box-shadow .4s}
.cf-tl .step.lit::before{background:var(--orange);box-shadow:0 0 0 5px rgba(255,77,0,.16)}
.cf-tl .num{font-family:var(--f-label);font-size:13px;letter-spacing:.12em;color:var(--orange)}
.cf-tl h3{font-size:clamp(21px,2.3vw,30px)}
.cf-tl p{color:var(--t-2);margin-top:6px;max-width:70ch}


/* ===== Responsive ===== */
@media (max-width:900px){
  .split,.duo,.mv,.cf-two,.cf-disc{grid-template-columns:1fr}
  .cases,.ct-grid{grid-template-columns:1fr}
  .studio-grid{grid-template-columns:1fr 1fr}
  .studio-grid img:first-child{grid-column:1/-1}
  .ma-shell{top:16px;width:92%}
  body.menu-open .ma-shell{top:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px)}
  .ma-inner{padding:11vh 7% 3vh}
  .ma-nav a{font-size:clamp(44px,8.4vh,74px)}
  .home-hero{min-height:86vh}
  .zn-head{top:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001s!important;transition-delay:0s!important;animation:none!important}
  .cf-title .w,.cf-title .amp{filter:none;opacity:1;letter-spacing:-.03em}
}

/* ===== v1.2 ===== */

/* Cortinilla entre páginas */
.ma-curtain{position:fixed;inset:0;background:var(--sand);z-index:300;transform:translateY(102%);pointer-events:none}
html.boot .ma-curtain{transform:none}
html.boot-out .ma-curtain{transform:translateY(-102%);transition:transform .6s var(--ease-sheet)}
body.curtain-exit .ma-curtain{transform:none!important;transition:transform .45s var(--ease-sheet)}

/* Home: vídeo + logotipo centrado, sin frase */
.ih{position:relative;height:100svh;overflow:hidden}
.ih-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ih-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(31,35,34,.12) 0%,rgba(31,35,34,.55) 100%)}
.ih-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ih-logo svg{width:min(64vw,860px);height:auto;fill:var(--bone);filter:drop-shadow(0 14px 50px rgba(0,0,0,.35));opacity:0;transform:translateY(16px) scale(.985);animation:ihlogo 1.4s cubic-bezier(.2,.7,.2,1) .3s forwards}
@keyframes ihlogo{to{opacity:1;transform:none}}

/* La cápsula aparece al bajar en la home y queda fija */
body.home .ma-shell{transform:translate(-50%,-160%);transition:transform .65s var(--ease-sheet),top .62s var(--ease-sheet),width .62s var(--ease-sheet),height .62s var(--ease-sheet),border-radius .62s var(--ease-sheet),background-color .62s var(--ease-sheet)}
body.home.nav-on .ma-shell,body.home.menu-open .ma-shell{transform:translate(-50%,0)}

/* Tintado de palabras al hacer scroll */
.tz{padding:clamp(90px,14vw,190px) 0}
.tz-t{font-size:clamp(30px,4.8vw,66px);line-height:1.14;letter-spacing:-.025em;max-width:22ch}
.tz-t b{font-weight:400;font-family:var(--f-label)}
.tz-t .w{color:rgba(246,245,243,.15);transition:color .3s ease}
.tz-t .w.on{color:var(--bone)}
.tz-t b .w.on{color:var(--orange)}

/* Trabajos: foto grande, texto pequeño */
.works{padding-bottom:clamp(52px,7vw,96px)}
.wk{display:block;width:min(92vw,1500px);margin:0 auto clamp(40px,6vw,80px);text-decoration:none}
.wk figure{overflow:hidden;border-radius:20px;aspect-ratio:16/9;position:relative;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate}
.wk img{width:100%;height:116%;object-fit:cover;transform:translateY(var(--py,0));will-change:transform}
.wk figcaption{display:flex;justify-content:space-between;align-items:baseline;padding:14px 4px 0}
.wk figcaption span{font-family:var(--f-label);font-size:14px;letter-spacing:.02em}
.wk figcaption em{font-style:normal;font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-3)}
.wk:hover img{transform:translateY(var(--py,0)) scale(1.015);transition:transform .8s var(--ease-sheet)}

/* Pie compacto + logotipo gigante */
.ma-foot{border-top:1px solid var(--line);padding:clamp(36px,5vw,60px) 0 26px}
.frow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px}
.fnap{font-size:13.5px;color:var(--t-2);line-height:1.65}
.fnap a{text-decoration:none}
.fnap a:hover{color:var(--orange)}
.flegal{display:flex;gap:22px;font-size:12px;color:var(--t-3)}
.flegal a{text-decoration:none}
.flegal a:hover{color:var(--orange)}
.fgiant{width:min(94vw,1600px);margin:clamp(40px,6vw,80px) auto 0;transform:translateY(34%);opacity:.12;will-change:transform,opacity}
.fgiant svg{display:block;width:100%;height:auto;fill:var(--bone);transition:fill .5s}
.fgiant:hover svg{fill:var(--orange)}
.ffine{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:26px;font-size:11.5px;color:var(--t-3)}
.fsoc{display:flex;gap:20px}
.fsoc a{text-decoration:none;font-family:var(--f-label);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.fsoc a:hover{color:var(--orange)}

/* Franja naranja: respiración y sin solapes */
.cta-band h2{margin-bottom:26px;overflow-wrap:break-word}
.cta-band .btn{margin-top:0}

/* Filosofía v2 */
.od{display:flex;align-items:baseline;gap:.5em;font-size:clamp(26px,3.6vw,52px);letter-spacing:-.02em}
.od .od-l{color:var(--t-2)}
.od-stack{display:inline-grid;overflow:hidden;height:1.18em;min-width:6.2ch}
.od-stack b{grid-area:1/1;font-weight:400;font-family:var(--f-label);color:var(--orange);transform:translateY(130%);opacity:0;transition:transform .6s var(--ease-spring),opacity .4s}
.od-stack b.on{transform:none;opacity:1}
.od-stack b.out{transform:translateY(-130%);opacity:0}
.cf-mean{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,60px);align-items:center}
.cf-display{font-size:clamp(38px,6.2vw,92px);line-height:1.02;letter-spacing:-.03em;font-family:var(--f-text);font-weight:300}
.cf-display b{font-family:var(--f-label);font-weight:500}
.cf-seal{width:clamp(130px,14vw,190px);height:auto;animation:sealspin 26s linear infinite}
.cf-seal text{font-family:var(--f-label);font-size:12.5px;letter-spacing:.34em;fill:rgba(246,245,243,.55)}
@keyframes sealspin{to{transform:rotate(360deg)}}
.cf-seal{transform-origin:center}
@media (max-width:900px){.cf-mean{grid-template-columns:1fr}.cf-seal{display:none}}

/* Galería que crece al desplazarse */
.studio-grid.grow img{transform:scale(var(--gs,.86));border-radius:22px;will-change:transform}

/* ===== v1.2.1 ===== */

/* Disciplinas con imagen de fondo */
.cf-apply{position:relative;overflow:hidden;padding:clamp(90px,13vw,180px) 0;transform:translateZ(0)}
.cf-apply .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf-apply .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,35,34,.88) 0%,rgba(31,35,34,.62) 45%,rgba(31,35,34,.9) 100%)}
.cf-apply .inz{position:relative;z-index:2}
.cf-dlist{list-style:none;margin-top:clamp(30px,4vw,54px)}
.cf-dlist li{font-size:clamp(26px,4.4vw,58px);line-height:1.16;letter-spacing:-.025em;color:rgba(246,245,243,.55);border-top:1px solid rgba(246,245,243,.16);padding:14px 0;transition:color .3s,padding-left .4s var(--ease-sheet)}
.cf-dlist li:hover{color:var(--bone);padding-left:12px}
.cf-dlist li:last-child{border-bottom:1px solid rgba(246,245,243,.16)}

/* Servicios en móvil: grande, a dos líneas y con aire */
@media (max-width:700px){
  .zn-list{padding:36vh 7% 42vh}
  .zn-list li{white-space:normal;margin:30px 0}
  .zn-list .zi{font-size:clamp(38px,11vw,58px)!important;line-height:1.03;letter-spacing:-.02em}
}

/* ===== v1.2.2 ===== */

/* Principios — estilo opendue: fondo claro, centrado, aparecen uno a uno */
.cf-prin{background:var(--bone);color:var(--ink);padding:clamp(90px,16vw,200px) 0;text-align:center}
.cf-prin .eyebrow{color:var(--orange)}
.prin-stack{margin-top:clamp(40px,7vw,90px);display:flex;flex-direction:column;gap:clamp(60px,10vw,150px)}
.prin{opacity:.1;transform:translateY(72px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.prin.in{opacity:1;transform:none}
.prin h3{font-size:clamp(30px,6vw,84px);line-height:1.02;letter-spacing:-.03em;font-weight:400;max-width:16ch;margin:0 auto;color:var(--ink)}
.prin p{margin:clamp(14px,2vw,22px) auto 0;font-size:clamp(15px,1.6vw,20px);color:var(--ink-soft,#4a4f4d);max-width:44ch}
html.norv .prin{opacity:1;transform:none}

/* Manifiesto localizable */
.mani-eye{color:var(--orange)}

/* CTA final con chicha: flecha animada + hover */
.cta-band{position:relative;overflow:hidden}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{margin-bottom:clamp(26px,4vw,44px);max-width:16ch}
.cta-band .btn{margin-top:0;display:inline-flex;align-items:center;gap:12px}
.cta-band .btn::after{content:"→";transition:transform .4s var(--ease-spring)}
.cta-band .btn:hover::after{transform:translateX(6px)}
.cta-band .arc{position:absolute;right:-6%;top:50%;transform:translateY(-50%);font-size:clamp(160px,30vw,420px);line-height:1;font-family:var(--f-label);color:rgba(31,35,34,.08);pointer-events:none;user-select:none;z-index:1;white-space:nowrap}

/* Pie: logo del pie animado (letras que suben al entrar) */
.fgiant{overflow:hidden}
.fgiant svg{transform:translateY(18%);opacity:.55;transition:transform 1.1s var(--ease-sheet),opacity 1.1s ease,fill .5s}
.fgiant.in svg{transform:translateY(0);opacity:1}
.fgiant.in:hover svg{fill:var(--orange)}
html.norv .fgiant svg{transform:none;opacity:1}
/* Pie con más chicha: enlaces grandes de navegación */
.foot-nav{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,54px);padding:clamp(30px,5vw,60px) 0;border-bottom:1px solid var(--line)}
.foot-nav a{text-decoration:none;font-size:clamp(24px,3.4vw,44px);letter-spacing:-.02em;color:var(--t-2);transition:color .3s,transform .4s var(--ease-spring)}
.foot-nav a:hover{color:var(--bone);transform:translateY(-3px)}