/* Layout: portada de vídeo a pantalla completa, banda piedra con tres servicios, banda carbón de contacto y footer. Paleta y tipos del manual de Social Lab; una sola apariencia de marca. */
:root{
  --charcoal:#1A1A1A; --ink:#111111; --stone:#E8E4DD; --paper:#F3F0EA; --sand:#C9C2B6;
  --olive:#6B6F66; --bluegrey:#3E4A52; --white:#FFFFFF; --muted-d:#A8A39A; --muted-l:#6B6760;
  --line-d:rgba(255,255,255,.14); --line-l:rgba(26,26,26,.12);
  --display:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --gut:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
  --wrap:1320px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--charcoal);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--charcoal)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
@media(min-width:900px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
.caps{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

/* logo */
.logo{font-family:var(--display);font-weight:800;letter-spacing:-.055em;line-height:.8;display:inline-block}
.logo b{font-weight:800;color:var(--sand)}

/* header */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;transition:background .4s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.top.solid{background:rgba(26,26,26,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--line-d)}
.top .wrap{display:flex;align-items:center;gap:28px;padding-block:18px}
.top .logo{font-size:26px}
.top .logo b{color:inherit}
.nav{margin-left:auto;display:flex;align-items:center;gap:34px;font-size:15px;font-weight:500;letter-spacing:.005em}
.nav a.l{position:relative;text-shadow:0 1px 12px rgba(0,0,0,.45);padding-block:6px}
.nav a.l::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a.l:hover::after{transform:scaleX(1)}
.pill{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #fff;border-radius:999px;padding:10px 22px;font-size:15px;font-weight:500;transition:background .25s,color .25s}
.pill:hover{background:var(--white);color:var(--charcoal)}
.burger{width:40px;height:40px;display:grid;place-content:center;gap:5px;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:899px){.nav .l,.nav .pill{display:none}.top .wrap{padding-block:14px}.top .logo{font-size:22px}}

/* menú */
.drawer{position:fixed;inset:0;z-index:40;background:var(--charcoal);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.menu-open .drawer{opacity:1;visibility:visible}
.drawer ol{list-style:none;margin:0;padding:0;counter-reset:m}
.drawer li{border-top:1px solid var(--line-d)}
.drawer li a{display:flex;align-items:baseline;gap:18px;padding:16px 0;font-family:var(--display);font-weight:700;font-size:clamp(32px,6vw,64px);letter-spacing:-.04em;line-height:1}
.drawer li a small{font-family:var(--body);font-size:12px;font-weight:400;color:var(--muted-d);letter-spacing:0;width:24px}
.drawer .meta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:14px;color:var(--muted-d)}

/* portada */
.hero{position:relative;min-height:max(620px,100vh);min-height:max(620px,100lvh);display:flex;flex-direction:column;overflow:hidden;background:#0d0d0d}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.2) 22%,rgba(10,10,10,.25) 60%,rgba(10,10,10,.8) 100%),
  radial-gradient(ellipse at 40% 50%,rgba(10,10,10,.35),transparent 70%)}
.hero .wrap{width:100%}
.hero-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:90px;padding-bottom:20px}
.hero-mark{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.4vw,32px)}
.hero .hero-in{justify-content:flex-end;padding-bottom:calc(clamp(56px,13vh,140px) + env(safe-area-inset-bottom,0px))}
.hero .logo{margin:0 0 0 -.045em;font-size:clamp(96px,15.5vw,236px);color:var(--white);text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero .desc{margin:0;font-size:clamp(11px,1.1vw,14px);letter-spacing:.3em;text-shadow:0 1px 18px rgba(0,0,0,.35);text-align:left}
.lockup{display:inline-flex;align-self:flex-start}
.slogan br{display:none}
.slogan.two{white-space:normal;font-size:12px;letter-spacing:.24em;line-height:1.9}
.slogan.two br{display:inline}
.slogan{margin:0;font-size:16px;letter-spacing:.26em;font-weight:500;white-space:nowrap;color:rgba(255,255,255,.88);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero .desc i{font-style:normal;padding:0 .8em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}
.hero-foot p{margin:0;line-height:1.75}
.tagline{font-size:10px;letter-spacing:.3em;font-weight:400;color:rgba(255,255,255,.62)}
@media(max-width:600px){.tagline{font-size:9px;letter-spacing:.22em;padding-left:0}}
.more{padding-bottom:10px;border-bottom:1.5px solid var(--white);white-space:nowrap}
.more:hover{border-color:var(--sand);color:var(--sand)}
@media(max-width:600px){.hero-foot{flex-direction:column;align-items:flex-start}.hero-foot .more{align-self:flex-start}}
@media (prefers-reduced-motion:reduce){.hero video{display:none}}

/* lo que hacemos */
.what{background:var(--stone);color:var(--charcoal);padding-block:clamp(64px,9vw,120px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(28px,4vw,48px)}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(36px,5vw,64px);letter-spacing:-.045em;line-height:.95;margin:0;text-wrap:balance}
.idx{font-size:12px;color:var(--muted-l);font-variant-numeric:tabular-nums}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.8vw,12px)}

.card{display:flex;flex-direction:column;background:var(--paper);border-radius:2px;overflow:hidden;transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card .media{position:relative;aspect-ratio:4/4.7;overflow:hidden;background:var(--charcoal)}

.card .media>video,.card .media>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .media>video,.card:hover .media>img{transform:scale(1.04)}
.card .info{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:clamp(16px,1.6vw,22px) clamp(16px,1.6vw,24px) clamp(20px,2vw,28px)}
.card .info small{display:block;font-size:11px;color:var(--muted-l);margin-bottom:8px;font-variant-numeric:tabular-nums}
.card h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.035em;line-height:1;margin:0}
.arrow{width:22px;height:22px;flex:none;transition:transform .4s var(--ease)}
.card:hover .arrow{transform:translate(3px,-3px)}


/* teléfono (redes) */
.phone-stage{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(ellipse at 50% 120%,#3a3530 0%,#1b1a18 60%)}
.phone{width:56%;max-width:230px;aspect-ratio:9/19;border-radius:30px;background:#0b0b0b;padding:7px;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 1.5px #2b2b2b;transform:rotate(-6deg) translateY(6%);transition:transform 1s var(--ease)}
.card:hover .phone{transform:rotate(-3deg) translateY(2%)}
.screen{width:100%;height:100%;border-radius:24px;overflow:hidden;background:#fff;color:#111;display:flex;flex-direction:column}
.ig-top{display:flex;align-items:center;gap:8px;padding:22px 10px 8px}
.ig-av{width:30px;height:30px;border-radius:50%;background:var(--charcoal);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:-.05em}
.ig-av b{color:var(--sand)}
.ig-name{font-size:10px;font-weight:600;line-height:1.2}
.ig-name span{display:block;font-weight:400;color:#777;font-size:8.5px}
.ig-feed{flex:1;min-height:0;overflow:hidden}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;animation:feed 28s linear infinite}
.ig-grid img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;border:.75px solid #fff;box-sizing:border-box}
@keyframes feed{to{transform:translateY(-50%)}}
.site .shot{position:absolute;left:0;top:0;width:100%;height:auto;filter:none;animation:siteScroll 22s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes siteScroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + var(--sh,180px)))}}
.js-reveal .card .media{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.js-reveal .card .media>*{transform:scale(1.08);transition:transform 1.6s var(--ease)}
.js-reveal .card.in .media{clip-path:inset(0 0 0 0)}
.js-reveal .card.in .media>*{transform:none}
.js-reveal .card:nth-child(2) .media{transition-delay:.12s}.js-reveal .card:nth-child(3) .media{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.ig-grid,.site .shot{animation:none}.js-reveal .card .media{clip-path:none}.js-reveal .card .media>*{transform:none}}

/* navegador (web) */
.web-stage{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 120%,#3a3530 0%,#1b1a18 60%)}
.laptop{width:84%;transform:perspective(900px) rotateY(-14deg) rotateX(4deg);transition:transform 1s var(--ease)}
.card:hover .laptop{transform:perspective(900px) rotateY(-6deg) rotateX(2deg)}
.lid{background:#0c0c0c;border-radius:10px 10px 0 0;padding:6px;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 1px #333}
.site{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#111}
.site img{width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.site .mini-nav{position:absolute;top:6%;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center}
.site .mini-nav .logo{font-size:9px;color:#fff}
.site .mini-nav i{display:flex;gap:6px}
.site .mini-nav i span{width:16px;height:2px;background:rgba(255,255,255,.7);border-radius:2px}
.site .big{position:absolute;left:7%;bottom:12%}
.site .big .logo{font-size:clamp(20px,2.6vw,36px);color:#fff}
.site .big .logo b{color:var(--sand)}
.base{height:9px;background:linear-gradient(#bdbdbd,#7c7c7c);border-radius:0 0 12px 12px;margin:0 -6%}

/* contacto */
.talk{position:relative;padding-block:clamp(72px,10vw,140px);overflow:hidden;background:var(--charcoal)}
.talk::before{content:"";position:absolute;inset:0;background:url("media/c4.jpg") center 40%/cover no-repeat;opacity:.16;filter:grayscale(.4)}
.talk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--charcoal) 25%,rgba(26,26,26,.55))}
.talk .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,7vw,110px);align-items:start}
@media(max-width:900px){.talk .wrap{grid-template-columns:1fr}}
.talk .idx{color:var(--muted-d);display:block;margin-bottom:22px}
.talk .h2{font-size:clamp(44px,6.2vw,88px)}
.wa-line{margin:clamp(18px,2vw,26px) 0 0;font-size:clamp(16px,1.3vw,19px);color:#d9d5ce}
.wa-line a{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transition:color .2s}
.wa-line a:hover{color:var(--sand)}
.lede{color:#d9d5ce;max-width:34ch;margin:22px 0 36px;font-size:17px}
.direct{display:grid;gap:0;border-top:1px solid var(--line-d);max-width:420px}
.direct a,.direct div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-d);font-size:15px}
.direct span{color:var(--muted-d);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.direct a:hover strong{color:var(--sand)}
.direct strong{font-weight:500;transition:color .2s;text-align:right;user-select:all}

form{display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
label{display:grid;gap:8px;font-size:12px;color:var(--muted-d);letter-spacing:.06em}
input,select,textarea{width:100%;font:inherit;font-size:15px;color:var(--white);background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:4px;padding:14px 14px;transition:border-color .2s,background .2s;appearance:none;-webkit-appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9C2B6' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
select option{background:var(--charcoal)}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sand);background:rgba(255,255,255,.07)}
.hp{position:absolute;left:-9999px}
.send{justify-self:start;display:inline-flex;align-items:center;gap:12px;margin-top:6px;background:var(--white);color:var(--charcoal);border:0;border-radius:999px;padding:15px 26px;font:500 14px var(--body);cursor:pointer;transition:background .25s}
.send:hover{background:var(--sand)}
.send svg{width:16px;height:16px}
.note{font-size:13px;color:var(--muted-d);min-height:1.4em;margin:0}
.note.ok{color:#cfe0c2}.note.err{color:#f0b7a8}

/* footer */
footer{background:var(--ink);padding-top:56px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));font-size:13px;color:#cfcac2}
.foot{display:grid;grid-template-columns:1.4fr 1fr auto;gap:36px 40px;align-items:start}
@media(max-width:860px){.foot{grid-template-columns:1fr auto}}
@media(max-width:480px){.foot{grid-template-columns:1fr}}
.foot .logo{font-size:44px;color:#fff}
.foot .caps{font-size:9.5px;color:var(--muted-d);margin-top:14px;display:block;letter-spacing:.2em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a:hover{color:#fff}
.addr{margin:22px 0 0;font-size:14px;color:#cfcac2}
.social{display:flex;gap:14px}
.social a{width:56px;height:56px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;color:#fff;transition:background .25s,color .25s,border-color .25s}
.social a:hover{background:#fff;color:var(--charcoal);border-color:#fff}
.social svg{width:24px;height:24px}
.legal{margin-top:48px;padding-top:20px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--muted-d);font-size:12px}

/* visor */

/* entrada */
.rise{animation:rise 1.2s var(--ease) both}
.rise.d1{animation-delay:.15s}.rise.d2{animation-delay:.3s}.rise.d3{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none}*{scroll-behavior:auto!important}}

@media(max-width:760px){
  .cards{grid-template-columns:1fr;gap:8px}
  .card{display:grid;grid-template-columns:46% 1fr;min-height:148px}
  .card:hover{transform:none}
  .card .media{aspect-ratio:auto;height:auto;min-height:148px}
  .card .media>video,.card .media>img{position:absolute;inset:0}
  .card .info{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:start;gap:0 10px;padding:14px 14px 16px 16px}
  .card .info>div{display:contents}
  .card .info small{grid-column:1;grid-row:1;margin:0;font-size:11px;letter-spacing:.06em}
  .card .arrow{grid-column:2;grid-row:1;width:20px;height:20px}
  .card h3{grid-column:1/-1;grid-row:2;align-self:end;font-size:21px;line-height:1.02;letter-spacing:-.03em}
  .card .phone{width:48%;border-radius:13px;padding:3px;transform:rotate(-6deg) translateY(8%)}
  .card .screen{border-radius:10px}
  .card .ig-top{display:none}
  .card .ig-grid{gap:1px}
  .card .laptop{width:84%}
  .card .lid{padding:3px;border-radius:5px 5px 0 0}
  .card .site .mini-nav{display:none}
  .card .site .big{left:8%;bottom:12%}
  .card .site .big .logo{font-size:12px}
  .card .base{height:4px}
}

/* ===== Páginas interiores ===== */
.nav a.l[aria-current="page"]::after{transform:scaleX(1)}
.page-hero{position:relative;min-height:clamp(480px,74svh,780px);display:flex;align-items:flex-end;overflow:hidden;background:#0d0d0d;color:var(--white)}
.page-hero>img,.page-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.15) 30%,rgba(10,10,10,.35) 60%,rgba(10,10,10,.88) 100%)}
.ph-in{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:clamp(40px,7vh,80px)}
.ph-num{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-bottom:14px;font-variant-numeric:tabular-nums}
.ph-title{font-family:var(--display);font-weight:700;font-size:clamp(52px,7.6vw,112px);letter-spacing:-.05em;line-height:.9;margin:0;text-wrap:balance}
.ph-sub{margin:clamp(16px,2vw,24px) 0 0;font-size:clamp(16px,1.35vw,20px);line-height:1.45;color:#dcd8d1}
@media(min-width:761px){.ph-sub{white-space:nowrap}}

/* acordeón de servicios */
.services-list{background:var(--charcoal);padding-block:clamp(40px,6vw,80px)}
.acc{border-top:1px solid var(--line-d)}
.acc-item{border-bottom:1px solid var(--line-d)}
.acc-btn{width:100%;display:grid;grid-template-columns:44px 1fr 28px;align-items:center;gap:12px;padding:clamp(18px,2vw,26px) 0;background:none;border:0;color:var(--white);font:inherit;text-align:left;cursor:pointer}
.acc-btn small{font-size:12px;color:var(--muted-d);font-variant-numeric:tabular-nums}
.acc-btn span{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.025em;line-height:1.1}
.acc-btn i{position:relative;width:20px;height:20px;justify-self:end}
.acc-btn i::before,.acc-btn i::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.acc-btn i::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-btn[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(0)}
.acc-btn:hover span{color:var(--sand)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);padding:4px 0 clamp(28px,3vw,40px) 56px}
.acc-text p{margin:0 0 18px;color:#d9d5ce;font-size:16px;line-height:1.6;max-width:46ch}
.acc-text .draft{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);border:1px solid rgba(201,194,182,.4);border-radius:99px;padding:3px 10px;margin-bottom:14px}
.acc-cta{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:14px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:4px}
.acc-cta:hover{color:var(--sand)}
.acc-cta svg{width:14px;height:14px}
.acc-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.acc-media img,.acc-media video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:#000}
.acc-media.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){
  .acc-btn{grid-template-columns:34px 1fr 24px}
  .acc-body{grid-template-columns:1fr;padding-left:0}
  .acc-media img,.acc-media video{aspect-ratio:4/5}
}

/* proyectos destacados */
.projects{background:var(--stone);color:var(--charcoal);padding-block:clamp(64px,8vw,110px);overflow:hidden}
.projects .sec-head{align-items:center}
.arrows{display:flex;gap:10px}
.arrows button{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(26,26,26,.35);background:none;color:var(--charcoal);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.arrows button:hover{background:var(--charcoal);color:var(--white);border-color:var(--charcoal)}
.arrows svg{width:18px;height:18px}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*12px)/3);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.track::-webkit-scrollbar{display:none}
@media(max-width:960px){.track{grid-auto-columns:calc((100% - 12px)/2)}}
@media(max-width:600px){.track{grid-auto-columns:78%;margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)))}}
.proj{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.proj .ph{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#111}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.proj:hover img{transform:scale(1.04)}
.proj .playb{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.2);transition:transform .3s var(--ease),background .2s}
.proj:hover .playb{transform:scale(1.08);background:rgba(255,255,255,.15)}
.proj .playb svg{width:18px;height:18px;margin-left:3px}
.proj small{display:block;font-size:12px;color:var(--muted-l)}
.proj strong{display:block;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;line-height:1.2;margin-top:2px}

/* visor de vídeo */
.viewer{position:fixed;inset:0;z-index:80;background:rgba(5,5,5,.96);display:grid;place-items:center;padding:calc(64px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.viewer.on{opacity:1;visibility:visible}
.viewer video{max-width:100%;max-height:100%;background:#000;border-radius:2px}
.viewer .close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:none;color:#fff;cursor:pointer;font-size:24px;line-height:1}
.viewer .cap{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:calc(26px + env(safe-area-inset-top,0px));color:#cfcac2;font-size:13px;max-width:calc(100% - 100px)}
.acc-item h3{margin:0;font:inherit}
.see-all{display:inline-flex;align-items:center;gap:12px;background:var(--charcoal);color:var(--white);border:0;border-radius:999px;padding:16px 26px;font:500 15px var(--body);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.see-all:hover{background:#000}
.see-all svg{width:17px;height:17px;transition:transform .4s var(--ease)}
.see-all[aria-expanded="true"] svg{transform:rotate(180deg)}
.projects.all .track{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;row-gap:clamp(24px,3vw,40px);margin-right:0}
.projects.all .proj{animation:projIn .6s var(--ease) both}
@keyframes projIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:960px){.projects.all .track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .projects .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
  .see-all{width:100%;justify-content:center}
  .projects.all .track{gap:20px 10px}
  .proj strong{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.projects.all .proj{animation:none}}
/* botón + portada asomándose */
.projects{padding-bottom:0}
.reveal-work{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,44px)}
.peek{position:relative;width:min(560px,88vw);height:clamp(150px,19vw,250px);overflow:hidden;cursor:pointer}
.peek img{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;transform:translateY(20%);animation:peek 3.6s var(--ease) infinite}
@keyframes peek{0%,100%{transform:translateY(20%)}45%,60%{transform:translateY(6%)}}
.reveal-work:hover .peek img{animation:none;transform:translateY(2%);transition:transform .6s var(--ease)}
.projects .track{display:none}
.projects.all{padding-bottom:clamp(64px,8vw,110px)}
.projects.all .track{display:grid;margin-top:clamp(28px,4vw,48px)}
.projects.all .peek{display:none}
@media(max-width:600px){.see-all{width:auto}}
@media (prefers-reduced-motion:reduce){.peek img{animation:none}}
/* listas de los desplegables */
.acc-list{padding:2px 0 clamp(28px,3vw,40px) 56px;max-width:760px}
.acc-list ul,.acc-list ol{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:14px}
.acc-list li{color:#d9d5ce;font-size:16px;line-height:1.6}
.acc-list li strong{color:var(--white);font-weight:500}
.acc-list .bul li{padding-left:22px;position:relative}
.acc-list .bul li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--sand)}
.acc-list .steps{counter-reset:st}
.acc-list .steps li{counter-increment:st;position:relative;padding-left:40px}
.acc-list .steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:.2em;font-size:12px;color:var(--sand);font-variant-numeric:tabular-nums}
@media(max-width:760px){.acc-list{padding-left:0}}
/* collage de proyectos (como La Oveja Negra) */
.projects .wrap{container-type:inline-size}
.collage{display:none;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc((100cqw - 60px)/6*1.18);grid-auto-flow:dense;gap:12px}
.projects.all .collage{display:grid;margin-top:clamp(28px,4vw,48px)}
.cv{position:relative;overflow:hidden;border:0;padding:0;border-radius:2px;background:#111;cursor:pointer;color:#fff;font:inherit;text-align:left;animation:projIn .6s var(--ease) both}
.cv.v{grid-column:span 2;grid-row:span 3}
.cv.h{grid-column:span 4;grid-row:span 2}
.cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cv:hover img{transform:scale(1.04)}
.cv::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.vbadge{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);display:grid;place-items:center;background:rgba(0,0,0,.18);z-index:1;transition:transform .3s var(--ease)}
.cv:hover .vbadge{transform:scale(1.08)}
.vbadge svg{width:16px;height:16px;margin-left:2px}
.cv-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:1}
.cv-cap strong{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.25}
@media(max-width:700px){
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px}
  .cv.v{grid-column:span 1;grid-row:auto;aspect-ratio:9/16}
  .cv.h{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
  .cv-cap strong{font-size:13px}
  .vbadge{width:42px;height:42px;margin:-21px 0 0 -21px}
}
@media (prefers-reduced-motion:reduce){.cv{animation:none}}
/* FAQ */
.faq{display:grid;gap:20px;margin-bottom:22px}
.qa h4{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.015em;color:var(--white)}
.qa p{margin:0;color:#d9d5ce;font-size:16px;line-height:1.6}
/* móvil asomándose */
.peek-phone{width:min(300px,72vw);height:clamp(190px,22vw,250px)}
.peek-phone .phone{position:absolute;left:12%;top:0;width:76%;max-width:none;transform:translateY(16%) rotate(-4deg);animation:peekPhone 3.6s var(--ease) infinite}
@keyframes peekPhone{0%,100%{transform:translateY(16%) rotate(-4deg)}45%,60%{transform:translateY(4%) rotate(-2deg)}}
.reveal-work:hover .peek-phone .phone{animation:none;transform:translateY(0) rotate(-1deg);transition:transform .6s var(--ease)}
.peek-phone .ig-grid{animation-duration:34s}
/* cuentas gestionadas */
.accts{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.projects.all .accts{display:grid;margin-top:clamp(28px,4vw,48px)}
.acct{display:grid;grid-template-columns:56px 1fr 20px;align-items:center;gap:16px;background:var(--paper);border-radius:2px;padding:16px 18px;transition:background .25s,transform .4s var(--ease);animation:projIn .6s var(--ease) both}
.acct:hover{background:#fff}
.acct img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 1px rgba(26,26,26,.08)}
.acct strong{display:block;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.015em;line-height:1.2}
.acct small{display:block;font-size:13px;color:var(--muted-l);margin-top:3px}
.acct svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.acct:hover svg{transform:translate(2px,-2px)}
@media(max-width:700px){.accts{grid-template-columns:1fr;gap:8px}.acct strong{font-size:17px}}
@media (prefers-reduced-motion:reduce){.peek-phone .phone,.acct{animation:none}}
.peek-phone .phone{box-shadow:none}
/* cabecera redes: A móvil con feed */
.page-hero.ph-phone{background:radial-gradient(ellipse at 72% 60%,#3a332c 0%,#1a1918 55%,#121212 100%)}
.page-hero.ph-phone::after{background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 70%,rgba(10,10,10,.6) 100%)}
.hp-phone{position:absolute;z-index:1;right:max(8vw,40px);top:calc(50% + 40px);width:clamp(210px,18vw,270px);transform:translateY(-50%) rotate(-5deg)}
.hp-phone .phone{width:100%;max-width:none;transform:none;box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1.5px #2b2b2b}
.hp-phone .ig-grid{animation-duration:40s}
@media(max-width:760px){
  .page-hero.ph-phone{min-height:max(620px,92svh);align-items:flex-end}
  .hp-phone{right:auto;left:50%;top:92px;width:min(46vw,200px);transform:translateX(-20%) rotate(-5deg)}
  .page-hero.ph-phone::after{background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.92) 78%)}
}
/* cabecera redes: B mosaico */
.page-hero.ph-mosaic>.mosaic{position:absolute;inset:-4%;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;transform:rotate(-4deg) scale(1.08);animation:mos 40s linear infinite alternate}
.mosaic img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
@keyframes mos{to{transform:rotate(-4deg) scale(1.08) translateY(-6%)}}
.page-hero.ph-mosaic::after{background:linear-gradient(180deg,rgba(10,10,10,.75) 0%,rgba(10,10,10,.55) 45%,rgba(10,10,10,.9) 100%)}
@media(max-width:760px){.page-hero.ph-mosaic>.mosaic{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.page-hero.ph-mosaic>.mosaic{animation:none}}
/* página web */
.acc-list .draft{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);border:1px solid rgba(201,194,182,.4);border-radius:99px;padding:3px 10px;margin-bottom:14px}
.acc-intro{margin:0 0 18px;color:var(--white);font-size:18px;line-height:1.5}
.page-hero.ph-web{background:radial-gradient(ellipse at 70% 55%,#3a332c 0%,#1a1918 55%,#121212 100%)}
.page-hero.ph-web::after{background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 70%,rgba(10,10,10,.6) 100%)}
.hp-laptop{position:absolute;z-index:1;right:max(5vw,32px);top:calc(50% + 30px);width:clamp(380px,44vw,640px);transform:translateY(-50%)}
.hp-laptop .laptop{width:100%;transform:perspective(1200px) rotateY(-16deg) rotateX(4deg)}
.hp-laptop .lid{padding:8px;border-radius:14px 14px 0 0;box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px #333}
.hp-laptop .base{height:12px}
@media(max-width:900px){
  .page-hero.ph-web{min-height:0}
  .ph-web .ph-in{padding-top:calc(130px + min(92vw,460px)*.66)}
  .hp-laptop{right:auto;left:50%;top:110px;width:min(92vw,460px);transform:translateX(-50%)}
  .page-hero.ph-web::after{background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.92) 78%)}
}
.web-cta{padding-block:clamp(72px,10vw,130px)}
.web-cta .reveal-work{text-align:center}
.web-cta .h2{text-align:center}
/* tarjeta 01: visor de cámara */
.cam-stage{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 120%,#3a3530 0%,#1b1a18 60%)}
.cam{position:relative;width:80%;aspect-ratio:9/12;overflow:hidden;border-radius:6px;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 6px #0b0b0b,0 0 0 7.5px #2b2b2b;transform:rotate(3deg);transition:transform 1s var(--ease)}
.card:hover .cam{transform:rotate(1deg) scale(1.02)}
.card .media .cam>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.card:hover .media .cam>video{transform:none}
.vf{position:absolute;width:16px;height:16px;border:1.5px solid rgba(255,255,255,.85);z-index:2}
.vf-tl{left:10px;top:10px;border-right:0;border-bottom:0}.vf-tr{right:10px;top:10px;border-left:0;border-bottom:0}
.vf-bl{left:10px;bottom:10px;border-right:0;border-top:0}.vf-br{right:10px;bottom:10px;border-left:0;border-top:0}
.cam-rec,.cam-tc,.cam-meta{position:absolute;z-index:2;font:500 10px/1 var(--body);letter-spacing:.12em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.cam-rec{left:34px;top:15px;display:flex;align-items:center;gap:6px}
.cam-rec i{width:7px;height:7px;border-radius:50%;background:#e5483b;animation:blink 1.2s steps(2,start) infinite}
.cam-tc{right:34px;top:15px}
.cam-meta{left:34px;bottom:15px;opacity:.8}
@keyframes blink{to{visibility:hidden}}
@media(max-width:760px){.cam{width:78%;border-radius:4px;box-shadow:0 0 0 3px #0b0b0b,0 0 0 4px #2b2b2b}.vf{width:9px;height:9px;border-width:1px}.vf-tl,.vf-bl{left:5px}.vf-tr,.vf-br{right:5px}.vf-tl,.vf-tr{top:5px}.vf-bl,.vf-br{bottom:5px}.cam-rec,.cam-tc,.cam-meta{display:none}}
@media (prefers-reduced-motion:reduce){.cam-rec i{animation:none}}
/* slider de marcas */
.brands{background:var(--ink);padding-block:clamp(26px,3.4vw,40px);border-top:1px solid var(--line-d);overflow:hidden}
.brands-t{margin:0 0 clamp(18px,2.4vw,26px);text-align:center;font-size:10.5px;letter-spacing:.3em;color:var(--muted-d)}
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(48px,6vw,88px);width:max-content;animation:mq 38s linear infinite}
.marquee:hover .mq{animation-play-state:paused}
.mq li{flex:none}
.mq img{height:clamp(30px,3.2vw,44px);width:auto;opacity:.72;transition:opacity .3s}
.mq img:hover{opacity:1}
@keyframes mq{to{transform:translateX(calc(-50% - clamp(48px,6vw,88px)/2))}}
@media(max-width:700px){.mq{animation-duration:28s}}
@media (prefers-reduced-motion:reduce){.mq{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding-inline:16px}.mq li[aria-hidden]{display:none}}
/* volver al inicio (páginas interiores) */
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:8px 14px 8px 10px;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;transition:background .25s,color .25s,border-color .25s}
.back:hover{background:#fff;color:var(--charcoal);border-color:#fff}
.back svg{width:16px;height:16px}
@media(max-width:899px){.back{margin-left:auto;padding:7px 12px 7px 9px;font-size:13px}.back+.nav{margin-left:14px}}
/* páginas legales, gracias, 404 */
.legal-page{background:var(--stone);color:var(--charcoal);padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(64px,8vw,110px)}
.legal-page .h2{margin-bottom:clamp(24px,3vw,40px)}
.legal-txt{max-width:720px}
.legal-txt h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;margin:34px 0 10px}
.legal-txt p,.legal-txt li{font-size:16px;line-height:1.65;color:#3b3935}
.legal-txt ul{padding-left:18px;margin:0}
.legal-txt a{text-decoration:underline;text-underline-offset:3px}
.legal-txt .upd{margin-top:40px;font-size:13px;color:var(--muted-l)}
.simple-hero{min-height:max(560px,80svh);align-items:center;background:var(--charcoal)}
.simple-hero::after{display:none}
.simple-hero .ph-sub{max-width:40ch;margin-bottom:32px}
.see-all.light{background:var(--white);color:var(--charcoal)}
.see-all.light:hover{background:var(--sand)}
.form-legal{margin:0;font-size:12px;line-height:1.5;color:var(--muted-d)}
.form-legal a{text-decoration:underline;text-underline-offset:3px}
.nw{white-space:nowrap}
.simple-hero .ph-sub{max-width:52ch}

@media(max-width:600px){.slogan{white-space:normal;font-size:12px;letter-spacing:.24em;line-height:1.9;margin-right:0}.slogan br{display:inline}}
/* portada móvil: marca arriba, vídeo horizontal debajo */
@media (max-width:700px) and (orientation:portrait){
  .hero{--vh:56.25vw;--vb:max(56px,calc(env(safe-area-inset-bottom,0px) + 40px));background:var(--charcoal)}
  .hero video,.hero .poster{inset:auto 0 var(--vb) 0;width:100%;height:var(--vh);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%)}
  .hero::after{display:none}
  .hero .hero-in{justify-content:flex-end;padding-bottom:calc(var(--vb) + var(--vh) - 34px)}
  .hero .logo{text-shadow:none}
}

/* ===== Portada (estructura tipo La Oveja Negra, identidad Social Lab) ===== */
.intro{background:var(--charcoal);color:var(--white);padding-top:calc(clamp(118px,13vw,170px) + env(safe-area-inset-top,0px));padding-bottom:clamp(56px,8vw,110px);overflow:hidden}
.intro-head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,26px)}
.intro .logo{margin:0 0 0 -.045em;font-size:clamp(104px,15vw,232px);color:var(--white)}
.intro .slogan{color:rgba(255,255,255,.9);text-shadow:none}
.intro-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,52px)}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-width:200px;padding:15px 26px;border-radius:6px;background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.7);font:500 13px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.ghost:hover{background:var(--white);color:var(--charcoal);border-color:var(--white)}
.intro-links{display:flex;align-items:center;gap:20px;margin-top:clamp(36px,5vw,64px);font-size:15px;color:#e4e0d9}
.intro-links .it{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.intro-links svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4}
.intro-links .ln{flex:1;height:1px;background:var(--line-d)}
.intro-links a.it:hover{color:var(--sand)}
.reel{position:relative;margin-top:clamp(20px,2.4vw,32px);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0d0d0d}
.reel video,.reel .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-btn{position:absolute;left:50%;top:50%;width:clamp(124px,14vw,184px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);display:grid;place-items:center;color:#fff;z-index:2;transition:transform .35s var(--ease),background .3s}
.reel-btn:hover{transform:translate(-50%,-50%) scale(1.05);background:rgba(255,255,255,.08)}
.reel-btn .ring{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);animation:spin 18s linear infinite}
.reel-btn .ring text{font:500 12px var(--body);letter-spacing:.22em;fill:#fff;text-transform:uppercase}
.reel-btn .arr{width:26px;height:26px}
@keyframes spin{to{transform:rotate(360deg)}}
.lg-row{display:flex;overflow:hidden;margin-top:clamp(44px,6vw,80px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lg-track{display:flex;flex:none;align-items:center;animation:slide 40s linear infinite}
.lg-row:hover .lg-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.lg-item{flex:none;display:flex;align-items:center;padding:0 clamp(26px,3.6vw,52px);border-right:1px solid var(--line-d)}
.lg-item img{display:block;height:var(--h);width:auto;max-width:none;opacity:.88}
@media(max-width:700px){
  .intro{padding-top:calc(108px + env(safe-area-inset-top,0px))}
  .intro .logo{font-size:clamp(96px,30vw,150px)}
  .intro-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ghost{min-width:0;padding:15px 10px;font-size:12px;letter-spacing:.14em}
  .intro-links{gap:12px;font-size:14px}
  .reel{border-radius:10px}
  .lg-item{padding:0 22px}.lg-item img{height:calc(var(--h) * .72)}
}
@media (prefers-reduced-motion:reduce){.reel-btn .ring,.lg-track{animation:none}}
/* instagram en la barra */
.ig{width:44px;height:44px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.1);transition:background .25s,color .25s}
.ig:hover{background:var(--white);color:var(--charcoal)}
.ig svg{width:22px;height:22px}
/* modal quiénes somos */
.about{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));background:rgba(10,10,10,.82);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.about.on{opacity:1;visibility:visible}
.about-box{position:relative;max-width:560px;background:var(--stone);color:var(--charcoal);border-radius:12px;padding:clamp(28px,4vw,44px)}
.about-box h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,42px);letter-spacing:-.04em;margin:0 0 16px}
.about-box p{margin:0;font-size:17px;line-height:1.6;color:#3b3935}
.about-box a{text-decoration:underline;text-underline-offset:3px}
.about-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--charcoal)}

@media(max-width:600px){.intro .slogan,.slogan{white-space:nowrap;font-size:min(3.05vw,13px);letter-spacing:.16em;line-height:1.4;margin-right:0}.slogan br{display:none}}
/* portada compacta: todo en la primera pantalla */
.lg-item img{opacity:1}
.lg-item{border-right:1px solid rgba(255,255,255,.22)}
@media(min-width:901px){
  .intro{padding-top:calc(112px + env(safe-area-inset-top,0px));padding-bottom:clamp(40px,5vh,64px)}
  .intro .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head reel" "cta reel" "links reel";grid-template-rows:auto auto 1fr;column-gap:clamp(36px,4vw,64px);align-items:start}
  .intro-head{grid-area:head}
  .intro-cta{grid-area:cta;margin-top:clamp(24px,3vh,36px)}
  .intro-links{grid-area:links;align-self:end;margin-top:28px}
  .reel{grid-area:reel;margin-top:0;align-self:end}
  .intro .logo{font-size:clamp(120px,12.4vw,200px)}
  .ghost{min-width:0;flex:1}
  .intro-cta{display:flex}
  .lg-row{margin-top:clamp(36px,5vh,56px)}
}
@media(max-width:900px){
  .intro{padding-top:calc(86px + env(safe-area-inset-top,0px));padding-bottom:28px}
  .intro .logo{font-size:min(25vw,112px)}
  .intro-head{gap:12px}
  .intro-cta{margin-top:20px}
  .ghost{padding:13px 10px}
  .intro-links{margin-top:18px}
  .reel{margin-top:16px}
  .lg-row{margin-top:22px}
  .lg-item{padding:0 20px}.lg-item img{height:calc(var(--h) * .9)}
}
@media(min-width:901px){.intro{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}.intro>.wrap{width:100%;margin-block:auto}.intro .lg-row{margin-top:clamp(28px,4vh,48px)}}
/* ===== Portada: vídeo a pantalla completa con todo el texto en sobreimpresión ===== */
.intro{position:relative;isolation:isolate;min-height:max(600px,100vh);min-height:max(600px,100lvh);display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:0;background:#0d0d0d}
.intro .reel{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:0;z-index:-2;grid-area:auto}
.intro .reel-btn{display:none}
.intro::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.12) 26%,rgba(10,10,10,.2) 50%,rgba(10,10,10,.82) 100%)}
.intro>.wrap{width:100%;margin:0 auto;display:block}
.intro .logo{text-shadow:0 2px 40px rgba(0,0,0,.25)}
.intro .slogan{color:#fff}
.ghost{background:rgba(10,10,10,.18);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-color:rgba(255,255,255,.85)}
.intro-links{color:#fff}
.intro-links .ln{background:rgba(255,255,255,.35)}
.intro .lg-row{margin-top:clamp(28px,4vh,44px);padding-block:18px;border-top:1px solid rgba(255,255,255,.14)}
@media(min-width:901px){
  .intro{min-height:max(600px,100vh)}
  .intro>.wrap{display:block;margin:0 auto}
  .intro-head,.intro-cta,.intro-links{max-width:640px}
  .intro .logo{font-size:clamp(120px,13vw,210px)}
  .intro-cta{margin-top:clamp(24px,3vh,36px)}
  .intro-links{margin-top:clamp(24px,3vh,36px)}
  .ghost{flex:0 0 auto;min-width:210px}
}
@media(max-width:900px){
  .intro{padding-top:calc(90px + env(safe-area-inset-top,0px))}
  .intro .logo{font-size:min(27vw,120px)}
  .intro .lg-row{margin-top:22px;padding-block:14px}
}
.intro .logo{text-shadow:none}
.intro .reel{top:0!important;left:0!important;right:0!important;bottom:0!important;height:auto!important;width:auto!important;max-width:none!important;align-self:auto!important}
/* ===== Móvil: como la referencia (texto arriba, vídeo en tarjeta, logos) ===== */
@media(max-width:900px){
  .intro{min-height:0!important;display:block;background:var(--charcoal);padding-top:calc(104px + env(safe-area-inset-top,0px));padding-bottom:30px}
  .intro::before{display:none}
  .intro>.wrap{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
  .intro .logo{font-size:min(24.5vw,112px)}
  .intro-head{gap:16px}
  .intro .slogan{font-size:min(2.9vw,12.5px)!important;letter-spacing:.17em}
  .intro-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
  .ghost{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:1.5px solid rgba(255,255,255,.75);border-radius:8px;padding:15px 8px;font-size:11.5px;letter-spacing:.16em}
  .intro-links{margin-top:24px;font-size:14.5px;gap:14px}
  .intro-links .ln{background:rgba(255,255,255,.14)}
  .intro .reel{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:auto!important;aspect-ratio:16/9;margin-top:22px;border-radius:16px;z-index:auto;overflow:hidden}
  .intro .reel-btn{display:grid;width:118px}
  .intro .reel-btn .ring text{font-size:13px}
  .intro .lg-row{margin-top:26px;padding-block:6px;border-top:0}
  .lg-item{padding:0 22px;border-right:1px solid rgba(255,255,255,.28)}
  .lg-item img{height:calc(var(--h) * .95)}
}
@media(max-width:900px){
  .top .wrap{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
  .intro{padding-top:calc(92px + env(safe-area-inset-top,0px));padding-bottom:22px}
  .intro .logo{font-size:min(22vw,104px)}
  .intro-head{gap:12px}
  .intro-cta{margin-top:22px}
  .ghost{padding:13px 8px}
  .intro-links{margin-top:20px}
  .intro .reel{margin-top:18px}
  .intro .reel-btn{width:104px}
  .intro .lg-row{margin-top:18px}
  .lg-item img{height:calc(var(--h) * .85)}
}
@media(max-width:900px){
  .intro-links{display:none}
  .intro-cta{margin-top:34px}
  .intro .reel{margin-top:34px}
}
/* Navegador: sin Mallorca/teléfono; logos en franja propia debajo del vídeo */
@media(min-width:901px){
  .intro-links{display:none}
  .intro .lg-row{margin-top:clamp(48px,7vh,80px)}
}
/* ===== Lo que hacemos: versión oscura ===== */
.what{background:#121212;color:var(--white)}
.what .sec-head{align-items:flex-end}
.what .h2{font-size:clamp(64px,8vw,120px);letter-spacing:-.055em;line-height:.86;font-weight:800;color:#f3f0ea}
.what .h2 b{color:var(--sand)}
.what .idx{color:var(--muted-d);letter-spacing:.2em;font-size:12px;padding-bottom:10px}
.what .card{background:#161616;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--white)}
.what .card .media{border-radius:0}
.what .card .info small{color:var(--muted-d);font-size:14px;letter-spacing:.06em}
.what .card h3{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.04em;line-height:.98;font-weight:800;color:#f3f0ea}
.what .card .arrow{color:#f3f0ea;width:24px;height:24px}
.tags{margin:16px 0 0;font-size:10.5px;letter-spacing:.24em;line-height:2;text-transform:uppercase;color:#cfcac2;max-width:30ch}
.what .card .info{align-items:flex-start;padding:clamp(20px,2vw,28px)}
.what .card .info>div{display:flex;flex-direction:column}
.what .card .info small{margin-bottom:auto}
.what .card .info h3{margin-top:34px}
.what .cam-stage,.what .phone-stage,.what .web-stage{background:radial-gradient(ellipse at 50% 110%,#2a2622 0%,#141414 65%)}
@media(max-width:760px){
  .what{padding-block:56px 64px}
  .what .h2{font-size:min(18vw,88px)}
  .what .sec-head{margin-bottom:28px}
  .what .cards{gap:14px}
  .what .card{display:grid;grid-template-columns:47% 1fr;min-height:0}
  .what .card .media{min-height:186px}
  .what .card .info{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;padding:16px 14px 18px 16px;gap:0}
  .what .card .info>div{display:contents}
  .what .card .info small{grid-column:1;grid-row:1;margin:0}
  .what .card .arrow{grid-column:2;grid-row:1;width:20px;height:20px}
  .what .card h3{grid-column:1/-1;grid-row:2;align-self:end;margin:18px 0 0;font-size:22px}
  .what .card .tags{grid-column:1/-1;grid-row:3;margin-top:10px;font-size:8.5px;letter-spacing:.2em;line-height:1.9}
  .what .card h3 br{display:inline}
}
.tags span{white-space:nowrap}
.what .idx{white-space:nowrap}
@media(max-width:760px){.what .card .phone{width:60%}.what .card .media{min-height:200px}}
@media(max-width:760px){.what .h2{font-size:min(16vw,80px)}.what .idx{font-size:10px;letter-spacing:.12em;padding-bottom:6px}.what .sec-head{gap:10px}}
/* tarjetas con dispositivos realistas */
.what .card .media{aspect-ratio:834/736;background:#0e0e0e}
.dev{position:absolute;inset:0;overflow:hidden}
.dev-in{position:absolute;left:0;top:0;transform-origin:0 0}
.dev-in>img{display:block;width:100%;height:100%;max-width:none}
.warp{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;backface-visibility:hidden}
.warp video{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(.95)}
.warp .feed{width:100%;height:100%;overflow:hidden;background:#fff}
.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;animation:feed 36s linear infinite}
.feed-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.warp .scr{width:100%;height:100%;overflow:hidden;background:#111;position:relative}
.warp .scr .shot{position:absolute;left:0;top:0;width:100%;height:auto;animation:scrShot 24s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes scrShot{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 400px))}}
.warp::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%),linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,0) 30%)}
@media(max-width:760px){.what .card .media{aspect-ratio:auto;min-height:170px}}
@media (prefers-reduced-motion:reduce){.feed-grid,.warp .scr .shot{animation:none}}
/* ===== Gadgets realistas sobre fondo oscuro ===== */
.what .card .media{background:#121212;container-type:size}
.gx{position:absolute;inset:0;display:grid;place-items:center}
.gx::after{content:"";position:absolute;left:18%;right:18%;bottom:7%;height:8%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);z-index:0}
.gx>*{position:relative;z-index:1}
/* iPhone */
.iph{height:86cqh;aspect-ratio:9/19.3;border-radius:13cqh/13cqh;padding:1.6cqh;background:linear-gradient(145deg,#5a5a5e 0%,#2a2a2d 22%,#1b1b1d 60%,#46464a 100%);box-shadow:inset 0 0 0 .25cqh rgba(255,255,255,.25),inset 0 0 0 .6cqh #0c0c0d,0 3cqh 6cqh rgba(0,0,0,.55);margin-top:12cqh}
.iph::before,.iph::after{content:"";position:absolute;width:.55cqh;background:#2c2c2f;border-radius:.4cqh}
.iph::before{left:-.45cqh;top:18%;height:7%;box-shadow:0 9cqh 0 #2c2c2f,0 17cqh 0 #2c2c2f}
.iph::after{right:-.45cqh;top:27%;height:12%}
.iph-scr{width:100%;height:100%;border-radius:11.6cqh;overflow:hidden;background:#000;position:relative;display:flex;flex-direction:column}
.iph-st{display:flex;align-items:center;justify-content:space-between;padding:2.6cqh 4.5cqh 0;height:7.5cqh;color:#fff;font:600 2.3cqh/1 var(--body)}
.iph-st .di{position:absolute;left:50%;top:1.6cqh;width:12cqh;height:3.6cqh;transform:translateX(-50%);background:#000;border-radius:3cqh;box-shadow:0 0 0 .2cqh #111}
.iph-st em{display:flex;gap:.5cqh;align-items:flex-end}.iph-st em i{width:.6cqh;background:#fff;border-radius:.2cqh}.iph-st em i:nth-child(1){height:1cqh}.iph-st em i:nth-child(2){height:1.5cqh}.iph-st em i:nth-child(3){height:2cqh}
.iph-ig{display:flex;align-items:center;gap:1.4cqh;padding:1.4cqh 3cqh 1.8cqh;color:#fff;font:700 2.4cqh/1 var(--display);letter-spacing:-.02em}
.iph-ig .bk{width:1.6cqh;height:1.6cqh;border-left:.35cqh solid #fff;border-bottom:.35cqh solid #fff;transform:rotate(45deg)}
.iph-feed{flex:1;overflow:hidden;background:#000}
.iph-feed .feed-grid{gap:.3cqh}
/* Monitor */
.mon{width:84cqw;display:flex;flex-direction:column;align-items:center;margin-top:4cqh}
.mon-body{width:100%;padding:2.2cqw 2.2cqw 1.2cqw;border-radius:2cqw;background:linear-gradient(160deg,#2e2e31,#151517 45%,#0c0c0d);box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.12),0 3cqw 7cqw rgba(0,0,0,.6)}
.mon-scr{aspect-ratio:16/9;border-radius:.6cqw;overflow:hidden;background:#000;box-shadow:inset 0 0 0 .2cqw #000}
.mon-scr video{width:100%;height:100%;object-fit:cover;display:block}
.mon-bar{display:flex;align-items:center;gap:1.4cqw;padding-top:1.2cqw}
.mon-bar i{width:2.2cqw;height:1cqw;border-radius:.5cqw;background:#2b2b2e;box-shadow:inset 0 .15cqw 0 rgba(255,255,255,.08)}
.mon-bar span{margin-left:auto;width:1cqw;height:1cqw;border-radius:50%;background:#c9c2b6;opacity:.8}
.mon-arm{width:6cqw;height:9cqh;background:linear-gradient(90deg,#1a1a1c,#333336,#1a1a1c);border-radius:0 0 .6cqw .6cqw}
/* MacBook */
.mac{width:88cqw;display:flex;flex-direction:column;align-items:center;margin-top:6cqh}
.mac-lid{width:82%;padding:1.3cqw 1.3cqw 1.6cqw;border-radius:2.2cqw 2.2cqw .6cqw .6cqw;background:#0a0a0a;box-shadow:inset 0 0 0 .25cqw #3a3a3c,inset 0 0 0 .45cqw #111}
.mac-scr{position:relative;aspect-ratio:16/10.3;overflow:hidden;border-radius:.7cqw;background:#111}
.mac-scr .notch{position:absolute;left:50%;top:0;width:12%;height:3.2%;transform:translateX(-50%);background:#0a0a0a;border-radius:0 0 .8cqw .8cqw;z-index:2}
.mac-scr .shot{position:absolute;left:0;top:0;width:100%;height:auto;animation:macScroll 26s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes macScroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(-78%)}}
.mac-base{position:relative;width:100%;height:2.6cqw;background:linear-gradient(180deg,#d9d9dc 0%,#a9a9ad 45%,#6d6d72 100%);border-radius:.3cqw .3cqw 2.2cqw 2.2cqw / .3cqw .3cqw 1.6cqw 1.6cqw;box-shadow:0 2.5cqw 4cqw rgba(0,0,0,.6)}
.mac-base span{position:absolute;left:50%;top:0;width:15%;height:40%;transform:translateX(-50%);background:linear-gradient(180deg,#8d8d92,#b8b8bc);border-radius:0 0 1cqw 1cqw}
@media (prefers-reduced-motion:reduce){.mac-scr .shot{animation:none}}
.iph{height:122cqh;margin-top:30cqh;max-width:none}
.what .card .media{overflow:hidden}
@media(max-width:760px){.iph{height:112cqh;margin-top:26cqh}}
@media(min-width:761px){.iph{height:150cqh;margin-top:46cqh}}
/* gadgets ladeados y en movimiento suave */
.iph{transform:rotate(-8deg);animation:flt-iph 7s ease-in-out infinite}
.mac{transform:perspective(1200px) rotateY(-16deg) rotateX(5deg);animation:flt-mac 8s ease-in-out infinite}
.mon{transform:perspective(1200px) rotateY(14deg) rotate(2deg);animation:flt-mon 7.5s ease-in-out infinite}
@keyframes flt-iph{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-2.5cqh)}}
@keyframes flt-mac{0%,100%{transform:perspective(1200px) rotateY(-16deg) rotateX(5deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-9deg) rotateX(3deg) translateY(-2cqh)}}
@keyframes flt-mon{0%,100%{transform:perspective(1200px) rotateY(14deg) rotate(2deg) translateY(0)}50%{transform:perspective(1200px) rotateY(8deg) rotate(1deg) translateY(-2cqh)}}
.card:hover .iph,.card:hover .mac,.card:hover .mon{animation-duration:3.5s}
@media (prefers-reduced-motion:reduce){.iph,.mac,.mon{animation:none}}
@media(min-width:761px){.iph{height:124cqh;margin-top:34cqh}}
/* Navegador: portada = vídeo a pantalla completa; logos fuera, al hacer scroll */
@media(min-width:901px){
  .intro{--lgh:128px;min-height:calc(100vh + var(--lgh));min-height:calc(100lvh + var(--lgh))}
  .intro .reel{bottom:var(--lgh)!important}
  .intro::before{bottom:var(--lgh)}
  .intro .lg-row{height:var(--lgh);margin-top:clamp(64px,10vh,110px);padding-block:0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:#121212;align-items:center}
  .intro .lg-track{height:100%}
}
/* logos: fuera de la portada, flotando sobre el fondo de «Lo que hacemos» */
@media(min-width:901px){.intro{min-height:100vh!important;min-height:100lvh!important}.intro .reel{bottom:0!important}.intro::before{bottom:0}}
@media(max-width:900px){.intro{padding-bottom:40px}}
.what{padding-top:0}
.what .lg-row{margin:0;height:auto;background:none!important;border:0!important;padding-block:clamp(48px,7vw,96px)}
.what .lg-track{height:auto}
.what .sec-head{margin-top:0}
@media(min-width:901px){.intro{min-height:100vh!important;min-height:100svh!important;padding-bottom:clamp(64px,11vh,120px)!important}}
/* contacto fondo liso + etiquetas sin puntos */
.talk{background:var(--charcoal)!important}
.talk::before,.talk::after{display:none!important;content:none!important}
.tags{display:flex!important;flex-wrap:wrap;gap:8px 18px;max-width:34ch!important}
.tags{flex-direction:column!important;align-items:flex-start;gap:8px!important}
/* frase portada */
.intro .lede{font-family:Inter,system-ui,sans-serif;font-weight:400;color:var(--sand);font-size:clamp(19px,2vw,30px);line-height:1.3;letter-spacing:-.01em;margin:clamp(14px,1.6vw,22px) 0 0;max-width:none;text-transform:none}
@media(max-width:900px){.intro .lede{font-size:min(5vw,21px)}.intro .reel{margin-top:30px!important}}
@media(max-width:380px){.intro .lede br{display:none}}
/* logo cabecera: punto + Social Lab */
.top .logo.mark{display:inline-flex;align-items:center;gap:12px;font-family:Inter,system-ui,sans-serif;font-weight:400;font-size:17px!important;letter-spacing:.14em;line-height:1;color:#F3F0EA}
.top .logo.mark i{width:14px;height:14px;border-radius:50%;background:var(--sand);flex:none}
@media(max-width:899px){.top .logo.mark{font-size:15px!important;gap:10px}.top .logo.mark i{width:12px;height:12px}}
.intro .lede+.intro-cta{margin-top:clamp(26px,3vh,36px)}
.intro .slogan br{display:inline!important}.intro .slogan{line-height:1.7!important}
/* scroll de capturas: lo controla JS (Safari) */
.site .shot,.mac-scr .shot{animation:none!important}
@media(min-width:761px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:761px){.what .card .media{aspect-ratio:16/10}}
@media(min-width:761px){.what .card .mon{scale:.8}}
/* showreel a pantalla completa (móvil) */
.reel-btn .arr.play{width:24px;height:24px;margin-left:3px}
.sr{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sr video{width:100%;height:100%;object-fit:contain;background:#000}
.sr-close{position:absolute;top:max(16px,env(safe-area-inset-top));left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.45);color:#fff;font:500 12px var(--body);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
@media (orientation:portrait){
  .sr.rot video{position:absolute;left:50%;top:50%;width:100vh;width:100dvh;height:100vw;max-width:none;max-height:none;transform:translate(-50%,-50%) rotate(90deg)}
  .sr.rot .sr-close{top:auto;left:auto;right:16px;bottom:auto;top:16px;transform-origin:center;transform:rotate(90deg) translateX(30px)}
}
.top .logo.mark{white-space:nowrap}@media(max-width:600px){.top .logo.mark{letter-spacing:.08em;font-size:14px!important;gap:8px}.top .logo.mark i{width:10px;height:10px}.top .back{padding:8px 12px!important;gap:6px!important;font-size:13px!important;margin-left:10px!important}}
@media(max-width:600px){.top .back{width:40px;height:40px;padding:0!important;justify-content:center;margin-left:auto!important;margin-right:4px}.top .back span{display:none}.top .back svg{width:18px;height:18px}}

/* Logo + Mallorca: punto con corrección óptica, nombre y ubicación alineados por la altura de mayúsculas */
.top .logo.mark i{position:relative;top:.07em}
.top .logo.mark .ln{margin-right:-.14em}
.top .logo.mark .loc{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-d);line-height:1;margin-right:-.28em}
.top .logo.mark .loc::before{content:"";width:1px;height:14px;background:rgba(243,240,234,.3);margin-right:14px}
@media(max-width:899px){.top .logo.mark .loc::before{margin-right:10px;height:12px}}
@media(max-width:600px){
  .top .logo.mark{display:inline-grid;grid-template-columns:auto auto;column-gap:8px;row-gap:5px;align-items:center}
  .top .logo.mark i{grid-row:1}
  .top .logo.mark .ln{grid-column:2;margin-right:-.08em}
  .top .logo.mark .loc{grid-column:2;font-size:10px;letter-spacing:.24em;margin-right:-.24em}
  .top .logo.mark .loc::before{display:none}
}

/* ===== PALETA LIMA SOBRE GRAFITO (oct 2026) ===== */
:root{--lima:#DFFF3F;--grafito:#1A1A1A;--gris:#2E2E2E;--gclaro:#9A9A9A;--hueso:#F5F5F5;
--charcoal:#1A1A1A;--ink:#1A1A1A;--paper:#F5F5F5;--stone:#F5F5F5;--sand:#9A9A9A;--white:#F5F5F5;--muted-d:#9A9A9A;--line-d:rgba(154,154,154,.25)}
body,.what,.talk,footer,.lg-row,.what .lg-row{background:var(--grafito)!important}
.what .card,.what .card .media,.what .card .info{background:var(--gris)!important}
/* titulares en lima */
.intro .logo,h1,h2,h3,.h2,.top .logo.mark,footer .logo{color:var(--lima)!important}
.logo b,.h2 b{color:var(--hueso)!important}
.top .logo.mark i{background:var(--lima)!important}
/* secundarios en hueso */
.slogan,.intro .slogan,p,.nav a,.wa-line,label,.tags,.tags span,footer a{color:var(--hueso)!important}
.tags span,.idx,small,.loc{color:var(--gclaro)!important}
/* marcos */
.ghost,.pill,.reel-btn,input,select,textarea,.what .card,.top .ig,.burger{border-color:var(--frame)!important}
.ghost,.pill{color:var(--frame-txt,var(--hueso))!important}
.reel-btn{box-shadow:inset 0 0 0 1.5px var(--frame)!important}
.what .card{border:1px solid var(--frame-card)!important}
:root{--frame:#DFFF3F;--frame-card:rgba(223,255,63,.35);--frame-txt:#DFFF3F}
/* barra superior: nombre en hueso, punto e iconos en lima */
.top .logo.mark{color:var(--hueso)!important}
.top .logo.mark i{background:var(--lima)!important}
.top .ig,.top .ig svg,.burger{color:var(--lima)!important}
.top .ig svg *{stroke:var(--lima)}
.top .back{border-color:var(--lima)!important;color:var(--lima)!important}
.top .nav a{color:var(--hueso)!important}
/* iconos y acentos en lima */
.arrow,.acc-btn svg,.acc-btn .plus,.acc-btn::after,.footer .social a,footer .social a,.wa-line a{color:var(--lima)!important}
footer .social a{border-color:var(--lima)!important}
.form button[type=submit],.talk button[type=submit],.btn-send{background:var(--lima)!important;color:var(--grafito)!important;border-color:var(--lima)!important}
.drawer a{color:var(--hueso)!important}.drawer small{color:var(--gclaro)!important}
.acc-btn,.acc-btn h3,.acc-btn span:not(.n){color:var(--lima)!important}
::selection{background:var(--lima);color:var(--grafito)}
.send{background:var(--lima)!important;color:var(--grafito)!important;border-color:var(--lima)!important}.acc-btn i{color:var(--lima)!important}.acc-btn i::before,.acc-btn i::after{background:var(--lima)!important;border-color:var(--lima)!important}
/* secciones claras → oscuras */
.what,.projects,.legal-page{background:var(--grafito)!important;color:var(--hueso)!important}
.about-box,.acct{background:var(--gris)!important;color:var(--hueso)!important}
.acct *,.legal-page p,.legal-page li,.about-box p{color:var(--hueso)!important}
.legal-page h1,.legal-page h2,.legal-page h3,.about-box h2,.about-box h3{color:var(--lima)!important}
.legal-page a,.about-box a{color:var(--lima)!important}
.see-all,.see-all.light{background:var(--lima)!important;color:var(--grafito)!important;border-color:var(--lima)!important}
/* hovers */
.ghost:hover,.pill:hover,.top .ig:hover{background:var(--lima)!important;color:var(--grafito)!important;border-color:var(--lima)!important}
.top .ig:hover svg *{stroke:var(--grafito)}
.send:hover{background:var(--hueso)!important}
/* ===== AJUSTE: lima solo para detalles (29-oct) ===== */
.intro .logo,h1,h2,h3,.h2,footer .logo,.acc-btn,.acc-btn h3,.acc-btn span:not(.n),.legal-page h1,.legal-page h2,.legal-page h3,.about-box h2,.about-box h3{color:var(--hueso)!important}
/* puntos de Social Lab en lima */
.logo b,.h2 b,.top .logo.mark i{color:var(--lima)!important}
.top .logo.mark i{background:var(--lima)!important}
/* botones: solo marco lima fino, texto hueso */
.ghost,.pill,.send,.see-all,.see-all.light,.top .back,.acc-cta{background:transparent!important;color:var(--hueso)!important;border:1px solid var(--lima)!important}
.ghost:hover,.pill:hover,.send:hover,.see-all:hover,.top .back:hover{background:var(--lima)!important;color:var(--grafito)!important;border-color:var(--lima)!important}
.reel-btn{box-shadow:inset 0 0 0 1px var(--lima)!important}
/* todos los marcos: lima y finos */
input,select,textarea,.what .card,.acct{border:1px solid var(--lima)!important}
/* iconos de barra superior y pie en blanco */
.top .ig,.top .ig svg,.burger{color:var(--hueso)!important}
.top .ig svg *{stroke:var(--hueso)}
footer .social a,footer .social a svg{color:var(--hueso)!important;border-color:var(--hueso)!important}
footer .social a{border-width:1px!important}
.top .ig:hover svg *{stroke:var(--grafito)}
.wa-line a,.legal-page a,.about-box a{color:var(--hueso)!important}
.talk button[type=submit],.form button[type=submit]{background:transparent!important;color:var(--hueso)!important;border:1px solid var(--lima)!important}.talk button[type=submit]:hover{background:var(--lima)!important;color:var(--grafito)!important}
/* ===== lima SOLO para los puntos; marcos en hueso ===== */
.ghost,.pill,.send,.see-all,.see-all.light,.top .back,.acc-cta,.talk button[type=submit],.form button[type=submit],input,select,textarea,.what .card,.acct{border-color:var(--hueso)!important}
.what .card{border-color:rgba(245,245,245,.35)!important}
input,select,textarea{border-color:rgba(245,245,245,.45)!important}
.reel-btn{box-shadow:inset 0 0 0 1px var(--hueso)!important}
.arrow,.acc-btn svg,.acc-btn i,.top .back{color:var(--hueso)!important}
.acc-btn i::before,.acc-btn i::after{background:var(--hueso)!important;border-color:var(--hueso)!important}
.ghost:hover,.pill:hover,.send:hover,.see-all:hover,.top .back:hover,.talk button[type=submit]:hover,.top .ig:hover{background:var(--hueso)!important;color:var(--grafito)!important;border-color:var(--hueso)!important}
h1 b,h2 b,.h2 b,.ph-title b,.logo b{color:var(--lima)!important}
.reel-btn{box-shadow:inset 0 0 0 1px var(--lima)!important}