/* ==========================================================================
   Basic styles
   ========================================================================== */
   /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
   /* Document
   ========================================================================== */
   /**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
   html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
   /* Sections
   ========================================================================== */
   /**
 * Remove the margin in all browsers.
 */
   body {
  margin: 0;
}
   /**
 * Render the `main` element consistently in IE.
 */
   main {
  display: block;
}
   /**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
   h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
   /* Grouping content
   ========================================================================== */
   /**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
   hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
   /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
   pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
   /* Text-level semantics
   ========================================================================== */
   /**
 * Remove the gray background on active links in IE 10.
 */
   a {
  background-color: transparent;
}
   /**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
   abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
   /**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
   b,
strong {
  font-weight: bolder;
}
   /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
   code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
   /**
 * Add the correct font size in all browsers.
 */
   small {
  font-size: 80%;
}
   /**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
   sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
   sub {
  bottom: -0.25em;
}
   sup {
  top: -0.5em;
}
   /* Embedded content
   ========================================================================== */
   /**
 * Remove the border on images inside links in IE 10.
 */
   img {
  border-style: none;
}
   /* Forms
   ========================================================================== */
   /**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
   button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
   /**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
   button,
input { /* 1 */
  overflow: visible;
}
   /**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
   button,
select { /* 1 */
  text-transform: none;
}
   /**
 * Correct the inability to style clickable types in iOS and Safari.
 */
   button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
   /**
 * Remove the inner border and padding in Firefox.
 */
   button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
   /**
 * Restore the focus styles unset by the previous rule.
 */
   button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
   /**
 * Correct the padding in Firefox.
 */
   fieldset {
  padding: 0.35em 0.75em 0.625em;
}
   /**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
   legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
   /**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
   progress {
  vertical-align: baseline;
}
   /**
 * Remove the default vertical scrollbar in IE 10+.
 */
   textarea {
  overflow: auto;
}
   /**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
   [type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
   /**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
   [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
   /**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
   [type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
   /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
   [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
   /**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
   ::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
   /* Interactive
   ========================================================================== */
   /*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
   details {
  display: block;
}
   /*
 * Add the correct display in all browsers.
 */
   summary {
  display: list-item;
}
   /* Misc
   ========================================================================== */
   /**
 * Add the correct display in IE 10+.
 */
   template {
  display: none;
}
   /**
 * Add the correct display in IE 10.
 */
   [hidden] {
  display: none;
}
   @font-face {
    font-family:JetBrainsMono;
    font-display: swap;
    src:url(/static/site/fonts/JetBrainsMono-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: regular;
}
   @font-face {
    font-family:JetBrainsMono;
    font-display: swap;
    src:url(/static/site/fonts/JetBrainsMono-Italic.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
}
   @font-face {
    font-family:JetBrainsMono;
    font-display: swap;
    src:url(/static/site/fonts/JetBrainsMono-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: bold;
}
   @font-face {
    font-family:JetBrainsMono;
    font-display: swap;
    src:url(/static/site/fonts/JetBrainsMono-Medium.woff2) format("woff2");
    font-weight: 600;
    font-style: medium;
}
   @font-face {
    font-family: Satoshi;
    font-display: swap;
    src: url(/static/site/fonts/Satoshi-Variable.woff2) format("woff2");
    font-weight: 400 900;
    font-style: normal;
}
   /* ==========================================================================
   Vaiables
   ========================================================================== */
   :root {

    --color-bg: hsl(0, 0%, 87%);
    /* --color-fg:color-mix(in srgb, var(--color-bg) 10%, var(--color-accent)); */
    --color-fg : hsl(0, 0%, 0%);
    /* --color-accent: hsl(122, 100%, 73%); */
    /* --color-accent: hsl(122, 98%, 76%); */
    /* --color-accent: hsl(122, 96%, 68%); */
    --color-accent: hsl(128, 71%, 56%);
    /* --color-accent: hsl(0, 0%, 90%); */
    /* --color-accent-alt: hsl(64, 96%, 81%); */
    /* --color-accent-alt: hsl(122, 100%, 86%); */
    --color-accent-alt: hsl(0, 0%, 95%);
    /* --color-accent-alt: hsl(0, 74%, 60%); */
/* Colors
    ========================================================================== */
    /* &[data-theme="light"] {
        color-scheme: light;
        --color-bg: hsl(240, 10%, 92%);
        --color-fg:color-mix(in srgb, var(--color-bg) 20%, var(--color-accent));
        --color-accent: hsl(0, 0%, 10%) ;
    }
    &[data-theme="dark"] {
        color-scheme: dark;
        --color-bg: hsl(247, 10%, 18%);
        --color-fg: color-mix(in srgb, var(--color-bg) 50%, var(--color-accent));
        --color-accent: hsl(0, 0%, 100%);
    } */

    --satoshi: 'Satoshi', sans-serif;
    --jetbrains: 'JetBrainsMono', monospace;
/* SFont-size
    ========================================================================== */
    --fs-caption-s: .75rem;
    --fs-caption: .813rem;
    --fs-body: 1rem;
    --fs-body-m: 1.45rem;
    --fs-body-l: 2rem;

/* Spaces
    ========================================================================== */
    --space-1: 1rem;


    --map-detail-width: min(100vw, 650px);

    --header-height: 80.7833px;
    --map-options-height: 45px;


/*  Wrappers
    ========================================================================== */
    --wrapper-s: min(calc(100% - calc(var(--space-1) * 4)), 768px);

}
   /* ==========================================================================
    Breakpoints
    ========================================================================== */
   *,
*::before,
*::after {
    box-sizing: border-box;
}
   html {
    scroll-behavior: smooth;
    background-color: var(--color-bg);
    color: var(--color-fg);
    line-height: 115%;
    /* main a {
        color: var(--color-accent);
        &:hover {
            color: var(--color-fg);
        }
    } */
}
   body {
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
    font-family: var(--jetbrains);
    text-rendering: auto;
    min-height: 100dvh;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
}
   h1, h2, h3, h4, h5, h6 {
    font-family: var(--satoshi);
    font-weight: 900;
}
   iframe {
    border: none;
    width: 100%;
    height: auto;
}
   figure {
    margin-inline: 0;
}
   img {
    vertical-align: middle;
    width: auto;
    max-width: 100%;
}
   /* accesibility skip link */
   #skip-link {
    position: absolute;
    top: -100vh;
    background-color: var(--color-bg);
    color: var(--color-fg);
    padding: calc(var(--space-1) / 2) var(--space-1);
    border: 1px solid var(--color-fg);
    border-radius: 2px;
    margin: 1rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    text-decoration: none;
    z-index: 2;
}
   #skip-link:focus-visible {
      outline: 3px solid var(--color-fg);
      top: var(--space-1);
      left: var(--space-1);
    }
   /* demo */
   .main {
    /* margin-block: var(--space-1);
    padding-block: calc(var(--space-1) * 2); */
    flex-grow: 1;
    /* border-block: 1px solid color-mix(in srgb, var(--color-fg), transparent 80%); */

    /* > * {
        max-width: var(--wrapper-s);
    } */
}
   .header,
.map-options,
.footer {
    padding: calc(var(--space-1) * 1) calc(var(--space-1) * 1);
}
   @media(min-width: 900px){
   .header,
.map-options,
.footer {
        padding: calc(var(--space-1) * 1) calc(var(--space-1) * 2)
}
    }
   .main {

    padding-inline: calc(var(--space-1) * 1);
}
   @media(min-width: 900px){
   .main {
        padding-inline: calc(var(--space-1) * 2)
}
    }
   .rolling-text-js {
	overflow: hidden;
	display: inline-block;
    height: 1.3em;
    line-height: 1.3;
}
   .rolling-text-js:hover .letter {
	    transform: translateY(-100%);
    }
   .rolling-text-js .letter {
        display: inline-block;
        transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1);
    }
   img {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
   img.img-loaded {
        opacity: 1;
    }
   /* ==========================================================================
   Ui
   ========================================================================== */
   .hide {
    display: none;
}
   /* MIX --production use just 4 level on postcss nested*/
   .form-switch {
    /* label.focus span.container,
    label:hover span.container {
        background-color: red;
    } */
}
   .form-switch svg {
        vertical-align: middle;
    }
   .form-switch svg * {
            fill: var(--color-bg);
        }
   .form-switch svg {
        margin-bottom: 1px;
}
   .form-switch .label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        padding: calc(var(--space-1) / 2);
    }
   .form-switch .label:not(:last-child) {
            margin-bottom: calc(var(--space-1) / 2);
        }
   .form-switch .label input[role="switch"] {
            opacity: 0;

        }
   .form-switch .label input[role="switch"]~ .form-switch-state {
                --container-width: 60px;
                --container-height: 24px;
                --offset: 4px;
                display: flex;
                align-items: center;
                -webkit-user-select: none;
                   -moz-user-select: none;
                    -ms-user-select: none;
                        user-select: none;
            }
   .form-switch .label input[role="switch"]~ .form-switch-state > .container {
                opacity: .4;
                display: flex;
                align-items: center;
                position: relative;
                -moz-column-gap: calc(var(--space-1) / 2);
                     column-gap: calc(var(--space-1) / 2);
                border: 1px solid var(--color-bg);
                width: var(--container-width);
                height: calc(var(--container-height) + var(--offset));
                border-radius: var(--container-height);
                padding: var(--offset);
                margin-right: calc(var(--space-1) / 2);
            }
   .form-switch .label input[role="switch"]~ .form-switch-state > .container > .position {
                position: relative;
                border-radius: 50%;
                width: calc(var(--container-height) - var(--offset));
                height: calc(var(--container-height) - var(--offset));
                background-color: var(--color-bg);
                left: 0;
                transition: left .125s ease-in-out;
            }
   .form-switch .label input[role="switch"]:not(:checked) ~ .form-switch-state span.on,
            .form-switch .label input[role="switch"]:checked ~ .form-switch-state > span.off {
                display: none;
            }
   .form-switch .label input[role="switch"]:checked ~ .form-switch-state > .container  {
                opacity: 1;
            }
   .form-switch .label input[role="switch"]:checked ~ .form-switch-state > .container > .position {
                    left: calc(var(--container-width) - var(--container-height) - var(--offset) - 1px);
                }
   .form-switch .label input[role="switch"]:disabled,
            .form-switch .label input[role="switch"]:disabled:checked {
                cursor: not-allowed;
            }
   .form-switch .label input[role="switch"]:disabled~ .form-switch-state > .container, .form-switch .label input[role="switch"]:disabled:checked~ .form-switch-state > .container {
                    opacity: .5;
                }
   .form-switch label.focus,
    .form-switch label:hover {
        outline: none;
        cursor: pointer;
        outline: 1px solid var(--color-bg);
    }
   .form-switch label.focus:has(input[role="switch"]:checked:disabled), .form-switch label:hover:has(input[role="switch"]:checked:disabled) {
            outline: none;
            pointer-events: none;
        }
   /* ==========================================================================
   Components
   ========================================================================== */
   /* common */
   .block-iframe,
