/* HELIX. — V3 (maqueta). Estilo editorial: bloques negros y hueso que se alternan.
   Tipografía: Host Grotesk ExtraBold (800) en títulos y Jost en textos (300 cuerpo, 400 encabezados pequeños,
   500 rótulos y botones). Las dos autoalojadas: la web no conecta con Google ni con nadie más. */
@font-face{font-family:"Host Grotesk";src:url(../fonts/host-grotesk-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Special Gothic Expanded";src:url(../fonts/special-gothic-expanded.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"BBH Bartle";src:url(../fonts/bbh-bartle.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost.woff2) format("woff2");font-weight:300 500;font-display:swap}

:root{
  --ink:#242322;--paper:#F0EFEA;
  --ink-rgb:36,35,34;--paper-rgb:240,239,234;
  --ink-deep:#1C1B1A;
  --u:calc(100vw / 1920);
  --side-l:calc(55 * var(--u));--side-r:calc(88 * var(--u));
  --ease:cubic-bezier(.16,1,.3,1);--open:cubic-bezier(.65,0,.35,1);
  --font:"Jost",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Host Grotesk",var(--font);
}
@media (max-width:900px){:root{--u:1px;--side-l:16px;--side-r:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* cambio de página fluido: la página vieja se funde en la nueva (navegadores con View Transitions entre documentos) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--font);font-weight:300;font-size:max(16px,calc(20 * var(--u)));line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* bloques: negro (por defecto) y hueso */
.is-paper{background:var(--paper);color:var(--ink)}
.page-paper .is-ink{background:var(--ink);color:var(--paper)}   /* en las páginas que empiezan en hueso (ABOUT), los bloques negros se pintan ellos */
.is-paper{--line:rgba(var(--ink-rgb),.16)}
:root,.is-ink{--line:rgba(var(--paper-rgb),.16)}

/* ---------- piezas comunes ---------- */
/* etiqueta pequeña en mayúsculas */
.lbl{font-size:max(12px,calc(15 * var(--u)));font-weight:400;letter-spacing:.14em;text-transform:uppercase}
/* cabecera de sección: nombre ………… número, sobre una línea fina */
.rule{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding-bottom:calc(14 * var(--u));border-bottom:1px solid var(--line)}
.rule--dark{border-color:currentColor}
/* botón píldora (como VIEW ALL PROJECTS del ejemplo) */
.pill{
  display:inline-flex;align-items:center;gap:.7em;padding:.85em 1.5em;border-radius:99px;
  font-size:max(13px,calc(15 * var(--u)));font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  background:var(--paper);color:var(--ink);border:1px solid var(--paper);cursor:pointer;
  transition:gap .4s var(--ease),background .3s,color .3s;
}
.pill:hover{gap:1.1em}
.pill--line{background:transparent;color:inherit;border-color:currentColor}
.pill--line:hover{background:currentColor}
.pill--line:hover>*{color:var(--paper)}
.is-ink .pill--line:hover>*,.pill--line.on-ink:hover>*{color:var(--ink)}
@media (max-width:900px){.pill{min-height:44px;padding:0 1.4em}}

/* títulos grandes */
.display{margin:0;font-family:var(--display);font-weight:800;font-size:calc(170 * var(--u));line-height:.9;letter-spacing:-.035em;text-transform:uppercase}
@media (max-width:900px){.display{font-size:13vw}}
.display sup{font-size:max(10px,calc(13 * var(--u)));font-weight:500;letter-spacing:.05em;vertical-align:top;margin-left:.4em;position:relative;top:.6em}

/* entradas: suben al llegar */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
/* líneas de título que salen de debajo */
/* margen arriba para que no se corten las tildes de las mayúsculas (DÍA, ÚNICO) */
.lines>span{display:block;overflow:hidden;padding:.14em 0 .04em;margin-top:-.14em}
.lines>span>span{display:block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.lines.is-in>span>span{transform:none}
.lines>span:nth-child(2)>span{transition-delay:.08s}
.lines>span:nth-child(3)>span{transition-delay:.16s}

/* ---------- CABECERA ---------- */
.header{
  position:absolute;z-index:20;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;gap:2em;
  padding:calc(30 * var(--u)) var(--side-r) 0 var(--side-l);color:var(--paper);
}
.header.is-paper-top{color:var(--ink)}
.header__left{display:flex;align-items:center;gap:calc(34 * var(--u))}
.brand{display:block;width:max(84px,calc(118 * var(--u)));padding-block:3px;margin-block:-3px}
.brand svg{display:block;width:100%;height:auto}
.nav.lbl{font-size:max(14px,calc(18 * var(--u)))}  /* el menú, un poco más grande que el resto de rótulos (15) */
.nav ul{display:flex;gap:calc(34 * var(--u));list-style:none;margin:0;padding:0}
.nav a{position:relative;padding:6px 0;font-weight:500}
.nav .sub{display:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.header__right{display:flex;align-items:center;gap:calc(34 * var(--u))}
.lang{
  width:3.4em;height:2.2em;border-radius:99px;border:1px solid currentColor;background:none;cursor:pointer;
  font-size:max(12px,calc(13 * var(--u)));font-weight:500;letter-spacing:.1em;
}
/* al pasar, relleno con colores fijos: con background:currentColor el fondo tomaba el mismo color que la letra y el botón
   se quedaba en un bloque liso (blanco) sin texto. Solo con ratón: en pantallas táctiles el hover se queda pegado tras tocar */
.lang{transition:background-color .3s var(--ease),color .3s var(--ease)}
@media (hover:hover){
  .lang:hover{background:var(--paper);color:var(--ink)}
  .header.is-paper-top .lang:hover{background:var(--ink);color:var(--paper)}
}
/* prueba: el menú es una tira de letras que corre por un camino en L, ligada al scroll. Arriba del todo está en
   horizontal (como siempre); al bajar, la tira se desliza hacia la derecha, dobla la esquina de arriba a la derecha
   (a mitad de camino el menú forma un ángulo de 90°) y baja por el borde derecho hasta quedar en vertical, con HOME
   arriba (se lee de lado). Al subir, el mismo camino al revés. Cada letra (.ch) y el botón de idioma los coloca
   main.js (.flow); cada una se pone en negro sobre los bloques hueso (.on-paper).
   Para volver al menú de siempre, quitar header--vnav del HTML */
@media (min-width:901px){
  .header--vnav .header__left{min-height:calc(2.4 * max(13px, calc(16 * var(--u))))}   /* el hueco que deja el menú al ir fijo */
  .header--vnav .header__right{position:fixed;top:calc(30 * var(--u));right:var(--side-r)}
  .header--vnav .nav.lbl{font-size:max(16px,calc(23 * var(--u)))}
  .header--vnav .lang{width:3.6em;height:2.4em;font-size:max(13px,calc(16 * var(--u)))}
  /* para que las letras del menú puedan mezclarse con la página (invertirse sobre la cinta del pie) ni la cabecera ni
     el menú pueden ser una capa aparte: cada letra va fija por su cuenta y la cabecera deja de tener z-index */
  .header--vnav{z-index:auto}
  .header--vnav .header__left{position:relative;z-index:20}
  .header--vnav .header__right.flow{position:absolute;left:0;right:auto;top:0;width:0;height:0}
  .header--vnav .flow .ch,.header--vnav .flow .lang{position:fixed;z-index:40;left:0;top:0;transform-origin:0 0;white-space:pre;will-change:transform;
    color:var(--paper);transition:color .3s var(--ease),background-color .3s var(--ease)}
  .header--vnav .flow .ch.on-paper,.header--vnav .flow .lang.on-paper{color:var(--ink)}
  /* sobre el pie (la cinta HELIX. BARCELONA gira por detrás) y sobre HELIX. BCN del hero se invierten: negras donde pasa una letra, claras sobre el fondo */
  .header--vnav .flow .ch.on-pie,.header--vnav .flow .lang.on-pie{mix-blend-mode:difference;color:var(--paper)}
  .header--vnav .flow .lang.on-paper:hover{background:var(--ink);color:var(--paper)}
  .header--vnav .flow .lang:not(.on-paper):hover{background:var(--paper);color:var(--ink)}
  /* subrayado letra a letra (gira con cada letra: en vertical queda a su izquierda, que es «debajo») */
  .header--vnav .flow .nav a,.header--vnav .flow .nav li,.header--vnav .flow .nav ul{position:static}   /* las letras se colocan respecto al menú, no a su enlace */
  .header--vnav .flow .nav a::after{display:none}
  .header--vnav .flow .ch{border-bottom:1px solid transparent;padding-bottom:1px}
  .header--vnav .flow .nav a[aria-current="page"] .ch,.header--vnav .flow .nav a:hover .ch{border-bottom-color:currentColor}
  /* submenú de ABOUT (Studio, Creator, Art): un cuadro que sale al pasar por ABOUT. main.js lo coloca debajo de ABOUT
     (menú en horizontal) o a su izquierda (en vertical). El borde transparente (padding sin fondo) hace de puente para
     que no se cierre al pasar el ratón de ABOUT al cuadro. Contrasta con el bloque: negro sobre hueso, hueso sobre negro */
  .header--vnav .flow .nav .sub{display:block;position:fixed;left:0;top:0;z-index:41;list-style:none;margin:0;padding:10px;
    background:var(--paper);background-clip:content-box;color:var(--ink);font-size:.8em;white-space:nowrap;
    visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
  .header--vnav .flow .nav .sub.on-paper{background-color:var(--ink);color:var(--paper)}
  .header--vnav .flow .nav .has-sub:hover .sub,.header--vnav .flow .nav .has-sub:has(:focus-visible) .sub{visibility:visible;opacity:1;transition:opacity .25s}
  .header--vnav .flow .sub a{display:block;padding:.75em 1.3em}
  .header--vnav .flow .sub li+li a{padding-top:0}
  .header--vnav .flow .sub a:hover,.header--vnav .flow .sub a:focus-visible{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
}
.burger{display:none}
.menu{display:none}
@media (max-width:900px){
  .header{padding-top:18px}
  .nav,.header__right .lang{display:none}
  /* botón del menú: cerrado es una L (una raya arriba y otra bajando por la derecha), la esquina del menú de ordenador;
     al abrir, las dos rayas se deslizan al centro y giran hasta fundirse en una sola barra «/», la de la cinta del pie */
  .burger{
    display:block;width:48px;height:48px;padding:0;
    border:1px solid currentColor;border-radius:50%;cursor:pointer;z-index:31;
    /* siempre a mano: fijo arriba a la derecha durante todo el scroll, en un círculo negro para verse sobre cualquier bloque */
    position:fixed;right:16px;top:18px;background:var(--ink);color:var(--paper);
  }
  .burger span{position:absolute;background:currentColor;transition:transform .7s cubic-bezier(.7,0,.2,1)}
  .burger span:first-child{left:14px;top:14px;width:18px;height:1px}
  .burger span:last-child{left:31px;top:14px;width:1px;height:18px}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(9px) rotate(-45deg) scaleX(1.35)}
  .burger[aria-expanded="true"] span:last-child{transform:translateX(-9px) rotate(45deg) scaleY(1.35)}
  .menu{
    display:flex;flex-direction:column;justify-content:safe center;gap:min(6px,.5svh);position:fixed;inset:0;z-index:30;
    padding:calc(env(safe-area-inset-top) + 76px) 16px calc(env(safe-area-inset-bottom) + 28px);background:var(--ink);color:var(--paper);
    overflow-y:auto;overscroll-behavior:contain;   /* cabe entero en pantalla (12-10-2026); si no cupiera, se puede desplazar */
    clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--open);
  }
  .menu.is-open{clip-path:inset(0)}
  .menu a{font-family:var(--display);font-weight:800;font-size:min(11vw,5.4svh);line-height:1;letter-spacing:-.035em;padding:min(6px,.6svh) 0}
  /* submenú de ABOUT: más pequeño y sangrado, debajo de ABOUT */
  .menu__sub{display:flex;flex-direction:column;padding:2px 0 8px 1.2em}
  .menu__sub a{font-size:min(6vw,3svh);padding:min(4px,.4svh) 0;opacity:.72}
  .menu .lang{margin-top:min(28px,2.5svh);flex-shrink:0;width:auto;padding:0 1.4em;height:44px;align-self:flex-start;color:var(--paper)}
  @media (hover:hover){.menu .lang:hover{background:var(--paper);color:var(--ink)}}
}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:calc(1040 * var(--u));overflow:hidden;background:var(--ink-deep)}
/* foto fija que crece muy poco al bajar (ver main.js) */
/* foto del muro (del usuario): en ordenador la apaisada (hero-muro-1920/2880), en móvil una franja vertical (hero-muro-900) */
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 60%;will-change:transform}
/* sombra abajo para que se lean la lista y el texto */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--ink-rgb),.35) 0%,rgba(var(--ink-rgb),0) 30%,rgba(var(--ink-rgb),0) 55%,rgba(var(--ink-rgb),.85) 100%);pointer-events:none}
.hero__title{
  position:absolute;z-index:2;left:var(--side-l);right:var(--side-r);top:calc(170 * var(--u));margin:0;
  /* Special Gothic Expanded One (OFL): ancha y gruesa como la letra del logo, sin ser la misma.
     Tamaño para que BARCELONA (7,56 em) quepa entre los dos márgenes.
     Antes: Host Grotesk 800 a 292, line-height .86, letter-spacing -.04em */
  font-family:"Special Gothic Expanded",var(--display);font-weight:400;font-size:calc(228 * var(--u));line-height:.92;letter-spacing:0;text-transform:uppercase;
}
.hero__word{display:block;width:max-content;will-change:transform}
/* prueba HELIX. BCN: bloque compacto del ancho de HELIX., con BCN pegado debajo y alineado a su derecha */
.hero__title--bcn{left:0;right:0;margin-inline:auto;width:max-content;font-size:calc(280 * var(--u));line-height:.84}  /* centrado; HELIX. ocupa unos 3/5 del ancho */
/* prueba: HELIX. es el logo en SVG (mismo ancho que tenía el texto) y BCN en BBH Bartle con la misma altura de mayúscula */
.hero__title--logo{--lw:calc(1075 * var(--u))}
.hero__logo{background:none!important}
.hero__logo svg{display:block;width:var(--lw);height:auto;margin-bottom:calc(var(--lw) * .05)}
.hero__title--logo .hero__word--r>span{font-family:"BBH Bartle",var(--display);font-size:calc(var(--lw) * .215);line-height:.8}
.hero__word>span{
  display:block;
  /* un poco transparentes: la foto asoma a través mientras se separan */
  background:linear-gradient(180deg,rgba(var(--paper-rgb),.95) 20%,rgba(var(--paper-rgb),.74) 100%);  /* antes .78 → .46 */
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:heroIn 1.6s var(--ease) both;
}
.hero__word--r{margin-left:auto}
.hero__word--r>span{animation-delay:.12s}
@keyframes heroIn{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.hero__foot{
  position:absolute;z-index:2;left:var(--side-l);right:var(--side-r);bottom:calc(60 * var(--u));
  display:flex;justify-content:flex-end;align-items:flex-end;gap:40px;
}
.whatwe{width:calc(360 * var(--u));min-width:250px}
.whatwe .rule{border-color:rgba(var(--paper-rgb),.5)}
.whatwe ul{list-style:none;margin:0;padding:0}
.whatwe li{display:flex;justify-content:space-between;padding:.55em 0;border-bottom:1px solid rgba(var(--paper-rgb),.25)}
.whatwe li span:last-child{opacity:.6}
/* la frase y el botón de la web publicada (V2), mismo tamaño y estilo: Jost 300 a 64 en el diseño de 1920 y el
   botón rectangular hueso. En la V2 el botón va en BBH Bartle; aquí en Host Grotesk, la fuente de títulos de la V3 */
.hero__pitch{
  /* anclado abajo, como «Qué hacemos»: antes iba a una altura sacada del ancho (712) y en pantallas bajas (portátiles)
     quedaba por debajo del borde del hero, que corta lo que sobra: el botón no se veía ni se podía pulsar */
  position:absolute;z-index:2;left:var(--side-l);bottom:calc(60 * var(--u));max-width:calc(1200 * var(--u));
  animation:heroIn 1.6s var(--ease) .3s both;
}
.hero__line{margin:0 0 calc(40 * var(--u));font-size:calc(64 * var(--u));font-weight:300;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;
  text-shadow:0 1px 24px rgba(var(--ink-rgb),.45)}
.hero__line span{display:block}
.hero__line strong{display:block;font-weight:400}
.hero__sub{margin:calc(-22 * var(--u)) 0 calc(40 * var(--u));font-size:max(15px,calc(24 * var(--u)));font-weight:300;line-height:1.35;opacity:.85;text-shadow:0 1px 18px rgba(var(--ink-rgb),.45)}
.hero__sub strong{display:block;font-weight:500}
.cta{
  font-family:var(--display);font-weight:800;font-size:max(14px,calc(20 * var(--u)));line-height:1;letter-spacing:.02em;
  color:var(--ink);background:var(--paper);padding:.95em 1.6em;
  display:inline-flex;gap:.8em;align-items:center;transition:gap .4s var(--ease);
}
.cta:hover{gap:1.4em}
.cta--line{color:var(--paper);background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--paper-rgb),.7)}
.cta--line:hover{box-shadow:inset 0 0 0 1px var(--paper)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:calc(16 * var(--u))}
/* la tira de «Qué hacemos» ocupa todo el ancho de abajo: que no se coma los clics del botón del hero, que queda debajo de ella */
.hero__foot{pointer-events:none}
.hero__foot>*{pointer-events:auto}
.cta:focus-visible{outline:1px solid var(--paper);outline-offset:4px}
.hero__offer{display:table;margin-top:calc(22 * var(--u));padding-bottom:3px;border-bottom:1px solid rgba(var(--paper-rgb),.5);opacity:.85}
.hero__offer:hover{opacity:1;border-color:var(--paper)}
@media (max-width:900px){
  /* en móvil el hero va en columna (título, frase y botón, lista) para que nada se pise en pantallas bajas */
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:128px 16px 24px}
  .hero__bg{object-position:50% 30%}  /* foto del muro: en móvil, la parte de arriba con las letras (con la de la Sagrada Familia era 50% 78%) */
  .hero__title{position:relative;left:auto;right:auto;top:auto;font-size:calc((100vw - 32px) / 7.7)}
  .hero__title--bcn{width:max-content;align-self:center;margin-inline:auto;font-size:calc((100vw - 32px) * .9 / 3.84)}  /* HELIX. al 90 % del ancho */
  .hero__title--logo{--lw:calc((100vw - 32px) * .9)}
  .hero__pitch{position:relative;left:auto;top:auto;bottom:auto;max-width:none;margin-top:28px}
  .hero__line{font-size:min(8vw,34px);margin-bottom:24px}
  .hero__sub{margin:-12px 0 24px;font-size:16px}
  .cta{display:flex;justify-content:center;font-size:16px;padding:1.2em;white-space:nowrap}
  .hero__ctas{flex-direction:column;gap:12px}
  .hero__offer{margin-top:16px}
  .hero__foot{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;padding-top:40px;flex-direction:column;align-items:stretch}
  .whatwe{width:auto;min-width:0}
}

