@import url("components.css");
/* ════════════════════════════════════════════════════════════════════
   RAVEN · v7 — sistema de diseño
   Identidad v2.4: #F2F2F2 · #1D1D1F · #5A5A5C · #D90069
   Disciplina: 6 tamaños de tipo · radio 8px · una curva de easing
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* color */
  --bg:#F2F2F2; --white:#FFFFFF; --ink:#1D1D1F; --ink-deep:#17171A; --card:#232326;
  --text:#5A5A5C; --support:#9A9A9E; --magenta:#D90069; --magenta-hi:#FF3D8B; --pink:#FFC3C5;
  --rule:rgba(29,29,31,.14); --rule-d:rgba(242,242,242,.16); --rule-m:rgba(255,255,255,.32);
  /* tipo — los únicos seis tamaños */
  --t-display:clamp(2.6rem,6vw,5.25rem);
  --t-title:clamp(1.85rem,3.1vw,2.9rem);
  --t-fig:clamp(2.1rem,3.4vw,3.2rem);
  --t-lead:clamp(1.125rem,1.4vw,1.3125rem);
  --t-body:1.0625rem;
  --t-mono:.6875rem;
  /* geometría */
  --r:8px;
  --gut:max(clamp(20px,5vw,56px),calc((100vw - 1340px)/2));
  --band:clamp(88px,11vw,168px);
  /* movimiento */
  --ease:cubic-bezier(.22,1,.36,1);
  --fast:.25s; --med:.5s; --slow:.8s;
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font:400 var(--t-body)/1.62 'BDO Grotesk','Inter',system-ui,-apple-system,sans-serif;
  letter-spacing:-.006em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--magenta);color:#fff}

/* ── contenedor: exactamente el ancho del header ── */
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
section{position:relative;padding-top:var(--band);padding-bottom:var(--band)}
.b-white{background:var(--white)}
.b-gray{background:var(--bg)}
.b-ink{background:var(--ink);color:var(--bg)}
.b-deep{background:var(--ink-deep);color:var(--bg)}
.b-magenta{background:var(--magenta);color:#fff}
.b-magenta p{color:rgba(255,255,255,.88)}

/* ── tipografía ── */
h1{font-size:var(--t-display);font-weight:400;line-height:1.02;letter-spacing:-.038em;text-wrap:balance}
h2{font-size:var(--t-title);font-weight:500;line-height:1.08;letter-spacing:-.032em;max-width:24ch;text-wrap:balance}
h3{font-size:var(--t-body);font-weight:500;letter-spacing:-.014em}
p{max-width:62ch}
.lead{font-size:var(--t-lead);line-height:1.52;color:var(--text);max-width:54ch}
.b-ink .lead,.b-deep .lead{color:rgba(242,242,242,.68)}
.fig{font-size:var(--t-fig);font-weight:500;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
/* .mono/.label -> components.css (compartido con la portada) */
.mag{color:var(--magenta)}
.b-ink .mag,.b-deep .mag{color:var(--magenta-hi)}

/* cabecera de sección: label izquierda pequeña + título */
.head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.head .label{margin-bottom:0}

/* ── retícula de celdas con hairline ── */
.cols{display:grid;gap:clamp(20px,2.8vw,40px) clamp(20px,3vw,44px)}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.cell{border-top:1px solid var(--rule);padding-top:clamp(16px,2vw,24px)}
.b-ink .cell,.b-deep .cell{border-top-color:var(--rule-d)}
.b-magenta .cell{border-top-color:var(--rule-m)}
.cell .label{margin-bottom:12px}
.cell h3{margin-bottom:8px}
.cell p{font-size:var(--t-body);line-height:1.55;color:var(--text)}
.b-ink .cell p,.b-deep .cell p{color:rgba(242,242,242,.62)}
.b-magenta .cell p{color:rgba(255,255,255,.85)}
@media(max-width:960px){.c3,.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.c2,.c3,.c4{grid-template-columns:1fr}}

/* ── botones: la píldora es identidad; lo demás, 8px ── */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r);
  padding:15px 26px;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1;
  transition:background var(--fast) ease,color var(--fast) ease,border-color var(--fast) ease,transform var(--fast) var(--ease)}
.btn .arw{transition:transform var(--med) var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--magenta)}
.btn-mag{background:var(--magenta);color:#fff}
.btn-mag:hover{background:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--bg)}
.btn-line{border:1px solid var(--rule);color:inherit}
.btn-line:hover{border-color:var(--magenta);color:var(--magenta)}
.b-ink .btn-line,.b-deep .btn-line{border-color:rgba(242,242,242,.32)}
.b-ink .btn-line:hover,.b-deep .btn-line:hover{border-color:#fff;color:#fff}

/* enlace editorial subrayado fino */
.tlink{position:relative;font-weight:500;letter-spacing:-.012em;padding-bottom:3px;width:fit-content;display:inline-flex;gap:8px;align-items:baseline}
.tlink::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform-origin:100% 50%;transition:transform var(--med) var(--ease)}
.tlink:hover::after{transform:scaleX(.2)}
.tlink .arw{color:var(--magenta);transition:transform var(--med) var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}

/* ── media: todo a 8px ── */
.media{margin:0;overflow:hidden;border-radius:var(--r);background:var(--ink-deep)}
.media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--slow) var(--ease),filter .6s ease}
.media.bw img{filter:grayscale(1) contrast(1.05)}
.media.bw:hover img{filter:grayscale(0)}
a:hover .media img,.media:hover img{transform:scale(1.03)}

/* ── header ── */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:17px var(--gut);color:var(--bg);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s ease;
  backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
