/*
Theme Name:Brand Show 
Theme URI: https://monicanieto.com
Author: Mónica Nieto
Author URI: https://monicanieto.com
Description: Tema personalizado 
Version: 1.0
*/

/*
 * nuevos colores corregidos
 * 476ca9 azul rgb(71 108 169)
 * 76be86 verde rgb(118 190 134))
 * 
 * 3d7cfc azul
 * 47f59a verde
 * #162341 azul oscuro 
 * font-family: "Poppins", sans-serif;
 * */


/* Layout Base */
body { 
	margin: 0; 
	overflow-x: hidden; 
	/*font-family: "Plus Jakarta Sans", sans-serif;
	 font-family: "Manrope", sans-serif;
 font-family: "Jost", sans-serif;*/
	font-family: "League Spartan", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
	font-size:16px;
}
h1{
	font-weight:bold;
}
:root {
    --green-color: #76be86;
	--azul-color:#476ca9;
	--azul-oscuro:#162341;
    --gray-text: #888;
    --transition-speed: 0.6s;
/**/
    --color-primario: #476ca9; 
    --color-texto-btn: #FFFFFF;
    --color-fondo-oscuro: #1D1D1D;
    --color-enlace: #76be86;
    --transicion-framer: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	
	--color-fondo-header: rgba(255, 255, 255, 0.85); /* Un poco más opaco */
    /* LA CLAVE DE LA SUAVIDAD:
       Una curva Bézier personalizada. Empieza rápido, termina muy suave.
       Aumenté la duración a 0.6s para que se note más la elegancia. */
    --framer-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --framer-transition: all 0.6s var(--framer-ease);
    --framer-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);

    /*colores crew*/
    --blue-dark:  #0d2d4f;
    --blue-mid:   #1a4a7a;
    --blue-light: #3a7fc1;
    --green:      #2db87a;
    --green-dark: #1e9460;
}
.green{
	color: var(--green-color); 
}
.white{
	color:#FFF; 
}

/* 1. CABECERA */
.logo-container img {
    max-height: 63px;
    width: auto;
    display: block;
	transition: transform 0.4s ease, width 0.4s ease;
}
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 50px;
	padding-right: 3rem !important;
    padding-left: 3rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 10001; /* Un nivel arriba del panel */
	/*animacion*/
	/* Empieza en su posición natural Y=0 */
    transform: translateY(0);
    border: 1px solid transparent; /* Preparamos el borde */
	

    /* --- AQUÍ ESTÁ LA MAGIA --- */
    /* */
    transition: var(--framer-transition);

    /* OPTIMIZACIÓN GPU:
        */
    will-change: transform, padding, background-color, border-radius;

    box-sizing: border-box;
}

/* 2. HAMBURGUESA Y DISPARADOR */
.menu-trigger {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    color: var(--green-color);
    font-size: 20px;
    font-weight: 700;
    
    /* SOLUCIÓN AL CLIC: */
    position: relative; /* Necesario para que z-index funcione */
    z-index: 20000 !important; /* Supera al panel y al header */
    transition: color 0.3s;
}

/* Forzamos que, al abrirse, el texto sea blanco y clickeable */
.is-active .menu-trigger {
    color: #FFFFFF !important;
    z-index: 20000 !important;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 25px;
    /* Aseguramos que la cajita de la hamburguesa también flote */
    position: relative;
    z-index: 20001; 
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--green-color);
    transition: all 0.3s ease;
}

.is-active .hamburger span {
    background-color: white !important;
}

/* 3. ANIMACIÓN DE LA X */
.is-active .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.is-active .hamburger span:nth-child(2) { opacity: 0; }
.is-active .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 4. EL PANEL (FONDO NEGRO) */
.menu-panel {
    position: fixed; 
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95); /* Un poco más oscuro para legibilidad */
    opacity: 0;
    pointer-events: none;
    
    /* Z-INDEX MENOR QUE EL TRIGGER */
    z-index: 10005 !important; 
    
    transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.is-active .menu-panel {
    width: 300px; 
    opacity: 1;
    pointer-events: all;
}/* 5. CONTENIDO INTERNO */
.menu-inner {
    padding: 120px 50px 60px 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja las redes al final */
    box-sizing: border-box;
}

.menu-top-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 40px;
}

/* 6. ITEMS DEL MENÚ (ANIMACIÓN ABAJO-ARRIBA) */
.menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-links li {
    margin-bottom: 15px;
    overflow: hidden;
}

.menu-links li a {
    color: var(--green-color) !important;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transform: translateY(100%); /* Empieza abajo */
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.is-active .menu-links li a {
    transform: translateY(0);
    opacity: 1;
}

/* Delays para efecto cascada */
.is-active .menu-links li:nth-child(1) a { transition-delay: 0.5s; }
.is-active .menu-links li:nth-child(2) a { transition-delay: 0.6s; }
.is-active .menu-links li:nth-child(3) a { transition-delay: 0.7s; }
.is-active .menu-links li:nth-child(4) a { transition-delay: 0.8s; }
.is-active .menu-links li:nth-child(5) a { transition-delay: 0.9s; }
.is-active .menu-links li:nth-child(6) a { transition-delay: 1s; }
.is-active .menu-links li:nth-child(7) a { transition-delay: 1.1s; }

/* Subrayado y Hover */
.menu-links li a:hover { color: white !important; }
.menu-links li a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #3d7cfc;
    transition: width 0.3s ease;
}
.menu-links li a:hover::after { width: 100%; }

/* 7. REDES SOCIALES */
.menu-social {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.menu-social a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.5s ease 1s; /* Aparece después de los links */
}

.is-active .menu-social a {
    opacity: 1;
}
/* Menú Lateral Fixed */
/*#side-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 60px; 
    background: #1a1a1a;
    color: white;
    z-index: 1000;
    transition: width 0.3s ease;
}

#side-menu.expanded {
    width: 250px; 
}

#menu-toggle {
    background: #ff0000;
    color: white;
    border: none;
    padding: 15px;
    width: 100%;
    cursor: pointer;
    font-size: 24px;
    display: block;
}


#side-menu nav {
    display: none; 
    padding: 20px;
}

#side-menu.expanded nav {
    display: block;
}


#side-menu ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

#side-menu ul li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #333;
}

/* Efecto Stack (Apilamiento) */
.stack-container {
    /*margin-left: 60px;*/
}

