/*
Theme Name: rogeliosilvan
Theme URI: https://rogeliosilvan.com/
Author: Rogeliosilvan
Author URI: https://rogeliosilvan.es
Description: Wordpress custom theme for rogeliosilvan
Version: 1.0
*/

/*!****************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./app/src/css/styles.css ***!
  \****************************************************************************************************************************************************************************/
/* Default */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-Regular.woff2") format("woff2"),
    url("fonts/BeVietnamPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mondwest";
  src: url("fonts/Mondwest-Regular.woff2") format("woff2"),
    url("fonts/Mondwest-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*
RESET CSS
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
@media all and (min-width: 1025px) and (orientation: landscape){
*{
        -webkit-user-drag: none
}
    }
*, ::after, ::before {
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
    list-style: none;
    list-style-type: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: normal;
}
a{
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: 0;
    color: inherit;
}
figure {
    margin: 0;
    padding: 0;
}
:root {
  /* Fonts */
  --font-primary: "Be Vietnam Pro", Arial, sans-serif;
  --font-secondary: "Mondwest", Arial, sans-serif;

  /* Backgrounds */
  /* --bg: #bcbfb0; */
  /* --bg: #fff; */
  --bg: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);

  --bg-dark: #1a1a1a;
  --bg-medium: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --bg-secondary: #00D492;
  --gap: 20px;

  /* Text color */
  --color-primary: #ffffff;
  --color-secondary: #00D492;
  --color-tertiary: #99A1AF;
  --color-menu: #D1D5DC;
  --color-black: #000000;

  /* Border Radius*/
  --border-radius: 8.75px;
  

  --bg-gradient: linear-gradient(
    90deg,
    rgba(43,127,255,1) 0%,
    rgba(20,71,230,1) 100%
  );

  --bg-overlay: linear-gradient(
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.2)
  );
}
:root --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;

}
:root --tw-border-style --tw-gradient-via-stops {
      syntax: "*";
      inherits: false;
  }
:root --tw-border-style --tw-gradient-via {
      syntax: "<color>";
      inherits: false;
      initial-value: rgba(0,0,0,0);
  }
:root --tw-border-style --tw-gradient-stops {
      syntax: "*";
      inherits: false;
  }
:root --tw-border-style --tw-gradient-position {
      syntax: "*";
      inherits: false;
  }
:root --tw-border-style --tw-gradient-via-position {
      syntax: "<length-percentage>";
      inherits: false;
      initial-value: 50%;
  }
:root --tw-border-style --tw-gradient-from {
      syntax: "<color>";
      inherits: false;
      initial-value: rgba(0,0,0,0);
  }
:root --tw-border-style --tw-gradient-to {
      syntax: "<color>";
      inherits: false;
      initial-value: rgba(0,0,0,0);
  }
:root --tw-border-style --tw-gradient-from-position {
      syntax: "<length-percentage>";
      inherits: false;
      initial-value: 0%;
  }
:root --tw-border-style --tw-gradient-to-position {
      syntax: "<length-percentage>";
      inherits: false;
      initial-value: 100%;
  }
:root {
  --size-menu: 14px;
  --size-title: 63px;
  --size-title-section: 42px;

  --size-title-char: 16px;

  --size-text: 14px;
  --line-height-text: 24px;
  
  --size-item-text: 12px;
  --line-height-item-text: 17px;

  --size-subtitle: 25px;
  --line-height-subtitle: 35px;

  --width-container: calc(100% - 40px);
  --gutter-size: 20px;
  --max-width: 1120px;
  --ease-in-out: cubic-bezier(0.895, 0, 0.18, 1);
  --ease-out: cubic-bezier(0.05, 0.76, 0.38, 1.015);
  --expoOut: cubic-bezier(0.16, 1, 0.3, 1);
  --expoInOut: cubic-bezier(0.04, 0.95, 0.32, 1);
  --timeExpo: 1600ms;
  --timeButton: 800ms;

--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);    
--tw-duration: .5s;
--tw-scale-x: 110%;
--tw-scale-y: 110%;
--tw-scale-z: 110%;
}
/*  Font Size */
/* Menu */
/* --size-menu: clamp(16px,1.771vw,34px); */
/* --max-width: 1472px; */
/* Other */
@media all and (min-width: 1440px) {
:root {
    /* --padding-work: 109px;
        --size-title: 32px;
        --line-height-title: 26px;
        --size-text-work: 12px;
        --padding-personal: 115px;
        --size-menu: 18px;
        --padding-menu: 55px; */
}
  }
@media all and (min-width: 1367px) {
  }
@media all and (max-width: 1000px) {
:root {
    /* --size-menu: 14px; */
}
  }
@media all and (max-width: 767px) {
:root {
    --size-menu: 18px
}
  }
@media (hover: hover) {
    .home--proyect-featured:hover,
    .works--proyect:hover,
    .home--proyect:hover,
    .proyecto__next a:hover {
      border-color: rgba(0, 212, 146, 0.5);
    }

@supports (color: color-mix(in lch, red, blue)) {
.home--proyect-featured:hover,
    .works--proyect:hover,
    .home--proyect:hover,
    .proyecto__next a:hover {
      border-color: color-mix(in oklab,var( --color-secondary) 50%, transparent);
    }
}
      .home--proyect-featured:hover .image img,.works--proyect:hover .image img,.home--proyect:hover .image img,.proyecto__next a:hover .image img{

        transition-duration: .8s;
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: 110% 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);                
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: cubic-bezier(0.05, 0.76, 0.38, 1.015);
        transition-timing-function: var(  --ease-out, var(--default-transition-timing-function));        
      }

      .home--proyect-featured:hover .title--char,
      .home--proyect-featured:hover .proyecto__next-header,
      .home--proyect-featured:hover .proyecto__next-name,
      .works--proyect:hover .title--char,
      .works--proyect:hover .proyecto__next-header,
      .works--proyect:hover .proyecto__next-name,
      .home--proyect:hover .title--char,
      .home--proyect:hover .proyecto__next-header,
      .home--proyect:hover .proyecto__next-name,
      .proyecto__next a:hover .title--char,
      .proyecto__next a:hover .proyecto__next-header,
      .proyecto__next a:hover .proyecto__next-name{
        --tw-duration: .3s;
        transition-duration: .3s;
        color: #00D492;
        color: var(--color-secondary);
      }



    .proyecto__next:hover {
      border-color: none;    
    }    
    .works--proyect:hover {
      border-color: rgba(255, 255, 255, 0.3);     
    }

@supports (color: color-mix(in lch, red, blue)) {
.works--proyect:hover {
      border-color: color-mix(in oklab,var( --color-primary) 30%, transparent);     
    }
}    

    @supports (color: color-mix(in lab, red, red)) {
      .home--proyect-featured:hover {
        border-color: color-mix(in oklab, #00D492 50%, transparent);
      }

@supports (color: color-mix(in lch, red, blue)) {
.home--proyect-featured:hover {
        border-color: color-mix(in oklab, var( --color-secondary) 50%, transparent);
      }
}
    }
  }
@property --bg-gradient {
  syntax: "<image>";
  inherits: false;
  initial-value: linear-gradient(90deg, #FDC700 0%, #D08700 100%);
}
@property --bg-overlay {
  syntax: "<image>";
  inherits: false;
  initial-value: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));
}
@property --shine-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -50%;
}
@property --shine-pos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -200%;
}
/* Base */
/* GRID SYSTEM (PostCSS compatible) */
/* === BASE === */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
  grid-gap: var(--gap);
  gap: 20px;
  gap: var(--gap);
  align-items: center;  
}
.grid__items{
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
  }
.grid__2col{
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(12, 1fr);
  }
