/**
Theme Name: Bressol Produccions
Author: lavallweb
Author URI: https://lavallweb.con
Description: Astra child theme by lavallweb
Version: 1.25.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bressol-produccions
Template: astra
*/

/*--------------------------------------------------------------
1. MENU
--------------------------------------------------------------*/

/* Contenedor principal del menú */
#menu {
    display: flex; /* mantiene los elementos en fila */
    align-items: center; /* centra verticalmente */
    gap: 15px; /* espacio entre elementos */
}

/* Enlace de menú con icono y texto */
#menu-top {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

/* Icono del menú */
#menu-top img {
    width: 53px;
    height: 53px;
}

/* Texto del menú */
#menu-top span {
    font-size: 15pt;
}

/*--------------------------------------------------------------
2. SECCIÓN #PROYECTO - Fondo con zoom y transiciones
--------------------------------------------------------------*/

#proyecto {
    background-size: 100% 100%; /* tamaño inicial */
    background-position: center;
    transition: background-size 0.5s ease-in-out; /* transición suave */
    padding: 40px; /* ajustable */
}

#proyecto:hover {
    background-size: 110% 110%; /* zoom al 110% */
}

/*--------------------------------------------------------------
3. ELEMENTOS SOBRE #PROYECTO (Título y Categoría)
--------------------------------------------------------------*/

/* Elementos ocultos por defecto */
#titulo-loop,
#categoria-loop {
    position: absolute;
    left: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Posición inicial del título */
#titulo-loop {
    bottom: 40px;
}

/* Posición inicial de la categoría */
#categoria-loop {
    bottom: 80px;
    margin-bottom: 18px;
    transition-delay: 0.1s;
}

/* Mostrar elementos al hacer hover sobre #proyecto */
#proyecto:hover #titulo-loop,
#proyecto:hover #categoria-loop {
    opacity: 1;
    transform: translateY(0);
}

/*--------------------------------------------------------------
4. GTRANSLATE
--------------------------------------------------------------*/

/* Desktop */
.gtranslate_wrapper .glink img {
    display: none; /* Oculta la bandera */
}

.gtranslate_wrapper .glink[data-gt-lang="ca"]::after {
    content: "VLC | ";
    font-weight: 400;
    font-size: 20px;
    color: #fff;
}

.gtranslate_wrapper .glink[data-gt-lang="es"]::after {
    content: " CAS";
    font-weight: 400;
    font-size: 20px;
    color: #fff;
}

.gtranslate_wrapper a.glink.nturl.notranslate.gt-current-lang::after {
    font-weight: bold !important;
}

/*--------------------------------------------------------------
5. MOBILE - Ajustes responsive
--------------------------------------------------------------*/
@media (max-width: 768px) {

    /* Menu: reducir icono y texto */
    #menu-top img {
        width: 35px;
        height: 35px;
    }

    #menu-top span {
        font-size: 12pt;
    }

    /* GTranslate: reducir tamaño de los idiomas */
    .gtranslate_wrapper .glink[data-gt-lang="ca"]::after {
        font-size: 14px;
        content: "VLC | ";
    }

    .gtranslate_wrapper .glink[data-gt-lang="es"]::after {
        font-size: 14px;
        content: " CAS";
		padding-left: 5px;
    }

    .gtranslate_wrapper a.glink.nturl.notranslate.gt-current-lang::after {
        font-weight: bold !important;
    }

    /* Asegura alineación de los enlaces de GTranslate */
    .gtranslate_wrapper .glink {
        font-size: 14px;
        display: inline-flex; /* mantiene flex interno */
        align-items: center;  /* centra verticalmente */
    }

    /* Opcional: apilar todo verticalmente en mobile */
    /* #menu {
        flex-direction: column;
        gap: 10px;
    } */
	
	.ast-builder-grid-row>.site-header-section {
		flex-wrap: wrap-reverse;
		align-items: center;
	}
	
}

/*--------------------------------------------------------------
6. NOTAS
--------------------------------------------------------------*/

/*
- Cada sección tiene su bloque comentado para mantenimiento fácil.
- Desktop mantiene display:flex para menú y GTranslate.
- Mobile ajusta solo tamaños de icono y texto sin romper desktop.
- Los efectos de #proyecto y loops se mantienen intactos.
*/