body.scrolled .hd,body[data-hd-solid] .hd{background:rgba(23,23,26,.82);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--rule-d)}
.hd .wm{position:relative;display:block;height:19px;width:88px}
.hd .wm img{position:absolute;left:0;top:0;height:19px;width:auto;transition:opacity .4s var(--ease),transform .4s var(--ease);transform-origin:left center}
.hd .wm .glyph{top:-2px;height:23px;opacity:0;transform:scale(.7) rotate(-6deg)}
body.scrolled .hd .wm .full{opacity:0;transform:scale(.92)}
body.scrolled .hd .wm .glyph{opacity:1;transform:none}
.hd nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px clamp(12px,2vw,26px)}
.hd nav a{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;opacity:.72;transition:opacity var(--fast) ease;padding:6px 0}
.hd nav a:hover,.hd nav a[aria-current]{opacity:1}
.hd nav a[aria-current]{color:var(--magenta-hi)}
.hd .pill{border:1px solid rgba(255,255,255,.42);border-radius:var(--r);padding:9px 15px;opacity:.9}
.hd .pill.cta{border-color:rgba(255,255,255,.55);padding:9px 18px}
.hd .pill:hover{border-color:#fff;opacity:1}
/* .burger vive en components.css, junto al panel */

/* megamenú (solo Model) */
.mm{position:fixed;top:64px;left:50%;z-index:70;width:min(1340px,calc(100% - 2*clamp(20px,5vw,56px)));
  background:var(--ink);color:var(--bg);border:1px solid var(--rule-d);border-radius:var(--r);
  padding:clamp(14px,1.8vw,22px);box-shadow:0 32px 90px -32px rgba(23,23,26,.65);
  opacity:0;transform:translateX(-50%) translateY(-8px);pointer-events:none;
  transition:opacity .3s ease,transform .45s var(--ease)}
.mm.open{opacity:1;transform:translateX(-50%);pointer-events:auto}
.mm-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mm-i{display:flex;flex-direction:column;gap:8px;padding:clamp(12px,1.5vw,18px);border-radius:var(--r);
  transition:background var(--fast) ease}
.mm-i:hover{background:var(--card)}
.mm-i .label{margin:0;color:var(--support)}
.mm-i b{font-weight:500;font-size:var(--t-body);letter-spacing:-.02em;display:flex;gap:8px;align-items:baseline}
.mm-i b .arw{color:var(--support);transition:transform var(--med) var(--ease),color var(--fast) ease}
.mm-i:hover b .arw{transform:translateX(4px);color:var(--magenta-hi)}
.mm-i p{font-size:.8125rem;line-height:1.5;color:rgba(242,242,242,.6)}
.crt{display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);margin-left:7px;transition:transform .35s var(--ease)}
[aria-expanded="true"] .crt{transform:rotate(225deg) translateY(-1px)}
@media(max-width:980px){.mm{display:none}.mm-g{grid-template-columns:1fr}}

/* menú móvil */
/* el panel de navegación vive en components.css (compartido con la portada) */

/* ── hero interior ── */
.hero{position:relative;overflow:hidden;background:var(--ink-deep);color:var(--bg);
  min-height:min(70svh,720px);display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(140px,17vh,205px) 0 0}
.hero .hm{position:absolute;inset:0}
.hero .hm img,.hero .hm video{width:100%;height:100%;object-fit:cover;opacity:0;
  filter:grayscale(1) contrast(1.06);transition:opacity 1.2s ease}
body.ready .hero .hm img,body.ready .hero .hm video{opacity:.34}
.hero .hm::after{content:'';position:absolute;inset:0;
  background:radial-gradient(110% 80% at 20% 66%,rgba(23,23,26,.94) 0%,rgba(23,23,26,.6) 48%,transparent 84%),
             linear-gradient(180deg,rgba(23,23,26,.66),rgba(23,23,26,.3) 42%,rgba(23,23,26,.97))}
.hero .hi{position:relative;z-index:2}
.hero .label{color:var(--magenta-hi)}
.hero .lead{margin-top:clamp(18px,2.4vw,28px)}
.hero .hi{margin-bottom:clamp(40px,6vh,72px)}
.hero-rail{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:auto;padding-top:18px;padding-bottom:20px;border-top:1px solid var(--rule-d)}
.hero-rail .mono{color:var(--support)}
.hero-rail a.mono{display:inline-flex;align-items:center;gap:9px;transition:color var(--fast) ease}
.hero-rail a.mono:hover{color:#fff}
.hero-rail a.mono i{width:5px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(-2px) rotate(45deg);opacity:.5}50%{transform:translateY(2px) rotate(45deg);opacity:1}}

/* ── fila Think/Build/Sell (hover a tinta + flecha) ── */
.play{position:relative;display:block;border-radius:var(--r);cursor:pointer;
  border-bottom:1px solid var(--rule);padding:clamp(26px,4vw,50px) 0;
  transition:background .45s var(--ease),margin .45s var(--ease),padding .45s var(--ease)}
.play:first-of-type{border-top:1px solid var(--rule)}
.play .pt{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.play .pt h3{font-size:clamp(2.6rem,7vw,6.2rem);font-weight:500;line-height:.92;letter-spacing:-.045em}
.play .pt .no{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;color:var(--magenta);transition:opacity .25s ease}
.play .pb{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,3vw,42px);margin-top:16px}
.play p{font-size:var(--t-lead);line-height:1.5;max-width:38ch;color:var(--text);transition:color .3s ease}
.play .mono{color:var(--text);line-height:2;transition:color .3s ease}
.play h3{transition:color .3s ease}
@media(hover:hover){
.play::after{content:'\2192';position:absolute;right:clamp(18px,2.6vw,40px);top:50%;
  font-size:clamp(1.9rem,3.4vw,3rem);line-height:1;color:var(--magenta-hi);
  opacity:0;transform:translate(-14px,-50%);pointer-events:none;
  transition:opacity .3s ease,transform var(--med) var(--ease)}
.play:hover{background:var(--ink);
  margin-left:calc(-1*clamp(16px,2.4vw,34px));margin-right:calc(-1*clamp(16px,2.4vw,34px));
  padding-left:clamp(16px,2.4vw,34px);padding-right:clamp(16px,2.4vw,34px);
  border-bottom-color:transparent}
.play:hover h3{color:var(--bg)}
.play:hover p,.play:hover .mono{color:rgba(242,242,242,.62)}
.play:hover .pt .no{opacity:0}
.play:hover::after{opacity:1;transform:translate(0,-50%)}
}

/* ── franja de cifras magenta ── */
.numbers{padding:clamp(44px,6vw,76px) 0}
.numbers .fig{color:#fff}
.numbers .cap{display:block;margin-top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--pink)}