/* === BREAKPOINTS === */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
    .grid__items{
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
  }

}
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
    
    .grid__items{
    grid-template-columns: repeat(4, 1fr);
  }
  
}
@media (max-width: 530px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
    
    .grid__items{
    grid-template-columns: repeat(2, 1fr);
  }
  
}
/* === COLUMN SPANS === */
[class^="col-"] {
  grid-column: span 12; /* full-width por defecto */
}
/* Desktop (≥1025px) */
@media (min-width: 1025px) {
  .col-0 { display: none !important; }
  .col-1  { grid-column: span 1; }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }
}
/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .col-t-1  { grid-column: span 1; }
  .col-t-2  { grid-column: span 2; }
  .col-t-3  { grid-column: span 3; }
  .col-t-4  { grid-column: span 4; }
  .col-t-5  { grid-column: span 5; }
  .col-t-6  { grid-column: span 6; }

    /* Ocupa 0 en tablet (ocultar y no reservar espacio) */
  .col-t-0 { display: none !important; }
}
/* Mobile (≤768px) */
@media (max-width: 768px) {
  .col-m-0 { display: none !important; }
  .col-m-1  { grid-column: span 1; }
  .col-m-2  { grid-column: span 2; }
  .col-m-3  { grid-column: span 3; }
  .col-m-4  { grid-column: span 4; }
}
/* === UTILITY: container + responsive gap === */
.container {
  width: min(calc(100% - 40px), 1120px);
  width: min(var(--width-container), var(--max-width));
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
html {
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}
body {
    position: relative;
    background: #000000;
    background: var(--color-black);
    overflow-x: hidden;

    font-family: "Be Vietnam Pro", Arial, sans-serif;

    font-family: var(--font-primary);
    color: #ffffff;
    color: var(--color-primary);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: url("img/Icon-about-cursor.svg") 8 2,
            url("img/Icon-about-cursor.svg") 4 1,
            pointer;    
}
a,
button,
.button,
*[role="button"]{
    cursor: url("img/Icon-about-hand.svg") 6 2,
            pointer;       
}
a.home--proyect-featured,
a.works--proyect{
  cursor: url("img/Icon-about-code.svg") 8 2,
          url("img/Icon-about-code.svg") 4 1,
          pointer;
}
body.no-scroll {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}
/* document.body.classList.add('no-scroll'); */
/* .hidden,
.hidden *{
    visibility: hidden!important;
} */
.is-hidden {
    display: none !important;
}
.is-invisible {
    visibility: hidden !important;
}
/* Accesibilidad: oculto visual pero disponible para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media all and (min-width: 767px) {
    *[data-mobile] {
        display: none !important;
    }
}
@media all and (max-width: 768px) {
    *[data-desktop] {
        display: none !important;
    }
}
#app {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
@media all and (max-width: 1024px) and (orientation: portrait) {
#app {
        position: relative;
        height: auto;
        overflow-x: hidden !important
}
    }
#app .min {
        transform: scale(0.9) translateY(6%);
    }
#app >div {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }
@media all and (max-width: 1024px) and (orientation: portrait) {
#app >div {
            position: relative;
            height: auto
    }
        }
#app >div >#inner {
            display: block;
            position: relative;
            width: 100%;
        }
/* height: auto; */
@media all and (max-width: 1024px) and (orientation: portrait) {
#app >div >#inner {
                position: relative;
                will-change: initial;
                width: 100vw
        }
            }
@media all and (max-width: 767px) {
#app >div >#inner {
                /* height: -webkit-fill-available; */
                height: 100%;
                overflow: hidden
        }
            }
#app >div >#inner>section {
                position: relative;
            }
/* outline: 1px solid blue; */
#app >div >#inner>section[class*="__header"] {
                    display: none;
                }
.container {
    margin: auto;
    position: relative;
     /* width: 100%; */
    width: min(calc(100% - 40px), 1120px);
    width: min(var(--width-container), var(--max-width));
    height: auto;
   
}
/* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;     */
.container--full {
        max-width: 100%;
        width: 100%;
    }
#guides {
    display: block;
    position: fixed;
    z-index: 1000000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 1;
}
#guides .guides__horizontal {
        width: min(calc(100% - 40px), 1120px);
        width: min(var(--width-container), var(--max-width));
        display: none;
        position: relative;
        top: 0;
        margin: 0 auto;
        height: 100%;
    }
#guides .guides__horizontal .grid {
            position: relative;
            margin: 0 auto;
            width: 100%;
            height: 100vh;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            
            grid-column-gap: 20px;
            
            grid-column-gap: var(--gutter-size);

        }
/* @media all and (max-width: 1024px) {
                grid-template-columns: repeat(4, 1fr);
            } */
/* Tablet */
@media (max-width: 1024px) {
#guides .guides__horizontal .grid {
                    grid-template-columns: repeat(6, 1fr)

        }
            }
/* Mobile */
@media (max-width: 767px) {
#guides .guides__horizontal .grid {
                    grid-template-columns: repeat(4, 1fr)

        }
            }
#guides .guides__horizontal .grid-item {
            background-color: #FF0000;
            opacity: 0.4;
            height: 100%;
        }
#guides .guides__switcher {
        display: block;
        /* display: none; */
        position: absolute;
        width: auto;
        bottom: 0px;
        left: 0px;
        width: 40px;
        height: 30px;
        overflow: hidden;
        pointer-events: all;
        background-color: black;
        opacity: 0.6;
        /* cursor: pointer; */
        will-change: transform;
    }
/* .safari{
    .title--section{

        &::before{
            top: -2px;
        }
    }
} */
/* .page-template-template-legal{
    #logo{
        .st0_logo{
            fill: var(--bg-dark) !important;
        }
    }
} */
.image{
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.image img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        -o-object-fit: cover;
           object-fit: cover;
        will-change: transform;
    }
@media all and (max-width: 1024px) and (orientation: portrait){
.image img{
            height: 100%
    }
        }
.image:before{
        content: '';
        display: block;
        padding-bottom: 92.28%;
    }
/* If the container has an inline aspect-ratio, disable the padding-bottom hack */
.image .image[style*="aspect-ratio"]::before {
        padding-bottom: 0;
    }
/* Ensure container height follows aspect-ratio and not an arbitrary height */
.image .image[style*="aspect-ratio"] {
        height: auto;
    }
.image--mask {
        overflow: hidden;
    }
