/* ============================================================
   RESONANCE — capa de arquitectura multipágina
   Se apoya en base.css (sistema original preservado).
   Aquí SOLO viven componentes nuevos: portal, páginas internas,
   breadcrumbs, marquesina de colaboraciones, listados editoriales.
   ============================================================ */

/* ---------- Ajustes de navegación multipágina ---------- */
.navlinks a.here{opacity:1;font-weight:500}
.navlinks a.here::after{transform:scaleX(1)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:.8em 1.2em;border-radius:0 0 10px 0;font-size:.85rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.navig:focus-visible,.casa:focus-visible{outline-offset:4px}

/* ============================================================
   PORTAL RESONANCE — tres accesos como filas editoriales.
   Decisiones:
   · Papel blanco sólido. El campo iridiscente queda ARRIBA, no debajo:
     un efecto encima de un fondo en movimiento se lee como ruido.
   · Nada de tarjetas, vidrio ni sombras. Sólo hairlines y tipografía.
   · La única animación es una onda que pasa de plana a resonando.
     Es literalmente la marca, no un adorno.
   ============================================================ */
.portal{position:relative;z-index:3;background:#fff;border-top:1px solid var(--ink-12)}
.portal-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.gate{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:.2rem 1.4rem;padding:clamp(20px,3.4vw,30px) 0;border-bottom:1px solid var(--ink-12);
  text-align:left;isolation:isolate;transition:padding-left .55s cubic-bezier(.2,.8,.2,1)}
.portal-grid .gate:last-child{border-bottom:0}
/* barra iridiscente que crece desde el borde izquierdo */
.gate::before{content:"";position:absolute;left:calc(var(--gut) * -1);top:0;bottom:0;width:3px;
  background:var(--holo-lin);background-size:100% 300%;animation:holoslide 7s linear infinite;
  transform:scaleY(0);transform-origin:50% 0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gate .gk{grid-column:1;white-space:nowrap;width:max-content;padding-right:.1em;font-family:var(--portal);font-weight:var(--portal-w);
  font-size:clamp(1.85rem,5.2vw,2.6rem);line-height:1;letter-spacing:var(--portal-ls);color:var(--ink);
  transition:opacity .4s}
.gate .gd{grid-column:1;font-size:clamp(.86rem,3vw,.96rem);font-weight:300;color:var(--ink-55);
  margin-top:.34rem;transition:color .4s}
.gate .gw{grid-column:1;display:block;height:30px;margin-top:.75rem;color:var(--ink-38);
  max-width:min(100%,340px);transition:color .5s}
.gate .gw canvas{width:100%;height:30px;display:block}
.gate .geye{grid-column:2;grid-row:1 / span 3;align-self:center;display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--ink-12);color:var(--ink-38);flex:none;
  transition:color .45s,border-color .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.gate .geye .ojo{width:26px;height:auto}

/* --- resonar --- */
.gate:hover,.gate:focus-visible{padding-left:clamp(12px,1.6vw,20px)}
.gate:hover::before,.gate:focus-visible::before{transform:scaleY(1)}
.gate:hover .gk,.gate:focus-visible .gk{
  background:var(--holo-lin);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:holoslide 9s linear infinite;
  filter:saturate(1.8) brightness(.72)}
.gate:hover .gd,.gate:focus-visible .gd{color:var(--ink-70)}
.gate:hover .gw,.gate:focus-visible .gw{color:var(--ink)}
.gate:hover .geye,.gate:focus-visible .geye{color:var(--ink);border-color:var(--ink);transform:scale(1.05)}

/* táctil: sin hover, la onda late apenas por sí sola */
@media(hover:none){
  .gate:active{padding-left:12px}
  .gate:active::before{transform:scaleY(1)}
}
@media(min-width:820px){
  /* columnas FIJAS: si fueran 'auto', cada fila se mediría por su propio
     título y las tres quedarían desalineadas entre sí. */
  .gate{grid-template-columns:34% minmax(0,1fr) auto;gap:0 clamp(24px,3.4vw,48px);
    align-items:center;padding:clamp(22px,2.8vw,32px) 0}
  .gate .gk{grid-column:1;grid-row:1}
  .gate .gd{grid-column:2;grid-row:1;margin-top:0;font-size:1rem;white-space:nowrap}
  .gate .gw{grid-column:2;grid-row:2;margin-top:.55rem;max-width:280px}
  .gate .geye{grid-column:3;grid-row:1 / span 2}
}

/* hero: el portal se apoya justo debajo del campo */
.hero.extended{min-height:auto;padding-bottom:clamp(24px,5vh,52px)}
.hero.extended .heroin{padding-top:clamp(104px,15vh,180px);padding-bottom:clamp(30px,6vh,58px)}
.hero.extended::after{height:22%}
@media(min-width:860px){.hero.extended{min-height:92svh}}

/* --- kicker: más presente sin perder finura ---
   Antes: 0.63rem, tracking .3em, gradiente clipeado (se lavaba en laptop).
   Ahora: cuerpo mayor, peso 700, gradiente más saturado y oscurecido,
   más un filete a cada lado que lo ancla ópticamente. */
.kicker{display:flex;align-items:center;justify-content:center;gap:.85rem;
  font-size:clamp(.72rem,2.5vw,.82rem);font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-70);margin-bottom:clamp(16px,2.8vw,22px)}
.kicker::before,.kicker::after{content:"";height:1px;width:clamp(18px,5vw,44px);flex:none;
  background:var(--holo-lin);background-size:300% 100%;animation:holoslide 9s linear infinite;opacity:.9}
.kicker b{font-weight:700;background:var(--holo-lin);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:holoslide 9s linear infinite;filter:saturate(2.6) brightness(.52);
  text-shadow:0 0 18px rgba(255,255,255,.5)}
/* en encabezados internos el kicker va alineado a la izquierda y sin filetes */
.phead .kicker{justify-content:flex-start}
.phead .kicker::before,.phead .kicker::after{display:none}

/* ---------- Encabezado de página interna ---------- */
.phead{position:relative;isolation:isolate;overflow:hidden;padding:clamp(104px,14vh,164px) 0 clamp(38px,6vw,66px)}
.phead canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.55),rgba(255,255,255,.86) 62%,#fff)}
.phead h1{font-size:clamp(1.9rem,6.6vw,3.5rem);max-width:19ch;margin:0;font-family:var(--display);font-weight:200;letter-spacing:-.03em;line-height:1.06}
.phead .lead{margin-top:clamp(14px,2.6vw,22px)}
.phead .herocta{justify-content:flex-start;margin-top:clamp(24px,4vw,34px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-38);margin-bottom:clamp(16px,3vw,24px)}
.crumbs a{transition:color .25s}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.42}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- Bloque editorial de dos columnas ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,54px);align-items:start}
@media(min-width:900px){.split{grid-template-columns:.85fr 1.15fr}}
.split .sticky{position:static}
@media(min-width:900px){.split .sticky{position:sticky;top:clamp(96px,12vh,124px)}}
.prose p{color:var(--ink-55);margin-bottom:1rem;max-width:64ch}
.prose p strong,.prose strong{font-weight:500;color:var(--ink)}
.prose h3{margin:clamp(24px,4vw,36px) 0 .6rem;font-size:1.05rem}