/* ── comparativa (sell) ── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
@media(max-width:860px){.vs{grid-template-columns:1fr}}
.vs>div{border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.vs .old{border:1px solid var(--rule)}
.vs .new{background:var(--ink);color:var(--bg)}
.vs h3{font-size:var(--t-lead);margin-bottom:clamp(18px,2.4vw,28px)}
.vs ul{list-style:none;display:grid;gap:14px}
.vs li{display:flex;gap:12px;align-items:baseline;font-size:var(--t-body);line-height:1.5}
.vs .old li{color:var(--text)}
.vs .old li::before{content:'\2192';color:var(--support);flex:none}
.vs .new li{color:rgba(242,242,242,.85)}
.vs .new li::before{content:'\2192';color:var(--magenta-hi);flex:none}
.vs .new li b{color:#fff;font-weight:500}

/* ── planes (sell) ── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
@media(max-width:960px){.plans{grid-template-columns:1fr}}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;border-radius:var(--r);
  border:1px solid transparent;padding:clamp(22px,2.8vw,34px);background:var(--white);
  transition:border-color .3s ease,transform var(--med) var(--ease)}
.b-white .plan{border-color:var(--rule)}
.plan:hover{border-color:var(--magenta);transform:translateY(-3px)}
.plan.hot{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.plan .tag{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:.625rem;
  letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--rule);border-radius:var(--r);padding:7px 13px;color:var(--text)}
.plan.hot .tag{border-color:var(--magenta);color:var(--magenta-hi)}
.plan h3{font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.026em}
.plan .inc{display:grid;gap:9px;margin-top:4px}
.plan .inc span{display:flex;gap:10px;align-items:baseline;font-size:.9375rem;color:var(--text)}
.plan.hot .inc span{color:rgba(242,242,242,.72)}
.plan .inc span::before{content:'\2192';color:var(--magenta);flex:none;font-size:.8em}
.plan.hot .inc span::before{color:var(--magenta-hi)}
.plan .btn{margin-top:auto;justify-content:center}

/* ── acordeón FAQ ── */
.faq{display:grid;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:clamp(18px,2.4vw,26px) 0;font-size:var(--t-lead);font-weight:500;letter-spacing:-.02em;
  transition:color var(--fast) ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--magenta)}
.faq summary i{font-style:normal;flex:none;width:12px;height:12px;position:relative;top:2px}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;background:currentColor;transition:transform .35s var(--ease)}
.faq summary i::before{left:0;right:0;top:5px;height:1.5px}
.faq summary i::after{top:0;bottom:0;left:5px;width:1.5px}
.faq details[open] summary i::after{transform:scaleY(0)}
.faq .fb{padding:0 0 clamp(20px,2.6vw,28px);max-width:62ch;color:var(--text)}

/* ── footer ── */
footer{background:var(--ink);color:var(--bg);padding:clamp(48px,6vw,72px) var(--gut) clamp(26px,3vw,36px)}
.ft-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px)}
.ft-top .links{display:flex;flex-wrap:wrap;gap:12px clamp(16px,2.2vw,28px);
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase}
.ft-top .links a{opacity:.72;transition:opacity var(--fast) ease}
.ft-top .links a:hover{opacity:1}
.ft-low{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:clamp(30px,3.6vw,46px);padding-top:18px;border-top:1px solid var(--rule-d);
  font-family:'IBM Plex Mono',monospace;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,242,242,.6)}
.ft-low a{opacity:.85}.ft-low a:hover{opacity:1}

/* líneas del hero */
.ln{display:block;overflow:hidden}
.ln em{display:block;font-style:normal;transform:translateY(110%);transition:transform .9s var(--ease)}
body.ready .ln em{transform:none}
.ln:nth-child(2) em{transition-delay:.08s}
.ln:nth-child(3) em{transition-delay:.16s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .ln em{transform:none}
  html{scroll-behavior:auto}
}

@media(max-width:860px){.prodgrid{grid-template-columns:1fr!important}.prodgrid figure{order:-1}}

/* ── artículo de news ── */
.art{padding-top:calc(clamp(88px,11vw,168px) + 30px);
  padding-bottom:clamp(56px,7vw,96px)}
/* columna más ancha: la imagen y el pie respiran, el texto mantiene su medida */
.art .wrap{display:grid;grid-template-columns:minmax(0,880px);justify-content:center}
.art h1{font-size:clamp(2rem,4vw,3.15rem);font-weight:500;line-height:1.08;
  letter-spacing:-.032em;max-width:20ch}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  margin:clamp(16px,2vw,22px) 0 clamp(26px,3.4vw,40px);
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--support)}
.art-meta span{display:inline-flex;align-items:center}
.art-meta span+span::before{content:'';width:3px;height:3px;border-radius:50%;
  background:currentColor;margin-right:18px;opacity:.7}

/* imágenes en 16:9. Las piezas de actualidad son cuadradas: se recortan
   por arriba del centro, que es donde está el motivo, y así se deja fuera la
   franja de texto inferior, que además repite el titular de la página. */
.art-hero{margin:0 0 clamp(30px,3.8vw,48px);border-radius:var(--r);overflow:hidden;
  background:var(--ink-deep)}
.art-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;object-position:center 38%}

/* ── cuerpo: jerarquía y medida de lectura ── */
.art-body{font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.72;color:#333336;
  max-width:36em}
.art-body>*+*{margin-top:1.2em}
.art-body p{max-width:none}
/* la entradilla: primer párrafo con más peso, para entrar al texto */
.art-body>p:first-child{font-size:1.16em;line-height:1.58;color:var(--ink);letter-spacing:-.008em}
.art-body h2{font-size:clamp(1.45rem,2.2vw,1.95rem);font-weight:500;line-height:1.16;
  letter-spacing:-.028em;color:var(--ink);max-width:24ch;
  margin-top:2.1em;padding-top:.9em;border-top:1px solid var(--rule)}
.art-body h2+*{margin-top:.75em}
.art-body h3{font-size:clamp(1.125rem,1.5vw,1.3rem);font-weight:500;line-height:1.28;
  letter-spacing:-.022em;color:var(--ink);max-width:30ch;margin-top:1.9em}
.art-body h3+*{margin-top:.6em}
.art-body strong,.art-body b{font-weight:500;color:var(--ink)}
.art-body a{color:var(--magenta);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.art-body blockquote{margin-top:1.8em;border-left:2px solid var(--magenta);
  padding:8px 0 8px clamp(18px,2.4vw,28px);
  font-size:1.16em;line-height:1.5;font-weight:500;letter-spacing:-.018em;color:var(--ink)}
.art-body img{display:block;width:100%;height:auto;border-radius:var(--r);
  aspect-ratio:16/9;object-fit:cover;margin-top:1.8em}
.art-body img[data-portrait]{aspect-ratio:auto;object-fit:contain;
  width:auto;max-width:min(100%,420px)}
.art-body figure{margin:1.8em 0 0}
.art-body figcaption{margin-top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--support)}
.art-body ul,.art-body ol{padding-left:1.15em}
.art-body li+li{margin-top:.55em}
.art-body li::marker{color:var(--magenta)}
/* las imágenes y las citas pueden salirse de la medida del texto */
.art-body>figure,.art-body>img{max-width:none;width:100%}

