/* Los Diaz · movimiento.css — capa de movimiento de todo el sitio.
   Solo transform, opacity y clip-path (compositor). Todo vive dentro de
   prefers-reduced-motion: no-preference: quien pide menos movimiento ve el sitio quieto.

   - Revelado al hacer scroll: main.js marca con .cc-revelar lo que está bajo el pliegue
     y le agrega .is-visible al entrar en pantalla (--cc-i = orden del escalonado).
     Lo que ya se ve al cargar no se oculta: así no hay parpadeo ni se retrasa el LCP.
   - Son animaciones con relleno "backwards" y no transiciones: al terminar no fijan
     transform, así el hover de las tarjetas sigue respondiendo sin retraso.
   - Respaldo: si el JS no llega a marcar .is-visible, el contenido aparece a los 3 s. */

:root {
	--cc-curva-suave: cubic-bezier(0.16, 1, 0.3, 1);
	--cc-duracion-lenta: 800ms;
	--cc-escalon: 90ms;
	--cc-sombra-tarjeta: 0 22px 40px -24px rgb(77 58 44 / 0.45);
}

@keyframes cc-revelar {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes cc-revelar-corto {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes cc-cortina {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0); }
}

@keyframes cc-asentar {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}

@keyframes cc-pop {
	0% { transform: scale(0.6); opacity: 0; }
	60% { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); }
}

@keyframes cc-rebote {
	0%, 100% { transform: scale(1); }
	35% { transform: scale(1.25) rotate(-8deg); }
	65% { transform: scale(0.95) rotate(4deg); }
}

