/*=====================================================*
HOME - MENÚ IZQUIERDO
*=====================================================*/

.category-branding .elementor-heading-title,
.category-uxui .elementor-heading-title,
.category-development .elementor-heading-title,
.category-visual .elementor-heading-title,
.category-experiential .elementor-heading-title{

    color:var(--inactive);

    transition:color var(--speed) var(--ease);

}

/* Hover */

.category-branding\:hover .elementor-heading-title,
.category-uxui\:hover .elementor-heading-title,
.category-development\:hover .elementor-heading-title,
.category-visual\:hover .elementor-heading-title,
.category-experiential\:hover .elementor-heading-title{

    color:var(--red);

}

/* Activo */

.category-branding.is-active .elementor-heading-title,
.category-uxui.is-active .elementor-heading-title,
.category-development.is-active .elementor-heading-title,
.category-visual.is-active .elementor-heading-title,
.category-experiential.is-active .elementor-heading-title{

    color:var(--blue);

}

/*=====================================================*
HOME RIGHT (V3)
*=====================================================*/

.home-right{

position:relative;

height:100%;

min-height:0;

overflow:hidden;

display:flex;

flex-direction:column;


}

/*=====================================================*
 HOME DYNAMIC CONTENT
*=====================================================*/

.home-dynamic-content{

position:relative;

flex:1;

width:100%;

height:100%;

min-height:0;

overflow:hidden;


}

/*=====================================================*
HOME - FIX ALTURA + CLICKS WRAPPER SHORTCODE
(Preview/Projects)
=====================================================*
Elementor mete 3 niveles de wrapper entre
.home-dynamic-content y .home-preview-panel /
.home-projects-panel:

  .home-shortcode-wrapper (clase manual agregada
      en Elementor, sobre el widget Shortcode)
    -> .elementor-widget-container
      -> .elementor-shortcode
        -> .home-preview-panel
        -> .home-projects-panel

Ese widget de Elementor ya trae position:relative
por defecto, así que se convierte en el
containing block real de los paneles absolutos.
Por defecto tenía height:0, lo que colapsaba a
Projects (necesita altura real para el scroll
interno). Le damos height:100% a los 3 niveles
para restaurar la cadena de altura.

Como ahora ocupa 100% del panel derecho todo el
tiempo (incluso en estado idle), también hay que
quitarle pointer-events para que no tape clicks
sobre .home-about-panel cuando no está activo.
Los paneles internos (.preview-group.is-active,
.projects-group.is-active, más abajo en este
archivo) ya reactivan pointer-events:auto por su
cuenta cuando corresponde.
*=====================================================*/

.home-shortcode-wrapper,
.home-shortcode-wrapper > .elementor-widget-container,
.home-shortcode-wrapper .elementor-shortcode{

    height:100%;

    pointer-events:none;

}

/*=====================================================*
HOME PANELS
*=====================================================*/

.home-about-panel,
.home-preview-panel,
.home-projects-panel{

position:absolute;

inset:0;

width:100%;

height:100%;


}

/*=====================================================*
PANEL STATES
*=====================================================*/

.panel-visible{

opacity:1;

visibility:visible;

pointer-events:auto;

transform:translateY(0);


}

.panel-hidden{

opacity:0;

visibility:hidden;

pointer-events:none;

transform:translateY(18px);


}
/*=====================================================*
HOME PREVIEW
*=====================================================*/

.preview-group{

    position:absolute;
    inset:0;

    visibility:hidden;
    opacity:0;

    pointer-events:none;

    transition:opacity .45s var(--ease);

}

.preview-group.is-active{

    visibility:visible;
    opacity:1;

    pointer-events:auto;

}

/*------------------------------------
ITEMS
------------------------------------*/

.preview-item{

    display:none;

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .45s var(--ease),
        transform .45s var(--ease);

}

.preview-item.is-visible{

    display:block;

    opacity:1;

    transform:translateY(0);

}

/*------------------------------------
LINK
------------------------------------*/

.preview-link{

    display:block;

    width:100%;

    height:100%;

    text-decoration:none;

    cursor:pointer;

}

.preview-link img{

    display:block;

    width:100%;

    height:auto;

}

/*=====================================================
HOME PROJECTS
=====================================================*/

.projects-group{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

gap:24px;

padding:2rem 0;

overflow-y:auto;

overflow-x:hidden;

visibility:hidden;

opacity:0;

pointer-events:none;

transition:opacity .45s var(--ease);

scrollbar-width:none;          /* Firefox */

-ms-overflow-style:none;       /* IE / Edge legacy */

}

.projects-group.is-active{

visibility:visible;

opacity:1;

pointer-events:auto;


}

/*------------------------------------*
SCROLLBAR (oculta visualmente, mantiene función)
*------------------------------------*/

.projects-group::-webkit-scrollbar{

display:none;                  /* Chrome, Safari, Edge Chromium */

}

/*------------------------------------*
ITEMS
*------------------------------------*/

.project-item{

opacity:0;

transform:translateY(12px);

transition:
    opacity .18s var(--ease),
    transform .18s var(--ease);


}

.projects-group.is-active .project-item{

opacity:1;

transform:translateY(0);


}

/*------------------------------------*
LINKS
*------------------------------------*/

.project-link{

display:block;

width:100%;

text-decoration:none;

color:inherit;

cursor:pointer;

transition:color .25s var(--ease);


}

.project-link:hover{

color:var(--red);


}

/*------------------------------------*
IMAGES
*------------------------------------*/

.project-link img{

display:block;

width:100%;

height:auto;


}