/* ---------- Modalidades / pasos numerados ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ink-12);border:1px solid var(--ink-12);border-radius:var(--r);overflow:hidden}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:#fff;padding:clamp(24px,4vw,32px);position:relative;isolation:isolate;overflow:hidden;transition:background .5s}
.step::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .55s;background:var(--holo-lin);background-size:240% 100%;animation:holoslide 9s linear infinite}
.step:hover::before{opacity:.5}
.step .sn{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--ink-38);margin-bottom:1.1rem;display:block}
.step h3{font-size:1.02rem;margin-bottom:.5rem}
.step p{font-size:.93rem;color:var(--ink-70)}

/* ---------- Listado de capacidades (subordinado, no protagonista) ---------- */
.caps{display:grid;grid-template-columns:1fr;gap:.1rem 2rem;margin-top:1.2rem}
@media(min-width:640px){.caps{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.caps{grid-template-columns:repeat(3,1fr)}}
.caps li{list-style:none;font-size:.92rem;color:var(--ink-55);padding:.5rem 0;border-bottom:1px solid var(--ink-06);display:flex;align-items:center;gap:.6rem}
.caps li::before{content:"";width:4px;height:4px;border-radius:50%;flex:none;background:var(--holo-lin);background-size:300% 100%;animation:holoslide 6s linear infinite}

/* ---------- Chips de formatos ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.chip{font-size:.78rem;font-weight:400;color:var(--ink-70);border:1px solid var(--ink-12);border-radius:999px;padding:.5em 1em;background:#fff;position:relative;isolation:isolate;overflow:hidden;transition:color .4s,border-color .4s}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;background:var(--holo-lin);background-size:280% 100%;animation:holoslide 7s linear infinite}
.chip:hover{border-color:transparent;color:var(--ink)}
.chip:hover::before{opacity:.85}

/* ---------- Públicos ---------- */
.aud-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.aud-list span{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);background:var(--ink-06);border-radius:999px;padding:.5em 1em}

/* ---------- Cita / idea diferencial ---------- */
.claim{margin:clamp(34px,6vw,60px) 0;padding:clamp(26px,5vw,44px);border-radius:var(--r);position:relative;isolation:isolate;overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--ink-06),0 20px 50px rgba(10,10,10,.06)}
.claim::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--holo-lin);background-size:240% 100%;animation:holoslide 13s linear infinite;opacity:.34}
.claim p{font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,4vw,1.55rem);line-height:1.32;letter-spacing:-.02em;color:var(--ink);max-width:32ch;margin:0}

/* ---------- Marquesina de COLABORACIONES ---------- */
.colabs{border-top:1px solid var(--ink-06);border-bottom:1px solid var(--ink-06);padding:clamp(30px,5vw,48px) 0;background:#fff}
.colabs .lbl{text-align:center;font-size:.6rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-38);margin-bottom:clamp(18px,3vw,26px)}
.colabs .track{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.colabs .row{display:flex;width:max-content;animation:mq 64s linear infinite;will-change:transform}
.colabs:hover .row,.colabs:focus-within .row{animation-play-state:paused}
.colabs .it{display:flex;align-items:center;gap:.7rem;padding:0 clamp(20px,3vw,38px);white-space:nowrap;font-family:var(--display);font-weight:300;font-size:clamp(.92rem,2.8vw,1.14rem);letter-spacing:-.01em;color:var(--ink-55);transition:color .4s}
.colabs .it:hover{color:var(--ink)}
.colabs .it img{height:clamp(18px,2.6vw,26px);width:auto;opacity:.62;filter:grayscale(1);transition:opacity .4s,filter .4s}
.colabs .it:hover img{opacity:1;filter:grayscale(0)}
.colabs .dot{width:4px;height:4px;border-radius:50%;flex:none;background:var(--holo-lin);background-size:300% 100%;animation:holoslide 6s linear infinite;align-self:center}
.colabs .note{text-align:center;font-size:.68rem;color:var(--ink-38);margin-top:clamp(16px,2.6vw,22px);padding:0 var(--gut);line-height:1.6}
.colabs .ctrl{display:block;margin:clamp(14px,2vw,18px) auto 0;background:none;border:1px solid var(--ink-12);border-radius:999px;padding:.42em 1em;font:inherit;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-38);cursor:pointer;transition:color .3s,border-color .3s}
.colabs .ctrl:hover{color:var(--ink);border-color:var(--ink-38)}
.colabs.paused .row{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.colabs .row{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:.6rem 0}}

/* ---------- Ficha de talento ---------- */
.tal-hero{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vw,48px);align-items:start}
@media(min-width:820px){.tal-hero{grid-template-columns:.72fr 1.28fr}}
.tal-ph{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--holo-lin);background-size:240% 100%;animation:holoslide 14s linear infinite;isolation:isolate}
.tal-ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.tal-ph .ini{position:absolute;inset:0;z-index:0;display:grid;place-items:center;font-family:var(--display);font-weight:200;font-size:clamp(2.4rem,9vw,3.4rem);letter-spacing:.08em;color:rgba(10,10,10,.4)}
.tal-ph img.ok+.ini{display:none}
.tal-role{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38);margin-top:.7rem}
.rel{display:inline-flex;align-items:center;gap:.5rem;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.5em 1em;border-radius:999px;background:var(--ink);color:#fff;margin-bottom:1.1rem}
.rel.soft{background:var(--ink-06);color:var(--ink-70)}
.links-of{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.links-of a{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:500;border:1px solid var(--ink-12);border-radius:999px;padding:.55em 1.05em;position:relative;isolation:isolate;overflow:hidden;transition:border-color .4s}
.links-of a::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;background:var(--holo-lin);background-size:280% 100%;animation:holoslide 7s linear infinite}
.links-of a:hover{border-color:transparent}
.links-of a:hover::before{opacity:1}
.links-of svg{width:15px;height:15px;fill:currentColor}

/* ---------- Grilla de talentos con agrupación honesta ---------- */
.grouplbl{display:flex;align-items:baseline;gap:1rem;margin:clamp(34px,5vw,52px) 0 clamp(18px,3vw,26px);flex-wrap:wrap}
.grouplbl h3{font-family:var(--display);font-weight:200;font-size:clamp(1.25rem,4.4vw,1.75rem);letter-spacing:-.025em}
.grouplbl span{font-size:.78rem;color:var(--ink-38);font-weight:300}
.card.link .meta h3{transition:opacity .3s}
.card.link:hover .meta h3{opacity:.66}
.card .go{display:inline-flex;align-items:center;gap:.35rem;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-38);margin-top:.5rem}

