/* ============================================================
   BIG agency — estetica nueva
   ------------------------------------------------------------
   DECISIONES:
   · Paleta unificada con el roster (roster.bigagency.com.ar):
     azul #33419a, naranja #ff761e, lima #e8f29c, negro #0d0d14,
     blanco #ffffff. Reemplaza a las 12 tintas del manual Vector.
   · El naranja aparece en UN solo lugar: la palabra que rota.
     Y en el resplandor de los botones al apuntarlos.
   · Todos los botones son iguales: borde sutil, sin relleno, y
     el anillo iluminado al pasar el mouse.
   · Sin mayusculas forzadas, sin cintas de colores, sin ruido.
   ============================================================ */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-variable.woff2) format('woff2-variations')}

:root{
  /* ── COLORES ── */
  --fondo:#0d0d14;              /* negro — fondo base */
  --fondo-2:#000;               /* bloques profundos (video) */
  --texto:#ffffff;              /* blanco */
  --texto-2:rgba(255,255,255,.58);
  --texto-3:rgba(255,255,255,.5);   /* 5.16:1 sobre el fondo — antes .34 daba 2.97 y no se leia */
  --naranja:#ff761e;            /* acento — solo en la palabra y el glow */
  --naranja-hot:#d8641a;        /* variante hover/oscura del naranja */
  --naranja-claro:#ff8b40;      /* variante clara, solo para el mesh del glow */
  --borde:rgba(255,255,255,.16);
  --borde-2:rgba(255,255,255,.09);
  --velo-color:#0d0d14;         /* color del velo del header, lo escribe el JS */

  /* ── TIPOGRAFIA ──
     Una sola familia, Inter (variable), reemplaza al trio
     Coolvetica/Poppins/Manrope. Interletrado siempre igual o mas
     ajustado que -5% — nunca mas abierto — para sostener el aire
     condensado y editorial que tenian las referencias anteriores. */
  --display:'Inter',system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;

  /* ── MEDIDAS ── */
  --ancho:min(1780px,92vw);
  --pad:clamp(20px,4vw,56px);
  --alto-header:78px;
}

/* ── BLOQUES DE COLOR ───────────────────────────────────────
   El "sistema cromatico flexible" del manual: cada seccion es un
   bloque de color propio y FIJO. No es la pagina entera cambiando de
   tono — cada tramo tiene su impronta y se queda ahi.

   Lo fluido lo da el apilado: cada bloque tiene las esquinas de
   arriba redondeadas y monta sobre el anterior, asi que al bajar
   entra deslizandose en vez de aparecer un corte de color.

   Cada bloque trae su juego de tokens completo (fondo, texto,
   bordes, filtro de logos), asi que todo lo de adentro se adapta
   solo. Contraste medido de cada uno, minimo 4.5 (recalculado al
   pasar a la paleta unificada con el roster):

     noche   #0d0d14  blanco  texto-2 10.10  texto-3 7.69
     tinta   #14162c  blanco  texto-2  9.59  texto-3 7.36
     marino  #33419a  blanco  texto-2  5.48  texto-3 4.70
     lima    #e8f29c  negro   texto-2  7.30  texto-3 5.16
     crema   #ffffff  negro   texto-2  7.89  texto-3 5.47
     celeste #ccd0e6  negro   texto-2  6.32  texto-3 4.67
     durazno #ffddc7  negro   texto-2  7.02  texto-3 5.02
     oliva   #c7d088  negro   texto-2  5.09  texto-3 4.55

   Los tintes claros (celeste/durazno/oliva) son mezclas de
   azul/naranja/lima con blanco o negro — ya no salen de un manual de
   12 colores, salen de mezclar los 5 tokens de marca. NO SIRVEN de
   fondo, mismo motivo que antes: naranja #ff761e da 2.67 sobre blanco
   y 2.24 sobre lima. Sirve para acentos, no para bloques.            */
[data-bloque]{background:var(--fondo);color:var(--texto);position:relative}

/* ── oscuro neutro: texto blanco, logos en blanco ── */
[data-bloque="noche"]{
  --texto:#ffffff;
  --texto-2:rgba(255,255,255,.72);
  --texto-3:rgba(255,255,255,.64);
  --borde:rgba(255,255,255,.18);
  --borde-2:rgba(255,255,255,.1);
  --logo-filtro:brightness(0) invert(1);
  --logo-opacidad:.32}
/* ── los dos azules: mismo fondo unificado, texto lavanda claro en
   vez de blanco puro (pedido explicito, no usar blanco/negro/neutro
   sobre los bloques de color) ── */
[data-bloque="tinta"],[data-bloque="marino"]{
  --texto:#dae0ff;
  --texto-2:rgba(218,224,255,.72);
  --texto-3:rgba(218,224,255,.64);
  --borde:rgba(218,224,255,.18);
  --borde-2:rgba(218,224,255,.1);
  --logo-filtro:brightness(0) invert(1);
  --logo-opacidad:.32}
[data-bloque="noche"] {--fondo:#0d0d14;--fondo-2:#000}
[data-bloque="tinta"] {--fondo:#33419a;--fondo-2:#0a0b1c}
[data-bloque="marino"]{--fondo:#33419a;--fondo-2:#283172}

/* ── claros: texto negro, logos en negro ── */
[data-bloque="lima"],[data-bloque="crema"],[data-bloque="celeste"],
[data-bloque="durazno"],[data-bloque="oliva"]{
  --texto:#0d0d14;
  --texto-2:rgba(13,13,20,.72);
  --texto-3:rgba(13,13,20,.62);
  --borde:rgba(13,13,20,.24);
  --borde-2:rgba(13,13,20,.14);
  --logo-filtro:brightness(0);
  --logo-opacidad:.62}
[data-bloque="lima"]   {--fondo:#e8f29c;--fondo-2:#d1da8c}
[data-bloque="crema"]  {--fondo:#ffffff;--fondo-2:#f3f3f3}
[data-bloque="celeste"]{--fondo:#ccd0e6;--fondo-2:#b8bddc}
[data-bloque="durazno"]{--fondo:#ffddc7;--fondo-2:#ffcfb0}
[data-bloque="oliva"]  {--fondo:#c7d088;--fondo-2:#b1b97a}

/* el header flota sobre todo: no puede heredar los tokens de una
   seccion, asi que el JS le avisa que hay abajo */

html[data-header="claro"] header .btn{color:#0d0d14;border-color:rgba(13,13,20,.24)}
html[data-header="claro"] header .btn[aria-pressed="false"]{color:rgba(13,13,20,.55)}
/* El resplandor rellena con --fondo. El header vive fuera de los
   bloques, asi que sin esto usaba el oscuro de :root y sobre un bloque
   claro aparecia una mancha negra adentro del boton. El color se lo
   pone el JS, igual que el velo. */
html[data-header="claro"] header .bg::before{filter:brightness(1.15)}

/* Registrado para que el navegador SEPA que es un color y lo pueda
   interpolar. Sin esto el velo del header saltaba de oscuro a claro
   de golpe al cruzar de un bloque al siguiente. */
@property --velo-color{syntax:'<color>';inherits:true;initial-value:#0d0d14}
html{transition:--velo-color .45s cubic-bezier(.4,0,.2,1)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-header) + 20px)}
body{background:#0d0d14;color:var(--texto);font-family:var(--body);
  font-size:clamp(15px,.5vw + 9.5px,18px);line-height:1.4;letter-spacing:-.05em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--naranja);color:#000}
:focus-visible{outline:1px solid var(--naranja);outline-offset:4px;border-radius:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── LOGO GRANDE DE ENTRADA ───────────────────────────────────
   Porteo del intro de big-roster-2026: arranca grande y centrado,
   un FLIP medido en vivo (getBoundingClientRect, no coordenadas
   fijas) lo achica y lo mueve hasta calzar exacto con el logo del
   header a medida que se scrollea — ver introLogo() en app.js.
   Sin caja: es el simbolo solo, en naranja (fill:currentColor),
   sin fondo ni recuadro. */
.intro-logo{position:fixed;z-index:150;top:0;left:0;perspective:800px;
  display:flex;align-items:center;justify-content:center;
  color:var(--naranja);pointer-events:auto}
.intro-logo-enter{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;opacity:0;transform:translateY(-46px);
  animation:intro-logo-entra .8s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes intro-logo-entra{to{opacity:1;transform:translateY(0)}}
.intro-logo-tilt{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;transform-style:preserve-3d}
.intro-logo-tilt svg{width:56%;height:56%;display:block}
@media(prefers-reduced-motion:reduce){.intro-logo{display:none}}

/* el hero se fija solo mientras dura el intro (ver heroPinWrap en
   app.js, que le da a este envoltorio el alto de #inicio + la
   distancia del intro); #inicio ya trae su propio min-height:100svh,
   asi que no hace falta repetirlo aca. */
/* el alto extra que reserva para que el intro del logo termine antes
   de destrabarse no tiene contenido propio — sin este fondo se veia
   el negro base de <body> asomando debajo del hero */
.hero-pin-wrap{position:relative;background:#33419a}
.hero-pin{position:sticky;top:0;overflow:hidden;z-index:1}
/* el titular sube y crece en sincro con el logo, atado a la misma
   variable --intro-progress que escribe introLogo() */
.hero-h1{transform:translateY(calc((1 - var(--intro-progress,1)) * 50px))
    scale(calc(.86 + var(--intro-progress,1) * .14));
  transform-origin:left bottom;opacity:var(--intro-progress,1)}
h1.hero-h1{text-transform:uppercase;font-weight:500;line-height:.92}
h1.hero-h1 .cambia{font-weight:800}
.hero-lead{font-size:clamp(18px,1vw + 12px,26px);max-width:44ch;
  transform:translateY(calc((1 - var(--intro-progress,1)) * 30px));
  opacity:var(--intro-progress,1)}

/* Los 4 bloques del home se probaron con giro de entrada + pin
   (tarjetas apiladas); se descartaron los dos — quedan solo como
   agrupadores sin estilo propio, el scroll vuelve a ser el normal
   del navegador. .flow-bloque/.flow-inner no se sacan del HTML
   (agrupan hero / metricas+marcas / creadores / producciones) pero
   ya no llevan CSS que los distinga de un <div> comun. */

.wrap{width:var(--ancho);margin:0 auto}
/* El relleno de las secciones es lo que mas separa los textos, no la
   onda: la onda va superpuesta y no ocupa lugar. MEDIDO en Nosotros
   con el valor anterior (11vw, 194px en 1760): 347px vacios entre el
   final de la portada y el primer parrafo, y una seccion de 532px para
   145px de texto. Bajado a 7.5vw, 132px en 1760. */
section{padding:clamp(64px,7.5vw,140px) 0}
.sep{height:1px;background:var(--borde-2);width:var(--ancho);margin:0 auto}

/* ── TIPOGRAFIA ─────────────────────────────────────────────── */
.dsp{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.96;
  text-wrap:balance}
.t1{font-size:clamp(16px,2.2vw,42px);line-height:1.05;letter-spacing:-.005em}
.t2{font-size:clamp(28px,3.2vw,58px);line-height:1;letter-spacing:-.06em;font-weight:700}
.t3{font-size:clamp(19px,1.8vw,30px);line-height:1.1;letter-spacing:-.05em;font-weight:700}
.lead{font-size:clamp(16px,.6vw + 10px,22px);line-height:1.3;letter-spacing:-.05em;color:var(--texto-2);max-width:38ch}
.p{color:var(--texto-2);max-width:60ch}
/* etiqueta de seccion: fina, sin color, sin caja */
/* Antes era la misma etiqueta en mayuscula repetida en las 6 paginas,
   diciendo lo mismo que el menu. Ahora lleva una raya delante y un
   dato real, asi aporta en vez de repetir. */
.etq{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);
  display:inline-flex;align-items:center;gap:14px;
  margin-bottom:clamp(18px,1.8vw,30px);display:block}

/* ============================================================
   BOTONES — todos iguales.
   Cada uno se envuelve en .bg (el JS lo hace solo) que aporta
   el anillo iluminado. El boton en si es borde y texto, y al
   apuntarlo un circulo crece desde el centro y lo llena (obra de
   flowButtons() en componentes.js, que le agrega el span.btn-circulo).
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:12px;
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--body);font-weight:400;font-size:17.5px;letter-spacing:.02em;
  color:var(--texto);background:transparent;cursor:pointer;
  border:1px solid var(--borde);border-radius:999px;
  padding:16px 31px;white-space:nowrap;
  transition:border-color .35s,color .5s,border-radius .5s cubic-bezier(.16,1,.3,1)}
.btn:hover{border-color:transparent;border-radius:12px;color:var(--fondo)}
.btn>*{position:relative}
.btn-circulo{
  position:absolute;top:50%;left:50%;z-index:-1;pointer-events:none;
  width:10px;height:10px;border-radius:50%;background:var(--texto);opacity:0;
  transform:translate(-50%,-50%);
  transition:width .7s cubic-bezier(.19,1,.22,1),height .7s cubic-bezier(.19,1,.22,1),opacity .45s ease}
.btn:hover .btn-circulo{width:340%;height:340%;opacity:1}
.btn .f{display:inline-block;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.btn:hover .f{transform:translateX(6px)}
.btn--chico{font-size:10.5px;padding:6.5px 14px}
.btn--seccion{font-size:11.4px;padding:10px 20px;gap:8px}
/* variante naranja: borde y texto en el naranja de marca, y el
   circulo que crece al apuntar tambien llena de naranja (en vez del
   invertido var(--texto)/var(--fondo) del resto de los botones) */
.btn--naranja{border-color:var(--naranja);color:var(--naranja)}
.btn--naranja .btn-circulo{background:var(--naranja)}
.btn--naranja:hover{color:#f7d8bd}
/* sin el glow de borderGlow: el propio circulo ya hace de acento */
.bg:has(>.btn--naranja)::before,
.bg:has(>.btn--naranja)::after,
.bg:has(>.btn--naranja)>.luz,
#producciones .bg::before,
#producciones .bg::after,
#producciones .bg>.luz,
#nav .bg::before,
#nav .bg::after,
#nav .bg>.luz{display:none}

/* ── ENCABEZADO: logo izquierda · menu centrado · pais derecha ── */
header{position:fixed;inset:0 0 auto 0;z-index:900;height:var(--alto-header);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding:0 var(--pad)}
/* el fondo se extiende por debajo y se desvanece: sin linea de corte */
header::before{content:'';position:absolute;left:0;right:0;top:0;bottom:-48px;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .5s;
  /* Al 94% pintaba una barra maciza arriba de todo, y cuando el color
     del velo no coincidia con lo que habia debajo se veia como un
     bloque pegado. Al 58% el desenfoque hace el trabajo de separar el
     header del contenido sin pintar una banda. */
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--velo-color) 58%,transparent) 0%,
    color-mix(in srgb,var(--velo-color) 34%,transparent) 52%,
    color-mix(in srgb,var(--velo-color) 0%,transparent) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 100%)}
header.fijo::before{opacity:1}
.marca{justify-self:start;display:flex;align-items:center;color:var(--naranja)}
.marca svg{height:34px;width:auto;display:block;transition:opacity .35s}
.marca:hover svg{opacity:.7}
#nav{justify-self:center;display:flex;align-items:center;gap:5px}
/* en el inicio, el menu y las banderas arrancan invisibles y recien
   aparecen cuando "Big Creators" entra en pantalla (ver app.js) */
body[data-pagina="inicio"] #nav,
body[data-pagina="inicio"] .pais{opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
body[data-pagina="inicio"] #hdr.mostrar-menu #nav,
body[data-pagina="inicio"] #hdr.mostrar-menu .pais{opacity:1;pointer-events:auto}
/* chips del menu: fondo azul fijo (no pueden heredar --fondo del bloque,
   el header vive fuera de los bloques), borde y texto naranja, mayusculas */
#nav .btn{background:#33419a;border-color:var(--naranja);color:var(--naranja);
  text-transform:uppercase;letter-spacing:.06em}
#nav .btn-circulo{background:var(--naranja)}
#nav .btn:hover{border-color:transparent;color:#f7d8bd}
#nav .btn[aria-current="page"]{background:var(--naranja);color:#f7d8bd}
.pais{justify-self:end;display:flex;align-items:center;gap:1px;
  background:#33419a;border-radius:999px;padding:2.6px}
/* selector de pais: bandera activa en un circulo blanco elevado,
   la otra queda chica y opaca sobre el mismo fondo azul */
.pais-flag{display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;border:0;background:transparent;cursor:pointer;
  font-size:13px;line-height:1;opacity:.5;
  transition:background .35s cubic-bezier(.16,1,.3,1),opacity .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.pais-flag:hover{opacity:.8}
.pais-flag[aria-pressed="true"]{background:#ffffff;opacity:1;transform:scale(1.06)}
#menu{display:none;justify-self:end;flex-direction:column;gap:5px;padding:8px;
  background:none;border:0;cursor:pointer}
#menu i{display:block;width:20px;height:1px;background:var(--texto);transition:transform .35s,opacity .35s}
#menu.x i:nth-child(1){transform:translateY(6px) rotate(45deg)}
#menu.x i:nth-child(2){opacity:0}
#menu.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  header{grid-template-columns:1fr auto}
  #nav{position:fixed;inset:0;background:var(--fondo);flex-direction:column;
    justify-content:center;gap:14px;clip-path:inset(0 0 100% 0);
    transition:clip-path .55s cubic-bezier(.76,0,.24,1)}
  #nav.abierto{clip-path:inset(0 0 0 0)}
  .pais{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);z-index:901;
    opacity:0;pointer-events:none;transition:opacity .4s}
  #nav.abierto~.pais{opacity:1;pointer-events:auto}
  #menu{display:flex;z-index:902}
}

/* ── PORTADA ────────────────────────────────────────────────── */
#inicio{position:relative;
  min-height:78svh;
  display:flex;align-items:center;
  overflow:hidden;
  padding:calc(var(--alto-header) + 40px) 0 clamp(30px,4vh,56px)}
/* la B del manual, mismo tratamiento que Contacto/Nosotros: a sangre,
   tono sobre tono sobre el bloque tinta */
#inicio .b-big{color:color-mix(in srgb,var(--texto) 8%,var(--fondo));
  inset:0;width:auto;aspect-ratio:auto;--b-tamano:cover;
  -webkit-mask-position:right top,center;mask-position:right top,center}
/* Centrada, una sola columna — sin vitrina al costado. Sin video de
   fondo: se probo y el velo oscuro sobre un bloque que ya es oscuro
   (tinta) no sumaba, solo restaba contraste al titulo. */
.portada{position:relative;z-index:1;width:var(--ancho);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.portada .t1{max-width:16ch;margin-bottom:clamp(22px,2.4vw,36px)}
.portada .lead{margin-bottom:clamp(30px,3.4vw,48px);max-width:48ch}
.portada .acciones{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
/* la palabra que rota necesita el alto recortado, si no el salto
   vertical del resorte se ve por fuera del renglon */
.hero-rot{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.05}
/* el unico naranja de la pagina */
.cambia{display:inline-block;will-change:transform,filter}
/* El nombre de la marca dentro de un titular. Es el tercer y ultimo
   lugar donde va naranja: no es adorno, es como se escribe BIG. */
.big{color:var(--naranja)}

/* centrada en su mitad de pantalla, no pegada al borde derecho */
.vt{position:relative;justify-self:center;width:100%;
  max-width:clamp(260px,26vw,380px);outline:none}
.vt:focus-visible{outline:1px solid var(--naranja);outline-offset:10px;border-radius:20px}

/* el marco vertical, formato reel */
.vt-marco{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:var(--fondo-2);border:1px solid var(--borde-2);cursor:grab;
  user-select:none;-webkit-user-select:none;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.vt-marco.arrastrando{cursor:grabbing}

.vt-pista{height:100%;will-change:transform}
.vt-slide{position:relative;height:100%;overflow:hidden}
.vt-media{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;
  /* la de al lado se apaga un poco: la del medio manda */
  opacity:.55;transition:opacity .7s ease}
.vt-slide.on .vt-media{opacity:1}

/* globitos de comentario — decorativos, no son de nadie real */
.vt-globo{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;
  font-size:clamp(11.5px,.85vw,13.5px);line-height:1;color:var(--fondo);
  background:rgba(255,255,255,.94);border-radius:999px;
  padding:10px 15px 10px 11px;white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7);pointer-events:none}
.vt-globo--a{top:13%;left:-30%}
.vt-globo--b{top:24%;left:-13%}
.vt-tick{width:17px;height:17px;flex:0 0 auto;border-radius:5px;
  background:var(--naranja);position:relative}
.vt-tick--b{background:var(--fondo)}
.vt-tick::after{content:'';position:absolute;inset:0;margin:auto;
  width:5px;height:9px;border:solid #ffffff;border-width:0 1.6px 1.6px 0;
  transform:translateY(-1px) rotate(45deg)}

/* la ficha del creador: reemplaza la tarjeta de producto de la
   referencia. Todo dato real del creador que esta en pantalla. */
.vt-ficha{position:absolute;z-index:4;left:-26%;right:14%;bottom:7%;
  display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  padding:11px;border-radius:15px;
  background:rgba(9,9,14,.96);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.85);
  transition:border-color .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.vt-ficha:hover{border-color:rgba(255,118,30,.55);transform:translateY(-2px)}
.vt-ficha-foto{width:46px;height:46px;flex:0 0 auto;border-radius:11px;overflow:hidden;
  background:var(--fondo-2)}
.vt-ficha-foto img{width:100%;height:100%;object-fit:cover}
.vt-ficha-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.vt-ficha-txt b{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(14px,1.05vw,18px);line-height:1;color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-ficha-txt i{font-style:normal;font-size:11.5px;color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-ficha-txt em{font-style:normal;font-size:12px;color:var(--texto-2);
  font-variant-numeric:tabular-nums}

/* los puntos, al costado */
.vt-puntos{position:absolute;top:44%;right:11px;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:7px}
/* Impeccable marca el `transition: height` como layout thrash. Aca se
   DEJA a proposito: el alto ES el layout de un indicador de puntos, y
   pasarlo a scaleY obliga a reservar el alto del activo en todos, con
   lo que los inactivos quedan separadisimos. Son 10 elementos de 5px:
   el costo real es nulo. */
.vt-punto{width:5px;height:5px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.25);transition:background-color .3s,height .3s}
.vt-punto:hover{background:rgba(255,255,255,.55)}
.vt-punto.on{background:var(--texto);height:16px}

@media(max-width:980px){
  .vt{justify-self:start;max-width:min(340px,76vw)}
  .vt-globo--a{left:auto;right:-5%}
  .vt-globo--b{left:-5%}
  .vt-ficha{left:4%;right:-6%}
}
@media(max-width:560px){
  .vt-globo{font-size:11px;padding:8px 12px 8px 9px}
  .vt-globo--a{right:0}
  .vt-globo--b{left:0}
  .vt-ficha{left:6%;right:0}
}

/* Producciones entra en UNA pantalla: con el padding normal de
   <section> se iba a 1.4 pantallas y la division quedaba sucia. */
/* Campañas + marcas es un SEPARADOR entre la portada y los
   influencers, no una pantalla entera. Mismo aire arriba que abajo. */
#numeros{padding:clamp(38px,4.4vw,72px) 0 0}
#marcas-seccion{padding:clamp(20px,2.4vw,38px) 0 0}

/* menos aire entre el titulo y el primer influencer */
#creadores{padding-bottom:clamp(40px,4.5vw,72px)}
#creadores .titulo-seccion{margin-bottom:clamp(10px,1.2vw,22px)}

/* el titulo tiene que despejar el header fijo (78px) */
#producciones{padding:clamp(96px,9vw,150px) 0 clamp(40px,4.4vw,68px)}
/* Ocupa todo el ancho: es el canvas mas grande de la home.
   NUNCA achicarlo tocando los aspect-ratio — deforma las piezas. */
.wrap--ancho{width:min(1900px,96vw)}
#producciones .centro{margin-top:clamp(20px,2.2vw,34px)}

/* el titulo no necesita el padding entero de <section> */
#equipo{margin-top:clamp(4px,1vw,16px)}
[data-nombre="Equipo"]{padding:clamp(60px,7vw,110px) 0}
[data-nombre="Equipo"] .titulo-seccion{margin-bottom:clamp(18px,2vw,34px)}

.etq::before{content:'';width:clamp(26px,3vw,52px);height:1px;
  background:var(--naranja);flex:0 0 auto}

/* ── TRABAJOS ───────────────────────────────────────────────
   Columna de categorias (LineSidebar de reactbits porteado) +
   grilla de marcas. El --effect de cada renglon lo escribe el JS
   cuadro a cuadro segun lo cerca que este el cursor.             */
.tr-cabeza .lead{max-width:46ch;margin-top:clamp(18px,2vw,30px)}
.tr-datos{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,72px);
  margin-top:clamp(32px,4vw,60px)}
.tr-dato b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(30px,3.4vw,58px);line-height:1;color:var(--texto);
  font-variant-numeric:tabular-nums}
/* El + y la M van en un <em>. Sin esta regla heredaban la cursiva del
   navegador y, como Coolvetica no tiene cursiva, Chrome la fabricaba
   inclinando la letra: se veian torcidos y montados sobre el numero.
   En el inicio no pasaba porque .cuenta b em ya la tenia. */
.tr-dato b em{font-style:normal}
.tr-dato b em:first-child{margin-right:.06em}
.tr-dato b span + em{margin-left:.05em}

/* la portada: texto a la izquierda, columnas de logos a la derecha */
.tr-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,4vw,80px);align-items:center}
.tr-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,26px);height:clamp(420px,66vh,700px);
  /* arriba y abajo se desvanecen: nada se corta a filo */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%)}
.tr-logos-col{height:100%}
.tr-dato i{font-style:normal;display:block;margin-top:8px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}

.tr{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(28px,5vw,88px);align-items:start}

/* la columna de categorias */
.tr-lista ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.tr-item{position:relative;padding-left:76px}
.tr-item button{display:flex;align-items:baseline;gap:10px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--body);padding:11px 0;
  color:color-mix(in srgb,var(--naranja) calc(var(--effect,0) * 100%),var(--texto-2));
  transform:translateX(calc(var(--effect,0) * 14px))}
