/* =========================================================
   Noewe! — sistema web v1
   Paleta y logos: _Identidad Visual/03. FINALES (night · white · indigo · lime)
   ========================================================= */

@font-face{
  font-family:"Delight";
  src:url("../fonts/Delight-VF.woff2") format("woff2"),url("../fonts/Delight-VF.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* Martian Mono servida desde noewe.com (11 nov 2026): la visita no se comunica a Google */
@font-face{
  font-family:"Martian Mono";
  src:url("../fonts/MartianMono-VF.woff2") format("woff2"),url("../fonts/MartianMono-VF.ttf") format("truetype");
  font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap;
}

:root{
  --night:#101011; --night-2:#18181a; --night-3:#232326;
  --paper:#f4f3f0; --white:#fff; --iron:#dbdee3; --grey:#494e54; --mute:#8b9097;
  --indigo:#6000ff; --lime:#d2ff1f;

  --bg:var(--night); --fg:var(--white); --fg-2:rgba(255,255,255,.62); --line:rgba(255,255,255,.14);

  --font:"Delight","DM Sans",system-ui,sans-serif;
  --gutter:clamp(20px,3.4vw,56px);
  --radius:6px;

  /* curvas (Emil Kowalski) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--font);font-weight:400;font-size:clamp(16px,1.08vw,19px);line-height:1.5;
  background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .7s var(--ease-out),color .7s var(--ease-out);
  overflow-x:clip;
}
body.is-light{--bg:var(--paper);--fg:var(--night);--fg-2:rgba(16,16,17,.62);--line:rgba(16,16,17,.14)}
a{color:inherit;text-decoration:none}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--lime);color:var(--night)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- utilidades ---------- */
.wrap{padding-inline:var(--gutter)}
.micro{font-size:12px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.micro--mute{color:var(--fg-2)}
.tag{display:inline-flex;align-items:center;gap:.6em}
.tag::before{content:"("}.tag::after{content:")"}
.h-display{font-weight:800;font-size:clamp(64px,13.4vw,260px);line-height:.84;letter-spacing:-.055em}
.h-xl{font-weight:700;font-size:clamp(40px,6.2vw,112px);line-height:.95;letter-spacing:-.045em}
.h-l{font-weight:600;font-size:clamp(30px,3.6vw,62px);line-height:1.02;letter-spacing:-.035em}
.lead{font-size:clamp(19px,1.6vw,26px);line-height:1.35;letter-spacing:-.01em;font-weight:400}
.thin{font-weight:200}
.hl{color:var(--indigo)}
body:not(.is-light) .hl{color:#8a52ff} /* índigo legible sobre negro */
.lime{color:var(--lime)}
s.strike{text-decoration:none;position:relative;color:var(--fg-2)}
s.strike::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:currentColor;transform-origin:left;transform:scaleX(var(--strike,1));transition:transform .8s var(--ease-in-out) .6s}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.8em;min-height:52px;padding:0 1.6em;border-radius:999px;
  font-weight:500;font-size:16px;line-height:1.4;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
  border:1px solid currentColor;transition:transform .16s var(--ease-out),color .3s ease,border-color .3s ease;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);clip-path:inset(100% 0 0 0);transition:clip-path .45s var(--ease-out)}
.btn .arr{display:inline-block;transition:transform .3s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn--solid::before{background:var(--lime)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--bg)}
  .btn:hover::before{clip-path:inset(0 0 0 0)}
  .btn--solid:hover{color:var(--night);border-color:var(--lime)}
  .btn:hover .arr{transform:translateX(4px)}
}
.link-arrow{display:inline-flex;align-items:center;gap:.7em;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding-block:10px}
.link-arrow .arr{transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link-arrow:hover .arr{transform:translateX(6px)}}

/* ---------- cabecera ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;
  padding:18px var(--gutter);pointer-events:none;color:#fff;transition:color .4s ease,padding-top .35s var(--ease-out)}
/* con el e!: la fila del menú baja 11 px para que e!, enlaces y franja queden centrados (mismo aire arriba y abajo) */
.nav.is-compact{padding-top:29px}
/* el menú se pone oscuro cuando lo que tiene justo debajo es claro (lo decide site.js mirando ese punto) */
.nav.on-light{color:var(--night)}
.menu-open .nav.on-light{color:#fff}
.nav>*{pointer-events:auto}
.nav__links{display:flex;gap:clamp(18px,2.4vw,40px);justify-self:start}
.nav__link{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;padding-block:10px;transition:text-underline-offset .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav__link:hover{text-underline-offset:8px}}
.nav__logo{justify-self:center;position:relative;display:block}
.nav__logo img{height:76px;width:auto;margin-block:-17px;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),filter .4s ease}
.nav.on-light .nav__logo img{filter:brightness(0)}
.menu-open .nav .nav__logo img{filter:none}
/* al pasar la portada, el logotipo se cambia por el símbolo e! */
/* el dibujo del e! ocupa del 25 % al 67,5 % de su caja (centro al 46 %): se sube para que su centro quede a la altura de los textos del menú (≈39 px) */
.nav__logo .nav__e{position:absolute;top:calc(38px - var(--e-h) * .4625);left:50%;height:var(--e-h);width:auto;max-width:none;transform:translateX(-50%) scale(.9);transform-origin:50% 0;opacity:0}
/* franja detrás del e!: solo cuando aparece, semitransparente y desenfocando lo que pasa por debajo; se funde por abajo */
.nav{--e-h:150px}
/* corte nítido y recto (elegido por Santi), justo bajo el dibujo del e!:
   el e! ocupa del 25 % al 67,5 % de su caja, así que la franja acaba ahí más un margen */
.nav{--band-b:100px} /* el doble de la altura del centro del menú (50 px): el e! queda con 18 px de aire arriba y 18 abajo */
.nav::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--band-b);z-index:-1;pointer-events:none;opacity:0;
  background:rgba(16,16,17,.46);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  transition:opacity .35s var(--ease-out),background-color .4s ease}
