/* ===================================================================
   TURQUINO — the system. One file, every rule the site is built on.
   Written clean 9 Sep 2026 for the section-by-section rebuild.

   Decisions, so nothing below has to be re-decided:
     grid        twelve columns, one gutter, one container padding
     breakpoints 991 / 767 / 479 — nothing else, ever
     ground      bone, with ink type; one dark room per page at most
     faces       Space Grotesk (display + UI), Bodoni Moda italic
                 (the accent word, always 1.23x), Inter (body)
     motion      transform + opacity only; every effect honours
                 prefers-reduced-motion; hover code is pointer-gated
   =================================================================== */

/* ---------- faces, self-hosted ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/SpaceGrotesk.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 500;font-display:swap;src:url(fonts/BodoniModa-Italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/Inter.woff2) format('woff2')}

/* ---------- tokens ---------- */
:root{
  --bone:#F2F1EC; --bone-2:#E9E8E2; --ink:#0A0F10; --ink-2:#1A2223;
  --muted:#57615F; --line:rgba(10,15,16,.15); --line-2:rgba(10,15,16,.08);
  --teal:#19b8b0; --teal-bright:#27d6cd; --teal-deep:#0C726D; --mint:#7FF3EC;
  --coral:#ff6a3d;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --accent:'Bodoni Moda','Didot',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --gut:clamp(10px,1.32vw,14px);        /* the one gutter */
  --pad:clamp(14px,3vw,40px);           /* the one container padding */
  --ease:cubic-bezier(.22,.85,.25,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
}

/* ---------- ground ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bone);color:var(--ink);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:transparent;font-family:var(--body);font-size:16px;line-height:1.55;color:var(--ink)}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the grid ---------- */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.sec{position:relative;z-index:1}

/* ---------- type scale ---------- */
.t-hero{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,7.6vw,7.8rem);line-height:.88;letter-spacing:-.045em;color:var(--ink)}
.t-hero i,.t-h1 i,.t-h2 i{font-family:var(--accent);font-style:italic;font-weight:400;
  font-size:1.23em;line-height:.9;letter-spacing:-.015em;display:inline-block;padding-right:.05em}
.t-h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:max(8.2vw,58px);line-height:.86;letter-spacing:-.03em}
.t-h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,4.2vw,3.6rem);line-height:1.02;letter-spacing:-.035em}
.t-h3{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.8vw,1.45rem);letter-spacing:-.02em}
.t-lede{font-family:var(--body);font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;color:var(--muted);max-width:52ch}
.t-eyebrow{display:inline-block;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone);background:var(--ink);padding:.45em .9em;border-radius:4px}
.t-label{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.t-mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.74rem;letter-spacing:.06em;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.02em;
  padding:.9em 1.5em;border-radius:999px;border:1px solid transparent;
  transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--teal-deep);transform:translateY(-2px)}
.btn-line{border-color:rgba(10,15,16,.28);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.btn-pill{border-color:rgba(10,15,16,.28);color:var(--ink);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;padding:1em 1.6em}
.btn-pill:hover{border-color:var(--ink);background:var(--ink);color:var(--bone)}

/* ---------- the loader: the mark rises, then the room opens ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--bone);display:grid;place-items:center;
  transition:translate .7s var(--ease-io) .1s,visibility 0s .9s;will-change:translate}
.loader .marca{width:min(11vh,14vw);aspect-ratio:1;position:relative}
.loader .marca img{width:100%;height:100%;object-fit:contain;filter:invert(1) brightness(.16);
  clip-path:inset(100% 0 0 0);animation:subir 1.05s var(--ease) .1s forwards}
.loader .marca::after{content:'';position:absolute;left:0;right:0;bottom:-18%;height:1px;background:var(--line);
  transform-origin:0 50%;scale:0 1;animation:trazo 1.05s var(--ease) .1s forwards}
@keyframes subir{to{clip-path:inset(0 0 0 0)}}
@keyframes trazo{to{scale:1 1}}
html.listo .loader{translate:0 -100%;visibility:hidden}
html.listo .loader .marca{opacity:0;transition:opacity .25s}
@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  .loader .marca img,.loader .marca::after{animation:none}
}

/* ---------- the bar + the HUD ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:95;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem var(--pad);transition:background .4s,border-color .4s,backdrop-filter .4s}
.bar .logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.bar .logo span{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:.005em;text-transform:uppercase;white-space:nowrap}
@media (max-width:479px){.bar .logo span{font-size:.92rem}}
.bar .menu{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem)}
.bar .link{position:relative;display:inline-flex;align-items:baseline;gap:.35em;padding-bottom:.42em;
  font-family:var(--display);font-weight:500;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;overflow:hidden}
.bar .link::after{content:'↗';font-size:.9em;opacity:.75;transition:transform .35s;align-self:flex-start}
.bar .link::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  opacity:.35;transition:opacity .3s}
.bar .link:hover{color:var(--teal-deep)}
.bar .link:hover::before{opacity:1}
.bar .link:hover::after{transform:translate(2px,-2px)}
/* the roll: each word twice, the first leaves as the second arrives */
.rd{display:block;position:relative;overflow:hidden;height:1.15em;line-height:1.15em}
.rd i{display:block;font-style:normal;transition:transform .55s var(--ease-io)}
.link:hover .rd i,.btn:hover .rd i{transform:translateY(-100%)}
.lang{display:inline-flex;gap:.5em;padding:.5em .9em;border:1px solid var(--line);border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.06em}
.lang a{text-decoration:none;color:var(--muted)}
.lang a[aria-current]{color:var(--teal-deep)}
.hud{position:fixed;inset:0;z-index:96;pointer-events:none}
.hud > *{pointer-events:auto}
.hud-scroll{position:absolute;left:var(--pad);bottom:22px;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  opacity:calc(1 - var(--hq,0));transition:opacity .4s}
.hud-scroll .linea{width:1px;height:6em;background:rgba(10,15,16,.35);transform-origin:50% 100%;animation:pulso 4s ease-in-out infinite}
.hud-scroll .punto{width:.7em;height:.7em;border-radius:50%;background:var(--teal-deep)}
@keyframes pulso{0%,100%{scale:1 .35;opacity:.35}50%{scale:1 1;opacity:1}}
.hud-burger{position:absolute;right:20px;bottom:20px;width:52px;height:52px;border-radius:14px;
  border:1px solid var(--line);background:rgba(242,241,236,.9);backdrop-filter:blur(10px);cursor:pointer;
  display:grid;place-items:center;padding:0;transition:border-color .3s}
.hud-burger:hover{border-color:var(--ink)}
.hud-burger i{position:absolute;width:22px;height:2px;background:var(--ink);transition:transform .4s cubic-bezier(.68,-.55,.265,1.55)}
.hud-burger i:nth-child(1){transform:translateY(-7px)}
.hud-burger i:nth-child(3){transform:translateY(7px)}
.hud.abierto .hud-burger i:nth-child(1){transform:rotate(45deg)}
.hud.abierto .hud-burger i:nth-child(2){transform:scale3d(0,1,1)}
.hud.abierto .hud-burger i:nth-child(3){transform:rotate(-45deg)}
.hud-menu{position:absolute;right:20px;bottom:84px;width:min(16em,calc(100vw - 40px));padding:1.6em 1.8em 1.4em;
  border-radius:18px;border:1px solid var(--line);background:rgba(242,241,236,.97);backdrop-filter:blur(14px);
  box-shadow:0 2rem 4rem -1.6rem rgba(10,15,16,.35);opacity:0;transform:translateY(12px) scale(.98);
  transform-origin:100% 100%;transition:opacity .3s,transform .5s var(--ease);visibility:hidden}
.hud.abierto .hud-menu{opacity:1;transform:none;visibility:visible}
.hud-menu .caja{overflow:hidden}
.hud-menu a{display:flex;justify-content:space-between;gap:1rem;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;padding:.28em 0;
  transform:translateY(110%);transition:transform .55s var(--ease),color .25s}
.hud-menu a:hover{color:var(--teal-deep)}
.hud.abierto .hud-menu a{transform:none}
.hud-menu .hud-pie{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);
  display:flex;flex-direction:column;gap:.3rem}