.block-text,
.block-figure,
.block-download {
    margin-block: var(--space-1);
}
   .block-download {
    display: inline-block;
    padding: calc(var(--space-1) / 2) var(--space-1);
    border: 1px solid var(--color-fg);
    color: var(--color-fg);
    text-decoration: none;
}
   .block-download::before {
        content: "↓";
        margin-right: var(--space-1);
    }
   .block-download:hover {
        background-color: var(--color-fg);
        color: var(--color-bg);
    }
   .block-figure a {
        display: block;
    }
   /* Component for cookies advise */
   /*this component is just in case we need block content. Add in common-cookies.blade*/
   /* .cookies-advise-block {} */
   .cookies-advise {
    background-color: var(--color-fg);
    color: var(--color-bg);
    position: fixed;
    z-index: 9000;
    bottom: 0;
    right: 0;
    width: min(420px, 100%);
    padding: var(--space-1);
    font-size: var(--fs-caption);
}
   .cookies-advise-info h3, .cookies-advise-info h4 {
        font-size: var(--fs-body);
        margin: 0;
    }
   .cookies-advise-info .block-text {
        margin-top: 0;
    }
   .cookies-advise-info a {
        color: var(--color-bg);
    }
   .cookies-advise-description {
    margin-top: .5rem;
}
   .cookies-advise-actions {
    border: 1px solid var(--color-bg);
    display: flex;
    flex-wrap: wrap;
}
   .cookies-advise-actions >* {
        flex: 1;
        padding: 1rem .5rem;
        text-align: center;

        vertical-align: middle;
        background-color: transparent;
        border: none;
    }
   .cookies-advise-actions >*:first-child {
            border-right: 1px solid var(--color-bg);
        }
   .cookies-advise-actions >* {
        color: var(--color-bg);
        text-decoration: none;
}
   .cookies-advise-actions >*:hover {
            background-color: var(--color-bg);
            color: var(--color-fg);
        }
   .cookies-advise-actions >*:focus-visible {
            outline: 3px solid var(--color-bg);
        }
   .cookies-advise-preferences fieldset {
        border: 1px solid var(--color-bg);
        margin: calc(var(--space-1) * 1.5) 0;
      }
   .cookies-advise-preferences legend {
        font-size: var(--fs-caption);
        padding-inline: calc(var(--space-1) / 2);
      }
   .search {
    flex: 1;
}
   .search fieldset {
        margin: 0;
        border: none;
        padding: 0;
    }
   .search legend:not(:focus):not(:active), .search label:not(:focus):not(:active) {
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            -webkit-clip-path: inset(50%);
                    clip-path: inset(50%);
            position: absolute;
            white-space: nowrap;
        }
   .search {
    font-size: var(--fs-caption);
}
   .search button {
        display: none;
    }
   .search input {
        padding: calc(var(--space-1) / 2);
        width: 100%;
        min-width: 200px;
    }
   .promo {
    --height: 50dvh;

    position: relative;
    height: var(--height);
}
   .promo figure {
        position: absolute;
        z-index: -1;
        margin: 0;
        inset: 0;
    }
   .promo figure::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%);
        }
   .promo img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        -o-object-fit: cover;
           object-fit: cover;
    }
   /* state when user use url input in scms promo */
   .promo .has-link {
        display: block;
        height: 100%;
        text-decoration: none;
    }
   .promo .has-link:hover figure::before {
                background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
            }
   .promo-content {
    padding: calc(var(--space-1) * 2);
    height: 100%;
    display: grid;
}
   .promo-info {
    align-self: end;
    color: var(--color-bg);
}
   .promo-info p {
        font-size: clamp(var(--fs-caption), 5vw, var(--fs-body-m));
    }
   .promo-info a {
        color: var(--color-bg);
    }
   .promo-info-title {
    font-size: clamp(var(--fs-body), 5vw, var(--fs-body-l));
    margin-block: 1.5rem;
}
   .pagination {
    font-size: var(--fs-body);
    margin-block: var(--space-1);

}
   .pagination svg {
		width: 40px;
		height: 40px;
        fill: var(--color-fg);
        vertical-align: middle;
    }
   .pagination span[aria-disabled="true"] {
        opacity: 0.5;
    }
   .prev-next {
    display: none;
}
   .pagination-info >p {
        font-size: var(--fs-caption);
    }
   .pagination-info-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--space-1) / 2);
}
   .pagination-page {
    background-color: var(--color-fg);
    color: var(--color-bg);
    text-decoration: none;
    text-align: center;
    padding: calc(var(--space-1) / 2) var(--space-1);
}
   .pagination-page:hover {
        background-color: var(--color-bg);
        color: var(--color-fg);
    }
   .current-page {
    padding: calc(var(--space-1) / 2) var(--space-1);
}
   .related-category {
    margin: 0;
    text-decoration: none;
    font-size: var(--fs-caption);
}
   .related-tags {
    display: inline-flex;
    flex-wrap: wrap;
    -moz-column-gap: calc(var(--space-1) * 1.5);
         column-gap: calc(var(--space-1) * 1.5);
    row-gap:  calc(var(--space-1) / 8);
    list-style-type: none;
    margin-inline: 0;
    padding: 0;
    font-size: var(--fs-caption);
}
   /* li {
        display: flex;
        align-items: center;
        column-gap: calc(var(--space-1) / 4);
        &::before {
            content: "◉";
            font-size: 22px;
            color: var(--color-fg);
        }
    } */
   .related-tags li.is-inactive {
            opacity: .3;
        }
   .related-tags a {
        text-decoration: none;
        color: var(--color-fg);
        font-weight: 700;
        text-transform: uppercase;
    }
   .related-tags a:hover {
            color: var(--color-fg);
        }
   .entries-list-item .related-tags a {
            /* transform: skewY(-8deg); */
        }
   .related-share h3 {
        font-size: var(--fs-body);
        margin: 0;
    }
   .related-share ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
   .related-comments {
}
   .related-prev-next {}
   .related-prev {}
   .related-next {}
   .related-msg {}
   .is-error {
    color: rgb(246, 53, 53);
}
   .is-advise {
    color: rgb(230, 181, 65);
}
   .is-right {
    color: rgb(23, 206, 121);
}
   /* search results*/
   .related-results {}
   .related-results-search{}
   .related-results-cat{}
   .related-results-tags{
    font-size: var(--fs-caption-s);
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--color-fg);
    margin-top: calc(var(--space-1) * .5);
}
   .related-results-tags a {
        color: var(--color-fg);
    }
   .related-results-tags svg {
        width: 14px;
        height: 14px;
        margin-bottom: .05rem;
    }
   .related-results-tags svg path {
            stroke-width: 2px;
        }
   .related-results-tags:has(svg) {
        display: flex;
        align-items: center;
        gap: calc(var(--space-1) / 2);
        vertical-align: middle;
    }
   .related-results-tabs {
    margin-block: calc(var(--space-1) * 2);
}
   .related-results-tabs ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
    }
   .related-results-tabs ul a {
            border: 1px solid var(--color-fg);
            padding: calc(var(--space-1) / 2) var(--space-1);
            text-decoration: none;
        }
   .related-results-tabs ul a:hover {
                background-color: var(--color-fg);
                color: var(--color-bg);
            }
   .related-results-tabs ul li:first-child a{
                border-right: 0;
            }
   .related-results-tabs ul li.is-active a {
                background-color: var(--color-fg);
                color: var(--color-bg);
            }
   .empty-state {
    font-size: var(--fs-body-l);
    line-height: 110%;
}
   .related-results-item {
    display: flex;
    gap: calc(var(--space-1) * 1.5);
    margin-block: calc(var(--space-1) * 2);
}
   .related-results-item time {
        font-size: var(--fs-caption-s);
        margin-bottom:calc(var(--space-1) / 2);
    }
   .related-results-item h2 {
        margin-top: 0;
        max-width: 60ch;
    }
   .related-results-item h2 a {
            text-decoration: none;
            color: var(--color-fg);
            font-size: var(--fs-body-m);
            font-weight: 600;
            line-height: 115%;
        }
   .related-results-item h2 a::before {
                content: "→";
                margin-right: calc(var(--space-1) / 2);
                transition: margin 0.3s ease-in-out;
            }
   .related-results-item h2 a:hover::before {
                    -webkit-margin-start:calc(var(--space-1)/2 );
                            margin-inline-start:calc(var(--space-1)/2 ); 
                    -webkit-margin-end: 0; 
                            margin-inline-end: 0;
                }
   .related-results-item figure {
        max-width: 100px;
        flex-shrink: 0;
        margin: 0;
    }
   .related-results-item figure img {
            aspect-ratio: 1;
            width: 100%;
            -o-object-fit: cover;
               object-fit: cover;
            filter: grayscale(100%);
        }
   .related-results-figure {}
   .related-results-download {}
   .related-results-iframe {}
   /* Entries */
   .entries-last {
    --space: calc(var(--space-1) * 2);
    --width: 300px;

    display: flex;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space);
}
   .entries-last > * {
        flex: 1 0 var(--width);
        scroll-snap-align: start;
        max-width: var(--width);
    }
   .entries-last a {
        display: block;
        text-decoration: none;
    }
   .entries-last-item-title {
    font-size: clamp(var(--fs-caption), 5vw, var(--fs-body-m));
    line-height: 130%;
    margin-block: .25rem;
}
   .maps-last {
    background-color: var(--color-accent);
    margin-inline: calc(var(--space-1) * -1);

}
   @media(min-width: 900px){
   .maps-last {
        margin-inline:  calc(var(--space-1) * 2 * -1);
        position: sticky;
        top: var(--header-height)

}
    }
   /* .related-tags {
        display: flex;
        column-gap: calc(var(--space-1) * 2);
        width: 100%;
        margin-top: auto;
        margin-bottom: 0;
        font-size: 12px;
        a {
            border: none;
            padding: 0;
        }
    } */
   @media(min-width: 900px){
   .maps-last-item {
        height: calc(100vh - var(--header-height) * 2);
        display: flex
}
        .maps-last-item > * {
            flex: 1 0 50%;
        }
    }
   .maps-last-item figure {
        margin: 0;
        mix-blend-mode: multiply;
        filter: grayscale(100%) contrast(1);
        overflow: hidden;
    }
   /* padding-block: 2rem; */
   /* background-color: var(--color-fg); */
   .maps-last-item figure img {
            -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
                    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            /* clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 80%); */
            transition: -webkit-clip-path 1s cubic-bezier(0.76, 0, 0.24, 1);
            transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1);
            transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1), -webkit-clip-path 1s cubic-bezier(0.76, 0, 0.24, 1);
            /* mix-blend-mode: multiply; */
            /* filter: grayscale(100%) contrast(1); */
            width: 100%;
            aspect-ratio:1;
            -o-object-fit: cover;
               object-fit: cover;
            -o-object-position: top ;
               object-position: top ;
            vertical-align: middle;
        }
   @media(min-width: 900px){
   .maps-last-item figure img { 
        /* border-right: 1px solid var(--color-fg); */
                aspect-ratio: revert;
                height: 100%
        }
            }
   .maps-last-item figure figcaption {
            display: none;
        }
   /* mix-blend-mode: normal; */
   .maps-last-item:hover figure img {
                /* clip-path: polygon(0% 20%, 100% 0%, 100% 80%, 0% 100%); */
                -webkit-clip-path: polygon(1rem 20%, calc(100% - 1rem) 1rem, calc(100% - 1rem) 80%, 1rem calc(100% - 1rem) );
                        clip-path: polygon(1rem 20%, calc(100% - 1rem) 1rem, calc(100% - 1rem) 80%, 1rem calc(100% - 1rem) );
            }
   @media(min-width: 900px){
   .maps-last-item:hover figure img { 
                    -webkit-clip-path: polygon(2rem 20%, calc(100% - 2rem) 2rem, calc(100% - 2rem) 80%, 2rem calc(100% - 2rem) ); 
                            clip-path: polygon(2rem 20%, calc(100% - 2rem) 2rem, calc(100% - 2rem) 80%, 2rem calc(100% - 2rem) )
            }
                }
   .maps-last-item header {
        padding:calc(var(--space-1) * 1);
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--space-1);
        border-top: 1px solid var(--color-fg);
    }
   @media(min-width: 900px){
   .maps-last-item header { 
            border-left: 1px solid var(--color-fg);
            border-top: none;
            padding:calc(var(--space-1) * 2)
    }
        }
   .maps-last-item header {
        overflow-y: auto;
}
   .maps-last-item header h2 {
            /* font-size: var(--fs-body-l);
            font-size: clamp(var(--fs-body-l), 3vw + 1rem, 4rem);
            line-height: 100%;
            letter-spacing: -2%;
            max-width: 14ch;
            margin: 0;
            font-weight: 900; */
            text-transform: uppercase;
            /* font-family: var(--jetbrains);
            font-size: var(--fs-body-l); */
            max-width: 12ch;
            margin: 0;
            margin-top: auto;
            font-family: var(--satoshi);
            font-size: clamp(var(--fs-body), 5vw + 1rem, 4rem);
            letter-spacing: -.1rem;
            line-height: 98%;
            font-weight: 800;
        }
   @media(min-width: 900px) {
   .maps-last-item header h2 {
                font-size: clamp(var(--fs-body), 10vw + 1rem, 6.25vw);
            letter-spacing: -.25rem
        }
            }
   .maps-last-item header .map-last-coord {
            display: inline-flex;
            align-items: center;
            -moz-column-gap: calc(var(--space-1) / 1.5);
                 column-gap: calc(var(--space-1) / 1.5);
            /* margin-left: auto;
            transform-origin: right bottom;
            transform: rotate(-90deg); */
            flex-wrap: wrap;
            font-size: var(--fs-caption);
            /* &::before {
                content: "◎";
                font-size: var(--fs-body-m);
                margin-right: calc(var(--space-1) * .75);
            } */
        }
   .maps-last-item header .map-last-coord svg  {
                width: .813rem;
                height: auto;
                vertical-align: middle;
            }
   .maps-last-item header p {
            /* margin-block:30%;*/
            font-size: var(--fs-caption);
            text-align: justify;
            -webkit-hyphens: auto;
                -ms-hyphens: auto;
                    hyphens: auto;
        }
   @media(min-width: 900px){
   .maps-last-item header p { 
                margin-inline: 10%;
                max-width: 55ch
        }
            }
   .maps-last-item header time {
            font-family: var(--satoshi);
            font-size: clamp(var(--fs-body), 10vw + 1rem, 5rem);
            line-height: 90%;
            letter-spacing: -.3rem;
            font-weight: 600;
            margin: 0;
            margin-top: auto;
            margin-left: auto;
        }
   .maps-last-item .read-more {
        display: inline-block;
        min-height: 1.3rem;
        /* span { */
                /* font-size: clamp(var(--fs-body-l), 5vw + 1rem, 4rem); */
            /* font-size: var(--fs-caption);
            &::before,
            &::after {
                content: "••";
                display: block;
                margin-block: calc(var(--space-1) / 2);
                line-height: 0;
            } */
            /* visually hide */
            /* position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);      */
        /* } */
    }
   @media(min-width: 900px){
   .maps-last-item .read-more { 
            margin-left: 10%
    }
        }
   .maps-last-item .read-more {
        text-decoration: none;
        line-height: 130%;

        font-weight: 700;
        color: var(--color-fg);
        text-transform: uppercase;
}
   /* &:hover {
                transform: rotate(-45deg);
                background-color: red;
        } */
   .maps-last-item .read-more .block {
            font-size: var(--fs-body);
        }
   .maps-last-item .read-more .block::after {
                /* content: "—"; */
                content: "→";
                margin-left: calc(var(--space-1) * .75);
            }
   .entries-aside {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: calc(var(--space-1) * 4);
         column-gap: calc(var(--space-1) * 4);
    row-gap: var(--space-1);
    /* margin-bottom: calc(var(--space-1) * 3); */
}
   .entries-aside-cat h3, .entries-aside-tags h3, .entries-aside-topics h3 {
        font-size: var(--fs-body);
        margin: 0;
        margin-bottom: calc(var(--space-1) / 3);
    }
   .entries-aside-cat ul, .entries-aside-tags ul, .entries-aside-topics ul {
        font-size: var(--fs-caption);
        font-weight: 700;
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
   .entries-aside-cat a, .entries-aside-tags a, .entries-aside-topics a {
        text-decoration: none;
        color: var(--color-fg);
    }
   .entries-aside-cat::before,
    .entries-aside-cat::after,
    .entries-aside-tags::before,
    .entries-aside-tags::after,
    .entries-aside-topics::before,
    .entries-aside-topics::after {
        display: block;
        content: "••";
    }
   .entries-related,
.entries-aside-topics {
    display: none;
}
   @media(min-width: 900px) {
   .entries-related,
.entries-aside-topics {
        display: block
}
    }
   .entries-related,
.entries-aside-topics {
    margin-top: calc(var(--space-1) * 4);
}
   .entries-related h3, .entries-aside-topics h3 {
        font-family: var(--satoshi);
            /* border-block: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg)); */
        padding-block: calc(var(--space-1) / 2);
        text-transform: uppercase;
        font-size: var(--fs-caption);
        font-weight: 700;
        display: flex;
        -moz-column-gap: calc(var(--space-1) / 2);
             column-gap: calc(var(--space-1) / 2);
        align-items: center;
    }
   .entries-related h3::before, .entries-aside-topics h3::before {
            content: "—";
        }
   .entries-related .projects-detail-coord, .entries-aside-topics .projects-detail-coord {
        color: color-mix(in srgb, var(--color-fg) 60%, var(--color-bg) 100%);
    }
   .entries-related .projects-detail-coord svg > *,.entries-aside-topics .projects-detail-coord svg > *{
            fill: color-mix(in srgb, var(--color-fg) 60%, var(--color-bg) 100%);
        }
   .entries-related ul, .entries-aside-topics ul {
        font-size: var(--fs-caption);
        font-weight: 600;
        letter-spacing: .02rem;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
   .entries-related ul::after, .entries-aside-topics ul::after {
            display: block;
            content: "••";
        }
   .entries-related li, .entries-aside-topics li {
        font-family: var(--satoshi);
    }
   .entries-related li:not(:last-child),
        .entries-related li:first-child,
        .entries-aside-topics li:not(:last-child),
        .entries-aside-topics li:first-child {
            border-bottom: 1px solid color-mix(in srgb, var(--color-fg) 10%, var(--color-bg));
        }
   .entries-related li:has(.projects-detail-coord), .entries-aside-topics li:has(.projects-detail-coord) {
                padding-top: calc(var(--space-1) / 2);
        }
   .entries-related a, .entries-aside-topics a {
        padding-block: calc(var(--space-1) / 1.5);
        display: flex;
        align-items: flex-end;
        -moz-column-gap: calc(var(--space-1) / 1);
             column-gap: calc(var(--space-1) / 1);
        text-decoration: none;
        color: var(--color-fg);
        text-transform: uppercase;
    }
   .entries-related a::after, .entries-aside-topics a::after {
            content: "→";
            margin-left: auto;
            margin-right: calc(var(--space-1) / 2);
            transition: margin .3s ease-in-out;
        }
   .entries-related a:hover::after, .entries-aside-topics a:hover::after {
                margin-right: 0
            }
   .entries-related::before,
    .entries-related::after,
    .entries-aside-topics::before,
    .entries-aside-topics::after {
        content: "";
    }
   /* Entries-list */
   .page-entries-list .main {
        padding-block: calc(var(--space-1) * 2);
        /* display: grid;
        grid-template-columns: 200px 1fr;
        column-gap: 1rem; */
    }
   .entries-aside {
}
   .entries-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: calc(var(--space-1) * 2);
}
   /* PROJECTS / IN THIS CASE MAPS */
   /* state to hide map on points and change bakcgro8und on is-selected */
   .page-projects-detail:has(.project-list-points.hide) .maps-detail .map-detail-info {
                    display: none;
                }
   .page-projects-detail:not(:has(.maps-detail.is-visible)) .projects-list-item:has(.is-selected) {
                background-color: var(--color-bg);
            }
   .project-list,
.map-options {
    width: calc(100% + calc(var(--space-1) * 2));
    margin-inline:  calc(var(--space-1) * 1 * -1);
}
   @media(min-width: 900px){
   .project-list,
.map-options {
        width: calc(100% + calc(var(--space-1) * 4));
        margin-inline:  calc(var(--space-1) * 2 * -1)
}
    }
   .map-options {
    position: sticky;
    top: calc(var(--header-height));
    padding-block: 0;
    -webkit-padding-end: 0;
            padding-inline-end: 0;
    z-index: 8900;
    background-color: var(--color-bg);
    /* background-color: var(--color-accent-alt); */
    display: flex;
    align-items: center;
    /* column-gap: calc(var(--space-1) / 2.85); */
    /* background-color: color-mix(in srgb, var(--color-fg) 10%, var(--color-bg)); */
    -webkit-border-after: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg));
            border-block-end: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg));
    /* padding-block: calc(var(--space-1) / 1.5); */
}
   .map-filter-options {
    display: flex;
    align-items: center;
    -moz-column-gap: calc(var(--space-1) * 1.25);
         column-gap: calc(var(--space-1) * 1.25);
    font-size: var(--fs-caption);
    text-transform: uppercase;
    flex-grow: 1;
    overflow-x: auto;
    color: var(--color-fg);
    overflow-x: auto;
    scrollbar-width: thin;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    scroll-snap-align: start;
    padding-block: calc(var(--space-1) / 1.25);
}
   .map-filter-options label {
        min-width: -webkit-max-content;
        min-width: -moz-max-content;
        min-width: max-content;
    }
   .map-user-options{
    display: flex;
    /* column-gap: 1px; */
    /* overflow: hidden; */
    margin: 0;
    padding: 0;
    list-style-type: "";
    /* border: 1px solid var(--color-fg); */
    /* border-radius: 4px; */
    font-size: var(--fs-caption);
}
   .map-user-options > * {
    -webkit-border-start: 1px solid var(--color-fg);
            border-inline-start: 1px solid var(--color-fg);
    }
   .map-user-options a {
        display: block;
        text-transform: uppercase;
        padding: .8rem 1.25rem;
        color: var(--color-fg);
        text-decoration: none;
        text-align: center;
    }
   .map-user-options a.is-active,
        .map-user-options a:hover,
        .map-user-options a:focus-visible{
            background-color: var(--color-accent);
            color: var(--color-fg);
        }
   .project-list-points  {
    container-type: inline-size;
    margin: 0;
    min-height: calc(50vh - var(--header-height) * 2 - var(--map-options-height) * 2);
}
   /* padding: var(--space-1); */
   .project-list-points .projects-list-figure {
        display: none;
    }
   .project-list-points {
    width: 100%;
    margin-left: auto;
    transition: width 0.3s ease;
}
   /* img {
        width: 100%;
        max-width: 100px;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        object-position: center;
    } */
   /* margin-left: var(--map-detail-width); */
   @media(min-width: 900px){
   .project-list-points.is-collapsed {
            width: calc(100% - var(--map-detail-width)); /* 100% - map detail width */
            min-width: 400px
    }
        }
   .projects-list-item {
    max-height: -webkit-max-content;
    max-height: -moz-max-content;
    max-height: max-content;
    opacity: 1;
    padding: var(--space-1);
    transition:
        opacity .4s ease,
        padding-block .4s ease,
        max-height 0.8s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
   .projects-list-item:not(:last-child) {
        border-bottom: 1px solid var(--color-fg);
    }
   @container (min-width: 900px) {
   .projects-list-item {
        padding-inline: calc(var(--space-1) * 2)
}
    }
   /* &.is-active {
        background-color: var(--color-accent-alt);
    } */
   .projects-list-item:has(.is-selected) {
        background-color: var(--color-accent-alt);
     }
   .projects-list-item:has(.is-selected):last-child {
            border-bottom: 1px solid var(--color-fg);
        }
   .projects-list-item.is-hidden {
        max-height: 0;
        opacity: 0;
        padding-block: 0;
        pointer-events: none;
    }
   .projects-list-item-intro p {
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
   .project-list-map {
    width: 100%;
    height: calc(100vh - var(--header-height) * 2 - var(--map-options-height) * 2);

    margin-left: auto;
    transition: width 0.3s ease;
}
   @media(min-width: 900px){
   .project-list-map.is-collapsed {
            width: calc(100% - var(--map-detail-width)); /* 100% - map detail width */
            min-width: 400px
    }
        }
   /* checkbox test */
   .checkbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  /* padding-left: calc(var(--space-1) * 1.25); */
  -moz-column-gap: .25rem;
       column-gap: .25rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
   .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
   /* si checkbox no est amarcado opacity .5 */
   .checkbox:has(input:not(:checked)) {
    opacity: .4;
}
   /* .checkbox input:checked ~ .checkbox-mark,
.checkbox.style-f:hover input ~ .checkbox-mark,
.checkbox.style-f:hover input:checked ~ .checkbox-mark  {
  border: 1px solid var(--color-fg);
  background-color: red;
} */
   .checkbox .checkbox-mark {
    position: relative;
    display: block;
    content: "";
    width: 16px;
    aspect-ratio: 1;
    border: 1px solid var(--color-fg);
    transition: background-color 0.25s ease;
    border-radius: 50%;
}
   .checkbox .checkbox-mark::after {
        position: absolute;
        content: "";
        width:10px;
        top: calc(50% - 5px);
        left: calc(50% - 5px);
        aspect-ratio: 1;
        background-color: var(--color-bg);
        border-radius: 50%;
        transition: all 0.25s ease-in-out;
        transform-origin: center;
    }
   .checkbox input:checked ~ .checkbox-mark:after {
        background-color: var(--color-fg);
}
   /* .page-entries-list {
    .main {
        background-color: var(--color-accent);
    }
} */
   .entries-list-item {
    /* &:nth-child(4n ) {
        margin-top: auto;
    } */
}
   .entries-list-item time {
        font-size: var(--fs-caption-s);
        margin-right: var(--space-1);
        display: block;
    }
   .entries-list-item time::before {
            content: "—";
            margin-right: calc(var(--space-1) / 2);
        }
   .entries-list-item .related-tags {
        font-size: var(--fs-caption-s);
    }
   /* &:has(.entries-list-item-intro) {
        padding-bottom: 0;
    }
    &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    } */
   .entries-list-item::before,
    .entries-list-item::after {
        display: block;
        content: "⌜";
    }
   .entries-list-item::after {
        content: "⌞";
    }
   /* si no tiene dentro entries-list-figure */
   .entries-list-item:not(:has(.entries-list-figure)) {
        /* margin-top: calc(180px + calc(var(--space-1) * 2)); */
        margin-block: auto;
    }
   .entries-list-item:not(:has(.entries-list-item-intro)) {
        margin-top: auto;
    }
   .entries-list-item-title {
    margin-block: calc(var(--space-1) / 2);
    line-height: 120%;
    font-size: var(--fs-body);
    text-transform: uppercase;
    font-weight: 600;
}
   .entries-list-item-title a {
        text-decoration: none;
        display: inline-block;
        color: var(--color-fg);
        /* &::after {
            content: "⇾";
        } */
    }
   .entries-list-item-title a::after {
            content: "→";
            margin-inline: calc(var(--space-1) / 4);
            transition: margin-inline 0.2s ease-in-out;
        }
   .entries-list-item-title a:hover::after{
                margin-left: calc(var(--space-1) / 2);
            }
   .entries-list-figure {
    /* background-color: var(--color-accent-alt); */
    position: relative;
}
   .entries-list-figure::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-bg);
        transition: background-color .3s ease-in-out;
    }
   .entries-list-figure picture {
        display: block;
    }
   .entries-list-figure img {
        width: 100%;
        aspect-ratio: 1;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: top;
           object-position: top;
        filter: grayscale(100%);
            mix-blend-mode: multiply;
    }
   /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transition: clip-path 0.2s ease-in-out; */
   @media(min-width: 900px){
   .entries-list-figure img { 
            aspect-ratio: 4 / 5
    }
        }
   /* fix bug on ios */
   @supports (background: -webkit-named-image(i)) {
   .entries-list-figure img {
            filter: none !important
    }
        }
   .entries-list-figure:hover::before {
            background-color: var(--color-accent);
        }
   .entries-list-item-intro {
    line-height: 140%;
    font-size: var(--fs-caption);
    /* max-width: 50ch; */
    text-align: justify;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}
   .entries-list-item-intro p:first-child {
            margin-top: 0;
        }
   .entries-list-item-intro p:last-child {
            margin-bottom: 0;
        }
   .entries-list-item-read-more {}
   .projects-list-item  {
    display: grid;
    /* repeat 4 1fr */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    -moz-column-gap: calc(var(--space-1) * 2);
         column-gap: calc(var(--space-1) * 2);
    row-gap: calc(var(--space-1));
    align-items: end;
    /* time {
        text-align: right;
    } */
}
   .projects-list-item a {
        text-decoration: none;
        color: var(--color-fg);
    }
   .projects-list-item .projects-list-item-title {
        font-size: var(--fs-body-m);
        line-height: 115%;
        font-weight: 600;
        letter-spacing: -.010rem;
        margin: 0;
        text-transform: uppercase;
    }
   .projects-list-item .projects-list-item-title::after {
            content: "→";
            margin-inline: calc(var(--space-1) / 4);
            transition: margin-inline 0.2s ease-in-out;
        }
   .projects-list-item .projects-list-item-title:hover::after{
                margin-left: calc(var(--space-1) / 2);
            }
   .projects-list-item .related-tags {
        margin: 0;
        font-size: var(--fs-caption-s);
    }
   .projects-list-item .projects-list-item-coord,
    .projects-list-item time {
        font-size: var(--fs-caption-s);
        margin: 0;
        -webkit-margin-after: calc(var(--space-1) / 4);
                margin-block-end: calc(var(--space-1) / 4);
    
    }
   .projects-detail-coord,
    .projects-list-item-coord {
        display: flex;
        align-items: center;
        gap: calc(var(--space-1) / 2);
    }
   .projects-detail-coord svg, .projects-list-item-coord svg {
            width:.813rem;
            height: auto;
            fill: var(--color-fg);
        }
   .entries-list-download {}
   .entries-list-iframe {}
   .entries-list-figure {}
   /* Entries-detail */
   .entries-detail small {
        font-size: var(--fs-caption);
    }
   .entries-detail {
    padding-block: calc(var(--space-1) * 2);
}
   /* header {
        background-color: var(--color-accent-alt);
    }
    footer {
        background-color: var(--color-bg);
    }
    background-color: var(--color-accent-alt); */
   @media(min-width: 900px){
   .page-entries-detail main {
            display: flex;
            flex-wrap: wrap;
            -moz-column-gap: calc(var(--space-1) * 2);
                 column-gap: calc(var(--space-1) * 2)
    }
        }
   .page-entries-detail main aside {
            background-color: var(--color-accent-alt);
            /* background-color: var(--color-bg); */
            flex-shrink: 0;
            /* order: 2; */

            margin-left: calc(var(--space-1) * -1);
            padding: calc(var(--space-1) * 1);
            width: calc(100% + calc(var(--space-1) * 2));
            border-bottom: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg));
        }
   @media(min-width: 900px){
   .page-entries-detail main aside {
                width: min(100%, 33vw);
                margin-left: calc(var(--space-1) * -2);
                padding: calc(var(--space-1) * 2);
                border-bottom: none;
                border-right: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg))
        }

            }
   .page-entries-detail time {
        font-size: var(--fs-caption);
        margin-bottom: calc(var(--space-1) * .25);
        display: block;
    }
   .page-entries-detail .related-tags {
        width: 100%;
        border-block: 1px solid var(--color-fg);
        padding-block: calc(var(--space-1) / 2);
    }
   .entries-detail {
    flex: 1;
}
   .entries-detail p, .entries-detail ul, .entries-detail ol {
        font-size: clamp(var(--fs-caption), 2vw + .3rem, var(--fs-body));
        line-height: 148%;
        -webkit-hyphens: auto;
            -ms-hyphens: auto;
                hyphens: auto;
    }
   @media(min-width: 900px){
   .entries-detail p, .entries-detail ul, .entries-detail ol {
            max-width: 72ch
    }
        }
   /* p {
        text-indent: 15ch;
    } */
   .entries-detail ul, .entries-detail ol {
        margin-left: 0rem;
        padding-left: 1rem;
    }
   figure.as-header {
        border-bottom: 1px solid var(--color-fg);
        background-color: var(--color-accent);
        margin-block: 0;
        width: 100%;
        margin-inline: -1rem;
        width: calc(100% + calc(var(--space-1) * 2));
    }
   /* margin-left: calc(var(--space-1) * -1); */
   /* margin-top: calc(var(--space-1) * -2);
        margin-bottom: calc(var(--space-1) * 1.5); */
   /* width: calc(100% + calc(var(--space-1) * 3));
        */
   @media(min-width: 900px){
   figure.as-header {
            margin-inline: -2rem;
            width: calc(100% + calc(var(--space-1) * 4))
    }
        }
   figure.as-header img {
            width: 100%;
            mix-blend-mode: multiply;
            -o-object-fit: cover;
               object-fit: cover;
            aspect-ratio: 1;
        }
   @media(min-width: 900px){
   figure.as-header img {
                aspect-ratio: 16 / 6
        }
            }
   .entries-detail-header {
    display: block;
}
   .entries-detail-header h2 {
        font-size: clamp(var(--fs-body), 4vw + 1rem, 24vw);
        line-height: 100%;
        letter-spacing: -.03rem;
        font-weight: 800;
        margin: 0;
        max-width: 25ch;
        /* text-transform: uppercase; */
    }
   .entries-detail-intro{
    border-block: 1px solid var(--color-fg);
    margin-block: calc(var(--space-1) * 1.75);
}
   .entries-detail-intro p {
        /* margin-left: 3ch; */
        text-align: justify;
        -webkit-hyphens: auto;
            -ms-hyphens: auto;
                hyphens: auto;
        font-weight: 700;
        text-transform: uppercase;
        /* @media(--tablet-landscape-up){
            margin-left: 7ch;
        } */
    }
   .entries-detail-figure {
    max-width: 72ch;
}
   .entries-detail-figure figcaption {
        font-size: var(--fs-caption);
        margin-top: calc(var(--space-1) / 2);
    }
   .entries-detail-text {
    /* p {
            margin-block-end:  0;
        &:first-child {
            margin-block-end: 0;
        }
        & + p {
            margin-block:  0;
        }
    } */
}
   .entries-detail-text h3 {
        -webkit-margin-before: calc(var(--space-1) * 2);
                margin-block-start: calc(var(--space-1) * 2);
    }
   .projects-detail-download {
    display: inline-block;
    -webkit-margin-after: calc(var(--space-1) * .5);
            margin-block-end: calc(var(--space-1) * .5);
    padding: calc(var(--space-1) / 2) calc(var(--space-1) / 1.75);
    color: var(--color-fg);
    text-decoration: none;
    font-size: var(--fs-caption-s);
    text-transform: uppercase;
    border-left: 2px solid color-mix(in srgb, var(--color-fg) 5%, var(--color-bg));
}
   .projects-detail-download::before {
        content: "↓";
        margin-right: calc(var(--space-1) / 2);
        background-color: var(--color-accent);
        font-size: var(--fs-body);
        aspect-ratio: 1;
        width: 1.3rem;
        height: 1.3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-fg); 
        border-radius: 50%;
    }
   .projects-detail-download:hover {
        background-color: var(--color-accent);
        border-left-color: var(--color-fg);
        color: var(--color-fg);
    }
   .projects-detail-download:hover::before {
            background-color: var(--color-accent-alt);
        }
   .entries-detail-download {
    text-transform: uppercase;
    margin-block: var(--space-1);
    display: inline-block;
    padding: calc(var(--space-1) / 3) calc(var(--space-1) / 1.75);
    border: 1px solid var(--color-fg);
    color: var(--color-fg);
    text-decoration: none;
    font-size: var(--fs-caption-s);
}
   .entries-detail-download::before {
        content: "↓";
        margin-right: calc(var(--space-1) / 2);
    }
   .entries-detail-download:hover {
        background-color: var(--color-fg);
        color: var(--color-accent);
    }
   /* map detail */
   .maps-detail {
    /* background-color: darksalmon; */
    /* background-color: var(--color-bg); */

    background-color: var(--color-accent-alt);

    /* border-top: 1px solid color-mix(in srgb, var(--color-fg) 40%, var(--color-bg)); */
    border-right: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg));
    position: fixed;
    z-index: 8888;
    height: calc(100% - var(--header-height) - var(--map-options-height));
    top: calc(var(--header-height) + var(--map-options-height));
    left: 0;
    width: var(--map-detail-width);
    left: -100%;
    padding: var(--space-1);
}
   @media(min-width: 900px){
   .maps-detail {
        padding-inline:  calc(var(--space-1) * 2 )
}
    }
   .maps-detail {
    overflow-y: auto;
    transition: left 0.3s ease-in-out;
}
   .maps-detail.is-visible {
        left: 0;
    }
   .maps-detail figcaption {
        font-size: var(--fs-caption-s);
        line-height: 135%;
        margin-block: calc(var(--space-1) / 1.5);
    }
   .projects-detail-iframe {
    margin-bottom: calc(var(--space-1) * 1);
}
   .projects-detail-iframe figcaption {
        font-size: var(--fs-caption-s);
        line-height: 135%;
        margin-top: calc(var(--space-1) / 2);
        display: block;
    }
   .close-detail-content {
    position: sticky;
    display: flex;
    z-index: 5000;
   /* margin-top: calc(var(--space-1) * -1 - 1px);*/
    top: calc(var(--space-1) * -1 - 1px);
    -webkit-margin-after: calc(var(--space-1) * 1);
            margin-block-end: calc(var(--space-1) * 1);
}
   /* margin-inline: calc(var(--space-1) * -1);
    @media(--tablet-landscape-up){
        margin-inline: calc(var(--space-1) * -2);
    } */
   .close-detail-content .close-detail {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        text-decoration: none;
        text-transform: uppercase;
        display: inline-flex;
        margin-left: auto;
        align-items: center;
        -moz-column-gap: calc(var(--space-1) / 2);
             column-gap: calc(var(--space-1) / 2);
        padding: calc(var(--space-1) * .75 ) calc(var(--space-1) / 1);
        color: var(--color-fg);
        font-size: var(--fs-caption);
        background-color: var(--color-accent);
        /* &:hover {
            background-color: var(--color-accent);
        } */
    }
   /* border: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg)); */
   .close-detail-content .close-detail svg {
            width: 13px;
            height: 13px;
        }
   .close-detail-content .close-detail path {
            stroke-width: 3;
        }
   .projects-detail {
    display: flex;
    flex-direction: column;
}
   .projects-detail h2 {
        font-size: clamp(var(--fs-body), 5vw + 1rem, 3rem);
        line-height: 110%;
        letter-spacing: -.05rem;
        text-transform: uppercase;
        font-weight: 600;
        -webkit-margin-before: calc(var(--space-1) * 1.5);
                margin-block-start: calc(var(--space-1) * 1.5);
        -webkit-margin-after: calc(var(--space-1) * 0.25);
                margin-block-end: calc(var(--space-1) * 0.25);
    }
   .projects-detail figure.as-header {
            margin-bottom: 0;
        }
   .projects-detail header {
        order: -2;
    }
   .projects-detail .map-sheet {
        order: -1;
    }
   .projects-detail .projects-detail-text {
        font-size: var(--fs-body);
        line-height: 139%;
        -webkit-hyphens: auto;
            -ms-hyphens: auto;
                hyphens: auto;
    }
   /* text-wrap: balance; */
   .projects-detail .projects-detail-text a {
            color: var(--color-fg);
        }
   .projects-detail .projects-detail-text a:hover {
                color: var(--color-accent);
            }
   .projects-detail-intro {
    font-size: var(--fs-body);
    line-height: 135%;
    /* text-align: justify; */
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    /* text-wrap: balance; */

}
   .projects-detail-coord {
    font-size: var(--fs-caption-s);
    margin: 0;
    gap: calc(var(--space-1) / 2);
    display: flex;
    flex-wrap: wrap;
    align-items: center; 
}
   .projects-detail-coord span {
        margin-left: auto;
        display: block;
        text-transform: uppercase;
        /* &::before {
            content: "(";
            margin-right: calc(var(--space-1) / 3);
        }
        &::after {
            content: ")";
            margin-left: calc(var(--space-1) / 3);
        }*/   
    }
   .map-sheet,
