/* ─────────────────────────────────────────────────────────────
   Kunko · sistema de collage editorial.

   Fotografía en blanco y negro, papel fucsia, amarillo cálido,
   objetos analógicos y personas reales. Nada de stock de fintech.

   Dos reglas que ordenan todo:

   1. El collage NUNCA es un GIF ni un WebP animado. Es una base
      estática más una capa de gesto, superpuestas, y el movimiento
      lo hace CSS. Así se puede pausar, escalar sin perder alfa y
      apagar cuando alguien pide menos movimiento.

   2. Un solo gesto principal por pieza, con pausa larga entre
      repeticiones. Desplazamiento de 4 a 12 px, rotación de 1,5 a
      4 grados, escala hasta 1.035. Sin rebotes ni sacudidas.

   Depende de editorial.css para los tokens de color.
   ───────────────────────────────────────────────────────────── */

/* ── LA PIEZA ── */
.col{position:relative;display:block;margin:0;line-height:0}
.col > img{width:100%;height:auto;display:block}
.col figcaption{line-height:1.6;margin-top:14px;font-family:'Space Mono',monospace;
                font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
                color:var(--mut, var(--gray2, #9d99b3))}

/* Las capas de gesto se posicionan en porcentaje del lienzo de la base,
   así el collage entero escala sin desarmarse. */
.col .capa{position:absolute;height:auto;display:block;pointer-events:none;
           will-change:transform}

/* ── COMPOSICIÓN ──
   El collage no es una ilustración al lado del texto: entra en la
   composición y a veces la rompe. Cada página elige cómo. */
.col--der{margin-left:auto}
.col--izq{margin-right:auto}

/* pareja de texto y collage, con el collage saliéndose de la columna */
.duo{display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,5vw,72px);
     align-items:center;margin:clamp(40px,6vw,72px) 0 0}
.duo--invertido{grid-template-columns:.82fr 1fr}
.duo--invertido .duo-texto{order:2}
.duo--invertido .col{order:1}
.duo .col{max-width:460px}
@media(max-width:880px){
  .duo,.duo--invertido{grid-template-columns:1fr;gap:34px}
  .duo--invertido .duo-texto,.duo--invertido .col{order:initial}
  .duo .col{max-width:340px;margin:0 auto}
}

/* ── PIEZAS QUE OCUPAN LUGAR ──
   Una imagen desvaida detras del texto es decoracion, no composicion: se lee
   como relleno y ensucia la lectura. Estas variantes le dan a la pieza un
   lugar propio en la reja, con escalas distintas para que no queden todas
   del mismo tamano una abajo de la otra. */

/* La pieza pesa mas que el texto y se sale del alto de la seccion. */
.duo--grande{grid-template-columns:1fr 1.15fr;align-items:end}
.duo--grande .col{max-width:none;margin-bottom:calc(-1 * clamp(40px,6vw,90px))}

/* Franja oscura: los collages son recortes con fondo transparente, asi que
   sobre el navy el blanco y negro y el fucsia se despegan de verdad. */
.banda{background:var(--deep,#0f0d20);color:#fff;position:relative;overflow:hidden;
       padding:clamp(56px,8vw,110px) 0 0;margin:clamp(48px,7vw,96px) 0}
.banda .duo{margin-top:0;align-items:end}
.banda h2,.banda h3,.banda b{color:#fff}
.banda p{color:rgba(255,255,255,.72)}
.banda .col figcaption{color:rgba(255,255,255,.5)}
.banda .eyebrow,.banda .num{color:var(--pink,#e91e8a)}
.banda .col{margin-bottom:0}

/* fila de piezas chicas, en escalera y no alineadas: es un collage, no una grilla */
.tira{display:flex;gap:clamp(16px,3vw,40px);align-items:flex-end;
      margin:clamp(36px,5vw,64px) 0 0;flex-wrap:wrap}
.tira .col{flex:1 1 180px;max-width:250px}
.tira .col:nth-child(even){margin-bottom:clamp(18px,3vw,44px)}

/* ── MOVIMIENTO ──
   Un gesto por pieza. La pausa larga vive dentro del keyframe:
   el porcentaje donde el gesto ocurre es angosto, el resto es quietud. */

@keyframes kk-campana{
  0%,76%,100%{transform:rotate(0deg)}
  80%{transform:rotate(-2.2deg)}
  84%{transform:rotate(2.2deg)}
  88%{transform:rotate(-1.2deg)}
  92%{transform:rotate(.8deg)}
}
@keyframes kk-estrella{
  0%,64%,100%{transform:translateY(0) rotate(0deg);opacity:1}
  76%{transform:translateY(-10px) rotate(3.5deg);opacity:.92}
  88%{transform:translateY(-4px) rotate(-1.5deg);opacity:1}
}
@keyframes kk-cinta{
  0%,60%,100%{transform:translate(0,0) rotate(0deg)}
  78%{transform:translate(6px,7px) rotate(1.8deg)}
  90%{transform:translate(2px,3px) rotate(.6deg)}
}
@keyframes kk-nota{
  0%,58%,100%{transform:translate(0,0) rotate(0deg)}
  74%{transform:translate(-5px,-8px) rotate(-2.4deg)}
  88%{transform:translate(-2px,-3px) rotate(-.8deg)}
}
/* respiración: para la pieza entera cuando no hay capa suelta */
@keyframes kk-respira{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.022)}
}

.capa--campana{animation:kk-campana 6.5s cubic-bezier(.37,0,.63,1) infinite;
               transform-origin:52% 7%}
.capa--estrella{animation:kk-estrella 7s cubic-bezier(.37,0,.63,1) infinite;
                transform-origin:50% 50%}
.capa--cinta{animation:kk-cinta 6.5s cubic-bezier(.37,0,.63,1) infinite;
             transform-origin:40% 20%}
.capa--nota{animation:kk-nota 7s cubic-bezier(.37,0,.63,1) infinite;
            transform-origin:50% 90%}
.capa--nota.d2{animation-delay:.8s}
.capa--nota.d3{animation-delay:1.6s}

.col--respira > img{animation:kk-respira 8s cubic-bezier(.37,0,.63,1) infinite;
                    transform-origin:50% 60%}

/* ── COORDENADAS DE LAS CAPAS ──
   Calculadas contra el lienzo de cada base por coincidencia de plantilla,
   no a ojo. Si se regenera una base, hay que recalcularlas. */
.col--canales .capa--campana{left:69.1%;top:22.8%;width:18.7%}
.col--megafono .capa--estrella{left:76.17%;top:1.95%;width:17.58%}
.col--rubik    .capa--cinta   {left:63.48%;top:5.21%;width:29.3%}
.col--copy .capa--nota.d1{left:46.88%;top:1.3%;width:23.44%}
.col--copy .capa--nota.d2{left:63.48%;top:23.44%;width:29.3%}
.col--copy .capa--nota.d3{left:74.22%;top:61.85%;width:22.46%}

/* Quien pide menos movimiento no ve ninguno. La pieza sigue completa
   porque la capa de gesto es parte de la composición, no un extra. */
@media(prefers-reduced-motion:reduce){
  .col .capa,.col--respira > img{animation:none !important}
}

/* ── LA OVEJA NEGRA ──
   Venia como WebP animado de 19,7 MB: no se podia pausar, no respetaba la
   preferencia de movimiento reducido y el texto quedaba quemado en ingles
   dentro del pixel. Ahora son dos capas y el texto es HTML de verdad.

   Base y trazo comparten el mismo recorte apaisado, asi que superpuestos a
   inset 0 calzan exacto. La proporcion es la de la foto original: en una
   columna a media pagina, un vertical quedaba casi al doble de alto.

   El trazo se dibuja con una mascara conica que barre desde los 315 grados,
   que es donde arranca el trazo original. La mascara NO interpola entre
   valores, asi que el barrido va por pasos discretos: 22 cuadros en un
   segundo. Ademas de andar en cualquier navegador sin depender de @property,
   el escalonado se parece mas a una mano dibujando que un barrido perfecto. */

/* Sin esquinas redondeadas, sin sombra y sin texto encima de la foto: eso
   era exactamente la tarjeta generica que se saco del resto del sitio. La
   foto se apoya plana sobre el papel, con un filo duro arriba que la ancla
   a la reja, y el titular vive en la maqueta, no quemado en el pixel. */
.oveja{position:relative;overflow:hidden;margin:0;line-height:0;
}
.oveja img{width:100%;height:auto;display:block}
.oveja .foto{transform:scale(1.06);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.oveja .trazo{position:absolute;left:0;top:0;width:100%;opacity:0;
              -webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 0deg,transparent 0);
              mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 0deg,transparent 0)}
.oveja figcaption{position:static;padding:14px 0 0;background:none;
       font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.14em;
       text-transform:uppercase;color:var(--mut, var(--gray2, #9d99b3));line-height:1.6}

/* El gesto arranca cuando la seccion entra en pantalla, no al cargar. */
.oveja.in .foto{transform:scale(1)}
.oveja.in .trazo{opacity:1;animation:kk-trazo 1s .45s steps(1,end) forwards}

@keyframes kk-trazo{
  0.0%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 0.0deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 0.0deg,transparent 0)}
  4.55%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 16.4deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 16.4deg,transparent 0)}
  9.09%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 32.7deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 32.7deg,transparent 0)}
  13.64%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 49.1deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 49.1deg,transparent 0)}
  18.18%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 65.5deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 65.5deg,transparent 0)}
  22.73%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 81.8deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 81.8deg,transparent 0)}
  27.27%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 98.2deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 98.2deg,transparent 0)}
  31.82%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 114.5deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 114.5deg,transparent 0)}
  36.36%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 130.9deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 130.9deg,transparent 0)}
  40.91%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 147.3deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 147.3deg,transparent 0)}
  45.45%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 163.6deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 163.6deg,transparent 0)}
  50.0%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 180.0deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 180.0deg,transparent 0)}
  54.55%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 196.4deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 196.4deg,transparent 0)}
  59.09%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 212.7deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 212.7deg,transparent 0)}
  63.64%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 229.1deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 229.1deg,transparent 0)}
  68.18%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 245.5deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 245.5deg,transparent 0)}
  72.73%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 261.8deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 261.8deg,transparent 0)}
  77.27%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 278.2deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 278.2deg,transparent 0)}
  81.82%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 294.5deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 294.5deg,transparent 0)}
  86.36%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 310.9deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 310.9deg,transparent 0)}
  90.91%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 327.3deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 327.3deg,transparent 0)}
  95.45%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 343.6deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 343.6deg,transparent 0)}
  100.0%{-webkit-mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 360.0deg,transparent 0);mask-image:conic-gradient(from 315deg at 49.9% 56.1%,#000 360.0deg,transparent 0)}
}