@keyframes cc-mostrar {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* ---- Revelado al hacer scroll ------------------------------------------------ */
	.cc-js .cc-revelar:not(.is-visible) {
		opacity: 0;
		animation: cc-mostrar 0s 3s forwards; /* respaldo */
	}

	.cc-revelar.is-visible {
		animation: cc-revelar var(--cc-duracion-lenta) var(--cc-curva-suave) backwards;
		animation-delay: calc(var(--cc-i, 0) * var(--cc-escalon));
	}

	/* Foto de "Nosotros": se descubre de arriba abajo y la imagen se asienta. */
	.cc-revelar--cortina.is-visible {
		animation: none;
	}

	#page-container #et-boc .cc-revelar--cortina.is-visible .cc-nosotros-foto {
		animation: cc-cortina 1.2s var(--cc-curva-suave) backwards;
	}

	#page-container #et-boc .cc-revelar--cortina.is-visible .cc-nosotros-foto img {
		animation: cc-asentar 1.6s var(--cc-curva-suave) backwards;
	}

	#page-container #et-boc .cc-revelar--cortina.is-visible .cc-nosotros-leyenda {
		animation: cc-revelar var(--cc-duracion-lenta) var(--cc-curva-suave) 600ms backwards;
	}

	/* ---- Entrada al cargar (lo que está sobre el pliegue, sin JS) ------------------ */
	#page-container #et-boc .cc-cabecera-pagina-texto,
	#page-container #et-boc .cc-catalogo-cabecera .et_pb_column > *,
	#page-container #et-boc .cc-ficha-info > .et_pb_module {
		animation: cc-revelar var(--cc-duracion-lenta) var(--cc-curva-suave) backwards;
	}

	#page-container #et-boc .cc-catalogo-cabecera .et_pb_column > :nth-child(2),
	#page-container #et-boc .cc-ficha-info > .et_pb_module:nth-child(2) { animation-delay: 60ms; }
	#page-container #et-boc .cc-catalogo-cabecera .et_pb_column > :nth-child(3),
	#page-container #et-boc .cc-ficha-info > .et_pb_module:nth-child(3) { animation-delay: 120ms; }
	#page-container #et-boc .cc-ficha-info > .et_pb_module:nth-child(4) { animation-delay: 180ms; }
	#page-container #et-boc .cc-ficha-info > .et_pb_module:nth-child(5) { animation-delay: 240ms; }
	#page-container #et-boc .cc-ficha-info > .et_pb_module:nth-child(n + 6) { animation-delay: 300ms; }

	/* ---- Tarjetas de producto: la foto se acerca apenas -------------------------- */
	#page-container #et-boc .cc-productos li.product .et_shop_image img {
		transition: transform 900ms var(--cc-curva-suave);
	}

	#page-container #et-boc .cc-productos li.product:hover .et_shop_image img {
		transform: scale(1.05);
	}

	/* ---- Header: sombra al bajar y subrayado animado en el menú ------------------- */
	.et-l--header::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 18px;
		background: linear-gradient(rgb(77 58 44 / 0.12), transparent);
		opacity: 0;
		pointer-events: none;
		content: "";
		transform: translateY(100%);
		transition: opacity 300ms var(--cc-curva);
	}

	.et-l--header.is-scrolled::after {
		opacity: 1;
	}

	#page-container #et-boc .cc-menu .et-menu > li > a {
		position: relative;
	}

	#page-container #et-boc .cc-menu .et-menu > li > a::before {
		position: absolute;
		right: 0;
		bottom: -1px;
		left: 0;
		height: 1px;
		background-color: currentColor;
		content: "";
		transform: scaleX(0);
		transition: transform 350ms var(--cc-curva-suave);
	}

	#page-container #et-boc .cc-menu .et-menu > li > a:hover::before {
		transform: scaleX(1);
	}

	/* Carrito: rebota cuando cambia la cantidad (main.js agrega .cc-rebote). */
	#page-container #et-boc .cc-icono-btn.cc-rebote {
		animation: cc-rebote 600ms var(--cc-curva-suave);
	}

	/* ---- Ficha de producto -------------------------------------------------------- */
	/* Línea y precio del formato: WooCommerce los vuelve a pintar en cada cambio. */
	#page-container #et-boc .cc-ficha-comprar .woocommerce-variation-description,
	#page-container #et-boc .cc-ficha-comprar .woocommerce-variation-price {
		animation: cc-revelar-corto 400ms var(--cc-curva-suave) backwards;
	}

	#page-container #et-boc .cc-ficha-comprar .woocommerce-variation-price {
		animation-delay: 60ms;
	}

	#page-container #et-boc .cc-variante {
		transition:
			border-color var(--cc-duracion) var(--cc-curva),
			background-color var(--cc-duracion) var(--cc-curva),
			color var(--cc-duracion) var(--cc-curva),
			transform 250ms var(--cc-curva-suave);
	}

	#page-container #et-boc .cc-variante:hover:not(:disabled) {
		transform: translateY(-2px);
	}

	#page-container #et-boc .cc-variante:active:not(:disabled) {
		transform: scale(0.97);
	}

	/* Galería: miniaturas que se encienden al pasar. */
	#page-container #et-boc .cc-ficha-imagenes .flex-control-thumbs img {
		transition: opacity 300ms var(--cc-curva), transform 400ms var(--cc-curva-suave);
	}

	#page-container #et-boc .cc-ficha-imagenes .flex-control-thumbs img:hover {
		transform: translateY(-2px);
	}

	/* Acordeón: el contenido se despliega y las notas entran una tras otra. */
	.cc-acordeon-item[open] > .cc-acordeon-cuerpo {
		animation: cc-revelar-corto 450ms var(--cc-curva-suave) backwards;
	}

	.cc-acordeon-item[open] .cc-nota {
		animation: cc-revelar-corto 500ms var(--cc-curva-suave) backwards;
		animation-delay: calc(var(--cc-i, 0) * 80ms + 80ms);
	}

	.cc-acordeon-item[open] .cc-nota-icono {
		animation: cc-pop 550ms var(--cc-curva-suave) backwards;
		animation-delay: calc(var(--cc-i, 0) * 80ms + 140ms);
	}

	.cc-nota:nth-child(2) { --cc-i: 1; }
	.cc-nota:nth-child(3) { --cc-i: 2; }
	.cc-nota:nth-child(n + 4) { --cc-i: 3; }

	/* Chips del filtro de categorías y flechas de carrusel: leve elevación. */
	#page-container #et-boc a.cc-chip {
		transition:
			border-color var(--cc-duracion) var(--cc-curva),
			background-color var(--cc-duracion) var(--cc-curva),
			color var(--cc-duracion) var(--cc-curva),
			transform 300ms var(--cc-curva-suave);
	}

	#page-container #et-boc a.cc-chip:hover {
		transform: translateY(-2px);
	}
}