/* ---------- CTA de cierre reutilizable ---------- */
.endcta{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,9vw,104px) 0;text-align:center}
.endcta canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.endcta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,#fff,rgba(255,255,255,.78) 45%,rgba(255,255,255,.9));pointer-events:none}
.endcta h2{max-width:20ch;margin:0 auto 1rem}
.endcta .lead{margin:0 auto;text-align:center}

/* ---------- Aviso de próximos eventos (sin agenda vacía) ---------- */
.igsoft{font-size:.82rem;color:var(--ink-55);margin-top:clamp(20px,3vw,28px)}
.igsoft a{border-bottom:1px solid var(--ink-12);font-weight:500;color:var(--ink);transition:border-color .3s}
.igsoft a:hover{border-bottom-color:var(--ink)}

/* ---------- 404 ---------- */
.e404{min-height:78svh;display:grid;place-items:center;text-align:center;position:relative;isolation:isolate;overflow:hidden}
.e404 canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.e404::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(255,255,255,.6),#fff 88%)}
.e404 .code{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;color:var(--ink-38);margin-bottom:1.2rem}

/* ---------- Footer multipágina ---------- */
.fnav{display:flex;flex-direction:column;gap:.5rem}
.fnav a{font-size:.85rem;color:rgba(255,255,255,.66);transition:color .25s}
.fnav a:hover{color:#fff}

/* ---------- select del formulario, con la misma línea que los inputs ---------- */
.cform select{font:inherit;font-size:1rem;font-weight:300;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink-12);padding:.55rem 1.6rem .6rem 0;border-radius:0;transition:border-color .3s;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .1rem center;background-size:15px}
.cform select:focus{outline:none;border-bottom-color:var(--ink)}
.cform label>select{width:100%}

/* ---------- Campos WebGL enlazados por atributo ----------
   base.css sólo posicionaba #bgfx y #bgfx2 (marcado del sitio de una
   sola página). En la arquitectura multipágina el canvas se declara
   con data-bg, así que necesita su propia regla de posicionamiento. */
.hero>canvas[data-bg],.contact>canvas[data-bg],.phead>canvas[data-bg],
.endcta>canvas[data-bg],.e404>canvas[data-bg]{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}

/* ---------- Reveal a prueba de fallos ----------
   Si el JS no corre (error, bloqueador, red caída), el contenido debe
   verse igual. Sólo se oculta cuando sabemos que hay JS para revelarlo. */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(20px)}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}}