.panel {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.panel p {
    font-size: 20px;
   
}
.descripcion{
	text-align:center;
	margin:0 auto;
}
.descripcion p{
	font-size:19px;
	text-align:justify;
    line-height: 1.2em;
	font-weight:normal;
}
.descripcion a{
	text-decoration:none;
}
/* Colores para diferenciar secciones */
.panel-1 { background: #f1f1f1; z-index: 1; }
.panel-2 { background: #e2e2e2; z-index: 2; }
.panel-3 { background: #d3d3d3; z-index: 3; }
.panel-03 { background:rgb(14 49 40); z-index: 4; }
.panel-4 { background: #c4c4c4; z-index: 5; }
.panel-5 { background: #b5b5b5; z-index: 6; }
.panel-6 { background: var(--azul-color); z-index: 7; }
.panel-7 { background: var(--azul-color); z-index: 8; }

.panel {
    height: 100vh;
    overflow: hidden; 
}
/* El contenedor principal */
.video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* O la altura que necesites */
    overflow: hidden; /* Corta lo que sobresalga */
}

/* El video de fondo */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción */
    z-index: 1; /* Nivel 1 (Fondo) */
}

/* La capa oscura (Overlay) */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Color negro con 50% de opacidad (0.5) */
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 2; 
}

/* Tu contenido (Texto) */
.content {
    position: relative;
    z-index: 3; /* Nivel 3 (Encima de todo) */
    color: white; /* Para que resalte */
    /* Centrado opcional */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Sección 4: Split */
.panel-4 {
    display: flex;
    flex-direction: column; /* Apila las filas: una arriba y otra abajo */
    width: 100%;
    height: auto; /* Permite que crezca según sus filas */
    min-height: 100vh;
}


/* Sección 5: Split */
.panel-5 {
    display: flex;
    flex-direction: column; /* Apila las filas: una arriba y otra abajo */
    width: 100%;
    height: auto; /* Permite que crezca según sus filas */
    min-height: 100vh;
}
.panel-6, .panel-7{
	align-items:start !important;
}


/* Cada bloque de 2 columnas debe ocupar el 100% del ancho */
.split-container {
    display: flex;
    width: 100%;
    height: 80vh; /* Cada fila toma la mitad del alto de pantalla */
    flex-direction: row; /* Las 2 columnas internas van de lado a lado */
	gap:30px;
}

/* Forzamos que cada columna interna ocupe exactamente la mitad */
.col-video, .col-texto {
    flex: 0 0 50%; /* No crecen, no se encogen, base del 50% */
    width: 50%;
    max-width: 50%;
}

.bg-azul-rayas{
	background-color: #506ba5;
      
    margin: 0;
}




/* Estilos para el texto */
.col-texto {
  /*  
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    box-sizing: border-box;*/
}

.content-box {
    max-width: 80%; /* Para que el texto no toque los bordes del video */
}

.content-box h3 {
    font-size: 3vw;
    
    margin-bottom: 20px;
    color: #fff;
	line-height: 0.9em;
}

.content-box p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #ccc;
}

/* El video ocupa todo su espacio */
.hover-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hover-video-no {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive:*/

@media (max-width: 768px) {
	footer .site-footer .text-center *, footer .site-footer .text-right{
		text-align:left !Important;
	}
	
    .split-container {
        flex-direction: column;
        height: auto; /* En móvil que crezca según el contenido */
    }
    .panel-4 .split-container {
      
        height: 100%; 
    }
    
    .col-video, .col-texto {
        height: 50vh;
        flex: none;
        width: 100%;
    }
    /* Invertir el orden en móvil para que siempre se vea Video -> Texto */
    .split-container:nth-child(2) {
        flex-direction: column-reverse;
    }
}

/* Sección 5: Testimonios */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 3px 0 0;
    width: 100%;
}
.testi-video video {
    width: 100%;
    border-radius: 15px;
}
/*testimonios responsive video*/
.testimonials-grid iframe {
   
    width: 100% !important;
	aspect-ratio: 16 / 9;
	height: auto !important;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}



@media (max-width: 768px) {
    .testimonials-grid {
        /* Cambiamos a 1 sola columna para que se apilen */
        grid-template-columns: 1fr;
    }
}
/* Video de fondo general */
.bg-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/**/
.panel-3 h2{
	
    line-height: 1em;
   font-size: 2.5rem;

}
/*scroll*/
html.lenis {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.counter-container {
    text-align: center;
    color: white; /* O el color que resalte en tu fondo */
    z-index: 10;
    position: relative;
}

.number {
    font-size: 4rem; /* Bien grande como la de Federer */
    font-weight: bold;
    display: block;
    line-height: 1;
}
.panel-3{

	color:#FFF;
}
/*texto moviendo lateral*/
.panel-3 {
    display: flex;
    flex-direction: column; /* Apila los elementos: texto arriba, contador abajo */
    justify-content: flex-start; /* Alinea al inicio superior */
    align-items: center;
    background-color: #f1f1f1; /* Color de fondo de la sección */
}

/* Barra negra superior para el texto */
.moving-text-wrapper {
    width: 100%;
    /* Degradado lineal: de blanco arriba a negro abajo */
    background: linear-gradient(to bottom, #ffffff 0%, #000000 100%);
    padding: 25px 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* Efecto Reveal para el wrapper (opcional) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Cuando el wrapper se hace visible */
.moving-text-wrapper.active {
    opacity: 1;
    transform: translateY(0);
}

.moving-text {
    font-size: 3vw; /* Tamaño reducido más sutil */
    font-weight: 500;
    color: #fff; /* O puedes usar #000 si quieres que contraste con el blanco de arriba */
    white-space: nowrap;
    display: inline-block;
    
    /* Inicio: fuera a la izquierda */
    transform: translateX(-120%); 
    
    /* Movimiento más lento (4 segundos) y sutil */
    transition: transform 4s cubic-bezier(0.16, 1, 0.3, 1); 
    will-change: transform;
}

.moving-text.center-active {
    transform: translateX(0);
}
/* Contenedor del contador */
.counter-container {
    width: 100%;
    padding: 0 0 15px 0;
}

.micontador {
    display: flex;
    justify-content: center;
    gap: 100px; /* Espacio entre las 3 columnas */
    flex-wrap: wrap;
}

.contador-item {
    display: flex;
    flex-direction: column; /* Fuerza a que el span (label) vaya abajo */
    align-items: center;    /* Centra todo horizontalmente */
}

.number-row {
    display: flex;
    align-items: baseline; /* Alinea el símbolo y el número por la base */
    font-size: 4vw;        /* Ajusta este tamaño a tu gusto */
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.symbol {
    margin-right: -2px; /* Este valor negativo pega el + al número */
}

.label {
    display: block;        /* Asegura que tome toda la línea y baje */
    font-size: 1.2rem;
    color: var(--green-color);        /* Tu verde */
    text-transform: uppercase;
    margin-top: 0;
    letter-spacing: 2px;
}

/* Para móviles */
@media (max-width: 768px) {
    .micontador { gap: 40px; }
    .number-row { font-size: 15vw; }
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .micontador {
        gap: 30px;
    }
    .number-wrapper {
        font-size: 12vw;
    }
}


/*reveal*/
/* Estado inicial: oculto y 50px abajo */
.reveal {
    opacity: 0;
    transform: translateY(80px) scale(0.90); /* Un ligero escalado le da profundidad */
    transition: 
        opacity 1.2s ease-out, 
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}


/* Estado activo: Se dispara cuando entra al viewport */
.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Esto aplica un retraso progresivo automáticamente */
.reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal:nth-child(2) { transition-delay: 0.3s; }
.reveal:nth-child(3) { transition-delay: 0.5s; }
.reveal:nth-child(4) { transition-delay: 0.7s; }
.reveal:nth-child(5) { transition-delay: 0.9s; }

.testimonios h2{
	text-align:center;
	font-size:2.5rem;
	line-height:1em;
	align-self: flex-start;
}
.testimonios p{
	color:#FFF;
	margin-bottom:0;
}



       
/*carrusel logos clientes*/
/* Wrapper opcional para márgenes externos */
.container-carrusel-clientes{
	max-width:1100px;
}
.framer-logo-wrapper {
    width: 100%;
    margin: 20px 0;
}

/* El contenedor con la máscara de desvanecimiento (Fade effect) */
.framer-logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: transparent;
    z-index: 1; /* Asegura que la máscara se aplique al contenido */
    
    /* Hacemos el gradiente más agresivo: del 0% al 20% se desvanece */
    /* El color #000 solo indica "visible", no pinta de negro */
    
    -webkit-mask-image: linear-gradient(
        to right, 
        transparent 0%, 
        black 20%, 
        black 80%, 
        transparent 100%
    );
    
    mask-image: linear-gradient(
        to right, 
        transparent 0%, 
        black 20%, 
        black 80%, 
        transparent 100%
    );
}

/* La pista que se mueve */
.framer-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 60px; /* Mantenemos tu espacio */
    
    /* CAMBIO CLAVE: Usamos la variable de PHP y añadimos suavizado de hardware */
    animation: scroll-framer var(--duracion, 35s) linear infinite;
    will-change: transform; 
}

/* Estilos de los logos (Tus estilos originales intactos) */
.logo-item img {
    display: block;
    height: 150px; /* Mantiene la altura fija, vital para la estabilidad */
    width: auto;
    object-fit: contain;
    
    /* Filtros originales */
    filter: brightness(0) invert(1);
    opacity: 0.7; 
    transition: opacity 0.3s ease;
}

/* Mantenemos tu clase específica para logos con color */
.logo-item img.logo-rebelde {
    filter: grayscale(100%) contrast(120%); 
    opacity: 0.8;
}

.framer-logo-slider:hover .logo-item img {
    opacity: 1;
}

/* Pausa el carrusel al pasar el mouse (Opcional, mejora UX) */
.framer-logo-slider:hover .framer-logo-track {
    animation-play-state: paused;
}

/* LA ANIMACIÓN ( infinita) */
@keyframes scroll-framer {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 30px)); } 
    /* El -50% es porque duplicamos los logos. 
       El -30px es la mitad de tu gap (60px) para un empalme perfecto */
}
/* La Animación */
/*@keyframes scroll-framer {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
   
}
*/


/* Responsivo */
@media (max-width: 768px) {
    .framer-logo-track {
        gap: 30px;
        animation-duration: 20s; /* Más rápido en móvil */
    }
    .framer-logo-wrapper .logo-item img {
        height: 100px;
    }
}


@media (max-width:900px){
	.descripcion{
	text-align:center;
	width:90%;
		margin:0 auto;
}
}

/*CONTACTO FOOTER*/
#contacto, #empleo{
	background-color:var(--azul-color);
}
.contacto .split-contacto{
	flex:1;
	    width: 50%;
}
	.split-contacto img{
	/*height:100vh;*/
}
.contacto h2{
	    font-size: 2.5rem;
}
.contacto h3{
	font-size:2rem;
	color:#fff;
}
#contacto span{
	
	line-height:0.8em;
}
#contacto a.btn, a.btn {
    font-size: 1.3rem;
    background-color: var(--green-color);
    color: var(--azul-oscuro);
    padding: 15px 31px;
    border-radius: 25px;
    line-height: 1em;
    font-weight: bold;
}
footer{
	
	color:#fff;
}
.panel footer{
	position:absolute; 
	width:100%;
	bottom:0;
}
#contacto a .bi{
	display:inline-flex;padding-left:6px;bottom: -3px;position: relative;
}
body:not(.home) footer{
	
  background-color: var(--azul-oscuro);
    padding-top: 1rem;
}

