/**
 * Cinta de marcas — pagina EN.
 *
 * Va pegada abajo del hero, antes de la bio: es la primera cosa que ve un
 * productor de Estados Unidos despues del pitch, sin scrollear casi nada.
 *
 * Kit de marca: negro + amarillo #FFE01B + blanco, Raleway, alto contraste.
 *
 * Tres decisiones que parecen de estilo y no lo son:
 *
 * 1. FONDO BLANCO, no amarillo ni negro. Si la cinta fuera amarilla, el acento
 *    del sitio pasaria a ser fondo y se gastaria —y ademas competiria con la
 *    banda amarilla de numeros, que esta una pantalla mas abajo—. Si fuera
 *    negra, se pegaria al hero negro y la cinta desapareceria dentro de el. En
 *    blanco, el corte del hero a la cinta es la linea que la presenta.
 *
 * 2. NADA DE AMARILLO ACA. El amarillo del sitio ya tiene su lugar: el boton
 *    GET IN TOUCH del hero, arriba, y la banda de numeros, abajo. Un hairline o
 *    un hover amarillo en el medio competiria con los dos. La contencion es la
 *    marca.
 *
 * 3. LOS LOGOS NO SE FILTRAN, se generan. Las variantes monocromas salen de
 *    scripts/logos-marcas/, con cada color mapeado a mano. Un
 *    `filter: brightness(0)` pinta de negro todo lo que no sea transparente y
 *    convierte en manchas los logos que se apoyan en un calado: el badge de KFC
 *    queda un rectangulo, la bandera de Knorr una hoja sin el nombre adentro y
 *    los dos circulos de Mastercard un poroto.
 */

.fp-marcas {
	/* Full-bleed. El elemento vive dentro del contenedor de 1280 de Enfold y
	   sale a lo ancho de la ventana: una cinta que arranca y termina con el
	   contenido no se lee como infinita, se lee como una fila.
	   Es seguro: Enfold ya pone overflow-x:hidden en html, body, #top y
	   #wrap_all, asi que el 100vw no puede generar barra horizontal ni en los
	   sistemas donde la barra de scroll ocupa lugar. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	background-color: #ffffff;

	/* Padding ASIMETRICO, y es lo que hace todo el trabajo de separacion: no
	   hay hairlines, porque el lenguaje del sitio es de bloques de contraste y
	   no de filetes.

	   Arriba poco: la cinta cuelga del borde negro del hero, y esa proximidad
	   la hace leer como parte de la presentacion y no como una seccion suelta.
	   Abajo mas, para que la bio arranque limpia.

	   Los 32 de abajo no son un descuido frente a los 56 de arriba: la seccion
	   de la bio trae su propio padding, asi que el hueco que se VE es de 160.
	   Medido con verificar.js, no calculado. */
	padding-top: 56px;
	padding-bottom: 32px;

	font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

/* Rotulo. Es un CAPTION, no un titulo: el H2 de esta zona es FEATURED WORK y no
   puede tener competencia. De ahi el cuerpo chico y el gris.
   Mayusculas con tracking amplio es el lenguaje de rotulo del sitio. */
.fp-marcas__rotulo {
	margin: 0 0 36px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #555555;
}

/* La ventana. El desvanecido de los bordes es lo que da el infinito: con corte
   seco los logos aparecen de la nada justo en el borde de la pantalla y se ve
   roto. mask-image sin prefijo para los navegadores al dia, -webkit- para
   Safari, que todavia lo pide. */
.fp-marcas__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 120px, #000 calc(100% - 120px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 120px, #000 calc(100% - 120px), transparent);
}

/* La pista lleva DOS tandas identicas y se corre exactamente media pista. Al
   terminar, el primer logo de la segunda tanda quedo donde arrancó el primero
   de la primera, asi que el salto al reiniciar es invisible.
   width:max-content y no un ancho fijo: si manana entra o sale una marca, el
   loop sigue cerrando solo. */
.fp-marcas__pista {
	display: flex;
	width: max-content;
	/* 50s para una pista de ~4970px: media pista en 50s son 50px/s. Mas rapido
	   marea; mas lento parece colgada. Si entra o sale una marca hay que
	   reajustar este numero, porque la pista cambia de ancho y la velocidad con
	   ella. */
	animation: fp-marcas-correr 50s linear infinite;
}

