/* ==========================================================================
   Movimiento — Cecinas Serrot
   - Solo se anima transform, opacity, filter y clip-path (no ancho/alto).
   - Curvas propias: las de CSS ("ease", "ease-in") son demasiado blandas.
   - Interfaz: 150–300 ms. Lo que el cliente usa seguido, casi sin animación.
   - Presionar responde de inmediato (scale 0.97); salir es más rápido que entrar.
   - Hover solo con mouse real; con "reducir movimiento", sin desplazamientos.
   ========================================================================== */

:root {
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entradas y respuestas */
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* cosas que se mueven en pantalla */
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* panel lateral (curva tipo iOS) */
	--serrot-transicion: 160ms ease;                   /* cambios de color en hover */
}

/* --- 1. Todo lo que se presiona responde al dedo ---------------------------- */
#page-container a.button,
#page-container button.button,
.serrot-boton,
.wp-block-button__link,
#serrot-carrito a.button,
.serrot-carrito-seguir,
.serrot-cantidad-btn,
.serrot-tipo-opcion,
a.serrot-chip,
.serrot-cabecera-carrito,
.serrot-menu-boton,
.serrot-documento label.radio,
.serrot-opcion {
	transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	-webkit-tap-highlight-color: transparent;
}
#page-container a.button:active,
#page-container button.button:active,
.serrot-boton:active,
.wp-block-button__link:active,
#serrot-carrito a.button:active,
.serrot-carrito-seguir:active,
.serrot-tipo-opcion:active,
a.serrot-chip:active,
.serrot-cabecera-carrito:active,
.serrot-menu-boton:active,
.serrot-documento label.radio:active,
.serrot-opcion:active { transform: scale(0.97); }
.serrot-cantidad-btn:active { transform: scale(0.9); }

/* --- 2. Carrito lateral: curva de cajón, salida más rápida que la entrada --- */
.serrot-carrito-panel { transition: transform 200ms var(--ease-out); }
.serrot-carrito.is-abierto .serrot-carrito-panel { transition: transform 420ms var(--ease-drawer); }
.serrot-carrito-velo { transition: opacity 200ms ease; }
.serrot-carrito.is-abierto .serrot-carrito-velo { transition: opacity 300ms ease; }
/* Barra de despacho gratis: escalar, no cambiar el ancho (no recalcula la página) */
.serrot-barra span { width: 100% !important; transform-origin: left center; transform: scaleX(var(--avance, 0)); transition: transform 500ms var(--ease-out); }
/* Líneas del carrito: aparecen (no "saltan") al agregar */
.serrot-carrito-linea { transition: opacity 150ms ease; }
@starting-style { .serrot-carrito-linea { opacity: 0; } }

/* --- 3. Selector de presentación: el precio cambia con un fundido corto ---- */
.serrot-tipo-precio [data-campo],
.serrot-tipo-suelto { transition: filter 200ms ease, opacity 200ms ease; }
.serrot-tipo.is-cambiando .serrot-tipo-precio [data-campo],
.serrot-tipo.is-cambiando .serrot-tipo-suelto { filter: blur(2px); opacity: 0.4; }
.serrot-tipo-agregar { transition: transform 160ms var(--ease-out), background-color 160ms ease, filter 200ms ease; }
.serrot-tipo-agregar.is-agregado { background: var(--serrot-exito) !important; border-color: var(--serrot-exito) !important; }

/* --- 4. Hover: solo con mouse, sutil (se ve muchas veces al día) ---------- */
.serrot-longaniza-foto img,
.serrot-tipo-foto img,
.serrot-receta-tarjeta-foto img { transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.serrot-longaniza:hover .serrot-longaniza-foto img,
	.serrot-tipo:hover .serrot-tipo-foto img,
	.serrot-receta-tarjeta:hover .serrot-receta-tarjeta-foto img { transform: scale(1.03); }
}
@media not ((hover: hover) and (pointer: fine)) {
	.serrot-longaniza:hover .serrot-longaniza-foto img { transform: none; }
}

/* --- 5. Preguntas frecuentes: el "+" gira a "×" en vez de cambiar de signo -- */
.serrot-preguntas .wp-block-details summary::after { content: "+" !important; transition: transform 200ms var(--ease-out); }
.serrot-preguntas .wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg) !important; }
.serrot-preguntas .wp-block-details > *:not(summary) { animation: serrot-abre 220ms var(--ease-out); }
@keyframes serrot-abre { from { opacity: 0; transform: translateY(-4px); } }

/* --- 6. Portada (se ve una vez): entrada del hero ---------------------------- */
.serrot-hero .serrot-hero-foto img { animation: serrot-humo 900ms var(--ease-out) both; }
@keyframes serrot-humo { from { transform: scale(1.06); filter: blur(4px) brightness(0.75); } }
.js-mov .serrot-hero h1,
.js-mov .serrot-hero .wp-block-column:first-child > :not(h1) { animation: serrot-sube 600ms var(--ease-out) both; }
.js-mov .serrot-hero .wp-block-column:first-child > :nth-child(2) { animation-delay: 80ms; }
.js-mov .serrot-hero .wp-block-column:first-child > :nth-child(3) { animation-delay: 140ms; }
.js-mov .serrot-hero .wp-block-column:first-child > :nth-child(4) { animation-delay: 200ms; }
@keyframes serrot-sube { from { opacity: 0; transform: translateY(12px); } }
/* El calendario "cae" y queda clavado */
.js-mov .serrot-hero .serrot-calendario { animation: serrot-papel 700ms var(--ease-out) 250ms both; }
@keyframes serrot-papel { from { opacity: 0; transform: translateY(-16px) rotate(-5deg); } to { opacity: 1; transform: rotate(-1.5deg); } }

/* --- 7. Al bajar: tarjetas escalonadas y fotos que se descubren ------------- */
.js-mov [data-revelar] > * { opacity: 0; transform: translateY(10px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.js-mov [data-revelar].is-visible > * { opacity: 1; transform: none; }
.js-mov [data-revelar].is-visible > :nth-child(2) { transition-delay: 60ms; }
.js-mov [data-revelar].is-visible > :nth-child(3) { transition-delay: 120ms; }
.js-mov [data-revelar].is-visible > :nth-child(4) { transition-delay: 180ms; }
.js-mov [data-revelar].is-visible > :nth-child(5) { transition-delay: 240ms; }
.js-mov [data-asentar] { overflow: hidden; }
.js-mov [data-asentar] img { opacity: 0; transform: scale(1.06); transition: opacity 700ms var(--ease-out), transform 1100ms var(--ease-out); }
.js-mov [data-asentar].is-visible img { opacity: 1; transform: none; }

/* --- 8. Superficies del navegador ---------------------------------------- */
html { scroll-behavior: smooth; }
:focus-visible { transition: outline-offset 120ms var(--ease-out); }

/* --- Reducir movimiento: sin desplazamientos; quedan fundidos y colores ---- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; }
	.js-mov [data-revelar] > *, .js-mov [data-asentar] img { transform: none !important; transition: opacity 200ms ease !important; }
	#page-container a.button:active, .serrot-boton:active, .wp-block-button__link:active, .serrot-tipo-opcion:active { transform: none; }
	.serrot-carrito-panel, .serrot-carrito.is-abierto .serrot-carrito-panel { transition: opacity 200ms ease; }
}

/* Foto de la tarjeta: fundido al cambiar de presentación */
.serrot-tipo-foto img { transition: transform 300ms var(--ease-out), opacity 150ms ease, filter 150ms ease; }
.serrot-tipo-foto img.is-cambiando { opacity: 0.2; filter: blur(3px); }