### Prefetching Configuration (JSON)

Source: https://www.estrategiadelcontenido.com/ideas/

This JSON configuration defines rules for prefetching resources on a website. It specifies conditions based on URL patterns and element selectors to determine which resources should be prefetched conservatively.

```json
{
  "prefetch": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/"
          },
          {
            "not": {
              "href_matches": [
                "/wp-*.php",
                "/wp-admin/*",
                "/wp-content/uploads/*",
                "/wp-content/*",
                "/wp-content/plugins/*",
                "/wp-content/themes/pruebas/*",
                "/wp-content/themes/twentytwentythree/*",
                "/*\?(.*)"
              ]
            }
          },
          {
            "not": {
              "selector_matches": "a[rel~=\"nofollow\"]"
            }
          },
          {
            "not": {
              "selector_matches": ".no-prefetch, .no-prefetch a"
            }
          }
        ]
      },
      "eagerness": "conservative"
    }
  ]
}
```

--------------------------------

### Google Analytics Initialization

Source: https://www.estrategiadelcontenido.com/ideas/

Initializes Google Analytics (gtag.js) by pushing configuration commands to the dataLayer. It sets linker domains, current date, and a developer ID for tracking purposes.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}
 gtag("set", "linker", {"domains":["www.estrategiadelcontenido.com"]});
 gtag("js", new Date());
 gtag("set", "developer_id.dZTNiMT", true);
 gtag("config", "G-95NGRKXE4Q");
```

--------------------------------

### WordPress Interactivity Import

Source: https://www.estrategiadelcontenido.com/contacto/

This JSON object specifies an import for WordPress interactivity scripts, pointing to a specific minified JavaScript file with a version parameter.

```json
{"imports":{"@wordpress\/interactivity":"https:\/\/www.estrategiadelcontenido.com\/wp-includes\/js\/dist\/script-modules\/interactivity\/index.min.js?ver=55aebb6e0a16726baffb"}}
```

--------------------------------

### Google Analytics Tracking Configuration

Source: https://www.estrategiadelcontenido.com/contacto/

This snippet configures Google Analytics tracking for the website. It initializes the dataLayer, defines the gtag function, and sets up the domain linking and developer ID for analytics.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}

gtag("set", "linker", {
  "domains": ["www.estrategiadelcontenido.com"]
});
gtag("js", new Date());
gtag("set", "developer_id.dZTNiMT", true);
gtag("config", "G-95NGRKXE4Q");
```

--------------------------------

### Prefetch Configuration

Source: https://www.estrategiadelcontenido.com/servicios-de-estrategia-de-contenidos/

JSON configuration object for prefetching resources. It defines conditions for prefetching documents, excluding specific paths and elements, and sets the eagerness level to 'conservative'.

```json
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/pruebas\/*","\/wp-content\/themes\/twentytwentythree\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
```

--------------------------------

### WordPress Interactivity Import

Source: https://www.estrategiadelcontenido.com/ideas/

Specifies the import path for the WordPress interactivity script module. This configuration is used to load essential JavaScript for enhancing WordPress site features and dynamic content.

```JSON
{"imports":{"@wordpress\/interactivity":"https:\/\/www.estrategiadelcontenido.com\/wp-includes\/js\/dist\/script-modules\/interactivity\/index.min.js?ver=55aebb6e0a16726baffb"}}
```

--------------------------------

### WordPress Interactivity Import

Source: https://www.estrategiadelcontenido.com/servicios-de-estrategia-de-contenidos/

Specifies the import path for the WordPress interactivity script module. This JSON object defines the module alias and its corresponding URL, essential for enabling dynamic features on WordPress sites.

```JSON
{"imports":{"@wordpress\/interactivity":"https:\/\/www.estrategiadelcontenido.com\/wp-includes\/js\/dist\/script-modules\/interactivity\/index.min.js?ver=55aebb6e0a16726baffb"}}
```

--------------------------------

### Global CSS Variables and Body Styles

Source: https://www.estrategiadelcontenido.com/contacto/

Defines core CSS variables for spacing, shadows, colors, and fonts, along with global body styles and root padding configurations. These establish the foundational look and feel of the website.

