/*
 * Ilustraciones animadas de los servicios (assets/ilustraciones/*.svg).
 *
 * Sustituyen a las fotos de cada servicio en el acordeón, las listas y la
 * ficha. Son SVG en línea: el movimiento vive aquí. Solo se mueven cuando
 * se ven (el JS les pone .is-viva) y se quedan quietas con «movimiento
 * reducido».
 */

.csw-ilus {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #141414;
}

.csw-ilus svg {
	display: block;
	width: 100%;
	height: 100%;
}

.csw-ilus [class*="i-"] {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

/* Quietas mientras no se ven (con !important porque cada animación usa el
   atajo "animation", que las pondría en marcha). */
.csw-ilus:not(.is-viva) * {
	animation-play-state: paused !important;
}

/* --- Piezas comunes --------------------------------------------------- */
.csw-ilus .i-rec { animation: ci-parpadeo 1.1s steps(2, jump-none) infinite; }
.csw-ilus .i-luz { animation: ci-luz 3.2s ease-in-out infinite; }
.csw-ilus .i-brillo { transform-origin: 50% 50%; animation: ci-brillo 2.4s ease-in-out infinite; }
.csw-ilus .i-brillo2 { animation-delay: -.8s; }
.csw-ilus .i-brillo3 { animation-delay: -1.6s; }
.csw-ilus .i-cabeza { transform-origin: 50% 90%; animation: ci-cabeza 4s ease-in-out infinite; }

/* --- 1. Producción audiovisual ---------------------------------------- */
.csw-ilus--produccion-audiovisual .i-camara { transform-origin: 30% 100%; animation: ci-paneo 4.5s ease-in-out infinite alternate; }
.csw-ilus--produccion-audiovisual .i-haz { animation: ci-haz 3.2s ease-in-out infinite; }
.csw-ilus--produccion-audiovisual .i-encuadre { animation: ci-encuadre 2.2s ease-in-out infinite; }
.csw-ilus--produccion-audiovisual .i-claqueta { transform-origin: 0% 100%; animation: ci-claqueta 2.8s ease-in-out infinite; }

/* --- 2. Spot publicitario --------------------------------------------- */
.csw-ilus--spot-publicitario .i-rayos { animation: ci-gira 14s linear infinite; }
.csw-ilus--spot-publicitario .i-producto { animation: ci-bote 1.8s cubic-bezier(.3, 0, .3, 1) infinite; }
.csw-ilus--spot-publicitario .i-sombra { animation: ci-sombra 1.8s cubic-bezier(.3, 0, .3, 1) infinite; }
.csw-ilus--spot-publicitario .i-eslogan { transform-origin: 0% 50%; animation: ci-entra-x 4s cubic-bezier(.16, 1, .3, 1) infinite; }
.csw-ilus--spot-publicitario .i-progreso { transform-origin: 0% 50%; animation: ci-progreso 6s linear infinite; }
.csw-ilus--spot-publicitario .i-play { animation: ci-latido 1.6s ease-in-out infinite; }
.csw-ilus--spot-publicitario .i-onda1 { animation: ci-onda 1.4s ease-out infinite; }
.csw-ilus--spot-publicitario .i-onda2 { animation: ci-onda 1.4s ease-out .35s infinite; }

/* --- 3. Vídeo corporativo --------------------------------------------- */
.csw-ilus--video-corporativo .i-asiente { transform-origin: 50% 100%; animation: ci-asiente 3s ease-in-out infinite; }
.csw-ilus--video-corporativo .i-pertiga { transform-origin: 0% 0%; animation: ci-pertiga 5s ease-in-out infinite alternate; }
.csw-ilus--video-corporativo .i-rotulo { transform-origin: 0% 50%; animation: ci-rotulo 5s cubic-bezier(.16, 1, .3, 1) infinite; }
.csw-ilus--video-corporativo .i-planta { transform-origin: 50% 100%; animation: ci-planta 6s ease-in-out infinite alternate; }

/* --- 4. Contenido de marca -------------------------------------------- */
.csw-ilus--contenido-de-marca .i-feed { animation: ci-feed 6s cubic-bezier(.7, 0, .3, 1) infinite; }
.csw-ilus--contenido-de-marca .i-corazon { opacity: 0; animation: ci-corazon 3s ease-out infinite; }
.csw-ilus--contenido-de-marca .i-corazon1 { animation-delay: 1s; }
.csw-ilus--contenido-de-marca .i-corazon2 { animation-delay: 2s; }
.csw-ilus--contenido-de-marca .i-chip { animation: ci-chip 4.5s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.csw-ilus--contenido-de-marca .i-chip2 { animation-delay: 1.5s; }
.csw-ilus--contenido-de-marca .i-chip3 { animation-delay: 3s; }

/* --- 5. Motion graphics ----------------------------------------------- */
.csw-ilus--motion-graphics .i-bola { animation: ci-bola 2.4s linear infinite; }
.csw-ilus--motion-graphics .i-gira { animation: ci-gira 5s cubic-bezier(.7, 0, .3, 1) infinite; }
.csw-ilus--motion-graphics .i-curva { stroke-dasharray: 160; animation: ci-dibuja 2.4s ease-in-out infinite; }
.csw-ilus--motion-graphics .i-cabezal { animation: ci-cabezal 2.4s linear infinite; }

/* --- 6. Fotografía ---------------------------------------------------- */
.csw-ilus--fotografia .i-camarafoto { animation: ci-disparo 2.6s ease-in-out infinite; }
.csw-ilus--fotografia .i-flashhaz { animation: ci-flash 2.6s ease-out infinite; }
.csw-ilus--fotografia .i-flashbrillo { animation: ci-flashbrillo 2.6s ease-out infinite; }
.csw-ilus--fotografia .i-flashluz { animation: ci-flashluz 2.6s ease-out infinite; }
.csw-ilus--fotografia .i-polaroid { animation: ci-polaroid 2.6s cubic-bezier(.16, 1, .3, 1) infinite; }

/* --- 7. Branding ------------------------------------------------------ */
.csw-ilus--branding .i-guia { stroke-dashoffset: 0; animation: ci-guia 12s linear infinite; }
.csw-ilus--branding .i-guia2 { animation-direction: reverse; }
.csw-ilus--branding .i-aspa { transform-origin: 0% 100%; animation: ci-aspa 5s cubic-bezier(.16, 1, .3, 1) infinite; }
.csw-ilus--branding .i-aspa1 { animation-delay: .12s; }
.csw-ilus--branding .i-aspa2 { animation-delay: .24s; }
.csw-ilus--branding .i-aspa3 { animation-delay: .36s; }
.csw-ilus--branding .i-aspa4 { animation-delay: .48s; }
.csw-ilus--branding .i-aspa5 { animation-delay: .6s; }
.csw-ilus--branding .i-anillo { stroke-dasharray: 520; animation: ci-anillo 5s ease-in-out infinite; }
.csw-ilus--branding .i-centro { animation: ci-latido 2.5s ease-in-out infinite; }
.csw-ilus--branding .i-muestra { transform-origin: 50% 100%; animation: ci-abanico 5s cubic-bezier(.16, 1, .3, 1) infinite; }
.csw-ilus--branding .i-muestra0 { --giro: -36deg; }
.csw-ilus--branding .i-muestra1 { --giro: -12deg; }
.csw-ilus--branding .i-muestra2 { --giro: 12deg; }
.csw-ilus--branding .i-muestra3 { --giro: 36deg; }

/* --- 8. Diseño gráfico ------------------------------------------------ */
.csw-ilus--diseno-grafico .i-circulo { animation: ci-entra-arriba 5s cubic-bezier(.16, 1, .3, 1) infinite; }
.csw-ilus--diseno-grafico .i-bloque { animation: ci-entra-izq 5s cubic-bezier(.16, 1, .3, 1) .2s infinite; }
.csw-ilus--diseno-grafico .i-titulo1,
.csw-ilus--diseno-grafico .i-titulo2,
.csw-ilus--diseno-grafico .i-titulo3 { transform-origin: 0% 50%; animation: ci-entra-x 5s cubic-bezier(.16, 1, .3, 1) .4s infinite; }
.csw-ilus--diseno-grafico .i-titulo2 { animation-delay: .55s; }
.csw-ilus--diseno-grafico .i-titulo3 { animation-delay: .7s; }
.csw-ilus--diseno-grafico .i-trazo { stroke-dasharray: 260; animation: ci-trazo 4s ease-in-out infinite; }
.csw-ilus--diseno-grafico .i-pluma { animation: ci-pluma 4s ease-in-out infinite; }
.csw-ilus--diseno-grafico .i-color { animation: ci-latido 2s ease-in-out infinite; }
.csw-ilus--diseno-grafico .i-color1 { animation-delay: .25s; }
.csw-ilus--diseno-grafico .i-color2 { animation-delay: .5s; }
.csw-ilus--diseno-grafico .i-color3 { animation-delay: .75s; }

/* --- 9. Redes sociales ------------------------------------------------ */
.csw-ilus--redes-sociales .i-nuevo { animation: ci-nuevo 4.5s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.csw-ilus--redes-sociales .i-notif { animation: ci-notif 4.5s cubic-bezier(.16, 1, .3, 1) infinite; }
.csw-ilus--redes-sociales .i-notif2 { animation-delay: .5s; }
.csw-ilus--redes-sociales .i-notif3 { animation-delay: 1s; }
.csw-ilus--redes-sociales .i-barra { transform-origin: 50% 100%; animation: ci-barra 4.5s cubic-bezier(.16, 1, .3, 1) infinite; }
.csw-ilus--redes-sociales .i-barra1 { animation-delay: .1s; }
.csw-ilus--redes-sociales .i-barra2 { animation-delay: .2s; }
.csw-ilus--redes-sociales .i-barra3 { animation-delay: .3s; }
.csw-ilus--redes-sociales .i-barra4 { animation-delay: .4s; }
.csw-ilus--redes-sociales .i-linea { stroke-dasharray: 120; animation: ci-dibuja 4.5s ease-in-out infinite; }

/* --- 10. Diseño web --------------------------------------------------- */
.csw-ilus--diseno-web .i-web1 { animation: ci-entra-arriba 6s cubic-bezier(.16, 1, .3, 1) infinite; }
.csw-ilus--diseno-web .i-web2 { animation: ci-aparece 6s cubic-bezier(.16, 1, .3, 1) .25s infinite; }
.csw-ilus--diseno-web .i-web3 { animation: ci-aparece 6s cubic-bezier(.16, 1, .3, 1) .4s infinite; }
.csw-ilus--diseno-web .i-web4 { animation: ci-aparece 6s cubic-bezier(.16, 1, .3, 1) .55s infinite; }
.csw-ilus--diseno-web .i-cursor { animation: ci-cursor 6s ease-in-out infinite; }
.csw-ilus--diseno-web .i-pulso { opacity: 0; animation: ci-pulso 6s ease-out infinite; }
.csw-ilus--diseno-web .i-boton { animation: ci-boton 6s ease-out infinite; }
.csw-ilus--diseno-web .i-movil { animation: ci-movil 6s cubic-bezier(.7, 0, .3, 1) infinite; }
.csw-ilus--diseno-web .i-codigo { animation: ci-flota 3s ease-in-out infinite alternate; }

/* --- Fotogramas ------------------------------------------------------- */
@keyframes ci-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes ci-luz { 0%, 100% { opacity: 1; } 48% { opacity: .92; } 50% { opacity: .78; } 52% { opacity: .95; } }
@keyframes ci-brillo { 0%, 100% { transform: scale(.4) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes ci-cabeza { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes ci-paneo { from { transform: rotate(-4deg); } to { transform: rotate(3deg); } }
@keyframes ci-haz { 0%, 100% { opacity: .05; } 50% { opacity: .1; } }
@keyframes ci-encuadre { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@keyframes ci-claqueta { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-24deg); } 80% { transform: rotate(0); } }
@keyframes ci-gira { to { transform: rotate(360deg); } }
@keyframes ci-bote { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-14px) scale(.98, 1.02); } 90% { transform: translateY(0) scale(1.04, .96); } }
@keyframes ci-sombra { 0%, 100% { transform: scale(1); opacity: .3; } 45% { transform: scale(.75); opacity: .15; } }
@keyframes ci-entra-x { 0% { transform: scaleX(0); } 20%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ci-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ci-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ci-onda { 0% { opacity: 0; transform: translateX(-4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(6px); } }
@keyframes ci-asiente { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-3deg); } }
@keyframes ci-pertiga { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes ci-rotulo { 0% { transform: scaleX(0); } 15%, 80% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes ci-planta { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes ci-feed { 0%, 22% { transform: translateY(0); } 33%, 55% { transform: translateY(-104px); } 66%, 88% { transform: translateY(-208px); } 100% { transform: translateY(-208px); } }
@keyframes ci-corazon { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-6px) scale(1.1); } 100% { opacity: 0; transform: translateY(-60px) scale(.9); } }
@keyframes ci-chip { 0% { transform: scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 80%, 100% { transform: scale(.8); opacity: 0; } }
@keyframes ci-bola {
	0% { transform: translate(0, 0) scale(1.15, .85); }
	12% { transform: translate(22px, -58px) scale(.92, 1.08); }
	25% { transform: translate(42px, -86px) scale(1, 1); }
	38% { transform: translate(62px, -58px) scale(.92, 1.08); }
	50% { transform: translate(80px, 0) scale(1.18, .82); }
	62% { transform: translate(98px, -36px) scale(.94, 1.06); }
	75% { transform: translate(114px, -52px) scale(1, 1); }
	88% { transform: translate(128px, -30px) scale(.95, 1.05); }
	100% { transform: translate(138px, 0) scale(1.15, .85); }
}
@keyframes ci-dibuja { 0% { stroke-dashoffset: 160; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: .3; } }
@keyframes ci-cabezal { from { transform: translateX(0); } to { transform: translateX(240px); } }
@keyframes ci-disparo { 0%, 58%, 100% { transform: translateY(0); } 62% { transform: translateY(2px); } 66% { transform: translateY(0); } }
@keyframes ci-flash { 0%, 60% { opacity: 0; } 63% { opacity: .35; } 80%, 100% { opacity: 0; } }
@keyframes ci-flashbrillo { 0%, 60% { opacity: 0; transform: scale(.3); } 64% { opacity: 1; transform: scale(1.4) rotate(45deg); } 82%, 100% { opacity: 0; transform: scale(1.6) rotate(90deg); } }
@keyframes ci-flashluz { 0%, 60% { fill: #efeeea; } 63% { fill: #ffffff; } 80%, 100% { fill: #efeeea; } }
@keyframes ci-polaroid { 0%, 64% { opacity: 0; transform: translateY(24px) rotate(-6deg); } 76%, 94% { opacity: 1; transform: translateY(0) rotate(-3deg); } 100% { opacity: 0; transform: translateY(-6px) rotate(-3deg); } }
@keyframes ci-guia { to { stroke-dashoffset: -160; } }
@keyframes ci-aspa { 0% { transform: rotate(-70deg) scale(.6); opacity: 0; } 18%, 82% { transform: rotate(0) scale(1); opacity: 1; } 100% { transform: rotate(0) scale(1); opacity: 0; } }
@keyframes ci-anillo { 0%, 12% { stroke-dashoffset: 520; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ci-abanico { 0% { transform: rotate(0); } 18%, 80% { transform: rotate(var(--giro, 0deg)); } 100% { transform: rotate(0); } }
@keyframes ci-entra-arriba { 0% { transform: translateY(-40px); opacity: 0; } 14%, 84% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes ci-entra-izq { 0% { transform: translateX(-80px); } 14%, 84% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes ci-trazo { 0% { stroke-dashoffset: 260; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ci-pluma {
	0% { transform: translate(244px, 250px); }
	20% { transform: translate(262px, 210px); }
	40% { transform: translate(298px, 196px); }
	60%, 85% { transform: translate(336px, 120px); }
	100% { transform: translate(244px, 250px); }
}
@keyframes ci-nuevo { 0%, 10% { transform: scale(0); } 24%, 90% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes ci-notif { 0% { transform: translateX(160px); opacity: 0; } 14%, 82% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes ci-barra { 0% { transform: scaleY(0); } 22%, 86% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: .4; } }
@keyframes ci-aparece { 0% { transform: translateY(18px); opacity: 0; } 14%, 86% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes ci-cursor {
	0% { transform: translate(300px, 260px); }
	30% { transform: translate(100px, 156px); }
	34% { transform: translate(100px, 158px) scale(.9); }
	38% { transform: translate(100px, 156px); }
	70% { transform: translate(240px, 236px); }
	100% { transform: translate(300px, 260px); }
}
@keyframes ci-pulso { 0%, 33% { opacity: 0; transform: scale(.3); } 36% { opacity: 1; } 48%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes ci-boton { 0%, 33% { transform: scale(1); } 36% { transform: scale(.92); } 42%, 100% { transform: scale(1); } }
@keyframes ci-movil { 0%, 30% { transform: translateY(0); } 50%, 80% { transform: translateY(-44px); } 100% { transform: translateY(0); } }
@keyframes ci-flota { from { transform: translateY(0); } to { transform: translateY(-6px); } }

/* Movimiento reducido: el dibujo completo y quieto. */
@media (prefers-reduced-motion: reduce) {
	.csw-ilus * {
		animation: none !important;
	}

	.csw-ilus .i-corazon,
	.csw-ilus .i-polaroid,
	.csw-ilus .i-pulso {
		opacity: 1;
	}
}

/* En las filas de Servicios la ilustración asoma junto al cursor: solo se
   mueve mientras el ratón está sobre esa fila. */
.csw-filas__enlace:not(:hover):not(:focus-visible) .csw-ilus * {
	animation-play-state: paused !important;
}

/* En la ficha, la ilustración ocupa el hueco de la foto a toda altura. */
.csw-ilus-ficha {
	margin: 0;
	overflow: hidden;
}

.csw-ilus-ficha .csw-ilus {
	height: 100%;
}