/* ---------- Utilidad: encabezado sólo para lectores de pantalla ----------
   La jerarquía semántica no siempre coincide con la jerarquía visual.
   Cuando el diseño no pide un h2 visible pero la estructura lo necesita. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grouplbl h2{font-family:var(--display);font-weight:200;font-size:clamp(1.25rem,4.4vw,1.75rem);letter-spacing:-.025em;line-height:1.15}

/* ---------- Áreas táctiles (WCAG 2.2 · objetivo mínimo) ---------- */
.navlogo{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
.flinks a,.fnav a{display:inline-flex;align-items:center;min-height:32px;padding:3px 0}
.crumbs a{display:inline-flex;align-items:center;min-height:26px}
.langsw button,.langsw a{min-height:34px;display:grid;place-items:center}

/* ============================================================
   TIPOGRAFÍA DEL PORTAL
   Sora 200 era neutra y sin carácter. Instrument Serif tiene alto
   contraste entre trazo grueso y fino: se lee fina y elegante, pero
   pesa más ópticamente que Sora 200, que es lo que faltaba.
   Su registro es editorial/cultural, no de startup.

   ¿Preferís otra? Cambiá SOLO estas tres líneas y rebuildeá:
     Syne 600        → --portal:'Syne'; --portal-w:600; --portal-ls:-.02em
     Fraunces 400    → --portal:'Fraunces'; --portal-w:400; --portal-ls:-.015em
     Sora 300        → --portal:var(--display); --portal-w:300; --portal-ls:-.03em
   (las tres ya vienen cargadas desde Google Fonts)
   ============================================================ */
:root{
  --portal:'Instrument Serif',Georgia,'Times New Roman',serif;
  --portal-w:400;
  --portal-ls:-.015em;
}

/* ---------- Bloques comerciales: el título es h2 ---------- */
.blk h2{margin-bottom:.5rem;font-size:1.05rem;font-family:var(--text);font-weight:500;letter-spacing:-.01em;line-height:1.3}

/* ---------- Capacidades: microrreacción al pasar el mouse ----------
   Muy leve: se corre 4px, el punto crece y la línea se marca.
   Suficiente para que la lista se sienta viva sin distraer. */
.caps li{transition:transform .38s cubic-bezier(.2,.8,.2,1),color .38s,border-color .38s;will-change:transform}
.caps li::before{transition:transform .38s cubic-bezier(.2,.8,.2,1),width .38s,height .38s}
.caps li:hover{transform:translateX(4px);color:var(--ink);border-bottom-color:var(--ink-12)}
.caps li:hover::before{transform:scale(1.9)}
@media(prefers-reduced-motion:reduce){.caps li:hover{transform:none}}

/* ---------- Marquesina de colaboraciones: sólo logos ---------- */
.colabs{padding:clamp(26px,4vw,42px) 0}
.colabs .lbl{margin-bottom:clamp(16px,2.6vw,24px)}
.colabs .row{align-items:center}
.colabs .it{display:flex;align-items:center;justify-content:center;padding:0 clamp(22px,3.4vw,44px);
  height:clamp(46px,6vw,62px);white-space:nowrap}
.colabs .it img{max-height:100%;width:auto;max-width:clamp(110px,15vw,170px);object-fit:contain;
  opacity:.55;filter:grayscale(1);transition:opacity .4s,filter .4s}
.colabs .it:hover img{opacity:1;filter:grayscale(0)}
/* logos pensados para fondo oscuro: se invierten para vivir sobre papel */
.colabs .it.inv img{filter:grayscale(1) invert(1);opacity:.62}
.colabs .it.inv:hover img{filter:grayscale(1) invert(1);opacity:.95}
/* si todavía no hay archivo de logo, el nombre compuesto tipográficamente */
.colabs .it .tipo{font-family:var(--display);font-weight:300;font-size:clamp(.9rem,2.8vw,1.1rem);
  letter-spacing:-.01em;color:var(--ink-38);transition:color .4s}
.colabs .it:hover .tipo{color:var(--ink)}

/* ---------- Tarjeta de talento: ojo en lugar de texto ---------- */
.card .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;color:var(--ink-38);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .35s,border-color .35s}
.card .go .ojo{width:22px;height:auto}
.card .go .lbl{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.card.link:hover .go,.card.link:focus-visible .go{color:var(--ink);border-bottom-color:var(--ink)}
.card.link:active .go{color:var(--ink);border-bottom-color:var(--ink);background:var(--ink-06);border-radius:4px;padding:0 .4rem 2px}
.card.link:hover .meta h3{opacity:1}

/* ---------- Footer compacto ----------
   Mismo contenido, bastante menos alto: interlineado ajustado,
   separaciones mínimas y relojes en una sola fila. */
footer{padding:clamp(26px,3.4vw,38px) 0 clamp(12px,1.4vw,16px);line-height:1.35}
.frow{gap:clamp(18px,2.6vw,32px)}
.fcol h5{margin-bottom:.5rem;font-size:.55rem;letter-spacing:.2em}
.flinks{gap:.1rem}
.fcol:first-child .flinks{gap:.05rem}
.flinks a,.flinks span,.fnav a{font-size:.82rem;line-height:1.35;min-height:0;padding:2px 0}
.fnav{gap:.1rem}
.social{margin-top:.55rem;gap:.45rem}
.social a{width:34px;height:34px}
.social svg{width:16px;height:16px}
.fbtns{margin-bottom:0;margin-top:.7rem!important}
.igbig{padding:.44em .9em;font-size:.8rem}
.igbig svg{width:15px;height:15px}
.clocks{grid-template-columns:repeat(2,auto);gap:.24rem 1.6rem;justify-content:start}
.clock .hora{font-size:.86rem;letter-spacing:.04em}
.clock .pais{font-size:.55rem;width:30px}
.fbot{margin-top:clamp(16px,2.2vw,24px);padding-top:.75rem;gap:.4rem 1rem}
.fbot img{height:14px}
.razon{font-size:clamp(.7rem,2vw,.82rem);letter-spacing:.12em}
.fbot .der{font-size:.58rem}
@media(min-width:900px){
  .frow{grid-template-columns:.9fr .8fr 1fr}
  .clocks{grid-template-columns:repeat(4,auto);gap:.24rem 1.9rem}
}

/* ============================================================
   EXPERIENCIAS PARA ARTISTAS Y COMUNIDADES
   ------------------------------------------------------------
   Tratamiento aparte a propósito: esta línea no usa el bloque de
   tres columnas del resto del sitio. Cambia el ritmo (más aire),
   la escala (tipografía mayor) y el centro de gravedad (centrado,
   no alineado a izquierda). El pasaje de audiencia a comunidad se
   cuenta con el lienzo, no con más texto.
   ============================================================ */
.linea{position:relative;padding:clamp(64px,11vw,132px) 0;background:#fff;
  border-top:1px solid var(--ink-06);border-bottom:1px solid var(--ink-06);overflow:hidden}
.linea .wrap{text-align:center}
.linea .eyebrow{margin-bottom:clamp(14px,2.4vw,20px)}
.linea h2{font-family:var(--portal);font-weight:var(--portal-w);letter-spacing:var(--portal-ls);
  font-size:clamp(2.1rem,7.4vw,4rem);line-height:1.02;max-width:16ch;margin:0 auto}
.linea .intro{margin:clamp(16px,2.6vw,24px) auto 0;max-width:52ch;font-size:clamp(1rem,3.2vw,1.12rem);
  font-weight:300;color:var(--ink-55);line-height:1.55}

/* el lienzo: platea → ronda */
.aforo{position:relative;margin:clamp(28px,5vw,52px) auto clamp(24px,4vw,40px);
  width:100%;max-width:940px}
.aforo canvas{width:100%;height:clamp(210px,32vw,320px);display:block}
/* el degradado sólo tapa los bordes del lienzo, no el epígrafe */
.aforo::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(210px,32vw,320px);
  pointer-events:none;background:linear-gradient(90deg,#fff,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 88%,#fff)}
.aforo .pie{display:flex;justify-content:center;gap:.6rem;margin-top:clamp(10px,1.6vw,14px);
  font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-38)}
.aforo .pie i{font-style:normal;opacity:.42}

/* la frase diferencial: es el argumento, no una decoración */
.linea .clave{margin:clamp(28px,5vw,54px) auto 0;max-width:22ch;
  font-family:var(--portal);font-weight:var(--portal-w);letter-spacing:var(--portal-ls);
  font-size:clamp(1.5rem,5.2vw,2.5rem);line-height:1.14;color:var(--ink)}
.linea .clave em{font-style:italic;
  background:var(--holo-lin);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:holoslide 11s linear infinite;
  filter:saturate(2.1) brightness(.68)}

/* los dos formatos: enlaces con peso, no tarjetas */
.formatos{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:clamp(14px,2.4vw,26px);margin-top:clamp(30px,5vw,52px)}
.fmt{position:relative;flex:1 1 260px;max-width:340px;text-align:left;padding:clamp(18px,2.8vw,24px) 0 0;
  border-top:1px solid var(--ink-12);transition:border-color .45s}
.fmt::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--holo-lin);background-size:300% 100%;animation:holoslide 7s linear infinite;
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.fmt:hover::before,.fmt:focus-visible::before{transform:scaleX(1)}
.fmt h3{font-family:var(--display);font-weight:300;font-size:clamp(1.06rem,3.4vw,1.22rem);
  letter-spacing:-.015em;margin-bottom:.4rem;transition:opacity .35s}
.fmt p{font-size:.9rem;color:var(--ink-55);line-height:1.5}
.fmt .ir{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;color:var(--ink-38);
  font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:color .35s}
.fmt .ir .ojo{width:21px;height:auto}
.fmt:hover .ir,.fmt:focus-visible .ir{color:var(--ink)}
.linea .herocta{justify-content:center;margin-top:clamp(30px,5vw,50px)}

/* ---------- Página del producto: bloque de valor en tres voces ----------
   Sin tabla corporativa: tres columnas de texto separadas por hairlines. */
.voces{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(24px,4vw,40px);
  border-top:1px solid var(--ink-12)}
.voz{padding:clamp(22px,3.4vw,30px) 0;border-bottom:1px solid var(--ink-12)}
.voz h3{font-family:var(--portal);font-weight:var(--portal-w);letter-spacing:var(--portal-ls);
  font-size:clamp(1.3rem,4.4vw,1.75rem);line-height:1.1;margin-bottom:.7rem}
.voz p{font-size:.95rem;color:var(--ink-55);line-height:1.6;max-width:46ch}
@media(min-width:900px){
  .voces{grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,4vw,56px);border-bottom:1px solid var(--ink-12)}
  .voz{border-bottom:0;padding:clamp(26px,3vw,34px) 0}
}

/* ---------- Antecedente: ficha editorial, no card ---------- */
.caso{margin-top:clamp(34px,6vw,64px);display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,40px);align-items:start}
@media(min-width:860px){.caso{grid-template-columns:.42fr 1fr}}
.caso .ph{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  background:var(--holo-lin);background-size:240% 100%;animation:holoslide 15s linear infinite}
.caso .ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.caso .sello{display:inline-flex;align-items:center;gap:.5rem;font-size:.58rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38);margin-bottom:.9rem}
.caso .sello::before{content:"";width:16px;height:1px;background:var(--ink-38)}
.caso h3{font-family:var(--portal);font-weight:var(--portal-w);letter-spacing:var(--portal-ls);
  font-size:clamp(1.6rem,5.4vw,2.4rem);line-height:1.08;margin-bottom:.7rem}