.tr-item.on button{color:var(--naranja)}
.tr-n{font-style:normal;font-size:11.5px;opacity:calc(.5 + var(--effect,0) * .5);
  font-variant-numeric:tabular-nums}
.tr-txt{font-size:clamp(15px,1.15vw,19px);white-space:nowrap}
.tr-cuenta{font-style:normal;margin-left:auto;font-size:12px;
  opacity:calc(.45 + var(--effect,0) * .45);font-variant-numeric:tabular-nums}
/* la raya que se estira al acercar el cursor */
.tr-raya{position:absolute;left:0;top:50%;height:1px;width:58px;
  transform:translateY(-50%) scaleX(calc(.55 + var(--effect,0) * .45));
  transform-origin:left center;
  background:color-mix(in srgb,var(--naranja) calc(var(--effect,0) * 100%),var(--borde))}
.tr-item.on .tr-raya{background:var(--naranja)}

/* la grilla de marcas */
/* la columna derecha: la grilla de marcas y, pegado abajo, el
   desplegable de campañas. Van en un envoltorio para que el panel
   quede en ESTA columna y no baje a un renglon nuevo de .tr, que es
   una grilla de dos columnas con un gap grande. */
.tr-der{min-width:0}
/* Las lineas las pone cada celda (sombra interna a la derecha y abajo),
   no el fondo asomando por un gap de 1px: con "Todas" quedan 23
   marcas y el hueco del ultimo renglon se pintaba de gris entero.
   Asi el hueco queda del color de la seccion. */
.tr-marcas{display:grid;gap:0;background:var(--fondo);
  border:1px solid var(--borde-2);border-radius:14px;overflow:hidden;
  /* auto-FIT, no auto-fill: con fill quedan columnas vacias y se ve
     un rectangulo gris al costado cuando la categoria tiene pocas */
  grid-template-columns:repeat(auto-fit,minmax(clamp(130px,12vw,180px),1fr))}
.tr-marca{background:var(--fondo);padding:clamp(20px,2.4vw,34px) 16px;
  box-shadow:inset -1px -1px 0 var(--borde-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;min-height:clamp(120px,11vw,150px);
  animation:tr-entra .55s cubic-bezier(.16,1,.3,1) both}
.tr-marca img{height:clamp(24px,2.2vw,32px);width:auto;object-fit:contain;
  filter:var(--logo-filtro,brightness(0) invert(1));
  opacity:var(--logo-opacidad,.32);
  transition:opacity .35s,filter .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.tr-marca:hover img{opacity:1;filter:none;transform:scale(1.08)}
.tr-marca figcaption{font-size:11.5px;color:var(--texto-3);text-align:center;
  line-height:1.3}
@keyframes tr-entra{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.tr-marca{animation:none}}

@media(max-width:820px){
  .tr{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .tr-lista ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  /* en celular los logos van debajo del texto, en una franja mas baja */
  .tr-hero{grid-template-columns:1fr}
  .tr-logos{height:clamp(240px,60vw,320px)}
  .tr-item{padding-left:0}
  .tr-raya{display:none}
  .tr-item button{padding:9px 15px;border:1px solid var(--borde);
    border-radius:999px;transform:none}
  .tr-item.on button{border-color:var(--naranja)}
  .tr-cuenta{margin-left:6px}
}

/* ── ORBITA DE COMUNIDAD (franja lima del inicio) ────────────
   Reemplaza a los contadores sueltos + el video de presentacion.
   Porteo a mano de un patron de "orbita" (un arco con nodos
   alrededor): en el original usaba React + framer-motion, aca son
   <div>/<svg> posicionados con trigonometria y CSS puro — mismo
   mecanismo que ya usa vitrinaCreadores para sus globitos.

   Los nodos son chips decorativos con emoji (sin fotos de gente real
   ni redes de BIG). Los tres numeros van centrados abajo, mismos
   datos que siempre: METRICAS. */
.orb-escenario{position:relative;width:100%;
  height:clamp(200px,26vw,340px);margin:0 auto;
  max-width:1100px}
.orb-arcos{position:absolute;inset:0;width:100%;height:100%;
  overflow:visible}
.orb-arco{fill:none;stroke:var(--borde);stroke-width:1.5}
.orb-arco--in{stroke-width:2.5;opacity:.7}
.orb-nodo{position:absolute;transform:translate(-50%,-50%);
  animation:orb-flota 5s ease-in-out calc(var(--orb-d,0) * .5s) infinite}
.orb-nodo--chip{width:clamp(54px,6.4vw,80px);height:clamp(54px,6.4vw,80px);
  display:grid;place-items:center;border-radius:20px;background:var(--fondo);
  border:1px solid var(--borde);box-shadow:0 8px 20px -10px rgba(0,0,0,.5);
  font-size:clamp(24px,3vw,34px);line-height:1}
/* segundo arco: chips de check/estado, en lima — el acento positivo */
.orb-nodo--check{width:clamp(32px,3.6vw,44px);height:clamp(32px,3.6vw,44px);
  display:grid;place-items:center;border-radius:999px;background:#e8f29c;
  font-size:17px;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
@keyframes orb-flota{0%,100%{margin-top:0}50%{margin-top:-8px}}
.orb-cuentas{display:flex;justify-content:center;gap:clamp(24px,4vw,64px);
  flex-wrap:wrap;margin-top:clamp(4px,1vw,16px)}
.orb-cuentas .cuenta{padding:0;border-left:0;text-align:center}
.orb-titulo{text-align:center;margin:clamp(24px,3vw,44px) auto 0;max-width:26ch}
@media(prefers-reduced-motion:reduce){.orb-nodo{animation:none}}
@media(max-width:720px){.orb-nodo--chip,.orb-nodo--check{display:none}
  .orb-escenario{height:auto;margin-bottom:0}}

/* ── CARRUSEL DE CREADORES (Creadores, inicio) ───────────────
   El mismo "rail" que usa big-roster-2026: fila arrastrable, con
   auto-slide al pararse en el borde, swipe de trackpad y flechas.
   Ver carruselCreadores en componentes.js para la mecanica — aca
   solo el dibujo. Nombres cortos (carr-) para no chocar con .rail
   si algun dia se linkea contra ese proyecto.                    */
.carr-viewport{position:relative;overflow:hidden}
.carr-wrap{position:relative;width:100%;padding:0 clamp(24px,4vw,64px)}
.carr-rail{display:flex;gap:clamp(16px,1.6vw,26px);padding:10px 0 8px;
  cursor:grab;user-select:none;will-change:transform}
.carr-rail.arrastrando{cursor:grabbing}
.carr-tarjeta{flex:0 0 clamp(220px,16vw,300px);aspect-ratio:307/527;position:relative;
  perspective:800px;opacity:0;transform:translateY(28px);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.carr-rail--visible .carr-tarjeta{animation:carr-entra .6s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 45ms)}
@keyframes carr-entra{to{opacity:1;transform:translateY(0)}}
.carr-tilt{position:absolute;inset:0;border-radius:24px;overflow:hidden;
  background:var(--fondo-2);display:block;transform-style:preserve-3d}
.carr-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center top;pointer-events:none}
.carr-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(13,13,20,.85) 0%,transparent 32%)}
.carr-nombre{position:absolute;left:20px;right:20px;bottom:18px;color:#fff;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,1.6vw,22px);line-height:1.1;pointer-events:none}
.carr-flecha{position:absolute;top:42%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,118,30,.16);color:var(--naranja);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:background .25s,transform .25s;z-index:3}
.carr-flecha:hover{background:var(--naranja);color:#fff;transform:translateY(-50%) scale(1.08)}
.carr-flecha--prev{left:4px}
.carr-flecha--next{right:4px}
.carr-progreso{position:relative;padding:14px clamp(24px,4vw,64px) 0}
.carr-progreso-relleno{height:3px;width:0;background:var(--naranja);border-radius:3px;
  transition:width .1s linear}
@media(max-width:820px){
  .carr-viewport{height:auto!important}
  .carr-wrap{padding:0 22px}
  .carr-rail{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:4px 0 8px;gap:14px}
  .carr-tarjeta{flex:0 0 min(78vw,360px);scroll-snap-align:center}
  .carr-progreso{display:none}
  .carr-flecha{width:38px;height:38px;top:45%;background:rgba(13,13,20,.5);color:#fff;
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .carr-flecha--prev{left:10px}
  .carr-flecha--next{right:10px}
}

@media(max-width:700px){
  .vp-visor{height:min(62svh,520px)}
}

/* ── REPRODUCTOR DE CAMPAÑA ─────────────────────────────────
   Pantalla completa, fondo oscuro fijo (no var(--fondo)): la capa
   flota sobre cualquier bloque y tiene que leerse igual sobre crema
   que sobre tinta. Por lo mismo el texto de adentro va en crema fija
   y no en var(--texto).                                            */
.rp{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;
  padding:clamp(14px,3vw,40px);
  opacity:0;pointer-events:none;transition:opacity .35s ease-out}
.rp.abierto{opacity:1;pointer-events:auto}
.rp-fondo{position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:rgba(6,5,12,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)}

.rp-caja:focus{outline:none}
.rp-caja{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:clamp(12px,1.6vh,22px);max-width:min(460px,92vw);width:100%;
  transform:translateY(14px) scale(.985);
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.rp.abierto .rp-caja{transform:none}
@media(prefers-reduced-motion:reduce){
  .rp,.rp-caja{transition:none}
  .rp-caja{transform:none}
}

.rp-x{position:absolute;top:-6px;right:-6px;z-index:3;
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:rgba(6,5,12,.6);color:#ffffff;
  transition:border-color .3s,background .3s}
.rp-x:hover{border-color:var(--naranja);background:rgba(6,5,12,.9)}

/* el visor: vertical, que es como vienen los reels */
.rp-visor{position:relative;aspect-ratio:9/16;max-height:min(74vh,820px);
  width:100%;margin:0 auto;border-radius:16px;overflow:hidden;
  background:#000;cursor:pointer}
.rp-video{width:100%;height:100%;object-fit:cover;display:block}

/* el aviso de sonido solo se ve mientras esta mudo */
.rp-aviso{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;pointer-events:none;
  padding:9px 15px;border-radius:999px;white-space:nowrap;
  background:rgba(6,5,12,.72);color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .35s}
.rp-mudo .rp-aviso{opacity:1}
.rp-aviso i{font-style:normal;font-size:12.5px;letter-spacing:.01em}

.rp-titulo{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(16px,1.5vw,24px);line-height:1.08;
  color:#ffffff;margin:0;text-align:center;text-wrap:balance}

/* ── los controles ── */
.rp-controles{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);
  padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.rp-btn{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  cursor:pointer;border:0;border-radius:999px;background:none;color:#ffffff;
  transition:color .25s,background .25s}
.rp-btn:hover{color:var(--naranja);background:rgba(255,255,255,.1)}
.rp-btn:focus-visible{outline:1px solid var(--naranja);outline-offset:2px}

/* Control nativo de posición con un área táctil de 32 px. */
.rp-barra{--progreso:0%;appearance:none;-webkit-appearance:none;flex:1;min-width:0;width:100%;height:32px;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;touch-action:none;background:transparent;color:var(--naranja)}
.rp-barra::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--naranja) var(--progreso),rgba(255,255,255,.25) var(--progreso))}
.rp-barra::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--naranja)}
.rp-barra::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.25)}
.rp-barra::-moz-range-progress{height:4px;border-radius:999px;background:var(--naranja)}
.rp-barra::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--naranja)}
.rp-barra:disabled{opacity:.4;cursor:wait}
.rp-barra:focus-visible{outline:1px solid var(--naranja);outline-offset:3px;border-radius:999px}

