@layer utilities {

    .hidden {
        display: none !important;
    }

    .block {
        display: block;
    }

    .inline-block {
        display: inline-block;
    }

    .inline {
        display: inline;
    }

    [x-cloak] {
        display: none !important;
    }

    .flex {
        display: flex;
    }

    .inline-flex {
        display: inline-flex;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex-row {
        flex-direction: row;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-nowrap {
        flex-wrap: nowrap;
    }

    .items-start {
        align-items: flex-start;
    }

    .items-center {
        align-items: center;
    }

    .items-end {
        align-items: flex-end;
    }

    .items-stretch {
        align-items: stretch;
    }

    .justify-start {
        justify-content: flex-start;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-end {
        justify-content: flex-end;
    }

    .justify-between {
        justify-content: space-between;
    }

    .flex-1 {
        flex: 1 1 0%;
    }

    .flex-auto {
        flex: 1 1 auto;
    }

    .flex-none {
        flex: none;
    }

    .grow {
        flex-grow: 1;
    }

    .shrink-0 {
        flex-shrink: 0;
    }

    .relative {
        position: relative;
    }

    .absolute {
        position: absolute;
    }

    .fixed {
        position: fixed;
    }

    .sticky {
        position: sticky;
        top: 0;
    }

    .inset-0 {
        inset: 0;
    }

    .w-full {
        width: 100%;
    }

    .h-full {
        height: 100%;
    }

    .h-screen {
        height: 100vh;
        height: 100dvh;
    }

    .h-screen-80 {
        min-height: 85vh;
        min-height: 85dvh;
    }


    /* --- CUBE CSS: MARGINS --- */
    .mx-auto { margin-inline: auto; }
    .my-auto { margin-block: auto; }
    .ml-auto { margin-inline-start: auto; }
    .mr-auto { margin-inline-end: auto; }
    .mt-auto { margin-block-start: auto; }
    .mb-auto { margin-block-end: auto; }

    /* --- CUBE CSS: MAX WIDTHS --- */
    .max-w-low { max-width: var(--hg-layout-narrow); }
    .max-w-std { max-width: var(--hg-layout-max); }
    .max-w-high { max-width: var(--hg-layout-wide); }
    .max-w-full { max-width: var(--hg-layout-full); }

    .overflow-hidden {
        overflow: hidden;
    }

    .overflow-auto {
        overflow: auto;
    }

    .object-cover {
        object-fit: cover;
    }

    .object-contain {
        object-fit: contain;
    }

    .text-center {
        text-align: center;
    }

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right;
    }

    .uppercase {
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .capitalize {
        text-transform: capitalize;
    }

    .italic {
        font-style: italic;
    }

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    /* --- CUBE CSS: OPACITY --- */
    .opacity-none { opacity: 0; }
    .opacity-low { opacity: 0.25; }
    .opacity-std { opacity: 0.5; }
    .opacity-high { opacity: 0.75; }
    .opacity-full { opacity: 1; }

    .cursor-pointer {
        cursor: pointer;
    }

    .cursor-not-allowed {
        cursor: not-allowed;
    }

    .pointer-events-none {
        pointer-events: none;
    }

    .pointer-events-auto {
        pointer-events: auto;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }



    /* --- CUBE CSS: TAMAÑOS DE LETRA (HG Fonts) --- */
    .text-size-low { font-size: var(--hg-size-low); }
    .text-size-std { font-size: var(--hg-size-std); }
    .text-size-high { font-size: var(--hg-size-high); }
    .text-size-full { font-size: var(--hg-size-full); }

    /* --- CUBE CSS: COLORES DE TEXTO (HG Colors) --- */
    .text-color-low { color: var(--hg-color-low); }
    .text-color-std { color: var(--hg-color-std); }
    .text-color-high { color: var(--hg-color-high); }
    .text-color-full { color: var(--hg-color-full); }
    .text-on-low { color: var(--hg-color-low-on); }
    .text-on-std { color: var(--hg-color-std-on); }
    .text-on-high { color: var(--hg-color-high-on); }
    .text-on-full { color: var(--hg-color-full-on); }

    /* --- CUBE CSS: COLORES DE FONDO (HG Colors) --- */
    .bg-low { background-color: var(--hg-bg-low); }
    .bg-std { background-color: var(--hg-bg-std); }
    .bg-high { background-color: var(--hg-bg-high); }
    .bg-full { background-color: var(--hg-bg-full); }

    .pad-sec-y {
        padding-block: var(--hg-padding-section);
    }

    .z-low {
        z-index: var(--hg-z-low);
    }

    .z-std {
        z-index: var(--hg-z-std);
    }

    .z-high {
        z-index: var(--hg-z-high);
    }

    .z-full {
        z-index: var(--hg-z-full);
    }



    .glass {
        background-color: color-mix(in oklch, var(--hg-bg-std) 70%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid color-mix(in oklch, var(--hg-border-std) 50%, transparent);
        box-shadow: var(--hg-depth-low);
    }

    .glass-high {
        background-color: color-mix(in oklch, var(--hg-bg-std) 85%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid color-mix(in oklch, var(--hg-border-std) 60%, transparent);
    }

    /* --- CUBE CSS: FONT WEIGHTS --- */
    .font-low { font-weight: 400; }
    .font-std { font-weight: 500; }
    .font-high { font-weight: 600; }
    .font-full { font-weight: 700; }

    /* --- CUBE CSS: LINE HEIGHTS --- */
    .leading-low { line-height: 1.2; }
    .leading-std { line-height: 1.5; }
    .leading-high { line-height: 1.625; }
    .leading-full { line-height: 2; }

    /* --- CUBE CSS: BORDER RADIUS (HG Radius) --- */
    .rounded-low { border-radius: var(--hg-rad-low); }
    .rounded-std { border-radius: var(--hg-rad-std); }
    .rounded-high { border-radius: var(--hg-rad-high); }
    .rounded-full { border-radius: var(--hg-rad-full); }
    .rounded-none { border-radius: 0; }

    /* --- CUBE CSS: BORDERS --- */
    .border { border: 1px solid var(--hg-border-std); }
    .border-2 { border: 2px solid var(--hg-border-std); }
    .border-none { border: none; }
    .border-transparent { border-color: transparent; }
    .border-low { border-color: var(--hg-border-low); }
    .border-std { border-color: var(--hg-border-std); }
    .border-high { border-color: var(--hg-border-high); }
    .border-full { border-color: var(--hg-border-full); }

    /* --- CUBE CSS: BOX SHADOWS / DEPTHS (HG Depths) --- */
    .shadow-low { box-shadow: var(--hg-depth-low); }
    .shadow-std { box-shadow: var(--hg-depth-std); }
    .shadow-high { box-shadow: var(--hg-depth-high); }
    .shadow-full { box-shadow: var(--hg-depth-full); }

    /* --- CUBE CSS: TRANSITIONS & MOTION --- */
    .transition-all {
        transition: all var(--hg-duration-fast) var(--hg-motion-snappy);
    }
    .transition-composite {
        transition: var(--hg-motion-composite);
    }
    .duration-low { transition-duration: var(--hg-duration-fast); }
    .duration-std { transition-duration: var(--hg-duration-flow); }
    .ease-std { transition-timing-function: var(--hg-motion-snappy); }

    /* --- CUBE CSS: TEXT ALIGNMENT --- */
    .text-justify {
        text-align: justify;
    }

    /* --- CUBE CSS: GAPS --- */
    .gap-low { gap: var(--hg-pad-low); }
    .gap-std { gap: var(--hg-pad-std); }
    .gap-high { gap: var(--hg-pad-high); }
    .gap-full { gap: var(--hg-pad-full); }

    .pad-low { padding: var(--hg-pad-low); }
    .pad-std { padding: var(--hg-pad-std); }
    .pad-high { padding: var(--hg-pad-high); }

    .si-icon>svg{
width: 55px!important;
height: 55px!important
}

.arrow>svg {
    width: 300px;
    position: absolute;
    top: 50px;
    right: -100px;
}


    /* --- RESPONSIVE VISIBILITY --- */
    /* Mobile (<= 767px) */
    @media (max-width: 767px) {
        .hidden-m {
            display: none !important;
        }
    }

    /* Tablet (768px - 1024px) */
    @media (min-width: 768px) and (max-width: 1024px) {
        .hidden-t {
            display: none !important;
        }
    }

    /* Desktop (>= 1025px) */
    @media (min-width: 1025px) {
        .hidden-d {
            display: none !important;
        }
    }
}