:root {
  --cu-icon-size: 25px; /* ✅ Nueva variable para tamaño de iconos */
}

/* 🧱 Sección principal */
.cu-section {
  position: relative;
  background-color: var(--color-bg);
  padding: var(--padding-sections-pc);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
}

/* 🧩 Contenedor interno */
.cu-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%; /* ✅ Ocupa todo el alto del contenedor padre */
  width: 100%;
  max-width: 1200px;
}

.clickable-icon {
  width: var(--cu-icon-size); /* ✅ Usa la variable */
  height: auto;
  min-width: var(--cu-icon-size); /* ✅ Usa la variable */
  min-height: var(--cu-icon-size); /* ✅ Usa la variable */
  fill: #1f1f1f;
  margin-right: 15px; /* ✅ Aumenté el margen para iconos más grandes */
  display: inline-block;
  flex-shrink: 0;
  transition: color 0.3s, fill 0.3s;
}

/* Hover uniforme para todos los iconos */
a:hover .clickable-icon {
  fill: var(--color-light-green);
  color: var(--color-light-green);
  cursor: pointer;
}

.cu-info-column {
  flex: 1 1 20px;
  margin: 0 auto;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.cu-info-column h4 {
  font-family: var(--font-title);
  color: var(--color-green-title);
  font-size: 48px;
  line-height: var(--font-lh-title);
  text-align: left;
  margin: 0;
  padding-bottom: 20px;
}

@media (max-width: 900px) {
  .cu-info-column h4 {
    font-size: var(--font-size-title);
    padding-bottom: 10px;
    text-align: center;
  }
}

.cu-info-column ul {
  list-style: none;
  padding: 0;
  text-align: left;
  padding-bottom: 20px;
}

.cu-info-column ul li {
  text-align: left;
  display: flex;
  align-items: center; /* ✅ Alinea verticalmente icono y texto */
  padding-bottom: 20px;
}

.cu-info-column ul li a {
  text-decoration: none;
  font-family: var(--font-paragraph);
  font-size: var(--font-size-paragraph);
  color: var(--color-text-paragraph);
  display: flex;
  align-items: center; /* ✅ Alinea verticalmente icono y texto */
}

@media (max-width: 900px) {
  .cu-info-column ul li a {
    justify-content: center;
    font-size: clamp(14px, 3.5vw, 18px);
  }
}

.cu-info-column ul li a:hover {
  color: var(--color-light-green);
}

/* Estilos para SVG dentro del <li> - ACTUALIZADO */
.cu-info-column ul li svg {
  width: var(--cu-icon-size); /* ✅ Usa la variable */
  height: auto;
  max-height: var(--cu-icon-size); /* ✅ Usa la variable */
  min-width: var(--cu-icon-size); /* ✅ Usa la variable */
  min-height: var(--cu-icon-size); /* ✅ Usa la variable */
  fill: var(--color-text-paragraph);
  margin-right: 15px; /* ✅ Aumenté el margen para iconos más grandes */
  display: inline-block;
  flex-shrink: 0;
  transition: fill 0.3s;
}

.cu-button {
  text-decoration: none;
  padding: 8px 24px;
  background-color: transparent;
  border: 1px solid var(--color-green-title);
  color: var(--color-green-title);
  font-family: var(--font-paragraph);
  font-size: var(--font-size-button);
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s ease;
  width: fit-content;
  margin-top: 20px; /* ✅ Añadí margen superior para separar del contenido */
}

.cu-button:hover {
  background-color: var(--color-light-green);
  color: var(--color-bg);
}

.cu-map {
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cu-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 15px;
}

/* ============================= */
/* 📱 Responsive desde 900px     */
/* ============================= */
@media (max-width: 900px) {
  .cu-section {
    height: auto; /* 🔄 Evita recortes verticales */
    padding: var(--padding-sections-mobile); /* 🔄 Reduce padding lateral */
  }

  .cu-container {
    flex-direction: column; /* 🔄 Apila los bloques */
    align-items: center;
    gap: 40px; /* 🔄 Espacio entre columna y mapa */
    height: auto;
  }

  .cu-info-column {
    text-align: center; /* 🔄 Centra textos */
    align-items: center;
  }

  .cu-info-column ul {
    text-align: center;
    padding-bottom: 10px;
  }

  .cu-info-column ul li {
    justify-content: center; /* 🔄 Centra íconos y texto */
  }

  .cu-button {
    margin: 20px auto 0 auto; /* 🔄 Centra el botón */
  }

  .cu-map {
    width: 100%;
    aspect-ratio: 1 / 1; /* 🔄 Mantiene proporción en móviles */
    height: auto;
  }

  .cu-map iframe {
    height: 100%;
  }
}