.rp-tiempo{flex:0 0 auto;font-size:11.5px;color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

.rp-vol{flex:0 0 clamp(52px,6vw,84px);height:22px;cursor:pointer;
  accent-color:var(--naranja);background:none}
.rp-vol:focus-visible{outline:1px solid var(--naranja);outline-offset:2px;
  border-radius:999px}

@media(max-width:560px){
  /* el tiempo es lo primero que sobra: sin el entran el volumen y la
     barra sin apretarse */
  .rp-tiempo{display:none}
  .rp-visor{max-height:64vh}
}

/* cuando falta el archivo del logo: el nombre en su lugar, con la
   misma altura que tendria el logo para que la fila no se mueva */
.logo-falta{display:grid;place-items:center;height:clamp(24px,2.2vw,32px);
  padding:0 10px;font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(13px,1.1vw,17px);line-height:1;
  color:var(--texto-2);white-space:nowrap}
.loop-item .logo-falta{height:var(--loop-h)}

/* una marca con campañas se puede abrir: se le nota */
.tr-marca--play{cursor:pointer;border:0;padding:clamp(20px,2.4vw,34px) 16px;
  font:inherit;text-align:center;position:relative;width:100%}
.tr-marca--play::after{content:'';position:absolute;inset:0;
  border:1px solid var(--naranja);border-radius:2px;
  opacity:0;transition:opacity .3s}
.tr-marca--play:hover::after,.tr-marca--play:focus-visible::after{opacity:1}
.tr-marca--play:focus-visible{outline:none}
.tr-play{position:absolute;top:10px;right:10px;width:22px;height:22px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--naranja);color:#0d0d14;
  transform:scale(.82);opacity:.65;transition:transform .3s,opacity .3s}
.tr-marca--play:hover .tr-play,
.tr-marca--play:focus-visible .tr-play{transform:none;opacity:1}
.tr-cuantas{display:block;margin-top:4px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--naranja)}
.tr-marca--play.on::after{opacity:1}
.tr-marca--play.on .tr-play{transform:none;opacity:1}

/* ── el desplegable de campañas de una marca ────────────────
   Se mete en la MISMA grilla ocupando la fila entera, asi la grilla
   lo baja sola a un renglon nuevo debajo de su marca. Sin esto habria
   que calcular en que fila cayo el boton.

   Se anima grid-template-rows de 0fr a 1fr, que es la unica forma de
   abrir a alto automatico sin saber cuanto mide el contenido:
   max-height obliga a inventar un tope y salta al llegar. */
.tr-panel{background:var(--fondo);
  border:1px solid var(--borde-2);border-top:0;
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.tr-panel.abierto{grid-template-rows:1fr}
.tr-panel-i{overflow:hidden;min-height:0}
.tr-panel .tr-panel-i > *{opacity:0;transform:translateY(10px);
  transition:opacity .4s ease-out .12s,transform .4s cubic-bezier(.16,1,.3,1) .12s}
.tr-panel.abierto .tr-panel-i > *{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .tr-panel{transition:none}
  .tr-panel .tr-panel-i > *{transition:none}
}

.tr-panel-t{margin:0;padding:clamp(20px,2.4vw,32px) clamp(16px,2vw,28px) 0;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-3)}
.tr-camps{display:grid;gap:clamp(12px,1.4vw,20px);
  padding:clamp(14px,1.6vw,22px) clamp(16px,2vw,28px) clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(132px,11vw,178px),1fr))}

/* la miniatura ES el video quieto en el primer cuadro, no una foto
   aparte: asi la tarjeta muestra la campaña de verdad */
.tr-camp{border:0;padding:0;background:none;cursor:pointer;font:inherit;
  text-align:left;width:100%}
.tr-camp-visor{position:relative;display:block;aspect-ratio:9/16;
  border-radius:12px;overflow:hidden;background:var(--fondo-2)}
.tr-camp-video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.tr-camp:hover .tr-camp-video,
.tr-camp:focus-visible .tr-camp-video{transform:scale(1.045)}
.tr-camp-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.62));
  transition:background .35s}
.tr-camp:hover .tr-camp-velo{background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5))}
/* el titulo al medio, igual que en el muro */
.tr-camp-t{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  padding:12px;text-align:center;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(12.5px,1vw,16px);line-height:1.06;
  color:#ffffff;text-wrap:balance;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.tr-camp-play{position:absolute;left:10px;top:10px;z-index:3;
  width:26px;height:26px;display:grid;place-items:center;border-radius:999px;
  background:var(--naranja);color:#0d0d14;
  transform:scale(.85);opacity:.9;transition:transform .3s,opacity .3s}
.tr-camp:hover .tr-camp-play,
.tr-camp:focus-visible .tr-camp-play{transform:none;opacity:1}
.tr-camp:focus-visible .tr-camp-visor{outline:1px solid var(--naranja);
  outline-offset:2px}

/* ── EQUIPO (Nosotros) ──────────────────────────────────────
   Fichas agrupadas por area. Sin foto todavia: se muestran las
   iniciales sobre un color del manual, que se lee como marcador.   */
/* padding:0 obligatorio: es un <section> y la regla global de
   section{} le mete 165px de padding vertical */
.eq-area{padding:0;margin-bottom:clamp(40px,5vw,80px)}
.eq-area:last-child{margin-bottom:0}
.eq-titulo{font-family:var(--body);font-weight:400;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:clamp(18px,2vw,30px);
  padding-bottom:12px;border-bottom:1px solid var(--borde-2)}
.eq-grilla{display:grid;gap:clamp(20px,2.4vw,38px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,14vw,210px),1fr))}
.eq-foto{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  background:var(--fondo-2);margin-bottom:14px}
.eq-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.eq-ficha:hover .eq-foto img{transform:scale(1.04)}
/* marcador mientras no hay foto */
.eq-ini{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(34px,3.4vw,58px);color:#0d0d14}
.eq-ficha b{display:block;font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(15px,1.1vw,20px);line-height:1.05;margin-bottom:5px}
.eq-ficha i{font-style:normal;display:block;font-size:12.5px;
  color:var(--texto-3);line-height:1.4}

/* ── REDES, al costado de la portada ────────────────────────
   Riel vertical pegado al borde derecho. Solo aparece con puntero
   fino y pantalla ancha: en celular compite con el contenido.     */
.redes{position:absolute;right:clamp(14px,2.2vw,34px);top:50%;
  transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:10px}
.red{width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--borde);border-radius:999px;color:var(--texto-3);
  transition:color .3s,border-color .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.red:hover{color:var(--naranja);border-color:var(--naranja);transform:translateY(-2px)}
.red:focus-visible{outline:1px solid var(--naranja);outline-offset:3px}
@media(max-width:1100px){.redes{display:none}}

/* la bajada va debajo de los botones de la portada */
.baja{margin-top:clamp(34px,4vw,58px);
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:9px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);transition:color .35s}
.baja:hover{color:var(--texto)}
.baja svg{color:var(--naranja);
  animation:baja-vaiven 2.4s cubic-bezier(.45,0,.35,1) infinite}
@keyframes baja-vaiven{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(10px)}
}
@media(prefers-reduced-motion:reduce){.baja svg{animation:none}}

/* Titulos de seccion: centrados, grandes y en un solo renglon.
   El de la portada NO entra aca: ese va alineado a la izquierda. */
.centro-txt{text-align:center}
.titulo-seccion{max-width:none;white-space:nowrap;
  font-size:clamp(40px,5.4vw,104px);line-height:1;
  margin-bottom:clamp(26px,3vw,52px)}
@media(max-width:640px){.titulo-seccion{white-space:normal}}

/* la portada mas angosta: es lo que quedo mejor probandolo en el panel */
#inicio{--ancho:min(1780px,75vw)}
/* El titulo de las cabeceras es el MISMO en todas las paginas y sale
   de la portada. Antes solo la portada lo tenia: MEDIDO en 1760px, la
   portada iba en 137px y las otras cinco en 106px, un 30% mas chico. */
.cabeza .t1{font-size:clamp(16px,2.2vw,42px)}
#inicio .t1{font-size:clamp(48px,6.8vw,124px);letter-spacing:-.045em}
/* En desktop el 75vw centra bien la portada, pero en celular deja 100px
   de margen muerto (el 25% de la pantalla) y el titular entra apretado.
   Abajo de 900px la portada usa el mismo ancho que el resto del sitio. */
@media(max-width:900px){#inicio{--ancho:min(1780px,92vw)}}

/* LAS CABECERAS DE TODAS LAS PAGINAS usan el mismo ancho que la
   portada. Era la diferencia que hacia ver a la portada "mas
   centrada": MEDIDO en 1760px, el titulo de la portada arrancaba en
   x=220 y el de las otras cinco paginas en x=70, pegado al borde.
   Solo la cabecera: el resto de las secciones sigue en 92vw, igual
   que en la portada. */
.cabeza{--ancho:min(1780px,75vw)}
@media(max-width:900px){.cabeza{--ancho:min(1780px,92vw)}}

/* EXCEPCION: Talentos. Ahi la cabecera tiene el muro, y el tamaño de
   las fichas sale del ancho de la caja: con 75vw bajaban de 283px a
   238px, y Nico las habia pedido mas grandes. Asi que Talentos se
   queda en 92vw y lo que se corre es SOLO el texto, la misma
   distancia que achica la portada de cada lado: (92vw - 75vw) / 2. */
.cabeza.tal-cabeza{--ancho:min(1780px,92vw)}
/* se corre a la derecha, y se estira a la derecha lo mismo: si no, la
   columna de texto quedaba 150px mas angosta y el parrafo pasaba de 4
   a 5 renglones. El muro ya pasa por debajo del texto (z-index), asi
   que meterse en su columna no pisa nada. */
.tal-txt{--corrimiento:calc((min(1780px,92vw) - min(1780px,75vw)) / 2);
  padding-left:var(--corrimiento);margin-right:calc(-1 * var(--corrimiento))}
@media(max-width:900px){.tal-txt{padding-left:0;margin-right:0}}

/* ── CONTADORES ─────────────────────────────────────────────── */
.cuentas{display:grid;grid-template-columns:repeat(3,1fr)}
.cuenta{padding:clamp(20px,2.2vw,34px) clamp(18px,2vw,40px);border-left:1px solid var(--borde-2)}
.cuenta:first-child{border-left:0;padding-left:0}
.cuenta b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(44px,5.6vw,112px);line-height:.84;font-variant-numeric:tabular-nums;
  margin-bottom:14px}
.cuenta b em{font-style:normal;color:var(--naranja)}
.cuenta i{font-style:normal;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-3)}
@media(max-width:820px){
  .cuentas{grid-template-columns:1fr}
  .cuenta{border-left:0;border-top:1px solid var(--borde-2);padding-left:0}
  .cuenta:first-child{border-top:0}
}

/* ── TALENTOS: portada con muro + grilla ────────────────────────
   El muro NO es una banda a lo ancho: va en la mitad derecha del
   primer canvas, al lado del texto, y se termina con el. Al bajar a
   la grilla de creadores ya no esta.                               */
/* .cabeza.tal-cabeza, con las DOS clases: .cabeza se declara mas
   abajo en este archivo y con un solo nombre le ganaba el padding-top
   (178px), que empujaba el muro y lo cortaba contra el borde de
   abajo. Mismo caso que .dw pisandole el alto a .muro. */
.cabeza.tal-cabeza{min-height:100svh;display:flex;align-items:center;
  padding-top:var(--alto-header);padding-bottom:clamp(26px,3vw,56px)}
/* 1fr 2.4fr: el muro arranca justo donde termina el parrafo, no a
   media pantalla. Con 1.6 quedaba una franja finita a la derecha. */
.tal-grid{display:grid;grid-template-columns:1fr 2.4fr;
  gap:clamp(26px,3.5vw,60px);align-items:center}
/* El texto va POR ENCIMA del muro: el muro se sale de su celda hacia
   la izquierda y le pasa por detras. Sin z-index lo taparia, porque
   en el HTML viene despues. */
.tal-txt{position:relative;z-index:2}
/* El muro se estira hacia la IZQUIERDA fuera de su celda: asi entra
   una columna mas SIN achicar las fichas (con fit:true el ancho de la
   caja se reparte entre las columnas, de modo que sumar una columna a
   ancho fijo las achicaria). El margen negativo va en vw para que la
   ficha mida mas o menos lo mismo en cualquier pantalla.
   La parte que queda debajo del texto cae dentro del 30% de fundido
   de la izquierda, asi que ahi las fichas estan casi apagadas. */
/* `.tal-grid .muro` con DOS niveles a proposito: `.dw` trae
   width:100% y se declara mas abajo en este archivo, asi que con
   `.muro` a secas le ganaba y el muro se corria a la izquierda SIN
   ensancharse (quedaba del ancho de la celda, movido). Tercera vez
   que este archivo muerde por orden de declaracion: ojo al anidar. */
.tal-grid .muro{position:relative;z-index:0;width:auto;
  margin-left:calc(-1 * clamp(150px,16vw,320px));
  height:min(84svh,880px);min-height:380px}

@media(max-width:900px){
  /* en celular el muro pasa abajo del texto y se achica: al lado no
     entra sin que las fichas queden ilegibles */
  .cabeza.tal-cabeza{min-height:0;display:block;
    padding-top:calc(var(--alto-header) + clamp(40px,7vw,90px))}
  .tal-grid{grid-template-columns:1fr;gap:clamp(30px,6vw,50px)}
  /* en celular el muro va debajo del texto, no detras: no hay lugar
     para que se salga de la celda */
  .tal-grid .muro{margin-left:0;width:100%;height:min(46svh,430px);min-height:300px}
}
/* Antes era un mosaico pegado con lineas de 1px. Las tarjetas se
   inclinan y tienen halo, asi que necesitan aire alrededor. */
/* ── Filtros de Talentos: menus desplegables ── */
.filtros{margin-bottom:clamp(26px,3vw,44px);position:relative;z-index:5}
.fil-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  padding-bottom:clamp(16px,1.8vw,24px);border-bottom:1px solid var(--borde-2)}
.fil-menu{position:relative}
.fil-boton{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 20px;
  font-family:var(--body);font-size:14.5px;color:var(--texto);background:transparent;
  border:1px solid var(--borde);border-radius:999px;cursor:pointer;
  transition:border-color .25s,background-color .25s}