```css
:root {
  --wp--preset--spacing--20: clamp(0.75rem, 1.75vw, 1.5rem);
  --wp--preset--spacing--30: clamp(1.5rem, 3.5vw, 2.5rem);
  --wp--preset--spacing--40: clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem);
  --wp--preset--spacing--50: clamp(2.5rem, 8vw, 4.5rem);
  --wp--preset--spacing--60: clamp(3.75rem, 10vw, 7rem);
  --wp--preset--spacing--70: clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem);
  --wp--preset--spacing--80: clamp(7rem, 14vw, 11rem);
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
  --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
  --wp--style--global--content-size: 680px;
  --wp--style--global--wide-size: 1200px;
  --wp--style--root--padding-top: var(--wp--preset--spacing--40);
  --wp--style--root--padding-right: var(--wp--preset--spacing--30);
  --wp--style--root--padding-bottom: var(--wp--preset--spacing--40);
  --wp--style--root--padding-left: var(--wp--preset--spacing--30);
  --wp--style--block-gap: 1.5rem;
}
body {
  margin: 0;
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--system-font);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.6;
}
```

--------------------------------

### Layout and Block Alignment Styles

Source: https://www.estrategiadelcontenido.com/contacto/

Styles for managing content layout, including global padding, alignment classes (left, right, center), and layout modes like flow, constrained, flex, and grid. These ensure consistent spacing and positioning of content blocks.

```css
.wp-site-blocks {
  padding-top: var(--wp--style--root--padding-top);
  padding-bottom: var(--wp--style--root--padding-bottom);
}
.has-global-padding {
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}
.has-global-padding > .alignfull {
  margin-right: calc(var(--wp--style--root--padding-right) * -1);
  margin-left: calc(var(--wp--style--root--padding-left) * -1);
}
.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) {
  padding-right: 0;
  padding-left: 0;
}
.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull {
  margin-left: 0;
  margin-right: 0;
}
.wp-site-blocks > .alignleft {
  float: left;
  margin-right: 2em;
}
.wp-site-blocks > .alignright {
  float: right;
  margin-left: 2em;
}
.wp-site-blocks > .aligncenter {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
:where(.wp-site-blocks) > * {
  margin-block-start: 1.5rem;
  margin-block-end: 0;
}
:where(.wp-site-blocks) > :first-child {
  margin-block-start: 0;
}
:where(.wp-site-blocks) > :last-child {
  margin-block-end: 0;
}
:root :where(.is-layout-flow) > :first-child {
  margin-block-start: 0;
}
:root :where(.is-layout-flow) > :last-child {
  margin-block-end: 0;
}
:root :where(.is-layout-flow) > * {
  margin-block-start: 1.5rem;
  margin-block-end: 0;
}
:root :where(.is-layout-constrained) > :first-child {
  margin-block-start: 0;
}
:root :where(.is-layout-constrained) > :last-child {
  margin-block-end: 0;
}
:root :where(.is-layout-constrained) > * {
  margin-block-start: 1.5rem;
  margin-block-end: 0;
}
:root :where(.is-layout-flex) {
  gap: 1.5rem;
}
:root :where(.is-layout-grid) {
  gap: 1.5rem;
}
.is-layout-flow > .alignleft {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: 2em;
}
.is-layout-flow > .alignright {
  float: right;
  margin-inline-start: 2em;
  margin-inline-end: 0;
}
.is-layout-flow > .aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}
.is-layout-constrained > .alignleft {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: 2em;
}
.is-layout-constrained > .alignright {
  float: right;
  margin-inline-start: 2em;
  margin-inline-end: 0;
}
.is-layout-constrained > .aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto !important;
  margin-right: auto !important;
}
.is-layout-constrained > .alignwide {
  max-width: var(--wp--style--global--wide-size);
}
body .is-layout-flex {
  display: flex;
}
.is-layout-flex {
  flex-wrap: wrap;
  align-items: center;
}
.is-layout-flex > :is(*, div) {
  margin: 0;
}
body .is-layout-grid {
  display: grid;
}
.is-layout-grid > :is(*, div) {
  margin: 0;
}
```

--------------------------------

### Typography and Link Styles

Source: https://www.estrategiadelcontenido.com/contacto/

Defines styles for headings (h1-h6) and links, including font sizes, line heights, weights, and text transformations. Also includes hover and focus states for links to improve user interaction.

```css
a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--contrast);
  text-decoration: underline;
}
:root :where(a:where(:not(.wp-element-button))):hover {
  text-decoration: none;
}
:root :where(a:where(:not(.wp-element-button))):focus {
  text-decoration: underline dashed;
}
:root :where(a:where(:not(.wp-element-button))):active {
  color: var(--wp--preset--color--secondary);
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  line-height: 1.4;
}
h1 {
  font-size: clamp(2.032rem, 2.032rem + ((1vw - 0.2rem) * 2.896), 3.625rem);
  line-height: 1.2;
}
h2 {
  font-size: clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem);
  line-height: 1.2;
}
h3 {
  font-size: var(--wp--preset--font-size--x-large);
}
h4 {
  font-size: var(--wp--preset--font-size--large);
}
h5 {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  text-transform: uppercase;
}
h6 {
  font-size: var(--wp--preset--font-size--medium);
  text-transform: uppercase;
}
```