.caso .ciudades{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.caso .ciudades span{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-70);background:var(--ink-06);border-radius:999px;padding:.5em 1em}
.caso .pend{margin-top:1.2rem;font-size:.8rem;color:var(--ink-38);line-height:1.55;
  padding-left:.9rem;border-left:1px solid var(--ink-12)}

/* ============================================================
   AJUSTES — ronda de revisión
   ============================================================ */

/* ---------- Ojo: iris verde de la paleta + apertura del párpado ----------
   El iris usa el verde de Resonance. Es un detalle mínimo y por eso
   importa: es el único punto de color en un icono que si no sería gris. */
:root{ --iris:#4fae86; }
.ojo .lente{transform-origin:14px 9px;transform:scaleY(.66);
  transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.ojo .iris{fill:var(--iris);fill-opacity:0;stroke:currentColor;
  transition:fill-opacity .45s ease,r .45s cubic-bezier(.2,.9,.25,1)}
.ojo .pupila{transition:transform .45s cubic-bezier(.2,.9,.25,1);transform-origin:14px 9px}
/* el ojo se abre al pasar por encima y termina de abrirse al apretar */
.gate:hover .ojo .lente,.gate:focus-visible .ojo .lente,
.card.link:hover .ojo .lente,.card.link:focus-visible .ojo .lente,
.fmt:hover .ojo .lente,.fmt:focus-visible .ojo .lente{transform:scaleY(1)}
.gate:hover .ojo .iris,.gate:focus-visible .ojo .iris,
.card.link:hover .ojo .iris,.card.link:focus-visible .ojo .iris,
.fmt:hover .ojo .iris,.fmt:focus-visible .ojo .iris{fill-opacity:.9}
.gate:active .ojo .lente,.card.link:active .ojo .lente,.fmt:active .ojo .lente{transform:scaleY(1.12)}
.gate:active .ojo .pupila,.card.link:active .ojo .pupila,.fmt:active .ojo .pupila{transform:scale(1.4)}
@media(hover:none){ .ojo .lente{transform:scaleY(.9)} .ojo .iris{fill-opacity:.55} }

/* ---------- Máquina de escribir ----------
   El texto vive completo en el HTML. Esto sólo lo va descubriendo.
   Sin JS se lee igual: por eso la regla base no oculta nada. */
[data-tipea]{display:inline-block;white-space:pre;position:relative}
[data-tipea] .txt{display:inline-block;white-space:pre}
[data-tipea].tecleando .txt{clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
[data-tipea] .car{position:absolute;top:.02em;bottom:.02em;width:1px;
  background:currentColor;left:var(--p,0%);opacity:.9;
  transition:left .05s linear}
[data-tipea].listo .car{animation:titila 1.05s steps(1) infinite}
/* El degradado sobre texto y el recorte del tipeo no pueden vivir en
   elementos distintos: el del padre deja de pintar sobre el hijo recortado.
   Mientras teclea, el degradado se muda al span interno. */
.kicker b.tecleando{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--ink-70);animation:none;filter:none;text-shadow:none}
.kicker b.tecleando .txt{background:var(--holo-lin);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:holoslide 9s linear infinite;filter:saturate(2.6) brightness(.52);
  text-shadow:0 0 18px rgba(255,255,255,.5)}
.kicker b .car{background:var(--ink-70)}
@keyframes titila{0%,50%{opacity:.9}51%,100%{opacity:0}}

/* ---------- Espectro: la señal que se enrolla ---------- */
.espectro{position:relative;margin:clamp(26px,4.6vw,48px) auto clamp(20px,3.4vw,34px);
  width:100%;max-width:960px}
.espectro canvas{width:100%;height:clamp(230px,34vw,340px);display:block}
.espectro .pie{display:flex;justify-content:center;align-items:center;gap:.7rem;
  margin-top:clamp(8px,1.4vw,12px);
  font-size:.6rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-38)}
.espectro .pie i{font-style:normal;opacity:.45;font-size:.8rem}

/* ---------- Nombres de formato con la tipografía del Portal ----------
   El recurso que funciona en los tres accesos sirve para jerarquizar
   lo que de verdad importa. Se usa poco, a propósito. */
.fmt h3,.destacado{font-family:var(--portal);font-weight:var(--portal-w);
  letter-spacing:var(--portal-ls);font-size:clamp(1.35rem,4.4vw,1.75rem);line-height:1.08}
.fmt{padding-top:clamp(20px,3vw,26px)}
.fmt p{margin-top:.5rem}
.formatos .fmt h3{margin-bottom:0}

/* ---------- Marquesina: no se detiene nunca ---------- */
.colabs:hover .row,.colabs:focus-within .row{animation-play-state:running}
.colabs .it img{opacity:.62;filter:grayscale(1) contrast(.78) brightness(1.06)}
.colabs .it:hover img{opacity:.95;filter:grayscale(1) contrast(.9)}
.colabs .it .tipo{font-family:var(--display);font-weight:300;color:#8a8a8a}
.colabs .it:hover .tipo{color:var(--ink-70)}

/* ---------- Orientación: dónde estoy y qué sigue ----------
   Una web de varios niveles necesita decir en qué nivel estás y
   ofrecer la salida natural. Esto va al final de cada página interna. */
.sigue{border-top:1px solid var(--ink-12);margin-top:clamp(40px,6vw,72px);padding-top:clamp(20px,3vw,28px);
  display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,18px);align-items:stretch}
.sigue .lbl{flex:1 1 100%;font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-38);margin-bottom:.2rem}
.sigue a{flex:1 1 240px;display:flex;flex-direction:column;gap:.2rem;padding:clamp(14px,2vw,18px) 0;
  border-top:1px solid transparent;position:relative;transition:padding-left .4s cubic-bezier(.2,.8,.2,1)}
.sigue a::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--holo-lin);background-size:300% 100%;animation:holoslide 7s linear infinite;
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sigue a:hover::before,.sigue a:focus-visible::before{transform:scaleX(1)}
.sigue a:hover{padding-left:8px}
.sigue .q{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-38)}
.sigue .t{font-family:var(--display);font-weight:300;font-size:clamp(1rem,3vw,1.14rem);letter-spacing:-.015em;color:var(--ink)}
.sigue .fl{margin-left:.35rem;opacity:.5}

/* ---------- Sección con etiqueta tecleada ---------- */
.eyebrow [data-tipea]{letter-spacing:inherit}

/* ============================================================
   RONDA 3 — ajustes
   ============================================================ */

/* ---------- Ojo: pestañas sólo cuando está abierto ---------- */
.ojo{overflow:visible}
.ojo .pest{opacity:0;transform:scaleY(.2);transform-origin:14px 9px;
  transition:opacity .35s ease,transform .5s cubic-bezier(.2,.9,.25,1)}