.site-footer{
	color:#FFF;
	display: flex;
    gap: 30px;
	 justify-content: space-between;
	font-size:16px;
	align-items: end;
}
.site-footer div {
    flex: 1;
}
.site-footer a{
	color:#FFF;
}
ul.redes li {
    display: inline-block;
    padding-left: 20px;
    font-size: 24px;
}
ul.redes li:first-child {
    
    padding-left: 0;
   
}

.politica{
	text-align:center;
}
footer .site-footer p.politica {
    font-size: 16px;
    margin-bottom: 0;
}
.politica a{
	color:#FFF;
}

/*estilos HOVER Y CLICK botones y links */
/*link flecha*/


/* Estilo base del enlace contenedor */
.link-framer-arrow {
    text-decoration: none;
    color: var(--color-enlace);
    font-weight: 500; /* Un poco más grueso para el estilo Lenin */
	font-size:22px;
    cursor: pointer;
    position: relative;
    display: inline-flex; /* Usamos flex para alinear texto y flecha */
    align-items: center;  /* Centrado verticalmente */
    gap: 6px; /* Espacio entre el texto y la flecha */
    padding-bottom: 2px; /* Espacio para la línea de subrayado */

    /* --- PARTE 1: El Subrayado Animado (Igual que antes) --- */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                color 0.3s ease;
}

