/* ==========================================================================
   LIENZO DEL BANNER — estilos del SITIO
   --------------------------------------------------------------------------
   Se encola en wp_enqueue_scripts con prioridad 9999, igual que el resto del
   CSS propio, y solo en el catálogo cuando el banner es de tipo lienzo.

   TODO va anidado bajo .banner-lienzo. Las clases de la composición (.el,
   .escena, .el__txt) son cortas y genéricas porque vienen del prototipo:
   sueltas en el sitio chocarían con cualquier cosa. Adentro del contenedor
   no molestan a nadie.

   El editor tiene su propio archivo (css/lienzo-editor.css) y no comparte
   nada con este, a propósito: son dos contextos con reglas distintas, y la
   de prefers-reduced-motion es justamente una de ellas.

   Medidas: 500 de alto en escritorio, 280 en móvil, a todo el ancho de la
   pantalla. Las coordenadas de la composición van en % y el texto en cqw,
   así que la composición escala sola con el ancho del banner.
   ========================================================================== */

/* ==========================================================================
   GEOMETRÍA: por qué el alto no es un número fijo
   --------------------------------------------------------------------------
   Las coordenadas de la composición son porcentajes de las DOS dimensiones
   de la caja. Eso solo se sostiene si la caja conserva su proporción.

   Con alto fijo y ancho fluido no la conserva: 1440x500 es 2.88:1, pero
   1000x500 es 2:1 y 1920x500 es 3.84:1. En una imagen con la proporción
   bloqueada el ancho sale del porcentaje y el alto lo pone la foto, así que
   al ensancharse la pantalla la foto se pasa de los 500 px y se corta, y al
   angostarse se encoge y deja el hueco. La composición no escalaba: se
   deformaba, y solo coincidía con el editor en los tres anchos exactos que
   el editor sabe dibujar.

   Por eso el alto sigue al ancho, con techo y piso:

     clamp( 280px, 34.7222vw, 500px )     34.7222% = 500 / 1440

     - de 807 a 1440 px manda el valor del medio: la proporción es exacta y
       el banner se ve idéntico al editor, sin recorte ni franjas
     - arriba de 1440 el techo lo deja en 500
     - abajo de 807 el piso lo deja en 280

   En los dos extremos la caja ya no tiene la proporción del diseño, y de eso
   se ocupa .escena: conserva la proporción y se centra. Arriba de 1440 se
   recorta parejo arriba y abajo en vez de cortar solo el pie; abajo de 807
   sobra caja y quedan dos franjas del MISMO color de fondo de la
   diapositiva, así que no se ven.

   La caja hereda de .catalogo-banner el truco de 100vw + margen negativo
   para escaparse del contenedor (eso vive en style.css y no se toca). El
   video y el carrusel viejo siguen a pantalla completa; el lienzo, no.

   Gana por orden de carga, no por especificidad ni por !important: este
   archivo se encola en 9999 y style.css en 10.
   ========================================================================== */
.catalogo-banner--lienzo {
	height: clamp(280px, 34.7222vw, 500px);
	min-height: 0;
}

.banner-lienzo {
	position: relative;
	overflow: hidden;
	container-type: inline-size; /* el texto en cqw se mide contra este ancho */
}

/* Todas las diapositivas están en el DOM y superpuestas. Se muestra una sola
   y se cambia de clase: así la transición puede animar la composición entera
   sin tener que reconstruir nada.

   El centrado es lo que hace que el recorte y las franjas queden repartidos
   arriba y abajo en vez de acumularse en el pie. */
