/**
* Editoriales — home + page 210.
*
* ¿QUIÉN GOBIERNA CUÁNDO? (la contradicción que había hasta 2.1.76)
*
* 1. CARRUSEL (`.is-marquee`) — es lo que ve el 100% de la gente en un
* teléfono normal. animations.js añade la clase si hay GSAP y el usuario
* NO pidió reducir movimiento; la condición es esa, NO el ancho. Como
* `.akb-brands-home__track.is-marquee` (0,2,0) le gana a
* `.akb-brands-home__track` (0,1,0), el flex del carrusel pisa la grilla
* en todos los anchos.
* 2. GRILLA (`:not(.is-marquee)`) — es el fallback REAL, no un diseño
* alternativo: sin JS, con GSAP caído, o bajo `prefers-reduced-motion`
* (ahí gsap.matchMedia ni corre y el bloque nunca se activa). Ahí sí
* manda: 4 columnas desktop, 3 tablet, 2 en móvil.
*
* Hasta 2.1.76 las reglas móviles de grilla NO estaban acotadas y convivían a
* medias con el carrusel: `grid-template-columns` quedaba inerte bajo flex,
* pero `padding`, `gap` y sobre todo el `max-width: 60%` del último slide impar
* SÍ aplicaban y deformaban placas del carrusel. Por eso ahora todo lo que es
* exclusivo de la grilla lleva `:not(.is-marquee)` explícito.
*
* PLACAS UNIFORMES (2026-08-09): el ancho lo manda el layout, nunca el nombre de la
* editorial. Medido antes a 390px: los salían de 120 a 144px porque
* `min-width: auto` de flex los inflaba hasta el min-content del texto. Y la
* tinta de los logos iba de 15 a 36px de alto (2,4x) porque `max-width/max-height`
* deja que el límite que muerde primero dependa de la proporción de cada marca.
* El patrón que ya funciona en /editoriales/ es caja de tamaño FIJO +
* `object-fit: contain`; acá se adapta con un tope de proporción explícito
* La placa de tamaño fijo es la que da el ritmo visual; la tinta se centra
* dentro con `object-fit: contain`, igual que en /editoriales/.
*/
.akb-brands-home {
padding: var(--space-12) 0;
border-top: 1px solid var(--aki-border);
border-bottom: 1px solid var(--aki-border);
/* ─── Geometría de la placa: UNA sola fuente de verdad ───────────
* La usan la grilla y el carrusel por igual; así no hay dos diseños
* peleando por el mismo .
*
* El ancho del slide lo manda ESTE token y nunca el contenido: antes el
* era un flex en columna y su ancho lo decidía el hijo más ancho, que
* resultaba ser el NOMBRE de la editorial — por eso «PANINI • AR» producía
* una placa más ancha que «IVREA • AR» (medido en prod: 120, 127 y hasta
* 144px conviviendo). */
--akb-brand-slide-w: clamp(156px, 40vw, 190px);
--akb-brand-plate-h: 64px;
}
.akb-brands-home__container {
width: min(100% - var(--space-6) * 2, var(--container-max));
margin: 0 auto;
}
.akb-brands-home__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.akb-brands-home__intro {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.akb-brands-home__title {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(1.4rem, 2.4vw, 1.875rem);
letter-spacing: 0.02em;
color: var(--aki-white);
position: relative;
padding-left: var(--space-3);
}
.akb-brands-home__title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 1em;
background: var(--aki-red-bright);
border-radius: 2px;
}
.akb-brands-home__desc {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--aki-gray-400);
max-width: 56ch;
letter-spacing: 0.01em;
}
.akb-brands-home__more {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.45rem 0.85rem;
flex-shrink: 0;
/* Hit area táctil sin mover el layout: padding + margin negativo. */
margin-block: -0.45rem;
border: 2px solid transparent;
background: rgba(255, 255, 255, 0.02);
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.72);
font-family: var(--font-heading);
font-size: 13px;
/* Bebas sin 800 ni italic reales (se sintetizaban) — gemelo de .akb-section__link,
mismo tratamiento: 400 upright + skew real del contenedor. */
font-weight: 400;
font-style: normal;
font-synthesis: none;
transform: skewX(-5deg);
letter-spacing: 0.08em;
text-transform: uppercase;
/* Texto normal sobre #111: --aki-red quedaba en 3.93:1. */
color: var(--aki-red-text, #ff4756);
text-decoration: none;
line-height: 1;
white-space: nowrap;
transition:
color 220ms ease,
background-color 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease,
transform 220ms ease,
text-shadow 220ms ease;
}
.akb-brands-home__more:hover,
.akb-brands-home__more:focus-visible {
color: var(--aki-black);
background: var(--aki-yellow);
border-color: var(--aki-yellow);
transform: translateX(5px) skewX(-5deg);
text-shadow: none;
box-shadow: 4px 4px 0 var(--aki-black);
}
/* ─── Track: desktop grid ─────────────────────────────────────── */
.akb-brands-home__track {
list-style: none;
margin: 0;
padding: var(--space-2) 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
.akb-brands-home__slide {
margin: 0;
padding: 0;
/* Sin esto, el `min-width: auto` de un ítem flex deja que el min-content
del NOMBRE infle el slide: medido a 390px daba 120 / 144 / 124,5 px
según la editorial. El ancho lo manda el layout, no el texto. */
min-width: 0;
}
/* ─── Slide card ──────────────────────────────────────────────── */
.akb-brands-home__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
/* Padding horizontal 0: la placa ocupa TODO el ancho del slide y la
separación entre placas la pone el gap del track. Con padding lateral la
placa quedaba más angosta y la tinta de los wordmarks aún más chica. */
padding: var(--space-2) 0;
/* El ítem no puede desbordar su slide: ancho del contenedor + min-width 0
(si no, el texto vuelve a mandar) + border-box (si no, el padding suma).
`height: 100%` para que el llene el estirado y todas las
tarjetas terminen a la misma altura aunque un nombre ocupe dos líneas. */
width: 100%;
min-width: 0;
height: 100%;
box-sizing: border-box;
text-decoration: none;
color: inherit;
border-radius: var(--radius-xl);
transition: transform 280ms cubic-bezier(.2, .8, .2, 1), opacity 280ms ease, filter 280ms ease;
}
.akb-brands-home__logo {
display: flex;
align-items: center;
justify-content: center;
/* Caja de tamaño FIJO — el patrón ya probado de /editoriales/
(.akb-brand-card__logo). border-box para que padding y borde no la
agranden, y overflow hidden como red de seguridad. */
width: 100%;
height: var(--akb-brand-plate-h);
flex-shrink: 0;
box-sizing: border-box;
overflow: hidden;
/* El padding VERTICAL es el techo de los logos cuadrados: con 8px arriba y
abajo la caja útil quedaba en 36px de alto y Arechi (aspecto 1,04) no
podía pasar de 1.343px² de tinta por mucho que se ajustara el resto —
ahí nacía el 3,29x de diferencia de área. Bajarlo a 4px sube ese techo un
49% sin tocar la altura de la placa ni el ritmo de la sección. */
padding: var(--space-1) var(--space-3);
background: var(--aki-black);
border: 2px solid var(--aki-white);
border-radius: var(--radius-xl);
box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.15); /* Sombra estampada muy sutil en reposo */
/* NUNCA `all`: incluía `padding`, y medido en local la placa se quedaba con
`padding: 0` de forma PERMANENTE — no era la transición en vuelo, a los
1500 ms seguía en 0 y sólo al forzar `transition: none` saltaba a
`4px 12px`. Consecuencia: la caja útil valía 153x53 en vez de 128x44, o
sea el logo pegado al borde y una geometría distinta a la diseñada, que
es justo lo que descuadraba los tamaños. Se transiciona sólo lo que el
hover cambia de verdad. */
transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.akb-brands-home__logo img {
/* La imagen llena la caja útil de la placa y `contain` la centra sin
deformarla: EXACTAMENTE el patrón de `/editoriales/`
(brands.css `.akb-brand-card__logo img`), que es el que el dueño ya
aprobó mirándolo.
Hubo una versión con `aspect-ratio` fija como tope de proporción de la
tinta, para que los wordmarks anchos no quedaran en franjas. Se midió y
se revirtió: empareja el ALTO (2,4x → 1,5x) pero empeora el ÁREA, que es
lo que el ojo lee como "tamaño" — subía de 2,5x a 3,7x y dejaba Arechi y
Ovni un 33% más chicos que en producción. Se veía: Arechi quedaba como
una estampilla dentro de una placa de 190px al lado de un Ivrea que la
llenaba de borde a borde, que es literalmente la queja que este arreglo
venía a resolver. La uniformidad que importa es la de la CAJA, y esa la
da la placa de tamaño fijo. */
display: block;
width: 100%;
height: 100%;
object-fit: contain;
/* Equilibrio óptico: `contain` deja la tinta con áreas muy distintas aunque
la placa sea idéntica (2,40x medido a 390px). `--akb-brand-fit` lo empareja
escalando hacia abajo a los que se pasan; lo escribe animations.js por
slide y se recalcula en cada resize. Sin JS vale 1 y queda el comportamiento
de siempre. */
transform: scale(var(--akb-brand-fit, 1));
/* Pipeline de tinta blanca:
1. grayscale(1) mata todo color
2. invert(1) convierte tinta oscura en clara
3. contrast(999) fuerza blanco/negro puros y elimina grises residuales */
filter: grayscale(1) invert(1) contrast(999) brightness(1.08);
/* Sin `mix-blend-mode`: medido 2026-08-09 con diff de píxeles sobre la
sección completa, `screen` contra la placa #000 y `multiply` contra la
placa #fff cambian 1 píxel en 274.560 (delta 1/255) — son identidades
matemáticas sobre negro y blanco puros, y ninguna SVG del set trae
fondo blanco (verificado: 0 fills #fff). Lo único que hacían era
obligar al compositor a agrupar 16 capas de blend dentro de un
contenedor enmascarado que se transforma en cada frame del arrastre.
OJO: si algún día una placa deja de ser blanco/negro puro, o entra una
SVG con caja blanca, hay que revisar esta decisión. */
transition: transform 200ms ease, filter 200ms ease;
}
.akb-brands-home__name {
font-family: var(--font-heading);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--aki-gray-300);
text-align: center;
line-height: 1.25;
font-weight: 400; /* Bebas sin 500 real (se sintetizaba) */
font-synthesis: none;
/* Tope de DOS líneas con elipsis: un nombre largo no puede ensanchar la
placa (eso ya lo impide min-width:0) ni estirar la tarjeta sin límite.
NO se reserva alto acá: reservar 2 líneas fijas abría un hueco visible
entre el nombre y el contador en las 8 editoriales actuales, que caben
todas en una línea. La igualdad de alto la da el `stretch` del track
(ver .is-marquee) — el aire sobrante cae ABAJO, no en medio. */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 100%;
min-width: 0;
overflow-wrap: anywhere;
transition: color 220ms ease;
}
.akb-brands-home__count {
/* Anclado al fondo de la tarjeta. Las tarjetas ya son de igual alto por el
`align-items: stretch` del track, así que con `margin-top:auto` los
contadores forman un renglón parejo aunque un nombre ocupe dos líneas.
Medido con un nombre largo inyectado: sin esto quedaban 15-16px más
abajo que los demás y el ojo lo lee como desalineación. Reservar dos
líneas de alto para el nombre también lo arreglaba, pero abría un hueco
visible en las tarjetas de nombre corto. */
margin-top: auto;
font-family: var(--font-body);
font-size: 11px;
color: var(--aki-gray-500);
letter-spacing: 0.03em;
margin-top: calc(var(--space-1) * -1);
white-space: nowrap; /* "1.234 títulos" nunca parte en dos líneas. */
transition: color 220ms ease;
}
.akb-brands-home__country {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--aki-gray-400);
transition: color 220ms ease;
}
/* ─── Hover (desktop only) ────────────────────────────────────── */
@media (hover: hover) {
/* Focus Mode: Atenuar los no-hovered */
.akb-brands-home__track:has(.akb-brands-home__item:hover) .akb-brands-home__item:not(:hover) {
opacity: 0.3;
}
.akb-brands-home__item:hover {
transform: translateY(-4px);
}
.akb-brands-home__item:hover .akb-brands-home__logo {
/* Sombra estampada Neo-Brutalista y borde sólido unificado en rojo */
background: var(--aki-white);
border-color: var(--aki-red-bright);
box-shadow: 6px 6px 0px var(--aki-red-bright);
}
.akb-brands-home__item:hover .akb-brands-home__logo img {
/* Compuesto con el ajuste óptico: si se escribiera `scale(1.05)` a secas,
el hover DESHARÍA la normalización y el logo pegaría un salto. */
transform: scale(calc(var(--akb-brand-fit, 1) * 1.05));
filter: none; /* multiply sobre la placa #fff era identidad — ver nota en __logo img */
}
.akb-brands-home__item:hover .akb-brands-home__name {
color: var(--aki-white);
}
.akb-brands-home__item:hover .akb-brands-home__count,
.akb-brands-home__item:hover .akb-brands-home__country {
color: var(--aki-gray-300);
}
}
/* ─── Touch (sin hover): logos en COLOR por default — Opción B ──────────
* El reveal de color del logo vive solo en @media (hover: hover) (arriba), así
* que en dispositivos touch (hover: none) los logos quedaban SIEMPRE en su
* versión blanca filtrada — la "e" de Ivrea, etc., nunca se coloreaba. Acá
* replicamos el "revelado" como estado base para touch: fondo blanco + color
* real (filter:none). El :active sigue dando el feedback de tap.
*
* El `mix-blend-mode: multiply` que acompañaba a filter:none se fue el 2026-08-09:
* medido, no pintaba nada sobre #fff puro (ver nota en `.akb-brands-home__logo img`)
* y era justo el estado en el que ocurre el arrastre con el dedo. */
@media (hover: none) {
.akb-brands-home__logo {
background: var(--aki-white);
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
}
.akb-brands-home__logo img {
filter: none;
}
}
.akb-brands-home__item:focus-visible {
outline: 2px solid var(--aki-red-bright);
outline-offset: 4px;
border-radius: var(--radius-xl);
}
/* Tactile feedback (micro-interaction) on touch/tap */
.akb-brands-home__item:active {
transform: scale(0.96);
transition: transform 150ms ease;
}
/* ─── Reveal animation (stagger) ──────────────────────────────── */
@keyframes akb-brands-fade-up {
from {
transform: translateY(10px);
}
to {
transform: translateY(0);
}
}
.akb-brands-home__slide {
opacity: 1;
animation: akb-brands-fade-up 520ms cubic-bezier(.2, .8, .2, 1) forwards;
animation-delay: calc(var(--akb-slide-index, 0) * 60ms);
}
/* ─── Tablet: 3 columnas ──────────────────────────────────────── */
@media (max-width: 900px) {
.akb-brands-home__track {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ─── Mobile ──────────────────────────────────────────────────────
*
* Acá vivía la contradicción: este bloque dibujaba un muro de 2 columnas
* mientras el JS ponía `.is-marquee` (que no mira el ancho, solo
* prefers-reduced-motion) y convertía el track en flex. Convivían a medias.
*
* Reparto explícito:
* - Lo que vale SIEMPRE (padding de la sección, header, feedback de tap)
* queda sin acotar.
* - Lo que es exclusivo de la GRILLA lleva `:not(.is-marquee)`: son las
* reglas del fallback de `prefers-reduced-motion` / sin-JS, no diseño
* alternativo. El `max-width: 60%` del último slide impar era el peligroso:
* `grid-column` es inerte bajo flex pero `max-width` NO, así que con un
* número impar de editoriales deformaba la última placa del carrusel.
*/
@media (max-width: 640px) {
.akb-brands-home {
padding: var(--space-8) 0;
/* Placa un poco más baja en pantallas chicas; el ancho lo sigue dando
--akb-brand-slide-w (40vw, ~156px a 390px). */
--akb-brand-plate-h: 56px;
}
.akb-brands-home__container {
width: 100%;
}
.akb-brands-home__header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: 0 var(--space-4);
margin-bottom: var(--space-4);
}
.akb-brands-home__more {
align-self: flex-end;
margin-right: var(--space-4); /* Alineación extra para encajar con el header padding */
}
/* GRILLA (fallback reduced-motion / sin JS) */
.akb-brands-home__track:not(.is-marquee) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row;
gap: var(--space-4) var(--space-3);
padding: var(--space-2) var(--space-4);
overflow: visible;
}
/* Si el último elemento es impar (ej. 7), centrarlo abarcando ambas columnas */
.akb-brands-home__track:not(.is-marquee) .akb-brands-home__slide:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.akb-brands-home__track:not(.is-marquee) .akb-brands-home__slide:last-child:nth-child(odd) .akb-brands-home__item {
max-width: 60%;
margin: 0 auto;
}
/* Feedback táctil Neo-Brutalista (simulación de Hover al presionar) */
.akb-brands-home__item:active .akb-brands-home__logo {
border-color: var(--aki-red-bright);
box-shadow: 4px 4px 0px var(--aki-red-bright);
transform: translate(-2px, -2px);
/* Mismo motivo que arriba: `all` arrastraba `padding` y dejaba la caja
útil en otra medida. Sólo lo que este estado cambia. */
transition: border-color 100ms ease, box-shadow 100ms ease, transform 100ms ease;
}
}
/* ─── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.akb-brands-home__slide {
animation: none;
opacity: 1;
}
.akb-brands-home__track {
scroll-behavior: auto;
}
.akb-brands-home__item,
.akb-brands-home__more {
transition: none;
}
}
/* ─── Marquesina continua (mejora progresiva) ─────────────────────
*
* `is-marquee` la añade animations.js SOLO si GSAP está disponible y el
* usuario no pidió reducir movimiento. Sin JS —o bajo prefers-reduced-motion—
* nada de esto aplica y la sección queda como la grilla de arriba, que sigue
* siendo la experiencia base: legible, navegable y sin dependencias.
*
* La fila pasa a flex para que los slides no se compriman y el track pueda
* desbordar: ese desborde ES el recorrido que GSAP anima. El contenedor
* recorta con overflow y difumina los bordes para que los logos entren y
* salgan sin cortarse en seco.
*/
.akb-brands-home__track.is-marquee {
display: flex;
flex-wrap: nowrap;
width: max-content;
/* stretch, no center: iguala el alto de TODOS los al más alto, así una
editorial de nombre largo (dos líneas) no deja las tarjetas desparejas ni
obliga a reservar una línea vacía en las demás. */
align-items: stretch;
gap: var(--space-6);
/* GSAP anima `x`; avisar al navegador evita repintados por frame. */
will-change: transform;
/* Arrastrable: el eje X es nuestro (pointer events en animations.js);
el pan vertical se lo queda el navegador (dispara pointercancel). */
touch-action: pan-y;
cursor: grab;
/* Un arrastre no debe seleccionar nombres ni disparar el callout de
imagen en iOS: aquí no hay texto que alguien quiera copiar. */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.akb-brands-home__track.is-marquee.is-dragging {
cursor: grabbing;
}
/* Mientras se arrastra, el hover/active de las cards no debe "saltar". */
.akb-brands-home__track.is-marquee.is-dragging .akb-brands-home__item {
transition: none;
}
.akb-brands-home__track.is-marquee .akb-brands-home__slide {
/* Ancho fijo: sin esto flex encoge los slides y el recorrido calculado
no coincide con el que se anima.
`min-width: 0` es la mitad que faltaba: `flex-basis` fija la base, pero
el `min-width: auto` por defecto dejaba que el min-content del nombre la
pasara por encima (medido: 144px donde la base decía 120px). */
flex: 0 0 var(--akb-brand-slide-w);
min-width: 0;
}
/* El recorte y el degradado viven en el contenedor, no en el track: el track
se mueve, así que una máscara sobre él viajaría con los logos. */
.akb-brands-home__container:has(.is-marquee) {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Red de seguridad: si alguien activa reduce-motion con la página abierta,
gsap.matchMedia revierte el tween y quita la clase, pero dejamos el estado
estático explícito por si el JS no llegó a correr su cleanup. */
@media (prefers-reduced-motion: reduce) {
.akb-brands-home__track.is-marquee {
will-change: auto;
transform: none !important;
}
}