/* --- PARTE 2: La Flecha (Pseudo-elemento ::after) --- */
.link-framer-arrow::after {
    content: ''; /* Necesario para que aparezca */
    display: inline-block;
    width: 1em;  /* Tamaño relativo a la fuente */
    height: 1em;

    /* Usamos un SVG de flecha codificado en base64 para no depender de archivos externos.
       Este es un icono de flecha simple y moderno. */
    background-color: currentColor; /* La flecha toma el color del texto */
    /* Usamos 'mask' para que el color de fondo recorte la forma del SVG.
       Esto permite cambiar el color de la flecha fácilmente si el texto cambia de color. */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* La transición suave para el movimiento de la flecha */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* --- ESTADOS HOVER Y ACTIVE --- */

/* HOVER en el enlace completo */
.link-framer-arrow:hover {
    /* 1. Crece el subrayado */
    background-size: 100% 2px;
    /* Opcional: cambiar color al estilo Lenin (ej. rojo) */
    /* color: var(--color-primario); */
}

/* Cuando haces hover en el enlace, afectamos a la flecha (::after) */
.link-framer-arrow:hover::after {
    /* 2. La flecha se mueve 4px a la derecha */
    transform: translateX(4px);
}

/* CLICK (Active) */
.link-framer-arrow:active {
    /* Pequeño efecto de encogimiento en todo el conjunto */
    transform: scale(0.97);
}
/*link normal*/
.link-framer {
    text-decoration: none;
    color: var(--color-enlace);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    display: inline-block; /* Necesario para que funcione el truco del fondo */
    padding-bottom: 2px; /* Espacio para la línea */

    /* Definimos la línea como un fondo */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%; /* Empieza a la izquierda, abajo */
    background-repeat: no-repeat;
    /* ESTADO INICIAL: Ancho 0% (invisible), Alto 2px */
    background-size: 0% 2px;

    transition: background-size 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* HOVER: La línea crece al 100% del ancho */
.link-framer:hover {
    background-size: 100% 2px;
}

/* CLICK: Un pequeño efecto de escala para feedback */
.link-framer:active {
    transform: scale(0.95);
    /* Opcional: cambiar el color de la línea al hacer click */
    color: var(--color-primario);
}

/*botones hover*/
/* Estilo base del botón */
.boton-framer-lift {
    padding: 12px 24px;
    background-color: var(--color-primario);
    color: var(--color-texto-btn);
    border: none;
    font-weight: 600;
   letter-spacing: 1px;
    cursor: pointer;
  
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    /* APLICAMOS LA TRANSICIÓN MÁGICA */
    transition: var(--transicion-framer);
    /* Importante para que la escala no se vea borrosa */
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* HOVER: Se eleva y crece ligeramente */
.boton-framer-lift:hover {
    /* Se mueve hacia arriba (Y) y crece un 3% */
    transform: translateY(-3px) scale(1.03);
    /* La sombra se hace más grande y difusa para dar profundidad */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* CLICK (Active): Se hunde */
.boton-framer-lift:active {
    /* Se mueve ligeramente hacia abajo desde su posición original y se encoge */
    transform: translateY(1px) scale(0.97);
    /* La sombra desaparece casi por completo porque está "pegado" al fondo */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    /* Opcional: un cambio sutil de color */
    filter: brightness(90%);
}

/*diagonal izquierda*/
/* Estilo base del enlace contenedor */
.link-framer-diagonal-left {
    text-decoration: none;
    color: var(--color-enlace);
    font-weight: 700; /* Fuerte estilo Lenin */
    cursor: pointer;
    position: relative;
    display: inline-flex; /* Mantiene flecha y texto alineados */
    align-items: center;
    gap: 4px; /* Espacio entre la flecha y el texto */
    padding-bottom: 2px; /* Espacio para el subrayado */

    /* Subrayado animado (El mismo de siempre) */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                color 0.3s ease;
}

/* --- CAMBIO CLAVE 1: Usamos ::before en lugar de ::after --- */
.link-framer-diagonal-left::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;

    /* --- CAMBIO CLAVE 2: NUEVO SVG DIAGONAL IZQUIERDA (↙️) --- */
    /* Este SVG dibuja la línea de arriba-derecha a abajo-izquierda y la punta en la esquina inferior izq. */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='17' y1='7' x2='7' y2='17'%3E%3C/line%3E%3Cpolyline points='17 17 7 17 7 7'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='17' y1='7' x2='7' y2='17'%3E%3C/line%3E%3Cpolyline points='17 17 7 17 7 7'%3E%3C/polyline%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* Transición suave */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* --- ESTADOS HOVER Y ACTIVE --- */

.link-framer-diagonal-left:hover {
    /* 1. El subrayado crece de izquierda a derecha */
    background-size: 100% 2px;
}

/* --- CAMBIO CLAVE 3: ANIMACIÓN HACIA LA IZQUIERDA Y ABAJO --- */
/* Al hacer hover, afectamos al ::before */
.link-framer-diagonal-left:hover::before {
    /* Movemos -3px en X (izquierda) Y +3px en Y (abajo) */
    transform: translate(-3px, 3px);
}

/* CLICK (Active) */
.link-framer-diagonal-left:active {
    transform: scale(0.97);
}
/*ajuste link*/
.panel-2 .link-framer-diagonal-left{
    position: absolute;
    bottom: 50px;
    right: 60px;
	font-size:22px;
	color:var(--green-color);
	z-index:3000;
}

/*menu sticky on scroll y burguer menu*/
.site-header.is-scrolled {
 
    transform: translateY(15px);
    padding: 5px 50px;
  padding-right: 3rem !important;
    padding-left: 3rem !important;

}
.site-header.is-scrolled .logo-container {
    perspective: 1000px;
    max-width: 90vw;
    padding: 0;
}
.site-header.is-scrolled .logo-container img {
    max-height: 40px;
    width: auto;
    display: block;
	opacity:0.8;
}
/* Cuando el header se encoge, ajustamos el ancho del contenido interno */
.site-header.is-scrolled .header-content {
    width: 100%; /* Ocupa todo el espacio del nuevo header pequeño */
}


.panel-03 h3, .panel-03 h2 {
   
    margin-bottom: 0 !important;
    line-height: 0.9em;
}
.panel-03 .overlay{
	height:100%;
}
.panel-4 h2{
	font-size:2rem;
	 margin-bottom: 0 !important;
    line-height: 0.9em;
}
.panel-03 h2{
font-size: 2.5rem;
text-align: center;
    font-size: 3rem;
    padding-top: 3.5rem;
}
/*****/
/*cuadros stands y audiovisuales*/
/* 1. Definimos la animación de las 4 imágenes */
@keyframes backgroundCarousel {
  0%, 20% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/IMG_3488_resultado.webp'); }
  25%, 45% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/3379-1_resultado.webp'); }
  50%, 70% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/IMG_3488_resultado.webp'); }
  75%, 95% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/3379-1_resultado.webp'); }
  100% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/IMG_3488_resultado.webp'); } /* Vuelve al inicio */
}

@keyframes backgroundCarousel_dos {
  0%, 20% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/02/stand1.webp'); }
  25%, 45% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/02/stands2.webp'); }
  50%, 70% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/0d03e78c-43fa-4c0b-8b46-19c1e35fd7d6_resultado.webp'); }
  75%, 95% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/c00798f6-f7fa-4cd2-9ef1-6cf8d3b215f7_resultado.webp'); }
  100% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/02/stand1.webp'); } /* Vuelve al inicio */
}


@keyframes backgroundCarousel_tres {
  0%, 20% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/B2E1832CE-1_resultado.webp'); }
  25%, 45% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/02/audiovisuales-equipo.webp'); }
  50%, 70% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/02/audio3.webp'); }
  75%, 95% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/IMG_0794_resultado.webp'); }
  100% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/B2E1832CE-1_resultado.webp'); } /* Vuelve al inicio */
}


@keyframes backgroundCarousel_cuatro {
  0%, 20% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/evento-virtual-1.webp'); }
  25%, 45% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/evento-virtual-2-1.webp'); }
  50%, 70% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/eventos-virtuales3.webp'); }
  75%, 95% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/evento-virtual-2-1.webp'); }
  100% { background-image: url('https://www.bsagencia.com/wp-content/uploads/2026/03/evento-virtual-1.webp'); } /* Vuelve al inicio */
}


.card-container {
    position: relative;
  flex: 1;         
    height: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    
	animation: backgroundCarousel 14s infinite ease-in-out;
  transition: transform 0.5s ease; 
  }
.card-container.dos {
   
	animation: backgroundCarousel_dos 16s infinite ease-in-out;
  
  }
.card-container.tres {
   
	animation: backgroundCarousel_tres 18s infinite ease-in-out;
  
  }
.card-container.cuatro {
   
	animation: backgroundCarousel_cuatro 20s infinite ease-in-out;
  
  }
.card-container:hover {
  transform: scale(1.03); /* Zoom sutil hacia afuera de toda la caja */
  cursor: pointer;
}


.card-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  animation: inherit; /* Hereda el cambio de imágenes */
  transition: transform 0.8s ease;
  z-index: -1;
}

.card-container:hover::before {
  transform: scale(1.1); /* Zoom solo a la imagen de fondo */
}

  /* El Overlay */
  .overlay-serv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    display: flex;
    align-items: self-end;
    justify-content: left;
    transition: background-color 0.4s ease;
  }

  .content-serv {
		/*display: flex;*/
    color: white;
    text-align: left;
    padding: 13px;
		display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: flex-end; 
  gap: 4px; 
  
  }
.content-serv h2, 
.content-serv p {
  margin: 0; /* Elimina el espacio extra */
  padding: 0;
}
.overlay-serv p {
    line-height: 1.1em;
    font-size: 1.18rem;
    /* font-size: 18px; */
    font-weight: normal;
}
.overlay-serv a {
  
    font-size: 1.12rem;
   
}
  /*
.card-container.dos {
    
   
    background-image: url('https://www.bsagencia.com/2026/wp-content/uploads/2026/02/audiovisuales1.webp');
   
  }
  

  .card-container:hover {
   
    background-image: url('https://www.bsagencia.com/2026/wp-content/uploads/2026/02/stands2.webp');
  }
 .card-container.dos:hover {
   
    background-image: url('https://www.bsagencia.com/2026/wp-content/uploads/2026/02/audio2.webp');
  }
*/
  .card-container:hover .overlay-serv {
    
    background-color: rgba(0, 0, 0, 0.8);
  }

 /*CSS DE LOS FONDOS ANIMADOS -CURVAS*/


  .fluid-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }
  .fluid-bg-container canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
/*subpaginas*/

body:not(.home) .site-header {
    position: initial;
/*	background-color: var(--azul-oscuro);*/
}
body:not(.home){
	background: linear-gradient(180deg, #476ca9 0%, #0d1b33 100%);
	background-attachment: fixed;
  background-size: cover;
	color:#FFF;
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:not(.home) .main {
	flex: 1 0 auto;
}
body:not(.home) p{
    font-size: 19px;
    line-height: 1.2em;
    font-weight: normal;

}
footer {
    flex-shrink: 0;
}

.contenedor-video-transparente {
    background-color: var(--azul-color); 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.video-alfa {
    width: 100%;
    height: auto;
    display: block;
}
/*cambios secciones */
/* Contenedor principal para evitar scroll */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Adiós al scroll manual */
}

.panel {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;

    /* Estado inicial: Invisible y un poco más pequeño */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95); 
    
    /* Transición fluida */
    transition: 
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.8s;
    
    z-index: 1;
}

/* Estado activo: Aparece suavemente */
.panel.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 10; /* Se pone al frente al activarse */
}

/*nuevo estilo servicios*/

.split-container {
    display: grid;
    /* Creamos 2 columnas de igual ancho */
    grid-template-columns: repeat(2, 1fr); 
    /* Creamos 2 filas de igual alto */
    grid-template-rows: repeat(2, 1fr); 
    width: 100%;
    height: 80vh; /* Ajusta según necesites dentro de tus paneles de 100vh */
    gap: 25px; /* Espacio entre las 4 tarjetas */
	column-gap: 30px; /* Espacio lateral entre los bloques */
    row-gap: 30px;
}

.card-container {
    position: relative;
    width: 90%;
    height: 100%; 
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    animation: backgroundCarousel 16s infinite ease-in-out;
    transition: transform 0.5s ease; 
}
.card-container:nth-child(1) { transition-delay: 0.1s; }
.card-container:nth-child(2) { transition-delay: 0.2s; }
.card-container:nth-child(3) { transition-delay: 0.3s; }
.card-container:nth-child(4) { transition-delay: 0.4s; }

@media (max-width: 768px) {
	.contacto {	height: auto !important;
        min-height: 100vh;
        overflow-y: scroll;
        display: block;
	
}
	.site-footer .text-right {
    text-align: center !important;
}
	.panel-03{
		position: relative !important; 
        height: auto !important;       min-height: 100vh;             
        width: 100% !important;
        overflow: visible !important;
	}
	.panel-03 .swiper-container, .swiper {
        width: 100vw !important; 
        max-width: 100%;
    }
    
    	.panel-03 .swiper-slide {
        width: 100% !important;
    }
	.panel-03 .fluid-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 87%;
}
	
    .split-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    .card-container {
        height: 300px; /* Altura fija en móviles */
    }
}