.hud-menu .pie a{font:inherit;padding:0;transform:none;color:var(--muted);display:inline}

/* ---------- the orb layer (orb.js paints the canvas; these are the fallback + rings) ---------- */

/* ===================================================================
   SECTION 1 — the opening, to the measured spec.
     h1   weight 400 · 7.1vw (75px in 1050) · line-height 1.0 · no tracking
          uppercase · colour = ground · mix-blend-mode: difference
     rows 2 / 4 / 6 of a 7-row grid; lines start at ~20%, ~47%, ~28%
     nothing else in the frame: no eyebrow, no lede, no buttons
     the orb is seeded small at dead centre and grows with scroll
   The h1 must sit in the ROOT stacking context (no z-index on any
   ancestor) or the blend resolves against a transparent backdrop and
   the type disappears. That was the bug both times before.
   =================================================================== */
.abre{position:relative;min-height:100svh;box-sizing:border-box;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:minmax(80px,1.35fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(60px,1.35fr);column-gap:var(--gut);height:100svh}
.abre .ln{display:block;margin:0;white-space:nowrap;overflow:hidden;align-self:center;padding:.06em 0 .04em;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:7.1vw;line-height:1;letter-spacing:0;
  color:var(--bone);mix-blend-mode:difference}
.abre .ln:nth-of-type(1){grid-area:2 / 3 / 3 / 13}
.abre .ln:nth-of-type(2){grid-area:4 / 5 / 5 / 13}
.abre .ln:nth-of-type(3){grid-area:6 / 4 / 7 / 13}
.abre .ln i{font-family:var(--accent);font-style:italic;font-weight:400;font-size:1.18em;line-height:.9;display:inline-block}
.abre .pal{display:inline-block;white-space:nowrap}
.abre .ch{display:inline-block;transform:translateY(-130%)}
html.listo .abre .ch{transform:none;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 24ms + 150ms)}
.abre .pista{grid-area:7 / 1 / 8 / 4;align-self:end;padding-bottom:1.6rem;
  font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bone);mix-blend-mode:difference;opacity:0;transition:opacity 1s var(--ease) 1.4s}
html.listo .abre .pista{opacity:1}
/* the mark, at the heart of the seed */

/* ---------- breakpoints — the only three ---------- */
@media (max-width:991px){
  .hud-scroll{display:none}
  .abre .ln:nth-of-type(1){grid-area:2 / 1 / 3 / 13}
  .abre .ln:nth-of-type(2){grid-area:4 / 3 / 5 / 13}
  .abre .ln:nth-of-type(3){grid-area:6 / 2 / 7 / 13}
}
@media (max-width:767px){
  .bar{padding:.9rem 14px}
  .bar .link{display:none}
  .abre{grid-template-rows:1fr auto auto auto 1.2fr;padding-top:70px}
  .abre .ln{white-space:normal;font-size:max(11.5vw,40px)}
  .abre .ln:nth-of-type(1){grid-area:2 / 1 / 3 / 13}
  .abre .ln:nth-of-type(2){grid-area:3 / 1 / 4 / 13}
  .abre .ln:nth-of-type(3){grid-area:4 / 1 / 5 / 13}
  .abre .pista{grid-area:5 / 1 / 6 / 13}
}
@media (max-width:479px){
  .g{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .orb-ring,.hud-scroll .linea{animation:none!important}
  .abre .ch,.abre .pista{transition:none;transform:none;opacity:1}
  html{scroll-behavior:auto}
}



/* ===== the orb (measured: 80vh square, min 45em, fixed & centred, z below the page) ===== */
.orb-w{position:fixed;inset:0;z-index:-1;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:clip}
.orb{position:absolute;width:80vh;height:80vh;min-width:45em;min-height:45em;border-radius:100%;will-change:transform;
  /* until WebGL takes over: a CSS field in the same colours */
  background:radial-gradient(circle at 42% 38%,#fcf7ec 0,#7ff3ec 22%,#19b8b0 48%,#0c726d 70%,rgba(12,114,109,0) 71%)}
.orb-w.con-lienzo .orb{background:none}
.orb canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.orb-out{position:absolute;width:80vh;height:80vh;min-width:45em;min-height:45em;will-change:transform}
.orb-ring{position:absolute;inset:0;border-radius:100%;border:1px dashed rgba(10,15,16,.28);animation:orb-gira 100s linear infinite;transform:scale(0);opacity:0;transition:transform 2s var(--ease-io),opacity 2s}
.orb-out:nth-of-type(3) .orb-ring{animation-direction:reverse;border-color:rgba(12,114,109,.32)}
/* the intro: the seed, then the full size */
.orb-w .orb{width:0;height:0;min-width:0;min-height:0;opacity:0;transition:width 1s var(--ease-io),height 1s var(--ease-io),min-width 1s var(--ease-io),min-height 1s var(--ease-io),opacity 1s}
.orb-w.semilla .orb{width:4.3em;height:4.3em;opacity:1}
.orb-w.crecida .orb{width:80vh;height:80vh;min-width:45em;min-height:45em}
.orb-w.semilla .orb-out:nth-of-type(2) .orb-ring{transform:scale(1);opacity:1}
.orb-w.semilla .orb-out:nth-of-type(3) .orb-ring{transform:scale(1);opacity:1;transition-delay:1s}
@keyframes orb-gira{to{rotate:360deg}}
@media (max-width:991px){.orb,.orb-w.crecida .orb{width:90vw;height:90vw;min-width:0;min-height:0}.orb-out{width:90vw;height:90vw;min-width:0;min-height:0}}

/* ===== SECTION 2 · the statement ===== */
.dice{position:relative;min-height:95svh;padding:14vh var(--pad) 12vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:6vh;align-content:center}
.dice .frase{grid-column:3 / 13;margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:5.29vw;line-height:1.02;letter-spacing:0;color:var(--bone);mix-blend-mode:difference}
.dice .frase .pw{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .02em;margin:-.04em 0 -.02em}
.dice .frase .pw > span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--k,0) * 28ms)}
.dice.visto .frase .pw > span{transform:none}
.dice .lede{grid-column:5 / 9;margin:0;font-family:var(--body);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;color:var(--bone);mix-blend-mode:difference;opacity:0;translate:0 14px;transition:opacity .8s var(--ease) .5s,translate .8s var(--ease) .5s}
.dice .acto{grid-column:5 / 9;justify-self:start;color:var(--bone);border-color:rgba(242,241,236,.6);mix-blend-mode:difference;opacity:0;transition:opacity .8s var(--ease) .7s}
.dice.visto .lede,.dice.visto .acto{opacity:1;translate:none}
@media (max-width:991px){.dice .frase{grid-column:1 / 13;font-size:6.2vw}.dice .lede,.dice .acto{grid-column:3 / 12}}
@media (max-width:767px){.dice{min-height:0;padding:16vh var(--pad) 14vh;row-gap:5vh}.dice .frase{font-size:max(8.4vw,32px);line-height:1.06}.dice .lede,.dice .acto{grid-column:1 / 13}}
@media (prefers-reduced-motion:reduce){.dice .frase .pw > span,.dice .lede,.dice .acto{transition:none;transform:none;opacity:1;translate:none}}

html.rodado .abre .pista{opacity:0;transition:opacity .3s}