.gate:hover .ojo .pest,.gate:focus-visible .ojo .pest,
.card.link:hover .ojo .pest,.card.link:focus-visible .ojo .pest,
.fmt:hover .ojo .pest,.fmt:focus-visible .ojo .pest,
.fmtbig:hover .ojo .pest,.fmtbig:focus-visible .ojo .pest{opacity:.72;transform:scaleY(1)}
.gate:active .ojo .pest,.card.link:active .ojo .pest,
.fmt:active .ojo .pest,.fmtbig:active .ojo .pest{opacity:1;transform:scaleY(1.15)}
@media(hover:none){.ojo .pest{opacity:.45;transform:scaleY(.85)}}
.card .go .ojo,.fmt .ir .ojo{overflow:visible}

/* ---------- Booking a medida: el título reacciona ---------- */
.buscas .destacado{position:relative;display:inline-block;
  transition:letter-spacing .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
.buscas .destacado::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:1.5px;
  background:var(--holo-lin);background-size:300% 100%;animation:holoslide 7s linear infinite;
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.buscas:hover .destacado{letter-spacing:.005em;transform:translateX(3px)}
.buscas:hover .destacado::after{transform:scaleX(1)}

/* ---------- Formatos como accesos grandes (el recurso del Portal) ---------- */
.fmtgrid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--ink-12);margin-top:clamp(20px,3vw,30px)}
.fmtbig{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem 1.4rem;
  padding:clamp(22px,3.4vw,32px) 0;border-bottom:1px solid var(--ink-12);text-align:left;
  transition:padding-left .5s cubic-bezier(.2,.8,.2,1)}
.fmtbig::before{content:"";position:absolute;left:calc(var(--gut) * -1);top:0;bottom:0;width:3px;
  background:var(--holo-lin);background-size:100% 300%;animation:holoslide 7s linear infinite;
  transform:scaleY(0);transform-origin:50% 0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fmtbig .k{grid-column:1;font-family:var(--portal);font-weight:var(--portal-w);letter-spacing:var(--portal-ls);
  font-size:clamp(1.6rem,5.4vw,2.4rem);line-height:1.04;color:var(--ink);width:max-content;max-width:100%;padding-right:.1em}
.fmtbig .d{grid-column:1;font-size:clamp(.9rem,3vw,1rem);font-weight:300;color:var(--ink-55);
  line-height:1.5;margin-top:.4rem;max-width:60ch}
.fmtbig .e{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;border:1px solid var(--ink-12);color:var(--ink-38);flex:none;
  transition:color .45s,border-color .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.fmtbig .e .ojo{width:26px;height:auto}
.fmtbig:hover,.fmtbig:focus-visible{padding-left:clamp(12px,1.6vw,20px)}
.fmtbig:hover::before,.fmtbig:focus-visible::before{transform:scaleY(1)}
.fmtbig:hover .k,.fmtbig:focus-visible .k{
  background:var(--holo-lin);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:holoslide 9s linear infinite;
  filter:saturate(1.8) brightness(.72)}
.fmtbig:hover .e,.fmtbig:focus-visible .e{color:var(--ink);border-color:var(--ink);transform:scale(1.05)}

/* ---------- Collage de evidencia ----------
   Alto de fila uniforme y algunas celdas de doble ancho. Mezclar
   aspect-ratios distintos rompía la grilla y dejaba huecos: con filas
   de alto fijo el mosaico cierra siempre. Chico a propósito: es prueba,
   no galería. */
.collage{display:grid;gap:5px;margin-top:clamp(18px,2.6vw,26px);max-width:860px;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(74px,22vw,96px);grid-auto-flow:dense}
.collage figure{margin:0;overflow:hidden;border-radius:8px;background:var(--ink-06);
  position:relative;isolation:isolate;height:100%}
.collage img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.94)}
.collage figure:hover img{transform:scale(1.05);filter:saturate(1.04)}
.collage figure:nth-child(6n+1){grid-column:span 2}
@media(min-width:700px){
  .collage{grid-template-columns:repeat(6,1fr);grid-auto-rows:104px;gap:6px}
  .collage figure:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
}
/* pocas fotos: sin celdas dobles, todas iguales */
.collage.pocas{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(96px,26vw,150px);max-width:640px}
.collage.pocas figure:nth-child(6n+1){grid-column:auto;grid-row:auto}
.collage-pie{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-38);margin-top:.8rem}

/* protagonista: una foto grande, sola */
.protagonista{margin-top:clamp(20px,3vw,32px);border-radius:var(--r);overflow:hidden;
  aspect-ratio:21/9;background:var(--ink-06);max-width:1000px}
.protagonista img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
@media(max-width:600px){.protagonista{aspect-ratio:4/3}}