/* ---------- FOTO QUE SALE DE UNA LÍNEA (como la del Eixample): baja una raya fina y de ella se abre la foto.
   .linepic--r la pone al revés: la línea a la derecha y la foto se abre hacia la izquierda. is-in lo pone main.js ---------- */
.linepic{position:relative;margin:0;aspect-ratio:5/6;--gap:max(14px,calc(28 * var(--u)))}
.linepic img{position:absolute;top:0;bottom:0;left:var(--gap);width:calc(100% - var(--gap));height:100%;object-fit:cover;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--open) .6s}
.linepic::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--ink);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .8s var(--open)}
.linepic--r img{left:0;clip-path:inset(0 0 0 100%)}
.linepic--r::before{left:auto;right:0}
.linepic.is-in img{clip-path:inset(0)}
.linepic.is-in::before{transform:none}

/* ---------- SOBRE NOSOTROS (bloque hueso) ---------- */
.about{position:relative;padding:calc(170 * var(--u)) var(--side-r) calc(120 * var(--u)) var(--side-l)}
.about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) calc(70 * var(--u));column-gap:calc(60 * var(--u));align-items:start}
/* texto a la izquierda, la foto en medio y la barra (001) a la derecha */
.about__grid>.side{grid-column:3;grid-row:1}
.about__grid>[data-reveal]:not(.about__media){grid-column:1;grid-row:1}
.about__media{grid-column:2;grid-row:1}
/* columna estrecha: número arriba, línea vertical y el rótulo girado abajo */
.side{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:100%}
.side__num{font-size:max(10px,calc(12 * var(--u)));font-weight:500;writing-mode:vertical-rl;transform:rotate(180deg)}
.side__bar{flex:1;width:1px;background:currentColor;opacity:.5;min-height:80px}
.side__txt{font-size:max(10px,calc(12 * var(--u)));font-weight:500;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.about__title{margin:0 0 calc(56 * var(--u));font-family:var(--display);font-weight:800;font-size:calc(72 * var(--u));line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.about__txt{margin:0 0 calc(40 * var(--u));max-width:40ch;font-size:max(17px,calc(22 * var(--u)));line-height:1.55}
.about__media{margin:0}
.about__media.linepic{aspect-ratio:2323/4032}  /* la foto del edificio entera: es muy vertical y a 5:6 perdería la punta y la base */
.frame{position:relative;border-radius:calc(10 * var(--u));overflow:hidden;background:var(--ink);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.2)}
.frame__bar{display:flex;gap:6px;padding:10px 12px;background:var(--ink)}
.frame__bar i{width:8px;height:8px;border-radius:50%;background:rgba(var(--paper-rgb),.4)}
.frame video{width:100%;aspect-ratio:16/10;object-fit:cover}
.about__cap{display:flex;justify-content:space-between;gap:1em;margin-top:14px}
.about__cap a{border-bottom:1px solid currentColor}
@media (max-width:900px){
  .about{padding:96px 16px 64px}
  .about__grid{grid-template-columns:28px minmax(0,1fr);row-gap:48px}
  .about__grid>.side{grid-column:1}
  .about__grid>[data-reveal]:not(.about__media){grid-column:2}   /* el texto, junto a la barra (en ordenador va en la 1.ª columna) */
  .about__media{grid-column:1/-1;grid-row:2}
  .about__title{font-size:10vw;margin-bottom:28px}
}

/* ---------- MISIÓN: tres líneas que ruedan como un rodillo ---------- */
.mission{padding:calc(80 * var(--u)) var(--side-r) calc(180 * var(--u)) var(--side-l)}
.mission__head{width:calc(640 * var(--u));min-width:260px;margin:0 0 calc(70 * var(--u)) auto}
/* las tres palabras llenan el ancho: DEVELOPMENT mide 6,54 veces la letra (medido en Host Grotesk 800 con -.04em),
   así que la letra es el ancho útil entre 6,6. DESIGN va a la derecha */
.mission__stage{
  display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:.3em;
  font-family:var(--display);font-weight:800;font-size:calc(268 * var(--u));line-height:.95;letter-spacing:-.04em;text-transform:uppercase;
}
.mission__words{grid-column:1/-1;grid-row:1/4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;margin:0;font:inherit}
.mission__words>span{display:block}
.mission__words>span:nth-child(1){grid-column:1/-1;grid-row:1}
.mission__words>span:nth-child(2){grid-column:2;grid-row:2;justify-self:end}
.mission__words>span:nth-child(3){grid-column:1/-1;grid-row:3}
/* debajo de las palabras: a la izquierda la foto y a la derecha el texto. La foto sale de una línea: a su izquierda
   baja una raya fina de 1px, que se queda, y de ella se abre la foto hacia la derecha */
.mission__pic{position:relative;margin:0;padding-left:max(14px,calc(28 * var(--u)));width:calc(700 * var(--u));aspect-ratio:5/6}
.mission__pic img{position:absolute;inset:0 0 0 max(14px,calc(28 * var(--u)));width:calc(100% - max(14px,calc(28 * var(--u))));height:100%;object-fit:cover;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--open) .6s}
.mission__pic::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--ink);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .8s var(--open)}
.mission__pic.is-in img{clip-path:inset(0)}
.mission__pic.is-in::before{transform:none}
/* el rodillo: cada palabra es un cubo que baja girando hasta quedar de frente. La cara de abajo lleva la
   misma palabra en gris claro y, mientras gira, se ve pegada a la de delante. De frente (0°) queda de canto
   y desaparece: la palabra se queda en negro, sin sombra.
   Para que las dos caras se toquen, cada cara mide justo lo que las mayúsculas (text-box las recorta a su
   altura: 0,70 de la letra en Host Grotesk) y el cubo tiene ese mismo lado. --a y --s los pone main.js */
