/* ==========================================================================================================
   Sección marcas · "Las marcas que amas, a tu alcance"
   Fondo blanco (continúa el cielo de #lentes, que termina en blanco) que al final baja a --fondo-2 para empalmar
   con #servicios. En escritorio con 3D: un estudio de piso brillante a todo el ancho con el anillo de placas de
   vidrio; la lista queda para lectores de pantalla. En móvil y en el respaldo: rejilla de placas de vidrio, cada una
   con el logo, la foto de producto de la silueta de la marca y su nombre.
   Todos los selectores llevan el prefijo marcas__ (o .marcas / #marcas).
   ========================================================================================================== */

#marcas {
	overflow-x: clip;
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 78%, var(--fondo-2) 100%);
}
.marcas__cabeza { margin-bottom: clamp(28px, 4vw, 56px); }
.marcas__cabeza .entrada { max-width: 56ch; }

/* ---------- Rejilla de placas de vidrio (sin JS, móvil, movimiento reducido, sin WebGL) ----------------------- */
.marcas__escenario { position: relative; }
.marcas__lista {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	max-width: 1060px;
	margin-inline: auto;
}
/* Cielo claro detrás de la rejilla, como el estudio de la vista 3D */
.marcas__lista::before {
	content: "";
	position: absolute;
	inset: -18% -8%;
	z-index: -1;
	background: radial-gradient(50% 50% at 50% 55%, rgba(214, 232, 255, 0.7), rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}
.marcas__lista li {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1.75;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 251, 255, 0.92) 52%, rgba(232, 241, 252, 0.9) 100%);
	border: 1px solid var(--borde);
	box-shadow:
		var(--brillo-vidrio),
		inset 0 -1px 0 rgba(127, 207, 255, 0.45),
		0 1px 2px rgba(10, 23, 51, 0.05),
		0 22px 40px -26px rgba(20, 60, 150, 0.42);
	overflow: hidden;
	isolation: isolate;
	/* Sin backdrop-filter: la placa es casi opaca sobre un cielo liso, así que el desenfoque del fondo cambiaba menos
	   de 3/255 el color y costaba una pasada de blur por placa en cada cuadro de scroll (medido en móvil). */
}
/* Mientras la placa entra "enfocándose" (main.js anima filter, opacity y transform), su propia capa deja que el
   compositor aplique el blur sin repintar; al terminar (.enfocado) la capa se suelta. marcas.js pone --cerca solo
   cuando la rejilla está cerca de la pantalla, para no tener esas capas en la GPU mientras se ve otra sección. */
.marcas--rejilla .marcas__lista--cerca li[data-enfoque]:not(.enfocado) { will-change: transform, filter, opacity; }
/* Gloss de la mitad superior (el guiño Aero) */
.marcas__lista li::before {
	content: "";
	position: absolute;
	inset: 1px 1px 50%;
	z-index: 1;
	border-radius: 21px 21px 45% 45% / 21px 21px 12px 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.14));
	opacity: 0.8;
	pointer-events: none;
}
/* Destello de "mica recién limpiada" que cruza la placa al pasar el puntero */
.marcas__lista li::after {
	content: "";
	position: absolute;
	inset: -20% auto -20% 0;
	z-index: 3;
	width: 34%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-160%) skewX(-16deg);
	pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.marcas__lista li { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
	.marcas__lista li:hover {
		transform: translateY(-3px);
		box-shadow:
			var(--brillo-vidrio),
			inset 0 -1px 0 rgba(127, 207, 255, 0.55),
			0 1px 2px rgba(10, 23, 51, 0.05),
			0 28px 48px -26px rgba(20, 60, 150, 0.5);
	}
	.marcas__lista li:hover::after { transform: translateX(420%) skewX(-16deg); transition: transform 0.9s var(--ease-in-out); }
}

/* Sin JS: el PNG blanco se vuelve oscuro con un filtro */
.marcas__lista img {
	position: relative;
	z-index: 2;
	width: auto;
	max-width: 62%;
	max-height: 40%;
	filter: brightness(0);
	opacity: 0.88;
}
/* Con JS: el logo es un bloque azul marino recortado con la forma del PNG; el <img> queda para su alt */
.marcas__logo {
	position: relative;
	z-index: 2;
	display: block;
	width: var(--ancho, 60%);
	aspect-ratio: var(--asp, 3);
	background: var(--texto);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.marcas__lista--mascara img:not(.marcas__armazon) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	opacity: 0;
}

/* Nombre de la silueta (visible en la rejilla con fotos; en la vista 3D la lista es solo para lectores de pantalla) */
.marcas__silueta {
	position: relative;
	z-index: 2;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--texto-2);
	text-align: center;
	text-wrap: balance;
}
.marcas__lista:not(.marcas__lista--armazones) .marcas__silueta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Rejilla con fotos de producto: logo arriba (en una franja fija, así las fotos quedan alineadas), la silueta de la
   marca y su nombre. La foto se multiplica con la placa: su blanco desaparece y queda el armazón con su sombra. */