/* ---------- Hueco de vídeo reservado ---------- */
.vhueco{display:flex;align-items:center;gap:clamp(14px,2.4vw,22px);margin-top:clamp(18px,3vw,26px);
  padding:clamp(16px,2.6vw,22px);border:1px dashed var(--ink-12);border-radius:var(--r);background:#fff}
.vhueco .marco{flex:none;width:clamp(72px,12vw,104px);aspect-ratio:16/9;border-radius:8px;
  background:var(--holo-lin);background-size:240% 100%;animation:holoslide 14s linear infinite;
  display:grid;place-items:center;opacity:.5}
.vhueco .play{width:0;height:0;border-left:12px solid rgba(10,10,10,.5);
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.vhueco .txt{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.vhueco strong{font-weight:500;font-size:.95rem}
.vhueco span{font-size:.82rem;color:var(--ink-55);line-height:1.45}

/* ---------- Guiño wiphala ----------
   Siete franjas en la diagonal de la bandera. Va discreto, del tamaño de
   una viñeta: es un reconocimiento, no un sello. */
.wiphala{display:inline-grid;grid-template-columns:repeat(7,1fr);width:2.6em;height:.42em;
  border-radius:2px;overflow:hidden;vertical-align:.06em;margin-right:.55em;
  box-shadow:0 0 0 .5px rgba(10,10,10,.12)}
.wiphala i{display:block}
.wiphala i:nth-child(1){background:#d92b2b}
.wiphala i:nth-child(2){background:#e88b2f}
.wiphala i:nth-child(3){background:#e8cf2f}
.wiphala i:nth-child(4){background:#ffffff}
.wiphala i:nth-child(5){background:#3aa05a}
.wiphala i:nth-child(6){background:#2f6ee8}
.wiphala i:nth-child(7){background:#6b3fa0}

/* ---------- Retrato del equipo ---------- */
.retratos{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;
  gap:8px;margin-top:clamp(18px,3vw,26px)}
.retratos figure{margin:0;overflow:hidden;border-radius:10px;background:var(--ink-06)}
.retratos figure:first-child{grid-row:span 2;aspect-ratio:3/4}
.retratos figure:not(:first-child){aspect-ratio:4/3}
.retratos img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94);transition:filter .6s}
.retratos figure:hover img{filter:saturate(1.05)}
@media(max-width:560px){
  .retratos{grid-template-columns:1fr 1fr}
  .retratos figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
}

/* ---------- Sigilo de la marca ---------- */
.sigil{letter-spacing:.14em;opacity:.75;font-weight:400}
[data-tipea] .sig{opacity:.55;margin-left:.1em}

/* las tarjetas sin ficha propia todavía: el ojo se ve, pero no invita a hacer clic */
.card.pendiente{cursor:default}
.card.pendiente:hover{transform:none;box-shadow:none}
.card.pendiente .go{opacity:.45}
.card.pendiente:hover .go{color:var(--ink-38);border-bottom-color:transparent}
.card.pendiente:hover .ojo .pest{opacity:0;transform:scaleY(.2)}
.card.pendiente:hover .ojo .lente{transform:scaleY(.66)}
.card.pendiente:hover .ojo .iris{fill-opacity:0}

/* ============================================================
   AJUSTES — ronda de revisión 4
   ============================================================ */

/* ---------- Relojes del pie ----------
   Vuelven al tamaño original y a dos países por renglón: cuatro en una
   sola fila los dejaba diminutos y apretados contra el borde. */
.clocks{grid-template-columns:repeat(2,auto);gap:.42rem 1.9rem;justify-content:start}
.clock .hora{font-size:.96rem;letter-spacing:.055em}
.clock .pais{font-size:.6rem;width:34px}
@media(min-width:900px){
  .clocks{grid-template-columns:repeat(2,auto);gap:.42rem 2.1rem}
}

/* ---------- Vídeo de YouTube con fachada ----------
   La miniatura ocupa exactamente el sitio del reproductor, así que al
   hacer clic nada se mueve: el iframe entra en el mismo hueco. */
.yt{margin:0;position:relative}
.yt .cara{display:block;width:100%;padding:0;border:0;
  background:var(--holo-lin);background-size:240% 100%;animation:holoslide 16s linear infinite;
  border-radius:var(--r);overflow:hidden;position:relative;cursor:pointer;
  aspect-ratio:16/9;-webkit-tap-highlight-color:transparent}
.yt.vertical .cara{aspect-ratio:9/16}
.yt .cara img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(.94)}
.yt .cara:hover img{transform:scale(1.035);filter:saturate(1.04)}
/* El play: un disco de vidrio, no el rojo de YouTube. */
.yt .pl{position:absolute;inset:0;margin:auto;width:clamp(52px,7vw,66px);height:clamp(52px,7vw,66px);
  border-radius:50%;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  box-shadow:0 6px 30px rgba(10,10,10,.24);display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.2,.9,.25,1),background .3s}
.yt .cara:hover .pl{transform:scale(1.07);background:#fff}
.yt .pl::after{content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt iframe{width:100%;height:100%;border:0;display:block;position:absolute;inset:0;border-radius:var(--r)}
.yt.puesto .cara{background:#000}
.yt figcaption{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-38);margin-top:.7rem}

/* dos vídeos lado a lado, del mismo peso */
.ytpar{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.6vw,26px);
  margin-top:clamp(20px,3vw,30px)}
@media(min-width:760px){.ytpar{grid-template-columns:1fr 1fr}}

/* ---------- Vídeo propio en bucle ----------
   Va del tamaño de una fotografía, no de un cine: es material de apoyo.
   El recorte redondeado va SOBRE el vídeo, no sobre el <figure>: si no,
   el pie de foto queda cortado por el overflow del contenedor. */
.vloop{margin:clamp(18px,3vw,26px) 0 0;max-width:236px}
.vloop video{width:100%;height:auto;display:block;filter:saturate(.96);
  border-radius:var(--r);background:var(--ink-06)}
.vloop figcaption{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-38);margin-top:.7rem}

/* el par vídeo + texto: el vertical va acotado a ancho de teléfono para
   que no se coma la página, y todo se alinea arriba en lugar de al centro
   (si no, el elemento corto queda flotando en el medio de una columna alta) */
.vpar{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,28px);align-items:start;
  margin-top:clamp(24px,4vw,36px)}
@media(min-width:760px){.vpar{grid-template-columns:236px 1fr}}
.vpar .vloop{margin-top:0;max-width:236px}
.vpar .yt.vertical{max-width:236px}
.vpar .prose{padding-top:.2rem}

/* ---------- Dos destacados de igual jerarquía ----------
   Sin fondo, sin borde de tarjeta y sin icono. Sólo una hairline arriba
   de cada columna, que es lo que los iguala visualmente. */
.pares{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(26px,4vw,40px)}
.par{padding:clamp(20px,3vw,26px) 0;border-top:1px solid var(--ink-12)}
.par:last-child{border-bottom:1px solid var(--ink-12)}
.par h3{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.8rem}
.par p{font-size:.95rem;line-height:1.62;color:var(--ink-55);max-width:52ch}
@media(min-width:820px){
  .pares{grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,64px)}
  .par{border-bottom:1px solid var(--ink-12)}
}

/* ---------- Ciudades como botones, fuera de .caso ---------- */
.ciudades{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.ciudades span{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-70);background:var(--ink-06);border-radius:999px;padding:.5em 1em}

/* pie del collage cuando lleva enlace */
.collage-pie a{color:var(--ink-70);border-bottom:1px solid var(--ink-12);
  transition:color .3s,border-color .3s}
.collage-pie a:hover{color:var(--ink);border-bottom-color:var(--ink-38)}

/* ---------- Retrato único de dirección ----------
   Una sola foto, en proporción de retrato y con el mismo radio que el
   resto del sistema. Sin marco ni sombra: la foto se sostiene sola. */
.retrato1{margin:clamp(18px,3vw,26px) 0 0;border-radius:10px;overflow:hidden;
  background:var(--ink-06);max-width:340px;aspect-ratio:3/4}
.retrato1 img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94);transition:filter .6s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.retrato1:hover img{filter:saturate(1.04);transform:scale(1.03)}

/* dos fotos: media y media, sin celda doble ni huecos */
.collage.dos{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,34vw,240px);max-width:640px}
.collage.dos figure:nth-child(6n+1){grid-column:auto;grid-row:auto}
@media(min-width:700px){
  .collage.dos{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px}
  .collage.dos figure:nth-child(6n+1){grid-column:auto;grid-row:auto}
}
.protagonista + .collage{margin-top:6px}

/* ---------- Mosaico de retiros ----------
   Diez fotos, dos de ellas al doble (2×2). En cuatro columnas eso da
   8 + 8 = 16 celdas, que es exactamente 4×4: el mosaico cierra en un
   rectángulo perfecto en lugar de dejar un hueco en la última fila. */
@media(min-width:700px){
  .collage.mosaico{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,13vw,168px)}
  .collage.mosaico figure:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
}

.vpar.medio{align-items:center}

/* El sigilo dentro de .razon ----------
   .razon pinta su texto con un degradado recortado (background-clip:text)
   y color transparente. Un hijo hereda la transparencia pero no el
   degradado, así que sus glifos no se pintaban con nada: el .·. estaba
   ahí, ocupando su ancho, pero invisible. Se le devuelve tinta propia. */
.razon .sigil{-webkit-text-fill-color:rgba(255,255,255,.62);color:rgba(255,255,255,.62);
  margin-left:.35em;letter-spacing:.16em;filter:none}

/* ============================================================
   COLABORACIONES — la tira, rehecha
   ------------------------------------------------------------
   Los archivos originales venían de trece sitios distintos: unos con
   fondo blanco, otros con un recuadro gris y tipografía en blanco, y
   uno con el damero de transparencia horneado en los píxeles. Puestos
   en fila se veían como cajas grises flotando.

   Ahora todos pasaron por el mismo proceso: fondo eliminado, tinta de
   un único gris, recorte al contenido y encaje en un lienzo idéntico
   corrigiendo por masa de tinta. Por eso acá el CSS puede ser simple.

   La clave es la CAJA FIJA. Igualar sólo la altura no sirve: a 26 px
   de alto una marca cuadrada mide 26 px de ancho y un logotipo
   tipográfico mide noventa. Con una caja de proporción fija y
   object-fit:contain, cada logo ocupa exactamente el mismo espacio y
   la fila adquiere un ritmo parejo.
   ============================================================ */
.colabs .it{padding:0 clamp(14px,2vw,26px)}
.colabs .it img{
  height:clamp(30px,4.2vw,40px);
  width:clamp(90px,12.6vw,120px);
  object-fit:contain;
  opacity:.6;
  filter:none;                    /* ya vienen monocromos del origen */
  transition:opacity .45s ease}
.colabs .it:hover img{opacity:1}

/* El colaborador que todavía no tiene logo se compone tipográficamente
   dentro de la misma caja, para no inventar una marca que no existe. */
.colabs .it .tipo{
  display:grid;place-items:center;
  height:clamp(30px,4.2vw,40px);
  width:clamp(90px,12.6vw,120px);
  font-family:var(--display);font-weight:300;
  font-size:clamp(.8rem,2.2vw,.95rem);letter-spacing:-.01em;
  line-height:1.15;text-align:center;
  color:var(--ink-38);transition:color .45s ease}
.colabs .it:hover .tipo{color:var(--ink-70)}

/* ============================================================
   AJUSTES — ronda de revisión 5
   ============================================================ */

/* ---------- Dos vídeos, la misma altura ----------
   Uno es vertical (9:16) y el otro apaisado (16:9). Con anchos iguales
   quedaban a alturas distintas y la fila se veía descuadrada. Se fija la
   ALTURA y se deja que cada uno tome el ancho que le corresponda: es la
   única manera de que dos formatos opuestos compartan renglón. */
.vfila{--valto:clamp(230px,30vw,360px);
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(14px,2.4vw,24px);margin-top:clamp(24px,4vw,36px)}
.vfila .vloop,.vfila .yt{margin:0;max-width:none;flex:none}
.vfila .vloop video{height:var(--valto);width:auto;max-width:100%}
.vfila .yt .cara{height:var(--valto);width:auto;aspect-ratio:16/9;max-width:100%}
@media(max-width:640px){
  .vfila{--valto:auto;display:grid;grid-template-columns:1fr}
  .vfila .vloop video{height:auto;width:100%}
  .vfila .yt .cara{height:auto;width:100%}
}

/* pie del vídeo: título a la izquierda, salida a YouTube a la derecha */
.yt figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;
  font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-38);margin-top:.7rem}