.nav.is-compact::before{opacity:1}
.nav.on-light::before{background:rgba(244,243,240,.58)}
.menu-open .nav::before{opacity:0}
.nav.is-compact .nav__word{opacity:0;transform:scale(.94)}
.nav.is-compact .nav__e{opacity:1;transform:translateX(-50%) scale(1)}
@media (max-width:1000px){.nav__logo .nav__e{left:0;transform:scale(.9);transform-origin:left center}.nav.is-compact .nav__e{transform:none}.nav__word{transform-origin:left center}}
@media (max-width:700px){.nav__logo img{height:58px;margin-block:-13px}.nav{--e-h:92px;--band-b:82px}.nav.is-compact{padding-top:18px}.nav__logo .nav__e{top:calc(36px - var(--e-h) * .4625)}}
.nav__right{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);justify-self:end}
@media (min-width:1001px){.nav .burger{display:none}}
@media (max-width:1000px){.nav__links,.nav__right .nav__link{display:none}.nav{grid-template-columns:auto minmax(0,1fr)}.nav__logo{justify-self:start;grid-column:1;grid-row:1}.nav__right{grid-column:2;grid-row:1}}
.nav__cta{font-size:14px;letter-spacing:.02em}
/* idioma: ES / EN en mono. EN queda apagado hasta que exista la versión en inglés */
.lang{display:flex;align-items:center;gap:6px;font-family:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;font-stretch:87.5%;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.lang__opt{padding:10px 2px;opacity:.55;transition:opacity .2s ease}
.lang__opt.is-on{opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.lang__opt[aria-disabled="true"]{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){.lang__opt:not(.is-on):not([aria-disabled="true"]):hover{opacity:1}}
.lang__sep{opacity:.35}
.burger{width:46px;height:46px;display:grid;place-items:center;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:1.5px;background:currentColor;transition:transform .4s var(--ease-in-out)}
.burger span:nth-child(1){transform:translateY(-4px)}
.burger span:nth-child(2){transform:translateY(4px)}
.menu-open .burger span:nth-child(1){transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:rotate(-45deg)}

/* ---------- menú a pantalla completa ---------- */
.menu{position:fixed;inset:0;z-index:70;background:var(--night);color:#fff;display:grid;grid-template-rows:1fr auto;
  padding:120px var(--gutter) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-in-out);visibility:hidden}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__list{list-style:none;align-self:center}
.menu__list li{overflow:hidden}
.menu__list a{display:flex;align-items:baseline;gap:18px;font-size:clamp(44px,7.2vw,120px);font-weight:700;letter-spacing:-.045em;line-height:1.02;
  transform:translateY(105%);transition:transform .7s var(--ease-out),color .25s ease}
.menu__list a small{font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--mute)}
.menu-open .menu__list a{transform:none}
.menu-open .menu__list li:nth-child(2) a{transition-delay:.05s}
.menu-open .menu__list li:nth-child(3) a{transition-delay:.1s}
.menu-open .menu__list li:nth-child(4) a{transition-delay:.15s}
.menu-open .menu__list li:nth-child(5) a{transition-delay:.2s}
@media (hover:hover) and (pointer:fine){.menu__list a:hover{color:var(--lime)}}
.menu__foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--mute);font-size:14px}
.menu__foot a:hover{color:#fff}

/* ---------- botón flotante e! ---------- */
.fab{position:fixed;right:var(--gutter);bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:var(--indigo);display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(96,0,255,.7);
  transform:translateY(140%);transition:transform .5s var(--ease-drawer),background-color .3s ease}
.fab.is-on{transform:none}
.fab img{width:48px;transform:translate(-6%,4%)}  /* el dibujo del «e!» trae margen y va descentrado: se agranda y se centra sin tocar la bola (58px) */
.fab:active{transform:scale(.95)}
.fab__label{position:absolute;right:calc(100% + 12px);white-space:nowrap;background:var(--night);color:#fff;font-size:13px;padding:8px 12px;border-radius:999px;
  opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .2s var(--ease-out);pointer-events:none}
@media (hover:hover) and (pointer:fine){.fab:hover{background:var(--night)}.fab:hover .fab__label{opacity:1;transform:none}}
.fab--wa{bottom:92px;background:#25D366;color:#fff;box-shadow:0 12px 30px -10px rgba(37,211,102,.6);transition-delay:.05s}
.fab--wa svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.fab--wa:hover{background:#1DA851}}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;display:none}
.cursor__label{position:fixed;left:0;top:0;z-index:91;pointer-events:none;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  background:var(--lime);color:var(--night);display:none;place-items:center;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transform:scale(.4);opacity:0;transition:transform .35s var(--ease-out),opacity .2s ease}
.cursor__label.is-on{transform:scale(1);opacity:1}
@media (hover:hover) and (pointer:fine){.cursor{display:block}.cursor__label{display:grid}}

/* ---------- transición de página ---------- */
.curtain{position:fixed;inset:0;z-index:100;background:var(--indigo);pointer-events:none;clip-path:inset(0 0 0 0);display:grid;place-items:center}
.curtain img{width:clamp(220px,30vw,460px);max-width:none;opacity:.95} /* el e! de la cortina, grande (Santi) */
.curtain.is-out{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-in-out)}
.curtain.is-in{clip-path:inset(0 0 0 0);transition:clip-path .55s var(--ease-in-out)}
.curtain.is-wait{clip-path:inset(100% 0 0 0)}

/* ---------- héroe ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:110px var(--gutter) 26px;overflow:hidden}
.hero__gl{position:absolute;inset:0;z-index:0}
.hero__gl canvas{width:100%;height:100%}
.hero__glow{position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 40% at 72% 42%,rgba(96,0,255,.28),transparent 70%),radial-gradient(30% 30% at 20% 85%,rgba(210,255,31,.06),transparent 70%)}
.hero__top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,30rem);align-content:start;gap:0}
.hero__motto{font-size:15px;line-height:1.4;max-width:22ch;font-weight:500}
.hero__sectors{list-style:none;margin-top:clamp(60px,14vh,160px);font-size:15px;font-weight:500;line-height:1.5}
.hero__sectors li{overflow:hidden}
.hero__sectors span{display:block}
.hero__def{max-width:34ch;font-size:14px;color:var(--fg-2);margin-top:28px}
.hero__bottom{position:relative;z-index:1}
.hero__title{margin-top:24px}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .line>span{display:block}
.hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:28px}
.hero__sub{font-size:clamp(18px,1.6vw,26px);font-weight:300;max-width:24ch;line-height:1.25}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero__bar{display:flex;justify-content:space-between;margin-top:34px;color:var(--fg-2)}


/* ---------- portada: vídeo → «!» → marco → mercado ---------- */
/* Sin JS o con movimiento reducido, las tres capas se apilan como secciones normales. Con JS (.is-anim) se superponen y el scroll las encadena. */
.mono-label{font-family:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;font-stretch:87.5%;font-size:11px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:rgba(255,255,255,.72)}
.intro{position:relative;background:var(--night);color:#fff}
.intro__stage{position:relative}
.intro__layer{position:relative;min-height:100svh}
.intro.is-anim .intro__stage{height:100svh;overflow:hidden}
.intro.is-anim .intro__layer{position:absolute;inset:0;min-height:0}
.intro__about{z-index:1}
.intro__hero{z-index:2;background:#000;overflow:hidden}
.intro__statement{z-index:3}

.intro__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro__focus{position:absolute;inset:0;overflow:hidden;background:#2a0e61} /* el color del fondo del vídeo ya oscurecido: cubre lo que deja el vídeo al bajar */
.intro__blur,.intro__sharp{position:absolute;inset:0;top:var(--drop,0px);bottom:calc(var(--drop,0px) * -1);width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.intro__blur{filter:blur(22px) brightness(.78) saturate(.9);transform:scale(1.06)}
.intro__sharp{clip-path:polygon(0 0,0 0,0 0)}
.intro__win{position:absolute;left:0;top:0;height:100%;width:var(--bw);pointer-events:none;will-change:transform;border-left:1px solid rgba(255,255,255,.7);border-right:1px solid rgba(255,255,255,.7)}
.intro__bar,.intro__dot{display:none}
.intro__cross{display:none;position:absolute;left:calc(50% - 12px);top:calc(var(--cy, 40%) - 12px);width:24px;height:24px}
.intro__cross::before,.intro__cross::after{content:"";position:absolute;background:var(--lime)}
.intro__cross::before{left:11px;top:0;width:2px;height:24px}
.intro__cross::after{top:11px;left:0;height:2px;width:24px}
.intro__focus[data-dir="h"] .intro__win{width:100%;height:var(--bw);border:0}
.intro__focus[data-dir="h"] .intro__cross{left:calc(var(--cx, 50%) - 12px);top:calc(50% - 12px)}
/* portada: «Marca» arriba, «a la altura.» sigue la mirada, la pregunta abajo.
   Sin JS se apila abajo; con JS (.is-set) intro.js coloca cada pieza, calcula tamaños y pone topes para que nada choque. */
.intro__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,0) 22%,rgba(11,11,12,0) 55%,rgba(11,11,12,.6) 100%)}
.intro__e{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:110px var(--gutter) clamp(18px,2.4vw,30px)}
.intro__labels{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.intro__title{font-weight:900;font-size:clamp(56px,12vw,220px);line-height:.8;letter-spacing:-.062em}
.intro__marca,.intro__alt,.intro__title .w{display:block;white-space:nowrap}
.intro__alt{font-weight:200;letter-spacing:-.055em;will-change:transform}
.intro__ask{font-size:clamp(20px,2.6vw,40px);font-weight:300;letter-spacing:-.03em;line-height:1.12;max-width:16em}
.intro__ask b{font-weight:800}
/* el claim, como anotación de la franja (mono, igual que una cota en un plano) */
.intro__sub{font-family:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;font-stretch:87.5%;font-size:13px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:#fff;display:flex;align-items:center;gap:12px}
.intro__sub::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
.intro__e.is-set{display:block;padding:0}
.intro__e.is-set .intro__title{position:static}
.intro__e.is-set .intro__labels,.intro__e.is-set .intro__marca,.intro__e.is-set .intro__alt,.intro__e.is-set .intro__ask,.intro__e.is-set .intro__sub{position:absolute;left:var(--gutter);top:0}
.intro__e.is-set .intro__labels{right:var(--gutter)}
.intro__e.is-set:not(.is-narrow) .intro__ask,.intro__e.is-set:not(.is-narrow) .intro__sub{white-space:nowrap;max-width:none}
.intro__e.is-set:not(.is-narrow) .intro__ask br{display:none}
.intro__e.is-set .intro__go{position:absolute;left:auto;right:var(--gutter);top:0;color:#fff}
.intro__e.is-narrow .intro__go{right:auto;left:var(--gutter)}
/* aviso de scroll: discreto, en el borde derecho; solo en escritorio y desaparece al bajar */
.intro__hint{display:none}
.intro__e.is-set:not(.is-narrow) .intro__hint{display:flex;position:absolute;left:auto;top:50%;right:var(--gutter);flex-direction:column;align-items:center;gap:14px;
  writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.intro__hint i{display:block;width:1px;height:56px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.intro__hint i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateY(-100%);animation:hint 2.2s var(--ease-in-out) infinite}
@keyframes hint{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.intro__hint i::after{animation:none;transform:none}}
.intro__e.is-narrow .intro__ask{left:auto;right:var(--gutter);text-align:right;max-width:72%}
.intro__e.is-narrow .intro__sub{font-size:11px;max-width:none;right:var(--gutter)}
@media (max-width:600px){.intro__labels span+span{display:none}}

.intro__about{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--bang-w,56px) + 2 * clamp(28px,5vw,90px)) minmax(0,1fr);align-items:center;padding:110px var(--gutter) 60px}
.intro__col{display:flex;flex-direction:column;gap:16px;max-width:27rem}
.intro__col--l{justify-self:end}
.intro__col--r{justify-self:start}
/* iconos oficiales de Streamline Sharp Line (Select Frame = Marco, Line Arrow Right 1 = Mercado), trazo 1,5.
   Copia en Drive: _Identidad Visual/Iconos Sharp Line/ */
.intro__sym{display:block;line-height:0}
.intro__sym svg{display:block;width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:miter}
.intro__col h2{font-weight:800;font-size:clamp(34px,4.2vw,74px);line-height:.94;letter-spacing:-.05em}
.intro__col h2 span{font-weight:200;display:block}
.intro__col p{color:rgba(255,255,255,.66);font-size:clamp(15px,1.05vw,17px);line-height:1.5;max-width:36ch}
.intro__marco{position:absolute;left:50%;top:calc(50% + var(--bang-h,300px) / 2 + 18px);transform:translateX(-50%);color:var(--lime);display:none}
.intro.is-anim .intro__marco{display:block}

.intro__statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.intro__half{position:relative;overflow:hidden;min-height:inherit}
.intro__half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro__half::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,17,.62) 0%,rgba(16,16,17,.1) 45%,rgba(16,16,17,.55) 100%)}
.intro__halfin{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(96px,12vh,130px) var(--gutter) clamp(22px,3vh,34px)}
.intro__half--r .intro__halfin{align-items:flex-end;text-align:right}
.intro__head{font-weight:800;font-size:clamp(32px,4.6vw,86px);line-height:.92;letter-spacing:-.05em}
.intro__row{display:block;overflow:hidden;padding-bottom:.05em}
.intro__row>span{display:block}
.intro__cta{margin-top:auto;color:#fff}
.intro-on .fab{transform:translateY(140%)}

@media (max-width:700px){
  .intro__about{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) calc(var(--bang-h,200px) + 88px) minmax(0,1fr);padding:84px var(--gutter) 28px;gap:0}
  .intro__col{justify-self:stretch!important;max-width:none;gap:10px}
  .intro__col--l{align-self:end;padding-bottom:6px}
  .intro__col--r{align-self:start;padding-top:6px}
  .intro__col p{font-size:14px}
  .intro__col h2{font-size:clamp(30px,9vw,44px)}
  .intro__col h2 span{display:inline}
  /* «(Mirada)» debajo del «!», como en ordenador (13 nov 2026): la fila del centro deja sitio */
  .intro__statement{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr}
  .intro:not(.is-anim) .intro__half{min-height:70svh}
  .intro__halfin{padding:84px var(--gutter) 20px}
  .intro__half--r .intro__halfin{padding-top:24px}
  .intro__head{font-size:clamp(30px,9.4vw,46px)}
}

/* ---------- secciones ---------- */
.sec{position:relative;padding-block:clamp(110px,15vw,240px)}
.sec__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(40px,6vw,90px);flex-wrap:wrap}

/* texto que se ilumina palabra a palabra */
.light-text{font-weight:600;font-size:clamp(34px,5.4vw,96px);line-height:1;letter-spacing:-.045em;max-width:17ch}
.light-text .w{opacity:.16;transition:opacity .2s linear}
.problem__body{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(60px,8vw,120px)}
.problem__body .lead{grid-column:6 / span 6}
.problem__body .lead p+p{margin-top:.9em}
.problem__mmm{grid-column:6 / -1;margin-top:40px;display:flex;gap:28px;font-weight:700;font-size:clamp(22px,2vw,32px);letter-spacing:-.02em}

/* bloque "un solo equipo" */
.team-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--split-gap);align-items:center}
.team-split__text p{margin-top:24px;max-width:52ch;color:var(--fg-2)}
.screen{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--night);color:#fff}
.screen video,.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.screen__word{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:clamp(40px,6vw,104px);letter-spacing:-.05em}
.screen__word span{transition:opacity .35s ease,filter .35s ease,transform .35s var(--ease-out)}
.screen__word span.is-swap{opacity:0;filter:blur(8px);transform:translateY(8px)}
.screen__dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.5px);background-size:28px 28px;mix-blend-mode:overlay}
.screen__meta{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between}