.marcas__lista--armazones li {
	aspect-ratio: auto;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 3.1rem auto auto;
	align-content: center;
	gap: 6px;
	padding: 18px 14px 16px;
}
.marcas__lista--armazones .marcas__logo {
	width: calc(var(--ancho, 60%) * 0.72);
	max-height: 100%;
}
.marcas__lista .marcas__armazon {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	max-width: 300px;
	max-height: none;
	height: auto;
	aspect-ratio: 600 / 240;
	filter: none;
	opacity: 1;
	mix-blend-mode: multiply;
}

@media (max-width: 767px) {
	.marcas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.marcas__lista li { aspect-ratio: 1.6; border-radius: 18px; }
	.marcas__lista li::before { border-radius: 17px 17px 45% 45% / 17px 17px 10px 10px; }
	.marcas__lista--armazones li { aspect-ratio: auto; grid-template-rows: 2.4rem auto auto; gap: 4px; padding: 14px 8px 12px; }
	.marcas__lista--armazones .marcas__logo { width: calc(var(--ancho, 60%) * 0.8); }
	.marcas__silueta { font-size: 0.75rem; }
}

/* ---------- Vista 3D ------------------------------------------------------------------------------------------ */
.marcas--3d { --marcas-alto: clamp(400px, 37vw, 620px); }
.marcas--3d .marcas__escena {
	position: relative;
	height: var(--marcas-alto);
	margin-top: clamp(-20px, -1.5vw, 0px);
}
.marcas__lienzo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	touch-action: pan-y;
}
/* La lista sigue ahí para lectores de pantalla */
.marcas--3d .marcas__lista {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Mientras la escena llega (marcas.js: reservar3D) la sección ya mide lo mismo que con el lienzo: las placas de la
   lista esperan al centro del estudio (velo) y el renglón de los controles queda apartado (reserva); cuando el lienzo
   entra, las placas se funden con él. */
.marcas--3d.marcas--velo .marcas__lista {
	position: absolute !important;
	top: calc(var(--marcas-alto) / 2);
	left: 0;
	right: 0;
	width: min(100% - 2 * var(--gutter), 1060px);
	height: auto;
	margin: 0 auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	translate: 0 -50%;
	pointer-events: none;
}
.marcas--reserva .marcas__escenario { padding-bottom: calc(48px + clamp(4px, 1vw, 12px)); }

/* Controles: flechas de vidrio y la etiqueta con la marca al frente */
.marcas__controles {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(4px, 1vw, 12px);
	padding-inline: var(--gutter);
}
.marcas__flecha,
.marcas__etiqueta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 249, 255, 0.82));
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), inset 0 -1px 0 rgba(127, 207, 255, 0.4), var(--sombra-s);
	/* Sin backdrop-filter: debajo solo hay el blanco de la sección (el desenfoque no cambiaba nada visible) */
}
.marcas__flecha::before,
.marcas__etiqueta::before {
	content: "";
	position: absolute;
	inset: 1px 1px 50%;
	z-index: -1;
	border-radius: 999px 999px 40% 40% / 999px 999px 10px 10px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
	pointer-events: none;
}
.marcas__flecha {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: var(--texto);
	transition: transform 0.35s var(--ease-out), border-color 0.25s, color 0.25s, box-shadow 0.35s var(--ease-out);
}
.marcas__flecha:hover {
	color: var(--azul-marca);
	border-color: var(--borde-fuerte);
	transform: translateY(-2px);
	box-shadow: var(--brillo-vidrio), inset 0 -1px 0 rgba(127, 207, 255, 0.5), 0 10px 22px -12px rgba(20, 60, 150, 0.45);
}
.marcas__flecha:active { transform: scale(0.95); }
.marcas__flecha:focus-visible { border-radius: 50%; }
.marcas__etiqueta {
	display: grid;
	place-items: center;
	min-width: min(15rem, 52vw);
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--texto);
	white-space: nowrap;
}
.marcas__etiqueta { padding-block: 6px; line-height: 1.2; }
.marcas__etiqueta-texto { display: grid; justify-items: center; gap: 1px; }
.marcas__etiqueta-detalle {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--texto-2);
}

/* ---------- Invitación y CTA ------------------------------------------------------------------------------------ */
.marcas__pie {
	display: grid;
	justify-items: center;
	gap: 18px;
	margin-top: clamp(44px, 5.5vw, 72px);
	text-align: center;
}
.marcas__invitacion {
	max-width: 44ch;
	font-size: var(--t-entrada);
	color: var(--texto-2);
	line-height: 1.5;
}
.marcas__nota { max-width: 60ch; margin-top: 4px; }

@media (max-width: 767px) {
	.marcas__pie { margin-top: 40px; }
	.marcas__cta { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
}