/* Cambia el color al pasar el cursor o al hacer clic */
.wp-block-site-title a:hover,
.wp-block-site-title a:active {
  color: #627aec !important;
  opacity: 1 !important;
}


/* ------------------------
   Soporte ancho amplio / completo (genérico)
   Pega esto en Apariencia → Personalizar → CSS adicional
   ------------------------ */

/* Wide (ancho amplio) — se centra y limita a una anchura máxima */
.entry-content .alignwide,
.wp-block .alignwide,
.wp-block-html .alignwide,
.alignwide {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
	text-align: center; /* centra todo el texto */
}

/* Full (ancho completo) — ocupa todo el viewport */
.entry-content .alignfull,
.wp-block .alignfull,
.wp-block-html .alignfull,
.alignfull {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

/* Imágenes dentro de bloques HTML: responsivas y sin desbordes */
.wp-block-html img,
.entry-content .wp-block-html img,
.wp-block .wp-block-html img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Evitar que en móviles el alignfull provoque scroll horizontal */
@media (max-width: 800px) {
  .alignfull,
  .wp-block-html .alignfull {
    position: static;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    width: auto;
    max-width: 100%;
  }
}

background-color: transparent;


.image-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-item {
  background: transparent;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
}

.grid-item.has-image {
  border: 2px solid rgba(255,255,255,0.05);
}

.grid-item img {
  position: absolute;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  transition: 
    filter 0.5s ease,
    transform 0.5s ease,
    box-shadow 0.5s ease,
    opacity 0.4s ease;
}

.grid-item .label {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  font-size: 11px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.4s;
  color: white;
  text-shadow: 0 0 5px black;
}

.grid-item.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 3px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

@keyframes circuitoGlow {
  0%   { clip-path: inset(0 100% 100% 0); }
  25%  { clip-path: inset(0 0 100% 0); }
  50%  { clip-path: inset(0 0 0 0); }
  75%  { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(100% 100% 0 0); }
}

/* Naranja */
.group-1.active img {
  filter: saturate(2.5) brightness(1.8) drop-shadow(0 0 20px #ff7b00);
  transform: scale(1.22);
}
.group-1.active::after {
  border-color: #ff7b00;
  opacity: 1;
  animation: circuitoGlow 3s linear infinite;
  box-shadow: 0 0 25px #ff7b00;
}

/* Verde Aqua */
.group-2.active img {
  filter: saturate(2.5) brightness(1.8) drop-shadow(0 0 20px #00fff2);
  transform: scale(1.22);
}
.group-2.active::after {
  border-color: #00fff2;
  opacity: 1;
  animation: circuitoGlow 3s linear infinite;
  box-shadow: 0 0 25px #00fff2;
}

/* Morado */
.group-3.active img {
  filter: saturate(2.5) brightness(1.8) drop-shadow(0 0 20px #b36bff);
  transform: scale(1.22);
}
.group-3.active::after {
  border-color: #b36bff;
  opacity: 1;
  animation: circuitoGlow 3s linear infinite;
  box-shadow: 0 0 25px #b36bff;
}

.active .label {
  opacity: 1;
}

@media (max-width: 700px) {
  .image-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
}