/* proyectos (escalonados como vrmstudio) */
.work-list{display:flex;flex-direction:column;gap:clamp(90px,12vw,190px)}
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.work__meta{grid-column:1 / span 4;display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:110px}
.work__name{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--fg-2)}
.work__line{font-weight:600;font-size:clamp(24px,2.3vw,40px);line-height:1.12;letter-spacing:-.03em;max-width:18ch}
.work__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.work__tags span{font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg-2)}
/* etiquetas: tipo de activo en blanco; lo que hicimos, solo con borde */
.work__tags span.t-activo{background:#fff;color:#101011;border-color:#fff}
.work__media{grid-column:5 / -1;position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:16/10;background:var(--night-3)}
.work:nth-child(even) .work__meta{grid-column:9 / -1;grid-row:1}
.work:nth-child(even) .work__media{grid-column:1 / span 8;grid-row:1}
.work--tall .work__media{aspect-ratio:4/5;grid-column:6 / span 5}
.work__media img,.work__media video{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.work__media .num{position:absolute;top:16px;left:18px;z-index:2;color:#fff;mix-blend-mode:difference}
.reveal-clip{clip-path:inset(18% 10% 18% 10%)}
.js-ready .reveal-clip{transition:none}

/* reel */
.reel{position:relative;height:220vh}
.reel__stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.reel__frame{position:relative;width:min(56vw,900px);aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;will-change:transform}
.reel__frame video{width:100%;height:100%;object-fit:cover}
.reel__ui{position:absolute;inset:auto 0 24px 0;display:flex;justify-content:center;gap:12px;z-index:2}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;background:rgba(16,16,17,.6);backdrop-filter:blur(10px);color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:transform .16s var(--ease-out),background-color .2s ease}
.pill:active{transform:scale(.97)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.pill[aria-pressed="false"] i{background:#ff4d4d}
.reel__caption{position:absolute;top:110px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;z-index:2;color:#fff;mix-blend-mode:difference}

/* para quién */
.who{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.who__item{padding:30px 28px 10px 0;border-right:1px solid var(--line)}
.who__item+.who__item{padding-left:28px}
.who__item:last-child{border-right:0}
.who__item h3{font-size:clamp(24px,2.2vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.12;margin:26px 0 18px}
.who__item p{color:var(--fg-2);max-width:46ch}

/* DONE */
.done-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.done-col{padding:22px 22px 0 0;border-right:1px solid var(--line);display:flex;flex-direction:column}
/* la frase en índigo siempre a la misma altura en las cuatro columnas, aunque un texto ocupe una línea más */
.done-col+.done-col{padding-left:22px}
.done-col:last-child{border-right:0}
.done-col b{display:block;font-weight:800;font-size:clamp(96px,15vw,280px);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--fg);
  background:linear-gradient(var(--fg),var(--fg)) no-repeat 0 100%/100% var(--fill,0%);-webkit-background-clip:text;background-clip:text}
.done-col h3{font-size:22px;font-weight:600;letter-spacing:-.012em;margin:26px 0 8px}
.done-col p{color:var(--fg-2);font-size:15px;max-width:30ch}
.done-col p{flex:1}
.done-col em{display:block;font-style:normal;margin-top:16px;font-size:13px;color:var(--hl-c,var(--indigo));font-weight:600}

/* Santi y equipo */
.santi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--split-gap);align-items:start}
.santi__photo{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);position:sticky;top:100px}
.santi__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.santi__text .lead{margin-top:28px;max-width:46ch;color:var(--fg-2)}
.team{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:28px 30px;margin-top:clamp(50px,6vw,90px);border-top:1px solid var(--line);padding-top:30px}
.team b{display:block;font-weight:600;font-size:18px}
.team span{color:var(--fg-2);font-size:14px}

/* servicios numerados */
.svc{list-style:none;border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:70px 48px 1fr auto;align-items:center;gap:20px;padding:22px 0;position:relative}
/* iconos de servicio: Streamline Sharp Line, trazo 1,5 (copias en Drive: _Identidad Visual/Iconos Sharp Line/) */
.svc__ic{display:block;line-height:0}
.svc__ic svg{display:block;width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:miter;transition:color .25s ease}
.svc__n{font-size:13px;color:var(--fg-2);font-weight:500}
.svc__t{font-weight:600;font-size:clamp(28px,4.2vw,72px);line-height:1;letter-spacing:-.045em;text-transform:uppercase;transition:transform .45s var(--ease-out),color .25s ease}
.svc__d{grid-column:3 / 4;color:var(--fg-2);max-width:56ch;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.svc__d>span{overflow:hidden}
.svc__arr{font-size:28px;transition:transform .35s var(--ease-out)}
.svc__new{font-size:11px;letter-spacing:.14em;background:var(--lime);color:var(--night);padding:5px 8px;border-radius:3px;vertical-align:middle;margin-left:12px;position:relative;top:-.5em}
@media (hover:hover) and (pointer:fine){
  .svc a:hover .svc__t{transform:translateX(14px);color:var(--lime)}
  .svc a:hover .svc__ic svg{color:var(--lime)}
  .svc a:hover .svc__d{grid-template-rows:1fr}
  .svc a:hover .svc__arr{transform:rotate(-45deg)}
}
@media (hover:none){.svc__d{grid-template-rows:1fr}}

/* testimonio + clientes */
.quote{font-weight:300;font-size:clamp(30px,4vw,68px);line-height:1.08;letter-spacing:-.035em;max-width:24ch}
.quote b{font-weight:700}
.quote-sign{margin-top:34px;display:flex;gap:14px;align-items:center;color:var(--fg-2);font-size:15px}
.quote-sign i{width:40px;height:1px;background:currentColor}
.marquee{overflow:hidden;white-space:nowrap;margin-top:clamp(70px,9vw,130px);border-block:1px solid var(--line);padding-block:26px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:inline-flex;gap:64px;padding-left:64px;animation:marquee 46s linear infinite}
.marquee__track span{font-weight:600;font-size:clamp(22px,2.4vw,40px);letter-spacing:-.03em;color:var(--fg-2)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* CTA final */
.final{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden}
.final__gl{position:absolute;inset:0}
.final__inner{position:relative;z-index:1;padding-inline:var(--gutter)}
.final h2{font-weight:700;font-size:clamp(44px,7vw,128px);line-height:.94;letter-spacing:-.05em;max-width:14ch;margin-inline:auto}
.final p{margin-top:22px;color:var(--fg-2);font-size:clamp(18px,1.5vw,24px)}
.final .btn{margin-top:40px}

/* pie */
.foot{background:var(--white);color:var(--night);padding:clamp(70px,8vw,120px) var(--gutter) 22px;position:relative;z-index:1}
.foot a:hover{color:var(--indigo)}
.foot__top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.foot__top h2{font-weight:700;font-size:clamp(36px,4.6vw,80px);letter-spacing:-.045em;line-height:.95}
.foot .btn{color:var(--night)}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:clamp(60px,7vw,110px);font-size:15px}
.foot__cols h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6b7076;font-weight:500;margin-bottom:14px}
.foot__cols ul{list-style:none;display:grid;gap:6px}
.foot__mark{margin-top:clamp(60px,8vw,120px)}
.foot__mark svg{width:100%;height:auto;display:block}
.foot__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;font-size:12px;color:#6b7076}

/* ---------- página de proyectos ---------- */
.page-head{padding:clamp(150px,18vw,260px) var(--gutter) clamp(50px,6vw,90px)}
.page-head .h-xl{max-width:16ch;margin-top:22px}
.page-head .lead{max-width:42ch;margin-top:28px;color:var(--fg-2)}
/* ---------- proyectos apilados (Stacked) ----------
   Cada tarjeta se queda fija bajo la cabecera; la siguiente sube encima y la de atrás se encoge y se oscurece (site.js).
   Nombre enorme en Delight, ficha en mono, como el resto del sistema. */
.stack{--stack-top:132px;--stack-step:14px;display:flex;flex-direction:column;gap:9vh;padding-block:clamp(20px,3vw,40px) clamp(120px,16vw,240px)}
.stack__item{position:sticky;top:calc(var(--stack-top) + var(--k,0) * var(--stack-step));height:calc(100svh - var(--stack-top) - 48px);min-height:440px}
.stack__item.is-hidden{display:none}
.stack__card{position:relative;display:block;height:100%;border-radius:10px;overflow:hidden;background:var(--night-3);color:#fff;transform-origin:50% 0;will-change:transform}
.stack__media{position:absolute;inset:0}
.stack__media img,.stack__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.stack__card:hover .stack__media img,a.stack__card:hover .stack__media video{transform:scale(1.03)}}
.stack__shade{position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 50%,rgba(16,16,17,.38),rgba(16,16,17,0) 70%),linear-gradient(180deg,rgba(16,16,17,.55) 0%,rgba(16,16,17,.1) 30%,rgba(16,16,17,.14) 60%,rgba(16,16,17,.72) 100%)} /* oscurece el centro para que el nombre se lea también sobre fotos claras */
.stack__top{position:absolute;left:clamp(18px,2.4vw,32px);right:clamp(18px,2.4vw,32px);top:clamp(16px,2vw,26px);display:flex;justify-content:space-between;gap:16px;color:#fff}
.stack__name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92%;text-align:center;font-weight:800;font-size:clamp(52px,10.5vw,200px);line-height:.88;letter-spacing:-.058em;text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.25)}
.stack__foot{position:absolute;left:clamp(18px,2.4vw,32px);right:96px;bottom:clamp(18px,2.2vw,30px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.stack__foot p{max-width:40ch;font-size:clamp(15px,1.15vw,19px);line-height:1.35;font-weight:300}
.stack__cta{display:inline-flex;align-items:center;gap:.6em;flex:none;min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.6);border-radius:999px;font-size:14px}
.stack__cta .arr{transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.stack__card:hover .stack__cta .arr{transform:translateX(4px)}}
.stack__dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
@media (max-width:700px){
  .stack{--stack-top:96px;--stack-step:10px;gap:6vh}
  .stack__item{height:calc(100svh - var(--stack-top) - 28px);min-height:380px}
  .stack__name{font-size:15vw}
  .stack__foot{flex-direction:column;align-items:flex-start;gap:14px;right:clamp(18px,2.4vw,32px)}
  .stack__top span:last-child{text-align:right}
}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
.filter{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.filter:active{transform:scale(.97)}
.filter[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.grid-work{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px);row-gap:clamp(60px,7vw,110px)}
.card{grid-column:span 6;display:flex;flex-direction:column;gap:14px;transition:opacity .4s ease}
.card.is-hidden{display:none}
.card:nth-child(4n+1){grid-column:1 / span 7}
.card:nth-child(4n+2){grid-column:9 / span 4;margin-top:clamp(80px,12vw,200px)}
.card:nth-child(4n+3){grid-column:2 / span 5}
.card:nth-child(4n+4){grid-column:7 / span 6;margin-top:clamp(40px,6vw,100px)}
.card__media{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:var(--night-3)}
.card:nth-child(4n+2) .card__media{aspect-ratio:4/5}
.card__media img,.card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card:hover .card__media img,.card:hover .card__media video{transform:scale(1.04)}}
.card__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card__row h3{font-weight:600;font-size:clamp(22px,1.9vw,30px);letter-spacing:-.02em}
.card p{color:var(--fg-2);max-width:40ch}
.index{list-style:none;border-top:1px solid var(--line);margin-top:30px}
.index li{display:grid;grid-template-columns:1.2fr 1fr .5fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}
.index li span:nth-child(2){color:var(--fg-2)}
.index li span:last-child{text-align:right;color:var(--fg-2)}

/* ---------- caso ---------- */
.case-hero{position:relative;height:100svh;overflow:hidden}
.case-hero video,.case-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,17,.35),rgba(16,16,17,0) 30%,rgba(16,16,17,.85))}
.case-hero__in{position:absolute;inset:auto var(--gutter) 36px;z-index:1;color:#fff}
.case-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:24px}
.case-facts dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin-bottom:8px}
.case-facts dd{font-size:16px}
.case-facts:has(>div:nth-child(5)){grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.55fr)}
.case-block{display:grid;grid-template-columns:4fr 8fr;gap:var(--split-gap)}
.case-block .lead+.lead{margin-top:.8em}
.case-block ul{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.case-block li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.case-media{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.case-media figure{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--night-3)}
.case-media figure img,.case-media figure video{width:100%;height:100%;object-fit:cover}
.case-media .full{grid-column:1 / -1;aspect-ratio:16/8}
.case-media .half{grid-column:span 6;aspect-ratio:4/3}
.next-case{display:block;padding-block:clamp(90px,12vw,180px);text-align:center}
.next-case .h-display{font-size:clamp(56px,11vw,200px);transition:color .3s ease}
@media (hover:hover) and (pointer:fine){.next-case:hover .h-display{color:var(--lime)}}

/* ---------- entradas ---------- */
.js-ready [data-reveal]{opacity:0;transform:translateY(36px)}
.js-ready [data-reveal].is-in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav__cta{display:none}
  .hero__top{grid-template-columns:1fr}
  .hero__def{justify-self:start;margin-top:30px}
  .problem__body .lead,.problem__mmm{grid-column:1 / -1}
  .team-split,.santi,.case-block{grid-template-columns:minmax(0,1fr)}
  .santi__photo{position:relative;top:0;max-width:520px}
  .work__meta,.work:nth-child(even) .work__meta{grid-column:1 / -1;grid-row:auto;position:relative;top:0}
  .work__media,.work:nth-child(even) .work__media,.work--tall .work__media{grid-column:1 / -1;grid-row:auto}
  .who,.done-grid{grid-template-columns:1fr 1fr}
  .who__item,.who__item+.who__item,.done-col,.done-col+.done-col{padding:26px 18px 26px 0;border-right:0;border-bottom:1px solid var(--line)}
  .reel__frame{width:86vw}
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__cols>div:nth-child(3),.foot__cols>div:nth-child(4){grid-column:1/-1} /* Contacto a todo el ancho: la dirección cabe en una línea (14 nov 2026) */
  .grid-work .card,.grid-work .card:nth-child(n){grid-column:1 / -1;margin-top:0}
  .case-facts{grid-template-columns:1fr 1fr}
  .case-facts:has(>div:nth-child(5)){grid-template-columns:1fr 1fr}
  .case-media .half{grid-column:1 / -1}
}
@media (max-width:620px){
  .who,.done-grid{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .svc a{grid-template-columns:30px 32px 1fr auto;gap:12px}
  .svc__ic svg{width:30px;height:30px}
  .index li{grid-template-columns:1fr 1fr}
  .index li span:last-child{display:none}
  .hero__bar span:last-child{display:none}
}

/* ---------- movimiento reducido: menos y más suave, no cero ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .js-ready [data-reveal]{opacity:1;transform:none}
  .reveal-clip{clip-path:none}
  .menu__list a{transform:none}
  .reel{height:auto}.reel__stick{position:relative;height:auto;padding-block:80px}
}

/* ---------- iconos de interfaz (Streamline Sharp Line) ----------
   Las flechas «→» se dibujan con el icono Line Arrow Right 1; el texto queda oculto pero sigue ahí para lectores de pantalla. */
:root{--ic-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m0 12 22.5 0m-8 8 8-8-8-8'/%3E%3C/svg%3E")}
.arr,.svc__arr{display:inline-block;flex:none;width:.95em;height:.95em;overflow:hidden;text-indent:200%;white-space:nowrap;vertical-align:-.1em;background:currentColor;
  -webkit-mask:var(--ic-arrow) center/contain no-repeat;mask:var(--ic-arrow) center/contain no-repeat}
.svc__arr{--ic-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='m0 12 22.5 0m-8 8 8-8-8-8'/%3E%3C/svg%3E");width:.9em;height:.9em}
.ic{display:inline-block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:miter;vertical-align:-3px;margin-right:10px}
.pill__ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.pill .ic-on{display:none}
.pill[aria-pressed="true"] .ic-on{display:block}
.pill[aria-pressed="true"] .ic-off{display:none}

/* ---------- textos pequeños y etiquetas en mono (Martian Mono), como pide el sistema tipográfico ---------- */
.micro,.svc__n,.svc__new,.pill,.filter,.work__tags span,.work__name,.team span,.menu__list a small,.foot__cols h3,.foot__bar,.fab__label{
  font-family:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.micro{font-size:11px}
.filter{font-size:12px}
.team span{font-size:11.5px}
.work__tags span{font-size:11px}
.work__name{font-size:12px}
.foot__bar{font-size:11px}
.svc__n{font-size:12px}

/* ---------- equipo: colaboradores y trayectoria de Santi ---------- */
.team__extra{margin-top:28px;color:var(--fg-2);max-width:52ch}
.career{margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--line);padding-top:26px}
.career__list{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:18px;font-family:"Martian Mono",ui-monospace,monospace;font-stretch:87.5%;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.career__note{margin-top:18px;color:var(--fg-2);font-size:14px}
.foot__cols>div:nth-child(3) li:last-child{padding-left:26px} /* segunda línea de la dirección, alineada con el texto tras el icono */

/* ---------- casos: más formatos de figura ---------- */
.case-media figure.wide{grid-column:span 8}
.case-media figure.third{grid-column:span 4}
.case-media .pair{grid-column:span 8;display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:0}
.case-media .pair figure{min-height:0}
.case-media figure.paper{background:#fff}
.case-media figure.fit img{object-fit:contain}
.case-step{display:grid;grid-template-columns:4fr 8fr;gap:var(--split-gap);padding-top:28px;border-top:1px solid var(--line)}
.case-step+.case-step{margin-top:clamp(70px,9vw,140px)}
.case-step h3{font-weight:600;font-size:clamp(30px,3.6vw,60px);line-height:1.02;letter-spacing:-.035em;margin-top:14px}
.case-step .lead{max-width:40ch}
.case-step ul{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.case-step li{padding:12px 0;border-bottom:1px solid var(--line)}
.case-step .case-media{margin-top:clamp(30px,4vw,56px);grid-column:1 / -1}

/* ---------- logos de clientes ---------- */
.marquee--logos .marquee__track{gap:clamp(36px,4vw,64px);align-items:center;animation-duration:60s}
.client-logo{display:block;flex:none;width:clamp(118px,11vw,170px);aspect-ratio:140/96;background:var(--fg-2);
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

@media (max-width:1000px){
  .case-media figure.wide,.case-media figure.third,.case-media .pair{grid-column:1 / -1}
  .case-media .pair{grid-template-rows:none}
  .case-step{grid-template-columns:1fr}
}

/* ---------- sello IA sobre imágenes ---------- */
.case-media figure img.ia-stamp{position:absolute;bottom:var(--ia-h);height:var(--ia-h);width:auto;object-fit:contain;pointer-events:none}
.case-media figure{--ia-h:clamp(18px,1.5vw,26px)}
.ia-stamp--l{left:var(--ia-h)}
.ia-stamp--r{right:var(--ia-h)}
.ia-note{grid-column:1 / -1;margin-top:4px}

/* clientes de Noewe! (separados de la trayectoria de Santi) */
.clients-label{margin-top:clamp(70px,9vw,130px);color:var(--fg-2)}
.clients-label + .marquee{margin-top:18px}
.career__note a{text-decoration:underline;text-underline-offset:3px}

/* logos vectoriales con tamaño óptico (ancho y alto por logo) */
.marquee--logos{--u:1px}
.client-logo--v{width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));aspect-ratio:auto;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.marquee--logos .marquee__track{gap:clamp(48px,5vw,88px)}
@media (max-width:620px){.marquee--logos{--u:.72px}}

/* ---------- contacto con formulario ---------- */
.final--form{display:block;min-height:0;text-align:left;padding-block:clamp(100px,12vw,180px)}
.final--form .final__gl{pointer-events:none}
.contact{position:relative;z-index:1;display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,110px);align-items:start}
.contact__intro h2{font-weight:700;font-size:clamp(40px,5vw,84px);line-height:.94;letter-spacing:-.05em;max-width:12ch;margin:22px 0 0}
.contact__lead{margin-top:20px;color:var(--fg-2);font-size:clamp(18px,1.4vw,22px);max-width:30ch}
.contact__direct{margin-top:clamp(40px,5vw,72px);display:grid;gap:10px;font-size:17px}
.contact__direct a{width:fit-content;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s ease}
@media (hover:hover){.contact__direct a:hover{border-color:var(--lime)}}
.contact__direct p{color:var(--fg-2)}
.contact__direct .mono-label{color:var(--fg-2)}
.contact__sla{margin-top:8px;display:flex;align-items:center;gap:10px}
.contact__sla::before{content:"";width:8px;height:8px;background:var(--lime)}
.cform{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius,14px);padding:clamp(22px,3vw,40px);display:grid;gap:26px;backdrop-filter:blur(6px)}
.cform .mono-label{color:var(--fg-2)}
.cform i{font-style:normal;opacity:.6;text-transform:none;letter-spacing:0}
.cform__chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cform__chips legend{margin-bottom:14px;padding:0;width:100%}
.cform__chips label{cursor:pointer}
.cform__chips input{position:absolute;opacity:0;pointer-events:none}
.cform__chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-size:15px;transition:background .2s ease,color .2s ease,border-color .2s ease}
@media (hover:hover){.cform__chips label:hover span{border-color:var(--fg-2)}}
.cform__chips input:checked+span{background:var(--lime);border-color:var(--lime);color:var(--night)}
.cform__chips input:focus-visible+span{outline:2px solid var(--lime);outline-offset:3px}
.cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.cfield{display:grid;gap:8px;min-width:0}
.cfield input,.cfield select,.cfield textarea{font:inherit;font-size:17px;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 0 10px;width:100%;transition:border-color .2s ease;-webkit-appearance:none;appearance:none}
.cfield select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.cfield select option{color:#101011}
.cfield textarea{resize:vertical;min-height:110px;line-height:1.45}
.cfield input::placeholder,.cfield textarea::placeholder{color:var(--fg-2);opacity:.7}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{outline:none;border-color:var(--lime)}
.cfield.is-bad input,.cfield.is-bad textarea,.cform__chips.is-bad span{border-color:#ff6b5a}
.cform__more{border-top:1px solid var(--line);padding-top:18px}
.cform__more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.cform__more summary::-webkit-details-marker{display:none}
.cform__more summary::before{content:"+";font-size:16px;width:14px}
.cform__more[open] summary::before{content:"–"}
.cform__more .cform__grid{margin-top:18px;grid-template-columns:1fr 1fr}
.cform__legal{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--fg-2);cursor:pointer}
.cform__legal input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;border:1px solid var(--fg-2);border-radius:4px;margin-top:1px;display:grid;place-items:center;cursor:pointer}
.cform__legal input:checked{background:var(--lime);border-color:var(--lime)}
.cform__legal input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--night);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.cform__legal input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.cform__legal.is-bad input{border-color:#ff6b5a}
.cform__legal a{text-decoration:underline;text-underline-offset:3px;color:var(--fg)}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cform__msg{font-size:15px;color:var(--fg-2);min-height:1.2em}
.cform__msg.ok{color:var(--lime)}
.cform__proto{font-size:10px;opacity:.7}
.cform.is-sent .cform__chips,.cform.is-sent .cform__grid,.cform.is-sent .cform__more,.cform.is-sent .cfield--area,.cform.is-sent .cform__legal,.cform.is-sent .btn{display:none}
.cform.is-sent .cform__msg{font-size:clamp(22px,2vw,30px);color:var(--fg);letter-spacing:-.02em;line-height:1.2}
@media (max-width:1000px){.contact{grid-template-columns:1fr}.contact__direct{margin-top:32px}}
@media (max-width:620px){.cform__grid,.cform__more .cform__grid{grid-template-columns:1fr}}
.final--form p{margin-top:0;font-size:inherit;color:inherit}
.final--form .tag{color:var(--fg-2)}
.final--form .contact__lead{margin-top:20px;color:var(--fg-2);font-size:clamp(18px,1.4vw,22px)}
.final--form .contact__direct p{color:var(--fg-2)}
.final--form .mono-label{font-size:11px}
.final--form .cform__msg{font-size:15px;color:var(--fg-2)}
.final--form .cform__msg.ok{color:var(--lime)}
.final--form .cform.is-sent .cform__msg{font-size:clamp(22px,2vw,30px);color:var(--fg)}
.final--form .cform__proto{font-size:10px}
.final--form .final__gl{left:auto;right:-18%;width:70%;opacity:.18!important}

/* ===== Pesos · escenario D (8 nov 2026) =====
   400 textos · 600 titulares, énfasis y botones (segunda parte del titular en gris sólido, mismo peso) · 900 la cabecera y una palabra o cifra por pieza */
h1,h2,h3,h4,h5{font-weight:600}
b,strong{font-weight:600}
.h-display,.h-xl,.menu__list a,.intro__col h2,.intro__head,.problem__mmm,.screen__word,
.final h2,.foot__top h2,.contact__intro h2,.stack__name{font-weight:600}
.intro__title{font-weight:900}
.thin,.intro__col h2 span{font-weight:600;opacity:.55}
.intro__alt{font-weight:900;color:rgba(255,255,255,.62)}
.hero__sub,.intro__ask,.quote,.stack__foot p,.hero__motto,.hero__sectors,.nav__link{font-weight:400}
.intro__ask b,.quote b{font-weight:600}
.btn,.link-arrow{font-weight:600}
.done-col b{font-weight:900}
/* Gris sólido para la segunda parte de los titulares: con transparencia, las letras juntas se solapan y aparecen manchas claras */
:root{--sub:#a4a5a8}
body.is-light{--sub:#76777b}
.thin,.intro__col h2 span{opacity:1;color:var(--sub)}
.intro__alt{color:#b9b9c1}
/* Texto sobre foto o vídeo: la segunda parte del titular, en blanco Light (igual que el logotipo con lema). Sobre fondo plano sigue el gris sólido. */
.intro__alt{font-weight:300;color:#fff;letter-spacing:-.03em}
.intro__head .intro__row.thin{font-weight:300;color:#fff;opacity:1;letter-spacing:-.03em}

/* ===== Pausas de la home (8 nov 2026): tres piezas intermedias de moda y materia entre áreas =====
   Enfoque (antes de Proyectos) · Materia (antes de Con quién) · Silencio (antes de Testimonios). Un sello IA por pausa. */
.pausa{position:relative;margin:0;overflow:hidden;--ia:clamp(18px,1.6vw,26px)}
.pausa--bleed{height:clamp(460px,88vh,940px);background:#0b0b0c}
.pausa--bleed .pausa__img{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover}
.pausa--bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0) 45%,rgba(11,11,12,.7) 100%);pointer-events:none}
.pausa__cap{position:absolute;left:0;right:0;bottom:calc(var(--ia) * 2.8);z-index:2;display:flex;flex-direction:column;gap:18px}
.pausa__label{color:rgba(255,255,255,.7)}
.pausa__line{font-size:clamp(30px,4.2vw,70px);line-height:1.02;font-weight:600;letter-spacing:-.035em;color:#fff;max-width:15ch;text-wrap:balance}
.pausa__line span{display:block;font-weight:300;letter-spacing:-.03em}
.pausa--right .pausa__cap{align-items:flex-end;text-align:right}
.pausa__stamp{position:absolute;z-index:3;height:var(--ia);width:auto;bottom:var(--ia);right:var(--ia);pointer-events:none}
.pausa--right .pausa__stamp{right:auto;left:var(--ia)}
.pausa--enfoque .pausa__img{object-position:65% 30%}
.pausa--silencio .pausa__img{object-position:30% 60%}
/* Materia: la imagen se funde con el blanco de la página (sin marco) */
.pausa--blanco{background:var(--paper);height:clamp(520px,94vh,1000px)}
.pausa--blanco .pausa__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}
.pausa--blanco .pausa__cap{top:50%;bottom:auto;transform:translateY(-50%)}
.pausa--blanco .pausa__line{color:var(--night)}
.pausa--blanco .pausa__line span{font-weight:600;color:#76777b}
/* formulario final: imagen que se funde con la noche, en lugar del e! en 3D */
.final__img{position:absolute;left:0;bottom:0;width:min(60%,1100px);aspect-ratio:16/9;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 38% 62%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 38% 62%,#000 35%,transparent 100%)}
.final__img img,.final__img video{width:100%;height:100%;object-fit:cover;opacity:.85;display:block}
.final--form .contact{position:relative;z-index:1}
@media (max-width:900px){
  .pausa--bleed{height:clamp(420px,78vh,720px)}
  .pausa--right .pausa__cap{align-items:flex-start;text-align:left}
  .pausa--enfoque .pausa__img{object-position:72% 30%}
  .pausa--silencio .pausa__img{object-position:28% 60%}
  .pausa--blanco{height:clamp(560px,86vh,820px)}
  .pausa--blanco .pausa__img{object-position:74% 50%}
  .pausa--blanco .pausa__cap{top:12%;transform:none}
  .final__img{width:100%;opacity:.7}
}

/* ===== Pausas v2 (8 nov 2026): el texto es un eslogan, no un titular =====
   Pequeño, en una sola línea, centrado en la imagen y flotando a otra velocidad que ella (lo mueve el script de la home). */
.pausa .pausa__cap{position:absolute;left:0;right:0;top:50%;bottom:auto;z-index:2;display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;transform:translateY(-50%);pointer-events:none;margin:0}
.pausa .pausa__line{font-size:clamp(15px,1.2vw,19px);line-height:1.35;font-weight:600;letter-spacing:.01em;max-width:none;white-space:nowrap;text-wrap:nowrap;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.pausa .pausa__line span{display:inline;font-weight:300;letter-spacing:.01em}
.pausa--blanco .pausa__line{color:var(--night);text-shadow:none}
.pausa--blanco .pausa__line span{font-weight:600;color:#76777b}
.pausa--bleed::after{background:radial-gradient(ellipse 55% 40% at 50% 50%,rgba(11,11,12,.28),rgba(11,11,12,0) 70%)}
.pausa__media{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover}
@media (max-width:600px){
  .pausa .pausa__line{white-space:normal;text-wrap:balance;max-width:26ch}
  .pausa .pausa__line span{display:inline}
}
.pausa--enfoque .pausa__media{object-position:65% 30%}
.pausa--silencio .pausa__media{object-position:30% 60%}
@media (max-width:900px){.pausa--enfoque .pausa__media{object-position:72% 30%}.pausa--silencio .pausa__media{object-position:28% 60%}}
/* Enfoque, un 40 % menos alta (Santi, 8 nov 2026) */
.pausa--bleed.pausa--enfoque{height:clamp(276px,53vh,564px)}
@media (max-width:900px){.pausa--bleed.pausa--enfoque{height:clamp(252px,47vh,432px)}}
.pausa--blanco .pausa__img{object-position:62% 40%}
@media (max-width:900px){.pausa--blanco .pausa__img{object-position:66% 40%}}
/* Portada en vertical y móvil: «a la altura.» sigue la franja por debajo; la pregunta baja junto al botón */
.intro__e.is-follow .intro__ask{left:var(--gutter);right:var(--gutter);text-align:left;max-width:none}
.intro__e.is-follow .intro__sub{left:var(--gutter);right:auto}
.intro__e.is-follow .intro__alt{will-change:transform}
/* Materia · Muro: el ojo queda arriba, así que el degradado superior es más corto; halo de papel para el eslogan sobre el canto gris */
.pausa--blanco .pausa__img{object-position:62% 0%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 92%,transparent 100%)}
.pausa--blanco .pausa__line{text-shadow:0 0 14px rgba(244,243,240,.95),0 0 4px rgba(244,243,240,.9)}
@media (max-width:900px){.pausa--blanco .pausa__img{object-position:66% 0%}}
/* Materia · Muro v2: sin degradado arriba (el vídeo es un corte limpio), abajo igual.
   El eslogan, quieto a media altura, en bandera a la derecha y sobre la parte blanca del muro (termina antes del canto). */
.pausa--blanco .pausa__img,.pausa--blanco .pausa__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 0%;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 92%,transparent 100%)}
.pausa--blanco .pausa__cap{left:0;right:auto;width:41%;top:50%;transform:translateY(-50%);justify-content:flex-end;text-align:right;padding-right:2.4vw}
.pausa--blanco .pausa__line{white-space:normal;text-wrap:balance;max-width:30ch}
@media (max-width:900px){
  .pausa--blanco .pausa__img,.pausa--blanco .pausa__media{object-position:66% 0%}
  .pausa--blanco .pausa__cap{width:auto;left:var(--gutter);right:var(--gutter);top:auto;bottom:9%;transform:none;padding-right:0}
}
/* Materia · Muro, un 30 % más baja (Santi, 8 nov 2026); el encuadre baja un poco para que se vean el ojo y la mano */
.pausa--blanco{height:clamp(364px,66vh,700px)}
.pausa--blanco .pausa__img,.pausa--blanco .pausa__media{object-position:62% 25%}
@media (max-width:900px){.pausa--blanco{height:clamp(392px,60vh,574px)}.pausa--blanco .pausa__img,.pausa--blanco .pausa__media{object-position:66% 25%}}
/* Silencio · Mirador (A1) */
.pausa--silencio .pausa__img,.pausa--silencio .pausa__media{object-position:50% 55%}

/* Silencio · Mirador a la misma altura que Materia (Santi, 8 nov 2026) */
.pausa--bleed.pausa--silencio{height:clamp(364px,66vh,700px)}
@media (max-width:900px){.pausa--bleed.pausa--silencio{height:clamp(392px,60vh,574px)}}

/* ===== La oferta en una frase + puertas por sector (8 nov 2026) =====
   Justo después de la portada: qué hacemos sin metáforas y una puerta para cada tipo de cliente. */
.oferta{padding-block:clamp(90px,11vw,170px) clamp(30px,4vw,60px)}
.oferta__h{font-size:clamp(34px,4.4vw,72px);line-height:1.02;letter-spacing:-.035em;font-weight:600;max-width:21ch;margin-top:24px;text-wrap:balance}
.oferta__sub{margin-top:22px;font-size:clamp(17px,1.4vw,22px);line-height:1.4;color:var(--fg-2);max-width:48ch}
.oferta__doors{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.door{position:relative;display:flex;flex-direction:column;gap:12px;min-height:clamp(190px,17vw,250px);padding:26px 26px 28px;border:1px solid var(--line);border-radius:6px;color:var(--fg);transition:background .3s,border-color .3s,color .3s,transform .3s}
.door .mono-label{color:var(--fg-2)}
.door .arr{position:absolute;top:26px;right:26px;width:1.1em;height:1.1em;transition:transform .3s}
.door b{margin-top:auto;font-size:clamp(23px,2.1vw,32px);line-height:1.1;font-weight:600;letter-spacing:-.02em}
.door p{font-size:15px;line-height:1.45;color:var(--fg-2);max-width:32ch}
.door:hover{background:var(--night);border-color:var(--night);color:#fff}
.door:hover .mono-label,.door:hover p{color:rgba(255,255,255,.7)}
.door:hover .arr{transform:translateX(4px)}
.door--main{background:var(--indigo);border-color:var(--indigo);color:#fff}
.door--main .mono-label,.door--main p{color:rgba(255,255,255,.78)}
.door:active{transform:scale(.98)}
@media (max-width:900px){.oferta__doors{grid-template-columns:1fr}.door{min-height:0}.door b{margin-top:18px}}

/* ===== Recomendaciones (8 nov 2026) ===== */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--split-gap);margin-top:clamp(60px,7vw,110px);padding-top:clamp(28px,3vw,40px);border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.quotes__item{margin:0;min-width:0}
.quotes__item blockquote{margin:0;font-size:clamp(19px,1.55vw,25px);line-height:1.32;letter-spacing:-.012em;max-width:34ch;text-wrap:pretty}
.quotes__item blockquote b{font-weight:600}
.quotes__item figcaption{margin-top:18px;color:var(--fg-2);font-size:14px;line-height:1.4}
.quotes__more{margin-top:clamp(28px,3vw,44px);font-size:15px}
.quotes__more a{text-decoration:underline;text-underline-offset:4px;color:var(--fg-2);transition:color .2s}
.quotes__more a:hover{color:var(--fg)}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}

/* ===== Casos: enlaces en vivo y nota IA (8 nov 2026) ===== */
.case-live{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px}
.case-live a{text-decoration:underline;text-underline-offset:4px}
.case-ia{margin-top:22px;max-width:60ch;font-family:"Martian Mono",ui-monospace,monospace;font-stretch:87.5%;font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;color:var(--fg-2)}
.quote-note{margin-top:10px;margin-left:54px;font-family:"Martian Mono",ui-monospace,monospace;font-stretch:87.5%;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}

/* Aviso legal del vídeo de portada (AI Act art. 50): solo texto, discreto, en vertical junto al borde (8 nov 2026) */
.intro__ia{position:absolute;right:calc(var(--gutter) - 1.4px);bottom:150px;z-index:4;margin:0;pointer-events:none;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"Martian Mono",ui-monospace,monospace;font-stretch:87.5%;font-size:11px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}

/* Selector de idioma oculto hasta que exista la versión en inglés (8 nov 2026). Para recuperarlo, borra esta regla. */


/* Textos verticales: siempre de abajo arriba (regla del manual, Tipografía). «Desliza» va girado 180°,
   así que su trazo invierte la animación para seguir bajando, como el scroll. (8 nov 2026) */
.intro__hint i::after{animation-direction:reverse}

/* Eje común del borde derecho: el final de «Activos y espacios premium», «Desliza» y el aviso de IA caen en la misma vertical.
   −1,4 px compensa el aire de la línea en el texto girado. (8 nov 2026) */
.intro__e.is-set:not(.is-narrow) .intro__hint{right:calc(var(--gutter) - 1.4px)}

/* Iconos de sector en las puertas de «En una frase» (Sharp Line, dibujo propio, 8 nov 2026) */
.door__ic{display:block;width:30px;height:30px;margin-top:auto}
.door .door__ic + b{margin-top:14px}

/* Puertas iguales: el texto reserva dos líneas para que iconos y títulos caigan a la misma altura (8 nov 2026) */
.door p{min-height:2.9em}
.door p{max-width:none}
.door p{text-wrap:pretty}

/* ===== Repaso Hallmark (9 nov 2026) ===== */
:root{--split-gap:clamp(24px,4vw,70px)}
html{overflow-x:clip}
h1,h2,h3,.h-display,.h-xl,.h-lg{text-wrap:balance}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.final--form p.micro{font-size:11px}

/* ===== Etiquetas mono: solo la inicial en mayúscula (9 nov 2026, Santi). Los textos verticales siguen en mayúsculas ===== */
.micro,.mono-label,.svc__n,.svc__new,.pill,.filter,.work__tags span,.work__name,.team span,.menu__list a small,.foot__cols h3,.foot__bar,.fab__label,.intro__sub,.case-facts dt,.career__list,.case-ia,.quote-note{text-transform:none;letter-spacing:.02em}
.intro__hint,.intro__hint *,.intro__ia{text-transform:uppercase;letter-spacing:.08em}

/* ===== Línea gruesa y marcador (9 nov 2026, Santi) =====
   Línea gruesa: abre un bloque (sectores, método, servicios, datos de un caso). Grosor ≈ el trazo de Delight SemiBold del titular. Dentro del bloque, línea fina.
   Marcador: una palabra o concepto en negativo dentro de una caja, como pasar un rotulador. Negativo (por defecto), lima o índigo. Uno por pantalla como mucho. */
:root{--rule-heavy:clamp(8px,1.1vw,18px)}
.who,.done-grid,.svc,.case-facts{border-top:var(--rule-heavy) solid var(--fg)}
.marcador{--mk:var(--fg);--mk-t:var(--bg);background-image:linear-gradient(var(--mk),var(--mk));background-repeat:no-repeat;background-position:0 60%;background-size:100% .92em;color:var(--mk-t);padding-inline:.08em .13em;margin-inline:-.02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.marcador--lima{--mk:var(--lime);--mk-t:var(--night)}
.marcador--indigo{--mk:var(--indigo);--mk-t:#fff}
.js-ready [data-reveal] .marcador{background-size:0% .92em;color:inherit;transition:background-size .7s var(--ease-out) .5s,color .2s ease .8s}
.js-ready [data-reveal].is-in .marcador{background-size:100% .92em;color:var(--mk-t)}
@media (prefers-reduced-motion:reduce){.js-ready [data-reveal] .marcador{transition:none}}
/* Nombre del cliente: Martian Mono en mayúsculas y Bold, como firma del caso (9 nov 2026, Santi). El resto de etiquetas, solo con la inicial */
.work__name{text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:var(--fg)}
/* Niveles de etiqueta (9 nov 2026, Santi): nivel 1, etiqueta de sección «( 01 · … )», en mayúsculas +8 %; nivel 2, categorías, datos y estados, solo la inicial; firma del cliente, mayúsculas Bold */
.micro.tag{text-transform:uppercase;letter-spacing:.08em}
/* Una sola lógica en la home (9 nov 2026): cada tramo abre su contenido con línea gruesa y lleva un marcador en su concepto clave, alternando negro (fondo claro) y lima (fondo oscuro). El resto de titulares, con gris */
.oferta__doors{border-top:var(--rule-heavy) solid var(--fg);padding-top:clamp(24px,3vw,40px)}
.marcador{white-space:nowrap}
/* Qué hacemos: títulos de servicio más contenidos (9 nov 2026, Santi) */
.svc__t{font-size:clamp(22px,2.6vw,44px);text-transform:none;letter-spacing:-.03em}
/* ===== Página Estudio (9 nov 2026) ===== */
.svc--open .svc__d{grid-template-rows:1fr}
.estudio-team{margin-top:clamp(60px,7vw,110px);border-top:1px solid var(--line);padding-top:clamp(28px,3vw,40px)}
.estudio-team .team{margin-top:0;border-top:0}
/* ===== Proyectos: destacados + otros proyectos (9 nov 2026) ===== */
.otros{padding-block:clamp(90px,10vw,160px)}
.otros__head{border-top:var(--rule-heavy) solid var(--fg);padding-top:clamp(28px,3vw,44px)}
.otros__head .h-xl{font-size:clamp(32px,4vw,64px)}
.otros__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px);margin-top:clamp(36px,4vw,60px)}
.otros__card{display:flex;flex-direction:column;min-width:0}
.otros__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--night-3)}
.otros__media img{width:100%;height:100%;object-fit:cover}
.otros__meta{margin-top:16px;color:var(--fg-2)}
.otros__item h3{font-size:clamp(20px,1.6vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-top:8px}
.otros__item p:not(.otros__meta){color:var(--fg-2);font-size:15px;margin-top:8px;max-width:40ch}
.otros__cta{margin-top:12px;font-size:14px;font-weight:600;display:inline-flex;gap:.4em}
.otros__item.is-hidden{display:none}
@media (max-width:900px){.otros__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.otros__grid{grid-template-columns:minmax(0,1fr)}}
/* ===== Ritmo vertical único (9 nov 2026, Santi: «tiene que tener un sentido») =====
   1 · Del contenido al borde de su bloque, siempre la misma medida (--space-sec), arriba y abajo.
   2 · Dos bloques seguidos del mismo fondo no suman huecos: el segundo empieza sin margen, así entre ellos queda una sola medida.
   3 · Las pausas a sangre (vídeo o foto) no llevan margen propio: el bloque de al lado pone su medida. */
:root{--space-sec:clamp(88px,9vw,140px)}
.sec,.oferta,.final--form{padding-block:var(--space-sec)}
.sec[data-theme="light"] + .sec[data-theme="light"],
.oferta[data-theme="light"] + .sec[data-theme="light"],
.sec[data-theme="dark"] + .sec[data-theme="dark"]{padding-top:0}
/* Avisos de IA más discretos (9 nov 2026, Santi): solo lo justo para cumplir, muy sutiles */
.case-ia,.ia-note{font-size:10px;text-transform:none;letter-spacing:.02em;opacity:.55}
/* ===== Estudio sin repeticiones (9 nov 2026) ===== */
.estudio-mision{margin-top:clamp(28px,3vw,44px);max-width:62ch;display:grid;gap:18px}
.estudio-mision .lead{color:var(--fg-2)}
.estudio-bang{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--split-gap);align-items:center}
.estudio-bang__mark{margin:0;font-weight:900;font-size:clamp(160px,22vw,360px);line-height:.78;letter-spacing:-.04em;color:var(--indigo);text-align:center}
@media (max-width:760px){.estudio-bang{grid-template-columns:minmax(0,1fr)}.estudio-bang__mark{font-size:140px;text-align:left}}
img.estudio-bang__mark{display:block;width:clamp(140px,18vw,300px);height:auto;margin-inline:auto;filter:invert(1) brightness(.07)}
@media (max-width:760px){img.estudio-bang__mark{width:120px;margin-inline:0}}

/* 11 nov 2026 · La capa de las dos mitades está encima del vídeo desde el principio (aunque recortada):
   que no se trague los clics del botón «Ver proyectos» hasta que las mitades aparezcan. */
.intro.is-anim .intro__statement{pointer-events:none}
.intro.is-anim .intro__half{pointer-events:auto}
/* Zonas táctiles cómodas en móvil (auditoría 11 nov 2026) */
@media (max-width:700px){
  .contact__direct a{display:inline-block;padding-block:8px}
  .nre-case__link{display:inline-flex;align-items:center;min-height:44px}
}
/* Las medidas de las imágenes solo reservan su proporción: el tamaño lo sigue mandando el CSS */
img{height:auto}

/* Móvil y tableta (11 nov 2026, iPhone de Santi)
   1. El SVG del logotipo lleva su área de seguridad dentro: el trazo de la «N» empieza al 29 % de la altura de la imagen.
      Cuando el logotipo va a la izquierda, se compensa para que la «N» caiga en la misma línea que el texto. Igual con el e!.
   2. «Vídeo creado con IA», más discreto pero legible.
   3. «Ver proyectos» separado de la barra del navegador: lo coloca intro.js (cuenta solo la altura visible). */
@media (max-width:1000px){
  /* desplazamiento proporcional al ancho del propio logotipo: vale para cualquier tamaño */
  .nav__logo img.nav__word{translate:-12.13% 0}
  .nav__logo .nav__e{translate:-28.35% 0}
}
@media (max-width:700px){
  .intro__ia{font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.3)}
}

/* El botón de WhatsApp aparece y desaparece a la vez que el «e!» (12 nov 2026): escondido, baja del todo */
.fab--wa:not(.is-on),.intro-on .fab--wa{transform:translateY(calc(100% + 240px))}

/* «Saltar al contenido» (a.sr-only): oculto, pero se ve al llegar con el tabulador (accesibilidad, 14 nov 2026) */
a.sr-only:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;margin:0;clip:auto;clip-path:none;overflow:visible;white-space:nowrap;z-index:10000;padding:12px 18px;border-radius:999px;background:#d2ff1f;color:#101011;font-weight:600;text-decoration:none;outline:2px solid #101011;outline-offset:2px}

/* Sin el botón de play del iPhone en los vídeos de ambiente (arrancan solos o al primer toque) · 14 nov 2026 */
video:not([controls])::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video:not([controls])::-webkit-media-controls{display:none!important}
video:not([controls])::-webkit-media-controls-panel{display:none!important}

/* ===== Real estate destacado (14 nov 2026): punto lima en la barra, etiqueta en el menú, franja en la portada, «Próximamente» ===== */
.nav__link--re::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:8px;vertical-align:.12em;box-shadow:0 0 0 0 rgba(210,255,31,.6);animation:re-pulso 2.4s var(--ease-out) infinite}
@keyframes re-pulso{0%{box-shadow:0 0 0 0 rgba(210,255,31,.55)}70%,100%{box-shadow:0 0 0 7px rgba(210,255,31,0)}}
.menu__re em{font-style:normal;font-family:"Martian Mono",ui-monospace,monospace;font-stretch:87.5%;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--night);background:var(--lime);padding:5px 9px;border-radius:999px;vertical-align:middle;margin-left:12px;white-space:nowrap}
.menu__prox{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin:22px 0 22px;font-size:15px}
.menu__prox span{font-family:"Martian Mono",ui-monospace,monospace;font-stretch:87.5%;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.menu__prox a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.re-band{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#0c0c0d}
.re-band__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.re-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,16,17,.25) 0%,rgba(16,16,17,0) 35%,rgba(16,16,17,.35) 60%,rgba(16,16,17,.85) 100%)}
.re-band__in{position:relative;z-index:2;width:100%;padding:0 var(--gutter) clamp(48px,8vh,96px);display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:28px}
.re-band__btn{justify-self:start}
.re-band__txt .mono-label{color:var(--lime)}
.re-band h2{font-size:clamp(46px,8vw,150px);line-height:.92;letter-spacing:-.05em;font-weight:600;margin:14px 0 0;text-wrap:balance}
.re-band h2 span{display:block;font-weight:300}
.re-band__txt p:not(.mono-label){font-size:clamp(17px,1.3vw,21px);line-height:1.5;max-width:42ch;margin:22px 0 0;color:rgba(255,255,255,.85)}
.re-band__ia{position:absolute;z-index:2;top:clamp(90px,12vh,130px);right:var(--gutter);writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Martian Mono",ui-monospace,monospace;font-stretch:87.5%;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
@media (prefers-reduced-motion:reduce){.nav__link--re::before{animation:none}}
/* páginas «Próximamente» */
.prox__casos{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.prox__casos a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;color:var(--fg);text-decoration:none;font-size:15px;transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out)}
.prox__casos a:hover{border-color:var(--fg)}
.prox__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
@media (max-width:600px){.menu__re{white-space:nowrap}.menu__re em{display:none}.menu__re::after{content:"";flex:none;align-self:center;width:12px;height:12px;border-radius:50%;background:var(--lime);margin-left:2px}}
/* Pie en móvil (14 nov 2026): el logo va centrado, así que las tres líneas del cierre también */
@media (max-width:760px){.foot__bar{flex-direction:column;align-items:center;text-align:center;gap:12px}}
/* Portada (14 nov 2026): dos botones abajo, «Ver proyectos» y «Hablemos 30 minutos» */
.intro__go{display:flex;flex-wrap:wrap;gap:10px}
.intro__go .btn{color:#fff}
.intro__go .btn:not(.btn--solid){border-color:rgba(255,255,255,.7)}
@media (max-width:600px){.intro__go .btn{min-height:46px;padding:0 1.15em;font-size:15px}}
/* Iconos de «Qué hacemos» más finos y pequeños (14 nov 2026, Santi: más elegancia) */
.svc a{grid-template-columns:70px 34px 1fr auto}
.svc__ic svg{width:30px;height:30px;stroke-width:1.25}
@media (max-width:620px){.svc a{grid-template-columns:30px 26px 1fr auto}.svc__ic svg{width:24px;height:24px}}
/* Cursor del sistema y texto seleccionable (14 nov 2026, Santi) */
.cursor,.cursor__label{display:none!important}
body{-webkit-user-select:text;user-select:text}
a[href],button,summary,label[for],.cform__chips label,[role="button"],.door,.btn,.burger,.lang__opt,.filter,[data-cursor]{cursor:pointer}

/* ===== Reorden de la portada (14 nov 2026): problema + sectores en un bloque, método en una línea,
   tres testimonios, pausas con su aviso «Con IA» y reel algo más corto ===== */
.oferta .oferta__h .thin{display:block;font-weight:300}
.oferta__t{margin-top:clamp(48px,6vw,90px);color:var(--fg-2)}
.oferta__t + .oferta__doors{margin-top:18px}
.svc__metodo{margin-top:clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;font-size:clamp(17px,1.4vw,21px);color:var(--fg-2)}
.svc__metodo .mono-label{color:var(--fg)}
.svc__metodo .link-arrow{margin-left:auto}
@media (max-width:760px){.svc__metodo .link-arrow{margin-left:0}}
.quotes--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:30px;border-top:0;padding-top:0}
@media (max-width:1000px){.quotes--3{grid-template-columns:minmax(0,1fr)}}
.pausa__ia{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(16px,2.4vh,28px);writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Martian Mono",ui-monospace,monospace;font-stretch:87.5%;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);pointer-events:none}
.pausa--blanco .pausa__ia{color:rgba(11,11,12,.45)}
.reel{height:180vh}
@media (prefers-reduced-motion:reduce){.reel{height:auto}}

/* Estudio · «Un equipo»: foto de trabajo real en lugar de la pantalla con palabras (14 nov 2026) */
.team-foto{margin:0;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--night-3)}
.team-foto img{width:100%;height:100%;object-fit:cover;display:block}