.yt figcaption a{color:var(--ink-38);border-bottom:1px solid var(--ink-12);
  transition:color .3s,border-color .3s}
.yt figcaption a:hover{color:var(--ink);border-bottom-color:var(--ink-38)}

/* ---------- Tira de fotos en un solo renglón ----------
   Alturas iguales y anchos libres: las verticales quedan angostas y las
   apaisadas anchas, que es como se comportan las fotos en una revista.
   Puestas en una grilla de celdas iguales había que recortarlas todas. */
.tira{display:flex;gap:6px;margin-top:clamp(18px,2.6vw,26px);
  align-items:stretch;flex-wrap:wrap}
.tira figure{margin:0;height:clamp(160px,20vw,240px);border-radius:8px;
  overflow:hidden;background:var(--ink-06);flex:0 0 auto}
.tira img{height:100%;width:auto;display:block;object-fit:cover;
  pointer-events:none;filter:saturate(.94);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s}
.tira figure:hover img{transform:scale(1.04);filter:saturate(1.04)}
@media(max-width:620px){
  .tira{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .tira figure{height:auto;aspect-ratio:3/4}
  .tira figure:first-child{grid-column:span 2;aspect-ratio:16/9}
  .tira img{width:100%;height:100%}
}

/* ---------- Foto de apoyo en la columna del margen ---------- */
.foto-nota{margin:clamp(16px,2.4vw,22px) 0 0;border-radius:10px;overflow:hidden;
  background:var(--ink-06);max-width:360px}
.foto-nota img{width:100%;height:auto;display:block;filter:saturate(.96)}
.enlaces-nota{margin-top:1.5rem;font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-38)}
.enlaces-nota a{margin-left:.7rem;color:var(--ink-55);
  border-bottom:1px solid var(--ink-12);transition:color .3s,border-color .3s}
.enlaces-nota a:hover{color:var(--ink);border-bottom-color:var(--ink-38)}

/* ---------- Nota al margen (dentro de la columna sticky) ---------- */
.nota{margin-top:clamp(20px,3vw,28px);padding-top:clamp(16px,2.4vw,20px);
  border-top:1px solid var(--ink-12);max-width:34ch}
.nota h4{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-38);margin-bottom:.6rem}
.nota p{font-size:.86rem;line-height:1.6;color:var(--ink-55)}
.nota a{color:var(--ink-70);border-bottom:1px solid var(--ink-12);
  transition:color .3s,border-color .3s}
.nota a:hover{color:var(--ink);border-bottom-color:var(--ink-38)}

/* ---------- Perfil: retrato y texto en la misma línea de salida ---------- */
.perfil{display:grid;grid-template-columns:1fr;gap:clamp(20px,3.4vw,44px);
  align-items:start}
@media(min-width:820px){.perfil{grid-template-columns:.42fr 1fr}}
.perfil .retrato1{margin-top:0;max-width:none;width:100%}
.perfil .links-of{margin-top:.9rem}
.perfil .prose{padding-top:0}
.perfil-nombre{font-size:clamp(1.5rem,4.2vw,2.05rem)!important;margin-top:.3rem}

/* ---------- Relojes del pie, un punto más grandes ---------- */
.clocks{gap:.5rem 2rem}
.clock .hora{font-size:1.06rem;letter-spacing:.06em}
.clock .pais{font-size:.62rem;width:36px}
.clock .flag{width:17px;height:13px}
@media(min-width:900px){.clocks{gap:.5rem 2.3rem}}