.roll{display:inline-grid;perspective:3000px;vertical-align:top}
.roll__in{display:grid;transform-style:preserve-3d;transform:translateZ(-.35em) rotateX(var(--a,90deg))}
.roll__f,.roll__b{grid-area:1/1;display:block;height:.7em;line-height:1;text-box:cap alphabetic;backface-visibility:hidden}
.roll__f{opacity:var(--fo,0);transform:translateZ(.35em);color:color-mix(in srgb,var(--ink) calc(100% - var(--s,0) * 55%),var(--paper))}
.roll__b{opacity:var(--bo,1);transform:rotateX(-90deg) translateZ(.35em);color:rgba(var(--ink-rgb),.2)}
/* con perspectiva, una cara casi de canto aún asoma como una línea fina: cada una se funde en los últimos
   grados (--fo y --bo, de main.js), así ni queda raya negra en la posición gris ni raya gris al acabar */
.mission__body{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(120 * var(--u));margin-top:calc(120 * var(--u))}
.mission__txt{max-width:40ch;margin:0;font-size:max(17px,calc(22 * var(--u)));line-height:1.55}
@media (max-width:900px){
  .mission{padding:40px 16px 96px}
  .mission__head{width:auto;min-width:0}
  .mission__stage{font-size:calc((100vw - 32px) / 6.6)}
  .mission__body{flex-direction:column;gap:32px;margin-top:48px}
  .mission__pic{width:100%}
}