.image__bg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
.image--background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
.background{
    position: absolute;   
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.background:before{
        content: '';
        display: block;
    }
.background__bg{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
.background__overlay{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: 0.7;
    }
.video {
    position: relative;
    width: 100%;
    height: auto;

}
.video--background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
.video__inner {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
.video__player {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform: translateX(0);
        will-change: transform;
    }
.video__player--16by9 {
            height: auto;
            height: initial;
            padding-bottom: 56.25%;
        }
.video__player--4by3 {
            height: auto;
            height: initial;
            padding-bottom: 75%;
        }
.video__player--21by9 {
            height: auto;
            height: initial;
            padding-bottom: 42.85%;
        }
.video__player--3by2 {
            height: auto;
            height: initial;
            padding-bottom: 66.66%;
        }
.video__player--home {
            height: 100%;
            padding-bottom: 68.83%;
        }
.video__player video {
            -o-object-fit: cover;
            object-fit: cover;
            min-width: 100%;
            min-height: 100%;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
.video__bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #1a1a1a;
        background-color: var(--bg-dark);
        opacity: .6;
    }
.grupo--txt {
        max-width: 100%;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
.grupo--tit-section {
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 3rem 0rem;
    }
.title{    
    font-family: "Be Vietnam Pro", Arial, sans-serif;    
    font-family: var(--font-primary);
    font-size: 63px;
    font-size: var(--size-title);
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    width: auto;
    transition: none;
    text-align: center;        
}
.title span{
        font-family: "Mondwest", Arial, sans-serif;
        font-family: var(--font-secondary);
        color: #00D492;
        color: var(--color-secondary);
    }
.title:hover{
        font-family: "Mondwest", Arial, sans-serif;
        font-family: var(--font-secondary);
            /* font-size-adjust: 0.46; */

    }
.title--section{

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 42px;
        font-size: var(--size-title-section);
        line-height: 1;           
    }
.title--section.deco::after {
                content: "";
                position: relative;
                display: flex;
                width: 84px;
                height: 3px;
                top: 3px;
                margin: 1rem 0rem;
    
                background: linear-gradient(90deg, #00D492 0%, #51A2FF 100%);
                border-radius: 0px;              
            }
.title--section.deco--gb::after {
                    background: linear-gradient(90deg, #00D492 0%, #51A2FF 100%);
                }
.title--section.deco--pr::after {
                    background: linear-gradient(90deg, #C27AFF 0%, #FB64B6 100%);
                }
@media all and (max-width: 768px) {
.title--section{
            --size-title-section: 32px           
    }
        }
@media all and (max-width: 768px) {
.title{
        white-space: normal;
        --size-title: 45px        
}
         
    }
.paragraph{    
    font-family: "Be Vietnam Pro", Arial, sans-serif;    
    font-family: var(--font-primary);
    font-size: 14px;
    font-size: var(--size-text);
    color: #00D492;
    color: var(--color-secondary);
    line-height: 24px;
    line-height: var(--line-height-text);
    /* font-size-adjust: 0.53; */

    display: inline-block;
    white-space: normal;
    width: auto;
    transition: none;
}
.paragraph span{
        /* font-family: var(--font-secondary);
        color: var(--color-secondary); */
    }
.paragraph--tertiary{
        color: #99A1AF;
        color: var(--color-tertiary);
        /* white-space: nowrap; */
        white-space: normal;
    }
.paragraph--heading{
        color: #ffffff;
        color: var(--color-primary);
        font-size: 25px;
        font-size: var(--size-subtitle);
        line-height: 35px;
        line-height: var(--line-height-subtitle); 
        text-align: left;       
    }
.paragraph--filled{

        color: #ffffff;

        color: var(--color-primary);
        font-size: 25px;
        font-size: var(--size-subtitle);
        line-height: 35px;
        line-height: var(--line-height-subtitle);
        text-align: center;
    }
.paragraph--filled span{
        
            background: linear-gradient(90deg, #00D492 0%, #51A2FF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;        
        }
.paragraph--text{

        color: #99A1AF;

        color: var(--color-tertiary);
        font-size: 14px;
        font-size: var(--size-text);
        line-height: 24px;
        line-height: var(--line-height-text);
        text-align: left;
    }
.paragraph--text strong{
            color: #ffffff;
            color: var( --color-primary);
            font-weight: 500;
        }
.paragraph--itemtext{

        color: #99A1AF;

        color: var(--color-tertiary);
        font-size: 12px;
        font-size: var(--size-item-text);
        line-height: 17px;
        line-height: var(--line-height-item-text);
        text-align: left;
    }
.paragraph--itemtext span{
        
        }
.paragraph:hover{
        /* font-family: var(--font-secondary); */
            /* font-size-adjust: 0.46; */

    }
.technology{

    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0px;
    gap: 7px;
    width: 100%;     
}
.technology__description{
    
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 267px;
    }
.technology__progress{
    
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        transition: width 1s ease;
        max-width: 267px;
        height: 7px;
        background-color: #364153;
        border-radius: 1.67772e+07px;
          overflow: hidden;
    }
.technology__progress-bar {
        position: relative;
        width: 100%;
        height: 7px;
        border-radius: 9999px;
        overflow: hidden;
        transform: scaleX(0);
        transform-origin: left;
        height: 8px;
        border-radius: 10px;
        transition: all 0.6s ease;
    }
..technology__name{
        line-height: 18px;
        letter-spacing: -0.0179443px;
        color: #D1D5DC;
    }
..technology__value{
        font-size: 10.5px;
        line-height: 14px;
        letter-spacing: 0.0922852px;
        color: #99A1AF;
    }
.technology:hover {
    --gradient-angle: 270deg;
    }
.wysiwyg {
    font-size: 14px;
    font-size: var(--size-text);
    line-height: 24px;
    line-height: var(--line-height-text);
}
.wysiwyg--home{
        color: var(--color-white);
        text-align: center;
    }
@media all and (max-width: 1024px) {
        }
.wysiwyg p:last-child {
            margin-bottom: 0;
        }
.wysiwyg b,
    .wysiwyg strong {
        font-weight: bold;
    }
.wysiwyg em,
    .wysiwyg i {}
.wysiwyg img {
        width: 100%;
        height: auto;
        vertical-align: middle;
    }
.wysiwyg ul {
        /* margin-bottom: 1rem; */
        list-style: none;
    }
/* padding-left: 1rem; */
.wysiwyg ul li{
            /* &::before{
                content: '·';
                margin-right: 10px;
                @media all and (max-width: 1024px) {
                    margin-right: 4px;
                }
            } */
        }
.wysiwyg ol {
        list-style: decimal;
    }
.wysiwyg a {}
.wysiwyg .button {}
.wysiwyg blockquote {}
.wysiwyg sup{
        position: relative;
        top: 0;
        vertical-align: top;
        font-size: 0.8vw;
        line-height: 1;
    }
@media all and (max-width: 1024px) {
.wysiwyg sup{
            top: 0;
            font-size: 3.5vw
    }
        }
/* display: inline; */
@media all and (max-width: 1024px) {
.wysiwyg span{
            /* display: block; */
    }
        }
.button{
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-size: var(--size-menu);
    color: #00D492;
    color: var(--color-secondary);
    background-color: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
    background-color: var(--bg);
    transition: all 1600ms cubic-bezier(0.04, 0.95, 0.32, 1);
    transition: all var(--timeExpo) var(--expoInOut);
    /* cursor: pointer; */
    border-radius: 8.75px;
    border-radius: var(--border-radius);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border: solid 1px var(--bg-medium);
    justify-content: center;
    width: 150px;
    height: 40px;
    gap: 8px;
}
.button--header .ico-btn{
            width: 18px;
            height: 18px;
        }
.button--header .ico-btn svg{
                fill: rgba(255, 255, 255, 0.1);
                fill: var(--bg-medium);
                transition: all 1600ms cubic-bezier(0.04, 0.95, 0.32, 1);
                transition: all var(--timeExpo) var(--expoInOut);
            }
.button--header:hover .ico-btn svg{
                    fill: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
                    fill: var(--bg);
                }
.button:hover{
        background-color: #1a1a1a;
        background-color: var(--bg-dark);
        color: var(--color-white);  
        border: solid 1px #1a1a1a;  
        border: solid 1px var(--bg-dark);
    }
.button--secondary{
        background-color: #1a1a1a;
        background-color: var(--bg-dark);
        color: var(--color-white);  
        border: solid 1px #1a1a1a;  
        border: solid 1px var(--bg-dark);
    }
.button--secondary:hover{
            background-color: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
            background-color: var(--bg);
            color: #00D492;
            color: var(--color-secondary);  
            border: solid 1px rgba(255, 255, 255, 0.1);  
            border: solid 1px var(--bg-medium);
        }
.button--works{
       
        width: auto;
        height: auto;
        flex-direction: row;
        gap: 7px;
        background: #00BC7D;
        border-radius: 8.75px;
        font-weight: 500;
        font-size: 12.25px;
        line-height: 14px;
        text-align: center;
        letter-spacing: -0.0179443px;
        color: #FFFFFF;
        padding: .8rem 1rem;            
    }
@media all and (max-width: 1024px) {
       
    }
.tags{
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #00D492;
    color: var(--color-secondary);
    justify-content: center;
    width: auto;
    height: auto;
    flex-direction: row;
    gap: 5px;
    background: rgba(0, 188, 125, 0.2);
    border: 1px solid rgba(0, 188, 125, 0.3);
    border-radius: 1.67772e+07px;
    font-weight: 400;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
    padding: .5rem 1rem;
}
.tags.tags-grey{

        color: #99A1AF;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8.75px;
    }
.tags.tags-proyect-fet{
        gap: 7px;
        font-size: 12px;
        padding: .19rem .8rem;
        border-radius: 1.67772e+07px;
    }
.tags.tags-proyect-other{

        font-size: 10.5px;
        line-height: 14px;
        letter-spacing: 0.0922852px;
        color: #D1D5DC;
        background: #364153;
        border-radius: 3.5px;
        padding: .1rem .6rem;
        border: none;

    }
select{

    font-size: 14px;

    font-size: var(--size-menu);
            background-color: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
            background-color: var(--bg);
            color: #ffffff;
            color: var(--color-primary);  
            border: solid 1px #00D492;  
            border: solid 1px var(--color-secondary);
    border-radius: 8.75px;
    border-radius: var(--border-radius);
    justify-content: center;
    width: 150px;
    height: 40px;
    /* cursor: pointer;      */
}
.icon{

    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 42px;
    height: 42px;
    background-color: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
    background-color: var(--bg);    
}
.icon--circle{
        width: 42px;
        height: 42px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 1.67772e+07px;        
    }
.icon--circle svg{
            /* fill: var(--bg-medium);
            transition: all var(--timeExpo) var(--expoInOut); */
        }
/* &::before {
            content: url();
            position: absolute;
            display: block;
            width: 100%;
            height: 1px;
            bottom: -2px;
            left: 0;
            transform: scaleX(0);
            transform-origin: top left;
            transition: transform var(--timeExpo) var(--expoInOut);
        } */
.icon--circle:hover::before {
                transform: scaleX(1);
            }
@media all and (max-width: 1024px) {
       
    }
.link{
    position: relative;
    color: var(--color-white);
    font-size: var(--size-text-small);
}
.link::before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 1px;
        bottom: -2px;
        left: 0;
        background-color: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
        background-color: var(--bg);
        transform: scaleX(0);
        transform-origin: top left;
        transition: transform 1600ms cubic-bezier(0.04, 0.95, 0.32, 1);
        transition: transform var(--timeExpo) var(--expoInOut);
    }
.link:hover::before {
            transform: scaleX(1);
        }
.sticky {
  background-color: #0A2756;
  background-color: color-mix(in oklab, #000000 80%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid var(--bg-medium);
}
@supports (color: color-mix(in lch, red, blue)) {
.sticky {
  background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
}
}
.sticky + .wrapper {
 
}
.dark-image{
    background-color: rgba(0, 0, 0, .8);
}
/* .fx-background--blue
.fx-background--purple
.fx-background--hero
.fx-background--intense */
.fx-background {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(circle at 20% 70%,
        rgba(37, 99, 235, 0.22) 0%,
        transparent 28%),

        radial-gradient(circle at 85% 15%,
        rgba(59, 130, 246, 0.18) 0%,
        transparent 30%),

        radial-gradient(circle at 50% 50%,
        rgba(0, 119, 255, 0.08) 0%,
        transparent 40%),

        linear-gradient(
        115deg,
        rgba(0, 102, 255, 0.16) 0%,
        transparent 22%,
        transparent 50%,
        rgba(37, 99, 235, 0.14) 75%,
        transparent 100%
        ),

        #020617;
}
/* glow left */
.fx-background::before {
        content: "";
        position: absolute;

        width: 1200px;
        height: 1200px;

        left: -20%;
        top: 20%;

        background: radial-gradient(
            circle,
            rgba(37, 99, 235, 0.22) 0%,
            rgba(37, 99, 235, 0.08) 35%,
            transparent 70%
        );

        filter: blur(120px);

        opacity: 0.8;

        animation: floatGlow 12s ease-in-out infinite;
    }
/* glow right */
.fx-background::after {
        content: "";

        position: absolute;

        width: 900px;
        height: 900px;

        right: -15%;
        top: -10%;

        background: radial-gradient(
            circle,
            rgba(59, 130, 246, 0.18) 0%,
            transparent 70%
        );
        filter: blur(120px);
        opacity: 0.7;
    }
/* ======================
       ELEMENTS
    ====================== */
.fx-background__overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        background:
            linear-gradient(
            to bottom,
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.45)
            );

        pointer-events: none;
    }
.fx-background__stars {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        background-image:
            radial-gradient(2px 2px at 20px 30px, white, transparent),
            radial-gradient(2px 2px at 40px 70px, white, transparent),
            radial-gradient(1px 1px at 90px 40px, white, transparent),
            radial-gradient(2px 2px at 160px 120px, white, transparent),
            radial-gradient(1px 1px at 250px 200px, white, transparent),
            radial-gradient(2px 2px at 500px 80px, white, transparent),
            radial-gradient(1px 1px at 700px 150px, white, transparent),
            radial-gradient(2px 2px at 900px 300px, white, transparent);

        background-repeat: repeat;
        background-size: 1000px 600px;

        opacity: 0.55;

        animation: starsMove 120s linear infinite;
    }
.fx-background__content {

        position: relative;
        margin: auto;
        z-index: 5;

    }
.fx-background--purple {

    background:
        radial-gradient(circle at 20% 70%,
        rgba(168, 85, 247, 0.25) 0%,
        transparent 28%),
        #020617;

}
.fx-background--soft::before,
    .fx-background--soft::after {
        opacity: .4;
        filter: blur(180px);
    }
/* Includes */
footer{
    position: relative;
    background-color: #1a1a1a;
    background-color: var(--bg-dark);
    padding: max(2.5rem, min(calc(2.167rem + 1.422vw), 3.5rem)) 0;

}
footer .container{
        border-top: 1px solid linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
        border-top: 1px solid var(--bg);
        display: flex;
        justify-content: space-between;
        padding-top: 16px;
        flex-direction: row;
    }
footer .container .copyright{
            color: var(--color-white);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.150391px;
        }
footer .container .copyright .paragraph--filled{
                    font-size: 14px;
                    font-size: var(--size-text);
                }
footer .container .menu-legal{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            -moz-column-gap: 24px;
                 column-gap: 24px;
            row-gap: 16px;
        }
footer .container .menu-legal li a{
                    font-size: 14px;
                    color: #D1D5DC;
                    color: var(--color-menu);
                    -webkit-text-decoration: none;
                    text-decoration: none;
                    transition: color 1600ms cubic-bezier(0.16, 1, 0.3, 1);
                    transition: color var(--timeExpo) var(--expoOut);
                    font-weight: 500;
                    font-size: var(--size-menu);
                    line-height: 21px;
                    text-transform: capitalize;
                    text-align: center;
                    letter-spacing: -0.150391px;
                }
footer .container .menu-legal li a:hover{
                        color: #00D492;
                        color: var(--color-secondary);
                    }
@media all and (max-width: 768px) {
footer .container .menu-legal{
                margin-top: 24px;
                flex-direction: column;
                align-items: center;
                -moz-column-gap: 16px;
                     column-gap: 16px;
                row-gap: 16px
        }
            }
@media all and (max-width: 768px) {
footer .container{
            flex-direction: column;
            align-items: center
    }
        }
.mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 10000;
}
.mask .inner {
        position: relative;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        will-change: transform;
        background-color: #00D492;
        background-color: var(--bg-secondary);
    }
#loader {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: transform;
    z-index: 10000;
}
#loader .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
#loader .inner .logo_loader {
            position: relative;
            top: 0;
            left: 0;
            width: max(18.75rem, min(calc(14.583rem + 17.778vw), 31.25rem)); /* min: 300px, max: 500px */;
            height: auto;
            overflow: hidden;
        

            /* @media all and (max-width: 1024px) {
                width: 90px;
                height: auto;
            } */
        }
#loader .inner .logo_loader img{
                width: 100%;
            }
#loader .loader__bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #00D492;
        background-color: var(--bg-secondary);
    }
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    padding: 18px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
@media all and (max-width: 768px) {
.site-header {
        z-index:9990;
        padding: 1rem 0rem
}
    }
.site-header .logo {
        width: 100%;
        max-width: 51px;
        position: relative;
        display: flex;
    }
.site-header .logo a{
            display: block;
        }
.site-header .button--header{
        margin-left: 40px;
    }
@media all and (max-width: 1280px) {
.site-header .main-nav {
            width: auto;
            display: flex;
            align-items: center;
            justify-content: end
    }            
        }
.site-header .main-nav ul {
            display: flex;
            -moz-column-gap: 16px;
                 column-gap: 16px;
            row-gap: 50px;
        }
.site-header .main-nav li {
            list-style-type: none;
            display: inline-block;
            opacity: 1;
            z-index: 2;

            position: relative;
            white-space: nowrap;

        }
.site-header .main-nav li a{
                color: #D1D5DC;
                color: var(--color-menu);
                -webkit-text-decoration: none;
                text-decoration: none;
                transition: color 1600ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: color var(--timeExpo) var(--expoOut);
                font-weight: 500;
                font-size: 14px;
                font-size: var(--size-menu);
                line-height: 21px;
                text-transform: capitalize;
                text-align: center;
                letter-spacing: -0.150391px;
            }
.site-header .main-nav li a.is-active {
                    border-bottom: solid 1px #00D492;
                    border-bottom: solid 1px var(--color-secondary);
                    color: #00D492;
                    color: var(--color-secondary);
                    pointer-events: none;
                }
.site-header .main-nav li a:hover {
                    color: #00D492;
                    color: var(--color-secondary);
                }
.site-header .nav-mobile {
        display: none;
    }
.site-header .nav-container {
        display: flex;
        justify-content: end;
        align-items: center;
        height: auto;
    }
.site-header .nav-container-mobile {
        display: none;
    }
.site-header .main-nav li {
        position: relative;
    }
@media screen and (max-width: 768px) {

        .site-header .hr-mobile{
            width: 100%;
            height: 1px;
            position: absolute;
            top: 78px;
            left: 0px;
            background-color: rgba(255, 255, 255, 0.1);
            background-color: var(--bg-medium);
        }
        
        .site-header .nav-container{
            display: none;
        }

        .site-header .logo-mobile{
            position: absolute;
            top: 16px; 
            left: 20px;
            width: 156px;  
        }

            .site-header .logo-mobile a{
                display: block;
            }

        .site-header .nav-container-mobile {
            display: block;
            /* position: fixed; */
            position: absolute;
            top: 0;
            left: 0;
            z-index:9998;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            pointer-events: none;
            background-color: rgba(0, 0, 0, 0.8);
            /* background-color: #020617; */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid var(--bg-medium); 
            
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

@supports (color: color-mix(in lch, red, blue)) {
.site-header .nav-container-mobile {
            background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
        }
}                       

           .site-header .nav-container-mobile .menu__list_mobile {
                flex-direction: column;
                opacity: 0;
                padding: 0 32px;
                margin-top: 134px;
                will-change: opacity;
            }
            
                .site-header .nav-container-mobile .menu__list_mobile li {
                    display: block;
                    width: 100%;
                    text-align: left;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                    border-bottom: 1px solid var(--bg-medium);
                    padding-bottom: 16px;
                }

                    .site-header .nav-container-mobile .menu__list_mobile li a{ 
                        color: #00D492; 
                        color: var(--color-secondary);

                    }
                        
                        .site-header .nav-container-mobile .menu__list_mobile li a.is-active {
                            color: #ffffff;
                            color: var(--color-primary);
                            pointer-events: none;
                            border-bottom: none;
                        }

            .site-header .nav-container-mobile .button--header{
                position: absolute;
                margin-top: auto;
                bottom: 110px;
                left: 50%;
                transform: translate(-50%, 0);
                margin: 0;
                opacity: 0.0001;
            }

        .site-header .nav-mobile {
            /* position: absolute; */
            position: relative;
            /* top: 24px; */
            top: auto;
            top: initial;
            /* right: 10px; */
            right: auto;
            right: initial;
            width: 40px;
            height: 30px;
            cursor: pointer;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
            justify-content: center;
        }

            .site-header .nav-mobile .line-navMobile {
                fill: none;
                stroke: rgba(255, 255, 255, 0.1);
                stroke: var(--bg-medium);
                stroke-miterlimit: 10;
            }


    }
.popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 10;
}
.popup__mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-pop);
        opacity: 0.0001;
        cursor: pointer;
        will-change: opacity;
    }
