/* img[src$=".svg"] {
    width: inherit !important;
    height: auto;
  } */

.wp-block-site-logo img {
  width: 100%;
}

.fit-content {
	width:fit-content !important;
}
/*
input[type="text"], 
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"], 
select,
textarea {
    font-size:1.1rem;
    padding:10px 5px;
    margin-bottom:10px;
    width:100%;
    transition:.3s ease all;
    outline:none;
    font-family:inherit;
	border:1px solid inherit
}

textarea {
    field-sizing:content;
    line-height:1.5;
}

input[type="submit"], button[type="submit"] {
    background:var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary-contrast) !important;
    border:1px solid var(--wp--preset--color--primary);
    font-family: inherit;
    transition:.4s ease all;
    cursor:pointer;
    padding:.75rem 2rem;
    border-radius:200px;
}
input[type="submit"]:hover, button[type="submit"]:hover {
    border-color:var(--wp--preset--color--secondary);
      background:var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--secondary-contrast) !important;
}*/

.wp-block-template-part {
  margin-top: 0px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea {
  padding-left: 15px;
  padding-right: 15px;
  transition: .3s ease all;
  outline: none;
  font-family: inherit;
}

button.wp-block-search__button.has-icon.wp-element-button {
  aspect-ratio: 1/1;
  padding: 3px;
}

/*Ocultamiento */

@media screen and (min-width: 1024px) {
  html .no-desktop {
    display: none !important;
  }
}

@media screen and (min-width: 681px) and (max-width: 1023px) {
  html .no-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 680px) {
  html .no-mobile {
    display: none !important;
  }
}




/*Convertir terminos de categorias en badges*/
.badge-terms {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge-terms li a {
  border: 1px solid var(--wp--preset--color--primary);
  line-height: 1;
  padding: 4px 10px;
  display: block;
  text-decoration: none;
  color: var(--wp--preset--color--primary);
  border-radius: 60px;
  transition: .3s ease all;

}

.badge-terms li a:hover {
  color: var(--wp--preset--color--primary-contrast);
  background: var(--wp--preset--color--primary);
}

/*------------------------*/

/*Mejora de la paginación del bucle*/
.wp-block-query-pagination-numbers {
  display: flex !important;
  gap: 5px !important;
}

.page-numbers {
  border: 1px solid var(--wp--preset--color--dark);
  aspect-ratio: 1/1;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  text-decoration: none;
  color: var(--wp--preset--color--dark);
  transition: .3s ease all;
}

a.wp-block-query-pagination-next,
a.wp-block-query-pagination-previous {
  border: 1px solid var(--wp--preset--color--dark);
  color: var(--wp--preset--color--dark);
  border-radius: 10px;
  text-decoration: none;
  padding: 2px 15px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s ease all;
}

a.wp-block-query-pagination-next:hover,
a.wp-block-query-pagination-previous:hover,
.page-numbers:hover,
.page-numbers.current {
  color: white;
  background: var(--wp--preset--color--secondary);
  border-color: var(--wp--preset--color--secondary);
}

/*------------------------*/

/* 1. Preparamos el contenedor principal */
.wp-block-cover.bg-puntos-animados {
    position: relative !important;
    overflow: hidden !important;
}

/* 2. Creamos los puntos en una capa superior al fondo de WP pero inferior al texto */
.wp-block-cover.bg-puntos-animados::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Configuración de los puntos */
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1.2px, transparent 1.2px) !important;
    background-size: 45px 45px !important;
    
    /* La animación */
    animation: moverPuntosGutenberg 120s linear infinite !important;
    
    /* CAPA CLAVE: 
       El fondo de WP suele ser z-index 0 o 1. 
       Al poner esto en 2, nos aseguramos de que esté por encima del color */
    z-index: 2 !important; 
    pointer-events: none !important;
}

/* 3. Forzamos que el contenido real esté siempre por encima de los puntos */
.wp-block-cover.bg-puntos-animados .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 3 !important;
}

/* 4. Ajuste para la capa de color/overlay de WordPress */
.wp-block-cover.bg-puntos-animados .wp-block-cover__background {
    z-index: 1 !important;
}

/* Animación fluida */
@keyframes moverPuntosGutenberg {
    from { background-position: 0 0; }
    to { background-position: 450px 900px; }
}

/* CLASE: bg-grid-tecnico */
.wp-block-cover.bg-grid-tecnico {
    position: relative !important;
    overflow: hidden !important;
}

.wp-block-cover.bg-grid-tecnico::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Creamos líneas horizontales y verticales */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px; /* Tamaño del cuadrado de la rejilla */
    z-index: 2 !important;
    pointer-events: none !important;
}

.wp-block-cover.bg-grid-tecnico .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 3 !important;
}

/* CLASE: bg-aurora */
.wp-block-cover.bg-aurora {
    position: relative !important;
    overflow: hidden !important;
    background-color: #050505 !important; /* Fondo base muy oscuro */
}

.wp-block-cover.bg-aurora::before {
    content: "" !important;
    position: absolute !important;
    width: 150%; height: 150%;
    top: -25%; left: -25%;
    /* Dos focos de color que se mezclan */
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 124, 240, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(130, 71, 229, 0.2) 0%, transparent 50%);
    filter: blur(100px);
    animation: rotarAurora 20s linear infinite;
    z-index: 2 !important;
}

@keyframes rotarAurora {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* CLASE: bg-scanlines */
.wp-block-cover.bg-scanlines {
    position: relative !important;
    overflow: hidden !important;
}

.wp-block-cover.bg-scanlines::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Líneas horizontales repetitivas */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 100% 4px; /* Grosor de la línea */
    z-index: 2 !important;
    animation: moverLineas 10s linear infinite;
}

@keyframes moverLineas {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}