.map-biblio {
    margin-bottom: calc(var(--space-1) * 1);
}
   .map-sheet ul, .map-biblio ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        font-size: var(--fs-caption);
    }
   .map-sheet h3, .map-biblio h3 {
        font-weight: 600;
        margin-bottom: 0;
        font-size: var(--fs-body);
    }
   .map-sheet h3::before, .map-biblio h3::before {
            content: "••";
            display: block;
            -webkit-margin-before: calc(var(--space-1) * 2);
                    margin-block-start: calc(var(--space-1) * 2);
        }
   .map-sheet li, .map-biblio li {
        padding-block: calc(var(--space-1) / 2);
    }
   .map-sheet li:not(:last-child), .map-biblio li:not(:last-child) {
            border-bottom: 1px solid color-mix(in srgb, var(--color-fg) 50%, var(--color-bg) 100%);
        }
   .map-biblio li {
        border: none;
    }
   .map-detail-info {
    width: 100%;
    aspect-ratio: 16/10;
    mix-blend-mode: darken;
    border: 1px solid var(--color-fg);
}
   .gallery-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: calc(var(--space-1) * 1.5);
    -moz-column-gap: calc(var(--space-1) * 1.5);
         column-gap: calc(var(--space-1) * 1.5);
    /* @media(--tablet-landscape-up){
        grid-template-columns: repeat(3, 1fr);
    } */
    /* figure {
        margin-block-end: calc(var(--space-1) * 1.5);
        img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }
    } */
}
   .entries-detail-figure {}
   .entries-detail-text {}
   .entries-detail-download {}
   .entries-detail-iframe {}
   /* ==========================================================================
   Modules
   ========================================================================== */
   .header {
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: space-between;
    gap: var(--space-1);
    position: sticky;
    top: 0;
    z-index: 9000;
    background-color: var(--color-bg);
    /* border-block-end: 1px solid color-mix(in srgb, var(--color-fg) 40%, var(--color-bg)); */
    -webkit-border-after: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg));
            border-block-end: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg));
    transition: background-color 0.3s ease-in-out;
}
   .header a {
        text-decoration: none;
        color: var(--color-fg);
        font-weight: 700;
        /* color: var(--color-accent); */
        /* &:hover {
        } */
    }
   .page-page-home .header {
        background-color: var(--color-accent);
    }
   .page-page-home .header svg {
            --color-bg: var(--color-accent);
        }
   .header-main{
    margin: 0;
    font-weight: 900;
    letter-spacing: -4%;
}
   /* svg {
        transform: skewY(-11.3deg);
        width: 30%;
    } */
   .header-main span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        font-size: 0;
        line-height: 0;
        margin: 0;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
     }
   .header-main svg {
        /* position: absolute; */
        width: 90px;
        height: auto;
        vertical-align: middle;
     }
   .header-main svg .per,
        .header-main svg .moria {
            opacity: 0;
        }
   .header-main:hover svg .per,
            .header-main:hover svg .moria {
                opacity: 1;
                -webkit-animation: blinks 0.6s ease-in-out;
                        animation: blinks 0.6s ease-in-out;
            }
   @-webkit-keyframes blinks {
    0% { opacity: 0; }
    8.33% { opacity: 1; }
    16.66% { opacity: 0; }
    25% { opacity: 1; }
    33.33% { opacity: 0; }
    41.66% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}
   @keyframes blinks {
    0% { opacity: 0; }
    8.33% { opacity: 1; }
    16.66% { opacity: 0; }
    25% { opacity: 1; }
    33.33% { opacity: 0; }
    41.66% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}
   @-webkit-keyframes blinks-fade {
    0% { opacity: 1; }
    8.33% { opacity: 0; }
    16.66% { opacity: 1; }
    25% { opacity: 0; }
    33.33% { opacity: 1; }
    41.66% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}
   @keyframes blinks-fade {
    0% { opacity: 1; }
    8.33% { opacity: 0; }
    16.66% { opacity: 1; }
    25% { opacity: 0; }
    33.33% { opacity: 1; }
    41.66% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}
   .header-description {
    display: none;
    font-family: var(--jetbrains);
    font-size: var(--fs-caption);
    line-height: 115%;
    margin: 0;
    margin-right: auto;
    font-weight: 600;
    opacity: 1;
    max-width: 20ch;
    /* span {
        display: none;
        font-family: var(--satoshi);
        font-size: var(--fs-body-m);
        font-weight: 900;
        letter-spacing: -2%;
        margin-bottom: .65rem;
    }
    &:hover {
        span {
            display: inline-block;
        }
    } */
}
   @media(min-width: 900px){
   .header-description {
        display: inline-block
}
    }
   .header-description.fade-out {
        -webkit-animation: blinks-fade 0.6s ease-in-out;
                animation: blinks-fade 0.6s ease-in-out;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards; /* Mantiene el estado final de la animación */
    }
   .main-nav{
    display: flex;
    flex-wrap: wrap;
    align-items: top;
    font-size: var(--fs-caption);
}
   .main-nav-list{
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-family: var(--jetbrains);
    font-weight: 600;
    display: flex;
    -moz-column-gap: calc(var(--space-1) * 0.9);
         column-gap: calc(var(--space-1) * 0.9);
    text-transform: uppercase;
    transition: transform 0.3s ease-in-out;
    transform: translateY(25%);
}
   .main-nav-list:has(.is-active) {
        transform: translateY(-20%);
    }
   .main-nav-list .nav-item {
        transform: translateY(0%);
            transition: transform 0.3s ease-in-out;
    }
   .main-nav-list .nav-item.is-active {
            transform: translateY(90%);
        }
   /* .main-nav-lang{
    &::before {
        content: "|";
    }
} */
   /* todos los footers que no est´pen dentro de page-page-home son verdes y ese banco */
   .page-page-home .footer{
        background-color: var(--color-bg);
    }
   .footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    -moz-column-gap: calc(var(--space-1) * 4 );
         column-gap: calc(var(--space-1) * 4 );
    row-gap: var(--space-1);
    font-size: var(--fs-caption);
    border-top: 1px solid  var(--color-fg);
            background-color: var(--color-accent);
}
   .footer h3 {
        margin-block: calc(var(--space-1) / 2);
    }
   .footer ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
   .footer a {
        text-decoration: none;
        color: var(--color-fg);
        font-weight: 700;
    }
   .footer .logo {
        width: 100%;
        height: auto;
        margin-bottom: calc(var(--space-1)/2);
        /* path {
            transform-origin: bottom;
            &:first-child {
                transform: skewY(5deg);
            }
            &:last-child {
                transform: skewY(-5deg);
            }
        } */
    }
   .footer .sponsor {
        width: 100%;
        display: inline-flex;
        flex-wrap: wrap;
        gap: calc(var(--space-1) * 1);
        margin-left: auto;
        /* text-align: center; */
        border-block: 1px solid var(--color-fg);
        padding-block: calc(var(--space-1) / 1);
    }
   .footer .sponsor svg {
            min-width: 240px;
        }
   .footer .sponsor p{
            font-size: var(--fs-caption-s);
            max-width: 45ch;
            line-height: 125%;
            margin: 0;
        }
   .footer .ue {
        width: min(100%, 27.5rem);
        height: auto;
        vertical-align: middle;
    }
   .footer-info {
    margin-right: auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    -moz-column-gap: calc(var(--space-1) * 2);
         column-gap: calc(var(--space-1) * 2);
    /* width: 100%;
    column-gap: calc(var(--space-1) * 4);
    overflow: hidden;
    font-family: var(--satoshi);
    background-color: var(--color-fg);
    letter-spacing: -.3rem;
    padding-block-end: calc(var(--space-1) * 1);
    font-size: clamp(2rem, 15vw + 1rem, 6rem);
    line-height: 155%;
    column-gap: calc(var(--space-1) * 4);
    margin-inline: calc(var(--space-1) * -2);
    width: calc(100% + (var(--space-1) * 4));
    a {
        color: var(--color-accent);
    font-weight: 600;
        &:last-child {
            text-transform: none;
        }
    } */
}
   .footer-info a {
        display: inline-block;
    }
   .footer-info a:last-child {
            text-transform: uppercase;
        }
   .footer-legal {
    font-weight: 600;
    letter-spacing: -2%;
}
   .footer-legal ul {
        display: flex;
        align-items: center;
        gap: calc(var(--space-1) * 1);
        text-transform: uppercase;
    }
   .footer-legal button {
        background: none;
        border: none;
        color: var(--color-fg);
        font-weight: 700;
        font-size: inherit;
        cursor: pointer;
        padding: 0;
        text-transform: uppercase;
        text-align: left;
    }
   .cr {
    margin: 0;
    font-size: var(--fs-caption);
        font-weight: 700;
}
   .cr::before{
        content: "•";
        margin-right: calc(var(--space-1) / 2);
    }
   /* .footer-top {
    margin-left: auto;
    &::before {
        content: "⇡";
        width: calc(var(--space-1) * 2.5);
        font-size: 1.5rem;
        display: grid;
        place-content: center;
        text-align: center;
        border: 1px solid var(--color-fg);
        border-radius: 50%;
        aspect-ratio: 1;
    }
    span{
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    &:hover {
        &::before {
            background-color: var(--color-fg);
            color: var(--color-bg);
        }
    }
} */
   /* ==========================================================================
   Pages
   ========================================================================== */
   .page-default ul,.page-default ol {
        margin: 0;
        padding: 0;
    }
   .page-default ul li, .page-default ol li {
            margin-left: 1rem;
        }
   .page-default figcaption,
    .page-default small {
        font-size: var(--fs-caption);
    }
   /* texts */
   .page-text,