/*altura otros paneles*/
.panel.long-scroll {
    position: relative;
    height: auto;       
    min-height: 100vh;
    z-index: 10;   
}
.panel.alto-especial {

    height: 100vh; 
    overflow-y: auto; 
    display: block; 
	overscroll-behavior: contain;
}


.panel.alto-especial::-webkit-scrollbar,html:not(.home) ::-webkit-scrollbar,
body:not(.home)::-webkit-scrollbar {
    width: 6px;
	display:block;
}
.panel.alto-especial::-webkit-scrollbar-thumb,html:not(.home) ::-webkit-scrollbar-thumb,
body:not(.home)::-webkit-scrollbar-thumb {
    
	background: var(--green-color);
    border-radius: 10px;
}
.panel.alto-especial::-webkit-scrollbar-track,
html:not(.home) ::-webkit-scrollbar-track,
body:not(.home)::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); 
}
body:not(.home), html:not(.home) {
    
    overflow-y: initial;
}
/* Ajustes de tipografía para el Timeline */
.timeline-container {
    position: relative;
    
    margin: 30px auto;
    /*padding: 40px 0;*/
}

/* Línea Central Exacta */
.timeline-line {
    position: absolute;
    left: 50%; /* Centrada */
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    /*width: 2px;*/
    background: rgba(0, 0, 0, 0.1);
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--azul-color, #0e3128);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.1s linear;
}