/* ── pie del artículo: una llamada clara y el siguiente ── */
.art-end{margin:clamp(48px,6.5vw,84px) auto 0;display:grid;gap:clamp(16px,2.2vw,26px);
  /* el bloque queda dentro de .wrap, que ya pone el gutter: solo la medida */
  max-width:880px;width:100%}
.art-cta{background:var(--bg);border-radius:var(--r);
  padding:clamp(28px,4vw,48px) clamp(24px,3.4vw,44px)}
.art-cta .label{margin-bottom:14px;color:var(--magenta)}
.art-cta h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:500;line-height:1.1;
  letter-spacing:-.03em;max-width:20ch;color:var(--ink)}
.art-cta .lead{margin-top:14px;max-width:52ch}
.art-btns{margin-top:clamp(22px,3vw,32px);display:flex;flex-wrap:wrap;gap:12px}

.art-next{display:grid;grid-template-columns:132px 1fr 56px;align-items:center;
  gap:clamp(16px,2.4vw,26px);padding:clamp(14px,2vw,20px);
  border:1px solid var(--rule);border-radius:var(--r);background:var(--white);
  transition:border-color .3s ease,transform var(--med) var(--ease)}
.art-next:hover{border-color:var(--magenta);transform:translateY(-2px)}
.an-th{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg)}
.an-th img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 28%;
  filter:grayscale(1) contrast(1.04);transition:filter .5s ease}
.art-next:hover .an-th img{filter:grayscale(0)}
.an-b{display:grid;gap:7px;min-width:0}
.an-b .label{margin:0;color:var(--support)}
.an-t{font-size:clamp(1.0625rem,1.6vw,1.35rem);font-weight:500;line-height:1.24;
  letter-spacing:-.022em;color:var(--ink);transition:color .25s ease}
.art-next:hover .an-t{color:var(--magenta)}
.an-d{color:var(--support)}
.art-next .nw-arr{justify-self:end}
@media(max-width:640px){
  .art-next{grid-template-columns:96px 1fr;gap:14px}
  .art-next .nw-arr{display:none}
  .art-btns .btn{flex:1 1 100%;justify-content:center}
}

/* listado de news */
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px) clamp(18px,2.4vw,28px)}
@media(max-width:960px){.ngrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ngrid{grid-template-columns:1fr}}
.npost{display:flex;flex-direction:column;gap:14px;border-radius:var(--r)}
.npost .media{aspect-ratio:4/3}
.npost .media img{filter:grayscale(1) contrast(1.04);transition:filter .5s ease,transform var(--slow) var(--ease)}
.npost:hover .media img{filter:grayscale(0);transform:scale(1.03)}
.npost h3{font-size:var(--t-lead);font-weight:500;line-height:1.28;letter-spacing:-.022em;max-width:30ch}
.npost p{font-size:.9375rem;line-height:1.55;color:var(--text);max-width:42ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.npost .mono{color:var(--magenta)}



/* máximo dos métricas por card: compacidad y una sola línea siempre */

/* ── cards "no somos / sí somos" ── */
/* .nots/.not -> components.css (mismo componente en portada e interiores) */

/* rail de stats bajo el hero de work */
.wstats{display:flex;flex-wrap:wrap;gap:14px clamp(32px,5vw,72px);margin-top:clamp(30px,4vw,48px)}
.wstats div .fig{color:var(--ink)}
.wstats div .mono{display:block;margin-top:8px;color:var(--text)}

/* ── listado editorial de filas (sectores, titulares) ── */
.nw-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta)}
.nw-list{border-top:1px solid var(--rule)}
.nw-row{display:grid;grid-template-columns:96px 1fr auto 64px;gap:10px clamp(16px,2.4vw,32px);align-items:center;
  padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--rule)}
.nw-row .nw-rt{font-weight:500;font-size:clamp(1.125rem,1.7vw,1.5rem);letter-spacing:-.022em;color:var(--ink);transition:color .25s ease}
.nw-row:hover .nw-rt{color:var(--magenta)}
.nw-arr{position:relative;width:56px;height:10px;justify-self:end;opacity:.55;transition:opacity .25s ease,transform var(--med) var(--ease)}
.nw-arr::before{content:'';position:absolute;left:0;right:1px;top:50%;height:1px;background:var(--ink)}
.nw-arr::after{content:'';position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:translateY(-50%) rotate(45deg) scale(.7)}
.nw-row:hover .nw-arr{opacity:1;transform:translateX(8px)}
.nw-row:hover .nw-arr::before{background:var(--magenta)}
.nw-row:hover .nw-arr::after{border-color:var(--magenta)}
@media(max-width:720px){.nw-row{grid-template-columns:1fr auto}.nw-row .nw-k,.nw-row .mono{grid-column:1/-1}}

/* ── vacantes (careers) ── */
.jobs{border-top:1px solid var(--rule);margin-top:clamp(28px,3.4vw,44px)}
.job{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:14px clamp(20px,3vw,52px);align-items:start;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--rule)}
.job-h{display:grid;gap:10px;align-content:start}
.job-t{font-weight:500;font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:-.024em;
  color:var(--ink);transition:color .25s ease}
.job:hover .job-t{color:var(--magenta)}
.job-d{display:grid;gap:12px;align-content:start}
.job-p{color:var(--text);font-size:var(--t-body);line-height:1.55;max-width:46ch}
.job-m{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--support)}
.job-a{display:flex;flex-wrap:wrap;gap:10px clamp(16px,2vw,26px);align-items:baseline;margin-top:2px}
.job-li{color:var(--support);transition:color var(--fast) ease}
.job-li:hover{color:var(--magenta)}
.job.hide{display:none}
.job .nw-arr{align-self:center}
@media(max-width:820px){
  .job{grid-template-columns:1fr}
  .job-h,.job-d{grid-column:1}
}

