/* =====================
   CO2 URBAN – BASE
===================== */
body {
  font-family: 'Poppins', sans-serif;
  color: #0a2540;
}

/* =====================
   HERO (REUTILIZA AIME)
===================== */
.prod-hero {
  position: relative;
  height: 420px;
  background: linear-gradient(
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.55)
    ),
    url('/assets/productos-servicios/banner-ps.webp')
    center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-hero-content {
  text-align: center;
  color: #ffffff;
  max-width: 900px;
  padding: 0 20px;
}

.prod-hero-content h1 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
}

/* =====================
   INTRO
===================== */
.prod-intro {
  position: relative;
  padding: 90px 20px;
  background: #d9ecf9;
  overflow: hidden;
}

.prod-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, #eaf5ff 25%, transparent 25%) left,
    linear-gradient(225deg, #eaf5ff 25%, transparent 25%) right;
  background-size: 60% 100%;
  background-repeat: no-repeat;
  opacity: .7;
}

.prod-intro p {
  position: relative;
  max-width: 1000px;
  margin: auto;
  font-size: 18px;
  line-height: 1.9;
  text-align: center;
}

/* =====================
   COMPARATIVA
===================== */
.co2-compare {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
}

/* =====================
   BLOQUES
===================== */
.co2-block {
  background: #ffffff;
  border-radius: 20px;
  padding: 70px 50px;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0,0,0,0.06);
  position: relative;
}

/* forma sutil */
.co2-block::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  top: -60px;
  left: -60px;
  z-index: -1;
  filter: blur(12px);
}

/* =====================
   ICONO
===================== */
.co2-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.co2-icon img {
  width: 42px;
}
/* Ícono AIME en blanco */
.co2-icon img {
  width: 56px;
  filter: brightness(0) invert(1);
}


/* =====================
   PROBLEMA
===================== */
.co2-block.problem::before {
  background: rgba(220, 0, 0, 0.15);
}

.co2-block.problem .co2-icon {
  background: #e00000;
}

.co2-block.problem h3 {
  color: #e00000;
}

/* =====================
   SOLUCIÓN
===================== */
.co2-block.solution::before {
  background: rgba(30, 170, 90, 0.18);
}

.co2-block.solution .co2-icon {
  background: #1eaa5a;
}

.co2-block.solution h3 {
  color: #1eaa5a;
}

/* =====================
   TEXTO
===================== */
.co2-block h3 {
  font-size: 28px;
  margin-bottom: 18px;
}

.co2-block p {
  font-size: 16px;
  line-height: 1.8;
  color: #4a5d73;
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 900px) {
  .prod-hero-content h1 {
    font-size: 32px;
  }

  .co2-compare {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 90px 20px;
  }

  .co2-block {
    padding: 55px 35px;
  }

  .co2-block::before {
    display: none;
  }
}

/* ===============================
   CO2 INNOVATIONS
================================ */

.co2-innovations {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ===============================
   HEADER OSCURO
================================ */

.co2-innovations-header {
  background: linear-gradient(180deg, #061b28, #0b2b3c);
  padding: 90px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.co2-innovations-header h2 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;
}

/* ondas decorativas */
.co2-innovations-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/waves.svg") center / cover no-repeat;
  opacity: 0.35;
  z-index: 1;
}

/* ===============================
   CONTENT CLARO + FORMAS
================================ */

.co2-innovations-content {
  background: #eaf4fb;
  padding: 80px 20px 100px;
  position: relative;
  overflow: hidden;
}

/* forma diagonal */
.co2-innovations-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 32%,
    rgba(255, 255, 255, 0.95) 33%
  );
  z-index: 0;
}

.co2-innovations-content > * {
  position: relative;
  z-index: 2;
}

/* ===============================
   LISTADO
================================ */

.co2-innovaciones-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
}

/* item */
.co2-innovacion-item {
  display: grid;
  grid-template-columns: 14px 260px 1fr;
  column-gap: 18px;
  align-items: start;
  margin-bottom: 28px;
}

/* punto */
.co2-innovacion-item .dot {
  width: 10px;
  height: 10px;
  background-color: #6fa8c6;
  border-radius: 50%;
  margin-top: 9px;
}

/* titulo */
.co2-innovacion-item strong {
  font-weight: 700;
  color: #0b2b3c;
  font-size: 1rem;
  line-height: 1.5;
}

/* descripción */
.co2-innovacion-item .desc {
  color: #243b4a;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 900px) {
  .co2-innovacion-item {
    grid-template-columns: 14px 1fr;
    row-gap: 6px;
  }

  .co2-innovacion-item strong {
    grid-column: 2;
  }

  .co2-innovacion-item .desc {
    grid-column: 2;
  }
}

/* =========================
   MODELO DE NEGOCIO
========================= */
.co2-model {
  padding: 120px 20px;
  text-align: center;
  background: url("/assets/backgrounds/vector-light.webp") center/cover no-repeat;
}

