/* 
Theme Name: DAB
Theme URI: https://digitalagencybarcelona.com/
Description: A child custom theme by DAB. For any help or support please feel free to reach us at anytime at support@digitalagencybarcelona.com
Author: DAB - by Marcel CL
Author URI: https://digitalagencybarcelona.com/
Version: 1.1
Template: hello-elementor
Text Domain: dab
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/
/*********************************************************/
/* GENERAL */
/*********************************************************/
*:focus{outline: none;}
/*********************************************************/
/* MENU */
/*********************************************************/

/* Estado normal (transparente al inicio) */
header {
  background-color: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Cuando haces scroll y el sticky se activa */
header.elementor-sticky--effects {
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

header span.elementor-menu-toggle__icon--open {
    display: flex;
    align-items: center;
    justify-content: center;
}
.elementor-menu-toggle.elementor-active {
    padding: 0;
}

.wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{padding: 0px !important;}
.custom-flex .elementor-shortcode{display: flex;align-items: center;}

/* EXTRAS */
.waves {position:relative;width: 100%;height:15vh;margin-bottom:-7px;min-height:100px;max-height:150px;}
.parallax > use {animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
.parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;}
.parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
.parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;}
@keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } }
.arrows {width: 60px;height: 72px;position: absolute;left: 50%;margin-left: -30px;bottom:-60%;}
.arrows path {stroke: #ffffff;fill: transparent;stroke-width: 1px;animation: arrow 2s infinite;-webkit-animation: arrow 2s infinite; }
@keyframes arrow { 0% {opacity:0} 40% {opacity:1} 80% {opacity:0} 100% {opacity:0} }
@-webkit-keyframes arrow { 0% {opacity:0} 40% {opacity:1} 80% {opacity:0} 100% {opacity:0} }
.arrows path.a1{animation-delay:-1s;-webkit-animation-delay:-1s;}
.arrows path.a2{animation-delay:-0.5s;-webkit-animation-delay:-0.5s;}
.arrows path.a3{animation-delay:0s;-webkit-animation-delay:0s;}
/* FIX CARUSEL */
figure.swiper-slide-inner img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
}
.elementor-swiper-button.elementor-swiper-button-next, .elementor-swiper-button.elementor-swiper-button-prev {
    background: rgb(69 69 69 / 40%);
    min-height: 80px;
    align-items: center;
}
/* HOVERBOX */
/* =========================================
   CSS Personalizado para efecto ".hoverbox"
   ========================================= */

/* 1. Configuración del Contenedor Principal (.hoverbox) */
.hoverbox {
    /* Aseguramos que nada se salga de la caja al hacer zoom o aparecer las líneas */
    overflow: hidden !important;
    position: relative;
}

/* --- EFECTO 1: ZOOM DE IMAGEN DE FONDO --- */
.hoverbox::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Al hacer hover en la caja, la capa de fondo hace zoom */
.hoverbox:hover::before {
    transform: scale(1.1); /* Ajusta 1.1 para más o menos zoom */
}
.hoverbox h3.elementor-heading-title {
    /* Transición suave para el movimiento del texto */
    transition: transform 0.4s ease-in-out;
    /* Un pequeño margen inferior para dejar espacio a la línea inicial */
    margin-bottom: 20px; 
}
/* Al hacer hover, el título sube 15px */
.hoverbox:hover h3.elementor-heading-title {
    transform: translateY(-15px);
}
.hoverbox .e-con-inner::before,
.hoverbox .e-con-inner::after {
    content: '';
    position: absolute;
    background-color: #ffffff; /* Color de la línea (blanco) */
    height: 1px; /* Grosor de la línea */
    width: 80px; /* Longitud inicial de la línea horizontal */
    top: 60%;  /* Posición vertical inicial (debajo del título) */
    left: 50%; /* Centrado horizontalmente */
    /* Centramos la línea y definimos la rotación inicial (0 grados) */
    transform: translate(-50%, 0) rotate(0deg);
    /* La segunda línea (after) se oculta inicialmente para que parezca una sola */
    opacity: 1;
    /* Transición muy suave y un poco elástica para las líneas */
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Pequeño ajuste para la segunda línea en estado normal, para asegurarnos que esté exactamente sobre la primera */
.hoverbox .e-con-inner::after {
    opacity: 0.8;
}
.hoverbox:hover .e-con-inner::before {
    width: 200%; /* Crece mucho para salirse de la pantalla si es necesario */
    top: 50%; /* Se mueve al centro vertical exacto */
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg);
}
.hoverbox:hover .e-con-inner::after {
    width: 200%; /* Crece mucho */
    top: 50%; /* Se mueve al centro vertical exacto */
    opacity: 1;
    /* Se centra y rota en sentido contrario (-45 grados) */
    transform: translate(-50%, -50%) rotate(-45deg);
}
/*********************************************************/
/* DESKTOP */
/*********************************************************/
@media only screen and (min-width : 768px) {
	/*header.elementor-sticky--effects{background-color: rgba(92,185,222,0.9) !important;}*/
}
/*********************************************************/
/* MOBILE */
/*********************************************************/
@media only screen and (max-width : 1024px) {
    .waves{height:40px;min-height:40px;}
    .menu-custom-flex{display: flex;align-items: center;}
}
@media only screen and (max-width: 767px) {
	/*header.elementor-sticky--effects{background-color: rgba(255,255,255,0.9) !important;}*/
}