/* ── línea de tiempo del encargo (model) ── */
.tline{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,38px)}
@media(max-width:960px){.tline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tline{grid-template-columns:1fr}}
.tstep{position:relative;border-top:1px solid var(--rule-d);padding-top:clamp(18px,2.2vw,26px);
  display:grid;gap:10px;align-content:start}
.tstep::before{content:'';position:absolute;top:-1px;left:0;width:38%;height:1px;background:var(--magenta-hi)}
.tstep .wk{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--magenta-hi)}
.tstep h3{color:#fff;font-size:var(--t-lead);letter-spacing:-.022em}
.tstep p{color:rgba(242,242,242,.62);font-size:var(--t-body);line-height:1.55;max-width:34ch}
.tstep .got{margin-top:4px;padding-top:12px;border-top:1px solid var(--rule-d);
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--support)}
/* fila play: cifra + capacidades alineadas */
.pm-row .pm-name{margin-top:2px}

/* ── partners ── */
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,22px)}
@media(max-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pcard{display:grid;gap:16px;align-content:start;border-radius:var(--r);
  border:1px solid var(--rule-d);padding:clamp(20px,2.4vw,28px);background:rgba(242,242,242,.03)}
.pcard img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.9;
  transition:opacity var(--fast) ease}
.pcard:hover img{opacity:1}
.pcard span{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--support)}
.b-white .pcard,.b-gray .pcard{border-color:var(--rule);background:transparent}
.b-white .pcard img,.b-gray .pcard img{filter:none;opacity:.85}

/* ── reel ── */
.reel{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--ink-deep);
  aspect-ratio:16/9}
.reel img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);
  transition:filter .5s ease,transform var(--slow) var(--ease)}
.reel:hover img{filter:grayscale(0);transform:scale(1.02)}
.reel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,23,26,.3),rgba(23,23,26,.5))}
.reel .rplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;align-items:center;gap:11px;background:var(--magenta);color:#fff;
  border-radius:var(--r);padding:16px 28px;font-size:16px;font-weight:500;letter-spacing:-.01em;
  transition:background var(--fast) ease,transform var(--med) var(--ease)}
.reel:hover .rplay{background:var(--magenta-hi);transform:translate(-50%,-50%) scale(1.03)}



/* ── listado de productos del stack: filas grandes tipo play ── */
.slist{border-top:1px solid var(--rule)}
.srow{position:relative;display:grid;grid-template-columns:1.05fr .92fr .82fr 92px;
  gap:clamp(20px,2.6vw,44px);align-items:start;
  padding:clamp(30px,3.8vw,54px) 0;border-bottom:1px solid var(--rule);
  transition:margin .45s var(--ease),padding .45s var(--ease)}
.srow::before{content:'';position:absolute;top:-1px;bottom:-1px;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--ink);opacity:0;pointer-events:none;
  transition:opacity .45s ease}
.srow>*{position:relative;z-index:1}
.srow .snum{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.16em;color:var(--magenta);margin-bottom:14px}
.srow .sname{font-size:clamp(1.9rem,3.4vw,3.1rem);font-weight:500;line-height:1;
  letter-spacing:-.042em;max-width:none;transition:color .3s ease}
.srow .stag{margin-top:12px;font-size:var(--t-lead);line-height:1.45;color:var(--text);
  max-width:30ch;transition:color .3s ease}
.srow .sstat{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(16px,2vw,22px);
  border:1px solid var(--rule);border-radius:var(--r);padding:8px 13px;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);transition:color .3s ease,border-color .3s ease}
.srow .sstat::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--magenta);flex:none}
.srow .sfeat{display:grid;gap:10px;padding-top:4px}
.srow .sfeat span{display:flex;gap:11px;align-items:baseline;font-size:.9375rem;line-height:1.45;
  color:var(--text);transition:color .3s ease}
.srow .sfeat span::before{content:'\2192';color:var(--magenta);flex:none;font-size:.85em}
.srow .sside{display:grid;gap:14px}
.srow .sshot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-deep);aspect-ratio:16/10}
.srow .sshot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);
  transition:filter .5s ease,transform var(--slow) var(--ease)}
.srow .smetric{font-size:clamp(1.5rem,2.1vw,2rem);font-weight:500;letter-spacing:-.035em;line-height:1;
  color:var(--magenta);font-variant-numeric:tabular-nums;white-space:nowrap}
.srow .smetric i{font-style:normal;display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;
  font-size:.5625rem;letter-spacing:.15em;text-transform:uppercase;color:var(--support)}
.srow .sspec{font-family:'IBM Plex Mono',monospace;font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--support);line-height:1.9;
  border-top:1px solid var(--rule);padding-top:12px;transition:border-color .3s ease}
.srow .sarr{position:relative;width:78px;height:12px;align-self:center;justify-self:end;
  opacity:0;transform:translateX(-16px);transition:opacity .3s ease,transform .6s var(--ease)}
.srow .sarr::before{content:'';position:absolute;left:0;right:1px;top:50%;height:1px;background:var(--magenta-hi)}
.srow .sarr::after{content:'';position:absolute;right:0;top:50%;width:8px;height:8px;
  border-top:1px solid var(--magenta-hi);border-right:1px solid var(--magenta-hi);
  transform:translateY(-50%) rotate(45deg) scale(.8)}
@media(hover:hover){
  .srow:hover::before{opacity:1}
  .srow:hover{border-bottom-color:transparent;
    margin-left:calc(-1*clamp(14px,2vw,30px));margin-right:calc(-1*clamp(14px,2vw,30px));
    padding-left:clamp(14px,2vw,30px);padding-right:clamp(14px,2vw,30px)}
  .srow:hover .sname{color:#fff}
  .srow:hover .stag,.srow:hover .sfeat span{color:rgba(242,242,242,.68)}
  .srow:hover .sstat{color:rgba(242,242,242,.8);border-color:rgba(242,242,242,.28)}
  .srow:hover .sspec{color:rgba(242,242,242,.55);border-top-color:rgba(242,242,242,.2)}
  .srow:hover .smetric{color:var(--magenta-hi)}
  .srow:hover .sshot img{filter:grayscale(0);transform:scale(1.04)}
  .srow:hover .sarr{opacity:1;transform:translateX(0)}
}
@media(max-width:1080px){.srow{grid-template-columns:1fr 1fr;gap:22px}
  .srow .sside{grid-column:1/-1}.srow .sarr{display:none}}
@media(max-width:620px){.srow{grid-template-columns:1fr}}

/* ── banda de imagen a lo ancho ── */
.band{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-deep);aspect-ratio:21/8}
.band img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);
  transition:filter .6s ease}
