/* Sistema de la marca (manual AdMonkey, enero 2025):
   - Titulares: línea en Sequel Sans Light en mayúsculas + palabra protagonista en KUBO, casi el doble de grande.
   - Números en KUBO. Etiquetas y HUD en Sequel Light en mayúsculas chicas. Manifiestos en VT323, mayúsculas y justificado.
   - Blanco + carbón #3D3D3D, cian #00DAFF y azul eléctrico #220EE9. Barra cromática fina como acento.
   - Paneles negros con grano sobre blanco; pantallas de frente, planas y centradas. */
@font-face { font-family: 'KUBO'; src: url(assets/brand/fonts/kubo.woff2) format('woff2'), url(assets/brand/fonts/KUBO.otf) format('opentype'); font-display: block; }
@font-face { font-family: 'Sequel'; src: url(assets/brand/fonts/sequel-300.woff2) format('woff2'), url(assets/brand/fonts/SequelSans-LightHead.ttf) format('truetype'); font-weight: 300; font-display: block; }
@font-face { font-family: 'Sequel'; src: url(assets/brand/fonts/sequel-500.woff2) format('woff2'), url(assets/brand/fonts/SEQUELSANS-MEDIUMHEAD.TTF) format('truetype'); font-weight: 400 500; font-display: block; }
@font-face { font-family: 'Sequel'; src: url(assets/brand/fonts/sequel-700.woff2) format('woff2'), url(assets/brand/fonts/SEQUELSANS-BOLDHEAD.TTF) format('truetype'); font-weight: 600 700; font-display: block; }
@font-face { font-family: 'Sequel Body'; src: url(assets/brand/fonts/sequel-body-300.woff2) format('woff2'), url(assets/brand/fonts/SequelSans-LightBody.ttf) format('truetype'); font-weight: 300; font-display: block; }
@font-face { font-family: 'VT323'; src: url(assets/brand/fonts/vt323.woff2) format('woff2'), url(assets/brand/fonts/VT323-Regular.ttf) format('truetype'); font-display: swap; }