/* ===== SECTION 3 · trusted by ===== */
.fe{position:relative;min-height:60svh;padding:10vh var(--pad);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.fe .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.6rem}
.fe .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em;color:var(--ink)}
.fe .riel .n{font-family:var(--body);font-size:.8rem;color:var(--muted);letter-spacing:.04em}
.fe .muro{grid-column:3 / 13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fe .celda{position:relative;aspect-ratio:5 / 3;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.fe .celda::before,.fe .celda::after{content:"+";position:absolute;font-family:var(--body);font-size:.9rem;line-height:1;color:var(--ink);opacity:.55;width:.6em;height:.6em;display:grid;place-items:center}
.fe .celda::before{left:-.32em;top:-.3em}
.fe .celda::after{right:-.3em;bottom:-.3em}
.fe .celda img{position:absolute;left:14%;top:16%;width:72%;height:68%;object-fit:contain;filter:grayscale(1) contrast(1.15);opacity:.92;transition:filter .5s var(--ease),opacity .5s,transform .7s var(--ease)}
@media (hover:hover){.fe .celda:hover img{filter:none;opacity:1;transform:scale(1.06)}}
.fe .celda.vacia{background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(10,15,16,.05) 9px 10px)}
.fe .celda{opacity:0;translate:0 10px;transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:calc(var(--k,0) * 60ms)}
.fe.visto .celda{opacity:1;translate:none}
@media (max-width:991px){.fe .riel{grid-column:1 / 13;position:static;flex-direction:row;justify-content:space-between;margin-bottom:1.4rem}.fe .muro{grid-column:1 / 13;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:479px){.fe{min-height:0;padding:12vh var(--pad)}.fe .muro{grid-template-columns:repeat(2,minmax(0,1fr))}.fe .celda{aspect-ratio:4 / 3}}
@media (prefers-reduced-motion:reduce){.fe .celda{transition:none;opacity:1;translate:none}}

/* ===== SECTION 4 · featured work ===== */
.obra{position:relative;padding:12vh var(--pad) 14vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.obra .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.obra .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em;color:var(--ink)}
.obra .riel .n{font-family:var(--body);font-size:.8rem;color:var(--muted);letter-spacing:.04em}
.obra .pila{grid-column:5 / 13;display:grid;grid-template-columns:1fr 1fr;gap:1.32vw;align-items:start}
.obra .pila > :nth-child(even){margin-top:3.9vw}
.obra .tarjeta{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:.93vw;overflow:hidden;background:var(--ink);text-decoration:none;color:#fff;isolation:isolate}
.obra .tarjeta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .6s}
.obra .tarjeta::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,16,.55),rgba(10,15,16,0) 45%);opacity:.9;transition:opacity .5s}
.obra .tarjeta .rotulo{position:absolute;left:2em;right:2em;bottom:2em;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;transform:translateY(1em);transition:transform .6s}
.obra .tarjeta .rotulo b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(.95rem,1.2vw,1.2rem);letter-spacing:.02em}
.obra .tarjeta .rotulo small{display:block;margin-top:.3em;font-family:var(--body);font-size:.8rem;letter-spacing:.03em;opacity:.8}
.obra .tarjeta .rotulo .ir{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;font-size:1rem;transition:background .4s,color .4s,transform .6s var(--ease)}
@media (hover:hover){.obra .tarjeta:hover img{transform:scale(1)}.obra .tarjeta:hover .rotulo{transform:none}.obra .tarjeta:hover .ir{background:#fff;color:var(--ink);transform:rotate(-45deg)}}
.obra .tarjeta{opacity:0;translate:0 24px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.obra .tarjeta.visto{opacity:1;translate:none}
@media (max-width:991px){.obra .riel{grid-column:1 / 13;position:static;flex-direction:row;align-items:center;gap:1.4rem;margin-bottom:1.6rem}.obra .pila{grid-column:1 / 13;gap:var(--gut)}.obra .tarjeta{border-radius:10px}.obra .tarjeta .rotulo{left:20px;right:20px;bottom:20px;transform:none}.obra .tarjeta img{transform:none}}
@media (max-width:767px){.obra .pila{grid-template-columns:1fr}.obra .pila > :nth-child(even){margin-top:0}}
@media (prefers-reduced-motion:reduce){.obra .tarjeta{transition:none;opacity:1;translate:none}}

/* ===== SECTION 5 · the field (read from the reference: perspective 4000, items z −6000…−100, rotX −65…−25,
   container scale 1→.8 and z 0→6500, items spread ±150% x / ±300% y, inner scale 2→1, labels 1.2em→.7em) ===== */
.campo{position:relative;height:143vh}
.campo .fijo{position:sticky;top:0;height:100vh;overflow:hidden}
.campo .malla-w{position:absolute;left:50%;top:50%;translate:-50% -50%;width:44vw;perspective:4000px}
.campo .malla{display:grid;grid-template-columns:repeat(8,1fr);gap:.45vw;transform-style:preserve-3d;will-change:transform}
.campo .tile{position:relative;aspect-ratio:14 / 9;border-radius:.625em;overflow:hidden;transform-origin:50% 0;will-change:transform,opacity;backface-visibility:hidden}
.campo .tile-in{width:100%;height:100%;border-radius:.625em;overflow:hidden;background:#d9d8d2;will-change:transform}
.campo .tile img,.campo .tile video{display:block;width:100%;height:100%;object-fit:cover}
.campo .tile.txt{background:none;display:grid;place-items:center;overflow:visible}
.campo .tile.txt span{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:.7em;line-height:1.2;text-align:center;color:var(--ink);white-space:nowrap}
.campo .titulo{position:absolute;left:var(--pad);bottom:8vh;z-index:0;margin:0;max-width:60vw;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:5.6vw;line-height:1;color:var(--ink)}
.campo .titulo .pw{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .02em;margin:-.04em 0 -.02em}
.campo .titulo .pw > span{display:inline-block;will-change:transform,opacity}
.campo .titulo i{font-family:var(--accent);font-style:italic;font-weight:400;font-size:1.18em;line-height:.9}
.campo .lado{position:absolute;right:var(--pad);top:50%;translate:0 -50%;z-index:0;margin:0;text-align:right;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:5.6vw;line-height:1;color:var(--ink);opacity:0;transition:opacity .6s}
.campo.lejos .lado{opacity:1}
@media (max-width:991px){.campo .malla-w{width:70vw}.campo .titulo{font-size:7.5vw;max-width:80vw}.campo .lado{display:none}}
@media (max-width:767px){.campo{height:130vh}.campo .malla-w{width:92vw}.campo .titulo{font-size:max(9vw,32px);bottom:6vh}}

/* ===== SECTION 6 · services (the reference's award-list shape: sticky 2-col rail, rows at cols 3→13,
   index 11.67px, title 35px/1.4 uppercase weight 400, sub-column right, 31px row padding, difference-blended) ===== */
.serv{position:relative;min-height:90svh;padding:12vh var(--pad) 14vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.serv .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.9rem;color:var(--bone);mix-blend-mode:difference}
.serv .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.serv .riel .btn-pill{color:var(--bone);border-color:rgba(242,241,236,.6);align-self:flex-start}
.serv .riel p{margin:0;font-family:var(--body);font-size:.92rem;line-height:1.55;max-width:22ch;opacity:.75}
.serv .lista{grid-column:3 / 13;margin:0;padding:0;list-style:none}
.serv .fila{display:grid;grid-template-columns:8.5vw 1fr minmax(12vw,28vw);column-gap:var(--gut);align-items:start;padding:0 0 2.1vw;margin:0 0 2.1vw;color:var(--bone);mix-blend-mode:difference;position:relative}
.serv .fila::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.22}
.serv .fila .idx{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.79rem;letter-spacing:.06em;padding-top:.6vw}
.serv .fila h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.38vw;line-height:1.4;letter-spacing:0}
.serv .fila .tags{display:flex;flex-wrap:wrap;gap:.4em 1.4em;margin-top:.5vw;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.79rem;letter-spacing:.06em;opacity:.8}
.serv .fila .tags i{font-style:normal;margin-right:.45em;opacity:.9}
.serv .fila .tags b{font-weight:400}
.serv .fila .desc{margin:0;font-family:var(--body);font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.5;padding-top:.7vw;opacity:.85}
.serv .fila{opacity:0;translate:0 18px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:calc(var(--k,0) * 70ms)}
.serv.visto .fila{opacity:1;translate:none}
@media (max-width:991px){.serv{min-height:0}.serv .riel{grid-column:1 / 13;position:static;margin-bottom:2rem}.serv .lista{grid-column:1 / 13}.serv .fila{grid-template-columns:3rem 1fr;row-gap:.6rem}.serv .fila .desc{grid-column:2}.serv .fila h3{font-size:clamp(1.5rem,4vw,2.2rem)}}
@media (max-width:479px){.serv .fila{grid-template-columns:2.4rem 1fr;padding-bottom:1.2rem;margin-bottom:1.2rem}}
@media (prefers-reduced-motion:reduce){.serv .fila{transition:none;opacity:1;translate:none}}

/* ===== SECTION 7 · the dark room (read from the reference: 300vh track, sticky 100vh overlay, a 20em square that
   rotates in 0→45°, then rotates 180° and scales ×29 to fill the screen; one line of uppercase type slides 50vw→0,
   words split up/down on exit, the whole scene scales to .9 with a hairline ring) ===== */
.cuarto{position:relative;min-height:300vh}
.cuarto .fijo{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;will-change:transform;transform-origin:50% 50%}
.cuarto .gira{width:20em;height:20em;will-change:transform}
.cuarto .cubo{width:100%;height:100%;border-radius:12%;background:var(--ink);transform:scale(0);will-change:transform}
.cuarto .texto-w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cuarto .texto{overflow:hidden;white-space:nowrap;will-change:transform;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:3.17vw;line-height:1;color:var(--bone);mix-blend-mode:difference}
.cuarto .texto .pw{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .04em;margin:-.06em 0 -.04em}
.cuarto .texto .pw > span{display:inline-block;will-change:transform}
.cuarto .texto i{font-family:var(--accent);font-style:italic;font-weight:400;font-size:1.18em;line-height:.9}
@media (max-width:991px){.cuarto{min-height:220vh}.cuarto .gira{width:14em;height:14em}.cuarto .texto{font-size:4.6vw;white-space:normal;text-align:center;padding:0 var(--pad)}}
@media (max-width:767px){.cuarto .texto{font-size:max(6.4vw,24px)}}

/* the bar is difference-blended like the reference HUD: dark on bone, light over the dark room */
.bar{mix-blend-mode:difference;color:var(--bone)}
.bar .logo,.bar .link,.bar .btn-pill,.bar .lang a{color:var(--bone)}
.bar .btn-pill{border-color:rgba(242,241,236,.5)}
.bar .lang{border-color:rgba(242,241,236,.4)!important}
.bar .link:hover{color:var(--mint)}
.bar .lang a{opacity:.55}.bar .lang a[aria-current]{opacity:1}

/* ===== SECTION 8 · the footer as a second hero (measured: 0.75vh, four uppercase lines at 105px on 1470 = 7.14vw,
   ground-coloured and difference-blended; large outlined 'Get in touch →' at 24.9px; sitemap column at col 8) ===== */
.pie{position:relative;min-height:75vh;padding:8vh var(--pad) 3vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-content:space-between;row-gap:6vh}
.pie .grito{grid-column:1 / 8;margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:7.14vw;line-height:1;letter-spacing:0;color:var(--bone);mix-blend-mode:difference}
.pie .grito .ln{display:block;overflow:hidden;padding:.05em 0 .03em;margin:-.05em 0 -.03em}
.pie .grito .ln > span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(var(--k,0) * 90ms)}
.pie.visto .grito .ln > span{transform:none}
.pie .grito i{font-family:var(--accent);font-style:italic;font-weight:400;font-size:1.18em;line-height:.9}
.pie .cta{grid-column:5 / 8;justify-self:start;align-self:end;display:inline-flex;align-items:center;gap:.8em;padding:.9em 1.6em;border:1px solid currentColor;border-radius:999px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.69vw;letter-spacing:.02em;text-decoration:none;color:var(--bone);mix-blend-mode:difference;transition:background .4s,color .4s}
.pie .cta:hover{background:var(--bone);color:var(--ink)}
.pie .col{grid-row:1 / 3;display:flex;flex-direction:column;gap:.9rem;color:var(--bone);mix-blend-mode:difference}
.pie .col.mapa{grid-column:8 / 10}.pie .col.blog{grid-column:10 / 13}
.pie .col h2{margin:0 0 .6rem;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.97rem;letter-spacing:.06em}
.pie .col a{display:inline-flex;align-items:baseline;gap:.5em;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.97rem;letter-spacing:.02em;text-decoration:none;color:inherit;overflow:hidden;line-height:1.3}
.pie .col a::after{content:'→';transition:transform .35s}
.pie .col a:hover::after{transform:translateX(4px)}
.pie .col.blog a{text-transform:none;font-family:var(--body);font-size:.95rem;letter-spacing:0;line-height:1.4}
.pie .legal{grid-column:1 / 13;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding:2rem 6rem 0 0;border-top:1px solid var(--line);font-family:var(--body);font-size:.78rem;color:var(--muted)}
.pie .legal a{color:inherit;text-decoration:none}
.pie .legal a:hover{color:var(--ink)}
@media (max-width:991px){.pie{min-height:0;row-gap:4vh}.pie .grito{grid-column:1 / 13;font-size:9.5vw}.pie .cta{grid-column:1 / 13;font-size:1.1rem}.pie .col{grid-row:auto}.pie .col.mapa{grid-column:1 / 6}.pie .col.blog{grid-column:6 / 13}}
@media (max-width:479px){.pie .grito{font-size:max(11vw,36px)}.pie .col.mapa,.pie .col.blog{grid-column:1 / 13}}
@media (prefers-reduced-motion:reduce){.pie .grito .ln > span{transition:none;transform:none}}

/* ===== mobile & tablet, as the reference does it: the orb belongs to the hero only (absolute, not fixed),
   and the 3D field is not shown under 992px ===== */
@media (max-width:991px){
  .orb-w{position:absolute;top:0;left:0;right:0;height:100svh;bottom:auto}
  .campo{display:none}
  .cuarto .texto{transform:none!important;white-space:normal;max-width:90vw}
}

/* ======================================================================
   INNER PAGES — services, work, blog, contact — built from the same parts
   ====================================================================== */
/* the page opening: the statement grid, with room for the bar */
.portada{position:relative;min-height:62svh;padding:calc(90px + 6vh) var(--pad) 8vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:3vh;align-content:end}
.portada .t-eyebrow-line{grid-column:3 / 13;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em;color:var(--bone);mix-blend-mode:difference}
.portada .frase{grid-column:3 / 13;margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:7.1vw;line-height:1;letter-spacing:0;color:var(--bone);mix-blend-mode:difference}
.portada .frase i{font-family:var(--accent);font-style:italic;font-weight:400;font-size:1.18em;line-height:.9}
.portada .lede{grid-column:5 / 9;margin:.5vh 0 0;font-family:var(--body);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;color:var(--bone);mix-blend-mode:difference}
@media (max-width:991px){.portada .t-eyebrow-line,.portada .frase{grid-column:1 / 13}.portada .lede{grid-column:1 / 11}}
@media (max-width:767px){.portada{min-height:0;padding-top:calc(80px + 4vh)}.portada .frase{font-size:max(11vw,40px)}.portada .lede{grid-column:1 / 13}}

/* services page: the rows link out, description column carries a "see the service" link */
.serv.pagina .fila h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.38vw;line-height:1.4;letter-spacing:0}
.serv.pagina .fila h2 a{color:inherit;text-decoration:none}
.serv.pagina .fila h2 a:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
.serv.pagina .fila .mas{display:inline-block;margin-top:.8em;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.79rem;letter-spacing:.06em;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.2em}
@media (max-width:991px){.serv.pagina .fila h2{font-size:clamp(1.5rem,4vw,2.2rem)}}