.band:hover img{filter:grayscale(0)}
@media(max-width:720px){.band{aspect-ratio:16/10}}


/* ── hero pegado al contenido ── */
.hero{min-height:64svh}
.hero-rail{margin-top:clamp(26px,4vh,46px);padding-bottom:14px}
.hero + section{padding-top:clamp(38px,4.4vw,66px)}
.hero + section .head{margin-bottom:clamp(30px,4vw,52px)}
.hero + section .wstats{margin-top:0}
.art{padding-top:calc(clamp(88px,11vw,168px) + 6px)}

/* ── filtro de jugadas (work) ── */
.filt{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,36px)}
.filt button{border:1px solid var(--rule);border-radius:var(--r);padding:12px 20px;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);background:transparent;line-height:1;
  transition:background var(--fast) ease,color var(--fast) ease,border-color var(--fast) ease}
.filt button:hover{border-color:var(--ink);color:var(--ink)}
.filt button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.b-ink .filt button,.b-deep .filt button{border-color:var(--rule-d);color:rgba(242,242,242,.7)}
.b-ink .filt button[aria-pressed="true"],.b-deep .filt button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink)}

/* ── model: fichas de jugada (sin imágenes, sin alternancia) ── */
.pmlist{border-top:1px solid var(--rule)}
.pmr{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,3.4vw,64px);
  padding:clamp(44px,5.2vw,78px) 0;border-bottom:1px solid var(--rule)}
.pmr:last-of-type{border-bottom:0;padding-bottom:0}
.pmr .pnum{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.16em;color:var(--magenta);margin-bottom:clamp(10px,1.4vw,18px)}
.pmr .pname{font-size:clamp(2.8rem,8.9vw,8rem);font-weight:500;line-height:.88;
  letter-spacing:-.045em;max-width:none}
.pmr .pclaim{margin-top:14px;font-size:var(--t-lead);font-weight:500;letter-spacing:-.02em;
  color:var(--ink);max-width:26ch}
.pmr .pdesc{margin-top:12px;font-size:var(--t-body);line-height:1.6;color:var(--text);max-width:40ch}
.pmr .pfoot{margin-top:clamp(22px,2.8vw,32px);padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--rule)}
.pmr .pin{margin-top:clamp(20px,2.4vw,28px);display:inline-flex}
/* entregables: hoja de especificaciones */
/* la columna de entregables arranca a la misma altura que el número de la jugada */
.dlv{padding-top:0}
.dlv-h{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--support);margin-bottom:clamp(10px,1.4vw,18px)}
.dlv-r{display:grid;grid-template-columns:minmax(150px,215px) 1fr;gap:8px clamp(18px,2.4vw,34px);
  padding:clamp(14px,1.7vw,19px) 0;border-top:1px solid var(--rule);align-items:baseline;
  transition:border-color var(--fast) ease}
.dlv-r:last-child{border-bottom:1px solid var(--rule)}
.dlv-r b{font-weight:500;font-size:clamp(1.0625rem,1.25vw,1.1875rem);letter-spacing:-.018em;color:var(--ink);
  display:flex;gap:10px;align-items:baseline;transition:color var(--fast) ease}
.dlv-r b::before{content:'\2192';color:var(--magenta);font-size:.85em;flex:none;
  transition:transform var(--med) var(--ease)}
.dlv-r span{font-size:.9375rem;line-height:1.55;color:var(--text)}
@media(hover:hover){
  .pmr:hover .dlv-r b::before{transform:translateX(3px)}
  .pmr:hover .dlv-r:nth-child(3) b::before{transition-delay:.04s}
  .pmr:hover .dlv-r:nth-child(4) b::before{transition-delay:.08s}
  .pmr:hover .dlv-r:nth-child(5) b::before{transition-delay:.12s}
  .pmr:hover .dlv-r:nth-child(6) b::before{transition-delay:.16s}
}
@media(max-width:900px){.pmr{grid-template-columns:1fr;gap:26px}}
@media(max-width:620px){.dlv-r{grid-template-columns:1fr;gap:4px}}

/* ── news: destacadas ── */
.nfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(20px,2.6vw,32px)}
@media(max-width:900px){.nfgrid{grid-template-columns:1fr}}
.nfeat{display:grid;gap:12px;align-content:start}
.nf-img{margin:0 0 4px;border-radius:var(--r);overflow:hidden;background:var(--ink-deep);aspect-ratio:16/10}
.nf-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);
  transition:filter .5s ease,transform var(--slow) var(--ease)}
.nfeat:hover .nf-img img{filter:grayscale(0);transform:scale(1.03)}
.nf-k{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--magenta)}
.nf-t{font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:500;line-height:1.25;letter-spacing:-.022em;
  color:var(--ink);max-width:30ch;transition:color .25s ease}
.nfeat:hover .nf-t{color:var(--magenta)}
.nf-d{font-size:.9375rem;line-height:1.55;color:var(--text);max-width:38ch}
.nf-r{color:var(--magenta)}
/* ── news: listado con miniatura ── */
.nlist{border-top:1px solid var(--rule)}
.nl-row{display:grid;grid-template-columns:92px 1fr auto 64px;gap:10px clamp(16px,2.2vw,28px);
  align-items:center;padding:clamp(12px,1.6vw,18px) 0;border-bottom:1px solid var(--rule)}
.nl-th{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-deep);aspect-ratio:4/3}
.nl-th img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);
  transition:filter .5s ease,transform var(--slow) var(--ease)}
.nl-row:hover .nl-th img{filter:grayscale(0);transform:scale(1.05)}
.nl-t{font-weight:500;font-size:clamp(1rem,1.3vw,1.1875rem);letter-spacing:-.02em;line-height:1.35;
  color:var(--ink);transition:color .25s ease;max-width:60ch}
.nl-row:hover .nl-t{color:var(--magenta)}
.nl-d{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--support);white-space:nowrap}
@media(max-width:720px){.nl-row{grid-template-columns:68px 1fr;gap:8px 16px}
  .nl-row .nl-d{grid-column:2}.nl-row .nw-arr{display:none}}

