/* ========================================
   ESTILOS ESPECÍFICOS - Control e Iluminación
   ======================================== */

/* 1. Íconos de las cards (Residencial, Comercial, Industrial) */
/* Cambiar fondo a verde/amarillo (#d3d801) como el botón btn-primary */
section .card-zonit .w-16.h-16.bg-primary {
  background-color: #d3d801 !important;
}

/* Íconos en NEGRO para buen contraste con el fondo verde/amarillo */
section .card-zonit .bg-primary svg,
section .card-zonit .w-16.h-16 svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* 2. Botón "Ver más servicios" - SIEMPRE en BLANCO */
a.btn-secondary,
a[href="/automatizacion/"],
section a[href="/automatizacion/"] {
  background-color: transparent !important;
  color: white !important;
  border: 2px solid white !important;
}

a.btn-secondary:hover,
a[href="/automatizacion/"]:hover,
section a[href="/automatizacion/"]:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border-color: white !important;
}

/* Asegurar que el texto del botón sea blanco incluso con inline styles */
a[href="/automatizacion/"] span,
a.btn-secondary span {
  color: white !important;
}

/* 3. Sección "¿Listo para transformar tu iluminación?" */
/* Títulos en BLANCO sin emojis */
section.bg-bgLight h2 {
  color: #ffffff !important;
}

section.bg-bgLight p {
  color: #e5e7eb !important;
}

/* Nota: Emojis eliminados intencionalmente */