/* the standards: bordered cells like the client wall, text inside */
.norma{position:relative;padding:8vh var(--pad) 10vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.norma .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.7rem}
.norma .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.norma .riel p{margin:0;font-family:var(--body);font-size:.9rem;line-height:1.5;color:var(--muted);max-width:22ch}
.norma .muro{grid-column:3 / 13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.norma .celda{position:relative;padding:2.2vw 2vw 2.6vw;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:14vw;opacity:0;translate:0 10px;transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:calc(var(--k,0) * 60ms)}
.norma.visto .celda{opacity:1;translate:none}
.norma .celda::before,.norma .celda::after{content:"+";position:absolute;font-family:var(--body);font-size:.9rem;line-height:1;color:var(--ink);opacity:.55;width:.6em;height:.6em;display:grid;place-items:center}
.norma .celda::before{left:-.32em;top:-.3em}.norma .celda::after{right:-.3em;bottom:-.3em}
.norma .celda h3{margin:0 0 .6em;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.15rem;letter-spacing:.01em}
.norma .celda p{margin:0;font-family:var(--body);font-size:.95rem;line-height:1.55;color:var(--muted)}
@media (max-width:991px){.norma .riel{grid-column:1 / 13;position:static;margin-bottom:1.4rem}.norma .muro{grid-column:1 / 13;grid-template-columns:1fr 1fr}.norma .celda{min-height:0;padding:1.4rem}}
@media (max-width:479px){.norma .muro{grid-template-columns:1fr}}

/* industries: a quiet row of links */
.ramo{padding:2vh var(--pad) 12vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:1.2rem}
.ramo .t-eyebrow-line{grid-column:1 / 3;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.ramo .lista-ramo{grid-column:3 / 13;display:flex;flex-wrap:wrap;gap:.8rem 2.2rem}
.ramo .lista-ramo a{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.25em;transition:border-color .3s}
.ramo .lista-ramo a:hover{border-color:var(--ink)}
@media (max-width:991px){.ramo .t-eyebrow-line,.ramo .lista-ramo{grid-column:1 / 13}}

/* work page: the index — two square columns from col 3, no stagger (their /our-work) */
.obra.pagina{padding:4vh var(--pad) 14vh}
.obra.pagina .riel{grid-column:1 / 3}
.obra.pagina .pila{grid-column:3 / 13}
.obra.pagina .pila > :nth-child(even){margin-top:0}
.obra .tarjeta .rotulo small.tags{opacity:.65;font-size:.72rem;margin-top:.45em}
@media (max-width:991px){.obra.pagina .riel,.obra.pagina .pila{grid-column:1 / 13}}

/* blog: the journal index */
.diario{position:relative;padding:4vh var(--pad) 8vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.diario .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:1rem}
.diario .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.diario .riel .n{font-family:var(--body);font-size:.8rem;color:var(--muted);line-height:1.5}
.diario .chips{display:flex;flex-wrap:wrap;gap:.4rem}
.diario .chip{appearance:none;background:none;border:1px solid var(--line);border-radius:999px;padding:.45em .9em;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;color:var(--ink);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.diario .chip:hover{border-color:var(--ink)}
.diario .chip[aria-pressed="true"]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.diario .lista{grid-column:3 / 13;display:flex;flex-direction:column}
.diario .post{display:grid;grid-template-columns:4vw 9vw 1fr 5vw;column-gap:var(--gut);align-items:start;padding:2.1vw 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;position:relative;opacity:0;translate:0 12px;transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:calc(var(--k,0) * 60ms)}
.diario.visto .post{opacity:1;translate:none}
.diario .post:last-child{border-bottom:1px solid var(--line)}
.diario .post .idx,.diario .post .cat,.diario .post .min{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.79rem;letter-spacing:.06em;padding-top:.55em;color:var(--muted)}
.diario .post .min{text-align:right}
.diario .post .tit{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.1vw;line-height:1.2;letter-spacing:0;overflow:hidden;position:relative}
.diario .post .tit .rd{display:block;position:relative;height:1.2em;overflow:hidden}
.diario .post .tit .rd i{display:block;font-style:normal;transition:transform .6s var(--ease-io);white-space:normal}
.diario .post .tit .rd i:last-child{position:absolute;left:0;top:100%;color:var(--teal-deep)}
@media (hover:hover){.diario .post:hover .tit .rd i{transform:translateY(-100%)}}
.diario .post .blurb{grid-column:3;font-family:var(--body);font-size:.95rem;line-height:1.5;color:var(--muted);max-width:60ch;margin-top:.4em}
.diario .post.destacado .tit{font-size:3.2vw;line-height:1.05}
.diario .post.destacado .tit .rd{height:2.2em}
.diario .post.destacado::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--ink)}
.diario .vacio{grid-column:3 / 13;font-family:var(--body);color:var(--muted)}
.aviso{padding:6vh var(--pad) 14vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:1.6rem}
.aviso .frase{grid-column:3 / 10;margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.4vw;line-height:1.2}
.aviso .btn{grid-column:3 / 6;justify-self:start}
@media (max-width:991px){.diario .riel{grid-column:1 / 13;position:static;margin-bottom:1.4rem}.diario .lista{grid-column:1 / 13}.diario .post{grid-template-columns:2.6rem 1fr 3rem;padding:1.2rem 0}.diario .post .cat{grid-column:2}.diario .post .tit{grid-column:2;font-size:clamp(1.25rem,3.4vw,1.9rem)}.diario .post .blurb{grid-column:2}.diario .post .min{grid-column:3;grid-row:1}.diario .post.destacado .tit{font-size:clamp(1.5rem,5vw,2.6rem)}.diario .post.destacado .tit .rd{height:2.2em}.aviso .frase,.aviso .btn{grid-column:1 / 13}.aviso .frase{font-size:clamp(1.3rem,4vw,2rem)}}

/* contact: the form in the system */
.charla{position:relative;padding:2vh var(--pad) 10vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.charla .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.8rem}
.charla .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.charla .riel .mail{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.2em;word-break:break-all}
.charla .riel p{margin:0;font-family:var(--body);font-size:.9rem;line-height:1.5;color:var(--muted);max-width:22ch}
.forma{grid-column:3 / 11;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);row-gap:2.4rem;margin:0}
.forma .bloque{display:flex;flex-direction:column;gap:.7rem;margin:0;padding:0;border:0;min-width:0;opacity:0;translate:0 12px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.forma.visto .bloque,.forma.visto .enviar{opacity:1;translate:none}
.forma .bloque.ancho{grid-column:1 / -1}
.forma label,.forma legend{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.79rem;letter-spacing:.06em;padding:0}
.forma .ayuda{margin:-.3rem 0 0;font-family:var(--body);font-size:.85rem;color:var(--muted)}
.forma input[type=text],.forma input[type=email],.forma input[type=url],.forma input[type=date],.forma textarea{width:100%;box-sizing:border-box;appearance:none;background:none;border:0;border-bottom:1px solid rgba(10,15,16,.35);border-radius:0;padding:.6em 0;font-family:var(--body);font-size:1.05rem;color:var(--ink);transition:border-color .3s}
.forma textarea{resize:vertical;min-height:5.5em}
.forma input:focus,.forma textarea:focus{outline:none;border-bottom-color:var(--ink)}
.forma input::placeholder,.forma textarea::placeholder{color:rgba(10,15,16,.38)}
.forma .invalid{border-bottom-color:var(--coral)}
.forma .pills{display:flex;flex-wrap:wrap;gap:.5rem}
.forma .pill{position:relative;display:inline-flex;align-items:center;border:1px solid rgba(10,15,16,.3);border-radius:999px;padding:.55em 1.1em;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.76rem;letter-spacing:.06em;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.forma .pill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.forma .pill:hover{border-color:var(--ink)}
.forma .pill:has(input:checked){background:var(--ink);color:var(--bone);border-color:var(--ink)}
.forma .pill:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.forma .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.forma .enviar{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;opacity:0;transition:opacity .7s var(--ease) .3s}
.forma .btn.grande{font-size:1rem;padding:1.1em 2em}
.forma .o{font-family:var(--body);font-size:.9rem;color:var(--muted)}
.forma .ok,.forma .err{grid-column:1 / -1;margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.4rem;letter-spacing:.01em}
.forma .err{color:var(--coral)}
@media (max-width:991px){.charla .riel{grid-column:1 / 13;position:static;margin-bottom:2rem}.forma{grid-column:1 / 13}}
@media (max-width:599px){.forma{grid-template-columns:1fr}}

/* steps + FAQ: the list shape again */
.pasos,.dudas{position:relative;padding:6vh var(--pad) 8vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.pasos .riel,.dudas .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.6rem}
.pasos .riel h2,.dudas .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.pasos .riel p,.dudas .riel p{margin:0;font-family:var(--body);font-size:.9rem;color:var(--muted)}
.pasos .lista{grid-column:3 / 13;margin:0;padding:0;list-style:none}
.pasos li{display:grid;grid-template-columns:8.5vw 1fr;column-gap:var(--gut);padding:1.6vw 0;border-top:1px solid var(--line)}
.pasos li:last-child{border-bottom:1px solid var(--line)}
.pasos .idx{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.79rem;letter-spacing:.06em;padding-top:.5em;color:var(--muted)}
.pasos h3{margin:0 0 .4em;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.6vw;line-height:1.3}
.pasos p{margin:0;font-family:var(--body);font-size:.95rem;line-height:1.5;color:var(--muted);max-width:60ch}
.dudas .lista{grid-column:3 / 13}
.dudas details{border-top:1px solid var(--line)}
.dudas details:last-child{border-bottom:1px solid var(--line)}
.dudas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4vw 0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.6vw;line-height:1.3}
.dudas summary::-webkit-details-marker{display:none}
.dudas summary::after{content:"+";font-family:var(--body);font-size:1.4rem;transition:transform .4s var(--ease)}
.dudas details[open] summary::after{transform:rotate(45deg)}
.dudas details p{margin:0 0 1.6vw;font-family:var(--body);font-size:.98rem;line-height:1.55;color:var(--muted);max-width:64ch}
@media (max-width:991px){.pasos .riel,.dudas .riel{grid-column:1 / 13;position:static;margin-bottom:1.2rem}.pasos .lista,.dudas .lista{grid-column:1 / 13}.pasos li{grid-template-columns:3rem 1fr;padding:1rem 0}.pasos h3,.dudas summary{font-size:clamp(1.1rem,3vw,1.5rem)}.dudas summary{padding:1rem 0}}

@media (max-width:991px){.serv.pagina .fila > div:last-child{grid-column:2}}
/* blog titles: no fixed-height roll, a colour shift instead */
.diario .post .tit .rd{height:auto;overflow:visible}
.diario .post .tit .rd i:last-child{display:none}
.diario .post .tit .rd i{transition:color .4s}
@media (hover:hover){.diario .post:hover .tit .rd i{transform:none;color:var(--teal-deep)}}
.diario .post.destacado .tit .rd{height:auto}
.aviso .frase{overflow-wrap:anywhere}

/* ===== the loader, second version: the logo film on the first visit of a session, an ink curtain after that ===== */
.loader{background:var(--ink)}
.loader .marca{display:none}
.loader .lvid{width:min(46vw,440px);max-height:70vh;height:auto;object-fit:contain;display:none;opacity:0;transition:opacity .35s}
.loader.film{background:#000}
.loader.film .lvid{display:block}
.loader.film.lista .lvid{opacity:1}
@media (max-width:900px){.loader .lvid{width:min(74vw,360px)}}
html.listo .loader .lvid{opacity:0}
/* leaving a page: an ink curtain rises from the bottom, then the next page's loader lifts away */
.tapa{position:fixed;inset:0;z-index:199;background:var(--ink);translate:0 101%;pointer-events:none;transition:translate .55s var(--ease-io)}
html.saliendo .tapa{translate:0 0}

/* ===== the cursor: a pixel arrow with eyes (from the studio film), following the pointer on fine-pointer devices ===== */
.cur{position:fixed;left:0;top:0;z-index:300;width:30px;height:47px;pointer-events:none;translate:-2px -1px;opacity:0;transition:opacity .3s;will-change:transform}
.cur svg{display:block;width:100%;height:100%;transition:transform .35s var(--ease)}
html.cur-on .cur{opacity:1}
html.cur-on,html.cur-on a,html.cur-on button,html.cur-on label,html.cur-on input,html.cur-on textarea,html.cur-on summary{cursor:none!important}
html.cur-on .cur.sobre svg{transform:scale(1.35) rotate(-12deg)}
html.cur-on .cur.abajo svg{transform:scale(.85)}
.cur .ojo{transform-origin:center;animation:parpadeo 5.5s infinite}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@media (hover:none),(pointer:coarse){.cur{display:none}}
@media (prefers-reduced-motion:reduce){.tapa{transition:none}.cur .ojo{animation:none}}

/* blog: the pictures — a floating one that follows the pointer along the index on desktop, an inline one on touch;
   the featured post carries its picture as a full-width plate */
.diario .post .foto{display:none}
.diario .flota{position:fixed;left:0;top:0;z-index:5;width:22vw;aspect-ratio:16 / 9;border-radius:.625em;overflow:hidden;pointer-events:none;opacity:0;scale:.9;transition:opacity .35s,scale .5s var(--ease);will-change:transform}
.diario .flota.on{opacity:1;scale:1}
.diario .flota img{width:100%;height:100%;object-fit:cover;display:block}
.diario .post.destacado{grid-template-columns:4vw 9vw 1fr 5vw;grid-template-rows:auto auto auto}
.diario .post.destacado .foto{display:block;grid-column:1 / -1;grid-row:1;margin-bottom:2vw;aspect-ratio:21 / 9;border-radius:.625em;overflow:hidden;background:#d9d8d2}
.diario .post.destacado .foto img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.diario .post.destacado:hover .foto img{transform:scale(1)}
.diario .post.destacado .idx,.diario .post.destacado .cat,.diario .post.destacado .tit,.diario .post.destacado .min{grid-row:2}
.diario .post.destacado .blurb{grid-row:3}
@media (hover:none),(pointer:coarse),(max-width:991px){
  .diario .flota{display:none}
  .diario .post .foto{display:block;grid-column:2 / -1;aspect-ratio:16 / 9;border-radius:.5em;overflow:hidden;margin-top:.8rem}
  .diario .post .foto img{width:100%;height:100%;object-fit:cover;display:block}
  .diario .post.destacado{grid-template-columns:2.6rem 1fr 3rem;grid-template-rows:auto}
  .diario .post.destacado .foto{grid-column:1 / -1;grid-row:auto;aspect-ratio:16 / 9;margin:0 0 1rem}
  .diario .post.destacado .idx,.diario .post.destacado .cat,.diario .post.destacado .tit,.diario .post.destacado .min,.diario .post.destacado .blurb{grid-row:auto}
}

/* ===== clubs: the dark page ===== */
.pg-clubs{color:var(--bone);--line:rgba(242,241,236,.16);--muted:#a9b1af}
html:has(.pg-clubs){background:var(--ink)}
.pg-clubs .portada .frase,.pg-clubs .portada .t-eyebrow-line,.pg-clubs .portada .lede{color:var(--bone);mix-blend-mode:difference}
.pg-clubs .acto-portada{grid-column:5 / 13;display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;font-family:var(--body);font-size:.95rem;color:var(--muted)}
.pg-clubs .btn-pill{color:var(--bone);border-color:rgba(242,241,236,.5)}
.pg-clubs .btn-pill:hover{background:var(--bone);color:var(--ink)}
.pg-clubs .pie .legal,.pg-clubs .pie .legal a:hover{color:var(--muted)}
.pg-clubs .norma .celda::before,.pg-clubs .norma .celda::after{color:var(--bone)}
.pg-clubs .norma .celda p,.pg-clubs .pasos p,.pg-clubs .pasos .idx,.pg-clubs .riel p{color:var(--muted)}
.prueba{position:relative;padding:4vh var(--pad) 10vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:3rem;align-items:start}
.prueba .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.6rem}
.prueba .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.prueba .riel p{margin:0;font-family:var(--body);font-size:.9rem}
.prueba .pantalla{grid-column:3 / 9;position:relative;display:block;aspect-ratio:1;border-radius:.625em;overflow:hidden;background:#111;color:#fff;text-decoration:none;isolation:isolate}
.prueba .pantalla video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .6s}
.prueba .pantalla:hover video{transform:scale(1)}
.prueba .pantalla::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,16,.6),rgba(10,15,16,0) 45%)}
.prueba .pantalla .rotulo{position:absolute;left:2em;right:2em;bottom:2em;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.prueba .pantalla .rotulo b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.2rem}
.prueba .pantalla .rotulo small{display:block;margin-top:.3em;font-family:var(--body);font-size:.8rem;opacity:.8}
.prueba .pantalla .ir{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;transition:background .4s,color .4s,transform .6s var(--ease)}
.prueba .pantalla:hover .ir{background:#fff;color:var(--ink);transform:rotate(-45deg)}
.prueba .texto{grid-column:9 / 13;display:flex;flex-direction:column;gap:2rem;font-family:var(--body);font-size:1rem;line-height:1.6}
.prueba .texto p{margin:0;color:var(--muted)}
.prueba .cifras{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
.prueba .cifras div{border-top:1px solid var(--line);padding-top:.8rem}
.prueba .cifras dt{font-family:var(--display);font-weight:400;font-size:2.2rem;line-height:1;text-transform:uppercase}
.prueba .cifras dt small{font-size:.5em;letter-spacing:.06em}
.prueba .cifras dd{margin:.4rem 0 0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.niveles{position:relative;padding:6vh var(--pad) 8vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:2.4rem;align-items:start}
.niveles .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.6rem}
.niveles .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.niveles .riel p{margin:0;font-family:var(--body);font-size:.9rem;max-width:22ch}
.niveles .rack{grid-column:3 / 13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.niveles .nivel{position:relative;padding:2vw 1.8vw 2.4vw;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:1rem;opacity:0;translate:0 14px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:calc(var(--k,0) * 90ms)}
.niveles.visto .nivel{opacity:1;translate:none}
.niveles .nivel.popular{background:rgba(242,241,236,.04)}
.niveles .dorsal{font-family:var(--display);font-weight:400;font-size:6vw;line-height:.85;letter-spacing:-.02em;color:var(--bone);opacity:.12}
.niveles .tag{position:absolute;right:1.2vw;top:1.2vw;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;border:1px solid var(--mint);color:var(--mint);border-radius:999px;padding:.4em .9em}
.niveles .nivel h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.6vw;line-height:1.2}
.niveles .mejor{margin:0;font-family:var(--body);font-size:.95rem;color:var(--muted)}
.niveles ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55rem;font-family:var(--body);font-size:.92rem;line-height:1.4}
.niveles li{padding-left:1.2em;position:relative}
.niveles li::before{content:"●";position:absolute;left:0;top:.1em;font-size:.55em;color:var(--teal)}
.niveles .btn{align-self:flex-start;margin-top:auto}
.niveles .incluido{grid-column:3 / 13;margin:0;font-family:var(--body);font-size:.9rem;line-height:1.6;color:var(--muted);max-width:80ch}
.pasos .nota{grid-column:3 / 13;margin:2rem 0 0;font-family:var(--accent);font-style:italic;font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.4;max-width:60ch}
@media (max-width:991px){.pg-clubs .acto-portada{grid-column:1 / 13}.prueba .riel,.niveles .riel{grid-column:1 / 13;position:static}.prueba .pantalla{grid-column:1 / 13}.prueba .texto{grid-column:1 / 13}.niveles .rack{grid-column:1 / 13;grid-template-columns:1fr}.niveles .nivel{padding:1.6rem}.niveles .nivel h3{font-size:1.4rem}.niveles .dorsal{font-size:4rem}.niveles .tag{right:1rem;top:1rem}.niveles .incluido,.pasos .nota{grid-column:1 / 13}}

/* ===== about: the film stays as the opening ===== */
.pelicula{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--ink)}
.pelicula .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pelicula .palabra{position:relative;z-index:1;margin:0;font-family:var(--accent);font-weight:400;font-size:clamp(5rem,22vw,22rem);line-height:.9;color:var(--ink);letter-spacing:-.02em;text-shadow:0 2px 40px rgba(242,241,236,.35)}
.pelicula .palabra i{font-style:italic;color:var(--teal-deep)}
.pelicula .pista{position:absolute;left:var(--pad);bottom:1.6rem;z-index:1;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.79rem;letter-spacing:.06em;color:var(--bone);mix-blend-mode:difference}
.dice.pagina{min-height:0;padding:14vh var(--pad) 6vh}
.enfoque,.equipo{position:relative;padding:6vh var(--pad) 8vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.enfoque .riel,.equipo .riel{grid-column:1 / 3;position:sticky;top:110px;display:flex;flex-direction:column;gap:.6rem}
.enfoque .riel h2,.equipo .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.equipo .riel p{margin:0;font-family:var(--body);font-size:.9rem;color:var(--muted);max-width:22ch}
.enfoque .cuerpo{grid-column:3 / 11;display:flex;flex-direction:column;gap:1.4rem}
.enfoque h3{margin:0 0 .6rem;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.38vw;line-height:1.2}
.enfoque p{margin:0;font-family:var(--body);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--muted);max-width:62ch}
.equipo .cuerpo{grid-column:3 / 13;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);row-gap:2rem;align-items:start}
.equipo .foto{grid-column:1 / -1;margin:0;aspect-ratio:21 / 9;border-radius:.625em;overflow:hidden;background:#d9d8d2}
.equipo .foto img{width:100%;height:100%;object-fit:cover;display:block}
.equipo .lede{margin:0;font-family:var(--body);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--muted)}
.equipo .lede a{color:var(--ink)}
.equipo .roles{margin:0;padding:0;list-style:none}
.equipo .roles li{display:grid;grid-template-columns:3rem 1fr;column-gap:var(--gut);padding:1rem 0;border-top:1px solid var(--line)}
.equipo .roles li:last-child{border-bottom:1px solid var(--line)}
.equipo .roles .idx{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.79rem;letter-spacing:.06em;padding-top:.3em;color:var(--muted)}
.equipo .roles h3{margin:0 0 .3em;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.05rem}
.equipo .roles p{margin:0;font-family:var(--body);font-size:.92rem;color:var(--muted)}
@media (max-width:991px){.enfoque .riel,.equipo .riel{grid-column:1 / 13;position:static;margin-bottom:1rem}.enfoque .cuerpo,.equipo .cuerpo{grid-column:1 / 13}.enfoque h3{font-size:clamp(1.4rem,4vw,2rem)}.equipo .cuerpo{grid-template-columns:1fr}.pelicula .palabra{font-size:clamp(4.5rem,26vw,12rem)}}