/* Sin soporte de mascara, el trazo aparece completo en vez de dibujarse.
   Se ve igual de bien, solo sin el gesto. */
@supports not ((-webkit-mask-image:conic-gradient(#000,#000)) or (mask-image:conic-gradient(#000,#000))){
  .oveja .trazo{-webkit-mask-image:none;mask-image:none}
  .oveja.in .trazo{animation:none;transition:opacity .8s .45s}
}

@media(prefers-reduced-motion:reduce){
  .oveja .foto{transform:none;transition:none}
  .oveja .trazo{opacity:1;animation:none !important;-webkit-mask-image:none;mask-image:none}
}


/* ═════════════════════════════════════════════════════════════
   INTEGRACION DE LAS IMAGENES

   El problema: los collages estaban planos dentro de una celda de
   grilla. Un recorte de papel sobre fondo de papel, sin nada que lo
   sostenga, se lee como una foto pegada al lado del texto.

   Lo que los integra son cuatro cosas, y ninguna es la imagen:

   1. una mancha de color organica atras, que le da suelo
   2. dos aros concentricos, que le dan profundidad y sistema
   3. una leyenda que dice que estamos mirando
   4. que rompa su propia caja, con rotacion y margen negativo

   Sin la mancha, el recorte flota. Con la mancha, esta apoyado.
   ═════════════════════════════════════════════════════════════ */

.pieza-img, .col--integrado {
  position: relative;
  isolation: isolate;
}

/* 1 · La mancha. Bordes organicos, no un circulo: un circulo se lee
   como un icono, esto tiene que leerse como pintura. */
.pieza-img::before, .col--integrado::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 8%; top: 18%;
  width: 84%; height: 74%;
  background: var(--mancha, var(--yellow, #ffc83d));
  border-radius: 48% 52% 38% 62% / 52% 38% 62% 48%;
  transform: rotate(var(--mancha-giro, -7deg));
  opacity: .9;
}

/* El color rota por seccion para que la pagina no sea monotona.
   Van los tres del sistema; el magenta se reserva para las acciones. */
#canales   .pieza-img { --mancha: var(--yellow, #ffc83d); --mancha-giro: -7deg; }
#compliance .pieza-img { --mancha: var(--mint, #41d6a3);  --mancha-giro: 5deg; }
#mente     .pieza-img { --mancha: var(--coral, #ff6b55);  --mancha-giro: -4deg; }
#neuro     .pieza-img { --mancha: var(--yellow, #ffc83d); --mancha-giro: 6deg; }
#relevancia .pieza-img { --mancha: var(--mint, #41d6a3);  --mancha-giro: -5deg; }

/* 2 · Los aros. Una linea fina al 18%: se notan sin competir. */
.pieza-img::after, .col--integrado::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  width: 78%; height: 66%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(17, 16, 39, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 0 transparent;
}

/* El segundo aro. Dos concentricos leen como sistema; uno solo lee
   como adorno. */
.pieza-img > .aro, .col--integrado > .aro {
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  width: 97%; height: 87%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(17, 16, 39, .13);
  border-radius: 50%;
  pointer-events: none;
}

/* 3 · La imagen sale un poco de su caja. Rotarla apenas y dejarla
   pisar el margen es lo que la mete adentro de la pagina en vez de
   dejarla al costado del texto. */
.pieza-img img {
  position: relative; z-index: 1;
  transform: rotate(var(--giro, 1.5deg));
  max-width: 108%;
}
.pieza > .pieza-img { margin-bottom: -28px; }
.pieza:nth-of-type(even) .pieza-img img { --giro: -2deg; }

/* 4 · La leyenda. Pastilla oscura con un punto que late: dice que
   esto es una señal, no una ilustracion. */
.pieza-img figcaption, .col--integrado figcaption {
  position: absolute; z-index: 3;
  left: 0; bottom: 2%;
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; padding: 11px 14px;
  background: var(--ink, #111027); color: #fff;
  border-radius: 99px;
  font-family: 'Space Mono', monospace;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.pieza-img figcaption::before, .col--integrado figcaption::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint, #41d6a3);
  animation: kk-latido 1.5s ease-out infinite;
}
@keyframes kk-latido {
  0%   { box-shadow: 0 0 0 0 rgba(65,214,163,.5); }
  100% { box-shadow: 0 0 0 9px rgba(65,214,163,0); }
}

/* El indice al costado, en vertical. Detalle de revista: casi no se
   lee y es justo lo que hace que parezca impreso. */
.pieza-img { }
.pieza-img > .indice {
  position: absolute; z-index: 3;
  left: 1%; top: 11%;
  writing-mode: vertical-rl;
  font-family: 'Space Mono', monospace;
  font-size: 8px; font-weight: 700; letter-spacing: .14em;
  color: rgba(17, 16, 39, .35);
}

@media (max-width: 760px) {
  .pieza-img::before { left: 8%; width: 84%; }
  .pieza-img img { max-width: 100%; }
  .pieza > .pieza-img { margin-bottom: 0; }
}

/* Un solo bloque de texto, sin columna de imagen. */
.duo--solo{grid-template-columns:1fr}
.duo--solo .duo-texto{max-width:62ch}