.fil-boton:hover{border-color:var(--texto-3)}
.fil-boton svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.fil-menu.abierto .fil-boton{border-color:var(--texto)}
.fil-menu.abierto .fil-boton svg{transform:rotate(180deg)}
/* con algo elegido, el boton se invierte y muestra cuantas */
.fil-menu.con-eleccion .fil-boton{background:var(--texto);border-color:var(--texto);color:var(--fondo)}
.fil-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--fondo);color:var(--texto);font-size:12px;font-weight:500;
  font-variant-numeric:tabular-nums}
.fil-n[hidden]{display:none}   /* el display de arriba le ganaba al hidden */
.fil-boton:focus-visible,.fil-limpiar:focus-visible{outline:2px solid var(--texto);outline-offset:3px}

.fil-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;max-height:min(60vh,420px);
  overflow-y:auto;padding:8px;border-radius:16px;background:var(--fondo-2,#000);
  border:1px solid var(--borde);box-shadow:0 30px 60px -24px rgba(0,0,0,.85);
  animation:fil-abre .25s cubic-bezier(.16,1,.3,1)}
@keyframes fil-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fil-op{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14.5px;color:var(--texto-2);
  transition:background-color .2s,color .2s}
.fil-op:hover{background:var(--borde-2);color:var(--texto)}
.fil-op input{position:absolute;opacity:0;pointer-events:none}
.fil-caja{width:18px;height:18px;border:1.5px solid var(--texto-3);border-radius:5px;
  display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.fil-op input:checked + .fil-caja{background:var(--texto);border-color:var(--texto)}
.fil-op input:checked + .fil-caja::after{content:'';width:5px;height:9px;margin-top:-2px;
  border:solid var(--fondo);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fil-op input:checked ~ .fil-txt{color:var(--texto)}
.fil-op input:focus-visible + .fil-caja{outline:2px solid var(--texto);outline-offset:2px}
.fil-op i{font-style:normal;font-size:12.5px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.fil-op:has(input:disabled){opacity:.35;cursor:default}
.fil-op:has(input:disabled):hover{background:none;color:var(--texto-2)}

.fil-cuenta{margin-left:auto;font-size:13px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.fil-limpiar{background:none;border:0;padding:6px 0;cursor:pointer;color:var(--texto);
  font:inherit;font-size:13.5px;text-decoration:underline;text-underline-offset:4px}
.fil-vacio{text-align:center;padding:clamp(40px,6vw,90px) 0;color:var(--texto-2)}
.fil-vacio .btn{margin-top:18px}
@media(max-width:700px){
  .fil-cuenta{margin-left:0;order:9}
  .fil-limpiar{order:10;margin-left:auto}
  /* en celular el panel ocupa el ancho de la fila */
  .fil-menu{position:static}
  .fil-fila{position:relative}
  .fil-panel{left:0;right:0;min-width:0}
}

.grilla{display:grid;gap:clamp(16px,1.6vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(200px,15vw,270px),1fr))}
.centro{display:flex;justify-content:center;margin-top:clamp(30px,3vw,50px)}

/* ── TARJETA DE TALENTO (ProfileCard porteada) ──────────────
   Inclinacion 3D + lamina holografica que sigue al cursor.
   Los seis colores de la lamina salen del manual: los tres de
   impacto y tres dinamicos. Nada de arcoiris generico.

   OJO con el rendimiento: son 43 tarjetas. Todo lo caro
   —la animacion de la lamina y el halo desenfocado— solo corre
   con .tj-viva, o sea con el cursor encima de ESA tarjeta.        */
.tj-wrap{
  --pt-x:50%; --pt-y:50%;          /* posicion del cursor, la escribe el JS */
  --pt-centro:0; --pt-arriba:.5; --pt-izq:.5;
  --fondo-x:50%; --fondo-y:50%;
  --gira-x:0deg; --gira-y:0deg;
  --tj-radio:16px;
  --tj-vivo:0;                     /* 0 apagada, 1 con el cursor encima */
  /* los seis de la lamina — manual de BIG */
  position:relative;perspective:600px;touch-action:none;
  transform:translate3d(0,0,.1px)}
.tj-wrap.tj-viva{--tj-vivo:1}

/* halo detras de la tarjeta: naranja del manual, sigue al cursor */
.tj-halo{position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:var(--tj-radio);
  background:radial-gradient(circle at var(--pt-x) var(--pt-y),
    rgba(255,118,30,.55) 0%,transparent 55%);
  filter:blur(38px) saturate(1.1);
  opacity:calc(.85 * var(--tj-vivo));transition:opacity .25s ease}

.tj-shell{position:relative;z-index:1}

.tj{position:relative;display:block;width:100%;aspect-ratio:.72;
  border-radius:var(--tj-radio);overflow:hidden;cursor:pointer;
  background:#0a0908;border:1px solid var(--borde-2);
  backface-visibility:hidden;
  box-shadow:rgba(0,0,0,.7) calc((var(--pt-izq) * 10px) - 3px)
    calc((var(--pt-arriba) * 18px) - 6px) 22px -8px;
  transform:translateZ(0) rotateX(var(--gira-y)) rotateY(var(--gira-x));
  transition:transform .9s cubic-bezier(.16,1,.3,1),border-color .4s}
.tj-wrap.tj-viva .tj{transition:transform 0s,border-color .4s;
  border-color:rgba(255,118,30,.5)}
.tj:focus-visible{outline:1px solid var(--naranja);outline-offset:4px}

/* capas apiladas: interior, foto, lamina, brillo, velo */
.tj-interior,.tj-foto,.tj-lamina,.tj-brillo,.tj-velo{
  position:absolute;inset:0;pointer-events:none;display:block}

.tj-interior{background-image:linear-gradient(145deg,
  rgba(3,50,156,.42) 0%,rgba(255,118,30,.28) 100%);
  background-color:#0a0908;z-index:1}

/* LA FOTO VA EN COLOR. El original la manda a luminosity y queda
   monocroma; el sentido de esta tarjeta era salir del blanco y negro. */
.tj-foto{z-index:2}
.tj-foto img{width:100%;height:100%;object-fit:cover;
  transform:translateZ(0)
    scale(calc(1.03 + var(--pt-centro) * .02))
    translate(calc((var(--pt-izq) - .5) * -8px),calc((var(--pt-arriba) - .5) * -8px));
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  -webkit-user-drag:none}

/* la lamina: el simbolo de BIG repetido, recortando una tira de los
   seis colores. Solo se anima cuando la tarjeta esta viva. */
/* LA LAMINA — estilo figurita de Panini.
   Los logos van ENTEROS, quietos y espaciados: el patron es un tile
   con dos simbolos en diagonal (img/ui/patron-big.svg) y la mascara
   NO se mueve con el cursor. Lo que se mueve es el reflejo plateado
   que pasa por encima, como cuando inclinas una figurita.

   Antes: la mascara seguia al cursor (los logos se deslizaban) y se
   cruzaba con bandas a 45 grados que cortaban cada logo en tiras.
   De ahi las "lineas" y la sensacion de movimiento.                */
.tj-lamina{z-index:3;
  -webkit-mask-image:url('../img/ui/patron-big.svg');
  mask-image:url('../img/ui/patron-big.svg');
  -webkit-mask-size:46%;mask-size:46%;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:center;mask-position:center;   /* quieta */
  /* plata: neutros del manual, sin tinte de color */
  background-image:repeating-linear-gradient(112deg,
    rgba(255,255,251,.90) 0%,rgba(178,176,168,.52) 10%,
    rgba(255,255,255,.92) 20%,rgba(146,144,138,.48) 30%,
    rgba(255,255,251,.90) 42%);
  background-size:190% 190%;
  background-position:var(--fondo-x) var(--fondo-y);   /* el brillo si sigue */
  mix-blend-mode:overlay;
  filter:contrast(1.12);
  opacity:calc(.12 + .23 * var(--tj-vivo));
  transition:opacity .5s ease,filter .5s ease}
.tj-wrap.tj-viva .tj-lamina{filter:contrast(1.1) brightness(1.06)}

/* reflejo suave que sigue al cursor */
.tj-brillo{z-index:4;mix-blend-mode:overlay;
  background-image:radial-gradient(farthest-corner circle at var(--pt-x) var(--pt-y),
    rgba(255,255,255,.55) 10%,rgba(13,13,20,.75) 85%);
  filter:brightness(.9) contrast(1.15);
  opacity:calc(0 + .34 * var(--tj-vivo));transition:opacity .4s ease}

/* velo de abajo, para que el texto se lea siempre */
.tj-velo{z-index:5;background:linear-gradient(rgba(6,5,5,.78) 0%,transparent 34%,
  transparent 46%,rgba(6,5,5,.92) 100%)}

.tj-datos{position:absolute;inset:auto 14px auto 14px;top:16px;z-index:6;
  pointer-events:none;
  transform:translate3d(calc(var(--pt-izq) * -5px + 2.5px),
    calc(var(--pt-arriba) * -5px + 2.5px),0)}
.tj-datos h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(16px,1.2vw,23px);line-height:.98;
  color:var(--texto)}
.tj-datos p{font-size:11.5px;color:var(--texto-2);margin-top:5px;line-height:1.3}

.tj-pie{position:absolute;inset:auto 12px 12px 12px;z-index:6;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:calc(var(--tj-radio) - 5px);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tj-pie-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.tj-pie-txt b{font-weight:400;font-size:12px;color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj-pie-txt i{font-style:normal;font-size:11px;color:var(--texto-3);
  font-variant-numeric:tabular-nums}
.tj-btn{flex:0 0 auto;font-size:11px;letter-spacing:.02em;color:var(--texto);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 13px;
  transition:border-color .3s,color .3s}
.tj:hover .tj-btn{border-color:var(--naranja);color:var(--naranja)}

/* sin puntero fino no hay inclinacion: la tarjeta queda quieta y
   legible, sin capas caras encendidas */
@media(hover:none),(prefers-reduced-motion:reduce){
  .tj-halo{display:none}
  .tj-lamina{opacity:.16}
  .tj{transform:none!important;transition:none}
}

/* ── DESFILE DE CREADORES (inicio) ──────────────────────────
   Seccion alta con un escenario pegado adentro.

   Estructura, como en la referencia (newformcap.com):
   "Scroll" vertical · FOTO a la izquierda · TEXTO a la derecha.
   La foto entra desde abajo-derecha y viaja hasta su lugar; el
   texto se genera al costado cuando llega. El viaje lo escribe el
   JS en transform; aca solo esta el escenario.                    */
/* 40vh por creador, no 62: con 62 el desfile se comia 7.2 pantallas
   —el 69% de la home— y llegar a Producciones era un peaje largo. */
.df-alto{height:calc((var(--df-n) * 40vh) + 100svh)}
/* El titulo va DENTRO del escenario: queda fijo mientras pasan los
   creadores y desaparece el hueco que quedaba debajo del titulo. */
/* El titulo va ARRIBA del escenario, despejando el header, y el
   resto se acomoda debajo. Centrado verticalmente quedaba flotando
   en el medio de la pantalla y no se iba nunca. */
.df-escena{position:sticky;top:0;height:100svh;display:flex;
  flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:calc(var(--alto-header) + clamp(10px,2vh,30px));
  overflow:hidden}
.df-titulo{margin:0 0 clamp(6px,1.2vh,18px);flex:0 0 auto;z-index:3}
/* pegado al titulo, no centrado en lo que sobra: centrado dejaba
   un hueco de ~160px entre el titulo y el primer influencer */
.df-wrap{flex:1 1 auto;align-content:start;padding-top:clamp(6px,1.5vh,22px)}
.df-wrap{width:min(var(--ancho),1240px);margin:0 auto;display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:clamp(18px,3vw,54px);align-items:center}

/* la etiqueta vertical, a la izquierda de la foto */
/* la flecha va DEBAJO de la palabra y se mueven las dos juntas,
   hacia abajo y de vuelta */
.df-scroll{display:flex;flex-direction:column;align-items:center;gap:14px;
  justify-self:center;
  animation:df-vaiven 2.6s cubic-bezier(.45,0,.35,1) infinite}
.df-scroll-txt{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:12px;letter-spacing:.14em;color:var(--texto-3)}
.df-scroll svg{color:var(--naranja)}

/* la foto: el mazo apilado en un solo lugar */
.df-mazo{position:relative;z-index:1;
  width:clamp(190px,20vw,300px);aspect-ratio:3/4.15}
.df-ficha{position:absolute;inset:0;padding:0;border:1px solid var(--borde-2);
  border-radius:16px;overflow:hidden;background:var(--fondo-2);cursor:pointer;
  will-change:transform,opacity;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.95)}
.df-foto{position:absolute;inset:0;overflow:hidden;display:block}
.df-foto img{width:100%;height:100%;object-fit:cover;display:block;
  will-change:transform;transition:filter .5s ease}
.df-ficha:hover .df-foto img{filter:brightness(1.08)}
/* el mismo plateado de las tarjetas de Talentos, muy tenue */
.df-lamina{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:url('../img/ui/patron-big.svg');
  mask-image:url('../img/ui/patron-big.svg');
  -webkit-mask-size:52%;mask-size:52%;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:center;mask-position:center;
  background-image:repeating-linear-gradient(112deg,
    rgba(255,255,251,.9) 0%,rgba(178,176,168,.5) 10%,
    rgba(255,255,255,.9) 20%,rgba(146,144,138,.45) 30%,
    rgba(255,255,251,.9) 42%);
  background-size:190% 190%;background-position:center;
  mix-blend-mode:overlay;opacity:.12;transition:opacity .5s ease}
.df-ficha:hover .df-lamina{opacity:.3}
.df-ficha:focus-visible{outline:1px solid var(--naranja);outline-offset:4px}

/* el texto, a la derecha. Los nombres se apilan en el mismo lugar. */
.df-textos{position:relative;z-index:3;min-width:0;
  height:clamp(250px,27vw,360px)}
.df-texto{position:absolute;inset:0;visibility:hidden;
  display:flex;flex-direction:column;justify-content:center}
.df-texto.on{visibility:visible}

/* El texto se genera en cascada: nombre, hairline, nicho, seguidores
   y al final la descripcion. Ese desfase es lo que lo hace sentir
   armado y no que "aparece todo junto". */
.df-texto > *{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.df-texto.on > *{opacity:1;transform:none}
.df-texto.on h3{transition-delay:.06s}
.df-texto.on .df-linea{transition-delay:.16s}
.df-texto.on p{transition-delay:.22s}
.df-texto.on .df-foll{transition-delay:.28s}
.df-texto.on .df-desc{transition-delay:.40s}

.df-texto h3{font-weight:400;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(34px,5.2vw,92px);line-height:.94;color:var(--texto);
  max-width:12ch}
/* hairline debajo del nombre — en crema, no naranja */
.df-linea{display:block;height:1px;width:clamp(52px,6vw,104px);
  background:var(--naranja);transform-origin:left;
  margin:clamp(16px,1.8vw,26px) 0}
.df-texto.on .df-linea{animation:df-raya .8s .16s cubic-bezier(.16,1,.3,1) both}
.df-texto p{font-size:clamp(13px,1vw,16px);color:var(--texto-2);margin-bottom:6px}
.df-texto .df-foll{font-size:13px;color:var(--texto-3);
  font-variant-numeric:tabular-nums}

/* la descripcion se despliega por alto, no por opacidad */
.df-desc{display:grid;grid-template-rows:0fr;
  margin-top:clamp(16px,1.8vw,26px);
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1),
             grid-template-rows .8s cubic-bezier(.16,1,.3,1)}
.df-texto.on .df-desc{grid-template-rows:1fr}
.df-desc > div{overflow:hidden;min-height:0}
.df-desc em{font-style:normal;display:block;font-size:clamp(13px,.95vw,15.5px);
  line-height:1.6;color:var(--texto-2);max-width:38ch}

/* Modo compacto: a partir del segundo creador (lo pone el JS). El
   titulo se achica y sube como un header chico, y las descripciones
   se ensanchan para ocupar menos alto. El primer creador se ve como
   siempre.
   El titulo se achica con transform, NO con font-size: asi su lugar
   en la pagina no cambia y la foto y el texto quedan a la misma altura
   que con el primero, que es el que esta bien centrado. Con font-size
   el espacio liberado corria todo y quedaban desparejos. */
.df-titulo{transform-origin:50% 0;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.df-escena.compacto .df-titulo{transform:scale(.42)}
@media(min-width:901px){
  .df-escena.compacto .df-desc em{max-width:58ch}
}
@media(max-width:900px){
  .df-escena.compacto .df-titulo{transform:scale(.6)}
}

/* barra de avance, al costado */
.df-barra{position:absolute;top:50%;right:clamp(10px,2.2vw,34px);
  transform:translateY(-50%);width:2px;height:clamp(90px,14vh,170px);
  background:var(--borde-2);border-radius:999px;overflow:hidden;z-index:2}
.df-barra span{display:block;width:100%;height:100%;transform-origin:top;
  transform:scaleY(0);background:var(--texto)}

/* la flecha sube y vuelve, sin cortes: el mismo desplazamiento de
   ida y de vuelta con una curva simetrica */
@keyframes df-vaiven{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(11px)}
}
@keyframes df-raya{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

@media(max-width:900px){
  .df-alto{height:calc((var(--df-n) * 34vh) + 100svh)}
  .df-wrap{grid-template-columns:1fr;gap:clamp(22px,4vw,36px);
    justify-items:center;text-align:center}
  .df-scroll{display:none}
  .df-mazo{width:min(210px,54vw)}
  .df-textos{height:clamp(210px,44vw,300px);justify-self:stretch}
  .df-texto{align-items:center}
  .df-texto h3{max-width:none}
  .df-linea{margin-left:auto;margin-right:auto}
  /* en celular no entra una bio entera al lado de la foto: se
     muestran las primeras lineas y el resto esta en su perfil */
  .df-desc em{margin:0 auto;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:4;overflow:hidden}
  .df-barra{display:none}
}
/* sin movimiento: todo quieto y visible */
@media(prefers-reduced-motion:reduce){
  .df-alto{height:auto}
  .df-escena{position:static;height:auto;padding:clamp(40px,6vw,90px) 0}
  .df-texto > *{transition:none}
  .df-texto.on .df-linea{animation:none}
  .df-scroll{animation:none}
}

/* ── CORTES CON FUNDIDO ─────────────────────────────────────
   REGLA DE LA WEB: nada se corta a filo. Todo lo que quede recortado
   por su contenedor —una tira que sigue de largo, un carrusel, una
   grilla— se desvanece en el borde en vez de cortarse de golpe.

   .fade-x        funde a los costados. El ancho sale de --fade.
                  Arranca sin fundir nada (--fade-i / --fade-d en 0):
                  quien los enciende es bordesFundidos() de
                  js/componentes.js, que funde solo el lado que
                  todavia tiene contenido detras.
   .fade-x--fijo  funde siempre los dos lados, para lo que nunca
                  llega a un tope (carruseles continuos).           */
.fade-x{--fade:clamp(20px,3.5%,56px);--fade-i:0px;--fade-d:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-i),
    #000 calc(100% - var(--fade-d)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-i),
    #000 calc(100% - var(--fade-d)),transparent 100%)}
.fade-x--fijo{--fade-i:var(--fade);--fade-d:var(--fade)}

/* ── MARCAS ─────────────────────────────────────────────────── */
.marcas-caja{padding:clamp(34px,4vw,60px) 0}

/* ── CASOS ──────────────────────────────────────────────────── */
.casos{display:grid;gap:1px;background:var(--borde-2);border:1px solid var(--borde-2)}
.caso{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--fondo);
  min-height:clamp(260px,26vw,420px);overflow:hidden}
.caso:nth-child(even){direction:rtl}
.caso:nth-child(even)>*{direction:ltr}
.caso .foto{position:relative;overflow:hidden}
.caso .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.7);transition:filter .7s,transform .9s cubic-bezier(.16,1,.3,1)}
.caso:hover .foto img{filter:grayscale(0) brightness(.95);transform:scale(1.04)}
.caso .txt{padding:clamp(26px,3.2vw,58px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.caso .chip{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.caso h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(22px,2.2vw,42px);line-height:1}
.caso p{color:var(--texto-2);font-size:15px;line-height:1.6;max-width:48ch}
@media(max-width:820px){
  .caso,.caso:nth-child(even){grid-template-columns:1fr;direction:ltr}
  .caso .foto{aspect-ratio:16/10}
}

/* ── CONTACTO ───────────────────────────────────────────────
   Cabecera centrada, el par de pestañas marca/talento, el
   formulario y abajo de todo los datos de la agencia.          */
.cabeza--centro{text-align:center}
.cabeza--centro .lead{margin-left:auto;margin-right:auto}
.cabeza--centro .mail{margin-top:clamp(24px,2.6vw,42px)}
.mail{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(24px,3.2vw,60px);line-height:1;display:inline-block;position:relative;
  word-break:break-word;transition:opacity .35s}
.mail::after{content:'';position:absolute;left:0;bottom:-5px;height:1px;width:100%;
  background:var(--texto);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mail:hover::after{transform:scaleX(1)}

/* el par de pestañas: centrado, y la elegida se invierte a crema */
.fm-sel{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
  margin-bottom:clamp(34px,4vw,62px)}
.fm-sel-btn{padding:14px 30px}
.fm-sel-btn:not(.on){color:var(--texto-3)}
.fm-sel-btn:not(.on):hover{color:var(--texto)}
.fm-sel-btn.on{background:var(--texto);border-color:var(--texto);color:var(--fondo)}

/* el formulario, centrado y acotado para que no se estire de mas */
.fm{max-width:900px;margin:0 auto}
.fm-grilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px)}
.fm-grilla--redes{grid-template-columns:repeat(3,1fr)}
.fm-campo{display:flex;flex-direction:column;gap:9px;min-width:0}
.fm-campo--ancho{grid-column:1 / -1}
.fm-campo > span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-3)}
.fm-campo > span b{color:var(--naranja);font-weight:400}
.fm input,.fm textarea{width:100%;font-family:var(--body);font-size:15px;color:var(--texto);
  background:transparent;border:0;border-bottom:1px solid var(--borde);border-radius:0;
  padding:10px 2px;transition:border-color .3s}
.fm textarea{resize:vertical;line-height:1.6;min-height:98px}
.fm input::placeholder,.fm textarea::placeholder{color:rgba(255,255,255,.3)}
.fm input:focus,.fm textarea:focus{outline:none;border-bottom-color:var(--texto)}
/* Chrome pinta el autocompletado de amarillo y el texto se pierde */
.fm input:-webkit-autofill{-webkit-text-fill-color:var(--texto);transition:background-color 9999s}

/* bloques de redes y categorias */
/* fieldset: sin borde y con min-width en 0, sino le rompe la grilla a los hijos */
.fm-bloque{border:0;padding:0;min-width:0;margin-top:clamp(30px,3.4vw,52px)}
.fm-bloque legend{display:block;width:100%;padding:0;margin-bottom:clamp(16px,1.8vw,24px);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.fm-bloque legend b{color:var(--naranja);font-weight:400}
.fm-bloque legend i{font-style:normal;text-transform:none;letter-spacing:.02em;
  font-size:13px;margin-left:9px}
.fm-chips{display:flex;flex-wrap:wrap;gap:9px}
.fm-chip{font-family:var(--body);font-size:13.5px;color:var(--texto-3);background:transparent;
  cursor:pointer;border:1px solid var(--borde-2);border-radius:999px;padding:8px 16px;
  transition:color .3s,border-color .3s,background-color .3s}
.fm-chip:hover{color:var(--texto);border-color:var(--borde)}
.fm-chip.on{background:var(--texto);border-color:var(--texto);color:var(--fondo)}

/* ── CONTACTO: la paleta acompaña el perfil elegido ─────────
   Azul suave y azul marca para marcas; naranja y crema para talento.
   El JS pone body[data-contacto] al cambiar de pestaña. */
body[data-pagina="contacto"]{--fm-acento:var(--lavanda);--fm-acento-texto:var(--azul);--fm-tab-text:var(--lavanda);--fm-tab-border:rgba(218,224,255,.48)}
body[data-contacto="talento"]{--fm-acento:var(--naranja);--fm-acento-texto:var(--durazno);--fm-tab-text:var(--durazno);--fm-tab-border:rgba(247,216,189,.48)}
.fm-sel-btn.on{background:var(--fm-acento);border-color:var(--fm-acento);color:var(--fm-acento-texto);
  transition:background-color .45s ease,border-color .45s ease,color .3s ease}
.fm{border:1.5px solid var(--fm-acento);border-radius:clamp(22px,2.4vw,34px);
  padding:clamp(24px,4vw,64px);
  background:color-mix(in srgb,var(--fm-acento) 5%,transparent);
  transition:border-color .5s ease,background-color .5s ease}
.fm input:focus,.fm textarea:focus{border-bottom-color:var(--fm-acento)}
.fm .fm-chip.on{background:var(--fm-acento);border-color:var(--fm-acento);color:var(--fm-acento-texto)}
/* el formulario que aparece entra suave, no de golpe */
.fm:not([hidden]){animation:fm-entra .6s cubic-bezier(.16,1,.3,1)}
@keyframes fm-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* la portada: la B a sangre, tono sobre tono con el tinta. SIN
   espejar: con scaleX(-1) la letra quedaba al reves (Nico lo noto) */
.ct-cabeza{position:relative;overflow:hidden}
.cabeza.ct-cabeza{padding-bottom:clamp(34px,4vw,70px)}
.ct-cabeza .wrap{position:relative;z-index:1}
.ct-cabeza .b-big{color:color-mix(in srgb,var(--texto) 8%,var(--fondo));
  inset:0;width:auto;aspect-ratio:auto;--b-tamano:cover;
  -webkit-mask-position:right top,center;mask-position:right top,center}
/* en celular los botones van a todo el ancho y su brillo (.luz)
   sobresale 18px: sin esto la pagina se corria de costado. clip y no
   hidden, para no cortar la onda de arriba de la seccion. */
.ct-form{overflow-x:clip}
@media(prefers-reduced-motion:reduce){.fm:not([hidden]){animation:none}}
/* lo que viene despues de un bloque necesita el mismo aire que el bloque */
.fm-bloque + .fm-grilla{margin-top:clamp(30px,3.4vw,52px)}

/* pie del formulario y el aviso de lo que falta */
.fm-error{margin-top:clamp(20px,2.2vw,30px);font-size:14px;color:var(--naranja)}
.fm-pie{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;
  margin-top:clamp(30px,3.4vw,50px);border-top:1px solid var(--borde-2);
  padding-top:clamp(22px,2.4vw,32px)}
.fm-obl{font-size:13px;color:var(--texto-3)}
.fm-obl b{color:var(--naranja);font-weight:400}

/* los datos de la agencia, abajo de todo */
/* Cuatro columnas a la medida de su contenido, no cuatro cuartos: en
   un cuarto de 900px el mail no entraba y se partia en
   "contacto@bigagency.c / om.ar". */
.datos{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;
  gap:0 clamp(24px,3vw,56px);max-width:900px;margin:0 auto}
.dato{border-top:1px solid var(--borde-2);padding:17px 0;display:flex;
  flex-direction:column;gap:7px;align-items:flex-start}
.dato i{font-style:normal;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.dato b{font-weight:400;font-size:15px;overflow-wrap:break-word}
.dato--mail b{white-space:nowrap}
.dato a:hover b{color:var(--naranja)}

@media(max-width:900px){
  .datos{grid-template-columns:repeat(2,1fr)}
  /* en dos columnas el mail va en su propio renglon, entero */
  .dato--mail{grid-column:1 / -1}
}
@media(max-width:640px){
  .fm-grilla,.fm-grilla--redes{grid-template-columns:1fr}
  .fm-sel{flex-direction:column}
  .fm-sel-btn{justify-content:center}
  .datos{grid-template-columns:1fr}
  .fm-pie{flex-direction:column;align-items:stretch}
  .fm-pie .btn{justify-content:center}
}

/* ── PIE ────────────────────────────────────────────────────────
   Marca+bajada+redes / navegacion / contacto, en tres columnas, con
   un hairline arriba del todo y otro antes del copyright — mismo
   patron de "corte con fundido nunca a filo" que el resto del sitio,
   pero un hairline solido alcanza porque no recorta contenido.     */
footer{border-top:1px solid var(--borde-2);padding:clamp(30px,3.4vw,54px) 0 clamp(18px,2vw,28px)}
.pie-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:clamp(24px,3vw,48px)}
.pie-marca{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pie-logo{color:var(--naranja);opacity:.9;transition:opacity .3s}
.pie-logo:hover{opacity:1}
.pie-logo svg{height:30px;width:auto;display:block}
.pie-bajada{color:var(--texto-3);font-size:13px;max-width:38ch;line-height:1.45}
.pie-redes.redes{position:static;transform:none;flex-direction:row;gap:8px}
@media(max-width:1100px){.pie-redes.redes{display:flex}}
.pie-redes .red{width:32px;height:32px}
.pie-col{display:flex;flex-direction:column;gap:10px;font-size:13px}
.pie-eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:4px}
.pie-col a,.pie-sede{color:var(--texto-2);text-decoration:none;transition:color .25s}
.pie-col a:hover{color:var(--naranja)}
.pie-sede{color:var(--texto-3);font-size:12.5px}
.pie-base{border-top:1px solid var(--borde-2);margin-top:clamp(24px,3vw,40px);
  padding-top:clamp(16px,2vw,24px);font-size:12px;color:var(--texto-3)}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr}}