.popup__inner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transform: translateY(-100%);
        will-change: transform;
    }
.popup__inner .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 70vw;
            pointer-events: all;
        }
@media all and (max-width: 1024px) and (orientation: portrait) {
.popup__inner .center {
                width: 90vw
        }
            }
.popup__inner .center #popupvideo {
                width: 100%;
            }
.popup__inner .center #popupvideo iframe {
                    width: 100%;
                }
.popup__inner .center .video {
                width: 100%;
                height: auto;
                position: relative;
                pointer-events: all;
            }
.popup__inner .center .video__player {
                    pointer-events: all;
                }
.popup__closer {
        width: 40px;
        height: 40px;
        top: 2.5vw;
        right: 2.5vw;
        font-size: 1.6vw;
        text-align: center;
        line-height: 40px;
        position: absolute;
        cursor: pointer;
        opacity: 0.0001;
    }
/* transition: opacity 300ms var(--ease-out); */
@media all and (max-width: 1024px) and (orientation: portrait) {
.popup__closer {
            width: 30px;
            height: 30px
    }
        }
.popup__closer img {
            width: 100%;
            height: auto;
        }
.popup__closer:hover {
            opacity: 0.5;
        }
[data-popup] {
    cursor: pointer;
}
#cookBot {
    /* cursor: pointer; */
    transition: color 1600ms cubic-bezier(0.16, 1, 0.3, 1);
    transition: color var(--timeExpo) var(--expoOut);
    color: var(--color-medium);
}
#cookBot:hover {
        color: #00D492;
        color: var(--color-secondary);
    }
