.page-casos {
  --casos-ink: #25303c;
  --casos-soft: #e8f5f8;
}

.casos-container {
  max-width: 62rem;
}

.casos-intro {
  padding: 3rem 0 4rem;
}

.casos-logo {
  display: block;
  width: 10rem;
  margin-bottom: 1.5rem;
}

.casos-intro h1 {
  color: var(--color-primary);
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 3rem;
}

.casos-intro h1 strong,
.casos-platform h2 span,
.casos-resalte {
  color: #000;
  background: var(--casos-soft);
}

.casos-intro p {
  max-width: 48rem;
  font-size: 0.9375rem;
  color: var(--casos-ink);
}

/* CIFRAS */
.casos-stats {
  padding: 2.5rem 0;
  background: #e0e0e0;
}

.casos-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5rem;
  padding: 0 2.5rem;
}

.casos-stats dt {
  color: var(--color-primary);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-align: left;
}

.casos-stats dd {
  color: var(--casos-ink);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
}

/* MAPA */
.casos-mapa {
  padding-top: 3rem;
}

.casos-mapa-animado {
  position: relative;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 1024 / 535;
}

.casos-mapa-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 55rem;
  height: auto;
  margin: auto;
}

/* El lienzo de Animate es de 1024x768 con margen vacío arriba: se recorta 110/1024 del ancho. */
.casos-mapa-animado canvas {
  display: none;
  margin: -10.74% auto 0;
}

.casos-mapa-animado.is-ready .casos-mapa-fallback {
  display: none;
}

.casos-mapa-animado.is-ready canvas {
  display: block;
}

/* LEYENDA */
.casos-leyenda {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.casos-leyenda-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
  padding: 1rem 1.25rem;
  list-style: none;
}

.casos-leyenda-lista li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
}

.casos-leyenda-lista img {
  width: 2rem;
  height: auto;
}

.leyenda-alumbrado { color: var(--color-alumbrado); }
.leyenda-pavimentos { color: var(--color-pavimentos); }
.leyenda-edificios { color: var(--color-edificios); }
.leyenda-residuos { color: var(--color-residuos); }
.leyenda-agua { color: #205f90; }
.leyenda-emobility { color: var(--color-emobility); }

.casos-divider {
  height: 1.5rem;
  background: var(--casos-soft);
}

/* MUNICIPIOS */
.casos-municipios {
  padding: 4rem 0;
}

.casos-municipios h2 {
  max-width: 38rem;
  margin-bottom: 3rem;
  color: var(--casos-ink);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.35;
}

.casos-acento {
  color: var(--color-primary);
}

.casos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}

.caso {
  display: flex;
  flex-direction: column;
}

/* Rotación de proyectos (js/casos-rotacion.js): giro 3D al cambiar y aparición escalonada. */
.casos-grid[data-rotate] {
  perspective: 1200px;
}

.casos-grid[data-rotate] .caso {
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.casos-grid[data-rotate] .caso.is-leaving {
  opacity: 0;
  transform: rotateY(90deg) scale(0.92);
  transition-timing-function: ease-in;
}

.casos-grid[data-rotate] .caso.is-entering {
  opacity: 0;
  transform: rotateY(-90deg) scale(0.92);
  transition: none;
}

.casos-grid[data-rotate].is-pending .caso {
  opacity: 0;
  transform: translateY(1.5rem);
}

.casos-grid[data-rotate].is-revealing .caso {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .casos-grid[data-rotate] .caso {
    transition: none;
  }
}

.caso-gis {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 864 / 414;
}

.caso-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  background: #ececec;
}

.caso-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.caso-titulo img {
  width: 1.5rem;
  height: 2rem;
  object-fit: contain;
}

.caso-titulo h3 {
  color: var(--casos-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.caso-datos {
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius-sm);
  background: #e0e0e0;
  font-size: 0.6875rem;
  line-height: 1.7;
}

.caso-datos div {
  display: block;
}

.caso-datos dt,
.caso-datos dd {
  display: inline;
}

.caso-datos dt {
  color: var(--color-primary);
}

.caso-datos dt::after {
  content: " -";
}

.caso-datos dd {
  margin-left: 0.2rem;
  color: var(--casos-ink);
  font-weight: 600;
}

.caso-cuerpo p {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--casos-ink);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.caso-servicio {
  width: 1.1rem;
  height: auto;
}

/* PLATAFORMA Y DEMO */
.casos-platform {
  padding: 4rem 0 0;
  text-align: center;
}

.casos-platform h2 {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.3;
}

.casos-platform em {
  color: var(--color-primary);
  font-style: normal;
}

.page-casos .demo-cta {
  padding-top: 1rem;
}

.page-casos .demo-header {
  min-width: 0;
}

.page-casos .demo-btn {
  min-width: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .casos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .casos-intro {
    padding: 3rem 0;
  }

  .casos-intro h1,
  .casos-platform h2 {
    font-size: 2rem;
  }

  .casos-title-break {
    display: none;
  }

  .casos-stats-grid {
    gap: 2rem;
    padding: 0;
  }

  .casos-stats dt {
    font-size: 3rem;
  }

  .casos-stats dd {
    font-size: 1rem;
  }

  .casos-municipios h2 {
    font-size: 1.5rem;
  }

  .page-casos .demo-container {
    padding: 2rem 0;
  }

  .page-casos .demo-header {
    gap: 1rem;
  }

  .page-casos .demo-title {
    font-size: 1.5rem;
  }

  .page-casos .demo-img-left,
  .page-casos .demo-img-right {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  .casos-grid {
    grid-template-columns: 1fr;
    max-width: 24rem;
    margin: 0 auto;
  }

  .casos-leyenda-lista {
    gap: 0.75rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .casos-stats-grid {
    grid-template-columns: 1fr;
  }

  .casos-stats dt {
    text-align: center;
  }

  .casos-stats dd {
    max-width: 15rem;
    margin: 0 auto;
    text-align: center;
  }

  .page-casos .demo-cta {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .page-casos .demo-header {
    gap: 0.5rem;
  }

  .page-casos .demo-title {
    font-size: 1.125rem;
  }
}