/* ============================================================
   BORDER GLOW — port fiel del componente de reactbits.
   Tres capas: anillo de degrade, relleno interior y halo exterior.
   Todas recortadas por un cono que apunta al cursor.
   El color es el naranja de BIG en sus tres variantes.
   ============================================================ */
.bg{
  --prox:0;                  /* cercania al borde, 0 a 100 — la escribe el JS */
  --ang:45deg;               /* angulo del cursor — la escribe el JS */
  --sens:8;                  /* desde que cercania enciende el halo */
  --sens-color:14;           /* desde que cercania enciende el anillo */
  --cono:25;                 /* ancho del tramo encendido, en % */
  --halo:34px;               /* cuanto se extiende el halo hacia afuera */
  --radio:999px;
  --glow:23.5deg 100% 56%;   /* el naranja de marca #ff761e es 23.5 100% 56% */
  --relleno:.5;
  position:relative;display:inline-grid;border-radius:var(--radio);
  isolation:isolate;transform:translate3d(0,0,.01px)}

.bg::before,.bg::after,.bg>.luz{content:'';position:absolute;inset:0;
  border-radius:inherit;transition:opacity .25s ease-out;z-index:-1}
.bg:not(:hover)::before,.bg:not(:hover)::after,.bg:not(:hover)>.luz{
  opacity:0;transition:opacity .7s ease-in-out}