#faldon {
    position: fixed;
    padding: 15px 20px;
    right: 4.8vw;
    bottom: 20px;
    width: 750px;

    background-color: #1a1a1a;

    background-color: var(--bg-dark);
    z-index: 90;
}
@media all and (max-width: 1024px) {
#faldon {
        width: 90%;
        max-width: 750px
        /* max-width: 320px; */
        /* padding: calc(var(--square)*1) calc(var(--square)*2); */
}
    }
#faldon .content{
        display: flex;
        align-items: center;
        justify-content: center;
    }
@media all and (max-width: 1024px) {
#faldon .content{
            flex-direction: column;
            align-items: flex-start
    }
        }
#faldon .content .wysiwyg{
            font-size: 14px;
            line-height: 18px;
            color: #ffffff;
            color: var(--color-primary);
        }
#faldon .content .wysiwyg a{
                -webkit-text-decoration: underline;
                text-decoration: underline;
                color: #ffffff;
                color: var(--color-primary);
            }
#faldon .content .enlaces{
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            margin-top: 27px;
        }
@media all and (max-width: 1024px) {
#faldon .content .enlaces{
                margin-left: 0;
                margin-top: 10px;
                align-items: center;
                flex-direction: row;
                width: 100%
        }
            }
@media all and (max-width: 429px) {
#faldon .content .enlaces{
                flex-direction: column;
                width: 100%
        }
            }