--------------------------------

### Core CSS Styles and Color Utilities

Source: https://www.estrategiadelcontenido.com/servicios-de-estrategia-de-contenidos/

This CSS defines global styles for headings, links, and buttons, along with utility classes for applying specific colors to text, backgrounds, and borders. It utilizes CSS variables for theme consistency and responsive typography.

```css
:root {
  /* Define CSS variables for colors and typography */
}

/* Link styling */
:root :where(a:where(:not(.wp-element-button)):hover) {
  text-decoration: none;
}
:root :where(a:where(:not(.wp-element-button)):focus) {
  text-decoration: underline dashed;
}
:root :where(a:where(:not(.wp-element-button)):active) {
  color: var(--wp--preset--color--secondary);
  text-decoration: none;
}

/* Heading typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.4;
}
h1 {
  font-size: clamp(2.032rem, 2.032rem + ((1vw - 0.2rem) * 2.896), 3.625rem);
  line-height: 1.2;
}
h2 {
  font-size: clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem);
  line-height: 1.2;
}
h3 {
  font-size: var(--wp--preset--font-size--x-large);
}
h4 {
  font-size: var(--wp--preset--font-size--large);
}
h5 {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  text-transform: uppercase;
}
h6 {
  font-size: var(--wp--preset--font-size--medium);
  text-transform: uppercase;
}

/* Button styling */
:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: var(--wp--preset--color--primary);
  border-radius: 0;
  border-width: 0;
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-decoration: none;
}
:root :where(.wp-element-button:visited, .wp-block-button__link:visited) {
  color: var(--wp--preset--color--contrast);
}
:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
:root :where(.wp-element-button:focus, .wp-block-button__link:focus) {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
:root :where(.wp-element-button:active, .wp-block-button__link:active) {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
}

/* Color utility classes */
.has-black-color { color: var(--wp--preset--color--black) !important; }
.has-cyan-bluish-gray-color { color: var(--wp--preset--color--cyan-bluish-gray) !important; }
.has-white-color { color: var(--wp--preset--color--white) !important; }
.has-pale-pink-color { color: var(--wp--preset--color--pale-pink) !important; }
.has-vivid-red-color { color: var(--wp--preset--color--vivid-red) !important; }
.has-luminous-vivid-orange-color { color: var(--wp--preset--color--luminous-vivid-orange) !important; }
.has-luminous-vivid-amber-color { color: var(--wp--preset--color--luminous-vivid-amber) !important; }
.has-light-green-cyan-color { color: var(--wp--preset--color--light-green-cyan) !important; }
.has-vivid-green-cyan-color { color: var(--wp--preset--color--vivid-green-cyan) !important; }
.has-pale-cyan-blue-color { color: var(--wp--preset--color--pale-cyan-blue) !important; }
.has-vivid-cyan-blue-color { color: var(--wp--preset--color--vivid-cyan-blue) !important; }
.has-vivid-purple-color { color: var(--wp--preset--color--vivid-purple) !important; }
.has-base-color { color: var(--wp--preset--color--base) !important; }
.has-contrast-color { color: var(--wp--preset--color--contrast) !important; }
.has-primary-color { color: var(--wp--preset--color--primary) !important; }
.has-secondary-color { color: var(--wp--preset--color--secondary) !important; }
.has-tertiary-color { color: var(--wp--preset--color--tertiary) !important; }

.has-black-background-color { background-color: var(--wp--preset--color--black) !important; }
.has-cyan-bluish-gray-background-color { background-color: var(--wp--preset--color--cyan-bluish-gray) !important; }
.has-white-background-color { background-color: var(--wp--preset--color--white) !important; }
.has-pale-pink-background-color { background-color: var(--wp--preset--color--pale-pink) !important; }
.has-vivid-red-background-color { background-color: var(--wp--preset--color--vivid-red) !important; }
.has-luminous-vivid-orange-background-color { background-color: var(--wp--preset--color--luminous-vivid-orange) !important; }
.has-luminous-vivid-amber-background-color { background-color: var(--wp--preset--color--luminous-vivid-amber) !important; }
.has-light-green-cyan-background-color { background-color: var(--wp--preset--color--light-green-cyan) !important; }
.has-vivid-green-cyan-background-color { background-color: var(--wp--preset--color--vivid-green-cyan) !important; }
.has-pale-cyan-blue-background-color { background-color: var(--wp--preset--color--pale-cyan-blue) !important; }
.has-vivid-cyan-blue-background-color { background-color: var(--wp--preset--color--vivid-cyan-blue) !important; }
.has-vivid-purple-background-color { background-color: var(--wp--preset--color--vivid-purple) !important; }
.has-base-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-contrast-background-color { background-color: var(--wp--preset--color--contrast) !important; }
.has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; }
.has-secondary-background-color { background-color: var(--wp--preset--color--secondary) !important; }
.has-tertiary-background-color { background-color: var(--wp--preset--color--tertiary) !important; }

.has-black-border-color { border-color: var(--wp--preset--color--black) !important; }
.has-cyan-bluish-gray-border-color { /* ... rest of border color classes */ }
```