/* 1 — anillo de degrade en el borde */
.bg::before{
  border:1px solid transparent;
  background:
    linear-gradient(var(--fondo) 0 100%) padding-box,
    radial-gradient(at 80% 55%,#ff761e 0,transparent 50%) border-box,
    radial-gradient(at 69% 34%,#d8641a 0,transparent 50%) border-box,
    radial-gradient(at 8% 6%,#ff761e 0,transparent 50%) border-box,
    radial-gradient(at 41% 38%,#ff8b40 0,transparent 50%) border-box,
    radial-gradient(at 86% 85%,#d8641a 0,transparent 50%) border-box,
    radial-gradient(at 82% 18%,#ff761e 0,transparent 50%) border-box,
    radial-gradient(at 51% 4%,#ff8b40 0,transparent 50%) border-box,
    linear-gradient(#ff761e 0 100%) border-box;
  opacity:calc((var(--prox) - var(--sens-color)) / (100 - var(--sens-color)));
  -webkit-mask-image:conic-gradient(from var(--ang) at center,
    #000 calc(var(--cono)*1%),transparent calc((var(--cono) + 15)*1%),
    transparent calc((100 - var(--cono) - 15)*1%),#000 calc((100 - var(--cono))*1%));
  mask-image:conic-gradient(from var(--ang) at center,
    #000 calc(var(--cono)*1%),transparent calc((var(--cono) + 15)*1%),
    transparent calc((100 - var(--cono) - 15)*1%),#000 calc((100 - var(--cono))*1%))}

/* 2 — relleno tenue cerca del borde */
.bg::after{
  border:1px solid transparent;
  background:
    radial-gradient(at 80% 55%,#ff761e 0,transparent 50%) padding-box,
    radial-gradient(at 41% 38%,#ff8b40 0,transparent 50%) padding-box,
    radial-gradient(at 86% 85%,#d8641a 0,transparent 50%) padding-box,
    linear-gradient(#ff761e 0 100%) padding-box;
  -webkit-mask-image:
    linear-gradient(#000,#000),
    radial-gradient(ellipse at 50% 50%,#000 40%,transparent 65%),
    conic-gradient(from var(--ang) at center,transparent 5%,#000 15%,#000 85%,transparent 95%);
  -webkit-mask-composite:xor;
  mask-image:
    linear-gradient(#000,#000),
    radial-gradient(ellipse at 50% 50%,#000 40%,transparent 65%),
    conic-gradient(from var(--ang) at center,transparent 5%,#000 15%,#000 85%,transparent 95%);
  mask-composite:subtract,add;
  opacity:calc(var(--relleno) * (var(--prox) - var(--sens-color)) / (100 - var(--sens-color)));
  mix-blend-mode:soft-light}

/* 3 — halo hacia afuera */
.bg>.luz{
  inset:calc(var(--halo) * -1);pointer-events:none;z-index:0;
  -webkit-mask-image:conic-gradient(from var(--ang) at center,#000 2.5%,transparent 10%,transparent 90%,#000 97.5%);
  mask-image:conic-gradient(from var(--ang) at center,#000 2.5%,transparent 10%,transparent 90%,#000 97.5%);
  opacity:calc((var(--prox) - var(--sens)) / (100 - var(--sens)));
  mix-blend-mode:plus-lighter}
.bg>.luz::before{content:'';position:absolute;inset:var(--halo);border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px hsl(var(--glow)/1),
    inset 0 0 1px 0 hsl(var(--glow)/.6),
    inset 0 0 3px 0 hsl(var(--glow)/.5),
    inset 0 0 6px 0 hsl(var(--glow)/.4),
    inset 0 0 12px 0 hsl(var(--glow)/.26),
    0 0 1px 0 hsl(var(--glow)/.6),
    0 0 3px 0 hsl(var(--glow)/.5),
    0 0 6px 0 hsl(var(--glow)/.34),
    0 0 14px 0 hsl(var(--glow)/.2)}
.bg>.btn{position:relative;z-index:1}
@media(hover:none){.bg::before,.bg::after,.bg>.luz{display:none}}

/* ============================================================
   COMPONENTES
   ============================================================ */

/* aparicion por scroll */
/* La entrada de cada bloque: el contenido sube y se asienta mientras
   el bloque monta sobre el anterior. Mas recorrido y una pizca de
   escala que antes — la entrada se sentia plana. */
/* ── Aparicion por lineas ───────────────────────────────────
   Cada renglon sube desde atras de su propia mascara. El .ln recorta
   y el .ln-i es lo que se mueve.
   El padding-bottom con el margin-bottom en negativo esta para las
   colas de la g, la j y la y: sin eso overflow:hidden se las comia. */
.lineas{display:block}
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ln-i{display:block;transform:translateY(105%);
  transition:transform .95s cubic-bezier(.16,1,.3,1)}
.lineas.on .ln-i{transform:none}
@media(prefers-reduced-motion:reduce){.ln-i{transform:none;transition:none}}

/* ── NOSOTROS ───────────────────────────────────────────────
   La B del manual sangra por arriba y por la derecha. Va como
   mask-image y no como <img>, asi el color sale del bloque y la misma
   pieza sirve en cualquier seccion. */
.b-big{position:absolute;pointer-events:none;
  aspect-ratio:3509/2481;background:currentColor;
  /* La forma y el fundido van como variables para poder cambiar solo
     una de las dos por seccion: mask-image es una sola propiedad y si
     no, cada override tendria que repetir las dos capas. */
  --b-forma:url('../img/ui/b-big.svg');
  --b-fundido:linear-gradient(to bottom,#000 58%,transparent 97%);
  --b-tamano:contain;
  /* REGLA DEL SITIO: nada se corta a filo. La seccion tiene
     overflow:hidden, asi que sin este fundido la B terminaba en una
     linea recta contra el borde y se leia como una costura entre dos
     secciones del mismo color. */
  -webkit-mask-image:var(--b-forma),var(--b-fundido);
  mask-image:var(--b-forma),var(--b-fundido);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:var(--b-tamano),100% 100%;
  mask-size:var(--b-tamano),100% 100%;
  -webkit-mask-position:center,center;mask-position:center,center;
  -webkit-mask-composite:source-in;mask-composite:intersect}

.nos-cabeza{position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding-top:var(--alto-header);padding-bottom:clamp(26px,3vw,56px)}
/* A SANGRE, no flotando: la pieza del manual es un fondo de pagina
   entero (silueta con la B calada), asi que si se la achica y se la
   deja suelta se le ven los bordes rectos y parece un rectangulo.
   Puesta a sangre, lo unico que se lee es la esquina redondeada de
   arriba a la derecha y la curva cruzando.

   TONO SOBRE TONO, no lima bajada de opacidad: el lima del manual al
   14% sobre tinta da un lavanda que no existe en la paleta. Mezclando
   el texto del bloque con su propio fondo, la B levanta el mismo color
   que ya tiene la seccion y sirve igual en cualquier bloque. */
.nos-cabeza .b-big{color:color-mix(in srgb,var(--texto) 9%,var(--fondo));
  inset:0;width:auto;aspect-ratio:auto;--b-tamano:cover;
  -webkit-mask-position:right top,center;mask-position:right top,center}
.nos-cabeza .wrap{position:relative;z-index:1}
/* titulo a la izquierda, foto del equipo a la derecha */
.nos-grid{display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(30px,4vw,72px);align-items:center}
/* LA FOTO DEL EQUIPO, RECORTADA, CON FLECHAS (fotoEquipo)
   El PNG no tiene fondo, asi que el grupo queda parado sobre el tinta
   de la pagina. Detras lleva una luz muy suave: la ropa es negra y,
   sin ella, se perdia contra el fondo oscuro.
   El escenario es mas alto que la foto (lugar para los rotulos) y
   se limita por el alto de la pantalla, para que entre entero. */
.nos-foto-equipo{width:100%;justify-self:center}
/* .cabeza (mas abajo en este archivo) le suma ~120px arriba a todas
   las portadas y le ganaba a .nos-cabeza: con la foto alta, la
   portada pasaba el alto de la pantalla y los rotulos de abajo
   quedaban cortados. Con las dos clases gana esta. */
.cabeza.nos-cabeza{padding-top:var(--alto-header);
  padding-bottom:clamp(16px,2vw,32px)}
.eqf-escena{position:relative;container-type:inline-size;margin-inline:auto;
  aspect-ratio:var(--eqf-ratio);
  width:min(100%,calc((100svh - var(--alto-header) - 64px) * var(--eqf-k)))}
.eqf-imagen{position:absolute;left:0;width:100%;top:var(--eqf-top);height:var(--eqf-alto);overflow:visible;z-index:1}
.eqf-foto{position:absolute;left:0;top:0;width:100%;max-width:none;height:100%;object-fit:fill;display:block}
.eqf-luz{position:absolute;left:-8%;right:-8%;top:var(--eqf-top);height:var(--eqf-alto);
  pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 52% 50% at 50% 42%,
      color-mix(in srgb,var(--texto) 13%,transparent),transparent 72%),
    radial-gradient(ellipse 46% 6% at 50% 97%,rgba(0,0,0,.55),transparent 75%)}
.eqf-flechas{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  overflow:visible;pointer-events:none}
.eqf-linea,.eqf-punta{fill:none;stroke:var(--texto);stroke-width:3.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1)}
.eqf-linea{transition-delay:calc(.35s + var(--k) * .09s)}
.eqf-punta{transition-duration:.35s;transition-delay:calc(1.15s + var(--k) * .09s)}
.eqf.on .eqf-linea,.eqf.on .eqf-punta{stroke-dashoffset:0}
/* el puntito donde nace la flecha, sobre la persona */
.eqf-origen{fill:var(--texto);opacity:0;transition:opacity .3s ease;
  transition-delay:calc(.35s + var(--k) * .09s)}
.eqf.on .eqf-origen{opacity:1}

/* nombre en negrita y el rol abajo. El tamaño sigue al escenario
   (cqw), asi los rotulos no se pisan cuando la foto se achica */
.eqf-rotulo{position:absolute;z-index:3;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  white-space:nowrap;line-height:1.2;text-decoration:none;cursor:pointer;
  padding:.3em .55em;border-radius:10px;
  opacity:0;translate:0 8px;
  transition:opacity .6s ease,translate .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.2s + var(--k) * .09s)}
.eqf.on .eqf-rotulo{opacity:1;translate:none}
.eqf-rotulo b{font-weight:700;color:var(--texto);font-size:max(11px,1.75cqw)}
.eqf-rotulo span{color:var(--texto-2);font-size:max(10px,1.45cqw);margin-top:.2em}
/* se puede tocar: el nombre se pone naranja y aparece un subrayado */
.eqf-rotulo b{background:linear-gradient(var(--naranja),var(--naranja)) 50% 100%/0 1.5px no-repeat;
  padding-bottom:1px;transition:color .25s ease,background-size .35s cubic-bezier(.16,1,.3,1)}
.eqf-rotulo:hover b,.eqf-rotulo:focus-visible b{color:var(--naranja);background-size:100% 1.5px}
.eqf-rotulo:focus-visible{outline:1px solid var(--naranja);outline-offset:2px}
.eqf-lista a{display:flex;flex-direction:column;text-decoration:none;color:inherit}

/* la ficha a la que se llega desde la foto se ilumina un momento */
.eq-ficha{scroll-margin-top:calc(var(--alto-header) + 20px)}
.eq-ficha.resaltada .eq-foto{animation:eq-resalta 2.4s ease-out}
@keyframes eq-resalta{
  0%,45%{outline:3px solid var(--naranja);outline-offset:5px}
  100%  {outline:3px solid transparent;outline-offset:5px}
}

/* la lista es para celular; en compu la reemplazan las flechas */
.eqf-lista{display:none;list-style:none;margin:clamp(18px,4vw,28px) 0 0;padding:0;
  grid-template-columns:1fr 1fr;gap:12px 18px}
.eqf-lista li{line-height:1.25}
.eqf-lista b{font-weight:700;font-size:14px;color:var(--texto)}
.eqf-lista span{font-size:12.5px;color:var(--texto-2)}

/* EL FONDO DE PUNTOS (redDePuntos): solo en esta portada. Se apaga
   hacia abajo para que no se corte a filo contra la seccion
   siguiente. */
.nos-red{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
/* Tablets y pantallas chicas: al costado del titulo la foto quedaba
   de ~390px y los once rotulos se pisaban. Va debajo y mas grande. */
@media(min-width:901px) and (max-width:1200px){
  .nos-grid{grid-template-columns:1fr}
  .eqf-escena{width:min(100%,760px)}
  .cabeza.nos-cabeza{padding-top:calc(var(--alto-header) + 40px)}
}
@media(prefers-reduced-motion:reduce){
  .eqf-linea,.eqf-punta,.eqf-rotulo{transition:none}
}
.nos-hero .lead{max-width:26ch;margin-top:clamp(22px,2.6vw,40px);
  font-size:clamp(19px,1.75vw,31px);line-height:1.32}
.nos-hero .baja{margin-top:clamp(34px,5vh,72px)}

/* la B vuelve a asomar mas abajo, del otro lado y mas chica: la idea
   es que acompañe la bajada, no que se repita igual */
.nos-texto,.nos-equipo,.nos-sedes{position:relative;overflow:hidden}
/* La primera columna manda: es quienes somos. La segunda acompaña.
   Sin esta diferencia de tamaño las dos columnas se leian como un
   muro parejo de texto en una seccion enorme y medio vacia. */
.p--grande{font-size:clamp(17px,1.45vw,25px);line-height:1.45;color:var(--texto)}
.nos-texto .dos{align-items:start}
/* Arriba casi sin relleno: la portada de Nosotros ocupa toda la
   pantalla con el contenido centrado, asi que ya deja ~150px de aire
   abajo. Esta seccion tenia padding-top:0 en el HTML y se perdio al
   rearmar la portada; sin el, entre "Scroll para ver mas" y el primer
   parrafo quedaban ~320px vacios. */
.nos-texto{padding-top:clamp(12px,1.6vw,28px)}
.nos-texto .p:not(.p--grande){padding-top:.35em}

/* mas abajo la B vuelve, girada y del otro lado, para que acompañe la
   bajada sin repetirse igual. Solo el trazo: la silueta entera a
   sangre dos veces seguidas cansa. */
.nos-texto .b-big,.nos-equipo .b-big,.nos-sedes .b-big{
  /* 11%, no 7%: sobre un bloque claro la misma diferencia se nota
     mucho menos que sobre uno oscuro y la curva desaparecia. */
  color:color-mix(in srgb,var(--texto) 11%,var(--fondo));
  --b-forma:url('../img/ui/b-trazo.svg');
  aspect-ratio:2002/2252}
/* las que salen por abajo se funden hacia abajo; la de Sedes entra
   desde arriba, asi que se funde al reves */
.nos-sedes .b-big{--b-fundido:linear-gradient(to top,#000 58%,transparent 97%)}
.nos-equipo .b-big{width:min(38vw,460px);left:-9%;bottom:-22%;transform:rotate(168deg)}
.nos-sedes .b-big{width:min(32vw,400px);right:-7%;top:-18%;transform:rotate(-12deg)}
.nos-texto .b-big{width:min(30vw,380px);right:4%;bottom:-30%;transform:rotate(196deg)}
.nos-texto .wrap,.nos-equipo .wrap,.nos-sedes .wrap{position:relative;z-index:1}

@media(max-width:900px){
  .nos-cabeza{min-height:0;display:block;
    padding-top:calc(var(--alto-header) + clamp(40px,7vw,90px))}
  .nos-cabeza .b-big{width:120vw;right:-34%;top:-16%;opacity:.13}
  /* en celular la foto va debajo del texto */
  .nos-grid{grid-template-columns:1fr}
  .cabeza.nos-cabeza{padding-top:calc(var(--alto-header) + clamp(40px,7vw,90px))}
  /* las flechas no entran: queda la foto sola y la lista debajo */
  .eqf-escena{aspect-ratio:var(--eqf-ratio-foto);width:100%}
  .eqf-imagen{top:0;height:100%}
  .eqf-flechas,.eqf-rotulo{display:none}
  .eqf-lista{display:grid}
}

.rv{opacity:0;transform:translateY(42px);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rv-hijos>*{opacity:0;transform:translateY(34px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
.rv-hijos.on>*{opacity:1;transform:none}
.rv-hijos.on>*:nth-child(2){transition-delay:.06s}
.rv-hijos.on>*:nth-child(3){transition-delay:.12s}
.rv-hijos.on>*:nth-child(4){transition-delay:.18s}
.rv-hijos.on>*:nth-child(5){transition-delay:.24s}
.rv-hijos.on>*:nth-child(6){transition-delay:.3s}

/* cinta de marcas */
/* padding vertical: sin esto, el logo al escalar se cortaba contra el
   borde de la cinta, que mide exactamente el alto del logo */
.loop{position:relative;--loop-gap:80px;--loop-h:30px;--loop-fade:var(--fondo);
  overflow:hidden;padding:10px 0}
.loop-track{display:flex;width:max-content;will-change:transform;user-select:none}
.loop-list{display:flex;align-items:center;list-style:none}
.loop-item{flex:0 0 auto;margin-right:var(--loop-gap)}
.loop-item img{height:var(--loop-h);width:auto;object-fit:contain;
  filter:var(--logo-filtro,brightness(0) invert(1));
  opacity:var(--logo-opacidad,.32);-webkit-user-drag:none;
  transition:opacity .4s,transform .4s cubic-bezier(.4,0,.2,1)}
/* Al apuntarlo se le saca el filtro y vuelve a su color original.
   16 de los 22 archivos tienen color; los otros 6 son negro puro
   (universal-music, axe, capcut, uber, disney, kfc) y se quedan en
   negro, que sobre el bloque lima igual se lee. */
.loop-item:hover img{opacity:1;filter:none;transform:scale(1.12)}

.loop--fade::before,.loop--fade::after{content:'';position:absolute;top:0;bottom:0;
  width:clamp(50px,12%,200px);pointer-events:none;z-index:2}
.loop--fade::before{left:0;background:linear-gradient(to right,var(--loop-fade),transparent)}
.loop--fade::after{right:0;background:linear-gradient(to left,var(--loop-fade),transparent)}
@media(prefers-reduced-motion:reduce){.loop-track{transform:none!important}}

/* Loop vertical (direction 'up' / 'down'). El JS ya lo sabia mover;
   faltaba el CSS: la pista y las listas van en columna y el espacio
   entre logos pasa a ser vertical. Cada logo ocupa una caja del mismo
   alto y el ancho de la columna, asi los apaisados y los cuadrados
   quedan alineados. */
.loop--v{padding:0}
.loop--v .loop-track{flex-direction:column;width:auto;height:max-content}
.loop--v .loop-list{flex-direction:column;align-items:stretch}
.loop--v .loop-item{margin:0 0 var(--loop-gap)}
.loop--v .loop-item a,.loop--v .loop-item > img{display:flex;justify-content:center}
.loop--v .loop-item img{max-width:78%;height:var(--loop-h)}
.loop--v .loop-item a:focus-visible{outline:1px solid var(--texto);outline-offset:6px;border-radius:6px}

/* muro de creadores */
/* SIN height: la altura la define el punto de montaje (.muro), que se
   declara antes en este archivo. Si .dw trajera height:100% lo pisaria
   —misma especificidad y va despues— y el muro colapsaria al
   min-height de 360px. */
.dw{position:relative;width:100%;overflow:hidden;isolation:isolate;contain:paint;
  perspective:var(--dw-persp,1400px);perspective-origin:50% 50%;
  --dw-w:190px;--dw-h:238px;--dw-gap:1px;--dw-radius:0px;
  --dw-lift:1.04;--dw-dim:.42;
  --dw-fl:10%;--dw-fr:10%;--dw-ft:14%;--dw-fb:14%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--dw-fl),#000 calc(100% - var(--dw-fr)),transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 var(--dw-ft),#000 calc(100% - var(--dw-fb)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 var(--dw-fl),#000 calc(100% - var(--dw-fr)),transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 var(--dw-ft),#000 calc(100% - var(--dw-fb)),transparent 100%);
  mask-composite:intersect}
.dw-plane{position:absolute;top:50%;left:50%;display:flex;transform-origin:50% 50%;
  will-change:transform;cursor:pointer}
.dw-col{position:relative;width:calc(var(--dw-w) + var(--dw-gap))}
.dw-track{display:flex;flex-direction:column;will-change:transform}
.dw-tile{position:relative;display:block;width:100%;height:calc(var(--dw-h) + var(--dw-gap));
  flex:0 0 auto;outline:none}
.dw-inner{position:absolute;inset:calc(var(--dw-gap)/2);border-radius:var(--dw-radius);
  overflow:hidden;background:var(--fondo);opacity:var(--dw-dim);
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s cubic-bezier(.22,1,.36,1)}
.dw-inner img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  transition:filter .45s cubic-bezier(.22,1,.36,1)}
.dw-veil{position:absolute;inset:0;background:#000;opacity:.3;pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,1,.36,1)}
/* El titulo de la campaña va CENTRADO en la ficha, no al pie: es el
   dato principal, no un epigrafe. El velo propio hace falta porque
   .dw-veil se apaga justo cuando aparece el texto, y sin el el titulo
   quedaria sobre la foto en crudo. */
.dw-name{position:absolute;inset:0;z-index:2;padding:14px;
  display:grid;place-items:center;text-align:center;
  background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.62));
  opacity:0;pointer-events:none;transition:opacity .35s}
.dw-name b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,1.45vw,27px);line-height:1.04;
  color:var(--texto);text-wrap:balance;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
/* 11px, no 9.5: por debajo de 11 el texto funcional se cae en
   pantallas de alta densidad. Con la ficha cuadrada y mas grande
   entra sin apretar. */
/* El reel se monta encima de la foto, que queda de poster abajo.
   Entra con un fundido para que no salte del gris al color. */
.dw-inner video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:1;opacity:0;
  transition:opacity .32s cubic-bezier(.22,1,.36,1)}
.dw-inner video.listo{opacity:1}

/* la ficha que lleva a la campaña se comporta como un boton */
.dw-tile--link{cursor:pointer}
.dw-tile--link:focus-visible .dw-inner{outline:1px solid var(--naranja);
  outline-offset:2px}

.dw-tile.on .dw-inner{opacity:1;transform:scale(var(--dw-lift))}
.dw-tile.on img{filter:grayscale(0)}
.dw-tile.on .dw-veil{opacity:0}
.dw-tile.on .dw-name{opacity:1}
.dw-tile:focus-visible .dw-inner{opacity:1;box-shadow:0 0 0 1px var(--naranja)}
.dw-tile:focus-visible .dw-name{opacity:1}

/* ============================================================
   PAGINAS INTERNAS
   ============================================================ */
.cabeza{padding-top:calc(var(--alto-header) + clamp(50px,7vw,120px));
  padding-bottom:clamp(40px,5vw,90px)}
.cabeza .lead{margin-top:clamp(20px,2.2vw,34px)}
.cabeza-fila{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,3.4vw,56px)}
.dos{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,90px);align-items:start}
@media(max-width:900px){.dos{grid-template-columns:1fr}}

/* areas de trabajo */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.area{border:1px solid var(--borde);border-radius:999px;padding:9px 18px;
  font-size:13.5px;color:var(--texto-2)}

/* sedes */

.sede{border-top:1px solid var(--borde-2);padding:clamp(20px,2.4vw,34px) 0;
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2vw,34px);align-items:baseline}
.sede b{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(24px,2.6vw,46px)}
.sede i{font-style:normal;color:var(--texto-2);font-size:14.5px}
.sede .cod{font-size:12px;letter-spacing:.18em;color:var(--texto-3)}

/* ════════════════════════════════════════════════════════════
   SERVICIOS
   Antes era la unica pagina sin bloques de color: todo en noche
   plano, sin fotos y sin un solo boton. Ahora va tinta (portada con
   ondas y carrusel) → crema (los dos negocios) → marino (el resto)
   → noche (proceso) → lima (cierre con los dos contactos).
   ════════════════════════════════════════════════════════════ */

/* ── portada ── */
.cabeza.sv-cabeza{position:relative;overflow:hidden;min-height:100svh;
  display:flex;align-items:center;
  padding-top:calc(var(--alto-header) + clamp(10px,2vh,30px));
  padding-bottom:clamp(40px,6vh,90px)}
.sv-ondas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sv-cabeza .wrap{position:relative;z-index:1}
.sv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,4vw,80px);align-items:center}
.sv-txt .lead{max-width:30ch}
.sv-txt .acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(26px,3vw,44px)}

/* ── carrusel (carruselServicios) ── */
.csv{--csv-lado:clamp(230px,24vw,420px);min-width:0}
/* los costados se desvanecen: nada se corta a filo */
.csv-pista{position:relative;height:calc(var(--csv-lado) * 1.06);outline:none;
  touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%)}
.csv-tarjeta{position:absolute;left:50%;top:50%;width:var(--csv-lado);aspect-ratio:1;
  padding:0;border:0;cursor:pointer;overflow:hidden;background:var(--fondo-2);
  border-radius:clamp(26px,2.6vw,44px);
  transform:translate(-50%,-50%) translateX(calc(var(--d) * 58%)) scale(calc(1 - var(--a) * .25));
  filter:brightness(calc(1 - var(--a) * .28)) saturate(calc(1 - var(--a) * .2));
  opacity:calc(1 - var(--a) * .18);
  box-shadow:0 36px 70px -36px rgba(0,0,0,.9);
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .9s ease,
             opacity .6s ease,visibility 0s;
  will-change:transform}
.csv-tarjeta.on{cursor:default}
.csv-tarjeta.lejos{opacity:0;visibility:hidden}
.csv-tarjeta img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.csv-tarjeta.on img{transform:scale(1)}
.csv-tarjeta:not(.on):hover{filter:brightness(calc(1.12 - var(--a) * .28))}
.csv-tarjeta:focus-visible,.csv-pista:focus-visible .csv-tarjeta.on{
  outline:2px solid var(--texto);outline-offset:5px}

.csv-pie{display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.6vw,24px);margin-top:clamp(14px,2vh,26px)}
.csv-flecha{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:transparent;color:var(--texto);border:1px solid var(--borde);cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.csv-flecha:hover{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.csv-flecha:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
.csv-rotulo{min-width:min(100%,15em);display:flex;justify-content:center}
/* la pastilla: tinte naranja con texto negro (15.1:1) */
.csv-pastilla{display:inline-block;background:#ffddc7;color:#0d0d14;
  font-weight:500;font-size:clamp(15px,1.15vw,19px);line-height:1.2;
  padding:.62em 1.3em;border-radius:14px;text-align:center}
.csv-desc{text-align:center;color:var(--texto-2);font-size:clamp(14px,.95vw,16px);
  line-height:1.6;max-width:46ch;margin:clamp(12px,1.6vh,20px) auto 0;
  min-height:calc(1.6em * 3)}
/* al cambiar, la pastilla y el texto entran de abajo */
.csv.cambia .csv-pastilla{animation:csv-entra .55s cubic-bezier(.16,1,.3,1)}
.csv.cambia .csv-desc{animation:csv-entra .7s .06s cubic-bezier(.16,1,.3,1) both}
@keyframes csv-entra{
  from{opacity:0;transform:translateY(8px);filter:blur(4px)}
  to  {opacity:1;transform:none;filter:none}
}

/* ── los dos negocios (crema) ── */
.sv-destacados{display:grid;gap:clamp(56px,7vw,120px)}
.sv-dest{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,90px);align-items:center}
.sv-dest:nth-child(even) .sv-dest-foto{order:2}
.sv-dest-foto{border-radius:clamp(20px,2vw,32px);overflow:hidden;aspect-ratio:16/11;
  box-shadow:0 40px 80px -48px rgba(13,13,20,.55)}
.sv-dest-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* a quien le habla: una pastilla tinta, el texto del bloque invertido */
.sv-para{display:inline-block;background:var(--texto);color:var(--fondo);
  font-size:13.5px;font-weight:500;padding:.45em 1em;border-radius:999px}
.sv-dest h3{font-size:clamp(34px,3.6vw,68px);line-height:.95;text-transform:uppercase;
  margin:clamp(14px,1.4vw,22px) 0 clamp(14px,1.4vw,20px);text-wrap:balance}
.sv-dest p{color:var(--texto-2);font-size:clamp(15px,1.05vw,18px);line-height:1.62;max-width:48ch}
.sv-prueba{margin-top:clamp(22px,2.4vw,36px)}
.sv-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px) clamp(16px,2vw,34px);align-items:center;max-width:520px}
.sv-logos img{width:100%;height:clamp(22px,2vw,32px);object-fit:contain;object-position:left center;
  filter:var(--logo-filtro);opacity:var(--logo-opacidad)}
.sv-caras{display:flex;padding-left:12px}
.sv-caras img{width:clamp(48px,4vw,64px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  margin-left:-12px;border:3px solid var(--fondo);background:var(--fondo-2)}
.sv-dest .btn{margin-top:clamp(26px,2.8vw,40px)}

/* chips de lo que incluye cada servicio */
.items{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:clamp(14px,1.4vw,20px) 0 0;padding:0}
.items li{font-size:12.5px;letter-spacing:.02em;color:var(--texto-2);
  border:1px solid var(--borde);border-radius:999px;padding:5px 12px}

/* ── el resto (marino): filas con foto ── */
.servicios{border-top:1px solid var(--borde-2)}
.servicio{border-bottom:1px solid var(--borde-2);display:grid;
  grid-template-columns:clamp(150px,13vw,230px) minmax(0,1fr) minmax(0,44ch);
  gap:clamp(18px,3vw,56px);align-items:center;padding:clamp(22px,2.4vw,38px) 0}
.servicio-foto{border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:var(--fondo-2)}
.servicio-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.servicio:hover .servicio-foto img{transform:scale(1.05)}
.servicio h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(26px,2.5vw,48px);line-height:1}
.servicio p{color:var(--texto-2);font-size:15px;line-height:1.62}

/* ── proceso (noche): el numero va porque es un orden ── */
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--borde-2);border:1px solid var(--borde-2);border-radius:20px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(clamp(200px,15vw,290px),1fr))}
.paso{background:var(--fondo);padding:clamp(24px,2.6vw,42px)}
.paso .n{font-size:13px;color:var(--texto-3);font-variant-numeric:tabular-nums;
  display:block;margin-bottom:clamp(18px,2vw,30px)}
.paso h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(24px,2vw,34px);line-height:1;margin-bottom:10px}
.paso p{font-size:14.5px;color:var(--texto-2);line-height:1.58}

/* ── cierre (lima) ── */
.sv-cierre-lead{margin:0 auto clamp(28px,3vw,48px);max-width:44ch}
.centro.acciones{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

@media(max-width:1000px){
  .sv-grid{grid-template-columns:1fr}
  .csv{--csv-lado:clamp(220px,58vw,380px)}
  .sv-dest,.sv-dest:nth-child(even){grid-template-columns:1fr}
  .sv-dest:nth-child(even) .sv-dest-foto{order:0}
}
@media(max-width:700px){
  .servicio{grid-template-columns:1fr;gap:14px}
  .servicio-foto{aspect-ratio:16/9}
  .sv-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .csv-flecha{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .csv-tarjeta,.csv-tarjeta img,.servicio-foto img{transition:none}
  .csv.cambia .csv-pastilla,.csv.cambia .csv-desc{animation:none}
}

/* pie con tres partes */
.pie a:hover{color:var(--texto)}

/* video dentro de un caso */
.caso .foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.7);transition:filter .7s,transform .9s cubic-bezier(.16,1,.3,1)}
.caso:hover .foto video{filter:grayscale(0) brightness(.95);transform:scale(1.04)}

/* ============================================================
   DEPTH CAROUSEL — pila de tarjetas en profundidad
   ============================================================ */
/* ============================================================
   PRODUCCIONES — dos filas centradas que avanzan juntas.
   En las dos se asoma un pedazo de la anterior y la siguiente.
   Van EN COLOR: es trabajo terminado, no retrato.
   ============================================================ */
/* Sin seleccion de texto: al arrastrar, el navegador seleccionaba el
   titulo y la bajada de la ficha y los pintaba con el naranja de
   ::selection. Se veia como una mancha encima de la foto. */
.cp{position:relative;outline:none;--cp-gap:clamp(10px,1vw,18px);
  user-select:none;-webkit-user-select:none}
.cp:focus-visible{outline:1px solid var(--naranja);outline-offset:8px;border-radius:12px}
/* el visor se estira a los costados para que el asomo llegue al borde */
.cp-visor{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y}
.cp.arrastrando .cp-visor{cursor:grabbing}
.cp-track{display:flex;will-change:transform}
.cp-pieza{flex:0 0 auto;position:relative}

/* fila de arriba */
.cp-grande{width:var(--cp-ancho-g);padding:0 calc(var(--cp-gap) / 2);
  aspect-ratio:21/9;min-height:280px}
.cp-grande img,.cp-grande video{position:absolute;inset:0 calc(var(--cp-gap) / 2);
  width:calc(100% - var(--cp-gap));height:100%;object-fit:cover;border-radius:14px;
  -webkit-user-drag:none;pointer-events:none;background:var(--fondo-2)}
.cp-velo{position:absolute;inset:0 calc(var(--cp-gap) / 2);border-radius:14px;
  pointer-events:none;background:
  linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.46) 46%,rgba(0,0,0,.08) 100%),
  linear-gradient(to top,rgba(0,0,0,.6),transparent 52%)}
.cp-txt{position:absolute;inset:auto auto clamp(22px,3vw,54px) clamp(30px,3.6vw,64px);
  max-width:min(44ch,58%);z-index:2;pointer-events:none}
/* El texto va ENCIMA de la foto, que siempre es oscura: se queda en
   crema aunque el ambiente sea claro. Con var(--texto) se volvia
   tinta sobre tinta y desaparecia. */
.cp-txt,.cp-txt h3{color:#ffffff}
.cp-chip{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:12px}
.cp-txt h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(24px,3.2vw,60px);line-height:.95;margin-bottom:12px}
.cp-txt p{color:rgba(255,255,255,.72);font-size:clamp(14px,1vw,17px);line-height:1.55;max-width:44ch}
/* las de los costados se apagan un poco: la del medio manda */
.cp-grande{opacity:.42;transition:opacity .85s cubic-bezier(.22,1,.36,1)}
.cp-track > .cp-grande.activa{opacity:1}

/* fila de abajo */
.cp-visor--c{margin-top:var(--cp-gap)}
.cp-chica{width:var(--cp-ancho-c);padding:0 calc(var(--cp-gap) / 2)}
.cp-foto{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:10px;
  background:var(--fondo-2);border:1px solid var(--borde-2)}
.cp-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cp-chica:hover .cp-foto img{transform:scale(1.05)}
.cp-pie2{padding:12px 2px 0}
.cp-pie2 b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(13px,1vw,18px);line-height:1;transition:color .3s}
.cp-chica:hover .cp-pie2 b{color:var(--naranja)}
.cp-pie2 i{font-style:normal;display:block;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-3);margin-top:6px}

/* puntitos */
.cp-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(22px,2.4vw,36px)}
/* currentColor sigue al bloque: en crema eran crema sobre crema y no
   se veian. */
/* Mismo caso que .vt-punto: el ancho ES el layout de la pastilla
   activa. Se deja el transition de width a proposito. */
.cp-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;cursor:pointer;
  color:var(--texto);background:currentColor;opacity:.28;
  transition:width .35s cubic-bezier(.16,1,.3,1),opacity .35s}
.cp-dot:hover{opacity:.55}
.cp-dot.on{width:26px;background:var(--naranja);opacity:1}

@media(max-width:600px){
  .cp-grande{aspect-ratio:4/5}
  .cp-txt{max-width:none;inset:auto 26px 22px 26px}
  .cp-velo{background:linear-gradient(to top,rgba(0,0,0,.9) 12%,rgba(0,0,0,.25) 62%,transparent)}
}

/* ============================================================
   TIRA CON AUTO-SCROLL (Producciones del inicio)
   Reusa filaVelocidad (el mismo motor de velocidad suavizada que ya
   tenia el sitio): scroll continuo, se frena del todo al pasar el
   mouse (hoverVelocidad:0) y cada foto revela su titulo encima.
   ============================================================ */
.fv{overflow:hidden;width:100%}
.fv-pista{display:flex;will-change:transform}
.fv-fila{display:flex;gap:var(--fv-gap,20px);padding-right:var(--fv-gap,20px);flex:0 0 auto}
.pg-item{position:relative;flex:0 0 auto;width:clamp(240px,22vw,360px);
  aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--fondo-2);
  display:block;cursor:pointer}
.pg-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.pg-item:hover .pg-foto{transform:scale(1.05)}
.pg-velo{position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:18px;
  background:linear-gradient(to top,rgba(3,4,10,.88) 0%,rgba(3,4,10,0) 58%);
  opacity:0;transition:opacity .4s ease}
.pg-item:hover .pg-velo{opacity:1}
.pg-titulo{color:#fffffb;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(15px,1.2vw,19px)}
.pg-chip{color:rgba(255,255,255,.75);font-size:12px;font-style:normal}
@media(max-width:640px){.pg-item{width:clamp(200px,66vw,280px)}.pg-velo{opacity:1}}

/* ============================================================
   CARRUSEL "SQUEEZE" — armado y sin usar hoy (ver Producciones
   arriba, que uso la tira con auto-scroll en su lugar). Un panel
   ancho (16:9) + el resto como tiritas. Ver
   carruselSqueeze en componentes.js — el ancho de cada panel lo
   escribe el JS, aca solo transiciona.
   ============================================================ */
.sq-fila{display:flex;gap:16px;width:100%;height:clamp(200px,26vw,340px)}
.sq-panel{position:relative;flex:0 0 auto;height:100%;border-radius:14px;
  overflow:hidden;cursor:pointer;border:0;padding:0;background:var(--fondo-2);
  transition:width .8s cubic-bezier(.16,1,.3,1)}
.sq-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none}
.sq-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(13,13,20,.75) 0%,transparent 40%)}
.sq-chip{position:absolute;left:16px;bottom:14px;color:#fff;font-size:12.5px;
  font-weight:600;letter-spacing:.02em;white-space:nowrap;
  opacity:0;transition:opacity .3s}