.page-figure,
.page-download,
.page-iframe{
    margin-block: var(--space-1);
}
   /* files for download */
   .page-download {
    display: inline-block;
    padding: calc(var(--space-1) / 2) var(--space-1);
    border: 1px solid var(--color-fg);
    color: var(--color-fg);
    text-decoration: none;
}
   .page-download::before {
        content: "↓";
        margin-right: var(--space-1);
    }
   .page-download:hover {
        background-color: var(--color-fg);
        color: var(--color-bg);
    }
   .ratio-16-9 iframe {
        aspect-ratio: 16 / 9;
    }
   .ratio-4-3 {
    aspect-ratio: 4 / 3;
}
   .home-intro {
    position: relative;
    background-color: var(--color-accent);
        color: var(--color-fg);    
        border-top: 1px solid color-mix(in srgb, var(--color-fg) 100%, var(--color-bg));

    /* border-top: 1px solid var(--color-bg); */

    margin: 0 calc(var(--space-1) * -1);
    padding: calc(var(--space-1) * 1) calc(var(--space-1) * 1);
}
   @media(min-width: 900px){
   .home-intro {
        margin: 0 calc(var(--space-1) * 2 * -1);
        padding: calc(var(--space-1) * 1) calc(var(--space-1) * 2)
}
    }
   .home-intro {
    font-family: var(--satoshi);
    font-size: clamp(
        var(--fs-body),
        calc(var(--fs-body) * 1 + 3vw),
        var(--fs-body) * 4
    );
    line-height: 110%;
    letter-spacing: -.08rem;
    font-weight:800;
}
   .home-intro p {
        /* mix-blend-mode: difference; */
        /* position: relative; */
        /* z-index: 1; */
        max-width: 24ch;
            margin-top: calc(var(--space-1) * 2);
            will-change: transform;
    }
   /* &:not(:has(a)) { 
            column-count: 2;
        } */
   .home-intro p:not(:has(a)) {
            margin-top: calc(var(--space-1) * 2);
            margin-bottom: 0;
            /* text-indent: 3ch; */
                /* &::before {
                    content: "—";
                    margin-right: var(--space-1);
                } */
        }
   .home-intro p > a {
            text-decoration: none;
            font-family: var(--jetbrains);
            text-transform: uppercase;
            font-size: var(--fs-body);
            font-weight: 700;
            color: var(--color-fg);
        }
   /* color: var(--color-accent); */
   .home-intro p > a .block::after {
                    content: "→";
                    margin-left: var(--space-1);
                }
   .home-intro p:first-child > div:first-child {
                padding-left: 4ch;
            }
   .home-intro p:first-child > div:first-child .intro-line::before {
                        content: "—";
                        position: absolute;
                        left: -2ch;
                        margin-right: var(--space-1);
                    }
   .home-intro .block-figure {
        /* position: absolute; */
        /* filter: grayscale(100%) contrast(1);
        mix-blend-mode: lighten; */
        filter: grayscale(100%) contrast(1);
        mix-blend-mode: multiply;
        pointer-events: none;
        margin: 0;
        /* clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 80%); */
        /* height: calc(100% - 16rem); */
        aspect-ratio: 16 / 10;
    }
   @media(min-width: 900px){
   .home-intro .block-figure {
            aspect-ratio: 16 / 6;
            margin-bottom: 1rem
    }
        }
   /* height: 70%; */
   /* width: min(100%, 30rem); */
   /* bottom: 15%; */
   /* right: 35%; */
   /* bottom: -20vw; */
   /* height: 100%;
        width: 100vw;
        margin: 0;
        bottom: 0; */
   .home-intro .block-figure a {
            height: 100%;
        }
   .home-intro .block-figure img {
            -o-object-fit: cover;
               object-fit: cover;
            width: 100%;
            height: 100%;
            /* opacity: 0.3; */
        }
   /* Home intro text animation */
   .intro-line {
    display: block;
    transform-origin: bottom;
    line-height: 124%;
    overflow: visible;
}
   /* .page-page-permoria {
    .main {
        background-color: var(--color-accent-alt);
    }
} */
   .page-permoria {
    z-index: 1;
    /* padding-block: 1rem; */
    display: flex;
    flex-flow: column;
    gap: 0;
}
   @media(min-width: 900px){
   .page-permoria {
        /* padding-block: 3rem; */
}
    }
   .page-permoria h2 {
        /* font-size: clamp(2rem, 3vw + 1rem, 10rem); */
        font-family: var(--jetbrains);
        font-size: var(--fs-caption);
        text-transform: uppercase;
        width: min(100%, 18ch);
        margin-top: 2rem;
    }
   /* letter-spacing: -.08rem;
        line-height: 100%; */
   .page-permoria h2::before {
            content: "••";
            display: block;
        }
   .page-permoria p{
        width: min(100%, 54ch);
        font-size: var(--fs-caption);
        text-align: justify;
        -webkit-hyphens: auto;
            -ms-hyphens: auto;
                hyphens: auto; 
        /* text-shadow: 2px 2px 0  var(--color-bg); */
    }
   .page-permoria .page-text {
        pointer-events: none;
        margin-block: 0;
        position: relative;
        z-index: 1;
    }
   .page-permoria .page-text p::-moz-selection, .page-permoria .page-text li::-moz-selection, .page-permoria .page-text h2::-moz-selection, .page-permoria .page-text i::-moz-selection {
                background-color: var(--color-bg);
            }
   .page-permoria .page-text p::selection, .page-permoria .page-text li::selection, .page-permoria .page-text h2::selection, .page-permoria .page-text i::selection {
                background-color: var(--color-bg);
            }
   .page-permoria .page-text:first-child {
            margin-top: 2rem;
        }
   .page-permoria .page-text:last-child {
                margin-top: 2rem;
                margin-bottom: 0;
                padding-bottom: 2rem;
        }
   @media(min-width: 900px){
            .page-permoria .page-text+ .page-text {
                margin-left: 8rem;
            }
            .page-permoria .page-text:nth-child(3) {
                margin-left: 16rem;
            }
            .page-permoria .page-text:last-child {
                margin-left: calc(8rem + 47ch);
            }
        }
   .page-permoria ul {
        display: flex;
        flex-wrap: wrap;
        font-size: var(--fs-caption);
        list-style-type: none;
        gap: calc(var(--space-1) * 2);
        margin: 0;
        padding: 0;
    }
   .page-permoria ul li {
            min-width: 27ch;
            max-width: 54ch;
            flex: 1;
        }
   .page-page-permoria .main {
        position: relative;
        overflow: hidden;
    }
   #spray {
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* filter: grayscale(100%) contrast(3) invert(1); */
    /* width: 100%;
    height: 100%; */
    pointer-events: none;
}
   .page-error .main {
        display: grid;
        place-content: center;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
   /* background: linear-gradient(135deg, var(--color-accent) 40%, #ffffff 100%); */
   .page-error .main h2 {
            font-size: clamp(var(--fs-body), 4vw + 1rem, 24vw);
            line-height: 110%;
            letter-spacing: -.2rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
            max-width: 15ch;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }
   .page-error .main p {
            opacity: 0;
            font-size: var(--fs-caption);
            position: relative;
            transition: opacity 0.3s ease-in-out;
            -webkit-animation: showParagraph 0.3s ease-in-out 3s forwards;
                    animation: showParagraph 0.3s ease-in-out 3s forwards;
            max-width: 45ch;
            text-align: center;
            margin-inline: auto;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }
   .page-error .main {
        min-height: calc(85dvh - var(--header-height));
}
   /* Animación para mostrar el párrafo después del efecto glitch */
   @-webkit-keyframes showParagraph {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
   @keyframes showParagraph {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
   .page-team {
    padding-top: calc(var(--space-1) * 4);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* grid start on left  */
    gap: calc(var(--space-1) * 3) calc(var(--space-1) * 2);

    padding-bottom: calc(var(--space-1) * 6);
}
   .page-team ul,.page-team ol {
        margin: 0;
        padding: 0;
    }
   .page-team ul li, .page-team ol li {
            margin-left: 1rem;
        }
   @media (hover) and (prefers-reduced-motion: no-preference) {
            .page-team:has(> .page-block:hover) > .page-block:not(:hover) .block-figure {
                /* img {
                    filter: grayscale(100%);
                    mix-blend-mode: normal;
                } */
            }
                /* opacity: 0.5; */
                .page-team:has(> .page-block:hover) > .page-block:not(:hover) .block-figure img {
                    mix-blend-mode: multiply;
                }
    }
   .page-team .page-block {
        position: relative;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;

    }
   /* display: flex; */
   /* flex-wrap: wrap; */
   /* border: 1px solid red; */
   /* gap: .5rem; */
   /* &:nth-child(2n) { */
   .page-team .page-block.is-inverted picture{
                -webkit-clip-path: polygon(0% 20%, 100% 0%, 100% 80%, 0% 100%);
                        clip-path: polygon(0% 20%, 100% 0%, 100% 80%, 0% 100%);
            }
   @media(min-width: 900px){
   .page-team .page-block.is-inverted {
                /* transform: translateY(calc(var(--space-1) * 3.4)); */
                margin-top: 50%
        }
            }
   .page-team .page-block:hover picture {
                -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
                        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            }
   .page-team .page-block:hover picture img {
                    mix-blend-mode: normal;
                }
   @media (hover) and (prefers-reduced-motion: no-preference) {
                .page-team .page-block:hover .block-text:last-child {
                    display: block;
                }
        }
   .page-team .block-figure {
        width: 100%;
        margin: 0;
        margin-bottom: .75rem;
    }
   /* transition: opacity 0.2s ease-in-out; */
   .page-team .block-figure picture{
            display: block;
            -webkit-clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 80%);
                    clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 80%);
            /* background-color: var(--color-accent); */
            transition: -webkit-clip-path 0.2s ease-in-out;
            transition: clip-path 0.2s ease-in-out;
            transition: clip-path 0.2s ease-in-out, -webkit-clip-path 0.2s ease-in-out;
            background-color: var(--color-accent);
        }
   .page-team .block-figure img {
            opacity: 0;
            mix-blend-mode: normal;
            filter: grayscale(100%) ;
            aspect-ratio: 1 / 1;
            -o-object-fit: cover;
               object-fit: cover;
            width: 100%;
            height: auto;
            transition: opacity 1s ease-in-out;
        }
   .page-team .block-figure img.img-loaded {
                opacity: 1;
            }
   @supports (background: -webkit-named-image(i)) {
   .page-team .block-figure img {
                filter: none !important
        }
            }
   .page-team .block-text {
        margin: 0;
    }
   .page-team .block-text ul,.page-team .block-text ol {
            list-style-type: "";
            margin-top: calc(var(--space-1) * .5);
            display: flex;
            flex-wrap: wrap;
            gap: calc(var(--space-1) * 1);
            text-transform: uppercase;
        }
   .page-team .block-text ul li, .page-team .block-text ol li {
                margin-left: 0rem;
            }
   .page-team .block-text h2 {
            font-size: var(--fs-body-l);
            line-height: 1.12;
            letter-spacing: -3%;
            max-width: 13ch;
            margin: 0;
        }
   .page-team .block-text p {
            margin-top: .5rem;
            margin-bottom: 0;
        }
   .page-team .block-text a {
            text-decoration: none;
            color: var(--color-fg);
            font-size: var(--fs-caption);
            font-weight: 700;
            /* &::after {
                content: "→";
                margin-left: calc(var(--space-1) / 3);
            } */
        }
   .page-team .block-text.team-info{
            aspect-ratio: 2 / 1;
            font-size: var(--fs-caption);
            background-color: var(--color-bg);
            border-block: 1px solid var(--color-fg);
            overflow-y: auto;
            padding-block: calc(var(--space-1) * .5);
            margin-top: var(--space-1);
        }
   .page-legal {
    min-height: calc(100vh - var(--header-height));
}
   .page-legal ul {
        margin: 0;
        padding-left: 1rem;
    }
   .page-legal h2 {
        -moz-column-span: all;
             column-span: all;
        -moz-column-break-inside: avoid;
             break-inside: avoid;
        margin-bottom: 2rem;
    }
   .page-legal h2 + p {
            margin-top: 0;
        }
   .page-legal .page-text {
        max-width: 1490px;
        -moz-columns: 38ch auto;
             columns: 38ch auto;
        -moz-column-gap: 2rem;
             column-gap: 2rem;
        -webkit-hyphens: auto;
            -ms-hyphens: auto;
                hyphens: auto;
        font-size: var(--fs-caption);
        line-height: 135%;
    }
   .page-legal .page-text p, .page-legal .page-text ul {
            -moz-column-break-inside: avoid;
                 break-inside: avoid;
        }
   .page-legal a {
            color: var(--color-accent);
        text-decoration: none;
    }
   .page-legal a:hover {
        color: var(--color-fg);
        }
   .contact {
}
   /* ==========================================================================
   Vendors
   ========================================================================== */
   /* libraries */
   /* Make clicks pass-through */
   #nprogress {
  pointer-events: none;
}
   #nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}
   /* Fancy blur effect */
   #nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
}
   /* Remove these to get rid of the spinner */
   #nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}
   #nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}
   .nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
   .nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}
   @-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
   @keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
   /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
   .pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}
   /*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/
   .pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
   /* Prevents focus outline on the root element,
  (it may be focused initially) */
   .pswp:focus {
  outline: 0;
}
   .pswp * {
  box-sizing: border-box;
}
   .pswp img {
  max-width: none;
}
   .pswp--open {
	display: block;
}
   .pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}
   .pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}
   .pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}
   .pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
   .pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}
   .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: zoom-in;
}
   .pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: grab;
}
   .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
   /* :active to override grabbing cursor */
   .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: zoom-out;
}
   /* Prevent selection and tap highlights */
   .pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
   .pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}
   .pswp__hidden {
	display: none !important;
}
   /* Allow to click through pswp__content element, but not its children */
   .pswp__content {
  pointer-events: none;
}
   .pswp__content > * {
  pointer-events: auto;
}
   /*

  PhotoSwipe UI

*/
   /*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
   .pswp__error-msg-container {
  display: grid;
}
   .pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}
   /*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
   .pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}
   /* class pswp--ui-visible is added when opening or closing transition starts */
   .pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}
   /* <button> styles, including css reset */
   .pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}
   .pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}
   .pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}
   .pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}
   .pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}
   .pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}
   .pswp__icn:focus {
	outline: 0;
}
   /*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
   div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}
   .pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
   .pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}
   /*

  Close button

*/
   .pswp__button--close {
  margin-right: 6px;
}
   /*

  Arrow buttons

*/
   .pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}
   .pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}
   .pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}
   .pswp--one-slide .pswp__button--arrow {
  display: none;
}
   /* hide arrows on touch screens */
   .pswp--touch .pswp__button--arrow {
  visibility: hidden;
}
   /* show arrows only after mouse was used */
   .pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}
   .pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}
   .pswp__button--arrow--next {
  right: 0px;
}
   .pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}
   /*

  Zoom button

*/
   .pswp__button--zoom {
  display: none;
}
   .pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}
   /* "+" => "-" */
   .pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}
   /*

  Loading indicator

*/
   .pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}
   .pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  -webkit-animation: pswp-clockwise 600ms linear infinite;
          animation: pswp-clockwise 600ms linear infinite;
}
   .pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}
   @-webkit-keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
   @keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
   /*

  "1 of 10" counter

*/
   .pswp__counter {
  height: 30px;
  margin-top: 15px;
  -webkit-margin-start: 20px;
          margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}
   .pswp--one-slide .pswp__counter {
  display: none;
}
   /* modifiers */
   #nprogress {
    z-index: 9500;
}
   #nprogress .bar {
        background: var(--color-fg);
        height: calc(var(--space-1) / 3);
    }
   #nprogress .peg,
#nprogress .spinner {
	display: none;
}
   /* hide close button on desktop */
   @media (min-width: 1200px) {
   .pswp__button--close {
      display: none
  }
    }
   /* reduce zoon icon size*/
   .pswp__icn {
    width: 24px;
    height: 24px;
}
   .pswp__button--arrow .pswp__icn {
    width: 40px;
    height: 40px;
}
   .pswp__button--close .pswp__icn {
    width: 40px;
    height: 40px;
    top: 6px;
}
   .pswp__img {
    opacity: 1;
}