--------------------------------

### JavaScript Skip Link Implementation

Source: https://www.estrategiadelcontenido.com/contacto/

This JavaScript code dynamically creates and injects a 'skip to content' link into the DOM. It targets the main content area and ensures accessibility by allowing keyboard users to bypass navigation. It handles cases where the target element or its ID might be missing.

```javascript
( function() {
  var skipLinkTarget = document.querySelector( 'main' ),
    sibling,
    skipLinkTargetID,
    skipLink;

  // Early exit if a skip-link target can't be located.
  if ( ! skipLinkTarget ) {
    return;
  }

  /*
   * Get the site wrapper.
   * The skip-link will be injected in the beginning of it.
   */
  sibling = document.querySelector( '.wp-site-blocks' );

  // Early exit if the root element was not found.
  if ( ! sibling ) {
    return;
  }

  // Get the skip-link target's ID, and generate one if it doesn't exist.
  skipLinkTargetID = skipLinkTarget.id;
  if ( ! skipLinkTargetID ) {
    skipLinkTargetID = 'wp--skip-link--target';
    skipLinkTarget.id = skipLinkTargetID;
  }

  // Create the skip link.
  skipLink = document.createElement( 'a' );
  skipLink.classList.add( 'skip-link', 'screen-reader-text' );
  skipLink.id = 'wp-skip-link';
  skipLink.href = '#' + skipLinkTargetID;
  skipLink.innerText = 'Saltar al contenido';

  // Inject the skip link.
  sibling.parentElement.insertBefore( skipLink, sibling );
}() );
```

--------------------------------

### Google Analytics Tracking Snippet

Source: https://www.estrategiadelcontenido.com/servicios-de-estrategia-de-contenidos/

This JavaScript code configures Google Analytics for the website. It initializes the dataLayer, defines a gtag function for sending data, sets a linker domain for cross-domain tracking, and configures the analytics property.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}

gtag("set", "linker", {
  "domains": ["www.estrategiadelcontenido.com"]
});
gtag("js", new Date());
gtag("set", "developer_id.dZTNiMT", true);
gtag("config", "G-95NGRKXE4Q");
```

--------------------------------

### SearchWP Modal Styling and Animations

Source: https://www.estrategiadelcontenido.com/ideas/

Defines the visual appearance and interactive animations for the SearchWP modal search form. This includes overlay positioning, container styling, content layout, and keyframe animations for smooth transitions.

```CSS
.searchwp-modal-form { display: none; } .searchwp-modal-form.is-open { display: block; } /\* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
```

--------------------------------

### JavaScript Skip Link Implementation

Source: https://www.estrategiadelcontenido.com/servicios-de-estrategia-de-contenidos/

This JavaScript code dynamically creates and injects a 'skip to content' link into the DOM. It targets the main content area and ensures accessibility by allowing keyboard users to bypass navigation. It handles cases where the target element or its ID might be missing.

```javascript
( function() {
  var skipLinkTarget = document.querySelector( 'main' ),
    sibling,
    skipLinkTargetID,
    skipLink;

  // Early exit if a skip-link target can't be located.
  if ( ! skipLinkTarget ) {
    return;
  }

  /*
   * Get the site wrapper.
   * The skip-link will be injected in the beginning of it.
   */
  sibling = document.querySelector( '.wp-site-blocks' );

  // Early exit if the root element was not found.
  if ( ! sibling ) {
    return;
  }

  // Get the skip-link target's ID, and generate one if it doesn't exist.
  skipLinkTargetID = skipLinkTarget.id;
  if ( ! skipLinkTargetID ) {
    skipLinkTargetID = 'wp--skip-link--target';
    skipLinkTarget.id = skipLinkTargetID;
  }

  // Create the skip link.
  skipLink = document.createElement( 'a' );
  skipLink.classList.add( 'skip-link', 'screen-reader-text' );
  skipLink.id = 'wp-skip-link';
  skipLink.href = '#' + skipLinkTargetID;
  skipLink.innerText = 'Saltar al contenido';

  // Inject the skip link.
  sibling.parentElement.insertBefore( skipLink, sibling );
}() );
```