#faldon .content .enlaces #aceptar {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                /* cursor: pointer; */
                font-size: 12px;
                background-color: #1a1a1a;
                background-color: var(--bg-dark);
                color: #00D492;
                color: var(--color-secondary);
                transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
                transition: all 1.5s var(--expoOut);
                padding: 8px 0;
                margin-bottom: 10px;
                width: 170px;

            }
#faldon .content .enlaces #aceptar:hover {
                    background-color: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
                    background-color: var(--bg);
                    color: #ffffff;
                    color: var(--color-primary);
                }
@media all and (max-width: 1024px) {
#faldon .content .enlaces #aceptar {
                    margin-bottom: 0;
                    margin-right: 15px

            }
                }
@media all and (max-width: 429px) {
#faldon .content .enlaces #aceptar {
                    flex-direction: column;
                    margin-bottom: 10px;
                    margin-right: 0

            }
                }
#faldon .content .enlaces #cancelar {
                display: flex;
                align-items: center;
                justify-content: center;
                /* cursor: pointer; */
                font-size: 12px;
                width: 170px;
                color: #ffffff;
                color: var(--color-primary);
                background-color: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%);
                background-color: var(--bg);
                transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
                transition: all 1.5s var(--expoOut);
                padding: 8px 0px;
            }
#faldon .content .enlaces #cancelar:hover{
                    background-color: #1a1a1a;
                    background-color: var(--bg-dark);
                    color: #00D492;
                    color: var(--color-secondary);
                }
#faldon #close_cookies {
        position: absolute;

        width: 20px;
        height: 20px;

        right: 5px;
        top: 5px;
    }
/* cursor: pointer; */
#faldon #close_cookies svg {
            position: relative;
            transition: all 1600ms cubic-bezier(0.04, 0.95, 0.32, 1);
            transition: all var(--timeExpo) var(--expoInOut);
        }
#faldon #close_cookies line {
            fill: none;
            stroke: #1a1a1a;
            stroke: var(--bg-dark);
            stroke-width: 5;
            stroke-miterlimit: 10;
        }
@media all and (max-width: 768px) {
#faldon #close_cookies {
            width: 30px;
            height: 30px;
            top: 10px;
            right: 10px
    }
        }
/* Renderers */
.home .inner{

        display: flex;
        flex-direction: column;
    }
.home--tags {
        max-width: 100%;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        justify-content: flex-start;
        align-items: center;
        gap: .7rem;
        flex-wrap: wrap;        
    }
.home--tags:has(> .tags-grey){
            gap: 1.7rem;
            justify-content: center;
        }
.home--tags.tag-work{
             justify-content: flex-start;
        }
.home--item {
        /* max-width: 226px; */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 1.2rem;
        gap: 1.3rem;
        background: rgba(0, 0, 0, 0.5);
        /* background: linear-gradient(135deg, #000000 0%, #101828 50%, #000000 100%); */

        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12.75px;
        min-height: 220px;

    }
.home--item .title--char{
            font-size: 16px;
            font-size: var(--size-title-char);
            line-height: 20px;
        }