@keyframes fp-marcas-correr {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.fp-marcas__tanda {
	display: flex;
	align-items: center;
	gap: 96px;
	/* El aire es lo que la hace premium. Apretada parece cartel de sponsors. */
	margin: 0;
	padding: 0 48px 0 0;   /* medio gap, para que la union entre tandas mida igual */
	list-style: none;
}

.fp-marcas__tanda::before {
	/* La otra mitad del gap de la union. Sin esto, entre el ultimo logo de una
	   tanda y el primero de la siguiente hay 96 + 0 y no 96, y cada vuelta se
	   nota un tironcito. */
	content: "";
	display: block;
	width: 48px;
	flex: 0 0 auto;
}

.fp-marcas__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El alto de cada logo lo pone el shortcode con --fp-marca-alto, y sale de la
   tabla de scripts/logos-marcas/: es alto OPTICO, no alto de caja. Un emblema
   redondo necesita mas alto que un wordmark apaisado para pesar lo mismo, y una
   forma solida pesa mas que un script fino con el mismo alto. Igualarlos por
   max-height los deja del mismo TAMANO, que no es lo mismo que del mismo PESO. */
.fp-marcas__logo {
	display: block;
	height: var(--fp-marca-alto, 30px);
	width: auto;
	max-width: 160px;
	opacity: 0.45;
	transition: opacity 200ms ease;
}

/* En reposo el 45% deja los logos cerca del gris del sistema: presentes, sin
   gritar mas que el contenido propio. Al pasar el mouse el logo va a tinta
   plena Y la cinta se frena, para que el productor que quiso mirar pueda leer.
   Nada de amarillo en el hover: sobre blanco no tiene contraste. */
.fp-marcas__viewport:hover .fp-marcas__pista {
	animation-play-state: paused;
}

.fp-marcas__item:hover .fp-marcas__logo {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   Con `prefers-reduced-motion`: la cinta NO se detiene, se arrastra.

   A mucha gente el movimiento le marea, y por eso esta preferencia se atiende.
   Pero la primera version la atendia deteniendo la cinta y envolviendo las 14
   marcas en filas centradas, y eso salio mal por un motivo que solo se vio en
   produccion: **la cinta pasaba de 153px a 713px de alto**. En un celular es
   casi una pantalla entera, y como la cinta va arriba, empujaba los demos de
   1,28 a 1,94 pantallas de scroll — justo lo que se acababa de arreglar
   subiendo Demos al segundo lugar. Medido a 390px sobre produccion.

   Asi que se atiende de la otra forma: **la animacion sigue, mucho mas lenta**.
   120s contra los 50s normales. Un arrastre de ese orden no dispara el mareo
   que dispara un carrusel rapido, y la cinta conserva su alto compacto.

   ⚠️ Es una decision con costo, y conviene tenerlo escrito: quien activo
   "Reducir movimiento" pidio que no se mueva, y esto se mueve igual, despacio.
   Se eligio a conciencia (Fede, 10/08/2026) por el mismo criterio que ya usa el
   ZamSite, que hace 150s. Si alguna vez se prefiere respetarla al pie de la
   letra, el camino NO es volver a `animation: none` sin mas: hay que dejarla
   quieta **y** compacta, porque el problema nunca fue que estuviera quieta.

   Al no detenerla, tampoco hay que tocar nada mas: las dos tandas siguen
   haciendo falta para que el bucle no tenga costura, el `nowrap` tiene que
   quedar, y el desvanecido de los bordes tambien.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fp-marcas__pista {
		animation-duration: 120s;
	}
}

/* Movil. Menos aire y logos mas chicos, pero la cinta sigue corriendo: es el
   unico lugar donde entra la cantidad de marcas sin apilar doce filas.
   El desvanecido baja a 40px porque a 120 se comeria media pantalla. */
@media only screen and (max-width: 767px) {
	.fp-marcas {
		padding-top: 40px;
		/* La seccion de abajo ya pone su propio padding en movil, asi que aca
		   alcanza con muy poco: el hueco que se ve termina siendo de 143px. */
		padding-bottom: 8px;
	}

	.fp-marcas__rotulo {
		margin-bottom: 24px;
		font-size: 11px;
		letter-spacing: 0.16em;
		padding: 0 24px;
	}

	.fp-marcas__viewport {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	}

	.fp-marcas__tanda {
		gap: 56px;
		padding-right: 28px;
	}

	.fp-marcas__tanda::before {
		width: 28px;
	}

	.fp-marcas__item {
		height: 56px;
	}

	.fp-marcas__logo {
		height: calc(var(--fp-marca-alto, 30px) * 0.8);
		max-width: 120px;
	}
}

/* Variante en color: los logos con los colores de la marca. Se arma para poder
   compararla en vivo contra la monocroma. Van a opacidad plena — bajarles la
   opacidad a logos de colores los ensucia en vez de calmarlos. */
.fp-marcas--color .fp-marcas__logo {
	opacity: 1;
}


/* ============================================================
   VARIANTE 'claro' — la cinta DENTRO del hero, sobre el negro.
   Es la que usa la página inglesa desde el 07/08/2026.

   Existe porque el hero está en min-height:100vh, o sea que mide exactamente
   una pantalla. Medido a 720, 800, 900 y 1080: de la cinta se veían SIEMPRE
   0px sin scrollear, en cualquier monitor. No era que había quedado un poco
   abajo — era que nada de lo que venga después del hero puede asomarse nunca,
   en ninguna pantalla, jamás. Ponerla primera en el orden no alcanzaba: seguía
   siendo la pantalla dos.

   El hero tiene 161px de negro libre abajo (la bajada termina en 739 de 900) y
   este módulo comprimido mide 148. Entra.

   No toca la estructura de la página: el bloque sigue siendo su propia sección
   entre el hero y la bio, y sube por margen negativo. Se elige desde el
   shortcode con variante="claro".
   ------------------------------------------------------------ */
.fp-marcas--claro {
	/* Un velo que se apoya en el borde de abajo del hero. No es decoración:
	   los logos caen justo sobre la parte cargada de la foto —el micrófono, la
	   malla del panel acústico— y sin esto pelean con ella. Arranca
	   transparente para no cortar la foto con una línea. */
	background-color: transparent;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.82) 100%);

	/* Sube el módulo entero adentro del hero. El número sale de su propio
	   alto comprimido: si se cambia un padding de acá abajo, hay que
	   recalcularlo o queda pisando la bajada del hero. */
	margin-top: -148px;
	padding-top: 16px;
	padding-bottom: 24px;
	position: relative;
	z-index: 2;
}

