/*
Theme Name: TodoCañuelas Theme
Theme URI: http://example.com/todocanuelas
Author: Cline
Author URI: http://example.com
Description: Una plantilla de WordPress personalizada para TodoCañuelas, clonando la estética y funcionalidad de index.html.
Version: 1.0
Text Domain: todocanuelas
*/

.hero__icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Ajuste para mobile */
  gap: 1rem; /* Espacio entre íconos */
  justify-items: center; /* Centrar los elementos en la grilla */
}

@media (min-width: 768px) { /* Para desktop */
  .hero__icons {
    grid-template-columns: repeat(5, minmax(80px, 1fr)); /* 5 columnas para desktop */
    gap: 2rem; /* Espacio entre íconos en desktop */
  }
}

.hero__icons li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; /* w-16 */
  height: 64px; /* h-16 */
  padding: 1rem; /* p-4 */
  border-radius: 9999px; /* rounded-full */
  background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
  transition-property: background-color;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors duration-300 */
}

.hero__icons li a:hover {
  background-color: rgba(255, 255, 255, 0.3); /* hover:bg-white/30 */
}

.hero__icons li i {
  font-size: 1.5rem; /* text-2xl */
  color: white;
}

.hero__icons li .group-hover\:block {
  display: none;
}

.hero__icons li:hover .group-hover\:block {
  display: block;
}

.hero__icons li .group-hover\:opacity-100 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__icons li:hover .group-hover\:opacity-100 {
  opacity: 1;
}

/* Estilos para los títulos de los widgets en el footer */
/* Estilos para los títulos de los widgets en el footer */
/* Estilos para los títulos de los widgets en el footer */
/* Estilos para los títulos de los widgets en el footer */
/* Se eliminan las reglas CSS redundantes ya que las clases de Tailwind se aplican directamente en el HTML */

/* Estilos para las listas y enlaces dentro de los widgets del footer */
.footer-column ul { /* Aplicar a todas las listas dentro de footer-column */
  list-style: none !important; /* Eliminar viñetas */
  padding-left: 0 !important; /* Eliminar padding predeterminado de la lista */
}

.footer-column .textwidget ul li a,
.footer-column ul li { /* Asegurar que los elementos de lista y enlaces tengan el tamaño correcto */
  font-size: 11px !important; /* Ajustado a 11px */
  display: block; /* Asegura que los enlaces estén en columna */
  padding: 0.2rem 0 !important; /* Espaciado vertical para los enlaces, con !important */
  list-style: none !important; /* Eliminar viñetas directamente en li */
  padding-left: 0 !important; /* Eliminar padding predeterminado de li */
  text-align: left !important; /* Alineado a la izquierda */
}

/* Ajustar la alineación de la columna del footer para que los elementos internos puedan alinearse a la izquierda */
.footer-column {
  text-align: left !important;
  align-items: flex-start !important; /* Para anular flex items-center */
}