.banner-lienzo__diapo {
	position: absolute;
	inset: 0;
	background: var(--fondo-lienzo, #ffffff);
	display: none;
}

.banner-lienzo__diapo.act {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* La escena envuelve a los elementos de la diapositiva. Cumple dos funciones:

   1. Permite animar la composición ENTERA en cada cambio. Sin ella habría
      que animar elemento por elemento y las transiciones no irían
      sincronizadas.
   2. Es la que sostiene la proporción del diseño, pase lo que pase con la
      caja. Los porcentajes de los elementos se miden contra ella, no contra
      el banner: es la única superficie del sitio que tiene exactamente la
      misma forma que el lienzo del editor.

   flex-shrink en 0 para que el centrado no la achate cuando es más alta que
   la caja: ahí tiene que desbordar y recortarse, que es el efecto buscado. */
.banner-lienzo .escena {
	position: relative;
	width: 100%;
	aspect-ratio: 1440 / 500;
	flex: 0 0 auto;
}

.banner-lienzo .el {
	position: absolute;
}

.banner-lienzo .el__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Con la proporción bloqueada, el alto lo decide la imagen. Al soltarla,
   el marco manda y la foto se recorta en vez de deformarse: estirar una
   prenda para que entre en el hueco es peor que recortarla. */
.banner-lienzo .el--libre .el__img {
	height: 100%;
	object-fit: cover;
}

.banner-lienzo .el__txt {
	margin: 0;
	line-height: 1.2;
	word-break: break-word;
	/* El texto se guarda tal como se escribió, con sus saltos de línea. */
	white-space: pre-wrap;
}

/* ==========================================================================
   Transiciones
   ========================================================================== */

@keyframes tr-fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-izq { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
@keyframes tr-der { from { opacity: 0; transform: translateX(-6%); } to { opacity: 1; transform: none; } }
@keyframes tr-arriba { from { opacity: 0; transform: translateY(8%); } to { opacity: 1; transform: none; } }
@keyframes tr-abajo { from { opacity: 0; transform: translateY(-8%); } to { opacity: 1; transform: none; } }
@keyframes tr-acercar { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes tr-alejar { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes tr-barrido { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tr-persiana { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tr-desenfoque { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }

.banner-lienzo .escena--fundido { animation: tr-fundido .55s ease both; }
.banner-lienzo .escena--izq { animation: tr-izq .55s cubic-bezier(.22, .61, .36, 1) both; }
.banner-lienzo .escena--der { animation: tr-der .55s cubic-bezier(.22, .61, .36, 1) both; }
.banner-lienzo .escena--arriba { animation: tr-arriba .55s cubic-bezier(.22, .61, .36, 1) both; }
.banner-lienzo .escena--abajo { animation: tr-abajo .55s cubic-bezier(.22, .61, .36, 1) both; }
.banner-lienzo .escena--acercar { animation: tr-acercar .6s cubic-bezier(.22, .61, .36, 1) both; }
.banner-lienzo .escena--alejar { animation: tr-alejar .6s cubic-bezier(.22, .61, .36, 1) both; }
.banner-lienzo .escena--barrido { animation: tr-barrido .6s cubic-bezier(.65, 0, .35, 1) both; }
.banner-lienzo .escena--persiana { animation: tr-persiana .6s cubic-bezier(.65, 0, .35, 1) both; }
.banner-lienzo .escena--desenfoque { animation: tr-desenfoque .6s ease both; }

/* ==========================================================================
   Movimiento reducido
   --------------------------------------------------------------------------
   ACÁ SÍ, y solo acá. En el editor esta misma regla anulaba las diez
   transiciones sin dar ningún error: quien tiene activado "reducir
   movimiento" en su sistema no veía ningún efecto y el editor parecía roto.

   La preferencia se respeta en el sitio, que es donde el visitante está
   navegando; el que está configurando el efecto necesita verlo. Es el bloque
   exacto que dejó anotado el prototipo.

   Las diapositivas se siguen pasando: lo que se apaga es la animación, no la
   rotación. Sin esto, alguien con la preferencia activada vería una sola
   diapositiva para siempre.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.banner-lienzo .escena {
		animation: none !important;
	}
}

/* ==========================================================================
   Visibilidad por pantalla
   --------------------------------------------------------------------------
   Cada elemento puede estar en las tres pantallas, solo en escritorio o solo
   en móvil. Los dos casos acotados se resuelven acá y no en PHP: el mismo
   HTML sirve para las dos pantallas, así que la página se puede cachear
   entera sin que la caché sirva la versión equivocada a nadie.

   El corte es el mismo 600 px que usa el resto del banner. Los dos bloques
   son excluyentes (600 / 601) para que ningún ancho quede sin cubrir ni
   caiga en los dos.
   ========================================================================== */

@media (min-width: 601px) {
	.banner-lienzo .el--solo-movil {
		display: none;
	}
}

/* ==========================================================================
   Móvil
   --------------------------------------------------------------------------
   Misma lógica que arriba, pero contra la otra referencia: la vista móvil
   del editor mide 390 x 280, que es 71.7949% (280 / 390). No es la misma
   proporción que la de escritorio, y está bien que no lo sea: son dos
   composiciones distintas de la misma diapositiva, que es justamente para
   lo que existe la visibilidad por pantalla.

   El techo son los mismos 280 px, y no es casualidad: a 600 px de ancho la
   regla de arriba también da 280 (le pega el piso). Los dos lados del corte
   coinciden, así que al cruzar el breakpoint el banner no pega un salto de
   alto -- solo cambia qué elementos se ven.
   ========================================================================== */
@media (max-width: 600px) {
	.catalogo-banner--lienzo {
		height: clamp(230px, 71.7949vw, 280px);
		min-height: 0;
	}

	.banner-lienzo .escena {
		aspect-ratio: 390 / 280;
	}

	.banner-lienzo .el--solo-escritorio {
		display: none;
	}
}

/* ==========================================================================
   SELECTOR DE DIAPOSITIVAS
   --------------------------------------------------------------------------
   Una barra horizontal por diapositiva, debajo del banner: gris la que no
   está a la vista, blanca la que sí. Se hace clic y se va a esa.

   Vive FUERA de .banner-lienzo, apoyado en el fondo de la página, y no
   encima de la composición. Dos razones:

     - la barra activa es blanca, y sobre una diapositiva de fondo claro
       desaparecería; el fondo del sitio es #090909 siempre
     - .banner-lienzo tiene overflow:hidden y sus diapositivas son absolutas
       a inset:0, así que cualquier cosa adentro pelea con la composición

   Arranca oculto y lo muestra el JS con la clase 'listo': sin JS los
   botones no cambiarían nada y una fila de barras muertas es peor que
   ninguna. PHP ya lo imprime solo cuando hay dos o más diapositivas.

   El ancho de cada barra es fluido con techo y piso: con muchas
   diapositivas la fila no se pasa del ancho de la pantalla, y con dos o
   tres las barras no quedan de un largo ridículo.
   ========================================================================== */
.banner-lienzo__nav {
	display: none;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 20px 0;
}

.banner-lienzo__nav.listo {
	display: flex;
}

/* El relleno vertical es área de clic, no espacio muerto: la barra visible
   mide 2 px y sin esto habría que apuntarle a esos 2 px. La barra se pinta
   en el ::after justamente para poder agrandar el botón sin engordarla. */
.banner-lienzo__barra {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 10px 0;
	border: 0;
	background: none;
	width: clamp(28px, 5vw, 54px);
	line-height: 0;
	cursor: pointer;
}

.banner-lienzo__barra::after {
	content: "";
	display: block;
	height: 2px;
	background: rgba(255, 255, 255, .26);
	transition: background-color .3s ease;
}

.banner-lienzo__barra:hover::after {
	background: rgba(255, 255, 255, .6);
}

.banner-lienzo__barra.act::after,
.banner-lienzo__barra.act:hover::after {
	background: #ffffff;
}

/* Con :focus-visible y no :focus para que el contorno salga al recorrer con
   el teclado y no en cada clic con el mouse. El desfase lo separa de la
   barra, que es finita y se comería el contorno. */
.banner-lienzo__barra:focus-visible {
	outline: 1px solid #ffffff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.banner-lienzo__barra::after {
		transition: none;
	}
}

@media (max-width: 600px) {
	.banner-lienzo__nav {
		gap: 8px;
		padding: 14px 16px 0;
	}

	.banner-lienzo__barra {
		width: clamp(22px, 9vw, 40px);
	}
}