@font-face{font-family:'Mango Grotesque';src:url('../fonts/MangoGrotesque-Bold.otf') format('opentype');font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--azul);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.pr{--display:'Mango Grotesque','League Gothic',sans-serif;--dstretch:82%;--stroke:0px transparent;
  background:var(--azul);color:#ececec;font-family:'Neue Montreal','Schibsted Grotesk',sans-serif;overflow:hidden}
.pr h2,.pr h3,.pr p,.pr blockquote{margin:0}
.disp{font-family:var(--display);font-stretch:var(--dstretch);font-weight:400}
.pr .m{display:none}
.pr .d,.pr .m>*{container-type:inline-size}
.cq{width:100%;container-type:inline-size;position:relative}
.logo{display:block;width:100%;height:auto}
.rv{opacity:0;transform:translateY(3cqw)}
.revealed .rv{opacity:1;transform:none}
.fade{opacity:0}.revealed .fade{opacity:1}

/* ---------- ESCRITORIO ---------- */
.d .hero{position:relative;height:74.31cqw}
.d .hero>*{position:absolute}
.d .hero-bg{left:0;top:0;width:100%;height:71.11cqw;background:#d5dad9}
.big{font-size:21.39cqw;line-height:1;color:var(--azul);transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.d .w1{left:8.19cqw;top:22.64cqw;z-index:1;text-transform:uppercase;transition-delay:.15s}
.d .w2{left:4.86cqw;top:38.68cqw;z-index:3;transition-delay:.3s}
.d .w3{left:50cqw;top:51.46cqw;z-index:3;transition-delay:.45s}
.d .foto{left:12.99cqw;top:0;width:71.67cqw;height:71.11cqw;overflow:hidden;z-index:2;opacity:0;filter:blur(8px);transform:scale(1.03);transform-origin:center bottom;transition:opacity 1.2s cubic-bezier(.45,0,.2,1),filter 1.2s cubic-bezier(.2,.7,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
.revealed .foto{opacity:1;filter:blur(0);transform:none}
.foto img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;transform-origin:center bottom;transform:translate(0,20.5cqw) scale(1.34)}
.d .nav{left:1.39cqw;right:1.39cqw;top:1.94cqw;z-index:8;display:grid;grid-template-columns:29.77% 28.69% 30.41% 1fr;font-size:4.44cqw;line-height:1;color:var(--azul)}
.nav a{justify-self:start;border-bottom:.2cqw solid transparent}
.nav a:hover{border-bottom-color:var(--azul)}
.nav a:last-child{justify-self:end}
.d .claim{right:1.39cqw;top:18.06cqw;width:24cqw;z-index:4;text-align:right;font-weight:700;font-size:2.08cqw;line-height:1;color:var(--azul);text-wrap:pretty;transition:opacity .8s ease .65s,transform 1.1s cubic-bezier(.2,.7,.2,1) .65s}
.d .cta{left:67.99cqw;top:37.22cqw;width:30.63cqw;z-index:4;display:flex;flex-direction:column;gap:.35cqw;color:var(--azul);transition:transform .25s ease,opacity .8s ease .75s}
.cta:hover{transform:translateX(.6cqw)}
.cta span:first-child{font-size:5.56cqw;line-height:.95;white-space:nowrap}
.cta span:last-child{display:block;height:1.11cqw;background:var(--azul)}
.d .down{left:1.39cqw;top:58.4cqw;width:8.26cqw;z-index:4;display:block;transition:transform .25s ease,opacity .8s ease .85s}
.down:hover{transform:translateY(.6cqw)}
.down svg{display:block;width:100%;height:auto}

.d .trabajos{padding:0 1.39cqw;display:flex;flex-direction:column;gap:1.94cqw}
.d .trabajos h2{margin:0 0 -1cqw;text-align:center;font-size:24.31cqw;line-height:.95;color:#ececec}
.work{background:#ececec;color:var(--azul);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));column-gap:1.39cqw;min-height:55.56cqw}
.work .txt{padding:3.47cqw 3.54cqw;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.work h3{max-width:42cqw;font-size:max(40px,6.67cqw);line-height:.83;text-wrap:balance}
.work .tag{font-weight:700;font-size:max(13px,1.39cqw);line-height:1.2;margin-top:.2cqw}
.work .desc{max-width:35.3cqw;font-size:max(15px,1.67cqw);line-height:1.02;text-wrap:pretty}
.work .media{position:relative;overflow:hidden;min-height:min(55.56cqw,800px)}
.media .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.media:hover .img{transform:scale(1.04)}
.media img{position:absolute;left:0;width:100%;object-fit:cover;display:block}
.media .a{top:0;height:49.13%}
.media .b{top:42.38%;height:57.75%}
.media svg{position:absolute;left:0;top:42.38%;width:100%;height:15.25%;display:block}
.more{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:1.6cqw 3.54cqw 1.2cqw;background:#ececec;color:var(--azul);border:.28cqw solid #ececec;font-size:max(32px,6.67cqw);line-height:.9;transition:background .35s ease,color .35s ease}
.more:hover{background:var(--azul);color:#ececec}
.more svg{display:block;width:max(28px,5cqw);height:auto;flex-shrink:0}

.d .servicios{padding-top:2.15cqw;display:flex;flex-direction:column;align-items:center;text-align:center}
.servicios .lbl{font-weight:700;font-size:3.33cqw;line-height:1}
.d .servicios .lst{display:flex;flex-direction:column;align-items:center;font-size:24.31cqw;line-height:.83;margin-top:1.2cqw;padding-bottom:2cqw}

.d .sobre{position:relative;height:71.11cqw;background:#ececec;color:var(--azul)}
.d .sobre>*{position:absolute}
.d .sobre svg{left:2.36cqw;top:2.08cqw;width:8.54cqw;height:auto;display:block}
.d .sobre p{font-size:1.67cqw;line-height:1;text-align:justify}
.d .sobre .p1{left:56cqw;top:14.86cqw;width:20.07cqw;text-indent:4.5cqw}
.d .sobre .p2{left:78cqw;top:4.65cqw;width:19.5cqw;text-indent:3cqw}
.d .sobre h2{left:3.06cqw;top:52.78cqw;font-size:24.31cqw;line-height:1;white-space:nowrap}

.d .testi{position:relative;height:71.6cqw}
.d .testi>*{position:absolute;font-weight:700;line-height:1}
.d .testi h2{left:3.26cqw;top:4.1cqw;width:40.21cqw;font-size:4.44cqw;text-align:justify}
.d .testi .t1{left:33.13cqw;top:24.1cqw;font-size:1.67cqw}
.d .testi .t2{left:53.68cqw;top:43.19cqw;width:6.25cqw;font-size:1.67cqw}
.d .testi .t3{left:53.68cqw;top:65.63cqw;font-size:1.67cqw}
.d .testi blockquote{left:62.43cqw;top:42.57cqw;width:33.33cqw;font-weight:500;font-size:2.78cqw;line-height:.9;text-align:justify;text-indent:7cqw}

.d .contacto{position:relative;height:75.07cqw}
.d .contacto>*{position:absolute}
.contacto .bg{left:0;top:0;width:100%;height:71.6cqw;object-fit:cover;opacity:.56;display:block}
.contacto h2{font-weight:700;line-height:1.1;-webkit-text-stroke:var(--stroke)}
.d .contacto .h1{left:3.47cqw;top:5.63cqw;width:93.06cqw;text-align:center;font-size:8.89cqw}
.d .contacto .mail{left:0;right:0;top:35.49cqw;margin:0 auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:.4cqw;text-align:center;font-weight:700;font-size:2.5cqw;line-height:1;color:var(--azul);-webkit-text-stroke:var(--stroke);transition:opacity .2s}
.mail:hover{opacity:.8}
.mail i{display:block;width:34.03cqw;height:.56cqw;background:#ececec;margin-top:.2cqw}
.d .contacto .h2{left:-3.68cqw;right:-3.68cqw;top:51.39cqw;text-align:center;font-size:8.89cqw}

.d .foot{position:relative;height:68.89cqw}
.d .foot>*{position:absolute}
.d .foot nav{left:1.04cqw;top:3cqw;display:flex;flex-direction:column;font-weight:700;font-size:2.5cqw;line-height:1}
.foot a:hover{opacity:.7}
.d .foot>svg{left:85.97cqw;top:2.43cqw;width:8.54cqw;height:auto;display:block;color:#fff}
.d .foot .big2{left:1.18cqw;right:1.6cqw;top:37.36cqw;display:flex;flex-direction:column;gap:.6cqw}
.big2 hr{height:2px;border:0;background:#ececec;margin:0;width:100%}
.big2 .name{text-align:center;font-size:28.26cqw;line-height:.86;white-space:nowrap;margin:0 -1.6cqw 0 -1.18cqw}
.big2 .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-weight:700;font-size:2.5cqw;line-height:1}
.bar a{justify-self:end}

/* ---------- MÓVIL ---------- */
@media (max-width:767px){
  .pr .d{display:none}
  .pr .m{display:block}
  .m>div{width:100%;container-type:inline-size;position:relative;background:var(--azul)}
  .m .hero{position:relative;height:178cqw;background:#d5dad9;overflow:hidden}
  .m .top{position:absolute;left:4cqw;right:4cqw;top:4cqw;z-index:8;display:flex;align-items:center;justify-content:space-between;color:var(--azul)}
  .m .top a{display:block;width:5.5cqw;min-width:20px}
  .menu-btn{min-height:44px;padding:0 0 0 12px;background:transparent;border:0;color:var(--azul);font-size:clamp(22px,7cqw,34px);line-height:1;white-space:nowrap;cursor:pointer}
  .m .claim{position:absolute;left:4cqw;top:22cqw;width:62cqw;z-index:4;font-weight:700;font-size:max(16px,4.6cqw);line-height:1.05;color:var(--azul);text-wrap:pretty;transition:opacity .8s ease .65s,transform 1.1s cubic-bezier(.2,.7,.2,1) .65s}
  .m .foto{position:absolute;left:0;right:0;top:36cqw;bottom:0;z-index:2;opacity:0;filter:blur(8px);transform:scale(1.03);transform-origin:center bottom;transition:opacity 1.2s cubic-bezier(.45,0,.2,1),filter 1.2s cubic-bezier(.2,.7,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
  .m .revealed .foto,.revealed .m .foto{opacity:1;filter:blur(0);transform:none}
  .m .foto img{width:100%;height:100%;object-fit:cover;object-position:center top;transform-origin:center top;transform:translate(0,-20.5cqw) scale(1.26)}
  .m .big{position:absolute;left:4cqw;white-space:nowrap;z-index:3}
  .m .w2{top:106cqw;font-size:18.7cqw;translate:0 20cqw;transition-delay:.3s}
  .m .w3{top:138cqw;font-size:36.04cqw;translate:0 3cqw;transition-delay:.45s}
  .m .trabajos{padding:6cqw 3cqw 0;display:flex;flex-direction:column;gap:3cqw}
  .m .trabajos h2{text-align:center;font-size:25cqw;line-height:.95;color:#ececec}
  .m .work{display:flex;flex-direction:column;min-height:0}
  .m .work .media{order:-1;aspect-ratio:690/800;min-height:0}
  .m .work .txt{padding:5cqw 5cqw 7cqw;gap:4cqw;justify-content:flex-start}
  .m .work h3{max-width:none;font-size:13cqw;line-height:.85}
  .m .work .tag{font-size:max(12px,3.3cqw);margin-top:1cqw}
  .m .work .desc{max-width:none;font-size:max(15px,4cqw);line-height:1.2}
  .m .more{gap:4cqw;min-height:56px;padding:4cqw 5cqw 3cqw;border-width:2px;font-size:11cqw}
  .m .more svg{width:9cqw}
  .m .servicios{padding:12cqw 0 6cqw;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3cqw}
  .m .servicios .lbl{font-size:max(15px,4.5cqw)}
  .m .servicios .lst{display:flex;flex-direction:column;align-items:center;font-size:23cqw;line-height:.85}
  .m .sobre{background:#ececec;color:var(--azul);padding:6cqw 5cqw 10cqw;display:flex;flex-direction:column;gap:6cqw}
  .m .sobre h2{font-size:34cqw;line-height:.85;white-space:nowrap}
  .m .sobre p{font-size:max(15px,4.1cqw);line-height:1.25;text-indent:10cqw;text-wrap:pretty}
  .m .testi{padding:12cqw 5cqw;display:flex;flex-direction:column;gap:7cqw}
  .m .testi .t1{font-weight:700;font-size:max(15px,4cqw);line-height:1}
  .m .testi h2{font-weight:700;font-size:9.5cqw;line-height:1;text-wrap:balance}
  .m .testi blockquote{font-weight:500;font-size:max(17px,5.6cqw);line-height:1.05;text-indent:14cqw;text-wrap:pretty}
  .m .testi .who{display:flex;justify-content:space-between;gap:4cqw;font-weight:700;font-size:max(15px,4cqw);line-height:1;padding-top:3cqw;border-top:2px solid #ececec}
  .m .contacto{position:relative;padding:16cqw 5cqw;display:flex;flex-direction:column;align-items:center;gap:12cqw;text-align:center;overflow:hidden}
  .m .contacto .bg{position:absolute;inset:0;width:100%;height:100%}
  .m .contacto h2{position:relative;line-height:1.05;text-wrap:balance}
  .m .contacto .h1{font-size:13cqw}
  .m .contacto .h2{font-size:10cqw}
  .m .contacto .mail{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5cqw;font-weight:700;font-size:max(17px,5.4cqw);line-height:1.1;color:var(--azul);-webkit-text-stroke:var(--stroke)}
  .m .contacto .mail i{width:100%;height:1.4cqw;margin-top:1cqw}
  .m .foot{padding:15cqw 4cqw 6cqw;display:flex;flex-direction:column;gap:8cqw}
  .m .foot .row{display:flex;justify-content:space-between;align-items:flex-start;gap:4cqw}
  .m .foot nav{display:grid;grid-template-columns:auto auto;column-gap:7cqw;row-gap:1cqw;font-weight:700;font-size:max(15px,4.6cqw);line-height:1}
  .m .foot nav a{min-height:32px;display:flex;align-items:center}
  .m .foot .lg{width:12cqw;flex-shrink:0;color:#fff}
  .m .foot .big2{display:flex;flex-direction:column;gap:2cqw}
  .m .big2 .name{font-size:27.5cqw;margin:0}
  .m .big2 .bar{gap:3cqw;font-size:max(12px,3.4cqw)}
  .m .bar a{min-height:44px;display:flex;align-items:center}
  .menu{position:fixed;inset:0;height:100dvh;overflow-y:auto;z-index:50;background:#ececec;color:var(--azul);padding:4cqw;display:none;flex-direction:column;justify-content:space-between;gap:24px}
  .menu.open{display:flex}
  .menu .top2{display:flex;align-items:center;justify-content:space-between}
  .menu .top2 div{width:5.5cqw;min-width:20px}
  .menu nav{display:flex;flex-direction:column;font-size:clamp(48px,18cqw,96px);line-height:.95}
  .menu .em{font-weight:700;font-size:max(15px,4.4cqw);line-height:1.2;min-height:44px;display:flex;align-items:center}
}

/* ---------- VER MÁS TRABAJOS (despliegue) ---------- */
.pr button.more{width:100%;font-family:var(--display);font-stretch:var(--dstretch);font-weight:400;text-align:left;cursor:pointer}
.more svg{transition:transform .35s ease}
.more[aria-expanded="true"] svg{transform:rotate(90deg)}
.mas{flex-direction:column;gap:1.94cqw}
.mas:not([hidden]){display:flex;animation:mas-in .6s cubic-bezier(.2,.7,.2,1)}
@keyframes mas-in{from{opacity:0;transform:translateY(3cqw)}to{opacity:1;transform:none}}
a.work{transition:opacity .25s}
a.work:hover{opacity:.94}
@media (max-width:767px){.m .mas{gap:3cqw}}

/* ---------- Inciso: colaboración ---------- */
.aparte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.4cqw 3cqw;align-items:start;border-top:2px solid #ececec;margin-top:1.4cqw;padding:1.6cqw 3.54cqw 1.4cqw}
.aparte .lbl{font-weight:700;font-size:max(14px,1.67cqw);line-height:1}
.aparte p{font-weight:500;font-size:max(18px,2.78cqw);line-height:1;text-wrap:pretty}
.aparte a{border-bottom:.28cqw solid #ececec;transition:opacity .2s}
.aparte a:hover{opacity:.7}
@media (max-width:767px){
  .m .aparte{margin-top:3cqw;padding:5cqw 5cqw 4cqw;gap:4cqw}
  .m .aparte .lbl{font-size:max(15px,4cqw)}
  .m .aparte p{font-size:max(17px,5.6cqw);line-height:1.05}
  .m .aparte a{border-bottom-width:2px}
}

/* ---------- Contacto: fondo claro, letras azules ---------- */
.contacto{background:#ececec;color:var(--azul)}
.contacto .mail{color:var(--azul)}
.mail i{background:var(--azul)}

/* ---------- Contacto: efecto agua azul que sigue al puntero ---------- */
.contacto{overflow:hidden}
.contacto .water{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;filter:blur(18px);transition:opacity .5s ease}
.contacto.on .water{opacity:1}
@media (prefers-reduced-motion:reduce){.contacto .water{display:none}}

/* Contacto: las letras invierten su color donde pasa la estela.
   Con mix-blend-mode: difference, var(--azul-inv) sobre el gris claro da exactamente el azul var(--azul). */
.contacto{isolation:isolate}
.contacto h2,.contacto .mail,.contacto .mail i{mix-blend-mode:difference}
.contacto h2,.contacto .mail{color:var(--azul-inv)}
.contacto .mail i{background:var(--azul-inv)}
.d .contacto .mail,.m .contacto .mail{color:var(--azul-inv)}

/* ---------- Contacto: botón de WhatsApp ---------- */
.contacto .wa{font-weight:700;line-height:1;white-space:nowrap;-webkit-text-stroke:var(--stroke);transition:opacity .2s}
.contacto .wa:hover{opacity:.7}
.d .contacto .wa{position:absolute;left:0;right:0;top:44.4cqw;margin:0 auto;width:max-content;font-size:2cqw}
.contacto .wa,.contacto .wa{mix-blend-mode:difference;color:var(--azul-inv)}
@media (max-width:767px){.m .contacto .wa{position:relative;font-size:max(17px,5cqw);margin-top:-6cqw}}