/* ---------- SERVICES ---------- */
.services{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.services__img{position:relative;overflow:hidden;min-height:60vh}
.services__img img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:50% 55%;will-change:transform}  /* 55 %: el puerto al centro */
.services__body{padding:calc(90 * var(--u)) calc(70 * var(--u)) calc(90 * var(--u)) var(--side-l);display:flex;flex-direction:column}
.services__img{order:2}
.services__body .rule{margin-bottom:calc(40 * var(--u))}
.svc{border-bottom:1px solid var(--line)}
.svc__btn{
  all:unset;box-sizing:border-box;cursor:pointer;width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:1em;padding:calc(22 * var(--u)) 0;
}
.svc__name{
  font-family:var(--display);font-weight:800;font-size:calc(64 * var(--u));line-height:1;letter-spacing:-.03em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.28);transition:color .9s var(--ease);
}
.svc.is-in .svc__name{color:var(--paper)}
.svc__btn:focus-visible{outline:1px solid currentColor;outline-offset:4px}
/* círculo pequeño que se llena al abrir */
.svc__dot{flex:none;width:12px;height:12px;border-radius:50%;border:1px solid currentColor;transition:background .4s,transform .6s var(--ease)}
.svc.is-open .svc__dot,.svc__btn:hover .svc__dot{background:currentColor}
.svc.is-open .svc__dot{transform:scale(1.4)}
.svc__fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--open)}
.svc.is-open .svc__fold{grid-template-rows:1fr}
.svc__panel{min-height:0;overflow:hidden}
.svc__panel p{margin:0;padding:calc(14 * var(--u)) 0 calc(16 * var(--u));max-width:46ch;font-size:max(17px,calc(21 * var(--u)));line-height:1.55;opacity:.8}
.svc__tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0 0 calc(30 * var(--u))}
.svc__tags li{padding:.45em 1em;border:1px solid rgba(var(--paper-rgb),.35);border-radius:99px;font-size:max(11px,calc(13 * var(--u)));letter-spacing:.08em;text-transform:uppercase}
.services__cta{margin-top:calc(56 * var(--u));display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
  .services{grid-template-columns:1fr}
  .services__img{min-height:52vh;order:0}
  .services__body{padding:56px 16px 72px}
  .svc__name{font-size:9vw}
  .svc__btn{padding:10px 0;min-height:48px}
}

/* ---------- SELECTED WORK ---------- */
.work{padding:calc(90 * var(--u)) var(--side-r) calc(160 * var(--u)) var(--side-l)}
.work__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:24px;margin:calc(56 * var(--u)) 0 calc(56 * var(--u))}
.work__head .display{grid-column:2;grid-row:1;text-align:right}
.work__aside{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:calc(60 * var(--u))}
.work__aside p{margin:0;max-width:22ch;text-align:left;line-height:1.4}
/* hueco para una foto que falta (ABOUT) */
.slot{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(var(--ink-rgb),.06) 0 1px,transparent 1px 14px),rgba(var(--ink-rgb),.05);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.slot__txt{opacity:.45}
.arrow{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:13px;transition:transform .5s var(--ease)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{padding:.4em .9em;border-radius:99px;border:1px solid var(--ink);font-size:max(11px,calc(13 * var(--u)));font-weight:500;letter-spacing:.04em}
/* un proyecto en grande: captura a la izquierda, ficha a la derecha. Para añadir otro, copiar el <article class="feature"> */
.feature{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:calc(70 * var(--u));align-items:start}
.feature+.feature{margin-top:calc(120 * var(--u))}
.feature__shot{position:relative;display:block;overflow:hidden;border:1px solid var(--line);background:var(--ink)}
.feature__shot video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease)}
.feature__shot .arrow{position:absolute;top:calc(20 * var(--u));right:calc(20 * var(--u));width:44px;height:44px;font-size:16px;background:var(--paper);color:var(--ink)}
.feature__shot:hover video{transform:scale(1.03)}
.feature__shot:hover .arrow{transform:rotate(45deg)}
.feature__name{margin:calc(30 * var(--u)) 0 calc(22 * var(--u));font-family:var(--display);font-weight:800;font-size:calc(96 * var(--u));line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.feature__txt{margin:calc(26 * var(--u)) 0;max-width:40ch;font-size:max(17px,calc(21 * var(--u)));line-height:1.55}
.feature__facts{margin:0 0 calc(34 * var(--u));border-top:1px solid var(--line)}
.feature__facts div{display:grid;grid-template-columns:10em minmax(0,1fr);gap:1em;padding:.8em 0;border-bottom:1px solid var(--line);font-size:max(15px,calc(18 * var(--u)))}
.feature__facts dt{opacity:.6;padding-top:.2em}
.feature__facts dd{margin:0}
@media (max-width:900px){
  .work{padding:64px 16px 96px}
  .work__head{grid-template-columns:1fr;margin:32px 0}
  .work__head .display{grid-column:1}
  .work__aside{grid-column:1;grid-row:2}
  .feature{grid-template-columns:1fr;row-gap:28px}
  .feature__name{font-size:13vw;margin:20px 0 16px}
  .feature__facts div{grid-template-columns:1fr;gap:.2em}
}

/* ---------- PREGUNTAS (dentro del bloque de contacto): lista a la izquierda, FAQS a la derecha; una abierta a la vez ---------- */
.faq__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:calc(100 * var(--u));margin:calc(56 * var(--u)) 0 calc(170 * var(--u));align-items:start}
.faq__title{text-align:right}
.qas{border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa__btn{
  all:unset;box-sizing:border-box;cursor:pointer;width:100%;
  display:grid;grid-template-columns:3.2em minmax(0,1fr) 1.6em;gap:1em;align-items:center;
  padding:calc(22 * var(--u)) 0;min-height:52px;font-size:max(17px,calc(24 * var(--u)));font-weight:400;
}
.qa__btn:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.qa__num{opacity:.5}
.qa__sign{justify-self:end;font-size:1.2em;transition:transform .5s var(--ease)}
.qa.is-open .qa__sign{transform:rotate(45deg)}
.qa__fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--open)}
.qa.is-open .qa__fold{grid-template-rows:1fr}
.qa__panel{min-height:0;overflow:hidden}
.qa__panel p{margin:0;padding:0 1.6em calc(26 * var(--u)) calc(3.2em + 1em);max-width:60ch;font-size:max(16px,calc(20 * var(--u)));line-height:1.55;opacity:.8}
.qa__panel .lnk{border-bottom:1px solid currentColor;margin-left:.3em;white-space:nowrap}
@media (max-width:900px){
  .faq__grid{grid-template-columns:1fr;row-gap:28px;margin:32px 0 88px}
  .faq__title{grid-row:1}
  .qa__btn{grid-template-columns:2.2em minmax(0,1fr) 1.4em}
  .qa__panel p{padding:0 0 20px}
}