/* Contenedor del Item */
.timeline-item {
    position: relative;
    width: 50%; /* Ocupa la mitad */
      padding: 25px 3rem 15px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* Alineación Izquierda (Impares) */
.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

/* Alineación Derecha (Pares) */
.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

/* Los Círculos (Dots) centrados en la línea */
.timeline-dot {
    position: absolute;
    top: 30px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 3px solid var(--azul-color, #0e3128);
    border-radius: 50%;
    z-index: 10;
}

.timeline-item:nth-child(odd) .timeline-dot {
    right: -8px; /* Mitad del ancho del dot para quedar sobre la línea */
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -8px;
}

/* Clase de aparición al hacer scroll */
.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ajustes de Texto */
.year {
	font-size: 2rem;
	font-weight: 800; 
	color: var(--green-color); display: block;
	line-height: 1em;
   padding-top: 4px;
}
.subtitle { margin: 10px 0; font-size: 1.2rem; }
.timeline-content p {
    font-size: 19px;
    line-height: 1.2em;
	margin-bottom:0;
	text-align:justify;
}
@media (max-width: 768px) {
    .timeline-line { left: 20px; transform: none; }
    .timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 50px; }
    .timeline-dot { left: 12px !important; }
}

/*background-color: #010203;
  background-image: linear-gradient(
    to right,
    #010203,
    rgba(61, 124, 252, 0.08) 50%,
    #010203
  );
*/

/* EL BOTÓN DE FLECHA FLOTANTE */
.scroll-down-btn {
    position: absolute;
    top: 50px; /* Ajusta la distancia desde el fondo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* Asegura que esté por encima del contenido */
    color: var(--green-color); /* Usa tu color verde */
    font-size: 2rem; /* Tamaño de la flecha */
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    
    /* ANIMACIÓN DE FLOTADO */
    animation: floatArrow 2s ease-in-out infinite;
    
    /* Para centrar el icono si es un span */
    display: flex;
    justify-content: center;
    align-items: center;
   /* width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 50%;*/
}

.scroll-down-btn:hover {
    color: #ffffff; /* Cambia a blanco al pasar el mouse */
    transform: translateX(-50%) scale(1.1); /* Efecto de escala */
}

/* Definición de la animación de flotado */
@keyframes floatArrow {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px); /* Flota 10px hacia arriba */
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}

.border-img{
	border-radius: 20px;
   
    border: 2px solid var(--green-color);
}

.info-angosta p{
	        margin-left: auto;
        margin-right: auto
}
@media(min-width:768px){
.info-angosta p{
	width:60%;
	        margin-left: auto;
        margin-right: auto
}
}

/* Estructura del caso de éxito */
.caso-grid {
    display: flex;
    gap: 40px;
    align-items: center;
    background: rgba(0, 0, 0, .3);
    border-radius: 20px;
       padding: 15px 20px 15px 20px;
    margin: 20px 50px 10px; /* Espacio para las flechas de Swiper */
	min-height:380px;
}

.caso-texto {
    flex: 0 0 calc(50% - 20px);
    width: calc(50% - 20px);
    padding-right: 0; /* Un poquito de aire para que no pegue con las fotos */
min-width: 0;
}
.caso-texto h3 {
    
    color: var(--green-color);
    margin-bottom: 20px;
    /* Si una palabra (o comillas) es más larga que la pantalla, oblígala a saltar de línea */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    
    /* Ajusta el interlineado para que si salta a 2 o 3 líneas no se vea súper separado */
    line-height: 1; 
    
    /* TRUCO PRO: Tamaño de fuente dinámico. 
       Se hará un poco más pequeño en pantallas medianas antes de pasar a móvil. */
    font-size: clamp(1.6rem, 3vw, 1.5rem);
}

.caso-descripcion p {
    font-size: 18px;
    color: #ccc;
    line-height:normal;
	text-align:justify;
}

.caso-media {
    flex: 0 0 calc(50% - 20px);
    width: calc(50% - 20px);
    
  min-width: 0; 
    overflow: hidden;
}
/* Para asegurar que los videos o galerías nativas de WP no se desborden */
.caso-media iframe, 
.caso-media img,
.caso-media figure {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
body:not(.home) h1{
		font-size:3rem;
	}
	body:not(.home) h2{
		font-size:2.5rem;
	}
	body:not(.home) h3{
		font-size:2rem;
	}
	.panel-5.pt-5 {
    justify-content: start;
    padding-top: 4rem !important;
}

/* Botón flotante para el audio */
.btn-audio-flotante {
    position: absolute;
    bottom: 40px; /* Separación desde abajo */
    right: 40px;  /* Separación desde la derecha */
    z-index: 20;  /* Vital para que esté por encima del video */
    
    /* Diseño premium circular */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semitransparente oscuro */
   border: 2px solid rgb(29 229 81 / 50%);
    color: var(--green-color);
    font-size: 14px;
    
    /* Centrar el icono */
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    backdrop-filter: blur(5px); /* Efecto cristal (opcional) */
    transition: all 0.3s ease;
}

/* Efecto al pasar el ratón */
.btn-audio-flotante:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}
.bi-volume-mute-fill::before {
    content: "\f60c";
    vertical-align: -.250em;
}
/* Ajuste para móviles (lo hacemos un poco más pequeño y lo movemos) */
@media (max-width: 768px) {
    .btn-audio-flotante {
        bottom: 40px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}
/* Responsivo para móviles */
@media (max-width: 768px) {
	.swiper-casos > .swiper-button-next, .swiper-casos > .swiper-button-prev {
    width: 15px;
}
	h1{
		line-height:1em;
	}
	
    .caso-grid {
        flex-direction: column;
        gap: 30px;
        margin: 20px 20px 10px;
    }
    .caso-descripcion p {
    font-size: 17px;
}
	.caso-texto, .caso-media {
        flex: 1 1 auto;
        width: 100%;
        padding-right: 0;
    }
}

.swiper-galeria-interna {
    width: 100%;
    aspect-ratio: 16 / 9; /* Forzamos un tamaño de video cinematográfico */
    border-radius: 10px;
    background: #000;
}


.swiper-galeria-interna .swiper-pagination {
    bottom: 5px !important;
}


.swiper-galeria-interna .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: var(--green-color);
	opacity:0.8;
}
/* Ocultar las flechas de navegación SOLO en el Swiper interno de fotos */
.swiper-galeria-interna .galeria-next,
.swiper-galeria-interna .galeria-prev{
    display: none !important;
}
/* 1. Ocultar los puntos (paginación) SOLO del Swiper principal */
.swiper-casos > .swiper-pagination {
    display: none !important;
}