.sq-panel[aria-selected="true"] .sq-chip{opacity:1}
.sq-texto{position:relative;margin-top:clamp(18px,2vw,30px);min-height:3.4em}
.sq-panel-texto{position:absolute;inset:0;max-width:70ch;opacity:0;
  visibility:hidden;transition:opacity .4s}
.sq-panel-texto.on{opacity:1;visibility:visible}
.sq-panel-texto b{font-weight:700}
@media(max-width:640px){.sq-fila{height:clamp(160px,52vw,240px)}}

/* ============================================================
   PERFIL DE TALENTO A PANTALLA COMPLETA
   Misma estetica: fondo casi negro, Coolvetica, un solo naranja.
   ============================================================ */
body.sin-scroll{overflow:hidden}
/* ── PERFIL DE TALENTO (perfilTalento) ──────────────────────
   Tres columnas: quien es (nombre y numeros) · su escenario (reels y
   fotos) · que hace (descripcion, marcas, botones). Abajo, la tira.

   Antes era una foto a pantalla completa con la descripcion encima:
   el texto quedaba a 2:1 de contraste sobre la cara, las fotos de
   1200px se estiraban a 1862 y cada una necesitaba su encuadre a mano.
   El fondo ahora es la misma foto desenfocada y oscura: da el color
   del creador y ya no importa la resolucion.                        */