/* ⚠️ LA SECCIÓN QUE ALOJA LA CINTA NO TIENE QUE RESERVAR ALTO PROPIO.

   El módulo sube entero al hero por margen negativo, así que abajo no queda
   nada que sostener — su contenedor interno mide 1px. Pero una `.avia-section`
   de Enfold trae `min-height: 100px` por defecto, y esos 100px quedaban ahí
   como una banda blanca vacía entre el hero y la bio.

   Medido a 1440: en la página inglesa la bio arrancaba en y=1000 y en la
   española en y=900. Los 100px de diferencia eran exactamente esto, y era el
   blanco que se veía al scrollear.

   Con min-height:0 la sección pasa a medir lo que de verdad ocupa: ~0 en
   pantallas altas, y ~88px en las bajas —donde el margen negativo es de 60 en
   vez de 148 y parte del módulo sí queda en el flujo—. O sea que se adapta
   sola y no hay que tocar nada más.

   Va por id porque `id='marcas'` lo fija el shortcode de la sección
   (scripts/logos-marcas/seccion-379.txt). Si ese id cambia, esta regla deja de
   aplicar y vuelve la banda. */
#marcas {
	min-height: 0;
}

/* ⚠️ En pantallas bajas la opción C NO ENTRA y hay que decirlo: a 720px de
   alto el hero deja apenas 71px libres (la bajada termina en 649) y el módulo
   mide 148. Con el margen completo se montaba encima del texto del hero.
   Ahí degrada a un asomo —se ve el rótulo y el filo de arriba de los logos,
   que es la opción A— en vez de romper. Medido, no estimado. */
@media only screen and (max-height: 820px) {
	.fp-marcas--claro {
		margin-top: -60px;
	}
}

.fp-marcas--claro .fp-marcas__rotulo {
	margin-bottom: 20px;
	color: rgba(255, 255, 255, 0.55);
}

/* Sobre negro el blanco florece, así que el reposo va más alto que el 0.45 de
   la versión clara: al 45% sobre una foto oscura los logos desaparecen. */
.fp-marcas--claro .fp-marcas__logo {
	opacity: 0.55;
}

.fp-marcas--claro .fp-marcas__item:hover .fp-marcas__logo {
	opacity: 1;
}

@media only screen and (max-width: 767px) {
	/* En móvil el hero no tiene 161px libres: el módulo vuelve a su lugar,
	   debajo del hero, y solo conserva los logos en claro si el fondo lo
	   pide. Sin esto pisa el botón GET IN TOUCH. */
	.fp-marcas--claro {
		margin-top: 0;
		background-color: #000000;
		padding-top: 32px;
		padding-bottom: 32px;
	}
}