/* ===== work: the index as on the reference — a giant two-line title, the grid full width right under it ===== */
.portada.gigante{min-height:0;padding-bottom:0;row-gap:1.5vh;align-content:start}
.portada.gigante .t-eyebrow-line{grid-column:2 / 13}
.portada.gigante .frase{grid-column:2 / 13;font-size:13vw;line-height:.92;letter-spacing:-.01em}
.portada.gigante .frase i{font-size:1.1em;line-height:.85}
.portada.gigante .lede{grid-column:7 / 12;margin-top:1vh}
.obra.pagina.gigante{padding-top:3vh;grid-template-columns:repeat(12,minmax(0,1fr))}
.obra.pagina.gigante .pila{grid-column:2 / 12}
@media (max-width:991px){.portada.gigante .t-eyebrow-line,.portada.gigante .frase{grid-column:1 / 13}.portada.gigante .frase{font-size:18vw}.portada.gigante .lede{grid-column:1 / 12}.obra.pagina.gigante .pila{grid-column:1 / 13}}
/* on the work index the sphere sits lower, behind the title, as on the reference's /our-work */
.pg-work .orb,.pg-work .orb-out{margin-top:25vh}

/* ===== pricing ===== */
.niveles .precio{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em .6em}
.niveles .precio b{font-family:var(--display);font-weight:400;font-size:1.9vw;letter-spacing:-.01em}
.niveles .precio span{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.niveles .precio small{flex-basis:100%;font-family:var(--body);font-size:.85rem;color:var(--muted)}
.niveles .incluido a{color:inherit}
.lista-precios .fila{grid-template-columns:8.5vw 1fr minmax(18vw,34vw)}
.lista-precios .lineas{display:flex;flex-direction:column;gap:.5rem;padding-top:.7vw}
.lista-precios .linea{display:grid;grid-template-columns:1fr auto;column-gap:1rem;font-family:var(--body);font-size:.92rem;line-height:1.4;border-bottom:1px solid var(--line);padding-bottom:.45rem}
.lista-precios .linea b{font-weight:500;text-align:right;white-space:nowrap}
.lista-precios .linea small{grid-column:2;text-align:right;color:var(--muted);opacity:.8;font-size:.78rem}
.motor{position:relative;padding:6vh var(--pad) 12vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.motor .riel{grid-column:1 / 3;position:sticky;top:110px}
.motor .riel h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em}
.motor .cuerpo{grid-column:3 / 11;display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.motor h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.38vw;line-height:1.2}
.motor .precio{margin:0;display:flex;flex-direction:column;gap:.2rem}
.motor .precio b{font-family:var(--display);font-weight:400;font-size:2.4vw;letter-spacing:-.01em}
.motor .precio small{font-family:var(--body);font-size:.9rem;color:var(--muted)}
.motor .nota{margin:0;font-family:var(--body);font-size:.95rem;line-height:1.55;color:var(--muted);max-width:62ch}
.pg-pricing .niveles .nivel.popular{background:rgba(10,15,16,.035)}
.pg-pricing .niveles .dorsal{color:var(--ink)}
@media (max-width:991px){.niveles .precio b{font-size:1.6rem}.lista-precios .fila{grid-template-columns:3rem 1fr}.lista-precios .fila > div:last-child{grid-column:2}.motor .riel{grid-column:1 / 13;position:static;margin-bottom:1rem}.motor .cuerpo{grid-column:1 / 13}.motor h3{font-size:clamp(1.3rem,4vw,2rem)}.motor .precio b{font-size:1.6rem}}

/* ===== clubs: every block of type is difference-blended so it stays readable when the sphere passes behind it ===== */
.pg-clubs{--muted:#cfd5d3}
.pg-clubs .prueba .riel,.pg-clubs .prueba .texto,.pg-clubs .niveles .riel,.pg-clubs .niveles .nivel,.pg-clubs .niveles .incluido,
.pg-clubs .norma .riel,.pg-clubs .norma .celda,.pg-clubs .pasos .riel,.pg-clubs .pasos li,.pg-clubs .pasos .nota,.pg-clubs .acto-portada{color:var(--bone);mix-blend-mode:difference}
.pg-clubs .niveles .nivel.popular{background:none}
.pg-clubs .niveles .tag{border-color:var(--bone);color:var(--bone)}
.pg-clubs .niveles li::before{color:var(--bone)}
.pg-clubs .niveles .dorsal{opacity:.22}
.pg-clubs .norma .muro,.pg-clubs .niveles .rack{border-color:rgba(242,241,236,.25)}
.pg-clubs .norma .celda,.pg-clubs .niveles .nivel{border-color:rgba(242,241,236,.25)}

/* ===== phones & tablets: nothing waits for an observer, the dark room is a plain dark section, the bar fits ===== */
@media (max-width:991px){
  /* every scroll-reveal is shown at rest on touch devices — no blank sections if an observer never fires */
  .dice .frase .pw > span,.dice .lede,.dice .acto,.fe .celda,.obra .tarjeta,.serv .fila,.pie .grito .ln > span,
  .norma .celda,.diario .post,.forma .bloque,.forma .enviar,.niveles .nivel{opacity:1;translate:none;transform:none;transition:none}
  /* the dark room: no pinned scene, no rotating square — an ink section with the line centred */
  .cuarto{min-height:0}
  .cuarto .fijo{position:relative;height:auto;min-height:90svh;background:var(--ink);transform:none!important;box-shadow:none!important;padding:16vh var(--pad)}
  .cuarto .gira{display:none}
  .cuarto .texto{mix-blend-mode:normal;color:var(--bone)}
  .cuarto .texto .pw > span{transform:none!important}
  /* the bar: wordmark, language, contact — the two text links live in the menu */
  .bar .link{display:none}
  .bar .menu{gap:.6rem}
  .bar .btn-pill{padding:.75em 1.1em;font-size:.74rem}
  .lang{padding:.45em .7em;font-size:.68rem;gap:.35em}
}
@media (max-width:479px){
  .bar{padding:.9rem var(--pad)}
  .bar .logo span{font-size:.8rem}
  .bar .btn-pill{padding:.7em .95em;font-size:.7rem}
}
@media (max-width:991px){
  /* the sphere on phones: smaller and up to the right of the opening, so the type stays readable */
  .orb,.orb-w.crecida .orb,.orb-out{width:64vw;height:64vw;min-width:0;min-height:0}
  .orb-w .orb,.orb-w .orb-out{translate:18vw -14vh}
}

/* ===== phones & tablets: no difference blending at all. iOS Safari drops the blend on these layers and the
   ground-coloured type vanishes into the ground — so on touch devices type is simply ink (bone on the dark pages). ===== */
@media (max-width:991px){
  .abre .ln,.abre .pista,.dice .frase,.dice .lede,.dice .acto,.portada .t-eyebrow-line,.portada .frase,.portada .lede,
  .serv .riel,.serv .fila,.serv .riel .btn-pill,.pie .grito,.pie .cta,.pie .col,.cuarto .texto,.pelicula .pista,.bar,
  .pg-clubs .portada .frase,.pg-clubs .portada .t-eyebrow-line,.pg-clubs .portada .lede,.pg-clubs .prueba .riel,.pg-clubs .prueba .texto,
  .pg-clubs .niveles .riel,.pg-clubs .niveles .nivel,.pg-clubs .niveles .incluido,.pg-clubs .norma .riel,.pg-clubs .norma .celda,
  .pg-clubs .pasos .riel,.pg-clubs .pasos li,.pg-clubs .pasos .nota,.pg-clubs .acto-portada{mix-blend-mode:normal!important;color:var(--ink)}
  .dice .lede,.portada .lede,.serv .fila .desc,.serv .riel p{color:var(--muted)}
  .dice .acto,.serv .riel .btn-pill,.pie .cta{color:var(--ink);border-color:rgba(10,15,16,.35)}
  .pie .cta:hover{background:var(--ink);color:var(--bone)}
  .bar .logo,.bar .link,.bar .btn-pill,.bar .lang a{color:var(--ink)}
  .bar .btn-pill{border-color:rgba(10,15,16,.35)}
  .bar .lang{border-color:var(--line)!important}
  /* dark pages keep bone type, with a dark bar ground so the bar reads over the film and the ink */
  .pg-clubs,.pg-clubs .portada .frase,.pg-clubs .portada .t-eyebrow-line,.pg-clubs .portada .lede,.pg-clubs .prueba .riel,.pg-clubs .prueba .texto,
  .pg-clubs .niveles .riel,.pg-clubs .niveles .nivel,.pg-clubs .niveles .incluido,.pg-clubs .norma .riel,.pg-clubs .norma .celda,
  .pg-clubs .pasos .riel,.pg-clubs .pasos li,.pg-clubs .pasos .nota,.pg-clubs .acto-portada,.pg-clubs .serv .fila,.pg-clubs .pie .grito,.pg-clubs .pie .col,.pg-clubs .pie .cta,
  .pg-clubs .bar .logo,.pg-clubs .bar .btn-pill,.pg-clubs .bar .lang a,.pg-about .bar .logo,.pg-about .bar .btn-pill,.pg-about .bar .lang a{color:var(--bone)}
  .pg-clubs .pie .cta,.pg-clubs .bar .btn-pill,.pg-about .bar .btn-pill{border-color:rgba(242,241,236,.5)}
  .pg-clubs .portada .lede,.pg-clubs .prueba .texto p,.pg-clubs .niveles .mejor,.pg-clubs .norma .celda p,.pg-clubs .pasos p{color:var(--muted)}
  .pg-about .bar{background:rgba(10,15,16,.35);backdrop-filter:blur(10px)}
  .pg-about .bar.pegada{background:rgba(242,241,236,.9)}
  .pg-about .bar.pegada .logo,.pg-about .bar.pegada .btn-pill,.pg-about .bar.pegada .lang a{color:var(--ink)}
  .cuarto .texto{color:var(--bone)!important}
}
@media (max-width:991px){.pg-clubs .orb-w .orb,.pg-clubs .orb-w .orb-out{translate:34vw -24vh;opacity:.85}}