/* 2. Hacer las flechas del Swiper principal más pequeñas (22px) */
.swiper-casos > .swiper-button-next,
.swiper-casos > .swiper-button-prev {
   
    --swiper-navigation-size: 22px; 
    
   
    width: 30px; 
    height: 30px;
    margin-top: -15px;
}

/*nuestra huella canvas sticky*/
.panel-03 .fluid-bg-container {
   
    position: sticky !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    /* 2. EL TRUCO MÁGICO: Al restarle su propia altura, le decimos al Grid 
       que esta fila mide "0px". Así tu contenido arranca justo encima sin ser empujado. */
    margin-bottom: -100vh; 
    
    /* 3. Lo mandamos al fondo y evitamos que bloquee tus clics */
    z-index: 0;
    pointer-events: none;
}

/* 4. Por seguridad, garantizamos que todo tu contenido (excepto el fondo) quede por encima */
.panel-03 > *:not(.fluid-bg-container) {
    position: relative;
    z-index: 1;
}
.panel-03.alto-especial {
     padding: 0 0;
         display: grid;
    align-items: start;
}
.panel-03 .descripcion p.white {
    margin-bottom: 0;
    text-align: 
}
/*pagina lo que creamos*/

.bloque-servicio {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 5rem;
}
.bloque-servicio p {
    text-align: justify;
}
.col-texto {
    flex: 1;
    display: flex;
    flex-direction: column; /* Alinea sus hijos (h2 y p) verticalmente */
    justify-content: center;
}

.col-video {
    flex: 1;
}

.bloque-servicio:nth-child(even) {
    flex-direction: row-reverse;
}

/* Ajustes para el video */
.col-video video {
    width: 100%;
    height: auto;
    display: block;
}

.video-container-normal
 {
    position: relative;
    height: 100%; 
    overflow: initial;
}
.contacto label.forminator-label  {
    display: none !important;
}
#checkbox-1 .forminator-label, #checkbox-1 .forminator-description {
    display: none;
}
.forminator-ui.forminator-custom-form[data-design=default] .forminator-input{
	line-height:1em;
}
form.forminator-ui {
    margin-top: 5px !important;
}
#empleo h2 {
    margin-bottom: 0;
}
#empleo .forminator-row{
        margin-bottom: 12px;
    }
.forminator-ui#forminator-module-619.forminator-design--default .forminator-checkbox, #empleo form.forminator-ui #upload-1 .forminator-description{
	font-size:16px;
	color:#FFF;
	margin-bottom:0;
}
form.forminator-ui {
    margin-top: 5px !important;
}
#empleo.contacto .forminator-ui input {
    border-radius: 15px;
    border: 0;
}
span.forminator-checkbox-label, span.forminator-checkbox-label a {
    font-size: 16px;
    color: #fff;
}
#empleo .forminator-ui button.forminator-button.forminator-button-submit {
    font-size: 1.3rem;
    background-color: var(--green-color);
    color: var(--azul-oscuro);
    padding: 15px 31px;
    border-radius: 25px;
    line-height: 1em;
    font-weight: bold;
	margin-top: 16px;
}
form.forminator-ui{
    padding-top: 15px;
}
#empleo .forminator-button.forminator-button-upload
 {
    color: #666;
    padding: 8px;
    border-radius: 25px !Important;
    width: 100%;
}
#empleo .forminator-ui#forminator-module-619.forminator-design--default .forminator-file-upload > span
 {
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    color: #fff;
    width: 100%;
}
.forminator-row.forminator-row-last .forminator-field, 
.forminator-button-submit-wrapper .forminator-field {
    display: flex !important;
    align-items: flex-start !important; /* Mueve el contenido al inicio (arriba) */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/*Yotub border y responsive*/
/*
.video-container-yt {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    border-radius: 25px;  
    overflow: hidden;     
    mask-image: radial-gradient(white, black);
}

.video-container iframe {
width: 100%;
    height: 100%;
    object-fit: contain; 
    border-radius: 30px;
}*/
/* Responsive para celulares */
.img-neon {
            width: 300px; /* Ajusta al tamaño que necesites */
            height: auto;
            object-fit: cover;
            
            
            
            /* 2. BORDE FÍSICO DELGADO */
            /* Un borde sólido muy fino del color principal define el límite */
            border: 2px solid rgb(71, 245, 154); 

            /* 3. LA MAGIA DEL NEÓN (BOX-SHADOW) ESTÁTICO */
            /* Usamos múltiples sombras separadas por comas: */
            box-shadow: 
                /* Capa interna sutil (inset) para dar profundidad */
                inset 0 0 10px rgba(71, 245, 154, 0.3),
                /* Núcleo brillante externo cercano */
                0 0 10px rgba(71, 245, 154, 0.6),
                /* Halo difuso más lejano */
                0 0 25px rgba(71, 245, 154, 0.3);

            /* 4. APLICAR LA ANIMACIÓN */
            /* Nombre | Duración | Tipo de ritmo | Infinito */
            animation: neonPulse 4s ease-in-out infinite;
            
            /* Transición suave para efectos hover si los quisieras agregar luego */
            transition: all 0.3s ease;
        }

       
        .img-neon:hover {
             transform: scale(1.02); /* Un pequeño zoom */
             /* Hacemos el brillo más intenso al pasar el mouse */
             box-shadow: 
                inset 0 0 15px rgba(71, 245, 154, 0.5),
                0 0 20px rgba(71, 245, 154, 0.9),
                0 0 40px rgba(71, 245, 154, 0.6);
        }
@keyframes neonPulse {
            0%, 100% {
                /* ESTADO "EN REPOSO" (Brillo normal) */
                border-color: rgba(71, 245, 154, 0.8);
                box-shadow: 
                    inset 0 0 10px rgba(71, 245, 154, 0.3),
                    0 0 8px rgba(71, 245, 154, 0.5),
                    0 0 20px rgba(71, 245, 154, 0.2);
            }
            50% {
                /* ESTADO "ENCENDIDO" (El brillo se expande y se intensifica) */
                border-color: rgba(71, 245, 154, 1); /* Borde sólido más brillante */
                box-shadow: 
                    inset 0 0 15px rgba(71, 245, 154, 0.5), /* Brillo interno más fuerte */
                    0 0 15px rgba(71, 245, 154, 0.8),     /* Núcleo externo se expande */
                    0 0 35px rgba(71, 245, 154, 0.5);     /* Halo lejano se expande mucho más */
            }
        }

     /*video y foto en unete al crew*/
    .mitad-visual {
    flex: 1;
    
    /* Centramos el video verticalmente por si el texto de al lado es muy largo */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    padding: 20px; /* Un poco de aire opcional */
}


/*diseno 2 de crew*/
#contacto h3.buscas{
	padding-top: 3rem;
}
#contacto h3.buscas span{
	display: block;
}
.contacto .split-contacto.pr {
  flex: 1;
  width: 50%;
  /*nuevo diseno */
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%
}
.split-contacto.pr::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0d2d4f;
  z-index: 0;
}
/* ── FOTO DEL EQUIPO — 58% ──────────────────── */
  .media-photo {
    position: relative;
    flex: 1;
    overflow: hidden;
    z-index: 1;
  }

  .media-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: brightness(0.78) saturate(0.9);
    transition: transform 7s ease;
  }

  .panel-right:hover .media-photo img {
    transform: scale(1.04);
  }

  .media-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(13,45,79,0.1) 30%, rgba(13,45,79,0.75) 100%),
      linear-gradient(to right, rgba(13,45,79,0.2) 0%, transparent 60%);
  }

  /* Chips de estadísticas */
  .photo-stats {
    position: absolute;
    bottom: 1rem;
    left: 1.2rem;
    right: 1.2rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .stat-chip {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .stat-chip strong {
    font-size: 1rem;
    font-weight: 800;
    color: white;
    line-height: 1.1;
  }
  .stat-chip strong span { color: var(--green); }
  .stat-chip em {
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* ── VIDEO TESTIMONIO — 42% ──────────────────── */
  .media-video {
    flex: 1;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .video-thumbnail {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }

  .video-thumbnail img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.4) saturate(0.7);
    transition: filter 0.3s;
  }
  .video-thumbnail:hover img {
    filter: brightness(0.5) saturate(0.9);
  }

  /* color wash verde sobre el video */
  .video-thumbnail::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(45,184,122,0.12) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
  }

  .video-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: end;
    padding: 0 1.4rem 1em;
    gap: 1.2rem;
}


  .play-btn {
    flex-shrink: 0;
    width: 48px; height: 48px;
    background: var(--green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, background 0.2s;
    animation: pulse 2.5s infinite;
  }
  .video-thumbnail:hover .play-btn {
    transform: scale(1.1);
    background: #35d490;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0   rgba(45,184,122,0.45); }
    65%  { box-shadow: 0 0 0 12px rgba(45,184,122,0); }
    100% { box-shadow: 0 0 0 0   rgba(45,184,122,0); }
  }
  .play-btn svg { width: 16px; height: 16px; fill: white; margin-left: 3px; }

  .video-info { flex: 1; min-width: 0; }

  .video-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
  }
  .video-tag::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
  }

  .video-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .video-role {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.5);
    font-weight: 400;
  }

  .video-dur {
    flex-shrink: 0;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }
#yt-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
}
  /* entrada */
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .media-photo, .media-video {
    animation: fadeIn 0.6s ease 0.2s both;
  }

  /*casos de exito - youtube*/
  /* Obliga a los iframes de YouTube a comportarse bien en la caja de medios */
.caso-media iframe, 
.caso-media .wp-block-embed-youtube {
    width: 100% !important;
    aspect-ratio: 16 / 9; /* Mantiene la forma perfecta de video */
    height: auto !important;
    border-radius: 0;
    margin: 0;
    display: block;
}
/*area clickeable servicios*/
/* 2. El truco mágico: estiramos el enlace */
#servicios .card-container .btn-link-serv::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1; /* Cubre todo el div */
}

/* 3. Opcional: Feedback visual al pasar el mouse */
#servicios .card-container:hover {
    cursor: pointer;
    transform: translateY(-5px); /* Pequeño salto hacia arriba */
}
/*responsive general*/

@media (max-width: 768px) {
	body, html {
        height: auto !important;
        overflow-y: auto !important; /* Cambia hidden por auto */
        overflow-x: hidden;
    }
.panel.contacto::-webkit-scrollbar {
    width: 6px;
	display:block;
}
.panel.contacto::-webkit-scrollbar-thumb {
    
	background: var(--green-color);
    border-radius: 10px;
}
 .panel.contacto::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); 
}
    .bloque-servicio, .bloque-servicio:nth-child(even) {
        flex-direction: column; /* En móvil siempre primero texto, luego video */
        text-align: center;
    }
    
    .col-texto, .col-video {
        flex: 1 1 100%;
    }

	.panel-4, .panel#contacto,  .panel#empleo, .panel-6#clientes {
    height: 100% !Important;
    min-height: 100vh;
    overflow-y: scroll !Important;
    display: block;
}
	.col-video, .col-texto
 {
    flex: 0 0 50%;
    width: 100%;
    max-width: 100%;
}
	.contacto .contenedor-video.pt-5 {
    padding-top: 0 !important;
}
	
	.contacto .split-contacto:nth-child(2).pt-5 {
    padding-top: 10px !important;
}
	
	.site-footer {
        flex-direction: column; 
        gap: 0;             
        align-items: center;   
        text-align: left;     
            
    }
	.site-footer.pt-3.px-5 {
    padding:  10px 0px !important;
}

    .site-footer > div {
        width: 100%;  
			text-align:left !important;
    }
.panel-3	.scroll-down-btn{
		display:none;
	}
	.panel-3 #fluid-vertical-canvas{
		width:42px !Important;
	}
	.menu-inner {
    padding: 120px 50px 60px 50px;
    
		justify-content: start; 
	}
.contacto .split-contacto, .contacto .split-contacto.pr {
        width: 95%; 
        flex: none;  
    }
	.contacto {
	
        height: auto !important; 
        min-height: 100vh; 
        overflow-y: visible !important; 
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
       
        box-sizing: border-box; 
        padding-bottom: 50px;
}
	.contacto > div {
        flex-shrink: 0;
    }
	.panel footer{
		position:initial;
	}
}
@media (min-width:768px){
	.video-evolucion{
		max-width:768px;
	}
	.contacto .forminator-ui{
	width:66% !important;
}
}

@media (min-width: 1200px) {
    .panel-03 .container {
        padding-right: 0;
        max-width: 1290px;
        padding-left: 0;
    }
	.panel-5 .container {
        padding-right: 0;
        max-width: 1400px;
        padding-left: 0;
    }
}