.co2-model-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 25px;
  border-radius: 50%;
  background: #1673b1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.co2-model-icon img {
  width: 28px;
  filter: brightness(0) invert(1);
}

.co2-model h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.co2-model p {
  max-width: 760px;
  margin: auto;
  font-size: 16px;
  line-height: 1.8;
  color: #4a5d73;
}
 /* =========================
   PRÓXIMOS PASOS
========================= */
.co2-steps {
  background: linear-gradient(180deg, #0a1b2a, #132c3f);
}

.co2-steps-header {
  padding: 90px 20px 60px;
  color: #fff;
}

.co2-steps-header h2 {
  max-width: 1200px;
  margin: auto;
  font-size: 34px;
}

.co2-steps-content {
  background: #eaf3f9;
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
  padding: 80px 20px 100px;
  text-align: center;
}

.co2-steps-content ul {
  max-width: 700px;
  margin: 0 auto 40px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.co2-steps-content li {
  font-size: 16px;
  color: #0a2540;
  position: relative;
  padding-left: 20px;
}

.co2-steps-content li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #6fa7c8;
}

.co2-steps-note {
  max-width: 760px;
  margin: 0 auto 30px;
  font-weight: 600;
}

/* botón reutilizable */
.co2-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 30px;
  background: #1673b1;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: transform .3s ease, box-shadow .3s ease;
}

.co2-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0,0,0,.25);
}
/* ===============================
   SCROLL ANIMATIONS (CSS ONLY)
================================ */

/* keyframes base */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dotPop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===============================
   HEADER ANIMATION
================================ */

.co2-innovations-header h2 {
  opacity: 0;
  transform: translateY(-20px);
}

.co2-innovations-header h2.show {
  animation: fadeDown 0.9s ease-out both;
}

/* ===============================
   LIST ITEMS ANIMATION
================================ */

.co2-innovacion-item {
  opacity: 0;
  transform: translateY(30px);
}

.co2-innovacion-item.show {
  animation: fadeUp 0.9s ease-out both;
}

/* escalonado */
.co2-innovacion-item:nth-child(1).show { animation-delay: 0.05s; }
.co2-innovacion-item:nth-child(2).show { animation-delay: 0.12s; }
.co2-innovacion-item:nth-child(3).show { animation-delay: 0.18s; }
.co2-innovacion-item:nth-child(4).show { animation-delay: 0.25s; }


/* ===============================
   DOT ANIMATION
================================ */

.co2-innovacion-item .dot {
  opacity: 0;
  transform: scale(0.6);
  box-shadow: 0 0 0 rgba(111, 168, 198, 0.6);
}

.co2-innovacion-item.show .dot {
  animation: dotPop 0.6s ease-out both;
}

.co2-innovacion-item:hover .dot {
  box-shadow: 0 0 10px rgba(111, 168, 198, 0.6);
  transition: box-shadow 0.3s ease;
}


/* ===============================
   TEXT POLISH
================================ */

.co2-innovacion-item strong,
.co2-innovacion-item .desc {
  transition: color 0.3s ease;
}

.co2-innovacion-item:hover strong {
  color: #0a4f70;
}
/* ===============================
   SCROLL ANIMATIONS – CO2 URBAN
================================ */

/* ---------- INTRO TEXTO ---------- */
.co2-intro,
.co2-intro p {
  opacity: 0;
  transform: translateY(28px);
}

.co2-intro.show,
.co2-intro.show p {
  animation: fadeUp 0.9s ease-out both;
}


/* ---------- PROBLEMA / SOLUCIÓN ---------- */
.co2-compare {
  opacity: 0;
  transform: translateY(30px);
}

.co2-compare.show {
  animation: fadeUp 1s ease-out both;
}

.co2-problem {
  opacity: 0;
  transform: translateX(-50px);
}

.co2-problem.show {
  animation: slideInLeft 0.9s ease-out both;
}

.co2-solution {
  opacity: 0;
  transform: translateX(50px);
}

.co2-solution.show {
  animation: slideInRight 0.9s ease-out both;
}


/* ---------- BLOQUES INFORMATIVOS ---------- */
.co2-block {
  opacity: 0;
  transform: translateY(30px);
}

.co2-block.show {
  animation: fadeUp 0.9s ease-out both;
}

/* escalonado */
.co2-block:nth-child(1).show { animation-delay: 0.05s; }
.co2-block:nth-child(2).show { animation-delay: 0.12s; }
.co2-block:nth-child(3).show { animation-delay: 0.18s; }

/* iconos */
.co2-block img {
  opacity: 0;
  transform: scale(0.85);
}

.co2-block.show img {
  animation: iconPop 0.7s ease-out both;
}


/* ---------- CTA FINAL ---------- */
.co2-cta {
  opacity: 0;
  transform: translateY(30px);
}

.co2-cta.show {
  animation: fadeUp 1s ease-out both;
}

/* ===============================
   KEYFRAMES
================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes iconPop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}