.home--skill {
        /* max-width: 468px; */
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;

        box-sizing: border-box;
        padding: 1.3rem 0rem;
        gap: 2.6rem;
        background: rgba(16, 24, 40, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12.75px;
    }
.home .skills-card--pink {
    /* --hue: 321; */
    --hue: 332;
    }
.home .skills-card--blue {
    --hue: 220;
    }
.home .skills-card--green {
    --hue: 140;
    }
.home .skills-card--orange {
    --hue: 40;
    }
.home--tech {
        width: 100%;
        max-width: 267px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
    }
.home--proyect-featured {
        /* max-width: 480px; */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
        /* padding: 1.2rem; */
        gap: 1.3rem;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12.75px;
        overflow: hidden;
        justify-content: stretch;
        align-items: center;
        height: 410px;
        transition-duration: .5s;
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: cubic-bezier(0.05, 0.76, 0.38, 1.015);
        transition-timing-function: var(  --ease-out, var(--default-transition-timing-function));

    }
.home--proyect-featured .image img{
            transition-duration: .5s;
        }
.home--proyect-featured .title--char{
            transition-duration: .5s;
        }
.home--proyect {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        box-sizing: border-box;
        gap: 1.3rem;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12.75px;
        overflow: hidden;

        transition-duration: .5s;
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: cubic-bezier(0.05, 0.76, 0.38, 1.015);
        transition-timing-function: var(  --ease-out, var(--default-transition-timing-function));         

    }
.home--proyect .image img{
            transition-duration: .5s;
        }
.home--proyect .title--char{
            transition-duration: .5s;
        }
.home--description {
        margin: 0;
        width: 100%;        
        padding: 1.2rem;
        gap: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }
.home--description.desc30{
             width: 20%; 
        }
.home--description.desc-work{
             align-items: flex-start;
        }
.home--actions {
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;        
    }
@media all and (max-width: 768px) {
.home--actions {
            flex-direction: column        
    }
        }
.home--rrss {
        max-width: auto;
        width: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
.home__hero{
        height: 100vh;
        display: flex;
        align-items: center;
    }
.home__hero .paragraph--tertiary{
                text-align: center;
                max-width: 580px;
                width: 100%;
                font-weight: 400;
                font-size: 15.75px;
                line-height: 24px;
                letter-spacing: -0.292236px;
                white-space: normal;                
            }
.home__about{
        height: auto;
        display: flex;
        align-items: center;
        background-color: #101828;
        padding: 1rem 0rem 4rem 0rem;        
    }
.home__about .grupo--txt {
            justify-content: flex-start;
            align-items: flex-start;
        }
.home__about .paragraph--tertiary{
                text-align: center;
                max-width: 580px;
                width: 100%;
                font-weight: 400;
                font-size: 15.75px;
                line-height: 24px;
                letter-spacing: -0.292236px;
                white-space: normal;                
            }
.home__about .items{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 2rem;            
        }
.home__about .items .items-row{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;                                
                flex-direction: row;
                gap: 2rem;                  
            }
@media all and (max-width: 768px) {
.home__about .items .items-row{
                    flex-direction: column                  
            }
                }
.home__about .items .home--item{

                width: 50%;
                max-width: 100%;
                height: auto;
                min-height: 245px;
                justify-content: center;
                gap: 2rem;                   
            }
@media all and (max-width: 1024px) {
.home__about .items .home--item{
                    min-height: 0;
                    min-height: initial;
                    justify-content: center;
                    gap: 1rem                   
            }
                }
@media all and (max-width: 768px) {
.home__about .items .home--item{
                    width: 100%                   
            }
                }
@media all and (max-width: 768px) {
.home__about{
            height: auto        
    }
        }
.home__skills{
        height: auto;
        display: flex;
        align-items: center;
        background-color: #000000;        
        padding: 1rem 0rem;
    }
.home__works{
        padding: 1rem 0rem; 
        background-color: #101828;
    }
.home__works--links{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
.home__works--links>.button--works{
                color: #00D492;
                color: var(--color-secondary);
                background: rgba(38, 38, 38, 0.3);
                border: 1px solid #262626;
                border-radius: 6.75px;
            }
.home__works--links>.button--works:hover{
                    color: #ffffff;
                    color: var(--color-primary);
                    border: 2px solid #00D492;
                    border: 2px solid var(--color-secondary);
                }
.home__image{
        height: 45vh;
    }
/* aspect-ratio: 1472/430; */
.home__image .image img{
                -o-object-fit: cover;
                   object-fit: cover;
            }
.home__footer{
        height: auto;
    }
.legal .cookies-manage-btn {
        position: fixed !important;
        right: 32px;
        bottom: 24px;
        z-index: 999999;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        padding: 14px 22px;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 12px;
        background: #1c1c1c;
        color: #fff;
        cursor: pointer;
    }
.legal .cookies-manage-btn.cmplz-hidden,
    .legal .cookies-manage-btn[style*="display: none"],
    .legal .cookies-manage-btn[style*="visibility: hidden"] {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
.legal .page__content{
        /* padding: 130px 0 100px; */
        height: auto;
        display: flex;
        align-items: center;
        background-color: #000000;        
        padding: 1rem 0rem;
    }
/* .cmplz-document.cookie-statement.cmplz-document-eu{
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width:100%;
            max-width:100% !important;
            gap: 1rem;

            &>h2{
                font-family: var(--font-primary);
                font-size: var(--size-subtitle);
                line-height: 1;
                display: inline-block;
                white-space: nowrap;
                width: auto;
                transition: none;
                text-align: center;
            }

            &>p, &>li{
                display: inline-block;
                white-space: normal;
                width: auto;
                transition: none;                
                font-family: var(--font-primary);
                font-size: var(--size-text);
                color: var(--color-primary);
                line-height: var(--line-height-text);
            }
        } */
@media all and (max-width: 768px) {
.legal .page__content{
            padding: 158px 0 50px
    }
        }
.legal .page__content .container{
        
            padding-top: 50px;
        }
@media all and (max-width: 768px) {
.legal .page__content .container{
                padding-top: 20px
        }

            }
.legal .page__content .container .wysiwyg{
                margin-top: 25px;
            }
.legal .page__content .container .wysiwyg p{
                    margin-bottom: 15px;
                }
@media all and (max-width: 768px) {
.legal .page__content .container .wysiwyg{
                    font-size: 12px
            }
                }
.error404 .inner{
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 64px);
    }
.error404__hero {
        height: 100vh;
        display: flex;
        align-items: center;
    }
.error404__hero .paragraph--tertiary{
                text-align: center;
                max-width: 580px;
                width: 100%;
                font-weight: 400;
                font-size: 15.75px;
                line-height: 24px;
                letter-spacing: -0.292236px;
                white-space: normal;                
            }
.error404__hero .title--medium {
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-family: var(--font-primary);
            padding-bottom: 48px;
            color: #ffffff;
            color: var(--color-primary);
            text-transform: none;
            text-transform: initial;
        }
.error404__hero .link {
            font-size: var(--size-button);
        }
@media all and (min-width: 768px) {
.error404__hero {
            padding: 100px 0 0 0
    }

            .error404__hero .title--medium{
                font-family: "Be Vietnam Pro", Arial, sans-serif;
                font-family: var(--font-primary);
                padding-bottom: 48px;
            }
        }
.error404__footer{
        margin-top: auto;
    }
.works .inner{

        display: flex;
        flex-direction: column;
    }
.works__hero{
        height: 100vh;
        display: flex;
        align-items: center;
    }
.works__hero .paragraph--tertiary{
                text-align: center;
                max-width: 580px;
                width: 100%;
                font-weight: 400;
                font-size: 15.75px;
                line-height: 24px;
                letter-spacing: -0.292236px;
                white-space: normal;                
            }
.works--proyect {
        /* max-width: 310px; */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        box-sizing: border-box;
        /* padding: 1.2rem; */
        gap: 1.3rem;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12.75px;
        overflow: hidden;
        min-height: 410px;

        transition-duration: .5s;
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: cubic-bezier(0.05, 0.76, 0.38, 1.015);
        transition-timing-function: var(  --ease-out, var(--default-transition-timing-function));         

    }
.works--proyect .image img{
            transition-duration: .5s;
        }
.works--proyect .title--char{
            transition-duration: .5s;
        }
.works--description {
        margin: 0;
        width: 100%;        
        padding: 1.2rem;
        gap: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
.works--description.desc30{
             width: 20%; 
        }
.works--description.desc-work{
             align-items: flex-start;
        }
.works--tags {
        max-width: 100%;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: .7rem;
        flex-wrap: wrap;        
    }
.works--tags:has(> .tags-grey){
            gap: 1.7rem;
        }
.works--tags.tag-work{
             justify-content: flex-start;
        }
.works__footer{
        height: auto;
    }
.skills{
    background-color: green;
}
.proyecto{

    background-color: #101828;
}
.proyecto__image{
        display:none;         
        height: auto;
        /* min-height: 100vh; */
        overflow: hidden;
    }
.proyecto__image .image img{
                -o-object-fit: cover;
                   object-fit: cover;
            }
.proyecto__hero-col2{
        height: auto;
        min-height: 50vh;
        display: flex;
        align-items: center;
        padding: 3rem 0rem 0rem 0rem;        

    }
/* display:none; */
.proyecto__hero-col2 .proyecto--tit{

            justify-content: flex-start;
            align-items: center;
            text-align: center;
        }
.proyecto__hero-col2 .proyecto--tit-image{
            position:absolute;
            top: 0px;
            width:100%;
            height:100%;
            z-index:10;
            justify-content: center;
            align-items: center;            
        }
.proyecto__hero-col1{
        height: auto;
        /* min-height: 50vh; */
        min-height: 38vh;
        display: flex;
        align-items: center;
        /* padding: 3rem 0rem 0rem 0rem; */
        background-color: #000;  

    }
@media all and (max-width: 768px) {
.proyecto__hero-col1 .title--section{
                    --size-title-section: 26px                  
            }

                    .proyecto__hero-col1 .title--section.deco::after {
                        margin: .5rem 0rem;
                    }                
                }
.proyecto__hero-col1 .proyecto--tit{

            justify-content: flex-start;
            align-items: center;
            text-align: center;
        }
.proyecto__hero-col1 .proyecto--tit-image{
            position:absolute;
            top: 0px;
            width:100%;
            height:100%;
            z-index:10;
            justify-content: center;
            align-items: center;    
            /* background-color: rgba(0, 0, 0, .8); */
        }
.proyecto__overview{
        height: auto;
        min-height: auto; 
        display: flex;
    }
.proyecto__overview .proyecto--tit{
            align-items: flex-start;
            text-align: left;
            max-width: 850px;
            margin: auto;            
        }
.proyecto__overview .paragraph--text{
            align-items: flex-start;
            text-align: left;
        }
.proyecto__overview-extended{
        display: flex;
        /* display: none; */
    }
.proyecto__works-images{
        height: auto;
        min-height: auto;   
        background-color: #101828;
        padding: 2rem 0rem 6rem 0rem;        
    }
/* display: none;   */
.proyecto__works-images .proyecto--card{
            display: flex;
            flex-direction: row;
            gap: 2rem;
            justify-content: center;
            align-items: center;
        }
@media all and (max-width: 768px) {
.proyecto__works-images .proyecto--card{
                flex-direction: column;
                align-items: center
        }
            }
.proyecto__works-card{
        height: auto;
        min-height: auto;   
        background-color: #101828;
        padding: 2rem 0rem;          
        display: flex; 
        

    }
.proyecto__works-card .proyecto--card{
            display: flex;
            flex-direction: row;
            gap: 2rem;
            justify-content: center;
            align-items: center;
        }
@media all and (max-width: 768px) {
.proyecto__works-card .proyecto--card{
                flex-direction: column;
                align-items: center
        }
            }
.proyecto__works-card .proyecto--card-reverse{
                flex-direction: row-reverse;                
            }
@media all and (max-width: 768px) {
.proyecto__works-card .proyecto--card-reverse{
                    flex-direction: column-reverse                
            }
                }
.proyecto__works-card .proyecto--tit{

            justify-content: center;
            align-items: flex-start;
            text-align: left;
            padding: 1rem;
        }
.proyecto__works-card-reverse{
        display: flex;
        height: auto;
        min-height: auto;   
        background-color: #101828;
        padding: 2rem 0rem;   
    }
.proyecto__works-card-reverse .proyecto--card{
            display: flex;
            flex-direction: row;
            gap: 2rem;
            padding: 2rem 0rem;
            justify-content: center;
            align-items: center;
        }
@media all and (max-width: 768px) {
.proyecto__works-card-reverse .proyecto--card{
                flex-direction: column;
                align-items: center
        }
            }
.proyecto__works-card-reverse .proyecto--card-reverse{
                flex-direction: row-reverse;                
            }
@media all and (max-width: 768px) {
.proyecto__works-card-reverse .proyecto--card-reverse{
                    flex-direction: column-reverse                
            }
                }
.proyecto__works-card-reverse .reverse{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-flow: dense;
            direction: rtl;
        }
.proyecto--image {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        box-sizing: border-box;
        gap: 1.3rem;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 12.75px;
        overflow: hidden;

    }
.proyecto__next{
        height: auto;
        background-color: #101828;
        padding: 2rem 0rem;  
        transition-duration: .5s;
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: cubic-bezier(0.05, 0.76, 0.38, 1.015);
        transition-timing-function: var(  --ease-out, var(--default-transition-timing-function)); 
        
        


    }
.proyecto__next a{
            border-radius: 12.5px;
            overflow: hidden;
            width: 100%;
            position: relative;
            display: flex;            
        }
.proyecto__next .image {

            border-radius: 12.75px;
        }
.proyecto__next .image>img{
                transition-duration: .5s;
            }
.proyecto__next .title--char{
            transition-duration: .5s;
        }
.proyecto__next-content{
            position: absolute;
            width: 100%;
            height:100%;
            top: 0px;
            display:flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2rem 2rem;
            /* cursor: pointer; */
            background-color: rgba(0,0,0,.6);        
        }
@media all and (max-width: 768px) {
.proyecto__next-content{
                padding: 1rem 1rem        
        }
            }
.proyecto__next-header{
            font-size: 18px;              
        }
@media all and (max-width: 768px) {
.proyecto__next-header{
                font-size: 14px              
        }
            }
.proyecto__next-name{
            /* text-transform: uppercase; */
            font-size: 18px;              
        }
@media all and (max-width: 768px) {
.proyecto__next-name{
                font-size: 14px              
        }
            }
.proyecto__works-card-display{
        position: relative;
        z-index: 20;
        display: flex;
        height: auto;
        min-height: auto;   
        background-color: #101828;
        padding: 2rem 0rem 6rem 0rem;

    }
.proyecto__works-card-display .proyecto--card{
                display: flex;
                flex-direction: row;
                gap: 2rem;            
            }
.proyecto__works-card-display .proyecto--card.flex-dir-col {
                    flex-direction: column;
                }
@media all and (max-width: 768px) {
.proyecto__works-card-display .proyecto--card{
                    
                    flex-direction: column !important;
                    align-items: normal            
            }
                }
.proyecto__works-card-display .proyecto--tit{

                justify-content: center;
                align-items: flex-start;
                text-align: left;
                padding: 1rem;
            }
/*AD PREVIEW INI*/
.proyecto__works-card-display .ad-preview {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 1200px;
            width: 100%;
        }
/* Custom Select */
.proyecto__works-card-display .custom-select {
            position: relative;
            width: 280px;
        }
.proyecto__works-card-display .custom-select__trigger {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: #111827;
        border: 1px solid #1f2937;
        border-radius: 10px;
        /* cursor: pointer; */
        color: white;
        }
.proyecto__works-card-display .custom-select__icon {
        transition: transform 0.3s ease;
        }
.proyecto__works-card-display .custom-select.open .custom-select__icon {
        transform: rotate(180deg) translate(0px, 2px);
        transform-origin: center center;
        }
.proyecto__works-card-display .custom-select__dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        background: #111827;
        border: 1px solid #1f2937;
        border-radius: 10px;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: 0.25s ease;
        }
.proyecto__works-card-display .custom-select--static .custom-select__static-label {
            display: flex;
            align-items: center;
            min-height: 48px;
            padding: 12px 16px;
            border: 1px solid #1f2937;
            border-radius: 10px;
            background: #111827;
            color: white;
        }
.proyecto__works-card-display .custom-select.open .custom-select__dropdown {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        }
.proyecto__works-card-display .custom-select__dropdown li {
        padding: 12px 16px;
        /* cursor: pointer; */
        transition: background 0.2s;
        }
/* background: #1f2937; */
.proyecto__works-card-display .custom-select__dropdown li:hover p{color: #00D492;color: var(--color-secondary);}
/* Banner */
.proyecto__works-card-display .ad-preview__stage {
            display: flex;
            width:100%;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            background: #020617;
            border-radius: 16px;
        }
.proyecto__works-card-display .ad-preview__iframe {
            border: none;
            box-shadow: 0 20px 40px rgba(0,0,0,0.5);
            transition: all 0.3s ease;
        }
/* Responsive */
/* @media (max-width: 768px) {
            .ad-preview__iframe {
                transform: scale(0.8);
                transform-origin: top center;
            }
        } */
/* ========================= */
/* RESPONSIVE INTELIGENTE */
/* ========================= */
/* SOLO banners horizontales */
@media (max-width: 1048px) {
            .proyecto__works-card-display .ad-preview__iframe.is-horizontal {
                transform: scale(0.75);
                transform-origin: center center;
            }
        }
@media (max-width: 768px) {
            .proyecto__works-card-display .ad-preview__iframe.is-horizontal {
                transform: scale(0.6);
                transform-origin: center center;
            }
        }
@media (max-width: 680px) {

        .proyecto__works-card-display .ad-preview__stage {
            padding: 2rem 1rem;
        }        

            .proyecto__works-card-display .ad-preview__iframe.is-horizontal {
                transform: scale(0.5);
            }
        }
@media (max-width: 480px) {

        .proyecto__works-card-display .ad-preview__stage {
            padding: 1rem .5rem;
        }        
            .proyecto__works-card-display .ad-preview__iframe.is-horizontal {
                transform: scale(0.3);
            }
        }
.proyecto__footer{
        height: auto;
    }
/* Components*/
.mouse-follower {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    pointer-events: none;
    width: 72px;
    height: 72px;
    will-change: transform;
    display:none;
}
.mouse-follower svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: none;
        stroke: #00D492;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 6px rgba(0, 212, 146, .35));
    }
/* .mouse-follower {
    position: fixed;
    top: -30px;
    left: -40px;
    z-index: 9999;
    pointer-events: none;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    line-height: 1;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    will-change: transform;
    mix-blend-mode: normal;

    @media (hover: none) {
        display: none;
    }
}

.mouse-follower--steak {
    rotate: -12deg;
}

.mouse-follower--wine {
    rotate: 8deg;
}

.mouse-follower--octopus {
    rotate: -6deg;
} */