Oxygenados Com

                    @media (pointer: coarse) {
  /* tus estilos para dispositivos táctiles  */
}
                  

                    // A Button that scrolls the page down from section to section smoothly
// Button needs to be positioned absolutely and design using css or a builder
// Here is the demo of this button in use https://youtu.be/_JZ9k0kT7yY?t=382

window.addEventListener('DOMContentLoaded', () => { 
    const button = document.querySelector('.carret-down');
    const sections = document.querySelectorAll('.waypoint');
     
    function* goToNextSection(event) { 
        let i = 1, max = sections.length;
        while (true) {
            yield event[i++]
            i %= max;
        }
    }
    const buttonClicked = goToNextSection(sections);

    button.addEventListener('click', (e) => { 
        e.preventDefault();
        buttonClicked.next().value.scrollIntoView({ behavior: "smooth", block: "center"});
        }
    );
});
                  

                    <?php
$campo_relacion = get_field('relazion_gen', get_the_ID());

if ($campo_relacion) {
    foreach ($campo_relacion as $producto_relacionado) {
        $producto_id = $producto_relacionado->ID;
        $titulo = get_the_title($producto_id);
        $url = get_permalink($producto_id);
        $imagen = get_the_post_thumbnail($producto_id, 'thumbnail'); 
    }
}
?>
                  

                    <div class="secciones-contenedor">
<?php
function obtieneImagen($id,$clase){
    $imagen_id = get_term_meta($id);
    $img = $imagen_id['piotnetgrid_term_image'][0];
    $image = wp_get_attachment_url($img);
	($image) ? $muestraImagen = '<img class="secciones-div__'.$clase.'-imagen" src="'.$image.'">' : $muestraImagen= "";
	return $muestraImagen;
}
function obtieneColor($id){
    $color_id = get_term_meta($id);
    $piotnetColor = $color_id['piotnetgrid_term_color'][0];
	return '#'.$piotnetColor;
}
	
// Obtener todas las categorías
$categories = get_categories();
$tags = get_tags();
// Recorrer cada categoría
foreach ( $categories as $category ) {
    // Obtener el link a la categoría
    $category_link = get_category_link( $category->term_id );
    $categoryId = $category->term_id ;
	$imagenCat = obtieneImagen($categoryId, 'categoria');	
	// echo '<pre>'; print_r($terminos); echo '</pre>';
	  // Imprimir el nombre de la categoría
	
	?>
	<div class="secciones-contenedor-grupo"> 
    <div class="secciones-div__enlaceCat"><?php echo $imagenCat; ?><a href="<?php echo esc_url( $category_link ).' ">' . $category->name . '</a></div>';		
   foreach ($tags as $tag) {
	   $tagId = $tag->term_id;
        $args = array(
            'posts_per_page' => -1,
            'post_type' => 'post',
            'post_status' => 'publish',
            'tag_id' => $tagId,
        );
    $posts = get_posts($args);	   
	$i = 0;
	$salida = "";
    $tag_count = $tag->count;
	$catColor = obtieneColor($tagId);
	   
    foreach ($posts as $post) {     
        $lacat = get_the_category($post->ID);
        if ($lacat[0]->term_id == $categoryId )	{
          $salida .=  '<a style="color:'.$catColor.'" class="secciones-enlaces__posts" href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a>';
		  $i++;
		}
   }
	   $conImagen = obtieneImagen($tagId,'etiqueta');
	   (!$conImagen)? $divColor = '<div class="seccion-div-decorativa" style="background-color:'.$catColor.'"></div>': $divColor = "";
	   
		($i < 1 ) ? $DivEnlaceTag = "" : $DivEnlaceTag = '<div class="secciones-div-conjunto__datos" style="border:1px solid '.$catColor.'" ><div class="secciones-div__enlaceTag">'.$divColor.$conImagen.'<a href="'. get_tag_link($tagId) .'" style="color:'.$catColor.'">'.$tag->name.'</a><num class="secciones-tag__num" style="color:'.$catColor.'">('.$i.')</num></div>';
	   if ($i > 0 ) echo $DivEnlaceTag.'<div class="secciones-div__enlaces-posts">'.$salida.'</div></div>';
 }
 echo '</div>';
}
?>
</div>
                  

                    function removeTransition(e){
    if(e.propertyName !== 'transform') return //Si no transform anula
    this.classList.remove('la-clase')
}

const keys = document.querySelectorAll('.key')
keys.forEach(key => key.addEventListener('transitionend', removeTransition))

/***  Referencia ***/
//https://courses.wesbos.com/account/access/65b79e1fc78021d87dae1fa2/view/194130650
//Pieces https://juanjota.pieces.cloud/?p=7b4944918f
//Archivos --> https://github.com/wesbos/JavaScript30