/* ── proceso en línea: ocupa todo el ancho, flechas largas ── */
.flow{display:flex;align-items:center;width:100%;gap:clamp(8px,1.1vw,16px);
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.15em;text-transform:uppercase}
.flow span{flex:0 0 auto;border:1px solid var(--rule-d);border-radius:var(--r);
  padding:13px clamp(14px,1.8vw,24px);color:rgba(242,242,242,.86);white-space:nowrap}
.flow i{flex:1 1 auto;position:relative;height:12px;min-width:26px;font-size:0;line-height:0;
  --fl:var(--magenta-hi)}
/* la línea llega hasta el vértice: cabeza y línea son una sola pieza */
/* el pulso viaja hacia la punta. background-size < 100% para que un
   background-position creciente mueva de verdad hacia la derecha */
.flow i::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  transform:translateY(-50%);
  background-color:color-mix(in srgb,var(--fl) 32%,transparent);
  background-image:linear-gradient(90deg,transparent 0,var(--fl) 50%,transparent 100%);
  background-size:38% 100%;background-repeat:no-repeat;
  animation:flowrun 3.2s linear infinite}
.flow i::after{content:'';position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1px solid var(--fl);border-right:1px solid var(--fl);
  transform:translate(-1px,-50%) rotate(45deg);
  animation:flowtip 3.2s linear infinite}
.flow i:nth-of-type(2)::before,.flow i:nth-of-type(2)::after{animation-delay:.36s}
.flow i:nth-of-type(3)::before,.flow i:nth-of-type(3)::after{animation-delay:.72s}
.flow i:nth-of-type(4)::before,.flow i:nth-of-type(4)::after{animation-delay:1.08s}
@keyframes flowrun{0%{background-position:-40% 0}62%,100%{background-position:140% 0}}
@keyframes flowtip{0%,52%{opacity:.45}62%{opacity:1}100%{opacity:.45}}
/* sobre fondo claro */
.b-gray .flow span,.b-white .flow span{border-color:var(--rule);color:var(--text)}
.b-gray .flow i,.b-white .flow i{--fl:var(--magenta)}
@media(prefers-reduced-motion:reduce){
  .flow i::before{animation:none;background:var(--fl)}
  .flow i::after{animation:none;opacity:1}
}
@media(max-width:720px){
  .flow{flex-wrap:wrap;gap:10px 12px}
  .flow i{flex:0 0 34px;min-width:34px}
}

/* ── variante clara de las cards informativas (no las de "no somos") ── */
.nots.plain .not{background:var(--bg);border:0;color:var(--ink);
  transition:background var(--fast) ease}
.nots.plain .not h3{color:var(--ink)}
.nots.plain .not p{color:var(--text)}
.nots.plain .not .label{color:var(--support)}
.nots.plain .not .mono{color:var(--magenta)}
.b-white .nots.plain .not{background:var(--bg)}
.b-gray .nots.plain .not{background:var(--white)}

/* ── mapa de puntos (hubs) ── */
.mp{width:100%;height:auto;display:block;overflow:visible}
.mp-land circle{r:2.05px;fill:rgba(29,29,31,.17)}
.b-ink .mp-land circle,.b-deep .mp-land circle{fill:rgba(242,242,242,.2)}
.mp-city{fill:var(--magenta)}
.mp-halo{fill:none;stroke:var(--magenta);stroke-width:1;opacity:.35;
  transform-box:fill-box;transform-origin:center;animation:mp-pulse 3.6s var(--ease) infinite}
.mp-halo:nth-of-type(2){animation-delay:.5s}
.mp-halo:nth-of-type(3){animation-delay:1s}
.mp-lb{paint-order:stroke;stroke:var(--white);stroke-width:4px;stroke-linejoin:round;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--ink)}
.b-ink .mp-lb,.b-deep .mp-lb{fill:#fff}
@keyframes mp-pulse{0%,100%{transform:scale(.72);opacity:.42}50%{transform:scale(1.12);opacity:.08}}
@media(prefers-reduced-motion:reduce){.mp-halo{animation:none;opacity:.3}}
.mapwrap{margin-top:clamp(26px,3.4vw,44px)}
@media(max-width:620px){.mp-lb{font-size:18px}}

/* ══ caso de estudio (case study) ══════════════════════════════════ */
.cs{padding-top:calc(clamp(88px,11vw,168px) + 34px);padding-bottom:clamp(46px,6vw,84px)}
.cs-back{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--support);
  margin-bottom:clamp(24px,3.2vw,40px);transition:color var(--fast) ease}
.cs-back:hover{color:var(--magenta)}
.cs h1{max-width:19ch;letter-spacing:-.036em}
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:22px clamp(18px,2.6vw,40px);
  margin-top:clamp(32px,4.4vw,58px);padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--rule)}
.cs-meta div{display:grid;gap:9px;align-content:start}
.cs-meta .k{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--support)}
.cs-meta .v{font-weight:500;letter-spacing:-.018em;color:var(--ink)}
.cs-meta .v .tlink{font-weight:500}
.cs-shot{margin:clamp(34px,4.6vw,64px) 0 0}
.cs-shot .ph{display:block;position:relative;height:0;padding-top:39.5540%;
  border-radius:var(--r);overflow:hidden;background:var(--bg)}
.cs-shot .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* secciones narrativas: banda propia, más aire, menos densidad */
.cs-s{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px)}
.cs-s .head{margin-bottom:clamp(24px,3vw,38px)}
.cs-s h2{max-width:26ch}
.cs-lead{font-size:var(--t-lead);line-height:1.5;letter-spacing:-.018em;color:var(--ink);max-width:40ch}
.b-ink .cs-lead,.b-deep .cs-lead{color:var(--bg)}
.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,52px);
  margin-top:clamp(24px,3vw,40px)}
.cs-cols p{color:var(--text);max-width:44ch}

/* cifras del bloque de resultado */
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px clamp(24px,4vw,64px)}
.cs-fig{display:block;font-size:clamp(2.5rem,5vw,4.2rem);font-weight:500;line-height:1;
  letter-spacing:-.045em;color:var(--magenta);font-variant-numeric:tabular-nums}
.cs-stats div:nth-child(n+2) .cs-fig{color:var(--ink)}
.cs-fl{display:block;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text)}

/* lista numerada de entregables */
.cs-list{border-top:1px solid var(--rule)}
.cs-li{display:grid;grid-template-columns:56px 1fr;gap:6px clamp(14px,2.2vw,32px);
  padding:clamp(18px,2.4vw,28px) 0;border-bottom:1px solid var(--rule)}