/* ---------- PROCESO: un cuadro por día, que cada uno pasa a su ritmo ----------
   La fila se desliza a mano: con el dedo, arrastrando con el ratón, de lado en el trackpad o con ← →.
   Cada cuadro encaja al soltar (scroll-snap) */
.process{position:relative;overflow:hidden;padding:calc(150 * var(--u)) 0 calc(170 * var(--u))}
.process__stick{position:relative}
.process__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;filter:grayscale(1)}
.process__head{position:relative;display:grid;grid-template-columns:calc(70 * var(--u)) minmax(0,1fr) auto;align-items:end;column-gap:calc(40 * var(--u));padding:0 var(--side-r) 0 var(--side-l);margin-bottom:calc(60 * var(--u))}
.process__head .side{min-height:calc(190 * var(--u))}
.process__title{margin:0;font-family:var(--display);font-weight:800;font-size:calc(100 * var(--u));line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.process__note{margin:calc(24 * var(--u)) 0 0;opacity:.7}
.process__nav{display:flex;gap:10px}
.process__nav button{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(var(--paper-rgb),.5);background:none;cursor:pointer;
  font-size:18px;line-height:1;transition:background .3s,color .3s,opacity .3s;
}
.process__nav button:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.process__nav button:disabled{opacity:.3;cursor:default}
.track{
  position:relative;display:flex;align-items:flex-start;gap:calc(28 * var(--u));
  padding:0 var(--side-r) calc(10 * var(--u)) calc(165 * var(--u));list-style:none;margin:0;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:calc(165 * var(--u));
  scrollbar-width:none;cursor:grab;
}
.track::-webkit-scrollbar{display:none}
.track:focus-visible{outline:1px solid var(--paper);outline-offset:-1px}
/* mientras se arrastra con el ratón: sin encaje (si no, pelea con la mano) y sin seleccionar texto */
.track.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.day{scroll-snap-align:start}
.day{
  flex:none;width:calc(400 * var(--u));min-width:250px;min-height:calc(440 * var(--u));
  display:flex;flex-direction:column;padding:calc(28 * var(--u));
  background:rgba(var(--paper-rgb),.92);color:var(--ink);
}
.day:nth-child(even){margin-top:calc(90 * var(--u))}
.day__top{display:flex;justify-content:space-between;align-items:center}
.day__n{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:calc(88 * var(--u));line-height:1;margin:auto 0 calc(24 * var(--u))}
.day__name{margin:0 0 .45em;font-weight:400;font-size:max(22px,calc(32 * var(--u)));line-height:1.1}
.day__txt{margin:0;font-size:max(16px,calc(19 * var(--u)));line-height:1.45}
@media (max-width:900px){
  .process{padding:88px 0 96px}
  .process__head{grid-template-columns:22px minmax(0,1fr);column-gap:16px;margin-bottom:32px}
  .process__nav{grid-column:2;margin-top:20px}
  .track{scroll-padding-left:54px}
  .process__head .side{min-height:120px}
  .process__title{font-size:11vw}
  .track{padding-left:54px;gap:14px}
  .day{width:74vw;min-height:320px;padding:22px}
  .day:nth-child(even){margin-top:40px}
  .day__n{font-size:52px}
}

/* ---------- CONTACTO (en el sitio de las noticias del ejemplo) ---------- */
.contact{padding:calc(110 * var(--u)) var(--side-r) calc(140 * var(--u)) var(--side-l)}
.contact__head{scroll-margin-top:calc(90 * var(--u));display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 60px;margin:calc(56 * var(--u)) 0 calc(70 * var(--u))}
.contact__head p{margin:0;max-width:30ch;font-size:max(16px,calc(20 * var(--u)))}
.ways{list-style:none;margin:0 0 calc(110 * var(--u));padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(24 * var(--u))}
.way{position:relative;display:flex;flex-direction:column;min-height:calc(330 * var(--u));padding:calc(24 * var(--u));background:var(--ink);color:var(--paper);overflow:hidden}
.way__top{display:flex;justify-content:space-between;align-items:center;opacity:.7}
.way__big{margin:auto 0 calc(10 * var(--u));font-weight:400;font-size:calc(46 * var(--u));line-height:1.05;overflow-wrap:anywhere}
.way__small{margin:0;opacity:.7}
.way__act{display:flex;gap:10px;margin-top:calc(22 * var(--u))}
.way .arrow{background:var(--paper);color:var(--ink)}
.way:hover .arrow{transform:rotate(45deg)}
.way__link::after{content:"";position:absolute;inset:0}
.copy.is-done{background:var(--paper);color:var(--ink)}
.copy{position:relative;z-index:2}
/* formulario */
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:calc(120 * var(--u));align-items:start}
.form__lead{margin:0;font-family:var(--display);font-weight:800;font-size:calc(60 * var(--u));line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.cform{display:flex;flex-direction:column;gap:calc(34 * var(--u))}
.cform__honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{padding:0;margin-bottom:14px}
.chips label{position:relative}
.chips input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chips span{display:inline-block;padding:.7em 1.3em;border:1px solid rgba(var(--ink-rgb),.4);border-radius:99px;font-size:max(13px,calc(15 * var(--u)))}
.chips input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input:focus-visible+span{outline:1px solid var(--ink);outline-offset:3px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:calc(34 * var(--u))}
.field{display:flex;flex-direction:column;gap:8px}
.field input,.field textarea{
  font:inherit;font-size:max(16px,calc(20 * var(--u)));color:inherit;background:none;border:0;border-bottom:1px solid rgba(var(--ink-rgb),.35);
  padding:.4em 0;border-radius:0;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:#d9442f}
.cform__how{margin:0 0 14px;font-size:max(14px,calc(16 * var(--u)));opacity:.65}
.cform__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cform__legal{margin:0;max-width:62ch;flex:1 1 30ch}
.cform__send{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cform__status{margin:0;min-height:1.5em}
.cform__status.is-ok{color:#3d7a1c}
.cform__status.is-err{color:#d9442f}
@media (max-width:900px){
  .contact{padding:64px 16px 88px}
  .contact__head{margin:32px 0 40px}
  .ways{grid-template-columns:1fr;margin-bottom:72px}
  .way{min-height:220px;padding:20px}
  .way__big{font-size:min(8.6vw,34px)}
  .form{grid-template-columns:1fr;row-gap:36px}
  .form__lead{font-size:10vw}
  .cform__row{grid-template-columns:1fr}
  .cform__send{width:100%;justify-content:center}
}

/* ---------- PIE: HELIX. y BARCELONA girando ---------- */
.foot{padding:calc(90 * var(--u)) var(--side-r) calc(40 * var(--u)) var(--side-l);overflow:hidden}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:calc(40 * var(--u));padding-bottom:calc(60 * var(--u));border-bottom:1px solid var(--line)}
.foot__cols h3{margin:0 0 1em;font:inherit}
.foot__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35em}
.foot__cols a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__top{align-self:start}
/* HELIX. BARCELONA en grande, corriendo de lado sin fin. La cinta lleva el texto dos veces y se
   desplaza la mitad de su ancho: al acabar la vuelta queda igual que al empezar y no se nota el salto */
.marquee{margin:calc(60 * var(--u)) calc(-1 * var(--side-r)) calc(40 * var(--u)) calc(-1 * var(--side-l));overflow:hidden}
.marquee__in{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee.is-off .marquee__in{animation-play-state:paused}
.marquee__in span{
  flex:none;padding-right:.3em;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:calc(330 * var(--u));line-height:1;letter-spacing:-.04em;text-transform:uppercase;
}
@keyframes marquee{to{transform:translateX(-50%)}}
.foot__legal{display:flex;justify-content:space-between;align-items:center;gap:1em 2em;flex-wrap:wrap;opacity:.6}
.foot__links{display:flex;gap:1.6em;flex-wrap:wrap}
.foot__links a:hover,.foot__links a[aria-current]{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){
  .foot{padding:64px 16px 28px}
  .foot__cols{grid-template-columns:1fr 1fr;row-gap:36px}
  .foot__cols a{display:inline-block;padding:6px 0}
  .marquee__in span{font-size:24vw}
}

/* ---------- PRICING (página aparte): el configurador de la web publicada ---------- */
.quote{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  grid-template-areas:"head head" "intro intro" "opts sum";
  column-gap:calc(100 * var(--u));row-gap:calc(60 * var(--u));align-items:start;
  padding:calc(230 * var(--u)) var(--side-r) calc(160 * var(--u)) var(--side-l);
}
.quote__head{grid-area:head}
.quote__head .display{margin-top:calc(60 * var(--u))}
.quote__intro{grid-area:intro;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.quote__form{display:contents}
.quote__lead{max-width:34ch;margin:0;font-size:max(18px,calc(26 * var(--u)));line-height:1.4}
.quote__offer{margin:0;max-width:44ch;opacity:.85}
.quote__badge{display:inline-block;margin-right:.8em;padding:.3em .9em;border:1px solid currentColor;border-radius:99px;font-size:.75em;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.quote__opts{grid-area:opts;display:flex;flex-direction:column;gap:calc(56 * var(--u))}
.qgroup{border:0;margin:0;padding:0;min-width:0}
.qgroup legend{padding:0;margin-bottom:calc(18 * var(--u));opacity:.7}
.qlist{border-top:1px solid var(--line)}
.qrow{
  position:relative;display:grid;grid-template-columns:1.6em minmax(0,1fr) auto;align-items:baseline;gap:0 1em;
  padding:calc(20 * var(--u)) 0;border-bottom:1px solid var(--line);cursor:pointer;opacity:.6;transition:opacity .3s;
}
.qrow:hover,.qrow:has(input:checked),.qrow.is-on{opacity:1}
.qrow>input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.qrow__mark{width:12px;height:12px;border:1px solid currentColor;border-radius:50%;align-self:center;transition:background .3s}
.qrow input:checked~.qrow__mark,.qrow.is-on .qrow__mark{background:currentColor}
.qrow input:focus-visible~.qrow__name{outline:1px solid currentColor;outline-offset:4px}
.qrow__name{min-width:0;overflow-wrap:anywhere;font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:max(18px,calc(28 * var(--u)));text-transform:uppercase}
.qrow__desc{grid-column:2;margin-top:6px;font-size:max(15px,calc(18 * var(--u)));opacity:.8;line-height:1.5}
.qrow__price{grid-column:3;grid-row:1;font-size:max(13px,calc(15 * var(--u)));font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.qrow--count{cursor:default}
.qcount{grid-column:3;grid-row:2;justify-self:end;display:flex;align-items:center;gap:.8em;margin-top:8px}
.qcount button{width:32px;height:32px;padding:0;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;background:none;border:1px solid rgba(var(--paper-rgb),.4);transition:background .3s,color .3s}
.qcount button:hover{background:var(--paper);color:var(--ink)}
.qcount output{min-width:1.4em;text-align:center}
/* resumen: panel hueso, fijo al bajar */
.quote__sum{
  grid-area:sum;position:sticky;top:24px;display:flex;flex-direction:column;gap:calc(24 * var(--u));
  padding:calc(40 * var(--u));background:var(--paper);color:var(--ink);--line:rgba(var(--ink-rgb),.16);
}
.quote__label{margin:0}
.quote__lines{list-style:none;margin:0;padding:0}
.quote__lines li{display:flex;justify-content:space-between;gap:1em;padding:.45em 0;border-bottom:1px solid var(--line)}
.quote__lines li.is-disc{font-weight:400}
.quote__total{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin:0}
.quote__total>span{font-size:max(12px,calc(14 * var(--u)));font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.quote__total strong{font-family:var(--display);font-weight:800;font-size:max(28px,calc(50 * var(--u)));line-height:1}
.quote__old{margin-right:.6em;font-family:var(--font);font-size:.45em;opacity:.5;text-decoration:line-through}
.quote__nudge{margin:0}
.quote__nudge:empty{display:none}
.quote__nudge::before{content:"→ "}
.quote__notes{list-style:none;margin:0;padding:0;font-size:max(15px,calc(17 * var(--u)));line-height:1.55;opacity:.8}
.quote__legal,.quote__how{margin:0;font-size:max(13px,calc(15 * var(--u)));line-height:1.5;opacity:.6}
.quote__fields{display:grid;grid-template-columns:1fr 1fr;gap:calc(24 * var(--u)) calc(30 * var(--u))}
.quote__fields .field:last-child{grid-column:1/-1}
.quote__sum .cform__send{align-self:flex-start;background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:900px){
  .quote{display:flex;flex-direction:column;gap:36px;padding:120px 16px 88px}
  .quote__sum{position:relative;top:auto;padding:22px 18px}
  .qrow{padding:16px 0;grid-template-columns:1.4em minmax(0,1fr) auto;gap:0 .7em}
  .qrow__price{font-size:12px;letter-spacing:.06em}
  .qrow__desc{grid-column:2/-1}
  .qrow--count .qrow__desc{grid-column:2}
  .qcount button{width:44px;height:44px}
  .quote__fields{grid-template-columns:1fr}
  .quote__sum .cform__send{width:100%;justify-content:center}
  .quote__long{display:none}
}

/* ---------- TEXTOS LEGALES (aviso legal, privacidad, cookies) ---------- */
.legal{padding:calc(230 * var(--u)) var(--side-r) calc(160 * var(--u)) var(--side-l)}
.legal__title{margin:calc(60 * var(--u)) 0 calc(90 * var(--u))}
.legal__body{max-width:74ch;font-size:max(17px,calc(20 * var(--u)));line-height:1.65}
.legal__body h2{margin:2.4em 0 .7em;font-family:var(--display);font-weight:800;font-size:max(20px,calc(30 * var(--u)));line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.legal__body h2:first-child{margin-top:0}
.legal__body p{margin:0 0 1em}
.legal__body ul{margin:0 0 1em;padding-left:1.2em}
.legal__body li{margin-bottom:.5em}
.legal__data{margin:0 0 1em;border-top:1px solid var(--line)}
.legal__data div{display:grid;grid-template-columns:11em minmax(0,1fr);gap:1em;padding:.6em 0;border-bottom:1px solid var(--line)}
.legal__data dt{font-size:.8em;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.7;padding-top:.15em}
.legal__data dd{margin:0}
.legal__table{overflow-x:auto;margin:0 0 1em}
.legal__table table{width:100%;min-width:560px;border-collapse:collapse;font-size:.9em}
.legal__table th,.legal__table td{text-align:left;padding:.6em .8em .6em 0;border-bottom:1px solid var(--line);vertical-align:top}
.legal__table th{font-size:.8em;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.legal__nav{display:flex;gap:2em;flex-wrap:wrap;margin-top:calc(90 * var(--u));padding-top:calc(24 * var(--u));border-top:1px solid var(--line)}
.legal__nav a{display:inline-block;min-height:24px}
.legal__nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}
/* primera capa de información junto a los formularios */
.rgpd{margin:0;max-width:62ch;font-size:max(12px,calc(14 * var(--u)));line-height:1.5;opacity:.7}
.rgpd a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .legal{padding:120px 16px 88px}
  .legal__title{margin:32px 0 48px}
  .legal__data div{grid-template-columns:1fr;gap:.1em}
  .foot__links a{display:inline-block;padding:10px 0}
}

/* ---------- ABOUT (página) ---------- */
.page-hero{position:relative;padding:calc(280 * var(--u)) var(--side-r) calc(120 * var(--u)) var(--side-l)}
.page-hero .display{font-size:calc(250 * var(--u));margin-top:calc(60 * var(--u))}
.page-hero__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(120 * var(--u));margin-top:calc(80 * var(--u))}
.page-hero__row p{margin:0;max-width:40ch;font-size:max(17px,calc(24 * var(--u)));line-height:1.45}
.page-hero__row p+p{opacity:.72}
.photos{padding:calc(110 * var(--u)) var(--side-r) calc(140 * var(--u)) var(--side-l)}
/* galería del estudio (ABOUT): cuadrícula justificada. Cada fila tiene la misma altura y cada foto ocupa según su
   proporción (--r = ancho/alto, puesto en el HTML), así que no se recorta nada. Entran con [data-reveal] como la foto del creador, escalonadas dentro de cada fila */
.gallery{display:flex;flex-direction:column;gap:calc(14 * var(--u));margin-top:calc(70 * var(--u))}
.gallery__row{display:flex;gap:calc(14 * var(--u))}
.grid__pic{margin:0;flex:var(--r) 1 0;min-width:0;aspect-ratio:var(--r);background:var(--ink-deep)}
.grid__pic img{display:block;width:100%;height:100%;object-fit:cover}
.gallery__row .grid__pic:nth-child(2){transition-delay:.12s}
.gallery__row .grid__pic:nth-child(3){transition-delay:.24s}
.maker{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);column-gap:calc(120 * var(--u));padding:calc(140 * var(--u)) var(--side-r) calc(140 * var(--u)) var(--side-l);align-items:start}
.maker__pic{margin:0}
.maker__pic img{display:block;width:100%;height:auto}  /* la foto entera, sin recortar */
.maker__title{margin:calc(40 * var(--u)) 0 calc(40 * var(--u));font-family:var(--display);font-weight:800;font-size:calc(100 * var(--u));line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.maker__txt{margin:0 0 1.2em;max-width:44ch;font-size:max(16px,calc(21 * var(--u)));line-height:1.55;opacity:.8}
.maker__lead{font-size:max(19px,calc(28 * var(--u)));line-height:1.4;opacity:1}  /* la primera frase, el gancho, un poco más grande */
.values{padding:calc(110 * var(--u)) var(--side-r) calc(140 * var(--u)) var(--side-l)}
.values ol{list-style:none;margin:calc(50 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(60 * var(--u)) calc(40 * var(--u))}
.values li{padding-top:calc(20 * var(--u));border-top:1px solid var(--ink)}
.values h3{margin:calc(40 * var(--u)) 0 .5em;font-family:var(--display);font-weight:800;font-size:max(22px,calc(36 * var(--u)));line-height:1;letter-spacing:-.025em;text-transform:uppercase}
.values p{margin:0;max-width:34ch;opacity:.75}
@media (max-width:900px){
  .page-hero{padding:140px 16px 64px}
  .page-hero .display{font-size:17vw}
  .page-hero__row{grid-template-columns:1fr;row-gap:24px;margin-top:40px}
  .photos{padding:64px 16px 88px}
  .gallery{gap:8px;margin-top:32px}
  .gallery__row{flex-direction:column;gap:8px}
  .grid__pic{flex:none;width:100%}
  .maker{grid-template-columns:1fr;row-gap:32px;padding:88px 16px}
  .maker__pic{order:2}  /* en móvil la foto va después del texto */
  .maker__title{font-size:12vw}
  .values{padding:72px 16px 88px}
  .values ol{grid-template-columns:1fr;gap:36px}
}

/* ---------- ARTE (lo primero de ABOUT desde el 30-9-2026, #arte: toda en hueso) ---------- */
.page-paper{background:var(--paper)}   /* ABOUT empieza en hueso: sin franja negra al estirar la página arriba */
.page-hero--sub{padding-top:calc(140 * var(--u))}   /* cabecera de página que no va arriba del todo (El estudio, en ABOUT) */
.page-hero:has(+ .art){padding-bottom:calc(40 * var(--u))}
.art{padding:calc(40 * var(--u)) var(--side-r) calc(160 * var(--u)) var(--side-l)}
/* obras en rejilla de 3 columnas, miniaturas grandes; cada una abre el pop-up (.viewer) */
.pieces{list-style:none;margin:calc(56 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(80 * var(--u)) calc(28 * var(--u))}
.pieces .piece:nth-child(3n+2){transition-delay:.12s}
.pieces .piece:nth-child(3n+3){transition-delay:.24s}
.piece__open{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;cursor:pointer;overflow:hidden;background:rgba(var(--ink-rgb),.06)}
.piece__open img{display:block;width:100%;height:auto;transition:transform 1.2s var(--ease)}
.piece__open .arrow{position:absolute;top:calc(20 * var(--u));right:calc(20 * var(--u));width:44px;height:44px;font-size:16px;background:var(--paper);color:var(--ink);opacity:0;transition:opacity .4s,transform .5s var(--ease)}
.piece__open:hover img{transform:scale(1.03)}
.piece__open:hover .arrow,.piece__open:focus-visible .arrow{opacity:1;transform:rotate(45deg)}
.piece__open:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.piece__cap{display:flex;justify-content:space-between;gap:1em;margin-top:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.piece__title{margin:calc(18 * var(--u)) 0 .3em;font-family:var(--display);font-weight:800;font-size:max(20px,calc(32 * var(--u)));line-height:1;letter-spacing:-.025em;text-transform:uppercase}
.piece__txt{display:none}   /* la descripción solo se ve en el pop-up */
.art__webs{margin-top:calc(56 * var(--u))}   /* WORK › Webs: el mismo .feature que en la portada */
/* portada, SELECTED WORK: dos obras y el enlace a WORK en la tercera columna */
.teaser{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:calc(28 * var(--u));align-items:end;margin-top:calc(120 * var(--u))}
.pieces--teaser{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.teaser__more{display:flex;flex-direction:column;align-items:flex-start;gap:calc(28 * var(--u));padding-bottom:calc(20 * var(--u))}
.teaser__more p{margin:0;max-width:22ch;line-height:1.4}
.svc__more{display:inline-block;margin-top:16px;padding-bottom:2px;border-bottom:1px solid currentColor;font-weight:500}
/* WORK › Branding: los brandkits en columnas (.kits), cada uno un .kit: nombre, etiquetas, texto y ficha (paleta) uno debajo de otro y,
   debajo, todas sus imágenes en un carrusel de una sola imagen (.car) que se pasa con las flechas o deslizando. Sin pop-up */
.kits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(70 * var(--u));margin-top:calc(56 * var(--u));align-items:start}
.kit{display:flex;flex-direction:column;height:100%}
.kit__head .feature__facts{margin-bottom:0}
.kit__colors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5em 1.2em;font-size:.85em;letter-spacing:.04em}
.kit__colors li{display:flex;align-items:center;gap:.5em}
.kit__colors span{width:1.15em;height:1.15em;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.3)}
.car{margin-top:auto;padding-top:calc(48 * var(--u))}
.car__track{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;aspect-ratio:4/5;background:rgba(var(--ink-rgb),.05)}
.car__track::-webkit-scrollbar{display:none}
.car__track:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.car__slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.car__slide img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.car__nav{display:flex;align-items:center;justify-content:space-between;margin-top:calc(18 * var(--u))}
.car__btn{width:46px;height:46px;border:1px solid rgba(var(--ink-rgb),.35);border-radius:50%;background:none;color:inherit;font:inherit;font-size:18px;cursor:pointer;transition:background .2s,color .2s}
.car__btn:hover{background:var(--ink);color:var(--paper)}
.car__btn:disabled{opacity:.3;pointer-events:none}
/* WORK › Webs, Demos y Branding más pequeños y con más aire (12-10-2026, lo pidió Javier). Solo en ordenador; la portada, Posters y Arte no cambian */
@media (min-width:901px){
  #webs .art__webs,#demos .art__webs,#branding .kits{margin:calc(90 * var(--u)) auto 0;max-width:calc(1240 * var(--u))}
  #webs .feature,#demos .feature{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:calc(90 * var(--u))}
  #webs .feature+.feature,#demos .feature+.feature{margin-top:calc(170 * var(--u))}
  :is(#webs,#demos,#branding) .feature__name{font-size:calc(68 * var(--u));margin:calc(24 * var(--u)) 0 calc(18 * var(--u))}
  :is(#webs,#demos,#branding) .feature__txt{font-size:max(16px,calc(18 * var(--u)));margin:calc(22 * var(--u)) 0}
  :is(#webs,#demos,#branding) .feature__facts div{font-size:max(14px,calc(16 * var(--u)))}
  #branding .kits{column-gap:calc(120 * var(--u))}
  #branding .car{padding-top:calc(56 * var(--u))}
  #branding .car{width:88%}
  #demos,#branding{padding-top:calc(110 * var(--u))}
}
/* el pop-up abierto desde la galería: solo la foto, sin ficha; ← → a los lados (en ordenador) y debajo de la foto (en móvil) */
.viewer.viewer--solo{grid-template-columns:minmax(0,1fr)}   /* .viewer.: el .viewer de abajo pone las dos columnas */
.viewer--solo .viewer__info>:not(.viewer__nav){display:none}
@media (min-width:901px){
  .viewer--solo .viewer__pic{padding-inline:calc(130 * var(--u))}
  .viewer--solo .viewer__info{position:fixed;inset:0;padding:0;overflow:visible;pointer-events:none}
  .viewer--solo .viewer__nav{position:absolute;left:var(--side-l);right:var(--side-r);top:50%;transform:translateY(-50%);justify-content:space-between;margin:0}
  .viewer--solo .viewer__nav button{pointer-events:auto;background:var(--paper)}
  .viewer--solo .viewer__nav button:hover{background:var(--ink)}
}
/* el pop-up: a pantalla completa, en hueso. La obra a la izquierda (se pulsa para verla a tamaño real y moverse por
   ella) y la ficha a la derecha. En móvil, la obra arriba y la ficha debajo */
.viewer{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  display:grid;grid-template-columns:minmax(0,1fr) max(320px,calc(460 * var(--u)));background:var(--paper);color:var(--ink);--line:rgba(var(--ink-rgb),.16);
  opacity:0;transition:opacity .45s var(--ease),display .45s allow-discrete,overlay .45s allow-discrete;
}
.viewer:not([open]){display:none}
.viewer[open]{opacity:1}
@starting-style{.viewer[open]{opacity:0}}
.viewer::backdrop{background:var(--paper)}
.viewer__pic{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:calc(50 * var(--u))}
/* la obra: caja con la proporción de la obra (--r, de main.js) del tamaño que quepa; debajo la miniatura y encima los cuatro trozos de la grande (2×2), que se
   encienden cuando han llegado los cuatro */
.viewer__art{position:relative;width:min(100%,calc((100svh - 100 * var(--u)) * var(--r,.75)));aspect-ratio:var(--r,.75);box-shadow:0 0 0 1px var(--line);background:rgba(var(--ink-rgb),.06)}
.viewer__low{position:absolute;inset:0;width:100%;height:100%;max-width:none;transition:opacity .4s}
.viewer__tiles{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .4s}
.viewer__tiles.is-in{opacity:1}
.viewer__tiles.is-in~.viewer__low,.viewer__art:has(.viewer__tiles.is-in) .viewer__low{opacity:0}   /* con los trozos puestos, la miniatura de debajo no se ve: nunca sale doble */
/* cada trozo en su esquina, a la mitad exacta de ancho y alto (sin rejilla: algunos navegadores agrandaban las celdas
   según el tamaño de cada imagen y los trozos se desplazaban) */
.viewer__tiles img{position:absolute;display:block;width:50%;height:50%;max-width:none;max-height:none}
.viewer__tiles img:nth-child(1){left:0;top:0}
.viewer__tiles img:nth-child(2){left:50%;top:0}
.viewer__tiles img:nth-child(3){left:0;top:50%}
.viewer__tiles img:nth-child(4){left:50%;top:50%}
/* PROTECCIÓN de las obras (ABOUT › Art): una capa transparente encima de cada imagen (el botón derecho y el arrastre
   dan con ella y no con la foto: no sale «Guardar imagen»), sin selección ni menú de mantener pulsado en el móvil,
   main.js bloquea el menú contextual y al imprimir no salen. Una captura de pantalla no se puede evitar */
.piece__open::after,.viewer__art::after{content:"";position:absolute;inset:0;z-index:1}
.piece__open .arrow{z-index:2}
.pieces img,.viewer img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;pointer-events:none}
@media print{.pieces,.viewer{display:none!important}}
.viewer__info{display:flex;flex-direction:column;gap:calc(28 * var(--u));padding:max(104px,calc(140 * var(--u))) var(--side-r) calc(50 * var(--u)) 0;overflow-y:auto}
.viewer__title{margin:calc(20 * var(--u)) 0 0;font-family:var(--display);font-weight:800;font-size:max(28px,calc(60 * var(--u)));line-height:.95;letter-spacing:-.035em;text-transform:uppercase}
.viewer__txt{margin:0;max-width:40ch;font-size:max(16px,calc(20 * var(--u)));line-height:1.55}
.viewer__txt:empty{display:none}
.viewer__facts{margin:0;border-top:1px solid var(--line)}
.viewer__facts div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:1em;padding:.7em 0;border-bottom:1px solid var(--line)}
.viewer__facts dt{opacity:.6}
.viewer__facts dd{margin:0;white-space:nowrap}
.viewer__facts div:has(dd:empty){display:none}   /* un dato que no hay (p. ej. el autor en las covers) no sale */
.viewer__nav{display:flex;gap:10px;margin-top:auto}
.viewer__nav button,.viewer__close{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:none;cursor:pointer;font-size:18px;line-height:1;transition:background .3s,color .3s}
.viewer__nav button:hover,.viewer__close:hover{background:var(--ink);color:var(--paper)}
.viewer__close{position:fixed;top:calc(30 * var(--u));right:var(--side-r);z-index:2;background:var(--paper)}
.viewer__close span{position:absolute;left:50%;top:50%;width:18px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.viewer__close span+span{transform:translate(-50%,-50%) rotate(-45deg)}
html:has(.viewer[open]){overflow:hidden}
@media (max-width:900px){
  .art{padding:24px 16px 88px}
  .page-hero--sub{padding-top:88px}
  .page-hero:has(+ .art){padding-bottom:24px}
  .pieces{margin-top:32px;gap:40px 14px}
  .teaser{grid-template-columns:1fr;row-gap:40px;margin-top:64px}
  .pieces--teaser{margin:0}
  .kits{grid-template-columns:1fr;gap:72px;margin-top:32px}
  .car{padding-top:28px}
  .pieces--album .piece{margin-bottom:14px}
  .piece__open .arrow{opacity:1}
  .viewer{display:block;overflow-y:auto}
  .viewer:not([open]){display:none}
  .viewer__pic{padding:76px 16px 16px;height:auto}
  .viewer__art{width:min(100%,calc(72svh * var(--r,.75)))}
  .viewer__info{padding:16px 16px 40px;gap:20px}
  .viewer__close{top:14px;right:16px}
}
@media (max-width:600px){.pieces{grid-template-columns:1fr}.pieces--album{columns:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .lines>span>span{transform:none}
  .roll__in{--a:0deg!important;--fo:1!important;--bo:0!important}
  .mission__pic img{clip-path:none}
  .mission__pic::before{transform:none}
  .linepic img{clip-path:none}
  .linepic::before{transform:none}
  .marquee__in{animation:none!important}
  .hero__bg{transform:none!important}
  .hero__pitch{animation:none}
}

/* ---------- pantalla de carga: la X. del manual de marca (4-10-2026, lo pidió Javier) ----------
   Solo con html.intro-on, que pone assets/js/intro.js en el <head> al llegar desde fuera. Sube y desaparece sola a los
   1,9 s (aunque el JS falle); un clic la quita antes (.intro-out). La portada espera a que se vaya para entrar */
.intro{display:none}
html.intro-on .intro{position:fixed;z-index:200;inset:0;display:grid;place-items:center;background:var(--ink);color:var(--paper);
  clip-path:inset(0);animation:introOut 1.1s var(--open) 1.9s forwards;cursor:pointer}
html.intro-out .intro{animation-delay:0s}
@keyframes introOut{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.intro svg{width:max(160px,calc(300 * var(--u)));overflow:visible}
.intro .ix{transform-box:fill-box;transform-origin:50% 50%;animation:introX 1.2s var(--ease) both}
.intro .idot{transform-box:fill-box;animation:introDot 1s var(--ease) .55s both}
@keyframes introX{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes introDot{from{opacity:0;transform:translateY(-260%)}to{opacity:1;transform:none}}
.intro__foot{position:absolute;left:var(--side-l);right:var(--side-r);bottom:calc(50 * var(--u));display:flex;justify-content:space-between;gap:1em}
html.intro-on .hero__word>span{animation-delay:1.9s}
html.intro-on .hero__word--r>span{animation-delay:2.02s}
html.intro-on .hero__pitch{animation-delay:2.2s}
@media print{.intro{display:none!important}}