/* Películas SVG del taller (prefijo cl-). Una línea de tiempo CSS por película; films.js hace de director: una sola corre a la vez. */

.cl-film {
  --cl-ink: var(--ink, #05070b);
  --cl-blue: var(--blue, #1f64ff);
  --cl-paper: var(--paper, #f4f6f8);
  --cl-muted: var(--muted-dark, #576273);
  --cl-green: var(--green, #25d366);
  --cl-line: #d9e0ea;
  --cl-active: var(--brand-ink, #1D4FD8);
  --cl-active-bg: #eaf1ff;
  --cl-mono: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --cl-ui: var(--body, "Manrope", Arial, sans-serif);
  --cl-ease: cubic-bezier(.25, 1, .5, 1);
  position: relative;
  margin: 0 0 clamp(28px, 4vw, 48px);
  padding: clamp(12px, 1.6vw, 18px);
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11, 14, 19, 0.04), 0 14px 36px rgba(11, 14, 19, 0.06);
}

.cl-film svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: linear-gradient(180deg, #eef3fb 0%, #f8fafc 70%);
}

.cl-film svg * {
  transform-box: fill-box;
}

/* el texto de los casos y la tira del carrete viven fuera de .cl-film: mismo azul de marca */
.cl-cases,
.cl-reel-nav {
  --cl-active: var(--brand-ink, #1D4FD8);
  --cl-active-bg: #eaf1ff;
}

/* clon congelado del fotograma anterior: se desvanece encima en saltos de capítulo y en la vuelta del bucle */
.cl-film svg.cl-ghost {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
}

/* ---------- controles y subtítulos (texto HTML: se indexa) ---------- */

.cl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}

.cl-steps {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 12px 14px 14px;
  overflow: hidden;
  color: var(--cl-muted);
  font: inherit;
  text-align: left;
  background: var(--cl-paper);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 200ms var(--cl-ease), color 200ms var(--cl-ease), border-color 200ms var(--cl-ease);
}

.cl-step strong {
  color: var(--cl-ink);
  font-family: var(--cl-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.cl-step span {
  font-size: 14px;
  line-height: 1.45;
}

.cl-step b {
  color: var(--cl-muted);
  font-family: var(--cl-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.cl-step::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--cl-active);
  transform: scaleX(0);
  transform-origin: left;
}

.cl-step:hover {
  border-color: var(--cl-line);
}

.cl-step[aria-current="step"],
.cl-step[aria-pressed="true"] {
  background: var(--cl-active-bg);
  border-color: rgba(29, 79, 216, 0.28);
}

.cl-step[aria-current="step"] b,
.cl-step[aria-pressed="true"] b {
  color: var(--cl-active);
}

.cl-step[aria-current="step"]::after {
  transform: scaleX(var(--cl-p, 0));
}

.cl-step:focus-visible,
.cl-play:focus-visible,
.cl-chip:focus-visible,
.cl-reel-card:focus-visible,
.cl-reel-arrow:focus-visible,
.cl-case-cta:focus-visible {
  outline: 3px solid var(--cl-active, #1D4FD8);
  outline-offset: 2px;
}

/* proceso con JS: stepper compacto (número + título) y una sola frase, la del capítulo activo */
.cl-main.cl-js .cl-steps {
  gap: 6px;
}

.cl-main.cl-js .cl-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 48px;
  padding: 12px 12px 14px;
}

.cl-main.cl-js .cl-step span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cl-say {
  flex: 1 0 100%;
  order: 3;
  margin: 2px 0 0;
  min-height: 3.2em;
  color: var(--cl-ink);
  font-size: 16px;
  line-height: 1.6;
}

.cl-say strong {
  display: none;
  margin-right: 6px;
  color: var(--cl-active);
}

.cl-play {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  color: #fff;
  background: var(--cl-ink);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 200ms var(--cl-ease);
}

.cl-play:hover {
  background: var(--cl-active);
}

.cl-play svg {
  width: 18px;
  height: 18px;
  background: none;
  border-radius: 0;
}

.cl-play .cl-i-play,
.cl-play[data-state="paused"] .cl-i-pause {
  display: none;
}

.cl-play[data-state="paused"] .cl-i-play {
  display: block;
}

.cl-film:not(.cl-js) .cl-play {
  display: none;
}

/* chips de capítulo de los casos */
.cl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-chip {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  padding: 7px 12px;
  color: var(--cl-muted);
  font-family: var(--cl-ui);
  background: var(--cl-paper);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 200ms var(--cl-ease), color 200ms var(--cl-ease), border-color 200ms var(--cl-ease);
}

.cl-chip:hover {
  border-color: var(--cl-line);
}

.cl-chip::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--cl-active);
  transform: scaleX(0);
  transform-origin: left;
}

.cl-chip[aria-current="step"],
.cl-chip[aria-pressed="true"] {
  color: var(--cl-active);
  background: var(--cl-active-bg);
  border-color: rgba(29, 79, 216, 0.28);
}

.cl-chip[aria-current="step"]::after {
  transform: scaleX(var(--cl-p, 0));
}

/* ---------- sección de casos (sin JS: rejilla de 10) ---------- */

.cl-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

.cl-case {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.cl-case .cl-film {
  margin: 0;
}

.cl-case .cl-bar {
  justify-content: space-between;
  align-items: center;
}

.cl-case-tag {
  color: var(--cl-active);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cl-case h3 {
  margin: 6px 0 8px;
  font-family: var(--body, sans-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.cl-case p {
  margin: 0;
  color: var(--muted-dark, #576273);
}

.cl-case ol {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--ink, #05070b);
}

.cl-case ol li::marker {
  color: var(--cl-active);
  font-weight: 800;
}

.cl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-tags span {
  padding: 4px 10px;
  color: var(--muted-dark, #576273);
  background: #fff;
  border: 1px solid #d9e0ea;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- carrete de casos (films.js): uno destacado 7/5, tira de títulos con scroll-snap ---------- */

.cl-reel {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.cl-reel > .cl-case {
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 52px);
}

/* todos los casos comparten la celda: el escenario toma la altura del más alto y nada salta al cambiar */
.cl-reel > .cl-case:not(.is-featured):not(.is-leaving) {
  visibility: hidden;
  pointer-events: none;
}

.cl-reel > .cl-case.is-leaving {
  pointer-events: none;
}

.cl-reel > .cl-case.is-featured {
  position: relative;
  z-index: 1;
}

.cl-case-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 14px;
  color: var(--cl-active);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 200ms cubic-bezier(.25, 1, .5, 1);
}

.cl-case-cta span {
  display: inline-block;
  transition: transform 320ms cubic-bezier(.25, 1, .5, 1);
}

.cl-case-cta:hover {
  color: #0b0e13;
}

.cl-case-cta:hover span {
  transform: translateX(4px);
}

.cl-reel-nav {
  min-width: 0;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--paper-line, #dde3ec);
}

/* la tira va ENCIMA del caso destacado (films.js la inserta antes del escenario) */
.cl-reel-nav.is-above {
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  padding: 0 0 clamp(16px, 2vw, 22px);
  border-top: 0;
  border-bottom: 1px solid var(--paper-line, #dde3ec);
}

.cl-reel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.cl-reel-label,
.cl-reel-count {
  color: var(--paper-muted, #4a5565);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cl-reel-count {
  color: var(--paper-ink, #0b0e13);
}

.cl-reel-arrows {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.cl-reel-arrow {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--paper-ink, #0b0e13);
  background: #fff;
  border: 1px solid var(--paper-line, #dde3ec);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 200ms cubic-bezier(.25, 1, .5, 1), color 200ms cubic-bezier(.25, 1, .5, 1);
}

.cl-reel-arrow:hover {
  color: var(--cl-active);
  border-color: var(--cl-active);
}

.cl-reel-arrow svg {
  width: 20px;
  height: 20px;
}

.cl-reel-strip {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 2px 2px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.cl-reel-strip::-webkit-scrollbar {
  display: none;
}

.cl-reel-card {
  flex: 0 0 clamp(168px, 17vw, 220px);
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 92px;
  padding: 14px 16px;
  color: var(--paper-muted, #4a5565);
  font: inherit;
  text-align: left;
  background: var(--paper-2, #fff);
  border: 1px solid var(--paper-line, #dde3ec);
  border-radius: 16px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 200ms cubic-bezier(.25, 1, .5, 1), color 200ms cubic-bezier(.25, 1, .5, 1), background-color 200ms cubic-bezier(.25, 1, .5, 1);
}

.cl-reel-card:hover {
  color: var(--paper-ink, #0b0e13);
  border-color: #b9c4d3;
}

.cl-reel-n {
  color: var(--paper-muted, #4a5565);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.cl-reel-t {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.cl-reel-card[aria-selected="true"] {
  color: var(--paper-ink, #0b0e13);
  background: var(--cl-active-bg, #eaf1ff);
  border-color: var(--cl-active);
}

.cl-reel-card[aria-selected="true"] .cl-reel-n {
  color: var(--cl-active);
}

/* ---------- elementos comunes del dibujo ---------- */

.cl-stroke { fill: none; stroke: var(--cl-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-thin { fill: none; stroke: var(--cl-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cl-body { fill: var(--cl-blue); stroke: var(--cl-ink); stroke-width: 2.5; stroke-linejoin: round; }
.cl-glass { fill: #dbe8ff; stroke: var(--cl-ink); stroke-width: 2.2; stroke-linejoin: round; }
.cl-tire { fill: var(--cl-ink); }
.cl-rim { fill: #e7ecf3; stroke: var(--cl-ink); stroke-width: 2; }
.cl-ground { stroke: #c7d1de; stroke-width: 2; }
.cl-wall { fill: #fff; stroke: var(--cl-ink); stroke-width: 2.5; stroke-linejoin: round; }
.cl-soft { fill: #e9eef6; }
.cl-sign { fill: var(--cl-ink); }
.cl-sign-text { fill: #fff; font: 700 22px var(--display, sans-serif); letter-spacing: 0.18em; }
.cl-label { fill: var(--cl-ink); font: 700 16px var(--display, sans-serif); letter-spacing: 0.12em; }
.cl-small { fill: var(--cl-muted); font: 600 13px var(--body, sans-serif); }
.cl-palm { fill: #2f9e5b; }
.cl-trunk { fill: none; stroke: #8a6a45; stroke-width: 7; stroke-linecap: round; }
.cl-sun { fill: #ffd166; }
.cl-dent { fill: none; stroke: #0b1a3d; stroke-width: 3; stroke-linecap: round; }
.cl-dent-shade { fill: #0b1a3d; opacity: 0.28; }
.cl-scratch { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.cl-shine { fill: #fff; opacity: 0.55; }
.cl-ok { fill: var(--cl-green); }
.cl-ok-mark { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cl-card { fill: #fff; stroke: var(--cl-ink); stroke-width: 2.5; }
.cl-card-line { stroke: #c7d1de; stroke-width: 6; stroke-linecap: round; }
.cl-blue-line { stroke: var(--cl-blue); stroke-width: 6; stroke-linecap: round; }
.cl-scan { fill: var(--cl-blue); opacity: 0.18; }
.cl-scan-edge { stroke: var(--cl-blue); stroke-width: 3; }
.cl-ring { fill: none; stroke: #ff4d67; stroke-width: 3; stroke-dasharray: 6 5; }
.cl-tool { fill: #fff; stroke: var(--cl-ink); stroke-width: 2.5; stroke-linejoin: round; }
.cl-mist { fill: #cfe0ff; opacity: 0.9; stroke: #fff; stroke-width: 1.5; }
.cl-grey { fill: #b7c0cc; }
.cl-haze { fill: #e6e1d6; }
.cl-dark { fill: var(--cl-ink); font-weight: 700; }

/* ---------- película principal: 30 s, 5 capítulos de 6 s (llega · se examina · se cotiza · se repara · se entrega) ---------- */

.cl-main * { animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; }
.cl-main .cl-car { animation-name: cl-car-move; }
.cl-main .cl-car-in { animation-name: cl-car-fade; }
.cl-main .cl-bob { animation-name: cl-bob; }
.cl-main .cl-puff { opacity: 0; animation-name: cl-puff; }
.cl-main .cl-beam { animation-name: cl-beam; }
.cl-main .cl-wheel { transform-origin: center; animation-name: cl-wheel-spin; }
.cl-main .cl-door { animation-name: cl-door; }
.cl-main .cl-lamp { animation-name: cl-lamp; }
.cl-main .cl-cloud1 { animation-name: cl-cloud1; animation-timing-function: ease-in-out; }
.cl-main .cl-cloud2 { animation-name: cl-cloud2; animation-timing-function: ease-in-out; }
.cl-main .cl-birds { animation-name: cl-birds; }
.cl-main .cl-sway { transform-origin: 50% 70%; animation-name: cl-sway; animation-timing-function: ease-in-out; }
.cl-main .cl-m-wave { transform-origin: 50% 0; animation-name: cl-wave; }
.cl-main .cl-m-tablet { opacity: 0; animation-name: cl-m-tablet; }
.cl-main .cl-tick1 { opacity: 0; animation-name: cl-tick1; }
.cl-main .cl-tick2 { opacity: 0; animation-name: cl-tick2; }
.cl-main .cl-tick3 { opacity: 0; animation-name: cl-tick3; }
.cl-main .cl-m-camera { opacity: 0; animation-name: cl-m-camera; }
.cl-main .cl-flash { opacity: 0; animation-name: cl-flash; }
.cl-main .cl-m-phone { opacity: 0; animation-name: cl-m-phone; }
.cl-main .cl-m-key { opacity: 0; animation-name: cl-m-key; }
.cl-main .cl-scan-g { opacity: 0; animation-name: cl-scan; }
.cl-main .cl-ring { opacity: 0; transform-origin: center; animation-name: cl-ring; }
.cl-main .cl-lens { opacity: 0; transform-origin: 50% 100%; animation-name: cl-lens; }
.cl-main .cl-quote { opacity: 0; animation-name: cl-quote; }
.cl-main .cl-q1 { opacity: 0; animation-name: cl-q1; }
.cl-main .cl-q2 { opacity: 0; animation-name: cl-q2; }
.cl-main .cl-q3 { opacity: 0; animation-name: cl-q3; }
.cl-main .cl-q4 { opacity: 0; animation-name: cl-q4; }
.cl-main .cl-quote-ok { transform-origin: center; animation-name: cl-pop; }
.cl-main .cl-reply { opacity: 0; transform-origin: 80% 100%; animation-name: cl-reply; }
.cl-main .cl-dent-g { animation-name: cl-dent-fix; }
.cl-main .cl-puller { opacity: 0; animation-name: cl-puller; }
.cl-main .cl-primer { opacity: 0; animation-name: cl-primer; }
.cl-main .cl-gun { opacity: 0; animation-name: cl-gun; }
.cl-main .cl-mist-g { opacity: 0; animation-name: cl-mist; }
/* niebla blanca del barniz (principal y casos A–E) */
.cl-main .cl-mist2,
.cl-case-a .cl-mist-w, .cl-case-b .cl-mist-w, .cl-case-c .cl-mist-w,
.cl-case-d .cl-mist-w, .cl-case-e .cl-mist-w { fill: #fff; opacity: 0.95; stroke: #b9c4d3; stroke-width: 1.2; }
.cl-main .cl-mist2-g { opacity: 0; animation-name: cl-mist2; }
.cl-main .cl-tape { opacity: 0; animation-name: cl-tape; }
.cl-main .cl-sand-g { opacity: 0; animation-name: cl-sand-g; }
.cl-main .cl-sander { animation-name: cl-sander; }
.cl-main .cl-tag-lijar { opacity: 0; animation-name: cl-tag-lijar; }
.cl-main .cl-tag-barniz { opacity: 0; animation-name: cl-tag-barniz; }
.cl-main .cl-mech { animation-name: cl-mech; animation-timing-function: ease-in-out; }
.cl-main .cl-m-step { animation-name: cl-m-step; }
.cl-main .cl-m-arm { transform-origin: 50% 0; animation-name: cl-m-arm; animation-timing-function: ease-in-out; }
.cl-main .cl-shine-g { opacity: 0; animation-name: cl-shine; }
.cl-main .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-spark; }
.cl-main .cl-done { opacity: 0; transform-origin: center; animation-name: cl-done; }

@keyframes cl-car-move {
  0%, 3% { transform: translateX(-470px); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  12%, 90% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  98%, 100% { transform: translateX(640px); }
}
@keyframes cl-car-fade { 0% { opacity: 0; } 1%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cl-bob { 0%, 12% { transform: translateY(0); } 12.7% { transform: translateY(3px); } 13.5%, 100% { transform: translateY(0); } }
@keyframes cl-puff { 0%, 3% { opacity: 0; } 4.5%, 10% { opacity: 1; } 12%, 90% { opacity: 0; } 92%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes cl-beam { 0%, 12% { opacity: 0; } 12.6% { opacity: 0.6; } 13.2% { opacity: 0; } 13.8% { opacity: 0.6; } 14.4%, 100% { opacity: 0; } }
@keyframes cl-wheel-spin {
  0%, 3% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  12%, 90% { transform: rotate(900deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  98%, 100% { transform: rotate(2100deg); }
}
@keyframes cl-door { 0% { transform: translateY(0); } 5%, 97% { transform: translateY(-150px); } 100% { transform: translateY(0); } }
@keyframes cl-lamp { 0% { opacity: 0.08; } 5%, 97% { opacity: 0.4; } 100% { opacity: 0.08; } }
@keyframes cl-cloud1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-90px); } }
@keyframes cl-cloud2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(70px); } }
@keyframes cl-birds { 0%, 30%, 100% { transform: translateY(0); } 31% { transform: translateY(-4px); } 32%, 70% { transform: translateY(0); } 71% { transform: translateY(-4px); } 72% { transform: translateY(0); } }
@keyframes cl-sway { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(2.5deg); } 75% { transform: rotate(-2deg); } }
@keyframes cl-wave {
  0%, 13% { transform: rotate(0deg); }
  14%, 16%, 18% { transform: rotate(-150deg); }
  15%, 17% { transform: rotate(-120deg); }
  19.5%, 91% { transform: rotate(0deg); }
  92%, 94%, 96% { transform: rotate(-150deg); }
  93%, 95% { transform: rotate(-120deg); }
  97.5%, 100% { transform: rotate(0deg); }
}
@keyframes cl-m-tablet { 0%, 20% { opacity: 0; } 21%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes cl-tick1 { 0%, 24% { opacity: 0; } 25%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes cl-tick2 { 0%, 27.5% { opacity: 0; } 28.5%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes cl-tick3 { 0%, 31% { opacity: 0; } 32%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes cl-m-camera { 0%, 33.5% { opacity: 0; } 34.5%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes cl-flash { 0%, 35% { opacity: 0; } 35.4% { opacity: 0.85; } 36.2%, 37.4% { opacity: 0; } 37.8% { opacity: 0.85; } 38.6%, 100% { opacity: 0; } }
@keyframes cl-m-phone { 0%, 40% { opacity: 0; } 41%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes cl-m-key { 0%, 84% { opacity: 0; } 85%, 90% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes cl-scan {
  0%, 21% { opacity: 0; transform: translateX(0); }
  22% { opacity: 1; transform: translateX(0); }
  29% { opacity: 1; transform: translateX(292px); }
  30%, 100% { opacity: 0; transform: translateX(292px); }
}
@keyframes cl-ring {
  0%, 27% { opacity: 0; transform: scale(1.6); }
  29% { opacity: 1; transform: scale(1); }
  31% { transform: scale(1.12); }
  33% { transform: scale(1); }
  35% { transform: scale(1.12); }
  37% { transform: scale(1); }
  39% { opacity: 1; }
  40%, 100% { opacity: 0; }
}
@keyframes cl-lens {
  0%, 29% { opacity: 0; transform: scale(0.3); }
  31% { opacity: 1; transform: scale(1.05); }
  32%, 38% { opacity: 1; transform: scale(1); }
  39.5%, 100% { opacity: 0; transform: scale(0.3); }
}
@keyframes cl-quote {
  0%, 41% { opacity: 0; transform: translateY(24px); }
  43%, 59% { opacity: 1; transform: translateY(0); }
  61%, 100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes cl-q1 { 0%, 44% { opacity: 0; transform: translateX(-10px); } 45.5%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes cl-q2 { 0%, 47% { opacity: 0; transform: translateX(-10px); } 48.5%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes cl-q3 { 0%, 50% { opacity: 0; transform: translateX(-10px); } 51.5%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes cl-q4 { 0%, 52.5% { opacity: 0; } 53.5%, 100% { opacity: 1; } }
@keyframes cl-pop { 0%, 54.5% { transform: scale(0); } 56% { transform: scale(1.18); } 57%, 100% { transform: scale(1); } }
@keyframes cl-reply {
  0%, 56.5% { opacity: 0; transform: scale(0.4); }
  58% { opacity: 1; transform: scale(1.06); }
  59%, 60% { opacity: 1; transform: scale(1); }
  61.5%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes cl-dent-fix { 0%, 63.5% { opacity: 1; } 65.5% { opacity: 0.5; } 66.5%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-puller {
  0%, 61.5% { opacity: 0; transform: translateY(-30px); }
  62.5% { opacity: 1; transform: translateY(0); }
  63.5% { transform: translateY(-8px); }
  64.3% { transform: translateY(0); }
  65.3% { transform: translateY(-10px); }
  66% { opacity: 1; transform: translateY(0); }
  67%, 100% { opacity: 0; transform: translateY(-30px); }
}
@keyframes cl-primer { 0%, 70% { opacity: 0; } 71%, 73% { opacity: 1; } 74.5%, 100% { opacity: 0; } }
@keyframes cl-gun {
  0%, 71% { opacity: 0; transform: translate(30px, 0); }
  72% { opacity: 1; transform: translate(0, 0); }
  73% { transform: translate(0, -8px); }
  74% { transform: translate(0, 8px); }
  75% { transform: translate(0, -8px); }
  76% { transform: translate(0, 8px); }
  77% { opacity: 1; transform: translate(0, 0); }
  78%, 100% { opacity: 0; transform: translate(30px, 0); }
}
@keyframes cl-mist { 0%, 72% { opacity: 0; } 72.5%, 74.3% { opacity: 1; } 74.8%, 100% { opacity: 0; } }
@keyframes cl-mist2 { 0%, 74.8% { opacity: 0; } 75.3%, 76.8% { opacity: 1; } 77.3%, 100% { opacity: 0; } }
@keyframes cl-tape { 0%, 66.5% { opacity: 0; } 67.2%, 77.3% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes cl-sand-g { 0%, 67% { opacity: 0; } 67.6%, 70.2% { opacity: 1; } 70.8%, 100% { opacity: 0; } }
@keyframes cl-sander { 0%, 67% { transform: translateX(0); } 67.7% { transform: translateX(-10px); } 68.4% { transform: translateX(10px); } 69.1% { transform: translateX(-10px); } 69.8% { transform: translateX(10px); } 70.5%, 100% { transform: translateX(0); } }
@keyframes cl-tag-lijar { 0%, 67% { opacity: 0; } 67.6%, 70.2% { opacity: 1; } 70.8%, 100% { opacity: 0; } }
@keyframes cl-tag-barniz { 0%, 74.5% { opacity: 0; } 75.1%, 77% { opacity: 1; } 77.6%, 100% { opacity: 0; } }
/* tras despedir el carro vuelve caminando a su sitio (93 % → 99,5 %): en la vuelta del bucle hay un solo mecánico */
@keyframes cl-mech { 0%, 58.5% { transform: translateX(0); } 61.5%, 86% { transform: translateX(-172px); } 90%, 93% { transform: translateX(-392px); } 99.5%, 100% { transform: translateX(0); } }
@keyframes cl-m-step {
  0%, 58.5% { transform: translateY(0); }
  59.25% { transform: translateY(-3px); } 60% { transform: translateY(0); } 60.75% { transform: translateY(-3px); }
  61.5%, 86% { transform: translateY(0); }
  87% { transform: translateY(-3px); } 88% { transform: translateY(0); } 89% { transform: translateY(-3px); }
  90%, 93% { transform: translateY(0); }
  93.65% { transform: translateY(-3px); } 94.3% { transform: translateY(0); } 94.95% { transform: translateY(-3px); } 95.6% { transform: translateY(0); }
  96.25% { transform: translateY(-3px); } 96.9% { transform: translateY(0); } 97.55% { transform: translateY(-3px); } 98.2% { transform: translateY(0); }
  98.85% { transform: translateY(-3px); }
  99.5%, 100% { transform: translateY(0); }
}
@keyframes cl-m-arm { 0%, 61.5% { transform: rotate(0deg); } 62.5%, 83.5% { transform: rotate(80deg); } 85%, 100% { transform: rotate(0deg); } }
@keyframes cl-shine {
  0%, 80% { opacity: 0; transform: translateX(-60px); }
  80.5% { opacity: 1; transform: translateX(-60px); }
  84% { opacity: 1; transform: translateX(330px); }
  84.5%, 100% { opacity: 0; transform: translateX(330px); }
}
@keyframes cl-spark { 0%, 84% { opacity: 0; transform: scale(0) rotate(0deg); } 85.5% { opacity: 1; transform: scale(1.2) rotate(45deg); } 88% { opacity: 1; transform: scale(0.8) rotate(90deg); } 89.5%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-done {
  0%, 91% { opacity: 0; transform: scale(0.7); }
  93% { opacity: 1; transform: scale(1.06); }
  94%, 98.5% { opacity: 1; transform: scale(1); }
  99.5%, 100% { opacity: 0; transform: scale(1); }
}

/* ---------- caso A: roce en el parqueo, 16 s (golpe · sacar el hundido · fondo y pintura · brillo) ---------- */

.cl-case-a * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-a .cl-a-wide { transform-origin: 204px 160px; animation-name: cl-a-wide; }
.cl-case-a .cl-a-close { opacity: 0; animation-name: cl-a-close; }
.cl-case-a .cl-a-door { transform-origin: 50% 0; animation-name: cl-a-door; }
.cl-case-a .cl-a-person { opacity: 0; animation-name: cl-a-person; }
.cl-case-a .cl-a-boom { opacity: 0; transform-origin: center; animation-name: cl-a-boom; }
.cl-case-a .cl-a-mark { opacity: 0; animation-name: cl-a-mark; }
.cl-case-a .cl-a-dent { transform-origin: center; animation-name: cl-a-dent; }
.cl-case-a .cl-a-puller { opacity: 0; animation-name: cl-a-puller; }
.cl-case-a .cl-a-sander { opacity: 0; animation-name: cl-a-sander; }
.cl-case-a .cl-a-dust { opacity: 0; animation-name: cl-a-dust; }
.cl-case-a .cl-a-primer { opacity: 0; animation-name: cl-a-primer; }
.cl-case-a .cl-a-gun { opacity: 0; animation-name: cl-a-gun; }
.cl-case-a .cl-a-mist { opacity: 0; animation-name: cl-a-mist; }
.cl-case-a .cl-a-mist2 { opacity: 0; animation-name: cl-a-mist2; }
.cl-case-a .cl-a-t1 { opacity: 0; animation-name: cl-a-t1; }
.cl-case-a .cl-a-t2 { opacity: 0; animation-name: cl-a-t2; }
.cl-case-a .cl-a-t3 { opacity: 0; animation-name: cl-a-t3; }
.cl-case-a .cl-a-t4 { opacity: 0; animation-name: cl-a-t4; }
.cl-case-a .cl-a-shine { opacity: 0; animation-name: cl-a-shine; }
.cl-case-a .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-a-spark; }
.cl-case-a .cl-a-before { opacity: 0; animation-name: cl-a-before; }
.cl-case-a .cl-a-after { opacity: 0; animation-name: cl-a-after; }

@keyframes cl-a-wide { 0%, 27% { opacity: 1; transform: scale(1); } 31% { opacity: 0; transform: scale(1.7); } 96% { opacity: 0; transform: scale(1); } 99%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-a-close { 0%, 27% { opacity: 0; } 31%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cl-a-door { 0%, 5% { transform: rotate(0deg); } 9% { transform: rotate(48deg); animation-timing-function: ease-out; } 10.5% { transform: rotate(42deg); } 12%, 19% { transform: rotate(46deg); } 24%, 100% { transform: rotate(0deg); } }
@keyframes cl-a-person { 0%, 4% { opacity: 0; } 6%, 24% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes cl-a-boom { 0%, 8.8% { opacity: 0; transform: scale(0.3); } 10% { opacity: 1; transform: scale(1.15); } 11%, 19% { opacity: 1; transform: scale(1); } 21%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-a-mark { 0%, 9% { opacity: 0; } 10%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cl-a-dent { 0%, 38% { opacity: 1; transform: scale(1); } 50%, 99.5% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-a-puller {
  0%, 33% { opacity: 0; transform: translate(60px, -40px); }
  36% { opacity: 1; transform: translate(0, 0); }
  38.5% { transform: translate(0, -10px); }
  40.5% { transform: translate(0, 0); }
  43% { transform: translate(0, -12px); }
  45% { transform: translate(0, 0); }
  47.5% { opacity: 1; transform: translate(0, -14px); }
  50%, 100% { opacity: 0; transform: translate(60px, -50px); }
}
@keyframes cl-a-sander {
  0%, 49.5% { opacity: 0; transform: translateX(0); }
  50.5% { opacity: 1; transform: translateX(-30px); }
  52% { transform: translateX(30px); }
  53.5% { transform: translateX(-30px); }
  55% { opacity: 1; transform: translateX(30px); }
  56.5%, 100% { opacity: 0; transform: translateX(30px); }
}
@keyframes cl-a-dust { 0%, 50.5% { opacity: 0; transform: translateY(0); } 52%, 55% { opacity: 1; } 57%, 100% { opacity: 0; transform: translateY(12px); } }
@keyframes cl-a-primer { 0%, 55.5% { opacity: 0; } 57%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes cl-a-gun {
  0%, 58.5% { opacity: 0; transform: translate(-40px, -20px); }
  59.5% { opacity: 1; transform: translate(-40px, 0); }
  62% { transform: translate(40px, 0); }
  64.5% { transform: translate(-30px, 0); }
  67% { transform: translate(40px, 0); }
  69.5% { transform: translate(-30px, 0); }
  72% { opacity: 1; transform: translate(40px, 0); }
  73%, 100% { opacity: 0; transform: translate(40px, -20px); }
}
@keyframes cl-a-mist { 0%, 59.5% { opacity: 0; } 60.5%, 66% { opacity: 1; } 66.8%, 100% { opacity: 0; } }
@keyframes cl-a-mist2 { 0%, 66.8% { opacity: 0; } 67.5%, 72% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes cl-a-t1 { 0%, 49.5% { opacity: 0; } 50.5%, 55.5% { opacity: 1; } 56.3%, 100% { opacity: 0; } }
@keyframes cl-a-t2 { 0%, 56.3% { opacity: 0; } 57%, 59.3% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes cl-a-t3 { 0%, 60% { opacity: 0; } 60.7%, 66% { opacity: 1; } 66.8%, 100% { opacity: 0; } }
@keyframes cl-a-t4 { 0%, 66.8% { opacity: 0; } 67.5%, 72.5% { opacity: 1; } 73.5%, 100% { opacity: 0; } }
@keyframes cl-a-shine { 0%, 72.5% { opacity: 0; transform: translateX(-120px); } 73.5% { opacity: 1; } 80% { opacity: 1; transform: translateX(360px); } 81%, 100% { opacity: 0; transform: translateX(360px); } }
@keyframes cl-a-spark { 0%, 78% { opacity: 0; transform: scale(0) rotate(0deg); } 80% { opacity: 1; transform: scale(1.3) rotate(45deg); } 84% { opacity: 1; transform: scale(0.8) rotate(90deg); } 86%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-b-spark { 0%, 76% { opacity: 0; transform: scale(0) rotate(0deg); } 78% { opacity: 1; transform: scale(1.3) rotate(45deg); } 82% { opacity: 1; transform: scale(0.8) rotate(90deg); } 84%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-a-before { 0%, 29.5% { opacity: 0; } 30.5%, 35% { opacity: 1; } 36.5%, 100% { opacity: 0; } }
@keyframes cl-a-after { 0%, 79% { opacity: 0; } 81%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cl-b-after { 0%, 78% { opacity: 0; } 80.5%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- caso B: pintura opaca por el sol, 16 s (sol y brocha · revisión con luz · pulido en dos etapas · brillo) ---------- */

.cl-case-b * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-b .cl-b-shop,
.cl-case-b .cl-b-shoplamps { opacity: 0; animation-name: cl-b-shop; }
.cl-case-b .cl-b-sunpath { animation-name: cl-b-sunpath; animation-timing-function: linear; }
.cl-case-b .cl-b-rays { transform-origin: center; animation-name: cl-b-rays; animation-timing-function: linear; }
.cl-case-b .cl-b-days { opacity: 0; animation-name: cl-b-days; }
.cl-case-b .cl-b-haze { animation-name: cl-b-haze; }
.cl-case-b .cl-b-scr { opacity: 0; animation-name: cl-b-scr; }
.cl-case-b .cl-b-brush { opacity: 0; animation-name: cl-b-brush; }
.cl-case-b .cl-b-lamp { opacity: 0; animation-name: cl-b-lamp; }
.cl-case-b .cl-b-pol { opacity: 0; animation-name: cl-b-pol; }
.cl-case-b .cl-b-pad { transform-origin: center; animation-name: cl-b-spin; animation-timing-function: linear; }
.cl-case-b .cl-b-pad2 { opacity: 0; animation-name: cl-b-pad2; }
.cl-case-b .cl-b-stage1 { opacity: 0; animation-name: cl-b-stage1; }
.cl-case-b .cl-b-stage2 { opacity: 0; animation-name: cl-b-stage2; }
.cl-case-b .cl-b-shine { opacity: 0; animation-name: cl-b-shine; }
.cl-case-b .cl-b-reflect { opacity: 0; animation-name: cl-b-reflect; }
.cl-case-b .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-b-spark; }
.cl-case-b .cl-b-before { animation-name: cl-b-before; }
.cl-case-b .cl-b-after { opacity: 0; animation-name: cl-b-after; }

@keyframes cl-b-shop { 0%, 27% { opacity: 0; } 30%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cl-b-sunpath {
  0% { transform: translate(40px, 100px); opacity: 0; }
  2% { opacity: 1; }
  12% { transform: translate(240px, 34px); }
  25% { transform: translate(440px, 100px); opacity: 1; }
  27%, 100% { transform: translate(440px, 100px); opacity: 0; }
}
@keyframes cl-b-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cl-b-days { 0%, 2% { opacity: 0; } 4%, 24% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes cl-b-haze { 0% { opacity: 0.08; } 22%, 42% { opacity: 0.6; } 58% { opacity: 0.3; } 72%, 97% { opacity: 0; } 100% { opacity: 0.08; } }
@keyframes cl-b-scr { 0%, 14% { opacity: 0; } 26%, 42% { opacity: 1; } 58% { opacity: 0.35; } 72%, 100% { opacity: 0; } }
@keyframes cl-b-brush {
  0%, 13% { opacity: 0; transform: translate(-60px, -10px); }
  15% { opacity: 1; transform: translate(-60px, 0); }
  17.5% { transform: translate(50px, 0); }
  20% { transform: translate(-50px, 10px); }
  22.5% { transform: translate(50px, 10px); }
  25% { opacity: 1; transform: translate(-40px, 0); }
  27%, 100% { opacity: 0; transform: translate(-40px, -20px); }
}
@keyframes cl-b-lamp {
  0%, 29% { opacity: 0; transform: translate(110px, 140px); }
  31% { opacity: 1; transform: translate(110px, 140px); }
  39% { opacity: 1; transform: translate(370px, 150px); }
  41%, 100% { opacity: 0; transform: translate(370px, 150px); }
}
@keyframes cl-b-pol {
  0%, 41% { opacity: 0; transform: translate(-80px, -30px); }
  43% { opacity: 1; transform: translate(-60px, 0); }
  48% { transform: translate(50px, 10px); }
  53% { transform: translate(-40px, 60px); }
  58% { transform: translate(60px, 70px); }
  63% { transform: translate(-60px, 10px); }
  68% { transform: translate(40px, 40px); }
  72% { opacity: 1; transform: translate(0, 20px); }
  74%, 100% { opacity: 0; transform: translate(80px, -20px); }
}
@keyframes cl-b-spin { from { transform: rotate(0deg); } to { transform: rotate(7200deg); } }
@keyframes cl-b-pad2 { 0%, 57.5% { opacity: 0; } 58.5%, 100% { opacity: 1; } }
@keyframes cl-b-stage1 { 0%, 42% { opacity: 0; } 43.5%, 57% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes cl-b-stage2 { 0%, 58% { opacity: 0; } 59%, 72% { opacity: 1; } 73.5%, 100% { opacity: 0; } }
@keyframes cl-b-shine { 0%, 71.5% { opacity: 0; transform: translateX(-90px); } 72.5% { opacity: 1; } 79% { opacity: 1; transform: translateX(380px); } 80%, 100% { opacity: 0; transform: translateX(380px); } }
@keyframes cl-b-reflect { 0%, 75% { opacity: 0; } 80%, 95% { opacity: 0.3; } 98%, 100% { opacity: 0; } }
@keyframes cl-b-before { 0%, 19% { opacity: 0; } 23%, 40% { opacity: 1; } 42.5%, 100% { opacity: 0; } }

/* ---------- caso C: el mango del patio, 16 s (el mango cae · revisión con luz · recuperar la forma · brillo) ---------- */

.cl-case-c * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-c .cl-c-wide { transform-origin: 220px 178px; animation-name: cl-c-wide; }
.cl-case-c .cl-c-close { opacity: 0; animation-name: cl-c-close; }
.cl-case-c .cl-c-leaves { transform-origin: 50% 100%; animation-name: cl-c-leaves; }
.cl-case-c .cl-c-mfall { transform-origin: center; animation-name: cl-c-mfall; }
.cl-case-c .cl-c-msquash { transform-origin: 50% 100%; animation-name: cl-c-msquash; }
.cl-case-c .cl-c-wdent { opacity: 0; animation-name: cl-c-wdent; }
.cl-case-c .cl-c-hit { opacity: 0; transform-origin: center; animation-name: cl-c-hit; }
.cl-case-c .cl-c-bird { animation-name: cl-c-bird; }
.cl-case-c .cl-c-wing { transform-origin: 50% 100%; animation-name: cl-c-wing; }
.cl-case-c .cl-c-leaf { opacity: 0; transform-origin: center; animation-name: cl-c-leaf; }
.cl-case-c .cl-c-dent1 { transform-origin: center; animation-name: cl-c-dent1; }
.cl-case-c .cl-c-dent2 { transform-origin: center; animation-name: cl-c-dent2; }
.cl-case-c .cl-c-dent3 { transform-origin: center; animation-name: cl-c-dent3; }
.cl-case-c .cl-c-rings { opacity: 0; animation-name: cl-c-rings; }
.cl-case-c .cl-c-lamp { opacity: 0; animation-name: cl-c-lamp; }
.cl-case-c .cl-c-sana { opacity: 0; animation-name: cl-c-sana; }
.cl-case-c .cl-c-forma { opacity: 0; animation-name: cl-c-forma; }
.cl-case-c .cl-c-puller { opacity: 0; animation-name: cl-c-puller; }
.cl-case-c .cl-c-pol { opacity: 0; animation-name: cl-c-pol; }
.cl-case-c .cl-c-pad { transform-origin: center; animation-name: cl-c-spin; animation-timing-function: linear; }
.cl-case-c .cl-c-pulido { opacity: 0; animation-name: cl-c-pulido; }
.cl-case-c .cl-c-shine { opacity: 0; animation-name: cl-c-shine; }
.cl-case-c .cl-c-reflect { opacity: 0; animation-name: cl-c-reflect; }
.cl-case-c .cl-c-spk { opacity: 0; transform-origin: center; animation-name: cl-c-spk; }
.cl-case-c .cl-c-before { opacity: 0; animation-name: cl-c-before; }
.cl-case-c .cl-c-after { opacity: 0; animation-name: cl-c-after; }

@keyframes cl-c-wide { 0%, 26% { opacity: 1; transform: scale(1); } 30% { opacity: 0; transform: scale(2); } 96% { opacity: 0; transform: scale(1); } 99%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-c-close { 0%, 26.5% { opacity: 0; } 30.5%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cl-c-leaves {
  0% { transform: rotate(0deg); }
  6% { transform: rotate(-1deg); }
  8.5% { transform: rotate(1.6deg); }
  10.5% { transform: rotate(-1.2deg); }
  13% { transform: rotate(0.8deg); }
  20% { transform: rotate(-0.8deg); }
  27% { transform: rotate(0.6deg); }
  60% { transform: rotate(-0.6deg); }
  100% { transform: rotate(0deg); }
}
@keyframes cl-c-mfall {
  0%, 3% { transform: translate(0, 0) rotate(0deg); }
  4.5% { transform: translate(-2px, 0) rotate(-8deg); }
  6% { transform: translate(2px, 0) rotate(8deg); }
  7.5% { transform: translate(-1px, 0) rotate(-5deg); }
  8.5% { transform: translate(0, 0) rotate(0deg); animation-timing-function: ease-in; }
  12.5% { transform: translate(0, 46px) rotate(10deg); animation-timing-function: ease-out; }
  15.5% { transform: translate(-40px, 0) rotate(-80deg); animation-timing-function: ease-in; }
  18.5% { transform: translate(-96px, 118px) rotate(-200deg); animation-timing-function: ease-out; }
  19.8% { transform: translate(-104px, 108px) rotate(-240deg); animation-timing-function: ease-in; }
  21%, 29% { transform: translate(-110px, 118px) rotate(-270deg); }
  30%, 100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes cl-c-msquash {
  0%, 12.4% { transform: scale(1, 1); }
  13.2% { transform: scale(1.35, 0.65); }
  14.4% { transform: scale(0.9, 1.12); }
  15.5%, 18.4% { transform: scale(1, 1); }
  19% { transform: scale(1.2, 0.8); }
  20%, 100% { transform: scale(1, 1); }
}
@keyframes cl-c-wdent { 0%, 12.6% { opacity: 0; } 13.4%, 94% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes cl-c-hit { 0%, 12.5% { opacity: 0; transform: scale(0.3); } 13.6% { opacity: 1; transform: scale(1.15); } 14.6%, 22% { opacity: 1; transform: scale(1); } 24%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-c-bird {
  0%, 4% { opacity: 1; transform: translate(0, 0); }
  5% { transform: translate(0, -4px); }
  6%, 12.8% { transform: translate(0, 0); }
  16% { transform: translate(14px, -60px); }
  20% { opacity: 1; transform: translate(60px, -170px); }
  21%, 29% { opacity: 0; transform: translate(60px, -170px); }
  30%, 100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes cl-c-wing {
  0%, 12.8% { transform: scaleY(1); }
  13.5% { transform: scaleY(-1); } 14.2% { transform: scaleY(1); }
  14.9% { transform: scaleY(-1); } 15.6% { transform: scaleY(1); }
  16.3% { transform: scaleY(-1); } 17% { transform: scaleY(1); }
  17.7% { transform: scaleY(-1); } 18.4% { transform: scaleY(1); }
  19.1% { transform: scaleY(-1); } 19.8%, 100% { transform: scaleY(1); }
}
@keyframes cl-c-leaf {
  0%, 12.6% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  13.5% { opacity: 1; }
  17% { transform: translate(-26px, 34px) rotate(40deg); }
  21% { transform: translate(8px, 70px) rotate(-20deg); }
  25% { opacity: 1; transform: translate(-30px, 116px) rotate(60deg); }
  27%, 100% { opacity: 0; transform: translate(-30px, 124px) rotate(60deg); }
}
@keyframes cl-c-dent1 { 0%, 50% { opacity: 1; transform: scale(1); } 52.5%, 99% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-c-dent2 { 0%, 58% { opacity: 1; transform: scale(1); } 60.5%, 99% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-c-dent3 { 0%, 66% { opacity: 1; transform: scale(1); } 68.5%, 99% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-c-rings { 0%, 33% { opacity: 0; } 35%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes cl-c-lamp {
  0%, 29.5% { opacity: 0; transform: translate(90px, 120px); }
  31% { opacity: 1; transform: translate(90px, 120px); }
  36% { transform: translate(250px, 120px); }
  41% { opacity: 1; transform: translate(380px, 200px); }
  43%, 100% { opacity: 0; transform: translate(380px, 200px); }
}
@keyframes cl-c-sana { 0%, 37% { opacity: 0; } 38.5%, 44% { opacity: 1; } 45.5%, 100% { opacity: 0; } }
@keyframes cl-c-forma { 0%, 45.5% { opacity: 0; } 46.5%, 71% { opacity: 1; } 72.5%, 100% { opacity: 0; } }
@keyframes cl-c-puller {
  0%, 44% { opacity: 0; transform: translate(400px, 60px); }
  46% { opacity: 1; transform: translate(170px, 176px); }
  48% { transform: translate(170px, 166px); }
  49% { transform: translate(170px, 176px); }
  50.5% { transform: translate(170px, 162px); }
  52% { transform: translate(170px, 176px); }
  54% { transform: translate(262px, 136px); }
  56% { transform: translate(262px, 126px); }
  57% { transform: translate(262px, 136px); }
  58.5% { transform: translate(262px, 122px); }
  60% { transform: translate(262px, 136px); }
  62% { transform: translate(318px, 212px); }
  64% { transform: translate(318px, 202px); }
  65% { transform: translate(318px, 212px); }
  66.5% { transform: translate(318px, 198px); }
  68% { transform: translate(318px, 212px); }
  70% { opacity: 1; transform: translate(380px, 150px); }
  71.5%, 100% { opacity: 0; transform: translate(420px, 120px); }
}
@keyframes cl-c-pol {
  0%, 73% { opacity: 0; transform: translate(-90px, -40px); }
  75% { opacity: 1; transform: translate(-70px, 0); }
  77% { transform: translate(30px, -40px); }
  79% { transform: translate(-30px, 30px); }
  81% { opacity: 1; transform: translate(80px, 30px); }
  83%, 100% { opacity: 0; transform: translate(120px, -20px); }
}
@keyframes cl-c-spin { from { transform: rotate(0deg); } to { transform: rotate(7200deg); } }
@keyframes cl-c-pulido { 0%, 74% { opacity: 0; } 75.5%, 82% { opacity: 1; } 83.5%, 100% { opacity: 0; } }
@keyframes cl-c-shine { 0%, 82% { opacity: 0; transform: translateX(-40px); } 82.8% { opacity: 1; } 88% { opacity: 1; transform: translateX(480px); } 89%, 100% { opacity: 0; transform: translateX(480px); } }
@keyframes cl-c-reflect { 0%, 84% { opacity: 0; } 88%, 95% { opacity: 0.22; } 97.5%, 100% { opacity: 0; } }
@keyframes cl-c-spk { 0%, 84.5% { opacity: 0; transform: scale(0) rotate(0deg); } 86.5% { opacity: 1; transform: scale(1.3) rotate(45deg); } 89.5% { opacity: 1; transform: scale(0.8) rotate(90deg); } 91.5%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-c-before { 0%, 29.5% { opacity: 0; } 31%, 37% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes cl-c-after { 0%, 85.5% { opacity: 0; } 87.5%, 95.5% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- caso D: el motoconcho en el tapón, 16 s (el roce · recuperar la forma · igualar el color · brillo) ---------- */

.cl-case-d .cl-d-k1 { stroke: var(--cl-ink); stroke-width: 1.6; }
.cl-case-d .cl-d-k2 { stroke: var(--cl-ink); stroke-width: 2; stroke-linejoin: round; }
.cl-case-d .cl-d-k3 { stroke: var(--cl-ink); stroke-width: 2.5; stroke-linejoin: round; }
.cl-case-d .cl-d-ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cl-case-d .cl-d-pt { font-size: 15px; text-anchor: middle; }

.cl-case-d * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-d .cl-d-wide { transform-origin: 226px 208px; animation-name: cl-d-wide; }
.cl-case-d .cl-d-close { opacity: 0; animation-name: cl-d-close; }
.cl-case-d .cl-d-moto { transform: translateX(-110px); animation-name: cl-d-moto; }
.cl-case-d .cl-d-wobble { transform-origin: 50% 100%; animation-name: cl-d-wobble; }
.cl-case-d .cl-d-car { animation-name: cl-d-car; }
.cl-case-d .cl-d-mark { opacity: 0; animation-name: cl-d-mark; }
.cl-case-d .cl-d-ras { opacity: 0; transform-origin: center; animation-name: cl-d-ras; }
.cl-case-d .cl-d-go { opacity: 0; animation-name: cl-d-go; }
.cl-case-d .cl-d-before { opacity: 0; animation-name: cl-d-before; }
.cl-case-d .cl-d-puller { opacity: 0; animation-name: cl-d-puller; }
.cl-case-d .cl-d-mist2 { opacity: 0; animation-name: cl-d-mist2; }
.cl-case-d .cl-d-barniz { opacity: 0; animation-name: cl-d-barniz; }
.cl-case-d .cl-d-dent { transform-origin: center; animation-name: cl-d-dent; }
.cl-case-d .cl-d-spat { opacity: 0; animation-name: cl-d-spat; }
.cl-case-d .cl-d-filler { opacity: 0; transform-origin: 0 50%; animation-name: cl-d-filler; }
.cl-case-d .cl-d-sander { opacity: 0; animation-name: cl-d-sander; }
.cl-case-d .cl-d-dust { opacity: 0; animation-name: cl-d-dust; }
.cl-case-d .cl-d-scr { animation-name: cl-d-scr; }
.cl-case-d .cl-d-primer { opacity: 0; animation-name: cl-d-primer; }
.cl-case-d .cl-d-fondo { opacity: 0; animation-name: cl-d-fondo; }
.cl-case-d .cl-d-card { opacity: 0; animation-name: cl-d-card; }
.cl-case-d .cl-d-ring { animation-name: cl-d-ring; }
.cl-case-d .cl-d-check { opacity: 0; transform-origin: center; animation-name: cl-d-check; }
.cl-case-d .cl-d-gun { opacity: 0; animation-name: cl-d-gun; }
.cl-case-d .cl-d-mist { opacity: 0; animation-name: cl-d-mist; }
.cl-case-d .cl-d-pol { opacity: 0; animation-name: cl-d-pol; }
.cl-case-d .cl-d-pad { transform-origin: center; animation-name: cl-d-spin; animation-timing-function: linear; }
.cl-case-d .cl-d-shine { opacity: 0; animation-name: cl-d-shine; }
.cl-case-d .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-d-spark; }
.cl-case-d .cl-d-after { opacity: 0; animation-name: cl-d-after; }

@keyframes cl-d-wide { 0%, 26% { opacity: 1; transform: scale(1); } 29.5% { opacity: 0; transform: scale(1.8); } 96% { opacity: 0; transform: scale(1); } 99%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-d-close { 0%, 26% { opacity: 0; } 29.5%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cl-d-moto {
  0%, 3% { transform: translateX(-110px); }
  11% { transform: translateX(180px); }
  14% { transform: translateX(200px); }
  16% { transform: translateX(216px); animation-timing-function: ease-in; }
  24%, 95% { transform: translateX(560px); }
  96%, 100% { transform: translateX(-110px); }
}
@keyframes cl-d-wobble { 0%, 11% { transform: rotate(0deg); } 12.5% { transform: rotate(-6deg); } 14% { transform: rotate(4deg); } 15.5%, 100% { transform: rotate(0deg); } }
@keyframes cl-d-car { 0%, 12% { transform: translateX(0); } 12.8% { transform: translateX(-3px); } 13.6% { transform: translateX(3px); } 14.4%, 100% { transform: translateX(0); } }
@keyframes cl-d-mark { 0%, 12.5% { opacity: 0; } 13.5%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cl-d-ras { 0%, 12% { opacity: 0; transform: scale(0.3); } 13% { opacity: 1; transform: scale(1.15); } 14%, 20% { opacity: 1; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-d-go { 0%, 20% { opacity: 0; } 21%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cl-d-before { 0%, 27% { opacity: 0; } 28.5%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes cl-d-puller {
  0%, 32% { opacity: 0; transform: translateY(-40px); }
  33.5% { opacity: 1; transform: translateY(0); }
  35% { transform: translateY(-10px); }
  36.2% { transform: translateY(0); }
  37.6% { transform: translateY(-12px); }
  38.8% { transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-14px); }
  41.5%, 100% { opacity: 0; transform: translateY(-44px); }
}
@keyframes cl-d-dent { 0%, 34.5% { opacity: 1; transform: scale(1); } 40.5% { opacity: 0; transform: scale(0.4); } 99% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-d-spat { 0%, 39.5% { opacity: 0; transform: translateX(-120px); } 40.5% { opacity: 1; transform: translateX(-120px); } 43% { opacity: 1; transform: translateX(120px); } 44.5%, 100% { opacity: 0; transform: translateX(120px); } }
@keyframes cl-d-filler { 0%, 40% { opacity: 0; transform: scaleX(0.05); } 40.5% { opacity: 1; transform: scaleX(0.05); } 43%, 51% { opacity: 1; transform: scaleX(1); } 53%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cl-d-sander {
  0%, 44% { opacity: 0; transform: translateX(-40px); }
  45% { opacity: 1; transform: translateX(-40px); }
  46.2% { transform: translateX(40px); }
  47.4% { transform: translateX(-40px); }
  48.6% { opacity: 1; transform: translateX(40px); }
  49.5%, 100% { opacity: 0; transform: translateX(40px); }
}
@keyframes cl-d-dust { 0%, 45% { opacity: 0; transform: translateY(0); } 46.5%, 49% { opacity: 1; } 51%, 100% { opacity: 0; transform: translateY(12px); } }
@keyframes cl-d-scr { 0%, 44% { opacity: 1; } 49%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-d-primer { 0%, 49.5% { opacity: 0; } 52%, 71% { opacity: 1; } 73.5%, 100% { opacity: 0; } }
@keyframes cl-d-fondo { 0%, 50% { opacity: 0; } 51.5%, 56% { opacity: 1; } 57.5%, 100% { opacity: 0; } }
@keyframes cl-d-card { 0%, 53% { opacity: 0; transform: translateX(150px); } 55.5%, 66% { opacity: 1; transform: translateX(0); } 68.5%, 100% { opacity: 0; transform: translateX(150px); } }
@keyframes cl-d-ring { 0%, 56% { transform: translateX(0); } 58% { transform: translateX(34px); } 60% { transform: translateX(68px); } 62%, 100% { transform: translateX(34px); } }
@keyframes cl-d-check { 0%, 62.5% { opacity: 0; transform: scale(0); } 63.5% { opacity: 1; transform: scale(1.25); } 64.5%, 66% { opacity: 1; transform: scale(1); } 68%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-d-gun {
  0%, 67% { opacity: 0; transform: translate(-60px, -20px); }
  68.5% { opacity: 1; transform: translate(-60px, 0); }
  70.5% { transform: translate(60px, 0); }
  72.5% { transform: translate(-50px, 0); }
  74.5% { transform: translate(60px, 0); }
  76.5% { transform: translate(-50px, 0); }
  78% { opacity: 1; transform: translate(40px, 0); }
  79%, 100% { opacity: 0; transform: translate(60px, -20px); }
}
@keyframes cl-d-mist { 0%, 68% { opacity: 0; } 69.5%, 73.5% { opacity: 1; } 74.2%, 100% { opacity: 0; } }
@keyframes cl-d-mist2 { 0%, 74% { opacity: 0; } 74.8%, 78% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes cl-d-barniz { 0%, 74% { opacity: 0; } 74.8%, 78.5% { opacity: 1; } 79.5%, 100% { opacity: 0; } }
@keyframes cl-d-pol {
  0%, 79% { opacity: 0; transform: translate(-60px, -30px); }
  80.2% { opacity: 1; transform: translate(-70px, 0); }
  82.5% { transform: translate(60px, 4px); }
  85% { transform: translate(-40px, 8px); }
  87% { opacity: 1; transform: translate(40px, 0); }
  88.5%, 100% { opacity: 0; transform: translate(80px, -30px); }
}
@keyframes cl-d-spin { from { transform: rotate(0deg); } to { transform: rotate(7200deg); } }
@keyframes cl-d-shine { 0%, 87.5% { opacity: 0; transform: translateX(-60px); } 88.5% { opacity: 1; } 93% { opacity: 1; transform: translateX(500px); } 94%, 100% { opacity: 0; transform: translateX(500px); } }
@keyframes cl-d-spark { 0%, 90% { opacity: 0; transform: scale(0) rotate(0deg); } 92% { opacity: 1; transform: scale(1.3) rotate(45deg); } 94.5% { opacity: 1; transform: scale(0.8) rotate(90deg); } 96%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-d-after { 0%, 88% { opacity: 0; } 90%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- caso E: el bumper y el contén, 16 s (el contén · lijar y preparar · fondo y pintura · brillo) ---------- */

.cl-case-e * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-e .cl-e-dust circle { fill: #f1e6cf; }
.cl-case-e .cl-e-wide { transform-origin: 374px 238px; animation-name: cl-e-wide; }
.cl-case-e .cl-e-close { opacity: 0; animation-name: cl-e-close; }
.cl-case-e .cl-e-car { animation-name: cl-e-car; }
.cl-case-e .cl-e-wheel { transform-origin: center; animation-name: cl-e-wheel; }
.cl-case-e .cl-e-jolt { animation-name: cl-e-jolt; }
.cl-case-e .cl-e-mark { opacity: 0; animation-name: cl-e-mark; }
.cl-case-e .cl-e-boom { opacity: 0; transform-origin: center; animation-name: cl-e-boom; }
.cl-case-e .cl-e-before { opacity: 0; animation-name: cl-e-before; }
.cl-case-e .cl-e-damage { animation-name: cl-e-damage; }
.cl-case-e .cl-e-sanded { opacity: 0; animation-name: cl-e-sanded; }
.cl-case-e .cl-e-filler { opacity: 0; transform-origin: center; animation-name: cl-e-filler; }
.cl-case-e .cl-e-primer { opacity: 0; animation-name: cl-e-primer; }
.cl-case-e .cl-e-wet { opacity: 0; animation-name: cl-e-wet; }
.cl-case-e .cl-e-rag { opacity: 0; animation-name: cl-e-rag; }
.cl-case-e .cl-e-block { opacity: 0; animation-name: cl-e-block; }
.cl-case-e .cl-e-dust { opacity: 0; animation-name: cl-e-dust; }
.cl-case-e .cl-e-knife { opacity: 0; animation-name: cl-e-knife; }
.cl-case-e .cl-e-gun { opacity: 0; animation-name: cl-e-gun; }
.cl-case-e .cl-e-mistg { opacity: 0; animation-name: cl-e-mistg; }
.cl-case-e .cl-e-mistb { opacity: 0; animation-name: cl-e-mistb; }
.cl-case-e .cl-e-mistw { opacity: 0; animation-name: cl-e-mistw; }
.cl-case-e .cl-e-s7 { opacity: 0; animation-name: cl-e-s7; }
.cl-case-e .cl-e-pol { opacity: 0; animation-name: cl-e-pol; }
.cl-case-e .cl-e-pad { transform-origin: center; animation-name: cl-e-spin; animation-timing-function: linear; }
.cl-case-e .cl-e-shine { opacity: 0; animation-name: cl-e-shine; }
.cl-case-e .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-e-spark; }
.cl-case-e .cl-e-after { opacity: 0; animation-name: cl-e-after; }
.cl-case-e .cl-e-s1 { opacity: 0; animation-name: cl-e-s1; }
.cl-case-e .cl-e-s2 { opacity: 0; animation-name: cl-e-s2; }
.cl-case-e .cl-e-s3 { opacity: 0; animation-name: cl-e-s3; }
.cl-case-e .cl-e-s4 { opacity: 0; animation-name: cl-e-s4; }
.cl-case-e .cl-e-s5 { opacity: 0; animation-name: cl-e-s5; }
.cl-case-e .cl-e-s6 { opacity: 0; animation-name: cl-e-s6; }

@keyframes cl-e-wide { 0%, 25% { opacity: 1; transform: scale(1); } 29% { opacity: 0; transform: scale(1.7); } 96% { opacity: 0; transform: scale(1); } 99%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-e-close { 0%, 26% { opacity: 0; } 29%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cl-e-car { 0% { transform: translateX(-300px); animation-timing-function: cubic-bezier(0.25, 0.6, 0.35, 1); } 13%, 95% { transform: translateX(0); } 95.5%, 100% { transform: translateX(-300px); } }
@keyframes cl-e-wheel { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.25, 0.6, 0.35, 1); } 13%, 95% { transform: rotate(600deg); } 95.5%, 100% { transform: rotate(0deg); } }
@keyframes cl-e-jolt { 0%, 12.8% { transform: translate(0, 0); } 13.8% { transform: translate(-3px, -4px); } 15% { transform: translate(1px, 0); } 16.5%, 100% { transform: translate(0, 0); } }
@keyframes cl-e-mark { 0%, 13% { opacity: 0; } 14%, 95% { opacity: 1; } 95.5%, 100% { opacity: 0; } }
@keyframes cl-e-boom { 0%, 12.8% { opacity: 0; transform: scale(0.3); } 14% { opacity: 1; transform: scale(1.12); } 15%, 23% { opacity: 1; transform: scale(1); } 25%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-e-before { 0%, 26.5% { opacity: 0; } 28%, 32% { opacity: 1; } 32.6%, 100% { opacity: 0; } }
@keyframes cl-e-damage { 0%, 38% { opacity: 1; } 43%, 99.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-e-sanded { 0%, 38% { opacity: 0; } 43%, 57% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes cl-e-filler { 0%, 46% { opacity: 0; transform: scale(0.4); } 49.5%, 57% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-e-primer { 0%, 55% { opacity: 0; } 59%, 65% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes cl-e-wet { 0%, 65% { opacity: 0; } 70%, 76% { opacity: 0.55; } 80%, 100% { opacity: 0; } }
@keyframes cl-e-rag {
  0%, 32% { opacity: 0; transform: translate(30px, -30px); }
  33% { opacity: 1; transform: translate(-24px, 0); }
  34.2% { transform: translate(20px, 4px); }
  35.4% { opacity: 1; transform: translate(-20px, 0); }
  36.5%, 100% { opacity: 0; transform: translate(30px, -30px); }
}
@keyframes cl-e-block {
  0%, 36.5% { opacity: 0; transform: translateX(0); }
  37.5% { opacity: 1; transform: translateX(-22px); }
  38.6% { transform: translateX(22px); }
  39.7% { transform: translateX(-22px); }
  40.8% { transform: translateX(22px); }
  41.9% { transform: translateX(-22px); }
  43% { opacity: 1; transform: translateX(22px); }
  44.5%, 100% { opacity: 0; transform: translateX(22px); }
}
@keyframes cl-e-dust { 0%, 37.5% { opacity: 0; transform: translateY(0); } 39%, 43% { opacity: 1; } 45%, 100% { opacity: 0; transform: translateY(12px); } }
@keyframes cl-e-knife {
  0%, 45% { opacity: 0; transform: translate(-20px, -20px); }
  46% { opacity: 1; transform: translate(-24px, 0); }
  48% { transform: translate(24px, 0); }
  50% { transform: translate(-20px, 0); }
  51.5% { opacity: 1; transform: translate(20px, 0); }
  52.5%, 100% { opacity: 0; transform: translate(30px, -20px); }
}
@keyframes cl-e-gun {
  0%, 53% { opacity: 0; transform: translate(-20px, -30px); }
  54.5% { opacity: 1; transform: translate(-16px, 0); }
  57% { transform: translate(16px, 8px); }
  59.5% { transform: translate(-16px, 0); }
  62% { transform: translate(16px, 8px); }
  64.5% { transform: translate(-16px, 0); }
  67% { transform: translate(16px, 8px); }
  69.5% { transform: translate(-16px, 0); }
  72% { transform: translate(16px, 8px); }
  74.5% { transform: translate(-16px, 0); }
  76.5% { transform: translate(16px, 8px); }
  77.5% { opacity: 1; transform: translate(0, 0); }
  78.5%, 100% { opacity: 0; transform: translate(-20px, -30px); }
}
@keyframes cl-e-mistg { 0%, 55% { opacity: 0; } 56.5%, 63% { opacity: 1; } 64.5%, 100% { opacity: 0; } }
@keyframes cl-e-mistb { 0%, 65% { opacity: 0; } 66.5%, 71.5% { opacity: 1; } 72.5%, 100% { opacity: 0; } }
@keyframes cl-e-mistw { 0%, 72.5% { opacity: 0; } 73.2%, 76.8% { opacity: 1; } 77.8%, 100% { opacity: 0; } }
@keyframes cl-e-pol {
  0%, 79% { opacity: 0; transform: translate(40px, -40px); }
  80.3% { opacity: 1; transform: translate(-30px, 0); }
  82.6% { transform: translate(20px, 6px); }
  85% { transform: translate(-20px, -4px); }
  87% { opacity: 1; transform: translate(10px, 0); }
  88.5%, 100% { opacity: 0; transform: translate(50px, -40px); }
}
@keyframes cl-e-spin { from { transform: rotate(0deg); } to { transform: rotate(7200deg); } }
@keyframes cl-e-shine { 0%, 87% { opacity: 0; transform: translateX(-60px); } 87.5% { opacity: 1; } 93% { opacity: 1; transform: translateX(500px); } 94%, 100% { opacity: 0; transform: translateX(500px); } }
@keyframes cl-e-spark { 0%, 89% { opacity: 0; transform: scale(0) rotate(0deg); } 91% { opacity: 1; transform: scale(1.3) rotate(45deg); } 94% { opacity: 1; transform: scale(0.8) rotate(90deg); } 96%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-e-after { 0%, 89% { opacity: 0; } 91%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes cl-e-s1 { 0%, 31.5% { opacity: 0; } 32.5%, 36% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes cl-e-s2 { 0%, 37% { opacity: 0; } 38%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes cl-e-s3 { 0%, 45% { opacity: 0; } 46%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes cl-e-s4 { 0%, 53.5% { opacity: 0; } 54.5%, 63.5% { opacity: 1; } 64.5%, 100% { opacity: 0; } }
@keyframes cl-e-s5 { 0%, 64.5% { opacity: 0; } 65.5%, 72.3% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes cl-e-s7 { 0%, 73% { opacity: 0; } 73.7%, 77.8% { opacity: 1; } 78.6%, 100% { opacity: 0; } }
@keyframes cl-e-s6 { 0%, 79% { opacity: 0; } 80%, 87.5% { opacity: 1; } 88.5%, 100% { opacity: 0; } }

/* ---------- caso F: rayas de ramas en un camino vecinal, 16 s (las ramas · ¿qué tan hondo? · pulido · retoque y brillo) ---------- */

.cl-case-f * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-f .cl-f-country { animation-name: cl-f-country; }
.cl-case-f .cl-f-shop { opacity: 0; animation-name: cl-f-shop; }
.cl-case-f .cl-f-rays { transform-origin: center; animation-name: cl-f-rays; animation-timing-function: linear; }
.cl-case-f .cl-f-mid { animation-name: cl-f-mid; animation-timing-function: linear; }
.cl-case-f .cl-f-branches { transform: translateX(480px); animation-name: cl-f-branches; animation-timing-function: linear; }
/* grupos con transform="… scale()/rotate()": se miden desde el origen del SVG, no desde su caja */
.cl-case-f .cl-vb { transform-box: view-box; transform-origin: 0 0; }
.cl-case-f .cl-f-zoom { transform-box: view-box; transform-origin: 259px 203px; animation-name: cl-f-zoom; }
.cl-case-f .cl-f-car { animation-name: cl-f-car; }
.cl-case-f .cl-f-wheel { transform-origin: center; animation-name: cl-f-wheel; animation-timing-function: linear; }
.cl-case-f .cl-f-s0,
.cl-case-f .cl-f-s1,
.cl-case-f .cl-f-s2,
.cl-case-f .cl-f-deep { stroke-dasharray: 300; stroke-dashoffset: 300; animation-timing-function: linear; }
.cl-case-f .cl-f-s0 { animation-name: cl-f-s0; }
.cl-case-f .cl-f-s1 { animation-name: cl-f-s1; }
.cl-case-f .cl-f-s2 { animation-name: cl-f-s2; }
.cl-case-f .cl-f-deep { animation-name: cl-f-deep; }
.cl-case-f .cl-f-fill { opacity: 0; animation-name: cl-f-fill; }
.cl-case-f .cl-f-trace { opacity: 0; animation-name: cl-f-trace; }
.cl-case-f .cl-f-lamp { opacity: 0; animation-name: cl-f-lamp; }
.cl-case-f .cl-f-ring { opacity: 0; transform-origin: center; animation-name: cl-f-ring; }
.cl-case-f .cl-f-card { opacity: 0; animation-name: cl-f-card; }
.cl-case-f .cl-f-pol { opacity: 0; animation-name: cl-f-pol; }
.cl-case-f .cl-f-pad { transform-origin: center; animation-name: cl-f-spin; animation-timing-function: linear; }
.cl-case-f .cl-f-brush { opacity: 0; animation-name: cl-f-brush; }
.cl-case-f .cl-f-shine { opacity: 0; animation-name: cl-f-shine; }
.cl-case-f .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-f-spark; }
.cl-case-f .cl-f-p1 { animation-name: cl-f-p1; }
.cl-case-f .cl-f-p2 { opacity: 0; animation-name: cl-f-p2; }
.cl-case-f .cl-f-p3 { opacity: 0; animation-name: cl-f-p3; }
.cl-case-f .cl-f-p4 { opacity: 0; animation-name: cl-f-p4; }
.cl-case-f .cl-f-before { opacity: 0; animation-name: cl-f-before; }
.cl-case-f .cl-f-after { opacity: 0; animation-name: cl-f-after; }

@keyframes cl-f-country { 0%, 26% { opacity: 1; } 30%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-f-shop { 0%, 26% { opacity: 0; } 30%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cl-f-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cl-f-mid { 0% { transform: translateX(0); } 27%, 30% { transform: translateX(-160px); } 94%, 100% { transform: translateX(0); } }
@keyframes cl-f-branches { 0%, 4% { transform: translateX(480px); } 24%, 100% { transform: translateX(-400px); } }
@keyframes cl-f-car {
  0%, 4%, 8%, 12%, 16%, 20%, 24% { transform: translateY(0); }
  2%, 6%, 10%, 14%, 18%, 22% { transform: translateY(-2px); }
  28%, 100% { transform: translateY(0); }
}
@keyframes cl-f-wheel { 0% { transform: rotate(0deg); } 24% { transform: rotate(1260deg); animation-timing-function: ease-out; } 28%, 100% { transform: rotate(1440deg); } }
@keyframes cl-f-s0 {
  0%, 6.5% { stroke-dashoffset: 300; opacity: 0.85; }
  12.4%, 33% { stroke-dashoffset: 0; opacity: 0.85; }
  36%, 40% { opacity: 0.15; }
  43%, 49% { opacity: 0.85; }
  55%, 99% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 300; opacity: 0; }
}
@keyframes cl-f-s1 {
  0%, 10.4% { stroke-dashoffset: 300; opacity: 0.85; }
  16.3%, 33% { stroke-dashoffset: 0; opacity: 0.85; }
  36%, 40% { opacity: 0.15; }
  43%, 55% { opacity: 0.85; }
  61%, 99% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 300; opacity: 0; }
}
@keyframes cl-f-s2 {
  0%, 14.2% { stroke-dashoffset: 300; opacity: 0.85; }
  19.9%, 33% { stroke-dashoffset: 0; opacity: 0.85; }
  36%, 40% { opacity: 0.15; }
  43%, 62% { opacity: 0.85; }
  69%, 99% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 300; opacity: 0; }
}
@keyframes cl-f-deep {
  0%, 12.2% { stroke-dashoffset: 300; opacity: 1; }
  13.8%, 80% { stroke-dashoffset: 0; opacity: 1; }
  82%, 99% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 300; opacity: 0; }
}
@keyframes cl-f-fill { 0%, 73% { opacity: 0; } 79%, 98% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
/* la raya honda retocada deja una huella leve en el DESPUÉS */
@keyframes cl-f-trace { 0%, 79% { opacity: 0; } 82%, 98% { opacity: 0.4; } 99.5%, 100% { opacity: 0; } }
/* la cámara se acerca al daño en el taller y se aleja para el DESPUÉS */
@keyframes cl-f-zoom { 0%, 29% { transform: scale(1); } 33.5%, 84.5% { transform: scale(1.7); } 88.5%, 100% { transform: scale(1); } }
@keyframes cl-f-lamp {
  0%, 30% { opacity: 0; transform: translateX(110px); }
  31.5% { opacity: 1; transform: translateX(110px); }
  40% { opacity: 1; transform: translateX(370px); }
  42%, 100% { opacity: 0; transform: translateX(370px); }
}
@keyframes cl-f-ring {
  0%, 38% { opacity: 0; transform: scale(1.5); }
  40% { opacity: 1; transform: scale(1); }
  42% { transform: scale(1.1); }
  44% { transform: scale(1); }
  46% { opacity: 1; }
  47.5%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes cl-f-card { 0%, 30% { opacity: 0; transform: translateY(-10px); } 32%, 45.5% { opacity: 1; transform: translateY(0); } 47%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes cl-f-pol {
  0%, 46.5% { opacity: 0; transform: translate(230px, -70px); }
  48% { opacity: 1; transform: translate(200px, -30px); }
  55% { transform: translate(-200px, -22px); }
  62% { transform: translate(200px, 0); }
  69% { opacity: 1; transform: translate(-200px, 22px); }
  71%, 100% { opacity: 0; transform: translate(-230px, -40px); }
}
@keyframes cl-f-spin { from { transform: rotate(0deg); } to { transform: rotate(7200deg); } }
@keyframes cl-f-brush {
  0%, 71.5% { opacity: 0; transform: translate(50px, -50px); }
  73% { opacity: 1; transform: translate(40px, 0); }
  74.5% { transform: translate(26px, -8px); }
  76% { transform: translate(8px, -2px); }
  77.5% { transform: translate(-10px, -6px); }
  79% { transform: translate(-30px, 2px); }
  80.5% { opacity: 1; transform: translate(-50px, -2px); }
  82%, 100% { opacity: 0; transform: translate(20px, -50px); }
}
@keyframes cl-f-shine { 0%, 82% { opacity: 0; transform: translateX(60px); } 83% { opacity: 1; } 89% { opacity: 1; transform: translateX(400px); } 90%, 100% { opacity: 0; transform: translateX(400px); } }
@keyframes cl-f-spark { 0%, 85% { opacity: 0; transform: scale(0) rotate(0deg); } 87% { opacity: 1; transform: scale(1.3) rotate(45deg); } 91% { opacity: 1; transform: scale(0.8) rotate(90deg); } 93%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-f-p1 { 0%, 25% { opacity: 1; } 27%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-f-p2 { 0%, 30% { opacity: 0; } 32%, 45.5% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes cl-f-p3 { 0%, 47.5% { opacity: 0; } 49%, 70.5% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes cl-f-p4 { 0%, 72% { opacity: 0; } 73.5%, 87% { opacity: 1; } 88.5%, 100% { opacity: 0; } }
@keyframes cl-f-before { 0%, 19% { opacity: 0; } 21%, 30% { opacity: 1; } 31.5%, 100% { opacity: 0; } }
@keyframes cl-f-after { 0%, 88% { opacity: 0; } 90%, 95.5% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- caso G: guardalodo trasero contra la columna de la marquesina, 16 s (la marquesina · recuperar la forma · fondo y pintura · brillo) ---------- */

.cl-case-g * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
/* grupos con transform="… scale()": se miden desde el origen del SVG, no desde su caja */
.cl-case-g .cl-vb { transform-box: view-box; transform-origin: 0 0; }
.cl-case-g .cl-g-zoom { transform-box: view-box; transform-origin: 171px 208px; animation-name: cl-g-zoom; }
.cl-case-g .cl-g-street { animation-name: cl-g-street; }
.cl-case-g .cl-g-shop { opacity: 0; animation-name: cl-g-shop; }
.cl-case-g .cl-g-stars { animation-name: cl-g-stars; }
.cl-case-g .cl-g-col { animation-name: cl-g-col; }
.cl-case-g .cl-g-car { transform: translateX(60px); animation-name: cl-g-car; }
.cl-case-g .cl-g-wheel { transform-origin: center; animation-name: cl-g-wheel; }
.cl-case-g .cl-g-beam { animation-name: cl-g-beam; animation-timing-function: steps(1, end); }
.cl-case-g .cl-g-rev { animation-name: cl-g-rev; animation-timing-function: steps(1, end); }
.cl-case-g .cl-g-rpill { animation-name: cl-g-rpill; }
.cl-case-g .cl-g-hit { opacity: 0; transform-origin: center; animation-name: cl-g-hit; }
.cl-case-g .cl-g-paf { opacity: 0; transform-origin: center; animation-name: cl-g-paf; }
.cl-case-g .cl-g-dent { opacity: 0; animation-name: cl-g-dent; }
.cl-case-g .cl-g-crack { stroke-dasharray: 40; stroke-dashoffset: 40; opacity: 0; animation-name: cl-g-crack; }
.cl-case-g .cl-g-ring { opacity: 0; transform-origin: center; animation-name: cl-g-ring; }
.cl-case-g .cl-g-puller { opacity: 0; animation-name: cl-g-puller; }
.cl-case-g .cl-g-filler { opacity: 0; transform-origin: center; animation-name: cl-g-filler; }
.cl-case-g .cl-g-sand { opacity: 0; animation-name: cl-g-sand; }
.cl-case-g .cl-g-dust { opacity: 0; animation-name: cl-g-dust; }
.cl-case-g .cl-g-primer { opacity: 0; animation-name: cl-g-primer; }
.cl-case-g .cl-g-gun { opacity: 0; animation-name: cl-g-gun; }
.cl-case-g .cl-g-mist { opacity: 0; animation-name: cl-g-mist; }
.cl-case-g .cl-g-clear { opacity: 0; animation-name: cl-g-clear; }
.cl-case-g .cl-g-line { stroke-dasharray: 260; stroke-dashoffset: 260; opacity: 0; animation-name: cl-g-line; }
.cl-case-g .cl-g-shine { opacity: 0; animation-name: cl-g-shine; }
.cl-case-g .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-g-spark; }
.cl-case-g .cl-g-p1 { animation-name: cl-g-p1; }
.cl-case-g .cl-g-p2 { opacity: 0; animation-name: cl-g-p2; }
.cl-case-g .cl-g-p3 { opacity: 0; animation-name: cl-g-p3; }
.cl-case-g .cl-g-p4 { opacity: 0; animation-name: cl-g-p4; }
.cl-case-g .cl-g-p5 { opacity: 0; animation-name: cl-g-p5; }
.cl-case-g .cl-g-p6 { opacity: 0; animation-name: cl-g-p6; }
.cl-case-g .cl-g-p7 { opacity: 0; animation-name: cl-g-p7; }
.cl-case-g .cl-g-before { opacity: 0; animation-name: cl-g-before; }
.cl-case-g .cl-g-after { opacity: 0; animation-name: cl-g-after; }

@keyframes cl-g-street { 0%, 27% { opacity: 1; } 30.5%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-g-shop { 0%, 27% { opacity: 0; } 30.5%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* la cámara se acerca al guardalodo; se aleja un momento para revisar la línea y al final para el brillo */
@keyframes cl-g-zoom {
  0%, 29% { transform: scale(1); }
  33%, 46% { transform: scale(1.7); }
  50%, 52% { transform: scale(1); }
  56.5%, 79.5% { transform: scale(1.7); }
  83.5%, 100% { transform: scale(1); }
}
@keyframes cl-g-stars { 0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; } 10%, 30%, 50%, 70%, 90% { opacity: 0.3; } }
@keyframes cl-g-col { 0%, 17% { transform: translateX(0); } 17.6% { transform: translateX(-3px); } 18.2% { transform: translateX(2px); } 18.8%, 100% { transform: translateX(0); } }
@keyframes cl-g-car {
  0%, 2% { opacity: 1; transform: translateX(60px); }
  17% { transform: translateX(0); animation-timing-function: ease-out; }
  17.8% { transform: translateX(6px); }
  19%, 96% { opacity: 1; transform: translateX(3px); }
  97.5% { opacity: 0; transform: translateX(3px); }
  98.5% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(60px); }
}
@keyframes cl-g-wheel { 0%, 2% { transform: rotate(0deg); } 17%, 100% { transform: rotate(-170deg); } }
/* luz de retroceso: un brillo pequeño que parpadea mientras entra de reversa */
@keyframes cl-g-beam {
  0%, 3%, 6%, 9%, 12%, 15% { opacity: 0.85; }
  1.5%, 4.5%, 7.5%, 10.5%, 13.5% { opacity: 0.15; }
  17%, 99% { opacity: 0; }
  100% { opacity: 0.85; }
}
@keyframes cl-g-rev {
  0%, 3%, 6%, 9%, 12%, 15% { opacity: 1; }
  1.5%, 4.5%, 7.5%, 10.5%, 13.5% { opacity: 0.45; }
  17%, 99% { opacity: 0.25; }
  100% { opacity: 1; }
}
@keyframes cl-g-rpill { 0%, 16% { opacity: 1; } 17.5%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-g-hit {
  0%, 16.8% { opacity: 0; transform: scale(0) rotate(0deg); }
  17.4% { opacity: 1; transform: scale(2.4) rotate(30deg); }
  20% { opacity: 1; transform: scale(1.6) rotate(60deg); }
  22%, 100% { opacity: 0; transform: scale(0.4) rotate(90deg); }
}
@keyframes cl-g-paf {
  0%, 16.8% { opacity: 0; transform: scale(0.4); }
  17.6% { opacity: 1; transform: scale(1.15); }
  18.6%, 25% { opacity: 1; transform: scale(1); }
  27%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes cl-g-dent {
  0%, 17% { opacity: 0; }
  17.5%, 37.5% { opacity: 1; }
  40% { opacity: 0.75; }
  42.5% { opacity: 0.5; }
  45% { opacity: 0.2; }
  47%, 100% { opacity: 0; }
}
@keyframes cl-g-crack {
  0%, 17.2% { stroke-dashoffset: 40; opacity: 0.9; }
  19%, 53% { stroke-dashoffset: 0; opacity: 0.9; }
  56%, 99% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 40; opacity: 0; }
}
@keyframes cl-g-ring {
  0%, 30.5% { opacity: 0; transform: scale(1.5); }
  32% { opacity: 1; transform: scale(1); }
  33.5% { transform: scale(1.1); }
  35% { opacity: 1; transform: scale(1); }
  36.5%, 100% { opacity: 0; transform: scale(1); }
}
/* el extractor: se pega y tira hacia afuera en tirones cortos */
@keyframes cl-g-puller {
  0%, 35.5% { opacity: 0; transform: translate(-16px, -16px); }
  37% { opacity: 1; transform: translate(0, 0); }
  38.5% { transform: translate(-5px, -5px); }
  39.5% { transform: translate(0, 0); }
  41% { transform: translate(-5px, -5px); }
  42% { transform: translate(0, 0); }
  43.5% { transform: translate(-5px, -5px); }
  44.5% { opacity: 1; transform: translate(0, 0); }
  46.5%, 100% { opacity: 0; transform: translate(-16px, -16px); }
}
@keyframes cl-g-filler {
  0%, 53.5% { opacity: 0; transform: scale(0.3); }
  55.5% { opacity: 1; transform: scale(1.12); }
  57% { opacity: 1; transform: scale(1.12); }
  62% { opacity: 1; transform: scale(1); }
  65%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes cl-g-sand {
  0%, 55.5% { opacity: 0; transform: translate(0, -20px); }
  56.5% { opacity: 1; transform: translate(0, 0); }
  57.5% { transform: translate(-10px, 0); }
  58.5% { transform: translate(10px, 0); }
  59.5% { transform: translate(-10px, 0); }
  60.5% { transform: translate(10px, 0); }
  61.5% { opacity: 1; transform: translate(0, 0); }
  62.5%, 100% { opacity: 0; transform: translate(0, -20px); }
}
@keyframes cl-g-dust { 0%, 56.5% { opacity: 0; transform: translateY(0); } 58% { opacity: 1; } 62% { opacity: 0.6; transform: translateY(6px); } 63.5%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes cl-g-primer { 0%, 62.5% { opacity: 0; } 65%, 67% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes cl-g-gun {
  0%, 61.5% { opacity: 0; transform: translate(-40px, -20px); }
  62.5% { opacity: 1; transform: translate(0, 0); }
  64% { transform: translate(4px, 6px); }
  65.5% { transform: translate(-4px, -4px); }
  67% { transform: translate(0, 0); }
  69% { transform: translate(4px, 6px); }
  70.5% { transform: translate(-4px, -4px); }
  72% { transform: translate(0, 0); }
  73.5% { transform: translate(4px, 6px); }
  75% { transform: translate(-4px, -4px); }
  76.5% { transform: translate(4px, 6px); }
  78% { opacity: 1; transform: translate(0, 0); }
  79.5%, 100% { opacity: 0; transform: translate(-40px, -20px); }
}
@keyframes cl-g-mist {
  0%, 62.5% { opacity: 0; }
  63.5%, 65.5% { opacity: 0.9; }
  66.5% { opacity: 0.2; }
  68%, 70% { opacity: 0.9; }
  71.5%, 100% { opacity: 0; }
}
/* segunda pasada: barniz (niebla blanca) */
@keyframes cl-g-clear {
  0%, 72% { opacity: 0; }
  73% { opacity: 0.9; }
  74.5% { opacity: 0.45; }
  76%, 77.5% { opacity: 0.9; }
  79%, 100% { opacity: 0; }
}
/* la línea del carro se revisa justo después de recuperar la forma */
@keyframes cl-g-line {
  0%, 48% { stroke-dashoffset: 260; opacity: 0; }
  48.5% { stroke-dashoffset: 260; opacity: 1; }
  51.5%, 53% { stroke-dashoffset: 0; opacity: 1; }
  54.5%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cl-g-shine { 0%, 84% { opacity: 0; transform: translateX(120px); } 85% { opacity: 1; } 91% { opacity: 1; transform: translateX(440px); } 92%, 100% { opacity: 0; transform: translateX(440px); } }
@keyframes cl-g-spark { 0%, 87% { opacity: 0; transform: scale(0) rotate(0deg); } 89% { opacity: 1; transform: scale(1.3) rotate(45deg); } 92.5% { opacity: 1; transform: scale(0.8) rotate(90deg); } 94.5%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-g-p1 { 0%, 26% { opacity: 1; } 28%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-g-p2 { 0%, 30.5% { opacity: 0; } 32%, 46.5% { opacity: 1; } 47.5%, 100% { opacity: 0; } }
@keyframes cl-g-p5 { 0%, 47.5% { opacity: 0; } 48.5%, 53% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes cl-g-p3 { 0%, 54% { opacity: 0; } 55%, 61.5% { opacity: 1; } 62.5%, 100% { opacity: 0; } }
@keyframes cl-g-p4 { 0%, 62.5% { opacity: 0; } 63.5%, 70.5% { opacity: 1; } 71.5%, 100% { opacity: 0; } }
@keyframes cl-g-p6 { 0%, 71.5% { opacity: 0; } 72.5%, 78.5% { opacity: 1; } 79.5%, 100% { opacity: 0; } }
@keyframes cl-g-p7 { 0%, 79.5% { opacity: 0; } 80.5%, 88.5% { opacity: 1; } 89.5%, 100% { opacity: 0; } }
@keyframes cl-g-before { 0%, 19.5% { opacity: 0; } 21%, 35.5% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes cl-g-after { 0%, 89.5% { opacity: 0; } 90.5%, 95.5% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- caso H: los pájaros del almendro, 16 s (el almendro · las marcas · corrección · brillo) ---------- */

.cl-case-h * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-h .cl-h-zoom { transform-box: view-box; transform-origin: 300px 152px; animation-name: cl-h-zoom; }
.cl-case-h .cl-h-street { animation-name: cl-h-street; }
.cl-case-h .cl-h-shop { opacity: 0; animation-name: cl-h-shop; }
.cl-case-h .cl-h-sunpath { opacity: 0; animation-name: cl-h-sunpath; animation-timing-function: linear; }
.cl-case-h .cl-h-rays { transform-origin: center; animation-name: cl-h-rays; animation-timing-function: linear; }
.cl-case-h .cl-h-drop { opacity: 0; fill: #fff; stroke: #8a94a3; animation-timing-function: ease-in; }
.cl-case-h .cl-h-d1 { animation-name: cl-h-d1; }
.cl-case-h .cl-h-d2 { animation-name: cl-h-d2; }
.cl-case-h .cl-h-d3 { animation-name: cl-h-d3; }
.cl-case-h .cl-h-d4 { animation-name: cl-h-d4; }
.cl-case-h .cl-h-s1 { opacity: 0; animation-name: cl-h-s1; }
.cl-case-h .cl-h-s2 { opacity: 0; animation-name: cl-h-s2; }
.cl-case-h .cl-h-s3 { opacity: 0; animation-name: cl-h-s3; }
.cl-case-h .cl-h-s4 { opacity: 0; animation-name: cl-h-s4; }
.cl-case-h .cl-h-mroof { opacity: 0; animation-name: cl-h-mroof; }
.cl-case-h .cl-h-mhood { opacity: 0; animation-name: cl-h-mhood; }
.cl-case-h .cl-h-heat { opacity: 0; animation-name: cl-h-heat; }
.cl-case-h .cl-h-night { opacity: 0; animation-name: cl-h-night; }
.cl-case-h .cl-h-foam { opacity: 0; animation-name: cl-h-foam; }
.cl-case-h .cl-h-sponge { opacity: 0; animation-name: cl-h-sponge; }
.cl-case-h .cl-h-lamp { opacity: 0; animation-name: cl-h-lamp; }
.cl-case-h .cl-h-rroof { opacity: 0; animation-name: cl-h-rroof; }
.cl-case-h .cl-h-rhood { opacity: 0; animation-name: cl-h-rhood; }
.cl-case-h .cl-h-lens { opacity: 0; animation-name: cl-h-lens; }
.cl-case-h .cl-h-lrings { animation-name: cl-h-lrings; }
.cl-case-h .cl-h-lshine { opacity: 0; animation-name: cl-h-lshine; }
.cl-case-h .cl-h-pol { opacity: 0; animation-name: cl-h-pol; }
.cl-case-h .cl-h-pad2 { opacity: 0; animation-name: cl-h-pad2; }
.cl-case-h .cl-h-shine { opacity: 0; animation-name: cl-h-shine; }
.cl-case-h .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-h-spark; }
.cl-case-h .cl-h-dayp { animation-name: cl-h-dayp; }
.cl-case-h .cl-h-day1 { animation-name: cl-h-day1; }
.cl-case-h .cl-h-day2 { opacity: 0; animation-name: cl-h-day2; }
.cl-case-h .cl-h-day3 { opacity: 0; animation-name: cl-h-day3; }
.cl-case-h .cl-h-p1 { opacity: 0; animation-name: cl-h-p1; }
.cl-case-h .cl-h-p2 { opacity: 0; animation-name: cl-h-p2; }
.cl-case-h .cl-h-p3 { opacity: 0; animation-name: cl-h-p3; }
.cl-case-h .cl-h-p4 { opacity: 0; animation-name: cl-h-p4; }
.cl-case-h .cl-h-p5 { opacity: 0; animation-name: cl-h-p5; }
.cl-case-h .cl-h-before { opacity: 0; animation-name: cl-h-before; }
.cl-case-h .cl-h-after { opacity: 0; animation-name: cl-h-after; }

@keyframes cl-h-street { 0%, 28% { opacity: 1; } 31%, 96% { opacity: 0; } 99.5%, 100% { opacity: 1; } }
/* la cámara se acerca a las marcas del techo y el bonete durante la revisión y la corrección */
@keyframes cl-h-zoom { 0%, 31% { transform: scale(1); } 35%, 76% { transform: scale(1.5); } 80%, 100% { transform: scale(1); } }
@keyframes cl-h-shop { 0%, 28% { opacity: 0; } 31%, 96% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
@keyframes cl-h-sunpath {
  0% { transform: translate(300px, 118px); opacity: 0; }
  1% { opacity: 1; }
  4.5% { transform: translate(385px, 30px); }
  8.5% { transform: translate(470px, 118px); opacity: 1; }
  9.5% { transform: translate(470px, 118px); opacity: 0; }
  9.6% { transform: translate(300px, 118px); opacity: 0; }
  10.5% { opacity: 1; }
  14% { transform: translate(385px, 30px); }
  18% { transform: translate(470px, 118px); opacity: 1; }
  19% { transform: translate(470px, 118px); opacity: 0; }
  19.1% { transform: translate(300px, 118px); opacity: 0; }
  20% { opacity: 1; }
  23.5% { transform: translate(385px, 30px); }
  27.5% { transform: translate(470px, 118px); opacity: 1; }
  28.5%, 100% { transform: translate(470px, 118px); opacity: 0; }
}
@keyframes cl-h-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cl-h-d1 { 0%, 1.5% { opacity: 0; transform: translateY(0); } 1.6% { opacity: 1; transform: translateY(0); } 3% { opacity: 1; transform: translateY(31px); } 3.2%, 100% { opacity: 0; transform: translateY(31px); } }
@keyframes cl-h-d2 { 0%, 4.9% { opacity: 0; transform: translateY(0); } 5% { opacity: 1; transform: translateY(0); } 6.4% { opacity: 1; transform: translateY(31px); } 6.6%, 100% { opacity: 0; transform: translateY(31px); } }
@keyframes cl-h-d3 { 0%, 10.9% { opacity: 0; transform: translateY(0); } 11% { opacity: 1; transform: translateY(0); } 12.4% { opacity: 1; transform: translateY(72px); } 12.6%, 100% { opacity: 0; transform: translateY(72px); } }
@keyframes cl-h-d4 { 0%, 14.7% { opacity: 0; transform: translateY(0); } 14.8% { opacity: 1; transform: translateY(0); } 16.2% { opacity: 1; transform: translateY(73.5px); } 16.4%, 100% { opacity: 0; transform: translateY(73.5px); } }
@keyframes cl-h-s1 { 0%, 3% { opacity: 0; } 3.1%, 32% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes cl-h-s2 { 0%, 6.4% { opacity: 0; } 6.5%, 32% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes cl-h-s3 { 0%, 12.4% { opacity: 0; } 12.5%, 35.5% { opacity: 1; } 38.5%, 100% { opacity: 0; } }
@keyframes cl-h-s4 { 0%, 16.2% { opacity: 0; } 16.3%, 35.5% { opacity: 1; } 38.5%, 100% { opacity: 0; } }
@keyframes cl-h-mroof { 0%, 14% { opacity: 0; } 26%, 50% { opacity: 1; } 56%, 64% { opacity: 0.45; } 70%, 100% { opacity: 0; } }
@keyframes cl-h-mhood { 0%, 18% { opacity: 0; } 27%, 57% { opacity: 1; } 63%, 71% { opacity: 0.45; } 77%, 100% { opacity: 0; } }
@keyframes cl-h-heat {
  0%, 2% { opacity: 0; } 4.5% { opacity: 0.9; } 7%, 11.5% { opacity: 0; }
  14% { opacity: 0.9; } 16.5%, 21% { opacity: 0; } 23.5% { opacity: 0.9; } 26.5%, 100% { opacity: 0; }
}
@keyframes cl-h-night { 0%, 8.5% { opacity: 0; } 9.5% { opacity: 0.3; } 10.5%, 18% { opacity: 0; } 19% { opacity: 0.3; } 20%, 100% { opacity: 0; } }
@keyframes cl-h-foam { 0%, 32% { opacity: 0; } 33.5%, 39.5% { opacity: 0.9; } 41%, 100% { opacity: 0; } }
@keyframes cl-h-sponge {
  0%, 31% { opacity: 0; transform: translate(190px, 130px); }
  32% { opacity: 1; transform: translate(190px, 130px); }
  33.2% { transform: translate(290px, 130px); }
  34.4% { transform: translate(200px, 130px); }
  35% { transform: translate(300px, 110px); }
  35.6% { transform: translate(340px, 173px); }
  37% { transform: translate(396px, 178px); }
  38.4% { transform: translate(344px, 173px); }
  39.5% { opacity: 1; transform: translate(392px, 178px); }
  40.5%, 100% { opacity: 0; transform: translate(392px, 160px); }
}
@keyframes cl-h-lamp {
  0%, 41% { opacity: 0; transform: translate(170px, 150px); }
  42% { opacity: 1; transform: translate(170px, 150px); }
  49% { opacity: 1; transform: translate(410px, 150px); }
  50.5%, 100% { opacity: 0; transform: translate(410px, 150px); }
}
@keyframes cl-h-rroof { 0%, 43% { opacity: 0; } 44%, 50% { opacity: 1; } 51.5%, 100% { opacity: 0; } }
@keyframes cl-h-rhood { 0%, 46.5% { opacity: 0; } 47.5%, 50% { opacity: 1; } 51.5%, 100% { opacity: 0; } }
@keyframes cl-h-lens { 0%, 43.5% { opacity: 0; } 45%, 76.5% { opacity: 1; } 78.5%, 100% { opacity: 0; } }
@keyframes cl-h-lrings { 0%, 50% { opacity: 1; } 62%, 63% { opacity: 0.45; } 72%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cl-h-lshine { 0%, 71.5% { opacity: 0; transform: translateX(0); } 72.5% { opacity: 1; } 76% { opacity: 1; transform: translateX(130px); } 77%, 100% { opacity: 0; transform: translateX(130px); } }
@keyframes cl-h-pol {
  0%, 49% { opacity: 0; transform: translate(196px, 110px); }
  50% { opacity: 1; transform: translate(196px, 125px); }
  52% { transform: translate(276px, 125px); }
  54% { transform: translate(200px, 125px); }
  56% { transform: translate(272px, 125px); }
  56.8% { transform: translate(300px, 104px); }
  57.5% { transform: translate(346px, 169px); }
  59.3% { transform: translate(394px, 173px); }
  61.2% { transform: translate(350px, 169px); }
  63% { transform: translate(392px, 173px); }
  63.8% { transform: translate(300px, 104px); }
  64.5% { transform: translate(200px, 125px); }
  66.3% { transform: translate(276px, 125px); }
  68.1% { transform: translate(200px, 125px); }
  70% { transform: translate(272px, 125px); }
  70.8% { transform: translate(300px, 104px); }
  71.5% { transform: translate(346px, 169px); }
  73.3% { transform: translate(394px, 173px); }
  75.2% { transform: translate(350px, 169px); }
  77% { opacity: 1; transform: translate(392px, 173px); }
  78%, 100% { opacity: 0; transform: translate(392px, 150px); }
}
@keyframes cl-h-pad2 { 0%, 63.8% { opacity: 0; } 64.2%, 100% { opacity: 1; } }
@keyframes cl-h-shine { 0%, 79% { opacity: 0; transform: translateX(60px); } 80% { opacity: 1; } 86% { opacity: 1; transform: translateX(440px); } 87%, 100% { opacity: 0; transform: translateX(440px); } }
@keyframes cl-h-spark { 0%, 84% { opacity: 0; transform: scale(0) rotate(0deg); } 86% { opacity: 1; transform: scale(1.3) rotate(45deg); } 90% { opacity: 1; transform: scale(0.8) rotate(90deg); } 92%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-h-dayp { 0%, 27.5% { opacity: 1; } 29%, 97% { opacity: 0; } 99.5%, 100% { opacity: 1; } }
@keyframes cl-h-day1 { 0%, 9.3% { opacity: 1; } 9.8%, 97% { opacity: 0; } 99.5%, 100% { opacity: 1; } }
@keyframes cl-h-day2 { 0%, 9.8% { opacity: 0; } 10.3%, 18.8% { opacity: 1; } 19.3%, 100% { opacity: 0; } }
@keyframes cl-h-day3 { 0%, 19.3% { opacity: 0; } 19.8%, 27.5% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes cl-h-p1 { 0%, 31% { opacity: 0; } 32%, 40.5% { opacity: 1; } 41.5%, 100% { opacity: 0; } }
@keyframes cl-h-p2 { 0%, 41.5% { opacity: 0; } 42.5%, 49.5% { opacity: 1; } 50.5%, 100% { opacity: 0; } }
@keyframes cl-h-p3 { 0%, 50.5% { opacity: 0; } 51%, 63.5% { opacity: 1; } 64.3%, 100% { opacity: 0; } }
@keyframes cl-h-p4 { 0%, 64.3% { opacity: 0; } 65%, 77.5% { opacity: 1; } 78.3%, 100% { opacity: 0; } }
@keyframes cl-h-p5 { 0%, 78.3% { opacity: 0; } 79%, 95% { opacity: 1; } 96.5%, 100% { opacity: 0; } }
@keyframes cl-h-before { 0%, 28% { opacity: 0; } 29.5%, 42.5% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes cl-h-after { 0%, 86% { opacity: 0; } 87.5%, 95% { opacity: 1; } 96.5%, 100% { opacity: 0; } }

/* ---------- caso I: el carrito del súper, 16 s (el carrito · leer el reflejo · recuperar la forma · brillo) ---------- */

.cl-case-i .cl-i-k1 { stroke: var(--cl-ink); stroke-width: 1.6; }
.cl-case-i .cl-i-k2 { stroke: var(--cl-ink); stroke-width: 2; stroke-linejoin: round; }
.cl-case-i .cl-i-k3 { stroke: var(--cl-ink); stroke-width: 2.5; stroke-linejoin: round; }
.cl-case-i .cl-i-ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cl-case-i .cl-i-pt { font-size: 15px; text-anchor: middle; }
.cl-case-i .cl-i-refl path { stroke: #05070b; stroke-width: 5.5; stroke-opacity: 0.55; }

.cl-case-i * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-i .cl-i-wide { transform-origin: 278px 212px; animation-name: cl-i-wide; }
.cl-case-i .cl-i-close { opacity: 0; animation-name: cl-i-close; }
.cl-case-i .cl-i-wind { opacity: 0; animation-name: cl-i-wind; }
.cl-case-i .cl-i-palm { transform-origin: 48% 59%; animation-name: cl-i-palm; }
.cl-case-i .cl-i-cart { transform-origin: 50% 100%; transform: translate(-176px, -66px) scale(0.5); animation-name: cl-i-cart; }
.cl-case-i .cl-i-rock { transform-origin: 50% 100%; animation-name: cl-i-rock; }
.cl-case-i .cl-i-car { animation-name: cl-i-car; }
.cl-case-i .cl-i-mark { opacity: 0; animation-name: cl-i-mark; }
.cl-case-i .cl-i-boom { opacity: 0; transform-origin: center; animation-name: cl-i-boom; }
.cl-case-i .cl-i-before { opacity: 0; animation-name: cl-i-before; }
.cl-case-i .cl-i-lamp { opacity: 0; animation-name: cl-i-lamp; }
.cl-case-i .cl-i-refl { opacity: 0; animation-name: cl-i-refl; }
.cl-case-i .cl-i-refl .cl-i-bent { animation-name: cl-i-bent; }
.cl-case-i .cl-i-refl .cl-i-mild { opacity: 0; animation-name: cl-i-mild; }
.cl-case-i .cl-i-refl .cl-i-flat { opacity: 0; animation-name: cl-i-flat; }
.cl-case-i .cl-i-ring { opacity: 0; animation-name: cl-i-ring; }
.cl-case-i .cl-i-dent { transform-origin: center; animation-name: cl-i-dent; }
.cl-case-i .cl-i-tab { opacity: 0; animation-name: cl-i-tab; }
.cl-case-i .cl-i-lifter { opacity: 0; animation-name: cl-i-lifter; }
.cl-case-i .cl-i-pull1, .cl-case-i .cl-i-pull2 { animation-name: cl-i-pull; }
.cl-case-i .cl-i-check { opacity: 0; transform-origin: center; animation-name: cl-i-check; }
.cl-case-i .cl-i-scuff { animation-name: cl-i-scuff; }
.cl-case-i .cl-i-pol { opacity: 0; animation-name: cl-i-pol; }
.cl-case-i .cl-i-pad { transform-origin: center; animation-name: cl-i-spin; animation-timing-function: linear; }
.cl-case-i .cl-i-shine { opacity: 0; animation-name: cl-i-shine; }
.cl-case-i .cl-spark { opacity: 0; transform-origin: center; animation-name: cl-i-spark; }
.cl-case-i .cl-i-after { opacity: 0; animation-name: cl-i-after; }

@keyframes cl-i-wide { 0%, 26% { opacity: 1; transform: scale(1); } 29.5% { opacity: 0; transform: scale(1.8); } 96% { opacity: 0; transform: scale(1); } 99%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-i-close { 0%, 26% { opacity: 0; } 29.5%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cl-i-wind {
  0% { opacity: 0; transform: translateX(-30px); }
  3% { opacity: 1; }
  7% { opacity: 0; transform: translateX(24px); }
  7.5% { opacity: 0; transform: translateX(-30px); }
  10.5% { opacity: 1; }
  14.5% { opacity: 0; transform: translateX(24px); }
  15% { opacity: 0; transform: translateX(-30px); }
  18% { opacity: 1; }
  22% { opacity: 0; transform: translateX(24px); }
  22.5%, 100% { opacity: 0; transform: translateX(-30px); }
}
@keyframes cl-i-palm {
  0%, 2% { transform: rotate(0deg); }
  6% { transform: rotate(7deg); }
  10% { transform: rotate(1deg); }
  14% { transform: rotate(8deg); }
  18% { transform: rotate(2deg); }
  22% { transform: rotate(6deg); }
  26%, 100% { transform: rotate(0deg); }
}
@keyframes cl-i-cart {
  0%, 3% { transform: translate(-176px, -66px) scale(0.5); }
  10% { transform: translate(-120px, -40px) scale(0.7); animation-timing-function: ease-in; }
  17% { transform: translate(0, 0) scale(1); animation-timing-function: ease-out; }
  19% { transform: translate(-16px, 0) scale(1); }
  20.5%, 95% { transform: translate(-12px, 0) scale(1); }
  95.5%, 100% { transform: translate(-176px, -66px) scale(0.5); }
}
@keyframes cl-i-rock {
  0%, 3% { transform: rotate(0deg); }
  6% { transform: rotate(-4deg); }
  9% { transform: rotate(3deg); }
  12% { transform: rotate(-3deg); }
  15% { transform: rotate(2deg); }
  17% { transform: rotate(0deg); }
  18% { transform: rotate(-6deg); }
  20%, 100% { transform: rotate(0deg); }
}
@keyframes cl-i-car { 0%, 17% { transform: translateX(0); } 17.7% { transform: translateX(3px); } 18.4% { transform: translateX(-2px); } 19.1%, 100% { transform: translateX(0); } }
@keyframes cl-i-mark { 0%, 17% { opacity: 0; } 18%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cl-i-boom { 0%, 16.8% { opacity: 0; transform: scale(0.3); } 18% { opacity: 1; transform: scale(1.15); } 19%, 24% { opacity: 1; transform: scale(1); } 26%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-i-before { 0%, 29.5% { opacity: 0; } 31.5%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes cl-i-lamp { 0%, 29.5% { opacity: 0; transform: translateX(140px); } 32%, 74% { opacity: 1; transform: translateX(0); } 77%, 100% { opacity: 0; transform: translateX(140px); } }
@keyframes cl-i-refl { 0%, 31% { opacity: 0; } 33.5%, 74% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes cl-i-bent { 0%, 55.5% { opacity: 1; } 57.5%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes cl-i-mild { 0%, 55.5% { opacity: 0; } 57.5%, 60.5% { opacity: 1; } 62.5%, 100% { opacity: 0; } }
@keyframes cl-i-flat { 0%, 61% { opacity: 0; } 63%, 97% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes cl-i-ring { 0%, 35% { opacity: 0; } 37%, 47% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes cl-i-dent {
  0%, 54.5% { opacity: 1; transform: scale(1); }
  56% { transform: scale(0.72); }
  59% { transform: scale(0.48); }
  62% { opacity: 1; transform: scale(0.24); }
  64.5% { opacity: 0; transform: scale(0.1); }
  96% { opacity: 0; transform: scale(0.1); }
  98%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes cl-i-tab { 0%, 49.5% { opacity: 0; transform: translateY(-30px); } 51.5%, 69% { opacity: 1; transform: translateY(0); } 71%, 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes cl-i-lifter { 0%, 51% { opacity: 0; transform: translateY(-120px); } 53.5%, 67% { opacity: 1; transform: translateY(0); } 69.5%, 100% { opacity: 0; transform: translateY(-120px); } }
@keyframes cl-i-pull {
  0%, 54% { transform: translateY(0); }
  55.2% { transform: translateY(-7px); }
  56.4% { transform: translateY(0); }
  57.6% { transform: translateY(-7px); }
  58.8% { transform: translateY(0); }
  60.4% { transform: translateY(-6px); }
  61.6% { transform: translateY(0); }
  63% { transform: translateY(-5px); }
  64.2%, 100% { transform: translateY(0); }
}
@keyframes cl-i-check { 0%, 65.5% { opacity: 0; transform: scale(0); } 66.5% { opacity: 1; transform: scale(1.25); } 67.5%, 73% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-i-scuff { 0%, 80% { opacity: 1; } 87%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes cl-i-pol {
  0%, 77.5% { opacity: 0; transform: translate(-60px, -30px); }
  79% { opacity: 1; transform: translate(-50px, 0); }
  81.5% { transform: translate(40px, -6px); }
  84% { transform: translate(-30px, 4px); }
  86.5% { opacity: 1; transform: translate(30px, 0); }
  88%, 100% { opacity: 0; transform: translate(80px, -30px); }
}
@keyframes cl-i-spin { from { transform: rotate(0deg); } to { transform: rotate(7200deg); } }
@keyframes cl-i-shine { 0%, 87.5% { opacity: 0; transform: translateX(-120px); } 88.5% { opacity: 1; } 93% { opacity: 1; transform: translateX(500px); } 94%, 100% { opacity: 0; transform: translateX(500px); } }
@keyframes cl-i-spark { 0%, 90% { opacity: 0; transform: scale(0) rotate(0deg); } 92% { opacity: 1; transform: scale(1.3) rotate(45deg); } 94.5% { opacity: 1; transform: scale(0.8) rotate(90deg); } 96%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes cl-i-after { 0%, 89% { opacity: 0; } 90.5%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- caso J: el techo pelado por el sol, 16 s (el sol de años · lijar lo dañado · proteger y pintar · barniz y brillo) ---------- */

.cl-case-j * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cl-case-j .cl-j-freshR, .cl-case-j .cl-j-freshH { fill: var(--cl-blue); }
.cl-case-j .cl-j-sun { opacity: 0; animation-name: cl-j-sun; }
.cl-case-j .cl-j-heat { opacity: 0; animation-name: cl-j-heat; }
.cl-case-j .cl-j-shop { opacity: 0; animation-name: cl-j-shop; }
.cl-case-j .cl-j-year { animation-name: cl-j-year; }
.cl-case-j .cl-j-y1 { animation-name: cl-j-y1; }
.cl-case-j .cl-j-y2 { opacity: 0; animation-name: cl-j-y2; }
.cl-case-j .cl-j-y3 { opacity: 0; animation-name: cl-j-y3; }
.cl-case-j .cl-j-haze { opacity: 0; animation-name: cl-j-haze; }
.cl-case-j .cl-j-peel { opacity: 0; animation-name: cl-j-peel; }
.cl-case-j .cl-j-fl1 { opacity: 0; transform-origin: center; animation-name: cl-j-fl1; }
.cl-case-j .cl-j-fl2 { opacity: 0; transform-origin: center; animation-name: cl-j-fl2; }
.cl-case-j .cl-j-dmgR { animation-name: cl-j-dmgR; }
.cl-case-j .cl-j-dmgH { animation-name: cl-j-dmgH; }
.cl-case-j .cl-j-matR { opacity: 0; transform-origin: 0 50%; animation-name: cl-j-matR; }
.cl-case-j .cl-j-matH { opacity: 0; transform-origin: 0 50%; animation-name: cl-j-matH; }
.cl-case-j .cl-j-sander { opacity: 0; animation-name: cl-j-sander; }
.cl-case-j .cl-j-dustR { opacity: 0; animation-name: cl-j-dustR; }
.cl-case-j .cl-j-dustH { opacity: 0; animation-name: cl-j-dustH; }
.cl-case-j .cl-j-mask { opacity: 0; transform-origin: 50% 0; animation-name: cl-j-mask; }
.cl-case-j .cl-j-primer { opacity: 0; animation-name: cl-j-primer; }
.cl-case-j .cl-j-gun { opacity: 0; animation-name: cl-j-gun; }
.cl-case-j .cl-j-mpaint { opacity: 0; animation-name: cl-j-mpaint; }
.cl-case-j .cl-j-mclear { opacity: 0; animation-name: cl-j-mclear; }
.cl-case-j .cl-j-freshR { opacity: 0; transform-origin: 0 50%; animation-name: cl-j-freshR; }
.cl-case-j .cl-j-freshH { opacity: 0; transform-origin: 0 50%; animation-name: cl-j-freshH; }
.cl-case-j .cl-j-glossR { opacity: 0; transform-origin: 0 50%; animation-name: cl-j-glossR; }
.cl-case-j .cl-j-glossH { opacity: 0; transform-origin: 0 50%; animation-name: cl-j-glossH; }
.cl-case-j .cl-j-shine { opacity: 0; animation-name: cl-j-shine; }
.cl-case-j .cl-j-spk { opacity: 0; transform-origin: center; animation-name: cl-j-spk; }
.cl-case-j .cl-j-l1 { opacity: 0; animation-name: cl-j-l1; }
.cl-case-j .cl-j-l2 { opacity: 0; animation-name: cl-j-l2; }
.cl-case-j .cl-j-l3 { opacity: 0; animation-name: cl-j-l3; }
.cl-case-j .cl-j-l4 { opacity: 0; animation-name: cl-j-l4; }
.cl-case-j .cl-j-before { opacity: 0; animation-name: cl-j-before; }
.cl-case-j .cl-j-after { opacity: 0; animation-name: cl-j-after; }

/* el sol cruza tres veces: años que pasan */
@keyframes cl-j-sun {
  0% { opacity: 0; transform: translate(110px, 86px); }
  1.5% { opacity: 1; }
  4.5% { transform: translate(240px, 50px); }
  7.5% { opacity: 1; transform: translate(370px, 86px); }
  8.5% { opacity: 0; transform: translate(370px, 86px); }
  9% { opacity: 0; transform: translate(110px, 86px); }
  10.5% { opacity: 1; }
  13.5% { transform: translate(240px, 50px); }
  16.5% { opacity: 1; transform: translate(370px, 86px); }
  17.5% { opacity: 0; transform: translate(370px, 86px); }
  18% { opacity: 0; transform: translate(110px, 86px); }
  19.5% { opacity: 1; }
  22.5% { transform: translate(240px, 50px); }
  25.5% { opacity: 1; transform: translate(370px, 86px); }
  26.5%, 100% { opacity: 0; transform: translate(370px, 86px); }
}
@keyframes cl-j-heat { 0%, 1% { opacity: 0; } 4% { opacity: 0.9; } 8% { opacity: 0.3; } 12% { opacity: 0.9; } 16% { opacity: 0.3; } 20% { opacity: 0.9; } 25% { opacity: 0.5; } 27.5%, 100% { opacity: 0; } }
@keyframes cl-j-shop { 0%, 27% { opacity: 0; } 30%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* el calendario: año 1, año 3, año 6 */
@keyframes cl-j-year { 0%, 26.5% { opacity: 1; } 28%, 96.5% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes cl-j-y1 { 0%, 8.3% { opacity: 1; } 8.8%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes cl-j-y2 { 0%, 8.5% { opacity: 0; } 9%, 17.3% { opacity: 1; } 17.8%, 100% { opacity: 0; } }
@keyframes cl-j-y3 { 0%, 17.5% { opacity: 0; } 18%, 27% { opacity: 1; } 28%, 100% { opacity: 0; } }

/* el barniz se pone blancuzco y se pela */
@keyframes cl-j-haze { 0%, 3% { opacity: 0; } 16%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cl-j-peel { 0%, 16.5% { opacity: 0; } 18.5%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cl-j-fl1 {
  0%, 16.5% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  17.5% { opacity: 1; transform: translate(0, -2px) rotate(-14deg); }
  19% { transform: translate(-2px, -4px) rotate(-24deg); }
  24% { opacity: 1; transform: translate(-30px, -34px) rotate(-150deg); }
  26.5%, 100% { opacity: 0; transform: translate(-44px, -44px) rotate(-200deg); }
}
@keyframes cl-j-fl2 {
  0%, 18.5% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  19.5% { opacity: 1; transform: translate(0, -2px) rotate(12deg); }
  21% { transform: translate(-2px, -5px) rotate(20deg); }
  25.5% { opacity: 1; transform: translate(-34px, -30px) rotate(160deg); }
  27.5%, 100% { opacity: 0; transform: translate(-46px, -40px) rotate(210deg); }
}

/* lijar: el techo y el bonete quedan mates */
@keyframes cl-j-dmgR { 0%, 31% { opacity: 1; } 38%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes cl-j-dmgH { 0%, 39.5% { opacity: 1; } 46%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes cl-j-matR { 0%, 30.5% { opacity: 0; transform: scaleX(0); } 31% { opacity: 1; transform: scaleX(0.15); } 38%, 71% { opacity: 1; transform: scaleX(1); } 71.5%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cl-j-matH { 0%, 38.5% { opacity: 0; transform: scaleX(0); } 39.5% { opacity: 1; transform: scaleX(0.2); } 46%, 71% { opacity: 1; transform: scaleX(1); } 71.5%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cl-j-sander {
  0%, 29% { opacity: 0; transform: translate(160px, 80px); }
  30.5% { opacity: 1; transform: translate(186px, 110px); }
  33% { transform: translate(252px, 110px); }
  34.5% { transform: translate(198px, 110px); }
  37% { transform: translate(256px, 110px); }
  38.5% { transform: translate(336px, 170.5px); }
  41% { transform: translate(402px, 175px); }
  42.5% { transform: translate(346px, 171px); }
  45% { transform: translate(404px, 175px); }
  46.5% { opacity: 1; transform: translate(420px, 152px); }
  47.5%, 100% { opacity: 0; transform: translate(440px, 140px); }
}

@keyframes cl-j-dustR { 0%, 30.5% { opacity: 0; } 32%, 37% { opacity: 1; } 38.5%, 100% { opacity: 0; } }
@keyframes cl-j-dustH { 0%, 38.5% { opacity: 0; } 40%, 45% { opacity: 1; } 46.5%, 100% { opacity: 0; } }

/* proteger con cinta y papel, fondo y pintura */
@keyframes cl-j-mask {
  0%, 50% { opacity: 0; transform: translate(0, 0) scaleY(0); }
  51% { opacity: 1; transform: translate(0, 0) scaleY(0.2); }
  54%, 85.5% { opacity: 1; transform: translate(0, 0) scaleY(1); }
  88% { opacity: 0; transform: translate(0, -24px) scaleY(1); }
  89%, 100% { opacity: 0; transform: translate(0, 0) scaleY(0); }
}
@keyframes cl-j-primer { 0%, 54% { opacity: 0; } 56.5%, 71% { opacity: 1; } 71.5%, 100% { opacity: 0; } }
@keyframes cl-j-gun {
  0%, 55% { opacity: 0; transform: translate(150px, 60px); }
  57% { opacity: 1; transform: translate(176px, 80px); }
  63.5% { transform: translate(264px, 80px); }
  65% { transform: translate(332px, 140px); }
  70% { opacity: 1; transform: translate(412px, 146px); }
  71.5% { opacity: 0; transform: translate(440px, 120px); }
  73.5% { opacity: 0; transform: translate(150px, 60px); }
  75.5% { opacity: 1; transform: translate(176px, 80px); }
  79.5% { transform: translate(264px, 80px); }
  81% { transform: translate(332px, 140px); }
  84.5% { opacity: 1; transform: translate(412px, 146px); }
  85.5%, 100% { opacity: 0; transform: translate(440px, 120px); }
}
@keyframes cl-j-mpaint { 0%, 56.5% { opacity: 0; } 57.5%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes cl-j-freshR { 0%, 57% { opacity: 1; transform: scaleX(0); } 63.5%, 71.5% { opacity: 1; transform: scaleX(1); } 72%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cl-j-freshH { 0%, 65% { opacity: 1; transform: scaleX(0); } 70%, 71.5% { opacity: 1; transform: scaleX(1); } 72%, 100% { opacity: 0; transform: scaleX(1); } }

/* barniz nuevo y brillo */
@keyframes cl-j-mclear { 0%, 75% { opacity: 0; } 76%, 84.5% { opacity: 1; } 85.5%, 100% { opacity: 0; } }
@keyframes cl-j-glossR { 0%, 75.5% { opacity: 0; transform: scaleX(0); } 76% { opacity: 1; transform: scaleX(0.05); } 79.5%, 96% { opacity: 1; transform: scaleX(1); } 99%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cl-j-glossH { 0%, 81% { opacity: 0; transform: scaleX(0); } 81.5% { opacity: 1; transform: scaleX(0.05); } 84.5%, 96% { opacity: 1; transform: scaleX(1); } 99%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cl-j-shine { 0%, 88% { opacity: 0; transform: translateX(80px); } 89% { opacity: 1; } 93% { opacity: 1; transform: translateX(470px); } 94%, 100% { opacity: 0; transform: translateX(470px); } }
@keyframes cl-j-spk { 0%, 90% { opacity: 0; transform: scale(0) rotate(0deg); } 92% { opacity: 1; transform: scale(1.3) rotate(45deg); } 94% { opacity: 1; transform: scale(0.8) rotate(90deg); } 95.5%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }

/* rótulos */
@keyframes cl-j-l1 { 0%, 28.5% { opacity: 0; } 30%, 48.5% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cl-j-l2 { 0%, 50% { opacity: 0; } 51%, 55.5% { opacity: 1; } 56.5%, 100% { opacity: 0; } }
@keyframes cl-j-l3 { 0%, 56% { opacity: 0; } 57%, 73.5% { opacity: 1; } 74.5%, 100% { opacity: 0; } }
@keyframes cl-j-l4 { 0%, 74.5% { opacity: 0; } 75.5%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes cl-j-before { 0%, 19% { opacity: 0; } 20.5%, 28.5% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes cl-j-after { 0%, 90% { opacity: 0; } 91.5%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ---------- sin movimiento: fotograma fijo (el JS además deja todo en pausa) ---------- */

/* ---------- movimiento reducido ----------
 * Sin JS: cuadro quieto. Con JS: la duración vuelve a ser la real (--cl-T, la pone films.js) para que la regla global
 * «animation-duration: .01ms» no rompa el reloj; la película queda pausada en un fotograma y solo corre si se pide. */
@media (prefers-reduced-motion: reduce) {
  .cl-film:not(.cl-js) * {
    animation: none !important;
  }

  .cl-film:not(.cl-js) .cl-quote {
    opacity: 1;
  }

  .cl-film.cl-js svg * {
    animation-duration: var(--cl-T) !important;
    animation-iteration-count: infinite !important;
  }

  .cl-step,
  .cl-chip,
  .cl-play,
  .cl-reel-card,
  .cl-reel-arrow,
  .cl-case-cta,
  .cl-case-cta span {
    transition: none !important;
  }
}

.cl-case .cl-chips {
  flex: 1;
  min-width: 0;
}

.cl-case .cl-bar {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.cl-case .cl-play {
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
}

@media (max-width: 900px) {
  .cl-cases {
    grid-template-columns: 1fr;
  }

  .cl-reel > .cl-case {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .cl-reel-card {
    flex-basis: min(220px, 62vw);
  }
}

@media (max-width: 480px) {
  /* la etiqueta del caso cabe en una línea: los servicios ya están en el texto */
  .cl-tag-svc {
    display: none;
  }
}

@media (max-width: 640px) {
  /* la película principal llega a los bordes de la pantalla: sin borde lateral ni radio, solo la barra lleva relleno */
  .cl-main {
    margin-inline: calc(-1 * var(--gutter, 16px));
    padding: 0 0 14px;
    border-inline: 0;
    border-radius: 0;
  }

  .cl-main svg {
    border-radius: 0;
  }

  .cl-main .cl-bar {
    padding-inline: var(--gutter, 16px);
  }

  /* el texto pequeño dentro del dibujo no se lee en móvil: lo cuenta el stepper */
  .cl-main svg text.cl-small {
    display: none;
  }

  .cl-steps {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cl-step {
    padding: 10px 12px 12px;
  }

  .cl-step span {
    display: none;
  }

  .cl-step[aria-current="step"] span,
  .cl-step[aria-pressed="true"] span {
    display: block;
  }

  .cl-main .cl-bar {
    flex-direction: column;
  }

  .cl-main .cl-play {
    align-self: flex-end;
    min-height: 44px;
  }

  /* con JS: cinco números en fila + pausa; la frase activa debajo, con su título */
  .cl-main.cl-js .cl-bar {
    flex-direction: row;
    gap: 6px;
  }

  .cl-main.cl-js .cl-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cl-main.cl-js .cl-step {
    justify-content: center;
    min-height: 44px;
    padding: 10px 4px 12px;
  }

  .cl-main.cl-js .cl-step strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cl-main.cl-js .cl-step b {
    font-size: 13px;
  }

  .cl-main.cl-js .cl-play {
    align-self: stretch;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
  }

  .cl-say {
    min-height: 4.8em;
    font-size: 15px;
  }

  .cl-say strong {
    display: inline;
  }

  .cl-chip {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  .cl-case .cl-play {
    min-height: 44px;
  }
}