.cs-li .n{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;
  color:var(--magenta);padding-top:.45em}
.cs-li b{display:block;font-weight:500;font-size:clamp(1.0625rem,1.4vw,1.3125rem);
  letter-spacing:-.022em;color:var(--ink);margin-bottom:8px}
.cs-li p{color:var(--text);max-width:70ch}

/* cita a toda página */
.cs-q{border-left:2px solid var(--magenta);padding-left:clamp(20px,3vw,40px)}
.cs-q p{font-size:clamp(1.5rem,2.6vw,2.35rem);font-weight:400;line-height:1.24;
  letter-spacing:-.03em;color:var(--bg);max-width:19ch}
.cs-q cite{display:block;font-style:normal;margin-top:clamp(20px,2.6vw,32px);
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--support)}
.b-white .cs-q p,.b-gray .cs-q p{color:var(--ink)}

/* piezas intercaladas en cada sección */
.cs-gal{display:flex;flex-direction:column;gap:clamp(26px,3vw,44px);
  margin-top:clamp(36px,4.6vw,70px)}
.cs-row{--g:clamp(10px,1.3vw,18px);display:flex;gap:var(--g);align-items:start}
.cs-gal figure{margin:0;display:block;min-width:0}
/* caja de proporción con padding: compatible con cualquier navegador */
.cs-gal .ph{display:block;position:relative;height:0;overflow:hidden;
  border-radius:var(--r);background:var(--bg)}
.cs-gal .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--slow) var(--ease)}
.cs-gal figure:hover .ph img{transform:scale(1.012)}
.cs-gal figcaption{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--support);padding-top:14px}
@media(max-width:760px){
  .cs-meta{grid-template-columns:repeat(2,1fr)}
  .cs-cols{grid-template-columns:1fr}
  .cs-shot .ph{padding-top:62%}
  .cs-stats{grid-template-columns:1fr;gap:22px}
  .cs-row{flex-direction:column;gap:22px}
  .cs-gal figure{flex:0 0 auto!important;width:100%!important}
  .cs-li{grid-template-columns:1fr;gap:8px}
  .cs-li .n{padding-top:0}
  .cs-q p{max-width:none}
}

/* ── variantes de retícula (sin estilos en línea, para que respeten los breakpoints) ── */
.nots.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.nots.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.nots.three{grid-template-columns:1fr}}
.tline.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.tline.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.tline.five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tline.five{grid-template-columns:1fr}}
/* los ítems de retícula no deben poder desbordar su contenedor */
.cols>*,.vs>*,.nots>*,.tline>*,.plans>*,.wgrid>*,.cs-cols>*,.cs-stats>*,.srow>*,.pmr>*{min-width:0}
p,li,h1,h2,h3,.cs-fig,.fig{overflow-wrap:break-word}

/* ── reveals: solo en interiores (raven.js añade .in). La portada tiene su propio sistema ── */
/* ── reveals: sutiles, fluidos, con stagger ── */
.rv{opacity:0;transform:translateY(12px);
  transition:opacity .9s ease,transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(12px);
  transition:opacity .85s ease,transform 1s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(2){transition-delay:.11s}
.stag.in>*:nth-child(3){transition-delay:.22s}
.stag.in>*:nth-child(4){transition-delay:.33s}
.stag.in>*:nth-child(5){transition-delay:.44s}
.stag.in>*:nth-child(6){transition-delay:.55s}
.stag.in>*:nth-child(7){transition-delay:.66s}
.stag.in>*:nth-child(8){transition-delay:.77s}
@media(prefers-reduced-motion:reduce){.rv,.stag>*{opacity:1;transform:none}}

/* ── página de contacto ─────────────────────────────────────────── */
.cform{margin-top:clamp(28px,3.6vw,44px);display:grid;gap:clamp(18px,2.4vw,26px);
  max-width:820px}
.cf-bot{position:absolute;left:-9999px}
.cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,24px)}
@media(max-width:640px){.cf-row{grid-template-columns:1fr}}
.cf-wide{grid-column:1/-1}
.cform label{display:grid;gap:9px}
.cform label>span{font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--support);
  transition:color var(--med) var(--ease),transform var(--med) var(--ease)}
.cform label:focus-within>span{color:var(--magenta);transform:translateX(3px)}
.cform input,.cform select,.cform textarea{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:1.0625rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 16px;outline:none;
  transition:background var(--med) var(--ease),border-color var(--med) var(--ease),
             box-shadow var(--med) var(--ease)}
.cform input:hover,.cform select:hover,.cform textarea:hover{border-color:rgba(29,29,31,.3)}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  background:var(--white);border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.10)}
.cform input:user-valid,.cform textarea:user-valid{border-color:rgba(29,29,31,.42)}
.cform input:user-invalid,.cform textarea:user-invalid{border-color:var(--magenta);
  box-shadow:0 0 0 3px rgba(217,0,105,.12)}
.cform textarea{min-height:150px;line-height:1.55;resize:vertical}
.cform select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231D1D1F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.cf-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.4vw,28px);
  margin-top:clamp(4px,1vw,10px)}
.cf-send .mono{color:var(--support);letter-spacing:.14em;text-transform:uppercase;
  font-size:var(--t-mono)}

/* ── los hubs ── */
.hubgrid{margin-top:clamp(28px,3.6vw,44px);display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
@media(max-width:1080px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hubgrid{grid-template-columns:1fr}}
.hub{display:grid;gap:8px;align-content:start;background:var(--white);
  border-radius:var(--r);padding:clamp(20px,2.4vw,28px);
  transition:transform var(--med) var(--ease)}
.hub:hover{transform:translateY(-3px)}
.hb-c{font-weight:500;font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.026em;color:var(--ink)}
.hb-r{margin:0;color:var(--magenta)}
.hb-a{margin-top:4px;color:var(--text);font-size:.9375rem;line-height:1.55}
.hb-todo{color:var(--support);border-bottom:1px dashed var(--support);padding-bottom:1px}
.hb-m{margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:6px;justify-self:start;
  transition:color .25s ease,border-color .25s ease}
.hb-m:hover{color:var(--magenta);border-color:var(--magenta)}
.hb-tz{color:var(--support)}
.tline.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.tline.three{grid-template-columns:1fr}}