:root {
  --bg: #0b0b0b; --panel: #141414; --char: #3d3d3d; --ink: #fff; --ink-2: rgba(255,255,255,.76); --ink-3: rgba(255,255,255,.52); --line: rgba(255,255,255,.18);
  --cyan: #00daff; --electric: #220ee9;
  --chroma: linear-gradient(90deg, #b64137, #9a22e3 25%, #220ee9 50%, #05a0fc 75%, #00daff);
  --n-tt: #00daff; --n-pv: #b260ff; --n-ba: #ff6040; --n-ut: #4676ff;
  --kubo: 'KUBO', 'VT323', monospace; --head: 'Sequel', 'Helvetica Neue', Arial, sans-serif; --body: 'Sequel Body', 'Sequel', 'Helvetica Neue', Arial, sans-serif; --vt: 'VT323', monospace;
  --ease: cubic-bezier(.16,1,.3,1); --hp: 0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.in-room { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.kubo { font-family: var(--kubo); font-weight: 400; letter-spacing: .01em; }
.pc { font-family: var(--head); font-weight: 300; font-size: .62em; margin-left: .04em; vertical-align: .32em; }

/* Etiqueta HUD */
.tag { font-family: var(--head); font-weight: 300; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
/* Titular de marca: Light + KUBO */
.hl { font-family: var(--head); font-weight: 300; text-transform: uppercase; line-height: 1.04; font-size: clamp(22px, 2.5vw, 38px); letter-spacing: .01em; }
.hl > span { display: block; }
.hl .k { display: block; font-family: var(--kubo); font-weight: 400; font-size: 2.05em; line-height: .86; margin: .06em 0 .1em; letter-spacing: .01em; }
.hl--dot > span:last-of-type::after { content: ''; display: inline-block; width: .42em; height: .42em; border-radius: 50%; background: currentColor; margin-left: .35em; vertical-align: .08em; }
.hl .dot, .dot { display: inline-block; width: .42em; height: .42em; border-radius: 50%; background: #fff; vertical-align: .1em; }
.grain { position: relative; isolation: isolate; }
.grain::after { content: ''; position: absolute; inset: 0; background: url(assets/tex-noise.jpg) center / cover; mix-blend-mode: screen; opacity: .22; pointer-events: none; z-index: 1; }
.ff { font-family: var(--head); font-size: 22px; letter-spacing: -.12em; color: var(--ink-3); }

#net { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; transition: opacity .6s, filter .6s; }
body.in-room #net { opacity: .3; filter: blur(2px); }
#labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transition: opacity .5s; will-change: transform; }
.lbl-node { pointer-events: auto; display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 10px; background: rgba(11,11,11,.75); border: 1px solid var(--line); font-family: var(--head); font-weight: 300; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: opacity .5s, border-color .3s, background .3s; }
.lbl-node b { font-weight: 300; letter-spacing: -.1em; color: var(--ink-3); transition: color .3s, transform .3s var(--ease); }
.lbl-node:not(.on) { pointer-events: none; }
.lbl-node:hover { border-color: #fff; background: #000; }
.lbl-node:hover b { color: #fff; transform: translateX(3px); }
.lbl i { width: 7px; height: 7px; background: var(--c); box-shadow: 0 0 10px var(--c); display: inline-block; }
.lbl-small, .lbl-seg { font-family: var(--head); font-weight: 300; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.lbl.on { opacity: 1; }
body.in-room #labels { opacity: 0; }

.chroma-bar { position: fixed; left: 40px; bottom: 26px; width: 150px; height: 3px; background: var(--chroma); filter: blur(.4px); z-index: 20; }
.hud-foot { position: fixed; right: 40px; bottom: 20px; z-index: 20; display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 300; font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.hud-foot img { height: 15px; width: auto; opacity: .7; }

/* Barra superior: logo · navegación · número de sección */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 36px; padding: 24px 40px; background: linear-gradient(180deg, rgba(11,11,11,.92), rgba(11,11,11,0)); }
.top-logo img { height: 28px; width: auto; display: block; }
.top-nav { display: flex; gap: 34px; margin: 0 auto; font-family: var(--head); font-weight: 300; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.top-nav a { transition: color .3s; }
.top-nav a:hover { color: #fff; }
.hud-num { font-family: var(--head); font-weight: 300; font-size: 12px; letter-spacing: .14em; color: var(--ink-2); min-width: 40px; }
.lang { display: flex; gap: 2px; }
.lang button { font-family: var(--head); font-weight: 300; font-size: 12px; letter-spacing: .12em; padding: 4px 8px; color: var(--ink-3); border: 1px solid transparent; }
.lang button.on { color: #fff; border-color: var(--line); }

main { position: relative; z-index: 2; pointer-events: none; }
main a, main button, .tour-step, .about-panel { pointer-events: auto; }

/* 0 · Inicio */
.scene { min-height: 100vh; padding: 0 40px; position: relative; }
.hero { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 11vh; overflow: hidden; }
.hero-tex { position: absolute; inset: 0; background: url(assets/tex-hero.jpg) center / cover; opacity: calc(.6 - var(--hp) * .55); mix-blend-mode: screen; z-index: -1; }
.hands { position: absolute; left: 50%; top: 24vh; width: 0; height: 0; --hw: min(27vw, 380px); --gap: 64px; }
.hand { position: absolute; width: var(--hw); height: auto; opacity: calc(1 - var(--hp) * 1.2); -webkit-mask-image: radial-gradient(120% 110% at 20% 10%, #000 55%, transparent 80%); mask-image: radial-gradient(120% 110% at 20% 10%, #000 55%, transparent 80%); }
.hand--human { left: calc(var(--gap) / -2 - var(--hw) * .796); top: calc(var(--hw) * -.034); transform: scaleX(-1) translateX(calc(var(--hp) * 40vw)); animation: reachL 6s ease-in-out infinite; }
.hand--robot { left: calc(var(--gap) / 2 - var(--hw) * .181); top: calc(var(--hw) * -.046); transform: translateX(calc(var(--hp) * 40vw)); animation: reachR 6s ease-in-out infinite; }
@keyframes reachL { 50% { margin-left: 10px; } }
@keyframes reachR { 50% { margin-left: -10px; } }
.spark { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; }
.hero-copy { position: relative; }
.hero-pre { font-family: var(--head); font-weight: 300; font-size: clamp(24px, 3.4vw, 54px); letter-spacing: .01em; line-height: 1; display: flex; align-items: center; gap: .4em; }
.globe { height: .62em; width: auto; opacity: .85; }
.hero h1 { font-size: clamp(64px, 13vw, 220px); line-height: .82; margin-top: .05em; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-top: 28px; }
.hero-sub { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 470px; }
.hint { font-family: var(--head); font-size: 12px; letter-spacing: .16em; color: var(--ink-3); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* Recorridos: red y servicios */
.tour { padding: 0 40px; }
.tour-head { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 900px; }
.tour-head .tag { margin-bottom: 26px; }
.tour-head .hl { font-size: clamp(22px, 2.6vw, 40px); text-shadow: 0 2px 30px rgba(11,11,11,.9); }
.lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 520px; margin-top: 30px; }
.tour-step { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 470px; opacity: .15; transition: opacity .6s var(--ease); }
.tour-step.on { opacity: 1; }
.tour-step .cat { font-family: var(--head); font-weight: 300; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--c, var(--cyan)); margin-bottom: 14px; }
.tour-step h3 { font-family: var(--head); font-weight: 300; font-size: clamp(36px, 4vw, 64px); line-height: .98; text-transform: uppercase; margin-bottom: 18px; }
.tour-step > p:not(.cat):not(.fmts) { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.tour-step dl { display: flex; flex-wrap: wrap; gap: 22px 36px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.tour-step dt { font-family: var(--kubo); font-size: 44px; line-height: 1; }
.tour-step dd { font-size: 13px; color: var(--ink-3); margin-top: 8px; max-width: 16ch; }
.enter { align-self: flex-start; margin-top: 30px; padding: 14px 22px; background: #fff; color: #111; font-family: var(--head); font-weight: 300; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; transition: transform .3s var(--ease), background .3s; }
.enter:hover { transform: translateX(6px); background: var(--cyan); }
.how { list-style: none; counter-reset: h; margin-top: 26px; border-top: 1px solid var(--line); }
.how li { counter-increment: h; display: grid; grid-template-columns: 38px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.how li::before { content: '> 0' counter(h); font-family: var(--head); font-size: 12px; letter-spacing: .08em; color: var(--cyan); padding-top: 3px; }
.fmts { margin-top: 24px; font-family: var(--vt); font-size: 19px; letter-spacing: .04em; color: var(--ink-2); line-height: 1.35; text-align: justify; }

/* Nosotros: panel blanco con imagen en panel negro, como el "About us" de la marca */
.about { display: flex; align-items: center; min-height: 100vh; padding-top: 12vh; padding-bottom: 12vh; }
.about-panel { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; width: 100%; background: #fff; color: var(--char); min-height: 74vh; }
.about-panel::after { content: ''; position: absolute; left: 56px; bottom: 34px; width: 170px; height: 3px; background: var(--chroma); }
.about-copy { padding: 64px 56px 80px; }
.about-copy .tag { color: var(--char); }
.hl--dark { color: var(--char); margin: 26px 0 26px; font-size: clamp(24px, 2.6vw, 42px); }
.about-sub { font-size: 17px; line-height: 1.6; color: #444; max-width: 520px; }
.manifesto { display: grid; grid-template-columns: 52px 1fr; gap: 10px; margin-top: 30px; max-width: 520px; }
.ast { font-size: 50px; line-height: .8; color: var(--char); }
.manifesto p { font-family: var(--vt); font-size: 18px; line-height: 1.12; letter-spacing: .06em; text-align: justify; color: var(--char); }
.team { list-style: none; display: flex; flex-wrap: wrap; gap: 36px; margin-top: 36px; }
.team b { display: block; font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--char); }
.team span { font-family: var(--head); font-weight: 300; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #777; }
.about-visual { position: relative; background: #111; overflow: hidden; margin: -28px -28px -28px 0; }
.about-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; filter: contrast(1.05); }
.about-visual .year { position: absolute; left: 30px; bottom: 26px; z-index: 2; font-size: clamp(70px, 8vw, 130px); line-height: .82; color: #fff; }
.about-visual .ff { position: absolute; right: 26px; top: 20px; z-index: 2; color: #fff; }

/* Contacto */
.contact { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding-bottom: 70px; }
.hl--center { font-size: clamp(18px, 2.2vw, 32px); }
.hl--center .k { font-size: 3.9em; }
.mails { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 36px 0 13vh; }
.mails a { padding: 15px 24px; border: 1px solid var(--line); background: rgba(11,11,11,.6); font-family: var(--head); font-weight: 300; font-size: 14px; letter-spacing: .06em; transition: background .3s, color .3s; }
.mails a:hover { background: #fff; color: #111; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; width: 100%; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 18px; font-family: var(--head); font-weight: 300; font-size: 11px; letter-spacing: .16em; }

/* Pantallas: de frente, planas, con corchetes de esquina (recurso de la marca) */
.scr { position: relative; flex: 0 0 auto; width: 236px; padding: 14px; scroll-snap-align: start;
  background:
    linear-gradient(#fff, #fff) left top / 18px 1px, linear-gradient(#fff, #fff) left top / 1px 18px,
    linear-gradient(#fff, #fff) right top / 18px 1px, linear-gradient(#fff, #fff) right top / 1px 18px,
    linear-gradient(#fff, #fff) left bottom / 18px 1px, linear-gradient(#fff, #fff) left bottom / 1px 18px,
    linear-gradient(#fff, #fff) right bottom / 18px 1px, linear-gradient(#fff, #fff) right bottom / 1px 18px;
  background-repeat: no-repeat; }
.scr-in { aspect-ratio: 9 / 19.5; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.scr-in img, .scr-in video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.scr figcaption { font-family: var(--head); font-weight: 300; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); line-height: 1.45; margin-top: 16px; padding: 0 2px; }

/* Adentro de cada medio */
.room { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.room.open { opacity: 1; pointer-events: auto; }
.room::before { content: ''; position: absolute; inset: 0; background: var(--bg); }
.room-close { position: fixed; top: 22px; right: 40px; z-index: 3; padding: 9px 14px; background: #111; border: 1px solid var(--line); font-family: var(--head); font-weight: 300; font-size: 12px; letter-spacing: .16em; }
.room-close:hover { background: #fff; color: #111; }
.room-close:focus { outline: none; }
.room-close:focus-visible, .enter:focus-visible, .lbl-node:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
.room-logo { position: fixed; top: 26px; left: 40px; z-index: 3; height: 26px; width: auto; mix-blend-mode: difference; }
body.at-end .hud-foot, body.at-end .chroma-bar { opacity: 0; }
.hud-foot, .chroma-bar { transition: opacity .4s; }
.room-body { position: relative; height: 100%; overflow-y: auto; padding: 0 0 80px; transform: translateY(40px); transition: transform .6s var(--ease); }
.room.open .room-body { transform: none; }
.rm-head { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 40px; background: #fff; color: var(--char); padding: 110px max(40px, calc(50vw - 600px)) 64px; }
.rm-head::after { content: ''; position: absolute; left: max(40px, calc(50vw - 600px)); bottom: 28px; width: 170px; height: 3px; background: var(--chroma); }
.rm-head .ff { position: absolute; right: max(40px, calc(50vw - 600px)); top: 110px; color: var(--char); }
.rm-cat { color: var(--char); }
.rm-logo { height: 56px; width: auto; margin: 22px 0 0; display: block; }
.rm-name { font-family: var(--head); font-weight: 300; font-size: clamp(44px, 6vw, 96px); line-height: .95; text-transform: uppercase; margin: 16px 0 20px; color: var(--char); }
.rm-lead { font-size: 18px; line-height: 1.6; color: #444; max-width: 640px; }
.rm-stats { display: flex; flex-wrap: wrap; gap: 26px 52px; margin-top: 38px; }
.rm-stats dt { font-size: clamp(38px, 4vw, 58px); line-height: 1; color: var(--char); }
.rm-stats dd { font-size: 13px; color: #666; margin-top: 8px; max-width: 18ch; }
.rm-cover { width: min(30vw, 340px); aspect-ratio: 3 / 4; object-fit: cover; align-self: end; }
.rm-sec { max-width: 1200px; margin: 0 auto; padding: 70px 40px 0; }
.rm-dark { max-width: none; background: var(--panel); padding: 70px max(40px, calc(50vw - 600px)) 60px; }
.rm-dark > * { position: relative; z-index: 2; }
.rm-label { margin-bottom: 26px; color: var(--ink-2); }
.rm-screens { display: flex; gap: 30px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.rm-cases { display: flex; flex-direction: column; gap: 70px; }
.rm-case { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 34px; border-top: 1px solid var(--line); }
.rm-case-media { display: flex; gap: 18px; }
.rm-case-media .scr { width: 220px; }
.rm-tag { color: var(--c); margin-bottom: 10px; }
.rm-case h3 { font-family: var(--head); font-weight: 300; font-size: clamp(34px, 3.8vw, 58px); line-height: 1; text-transform: uppercase; margin-bottom: 16px; }
.rm-case-copy > p:not(.tag):not(.rm-src) { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 560px; }
.rm-metrics { display: flex; flex-wrap: wrap; gap: 22px 44px; margin-top: 28px; }
.rm-metrics dt { font-size: clamp(36px, 3.6vw, 54px); line-height: 1; }
.rm-metrics dd { font-size: 13px; color: var(--ink-3); margin-top: 8px; max-width: 18ch; }
.rm-src { font-size: 12px; color: var(--ink-3); margin-top: 18px; }
.rm-head .rm-src { color: #777; }
.rm-cases--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.rm-cases--row .rm-case { grid-template-columns: 1fr; gap: 22px; align-items: start; }
.rm-cases--row .rm-case-media .scr { width: 100%; max-width: 250px; }
.rm-cases--row .rm-case h3 { font-size: 30px; }
.rm-cases--row .rm-metrics { gap: 14px 26px; }
.rm-cases--row .rm-metrics dt { font-size: 32px; }
.rm-formats { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-formats span { padding: 9px 14px; border: 1px solid var(--line); font-family: var(--head); font-weight: 300; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.rm-fdetail { list-style: none; border-top: 1px solid var(--line); }
.rm-fdetail li { display: grid; grid-template-columns: 1.2fr .8fr 1.6fr; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rm-fdetail b { font-family: var(--head); font-weight: 300; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.rm-fdetail span { font-size: 34px; line-height: 1; }
.rm-fdetail em { font-style: normal; font-size: 14px; color: var(--ink-3); }
.rm-logos { margin-top: 56px; }
.rm-logos div { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.rm-logos img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .75; }
.rm-first { padding-top: 80px; }
.rm-first .hl { font-size: clamp(20px, 2.2vw, 32px); }
.rm-first .hl .k { color: var(--c); }
.rm-first p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 560px; margin-top: 18px; }
.rm-cta { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .35em; max-width: 1120px; margin: 80px auto 0; padding: 30px; background: #fff; color: #111; font-family: var(--head); font-weight: 300; font-size: clamp(16px, 1.8vw, 24px); letter-spacing: .1em; text-transform: uppercase; transition: background .3s; }
.rm-cta b { font-weight: 400; font-size: 1.5em; letter-spacing: .02em; }
.rm-cta:hover { background: var(--cyan); }

@media (max-width: 900px) {
  .top { padding: 16px 20px; gap: 14px; background: rgba(11,11,11,.94); }
  .room-close { background: rgba(17,17,17,.9); }
  .top-nav, .hud-foot { display: none; }
  .hud-num { margin-left: auto; }
  .chroma-bar { left: 20px; bottom: 18px; }
  .scene, .tour { padding-left: 20px; padding-right: 20px; }
  .hands { top: 26vh; --hw: 44vw; --gap: 34px; }
  .hero-row { flex-direction: column; align-items: flex-start; }
  .tour-step, .tour-head { max-width: none; }
  .tour-step { justify-content: flex-end; padding-bottom: 8vh; background: linear-gradient(180deg, rgba(11,11,11,0) 0 46%, rgba(11,11,11,.94) 60%); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .tour-step dt { font-size: 34px; }
  .about-panel { grid-template-columns: 1fr; }
  .about-copy { padding: 40px 22px 60px; }
  .about-panel::after { left: 22px; bottom: 24px; }
  .about-visual { margin: 0; min-height: 60vh; }
  .room-close { right: 14px; top: 14px; }
  .room-logo { left: 20px; top: 20px; height: 22px; }
  .rm-head { grid-template-columns: 1fr; padding: 80px 20px 56px; }
  .rm-head::after { left: 20px; }
  .rm-head .ff { display: none; }
  .rm-cover { width: 100%; aspect-ratio: 16 / 10; }
  .rm-sec, .rm-dark { padding-left: 20px; padding-right: 20px; }
  .rm-case, .rm-cases--row { grid-template-columns: 1fr; }
  .rm-case-media .scr { width: 46vw; }
  .rm-cases--row .rm-case-media .scr { width: 62vw; }
  .scr { width: 62vw; }
  .rm-fdetail li { grid-template-columns: 1fr auto; }
  .rm-fdetail em { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ─── Marco de la marca (manual y key visuals): panel negro dentro de un marco blanco ─── */
:root { --ft: 72px; --fl: 26px; --fr: 64px; --fb: 34px; --paper: #fff; }
body { background: var(--paper); }
.panel-bg { position: fixed; inset: 0; z-index: 0; background: #0d0d0d url(assets/tex-panel.jpg) center / cover; }
.panel-bg::after { content: ''; position: absolute; inset: 0; background: rgba(13,13,13,.55); }
#net { z-index: 0; }
.fr { position: fixed; z-index: 25; background: var(--paper); }
.fr-top { top: 0; left: 0; right: 0; height: var(--ft); }
.fr-left { top: 0; bottom: 0; left: 0; width: var(--fl); }
.fr-right { top: 0; bottom: 0; right: 0; width: var(--fr); display: flex; flex-direction: column; align-items: center; padding: calc(var(--ft) + 10px) 0 calc(var(--fb) + 10px); gap: 22px; }
.fr-right .ff { color: var(--char); font-size: 20px; }
.vbar { width: 4px; flex: 0 0 34%; background: linear-gradient(180deg, #b64137, #9a22e3 25%, #220ee9 50%, #05a0fc 75%, #00daff); filter: blur(.5px); }
.vurl { writing-mode: vertical-rl; font-family: var(--head); font-weight: 300; font-size: 10px; letter-spacing: .18em; color: var(--char); margin-top: auto; }
.fr-bottom { left: 0; right: 0; bottom: 0; height: var(--fb); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--fr) + 4px) 0 var(--fl); font-family: var(--head); font-weight: 300; font-size: 10px; letter-spacing: .18em; color: var(--char); }
.fb-l { display: flex; align-items: center; gap: 8px; }
.fb-l img { height: 12px; filter: invert(1) brightness(.3); }
.chroma-bar, .hud-foot { display: none; }
.top { z-index: 30; height: var(--ft); padding: 0 calc(var(--fr) + 4px) 0 var(--fl); background: var(--paper); }
.top-logo img { height: 26px; }
.top-nav, .hud-num { color: var(--char); }
.top-nav a:hover { color: #000; }
.lang button { color: #888; }
.lang button.on { color: var(--char); border-color: #ccc; }
#labels { clip-path: inset(var(--ft) var(--fr) var(--fb) var(--fl)); }
.scene, .tour { padding-left: calc(var(--fl) + 44px); padding-right: calc(var(--fr) + 44px); }
.hero { padding-bottom: calc(var(--fb) + 9vh); }
.contact { padding-bottom: calc(var(--fb) + 40px); }
.foot { display: none; }

/* Etiqueta de sección del manual: rayita + palabra en KUBO */
.kick { font-family: var(--kubo); font-size: 17px; letter-spacing: .03em; color: #fff; }
.kick::before { content: ''; display: block; width: 30px; height: 3px; background: currentColor; margin-bottom: 10px; }
.about .kick, .rm-head .kick { color: var(--char); }

/* Pantallas: iPhone negro de frente, como en las aplicaciones del manual */
.scr { background: none; padding: 0; width: 214px; }
.scr-in { position: relative; border-radius: 34px; border: 7px solid #0c0c0c; box-shadow: 0 0 0 1.5px #3a3a3a, 0 26px 54px rgba(0,0,0,.5); }
.scr::before { content: ''; position: absolute; right: -2px; top: 120px; width: 3px; height: 54px; border-radius: 2px; background: #2a2a2a; }
.scr figcaption { margin-top: 18px; }
.rm-case-media .scr { width: 206px; }

@media (max-width: 900px) {
  :root { --ft: 58px; --fl: 8px; --fr: 8px; --fb: 8px; }
  .fr-right > *, .fr-bottom > * { display: none; }
  .top { padding: 0 14px; }
  .scene, .tour { padding-left: 24px; padding-right: 24px; }
  .tour-step { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .scr { width: 58vw; }
  .rm-case-media .scr { width: 42vw; }
}

/* Nosotros sin foto: textura de la marca y el año */
.about-visual { background: #0d0d0d url(assets/tex-panel.jpg) 70% 50% / cover; }
.about-visual .year { font-size: clamp(110px, 13vw, 210px); left: 40px; bottom: 34px; }
/* Empresa hermana */
.sister { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; margin-top: 34px; padding: 18px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; max-width: 540px; }
.sister img { grid-row: span 2; height: 46px; width: auto; filter: brightness(0) saturate(100%); opacity: .82; transition: filter .3s, opacity .3s; }
.sister:hover img { filter: none; opacity: 1; }
.sister-k { font-family: var(--head); font-weight: 300; font-size: 11px; letter-spacing: .18em; color: #888; }
.sister-t { font-size: 14px; line-height: 1.45; color: var(--char); }

/* Pantallas más grandes */
.scr { width: 290px; }
.rm-screens { gap: 40px; }
.rm-case-media .scr { width: 270px; }
.rm-case { grid-template-columns: auto minmax(0, 1fr); gap: 64px; }
.rm-cases--row .rm-case-media .scr { width: 100%; max-width: 320px; }
.rm-sec { max-width: 1320px; }
@media (max-width: 1100px) { .rm-case-media .scr { width: 220px; } }
@media (max-width: 900px) { .scr { width: 74vw; } .rm-case-media .scr { width: 44vw; } .rm-cases--row .rm-case-media .scr { width: 74vw; } }
/* Barra fija dentro de cada medio para que el logo y CERRAR no se encimen con el contenido */
.room::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 74px; background: #0b0b0b; z-index: 2; pointer-events: none; }
.room-logo { mix-blend-mode: normal; }
.room-body { padding-top: 74px; }
.rm-head { padding-top: 60px; }
.rm-head .ff { top: 60px; }
@media (max-width: 900px) { .room::after { height: 62px; } .room-body { padding-top: 62px; } .rm-head { padding-top: 40px; } }

/* Logos de cada medio en la constelación */
.lbl-node { padding: 6px 12px 6px 6px; gap: 10px; font-size: 13px; }
.lbl-node img { width: 30px; height: 30px; border-radius: 7px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 16px var(--c); }

/* Pantallas de la app: todas a la vista, sin desplazamiento */
.rm-screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px; overflow: visible; padding-bottom: 0; max-width: 1200px; }
.rm-screens .scr { width: 100%; max-width: 270px; }
@media (max-width: 900px) { .rm-screens { grid-template-columns: 1fr 1fr; gap: 18px; } .rm-screens .scr { width: 100%; } .scr figcaption { font-size: 10px; } .lbl-node img { width: 22px; height: 22px; border-radius: 5px; } }

/* Etiquetas de los diagramas de servicios */
.lbl-dg { font-size: 12px; letter-spacing: .16em; color: rgba(255,255,255,.82); }
.lbl-buy { padding: 5px 9px; border: 1px solid rgba(255,255,255,.18); transition: opacity .5s, border-color .3s, color .3s, background .3s; }
.lbl-buy.win { border-color: var(--cyan); color: #fff; background: rgba(0,218,255,.12); }
.lbl-mc { display: flex; align-items: center; gap: 9px; letter-spacing: .1em; }
.lbl-mc img { width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 0 12px var(--c); }
.lbl-rev { color: #ffcf5a !important; } .lbl-gam, .lbl-core2 { color: var(--cyan) !important; }
@media (max-width: 900px) { .lbl-dg { font-size: 9px; letter-spacing: .1em; } .lbl-mc img { width: 16px; height: 16px; } .lbl-mc { gap: 5px; } }
@media (max-width: 900px) { .lbl-buyh, .lbl-medh { display: none; } .lbl-buy { padding: 2px 5px; } }

/* Etiquetas de los seis servicios */
.lbl-six { white-space: normal; width: 170px; justify-content: center; text-align: left; font-size: 11px; letter-spacing: .1em; line-height: 1.3; padding: 7px 10px; }
.lbl-six .six-n { color: var(--cyan); margin-right: -2px; }
.lbl-six:hover { background: #fff; color: #111; }
.lbl-six:hover .six-n, .lbl-six:hover b { color: #111; }
@media (max-width: 900px) { .lbl-six { width: 132px; font-size: 9.5px; letter-spacing: .06em; padding: 5px 7px; gap: 5px; } .lbl-six i { display: none; } }
@media (max-width: 900px) { #hacemos .tour-head { justify-content: flex-end; padding-bottom: 10vh; } }

/* Etiquetas de las escenas de servicios */
.lbl-seg { transition: opacity .4s; }
.lbl-seg.on.dim { opacity: .35 !important; }
.lbl-cd-gam, .lbl-dl-deal, .lbl-ai-ai, .lbl-fm-tag { color: var(--cyan) !important; }
.lbl-dl-deal { padding: 4px 8px; border: 1px solid var(--cyan); background: rgba(0,218,255,.1); }
.lbl-cd-asset, .lbl-fm-name { font-size: 13px; color: #fff !important; }
.fmt-k { color: var(--cyan); font-weight: 300; margin-right: 4px; }
.lbl-cd-note, .lbl-fm-note, .lbl-dl-note, .lbl-ai-loop { color: rgba(255,255,255,.55) !important; font-size: 11px; }
.lbl-ai-loop { color: rgba(255,255,255,.7) !important; }
@media (max-width: 900px) { .lbl-cd-note, .lbl-fm-note, .lbl-dl-note, .lbl-ai-loop, .lbl-ai-dash, .lbl-cd-gam { white-space: normal; width: 170px; text-align: center; } .lbl-seg { font-size: 9px; } }
@media (max-width: 900px) { .lbl-ai-ads, .lbl-ai-dash, .lbl-cd-gam { white-space: normal; width: 130px; text-align: center; font-size: 8.5px; } .lbl-seg { white-space: normal; width: 120px; font-size: 8.5px; } .lbl-cd-asset, .lbl-fm-name { font-size: 10px; } }

/* Agentes de IA */
.lbl-ag0, .lbl-ag1, .lbl-ag2, .lbl-ag3, .lbl-ag4 { color: rgba(255,255,255,.5) !important; transition: opacity .5s, color .3s; }
.lbl-dg.act { color: var(--cyan) !important; }
.lbl-ag-core { color: var(--cyan) !important; }
.lbl-ag-out { color: #ffcf5a !important; font-size: 13px; }
.lbl-pd-bud { color: #ffcf5a !important; }
.lbl-pd-note, .lbl-ag-note { color: rgba(255,255,255,.55) !important; font-size: 11px; }
@media (max-width: 900px) { .lbl-pd-note, .lbl-ag-note, .lbl-pd-dash, .lbl-ag-out { white-space: normal; width: 150px; text-align: center; font-size: 8.5px; } .lbl-ag0, .lbl-ag1, .lbl-ag2, .lbl-ag3, .lbl-ag4 { font-size: 8px; } }
@media (min-width: 901px) { .lbl-six { width: 150px; } }

/* Equipo con fotos */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.team li { display: block; }
.team img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 10px; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.team li:hover img { filter: grayscale(0) contrast(1.05); }
.team b { font-size: 12px; letter-spacing: .08em; }
.team span { font-size: 11px; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* Pantallas de "Adentro de la app" un poco más grandes */
.rm-dark .rm-screens { max-width: 1320px; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rm-dark .rm-screens .scr { max-width: 310px; }
.scr figcaption { font-size: 13px; }
@media (max-width: 900px) { .rm-dark .rm-screens { grid-template-columns: 1fr 1fr; gap: 18px; } .rm-dark .rm-screens .scr { max-width: none; } .scr figcaption { font-size: 10px; } }
.rm-dark { padding-left: max(40px, calc(50vw - 680px)); padding-right: max(40px, calc(50vw - 680px)); } .rm-dark .rm-screens { max-width: none; }
/* Tamaño intermedio de las pantallas */ .rm-dark .rm-screens { grid-template-columns: repeat(auto-fit, minmax(200px, 265px)); justify-content: start; gap: 34px; } .rm-dark .rm-screens .scr { max-width: 265px; } @media (max-width: 900px) { .rm-dark .rm-screens { grid-template-columns: 1fr 1fr; gap: 18px; } .rm-dark .rm-screens .scr { max-width: none; } }
/* Cuatro pantallas en una fila */ @media (min-width: 901px) { .rm-dark .rm-screens { grid-template-columns: repeat(4, minmax(0, 265px)); justify-content: start; gap: clamp(16px, 2.4vw, 34px); } .rm-dark .rm-screens .scr { max-width: none; width: 100%; } }

/* Recorrido del usuario dentro de un medio */
.rm-flow { padding-top: 64px; padding-bottom: 64px; }
.rm-flow-intro { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 760px; margin-bottom: 40px; }
.rm-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.rm-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.2), var(--c)); }
.rm-steps li { position: relative; padding: 34px 28px 0 0; }
.rm-steps li::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255,255,255,.5); }
.rm-steps li.hot::before { background: var(--c); border-color: #fff; box-shadow: 0 0 18px var(--c); }
.rs-n { display: block; font-family: var(--kubo); font-size: 30px; line-height: 1; margin-bottom: 10px; }
.rs-w { display: block; font-family: var(--head); font-size: 11px; letter-spacing: .14em; color: var(--c); margin-bottom: 8px; }
.rm-steps b { display: block; font-family: var(--head); font-weight: 300; font-size: 22px; text-transform: uppercase; line-height: 1.1; margin-bottom: 10px; }
.rm-steps p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) {
  .rm-steps { grid-template-columns: 1fr; padding-left: 30px; }
  .rm-steps::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(255,255,255,.2), var(--c)); }
  .rm-steps li { padding: 0 0 30px; }
  .rm-steps li::before { left: -30px; }
}
@media (min-width: 901px) { .rm-dark .rm-screens { grid-template-columns: repeat(var(--n, 4), minmax(0, 265px)); } }
@media (max-width: 900px) { .rm-dark .rm-screens { grid-template-columns: 1fr 1fr; } }
@media (min-width: 901px) { .rm-steps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }

/* ───── Transiciones (referencias: Apple, SpaceX, Tesla, Mischief) ───── */
/* Titular principal: entra letra por letra y al bajar se achica y se va */
.motion .hero h1 .ch { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(8px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i) * 45ms + .2s); }
.motion .hero h1.in .ch { opacity: 1; transform: none; filter: none; }
.hero-copy { transform: translateY(calc(var(--hp) * -70px)) scale(calc(1 - var(--hp) * .06)); opacity: calc(1 - var(--hp) * 1.1); transform-origin: left bottom; }

/* Bloques: cada hijo sube escalonado; títulos salen de una máscara */
.motion .rv > * { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.motion .rv.in > * { opacity: 1; transform: none; }
.motion .rv h2, .motion .rv h3, .motion .rv .hl .k { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease), opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + .05s); }
.motion .rv.in h2, .motion .rv.in h3, .motion .rv.in .hl .k { clip-path: inset(-10% -5% -20% -5%); }
.motion .rv .kick::before { width: 0; transition: width .7s var(--ease) .1s; }
.motion .rv.in .kick::before { width: 30px; }
.motion .rv .how li, .motion .rv .rm-steps li { opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.motion .rv.in .how li, .motion .rv.in .rm-steps li { opacity: 1; transform: none; }
.motion .rv.in .how li:nth-child(2), .motion .rv.in .rm-steps li:nth-child(2) { transition-delay: .5s; }
.motion .rv.in .how li:nth-child(3), .motion .rv.in .rm-steps li:nth-child(3) { transition-delay: .62s; }
.motion .rv.in .rm-steps li:nth-child(4) { transition-delay: .74s; }
.motion .rv.in .rm-steps li:nth-child(5) { transition-delay: .86s; }
.motion .rv.in .how li:nth-child(1), .motion .rv.in .rm-steps li:nth-child(1) { transition-delay: .38s; }
.motion .rv .rm-steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .3s; }
.motion .rv.in .rm-steps::before { transform: none; }
/* Pantallas: se revelan de abajo hacia arriba, una tras otra */
.motion .rv .scr { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
.motion .rv.in .scr { clip-path: inset(-10% -10% -10% -10%); }
.motion .rv.in .scr:nth-child(2) { transition-delay: .12s; } .motion .rv.in .scr:nth-child(3) { transition-delay: .24s; }
.motion .rv.in .scr:nth-child(4) { transition-delay: .36s; } .motion .rv.in .scr:nth-child(5) { transition-delay: .48s; }
/* Panel blanco de Nosotros: se abre como una persiana */
.motion .about-panel.rv { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.motion .about-panel.rv.in { clip-path: inset(-40px -40px -40px -40px); }
.team li img { transition: filter .4s, transform .6s var(--ease); }
.team li:hover img { transform: scale(1.03); }

/* Cinta tipográfica (estilo Mischief): avanza y se inclina con la velocidad del scroll */
.ticker { position: relative; overflow: hidden; padding: 6vh 0; margin: 0 calc(var(--fr) * 0) ; pointer-events: none; }
.tk-track { display: flex; align-items: center; gap: 40px; width: max-content; will-change: transform; font-family: var(--kubo); font-size: clamp(54px, 9vw, 150px); line-height: 1; white-space: nowrap; color: #fff; }
.tk-track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.8); }
.tk-track i { font-style: normal; font-size: .5em; color: var(--cyan); }
.motion .ticker.rv > * { transform: none; }

/* Apertura de cada medio: un círculo que crece desde donde se tocó */
.room { opacity: 1 !important; clip-path: circle(0 at var(--rx, 50%) var(--ry, 50%)); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); visibility: hidden; }
.room.open { clip-path: circle(150% at var(--rx, 50%) var(--ry, 50%)); visibility: visible; }
.room:not(.open) { transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s; }
.room-body { transform: none !important; }
.motion .room.open .rm-head > * { animation: rmIn .9s var(--ease) both; }
.motion .room.open .rm-head-copy > * { animation: rmIn .9s var(--ease) both; }
.motion .room.open .rm-head-copy > :nth-child(2) { animation-delay: .32s; } .motion .room.open .rm-head-copy > :nth-child(3) { animation-delay: .4s; }
.motion .room.open .rm-head-copy > :nth-child(4) { animation-delay: .48s; } .motion .room.open .rm-head-copy > :nth-child(5) { animation-delay: .56s; }
.motion .room.open .rm-head-copy > :nth-child(1) { animation-delay: .25s; }
@keyframes rmIn { from { opacity: 0; transform: translateY(30px); } }

/* Navegación: subrayado que crece */
.top-nav a { position: relative; }
.top-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.top-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.enter, .rm-cta, .mails a { transition: transform .4s var(--ease), background .3s, color .3s; }
.mails a:hover { transform: translateY(-3px); }
.hero h1 .wd { display: inline-block; white-space: nowrap; }
.tour .ticker { margin: 0 -40px; } @media (max-width: 900px) { .tour .ticker { margin: 0 -20px; } }

/* 2016 → 2026 */
.about-visual .years { position: absolute; left: 40px; bottom: 34px; z-index: 2; display: flex; align-items: flex-end; gap: 22px; }
.about-visual .years .year { position: static; font-size: clamp(80px, 9vw, 150px); }
.about-visual .yr-now { color: var(--cyan); }
.yr-arrow { font-family: var(--head); font-weight: 300; font-size: clamp(36px, 4vw, 64px); color: #fff; padding-bottom: .5em; }
/* Cinta al pie, dentro de Contacto */
.contact .ticker { width: calc(100% + 80px); margin: 0 -40px 28px; padding: 3vh 0; }
@media (max-width: 900px) { .contact .ticker { width: calc(100% + 40px); margin: 0 -20px 20px; } }
@media (max-width: 900px) { .hl--center .k { font-size: 2.9em; } }

/* Celular: el texto se apoya en un fondo sólido y no se mezcla con el gráfico */
@media (max-width: 900px) {
  .tour-step, .tour-head { background: linear-gradient(180deg, rgba(11,11,11,0) 0, rgba(11,11,11,0) var(--fade, 50%), rgba(11,11,11,.97) calc(var(--fade, 50%) + 90px)) !important; margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .tour-head { justify-content: flex-end; padding-bottom: 10vh; }
  .tour-step { padding-bottom: 12vh; }
  .tour-step { opacity: .35; }
}
@media (max-width: 900px) { .tour-step, .tour-step.on { opacity: 1 !important; } }

/* Botones con recursos del manual: corchetes de esquina, prompt ">" y flecha fina → */
.enter { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; background: transparent !important; color: #fff; border: 0;
  font-family: var(--head); font-weight: 300; font-size: 13px; letter-spacing: .18em; }
.enter::before, .enter::after { content: ''; position: absolute; width: 12px; height: 12px; border: 0 solid #fff; transition: width .45s var(--ease), height .45s var(--ease), border-color .3s; }
.enter::before { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.enter::after { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.enter .p { color: var(--cyan); }
.enter .ar { font-size: 18px; line-height: 1; transition: transform .45s var(--ease); }
.enter:hover { transform: none; color: #fff; }
.enter:hover::before, .enter:hover::after { width: 100%; height: 100%; border-color: var(--cyan); }
.enter:hover .ar { transform: translateX(8px); }
.lbl-node b, .lbl-six b { letter-spacing: 0; font-size: 15px; font-weight: 300; }
.rm-cta .ar { display: inline-block; margin-left: .4em; transition: transform .45s var(--ease); }
.rm-cta:hover .ar { transform: translateX(10px); }
.hint { letter-spacing: .2em; }

/* Celular: en Qué hacemos, la mitad de arriba de cada servicio queda libre para el gráfico */
@media (max-width: 900px) {
  #hacemos .tour-step.svc { justify-content: flex-start; padding-top: 47vh; padding-bottom: 10vh; }
}