.pf{position:fixed;inset:0;z-index:1200;background:#0d0d14;color:#ffffff;
  opacity:0;pointer-events:none;transition:opacity .45s ease-out}
.pf.abierto{opacity:1;pointer-events:auto}
.pf:focus{outline:none}

.pf-fondo{position:absolute;inset:0;overflow:hidden}
.pf-fondo i{position:absolute;inset:-6%;background-size:cover;background-position:center;
  filter:blur(46px) saturate(1.25) brightness(.36);transform:scale(1.08);
  opacity:0;transition:opacity .9s ease-out}
.pf-fondo i.on{opacity:1}
/* un velo de abajo para que la tira y los textos siempre se lean */
.pf-fondo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(13,13,20,.35),rgba(13,13,20,.15) 40%,rgba(13,13,20,.7))}

.pf-cerrar{position:absolute;top:clamp(16px,2vw,30px);right:clamp(16px,2vw,30px);z-index:3;
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(13,13,20,.45);
  backdrop-filter:blur(8px);color:#ffffff;transition:border-color .3s,background .3s}
.pf-cerrar:hover{border-color:#ffffff;background:rgba(13,13,20,.8)}
.pf-cerrar:focus-visible{outline:2px solid #ffffff;outline-offset:3px}

.pf-cuerpo{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:1fr auto;
  gap:clamp(14px,2vh,26px);padding:clamp(64px,8vh,100px) var(--pad) clamp(16px,2.4vh,30px)}
.pf-main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(24px,3.4vw,72px);align-items:center;min-height:0}

/* izquierda: quien es */
.pf-datos{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pf-nicho{font-size:13.5px;color:rgba(255,255,255,.78);letter-spacing:.02em}
.pf-nombre{font-weight:400;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(46px,5.2vw,108px);line-height:.88;margin:clamp(10px,1.2vw,18px) 0 0;
  text-wrap:balance;overflow-wrap:anywhere}
.pf-cifras{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,40px);margin-top:clamp(20px,2.6vw,40px)}
.pf-cifras div{display:flex;flex-direction:column;gap:6px}
.pf-cifras b{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(32px,2.9vw,56px);
  line-height:.9;font-variant-numeric:tabular-nums}
.pf-cifras i{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.pf-redes{list-style:none;margin:clamp(18px,2vw,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pf-redes li{display:flex;gap:8px;align-items:baseline;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:6px 13px;font-size:13px}
.pf-redes span{color:rgba(255,255,255,.72)}
.pf-redes b{font-weight:500}

/* centro: el escenario. La tarjeta es 9:16, como los reels */
.pf-escenario{--pf-alto:min(58vh,620px);--pf-ancho:calc(var(--pf-alto) * 9 / 16);
  width:calc(var(--pf-ancho) * 1.9);display:flex;flex-direction:column;align-items:center}
.pf-escenario[data-cuantas="una"]{width:var(--pf-ancho)}
.pf-pista{position:relative;width:100%;height:var(--pf-alto);touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%)}
.pf-escenario[data-cuantas="una"] .pf-pista{-webkit-mask-image:none;mask-image:none}
.pf-pieza{position:absolute;left:50%;top:50%;width:var(--pf-ancho);height:var(--pf-alto);
  padding:0;border:0;cursor:pointer;overflow:hidden;background:#000;
  border-radius:clamp(18px,1.6vw,26px);
  transform:translate(-50%,-50%) translateX(calc(var(--d) * 56%)) scale(calc(1 - var(--a) * .2));
  filter:brightness(calc(1 - var(--a) * .38));
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease,opacity .5s ease,visibility 0s;
  will-change:transform}
.pf-pieza.on{cursor:default}
.pf-pieza.lejos{opacity:0;visibility:hidden}
.pf-pieza img,.pf-pieza video{width:100%;height:100%;object-fit:cover;display:block}
.pf-pieza:focus-visible{outline:2px solid #ffffff;outline-offset:4px}
.pf-escena-pie{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(12px,1.6vh,20px);min-height:44px}
.pf-escenario[data-cuantas="una"] .pf-escena-pie{display:none}
.pf-mover{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:transparent;color:#ffffff;border:1px solid rgba(255,255,255,.24);
  transition:background .3s,color .3s,border-color .3s}
.pf-mover:hover{background:#ffffff;color:#0d0d14;border-color:#ffffff}
.pf-mover:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
.pf-rotulo{font-size:13px;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;
  min-width:6em;text-align:center}
/* si el video tiene nombre de campaña, va en la pastilla durazno */
.pf-rotulo.pastilla{background:#ffddc7;color:#0d0d14;font-weight:500;font-size:14px;
  padding:.55em 1.1em;border-radius:12px}

/* derecha: que hace */
.pf-texto{display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  justify-self:end;max-width:42ch}
.pf-bio-caja{position:relative}
/* crema FIJO y sobre el fondo oscuro, no encima de una cara */
.pf-bio{color:rgba(255,255,255,.88);font-size:clamp(14.5px,1vw,17px);line-height:1.62;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.pf-bio-caja.abierta .pf-bio{-webkit-line-clamp:unset;display:block;max-height:34vh;overflow:auto}
.pf-mas{margin-top:8px;background:none;border:0;padding:4px 0;cursor:pointer;color:#ffffff;
  font:inherit;font-size:13.5px;text-decoration:underline;text-underline-offset:4px}
.pf-marcas{margin-top:clamp(18px,2vw,28px)}
.pf-marcas:empty{display:none}
.pf-marcas span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pf-marcas ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pf-marcas li{border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:6px 13px;font-size:13.5px}
.pf-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(22px,2.6vw,36px)}
.pf .btn{color:#ffffff;border-color:rgba(255,255,255,.4)}
.pf-red{color:#ffffff;font-size:14.5px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:2px;transition:border-color .3s}
.pf-red:hover{border-color:#ffffff}

/* abajo: la tira del roster */
.pf-tira{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.pf-avatares{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:4px 2px;
  max-width:min(72vw,1100px);scrollbar-width:none;--fade:clamp(16px,2vw,32px);cursor:grab}
.pf-avatares::-webkit-scrollbar{display:none}
.pf-avatares.arrastrando{cursor:grabbing;scroll-behavior:auto}
.pf-avatares img{-webkit-user-drag:none}
.pf-flecha{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;background:transparent;color:#ffffff;
  transition:border-color .3s}
.pf-flecha:hover{border-color:#ffffff}
.pf-av{flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer}
.pf-foto{display:block;width:clamp(44px,3.2vw,54px);aspect-ratio:1;border-radius:999px;overflow:hidden;
  border:2px solid transparent;transition:border-color .3s,transform .3s}
.pf-av:hover .pf-foto{transform:translateY(-3px)}
.pf-av.on .pf-foto{border-color:#ffffff}
.pf-av:focus-visible .pf-foto{outline:2px solid #ffffff;outline-offset:2px}
.pf-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.85);transition:filter .3s}
.pf-av.on .pf-foto img,.pf-av:hover .pf-foto img{filter:none}
.pf-cuenta{font-size:12.5px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;min-width:4.5em}

/* pantallas medianas: la descripcion baja debajo del nombre */
@media(max-width:1200px) and (min-width:901px){
  .pf-main{grid-template-columns:minmax(0,1fr) auto}
  .pf-texto{grid-column:1;justify-self:start}
  .pf-escenario{grid-column:2;grid-row:1 / span 2}
}

/* celular: todo en una columna que se desplaza; el escenario arriba */
@media(max-width:900px){
  .pf-cuerpo{display:block;height:100%;overflow-y:auto;padding:64px 20px 24px}
  .pf-main{display:flex;flex-direction:column;align-items:stretch;gap:26px}
  .pf-escenario{order:-1;--pf-alto:min(58svh,520px);width:100%;align-self:center}
  .pf-escenario[data-cuantas="una"]{width:var(--pf-ancho)}
  .pf-texto{justify-self:auto;max-width:none}
  .pf-tira{margin-top:26px}
  .pf-avatares{max-width:100%}
  .pf-flecha,.pf-cuenta{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pf,.pf-fondo i,.pf-pieza{transition:none}
}

/* los textos entran con un fundido corto al cambiar de creador */
@keyframes pf-entra{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.entra{animation:pf-entra .5s ease both}

/* la ficha de la grilla ahora es tocable */
.ficha{cursor:pointer}

/* ============================================================
   GALERIA DE CREADORES — grilla dispersa que aparece al scrollear.
   Arriba de cada pieza, la categoria y el nombre. Abajo, las redes.
   ============================================================ */
.gt-caja{position:relative;margin-top:clamp(30px,4vw,64px)}

/* La banda de marcas y los creadores van cerca: con el padding normal
   de <section> quedaban hasta 460px de aire muerto entre el ultimo
   logo y "Nuestros creadores". */
#marcas-seccion{padding-bottom:clamp(18px,2vw,40px)}
/* La franja lima tiene que entrar en UNA pantalla: numeros, video de
   presentacion y cinta de marcas. Con los paddings de fabrica se iba
   a 1162px contra 950 de alto util. Cada recorte de aca esta MEDIDO
   contra ese total, no elegido a ojo.

   Los contadores van MAS CHICOS que en otras partes del sitio, y es a
   proposito: en esta franja compiten con el video, que es la pieza
   principal. Cada pixel que se les saca es un pixel que gana el
   video. El numero estaba en 98px de alto; solo eso se comia media
   pantalla entre los tres. */
#numeros{padding-top:clamp(28px,3vw,52px)}
#numeros .cuenta{padding-top:clamp(10px,1.1vw,18px);
  padding-bottom:clamp(10px,1.1vw,18px)}
#numeros .cuenta b{font-size:clamp(34px,3.6vw,70px);margin-bottom:9px}
#numeros .cuenta i{font-size:11.5px;letter-spacing:.14em}
/* el .centro trae 50px de margen pensado para un boton suelto: aca
   abajo del titulo no hay nada que separar */
#presentacion .centro{margin-top:0}
#presentacion{padding-top:clamp(20px,2.4vw,38px)!important;
  padding-bottom:clamp(20px,2.4vw,38px)!important}
/* la cinta respira menos dentro de la franja */
#marcas-seccion .marcas-caja{padding:clamp(56px,7vw,100px) 0 clamp(16px,1.9vw,28px)}
#creadores{padding-top:clamp(30px,3.4vw,64px)}
.gt{display:grid;grid-template-columns:repeat(var(--gt-cols,4),1fr);
  gap:clamp(14px,2vw,36px);padding:0 var(--pad);
  /* se acota para que en monitores muy anchos no se despegue del resto
     de la pagina ni estire las fotos mas de la cuenta */
  max-width:2200px;margin:0 auto}
.gt-hueco{aspect-ratio:2/3}
.gt-pieza{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;
  border-radius:10px;background:var(--fondo-2);cursor:pointer;
  opacity:0;transform:scale(.9);will-change:transform,opacity}
.gt-pieza img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.74);transition:filter .55s cubic-bezier(.16,1,.3,1)}
.gt-pieza:hover img{filter:grayscale(0) brightness(1)}
/* velo suave arriba y abajo, para que los textos se lean sobre la foto */
/* el velo del pie solo se enciende al apuntar, junto con el texto */
.gt-pieza::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .45s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 30%,transparent 48%),
             linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.22) 34%,transparent 52%)}
.gt-pieza:hover::after,.gt-pieza:focus-visible::after{opacity:1}

/* la info aparece solo al pasar el mouse.
   Arriba a la izquierda: nombre y, debajo, la categoria en chico.
   Al pie, separadas por una linea: las redes.                      */
.gt-arriba,.gt-redes{position:absolute;left:0;right:0;z-index:2;
  padding:clamp(15px,1.5vw,24px);
  opacity:0;transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.gt-arriba{top:0;text-align:left;transform:translateY(-10px)}
.gt-redes{bottom:0;transform:translateY(10px)}
.gt-pieza:hover .gt-arriba,.gt-pieza:focus-visible .gt-arriba,
.gt-pieza:hover .gt-redes,.gt-pieza:focus-visible .gt-redes{opacity:1;transform:none}

.gt-arriba b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(27px,2.4vw,50px);line-height:.92;color:var(--texto)}
.gt-arriba i{font-style:normal;display:block;font-size:clamp(13px,.95vw,17px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);margin-top:1px}

.gt-redes{display:flex;gap:clamp(10px,1vw,20px);align-items:flex-end}
.gt-redes::before{content:'';position:absolute;left:clamp(15px,1.5vw,24px);
  right:clamp(15px,1.5vw,24px);top:0;height:1px;background:rgba(255,255,255,.2)}
.gt-red{display:flex;flex-direction:column;gap:5px;min-width:0}
.gt-red b{font-family:var(--body);font-weight:400;font-size:clamp(11.5px,.8vw,14px);
  letter-spacing:.11em;text-transform:uppercase;color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-red i{font-style:normal;font-family:var(--display);font-size:clamp(18px,1.35vw,26px);
  line-height:1;color:var(--texto);font-variant-numeric:tabular-nums;letter-spacing:0}

/* la flecha aparece recien cuando empezas a bajar */
.gt-fijo{position:sticky;bottom:clamp(26px,4vh,54px);z-index:3;display:flex;
  justify-content:center;pointer-events:none;margin-top:-52px;
  opacity:0;transition:opacity .5s ease}
.gt-fijo.on{opacity:1}
/* El fondo sale del bloque, no de un color fijo: sobre un bloque claro
   quedaba un circulo negro con la flecha negra adentro. */
.gt-flecha{pointer-events:auto;width:46px;height:46px;display:grid;place-items:center;
  cursor:pointer;border:1px solid var(--borde);border-radius:999px;color:var(--texto);
  background:var(--fondo);backdrop-filter:blur(10px);
  transition:border-color .3s,color .3s,transform .3s}
.gt-flecha:hover{border-color:var(--naranja);color:var(--naranja);transform:translateY(3px)}
@media(prefers-reduced-motion:reduce){
  .gt-pieza{transform:none!important;opacity:1!important;will-change:auto}
  .gt-flecha:hover{transform:none}
}


/* ── PANEL DE AJUSTES (solo para diseñar) ───────────────────
   Lo arma js/ajustes.js y solo carga en localhost o con ?ajustes.
   Se abre con la tecla A. Deliberadamente sobrio: es una
   herramienta, no parte de la web.                              */
.aj{position:fixed;right:16px;bottom:16px;z-index:9999;width:320px;max-width:calc(100vw - 32px);
  max-height:min(78vh,760px);display:none;flex-direction:column;
  background:#141312;color:#ffffff;border:1px solid rgba(255,255,255,.16);
  border-radius:14px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
  font-family:var(--body);font-size:12.5px;line-height:1.4}
.aj.abierto{display:flex}
.aj-top{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.aj-top b{font-weight:600;font-size:13px}
.aj-nota{flex:1;color:rgba(255,255,255,.45);font-size:11px}
.aj-x{background:none;border:0;color:rgba(255,255,255,.6);font-size:18px;
  line-height:1;cursor:pointer;padding:0 2px}
.aj-x:hover{color:#ffffff}
.aj-cuerpo{overflow-y:auto;padding:4px 14px 10px}
.aj-grupo{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.aj-grupo:last-child{border-bottom:0}
.aj-grupo h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:500;margin-bottom:9px}
.aj-fila{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.aj-fila>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aj-fila>i{font-style:normal;width:52px;text-align:right;
  color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;font-size:11.5px}
.aj select{background:#1e1c1a;color:#ffffff;border:1px solid rgba(255,255,255,.18);
  border-radius:6px;padding:4px 6px;font-family:inherit;font-size:12px;cursor:pointer}
.aj input[type=color]{width:38px;height:24px;padding:0;border:1px solid rgba(255,255,255,.18);
  border-radius:5px;background:none;cursor:pointer}
.aj input[type=range]{flex:1.4;accent-color:#ff761e;cursor:pointer}
.aj-pie{display:flex;gap:8px;padding:11px 14px;border-top:1px solid rgba(255,255,255,.12)}
.aj-pie button{flex:1;padding:8px;border-radius:7px;cursor:pointer;font-family:inherit;
  font-size:12px;border:1px solid rgba(255,255,255,.2);background:none;color:#ffffff}
.aj-copiar{background:#ff761e!important;border-color:#ff761e!important;color:#0d0d14!important;
  font-weight:600}
.aj-pie button:hover{border-color:rgba(255,255,255,.45)}