@media only screen and (max-width: 756px)
{
body.modo-light #mega-menu-wrap-main.mega-sticky {
background: #F5F5F5 !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
opacity: 0.90 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 9998;
}
}




body .content-wrapper blockquote
{
	font-weight: 400 !important;
}

/* --- Forzar Tipografía Personalizada 'Thinkia Grotesk' --- */

/* Para el cuerpo del texto, párrafos, listas y enlaces */
body, p, li, a, code {
    font-family: 'Thinkia Neo', sans-serif !important;
}

/* Para todos los encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Thinkia Neo', sans-serif !important;
}

.error-404-wrapper
{
	background: transparent;
}

#mega-menu-wrap-main .mega-menu-toggle.mega-menu-open
{
	z-index: -99999999999 !important;
}

.elementor-widget-image a img[src$=".svg"]
{
	width: auto;
}


/*@media only screen and (max-width: 756px)
{
#mega-menu-wrap-main .mega-menu-toggle.mega-menu-open:after
{
    display: none;
}
}

#mega-menu-wrap-main .mega-menu-toggle.mega-menu-open ~ button.mega-close
{
    display: none;
}

#mega-menu-wrap-main .mega-menu-toggle.mega-menu-open:after {
    display: none;
  }

#mega-menu-wrap-main .mega-menu-toggle.mega-menu-open + #mega-menu-main
{
	right:-100% !important;
}

*/
#mega-menu-wrap-main.mega-menu-wrap
{
	z-index: 99999999999 !important;
}

.content-wrapper
{
	margin-top: 0px;
}

body {
  overflow-x: hidden;
}
/*
.elementor-column-gap-default > .elementor-row
{
		margin: -70px;
}*/

#mega-menu-wrap-main {
    position: fixed !important;         /* top: 20px; */
    left: 0;
    width: 100%;
    z-index: 9999; 
}

/* 1. Prepara el contenedor del menú */
#mega-menu-wrap-main.mega-sticky {
 
	background: #03091D; 
/* El desenfoque del cristal */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
	 opacity: 0.90;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borde blanco muy sutil */
  position: relative;
  z-index: 9998;
	
}

/* 2. Crea la capa de fondo virtual con el efecto glass 
#mega-menu-wrap-main.mega-sticky::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  

  background-color: #03091D;

  
  opacity: 0.85;
  
  
  backdrop-filter: blur(128px);
  -webkit-backdrop-filter: blur(128px);
  
  
  z-index: 9997;
} */

.elementor-nav-menu li:before {
    content: none !important;
    display: none !important;
	
}

.elementor-nav-menu a {
    position: relative;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.elementor-nav-menu a:hover {
    text-decoration: none !important;
}

.elementor-nav-menu a::before,
.elementor-nav-menu a::after {
    content: '/';
    opacity: 0;
    transition: all 0.3s ease;
   
    vertical-align: middle;
    display: inline;
	  background-color: transparent !important;
    
	   height: auto !important;

  
}

.elementor-nav-menu a::before 
{ 
	content: '/'; margin-right: 5px; }
.elementor-nav-menu a::after 
{ 
	content: '/'; margin-left: 5px; 
}

.elementor-nav-menu a:hover::before,
.elementor-nav-menu a:hover::after {
    opacity: 1;
    color: #00AFFF;
}




#mega-menu-wrap-main {
  transition: all 0.4s ease;
}






/* ======================
   ICONOS Y SERVICIOS
====================== */

.icon-container-services {
    font-size: 80px;
    color: var(--e-global-color-26fc5b0);
    width: 80px;
    height: 80px;
    box-shadow: 0px 0px 0px 0px rgba(221, 225, 231, 0.53);
    background-color: #DDE1E733;
    border-radius: 15px;
    display: inline-flex;
    margin: 0 0 15px;
}

.icon-box-item-services { text-align: center; }

.icon-box-services-title { margin-top: 0px !important; }

/* ======================
   SWIPER SLIDES
====================== */

.swiper-slide {
    padding: 5px;
}

.swiper-slide-bg {
    border-radius: 40px;
    box-shadow: 4px 4px 12px 4px rgba(224, 170, 62, 0.2);
}

/* ======================
   OTROS ELEMENTOS
====================== */

.neuros-heading .neuros-subheading:before,
.neuros-heading .neuros-subheading:after {
    color: #00AFFF;
}

@media only screen and (min-width: 992px) {
    .grid-listing.columns-3 .grid-item,
    .grid-listing.columns-4 .grid-item,
    .grid-listing.columns-5 .grid-item,
    .grid-listing.columns-6 .grid-item {
        width: 33.3333%;
    }
}

.project-item {
    border-radius: 25px !important;
   /* box-shadow: 4px 4px 12px 0px rgba(224, 170, 62, 0.3) !important;*/
}

.wpr-mgzn-grid-item {
    margin: 15px !important;
    box-shadow: 4px 4px 12px 0px rgba(224, 170, 62, 0.3) !important;
    border-radius: 25px !important;
}

.elementor-background-overlay {
    background-position: center;
    background-size: 100%;
    transition: background-position 0.3s ease, background-size 0.3s ease;
}

.elementor-background-overlay:hover {
    background-position: 10% 90%;
    background-size: 100%;
}

/********/
.content-wrapper .content-wrapper-sidebar-position-none
{
	margin-top: 0px !important;
  margin-bottom: 0px !important;
}

textarea 
{
	height: 120px;
}

/* Estilo base para pantallas grandes (superiores a 1600px) */
h1 {
  font-size: clamp(2.5rem, 7vw + 1rem, 7.5rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
}

h2 {
  font-size: clamp(2rem, 6vw + 0.5rem, 6rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.5px;
}

:lang(es-ES) h2 {
  font-size: clamp(2rem, 5.5vw + 0.5rem, 5rem);
}

h3 {
  font-size: clamp(1.75rem, 4.5vw + 0.25rem, 4rem);
  line-height: 1.3;
  font-weight: 600;
}

h4 {
  font-size: clamp(1.5rem, 4vw + 0.2rem, 3rem);
  line-height: 1.4;
  font-weight: 600;
}

h5 {
  font-size: clamp(1.25rem, 3vw + 0.1rem, 2.5rem);
  line-height: 1.25;
  font-weight: 600;
}

h6 {
  font-size: clamp(1rem, 2.5vw + 0.1rem, 1.5rem);
  line-height: 1.5;
  font-weight: 600;
}

p {
  font-size: clamp(0.95rem, 0.8vw + 0.2rem, 1.125rem);
  line-height: 1.6;
  max-width: 65ch;
  margin-bottom: 1.5rem;
}

/* Media query: pantallas de portátil / escritorio normal */
@media (max-width: 1892px) {
  h1 {
    font-size: clamp(2.5rem, 6vw + 1rem, 6rem);
  }

  h2 {
    font-size: clamp(2rem, 5.5vw + 0.5rem, 4.5rem);
  }

  h3 {
    font-size: clamp(1.75rem, 4vw + 0.25rem, 3.5rem);
  }

  h4 {
    font-size: clamp(1.5rem, 3.5vw + 0.2rem, 2.75rem);
  }

  h5 {
    font-size: clamp(1.25rem, 3vw + 0.1rem, 2.25rem);
  }

  h6 {
    font-size: clamp(1rem, 2.5vw + 0.1rem, 1.3rem);
  }

  p {
    font-size: clamp(0.95rem, 0.7vw + 0.2rem, 1.05rem);
  }
}
/*
 * BUTTTON HOVER
*/
/* ESTADO HOVER: Gradiente entre el color de acento y el primario */
.neuros-button:hover {
    background-image: linear-gradient(
        262deg,
        var(--e-global-color-accent), /* Color 1: Acento */
        var(--e-global-color-accent) /* Color 2: Primario */
    ) !important;

  
}
/*
 * SOLUCIÓN FINAL BUTOON MENU


a.neuros-button.is-solid:after {
    display: none !important;
}
*/
a.neuros-button.is-solid span.button-inner::after,
a.neuros-button.is-solid span.button-inner::before {
	border: var(--e-global-color-accent) !important;
	background: var(--e-global-color-accent) !important; 
    -webkit-mask: none !important;
    mask: none !important;
}


a.neuros-button.is-solid:hover span.button-inner::after,
a.neuros-button.is-solid:hover span.button-inner::before {
   
    background: var(--e-global-color-primary) !important; 
}

.elementor-nav-menu a:hover::before, .elementor-nav-menu a:hover::after {
        opacity: 1;
        color: var(--e-global-color-accent) !important;
    }

.menu-item a:hover {

	padding-left: 1em !important;
}

hr
{
color:transparent;	
}

.post-content
{
   max-width: 100%;
	padding-right: 35px;
}

p
{
	max-width: 100%;
}
.post-content h3,.post-content h4,.post-content h5,
{
	max-width: 100%;
	padding-right: 35px;
}

.post-content p
{
	text-align: justify;
	padding-right: 35px;
}

body .content-wrapper blockquote
{
	font-style: italic;
}

body .content-wrapper blockquote:before
{
	content: '';
	
	background-image: url('/wp-content/uploads/2025/09/barrathinkia.svg'), url('/wp-content/uploads/2025/09/barrathinkia.svg');

width: 2.25em;   /* Usamos 'em' para que sea adaptable como antes */
  height: 1.25em;  /* Ajusta estos valores si es necesario */

/* 4. Asegúrate de que el icono se vea bien */
  background-size: contain;     /* Esto hace que el icono quepa completo dentro del tamaño definido */
  background-repeat: no-repeat; /* Evita que el icono se repita */
  background-position: left center, right center;  /* Centra el icono en el espacio disponible */
	
}
ul > li {
	padding-left: 24px;
}
ul > li:before {
content: '__';
padding-left: 12px;
font: 600 normal 0.5625em/1em 'fontello';
display: block;
position: absolute;
left: 0;
top: 1.25em;
}

code
{
	font-family: 'Plus Jakarta Sans';
}

.archive-listing
{
	margin-top: 30px;
}

.post-meta-header
{
	margin-bottom: 0px !important;
}



/* Estilos base para todas las imágenes del shortcode */
.imagen-destacada-cover {
  object-fit: cover;
  object-position: center center;
  border-radius: 25px !important;
}

/* --- TAMAÑOS ESPECÍFICOS --- */

/* Tamaño "media" */
.tamano-media {
  width: 100vw !important;;
  height: 640px !important;;
}

/* Tamaño "cuarto" */
.tamano-cuarto {
  width: 100vw !important;; /* Ajustado a 100vw según tu descripción, no 199vw que parece un error tipográfico */
  height: 320px !important;;
}

/* Tamaño "octavo" */
.tamano-octavo {
  width: 100% !important;; /* 100% para que se ajuste a su contenedor, no a toda la pantalla */
  height: 210px !important;;
}

.widget_block, .widget_neuros_nav_menu_widget{
	margin-top: 10px !important;
}

.wp-block-separator
{
margin-top: 40px !important;
}


/* --- CASE STUDIES. ELIMINAR PADDING 35PX DE LA DERECHA --- */
.post-content
{
	padding-right:0px;
}



/* --- CÓDIGO CSS ACTUALIZADO --- */

/* --- CÓDIGO CSS ACTUALIZADO --- */

/* --- CÓDIGO CSS ACTUALIZADO --- */

/* 1. Contenedor principal: le damos una altura calculada dinámicamente */
.horizontal-scroll-section {
    height: auto; /* Dejar que ScrollTrigger gestione el espacio con pinSpacing:true */
    min-height: 100vh; /* Garantizar altura mínima visible */
    position: relative; /* Asegurar contexto de posicionamiento */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    /* Offset final configurable para ver completa la última card */
    --end-offset: 240px;
}

/* Estado mientras está pinneado: neutralizar transiciones y asegurar entorno estable */
.horizontal-scroll-section.is-pinned, .horizontal-scroll-section.is-pinned * { transition: none !important; }

/* Evitar rebotes del navegador cuando la sección está pinneada */
.horizontal-scroll-section.is-pinned { overscroll-behavior: contain; }

/* Evitar cualquier transición visual al entrar/salir del pin */
.horizontal-scroll-section .pin-wrapper,
.horizontal-scroll-section .elementor-loop-container {
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Evitar que vídeos/iframes capturen la rueda mientras la sección esté pinneada */
.horizontal-scroll-section.is-pinned .elementor-video,
.horizontal-scroll-section.is-pinned iframe,
.horizontal-scroll-section.is-pinned video {
    pointer-events: none !important;
}

/* Mientras esté pinneado, aseguramos que el contenedor directo no trate al spacer como flex item */
.horizontal-scroll-section.is-pinned .pin-spacer {
    display: block !important;
    flex: none !important;
    align-self: auto !important;
}

/* Asegurar overflow visible en el contenedor directo del spacer durante el pin */
.horizontal-scroll-section.is-pinned .pin-wrapper {
    overflow: visible !important;
}

/* 2. Contenedor "pegajoso": se fijará en la parte superior de la pantalla */
.horizontal-scroll-section .pin-wrapper {
    height: 100vh !important;
    width: 100% !important;
    position: relative !important; /* ScrollTrigger se encarga del pin */
    top: auto !important;
    overflow: hidden !important; /* Oculta los slides que están fuera de la pantalla */
    left: 0 !important;
    /* NO forzar transform: none - dejar que GSAP controle el transform */
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    inset: 0 !important;
    /* Forzar que sea visible */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important; /* Z-index alto para estar por encima del contenido normal */
    /* Asegurar que no interfiera con el contenido de abajo */
    isolation: isolate !important;
}

/* Al finalizar el pin, dejar que el wrapper ajuste su altura al contenido */
.horizontal-scroll-section .pin-wrapper:not(.is-pinned) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Forzar estilos específicos para el pin-wrapper en horizontal-scroll-section */
.horizontal-scroll-section .pin-wrapper {
    position: relative !important; /* ScrollTrigger se encarga del pin */
    top: auto !important;
    left: 0 !important;
    /* NO forzar transform: none - dejar que GSAP controle el transform */
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    /* Asegurar que no interfiera con la animación */
    will-change: auto !important;
    backface-visibility: visible !important;
    z-index: 10 !important; /* Z-index alto para estar por encima del contenido normal */
    /* Asegurar que no interfiera con el contenido de abajo */
    isolation: isolate !important;
}

/* Limpiar el pin-spacer de Elementor - VERSIÓN ULTRA AGRESIVA */
.horizontal-scroll-section .pin-spacer {
    position: static !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    inset: 0 !important;
    order: 0 !important;
    place-self: auto !important;
    grid-row-start: auto !important;
    grid-column-start: auto !important;
    grid-row-end: auto !important;
    grid-column-end: auto !important;
    z-index: auto !important;
    float: none !important;
    flex-shrink: 1 !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    /* Forzar que no sea flex container */
    flex: none !important;
    align-self: auto !important;
    align-content: stretch !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* Asegurar que el pin-spacer no interfiera con la animación */
.horizontal-scroll-section .pin-spacer {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    overflow: visible !important;
}

/* 3. ¡LA CLAVE! Forzamos al contenedor INTERNO del Loop Grid a ser un flexbox */
.horizontal-scroll-section .animation-track .elementor-loop-container {
    display: flex !important;
    flex-wrap: nowrap !important; /* Evita que los elementos salten a otra línea */
    width: max-content !important; /* Permite que el contenedor crezca para alojar todos los posts */
    gap: 64px !important; /* Espacio entre cards usando gap del contenedor */
    /* NO forzar transform: none - dejar que GSAP controle el transform */
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    /* Asegurar que el transform funcione */
    will-change: transform !important;
    backface-visibility: hidden !important;
}

/* Forzar estilos específicos para el track en horizontal-scroll-section */
.horizontal-scroll-section .elementor-loop-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 64px !important;
    /* NO forzar transform: none - dejar que GSAP controle el transform */
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    /* Asegurar que el transform funcione */
    will-change: transform !important;
    backface-visibility: hidden !important;
    /* Forzar que sea visible */
    visibility: visible !important;
    opacity: 1 !important;
    /* Forzar que se mueva */
    position: relative !important;
    z-index: 2 !important;
    /* Asegurar que no esté oculto */
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
}

/* 4. Estilo para cada slide (cada item del loop) - Glassmorphism */
.horizontal-scroll-section .card {
   width: 100vw; /* Más pequeñas para encajar mejor en pantalla */
   /* height: 80vh; */
    flex-shrink: 0; /* Evita que se encojan */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alineación desde arriba para evitar corte de texto */
    padding: 20px 16px; /* Padding reducido para que quepa el contenido */
    box-sizing: border-box;
    margin: 0; /* Sin margin, usamos gap del contenedor */
    
    /* Glassmorphism effect como estilo base del fondo */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    
    /* Mejoras visuales */
    position: relative;
    overflow: hidden;
    
    /* Asegurar que el contenido se ajuste mientras no está pinneado */
    overflow-y: hidden; /* Evitar capturar el scroll mientras está pinneado */
    overflow-x: hidden; /* Sin scroll horizontal */
}

/* Cuando NO está pinneado, permitir scroll interno si el contenido es largo */
.horizontal-scroll-section:not(.is-pinned) .card {
    overflow-y: auto;
}

/* Evitar handoffs raros del navegador mientras está pinneado */
.horizontal-scroll-section.is-pinned {
    overscroll-behavior: contain;
}

/* Ajustes para el vídeo con glassmorphism */
.horizontal-scroll-section .card .autoplay-video { 
    width: 100%; 
    height: 100%; 
    border-radius: 25px; /* Bordes redondeados para el video */
    overflow: hidden;
}

.horizontal-scroll-section .card .autoplay-video .elementor-video,
.horizontal-scroll-section .card .autoplay-video video, 
.horizontal-scroll-section .card .autoplay-video iframe { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* Estilos específicos para videos de Elementor */
.horizontal-scroll-section .card .autoplay-video .e-hosted-video {
    width: 100%;
    height: 100%;
}

.horizontal-scroll-section .card .autoplay-video .elementor-wrapper {
    width: 100%;
    height: 100%;
}

/* Estilos adicionales para robustez */
.horizontal-scroll-section .animation-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    z-index: 1 !important;
}

/* Forzar estilos específicos para animation-track */
.horizontal-scroll-section .animation-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    z-index: 1 !important;
    /* Asegurar que no interfiera */
    transform: none !important;
    will-change: auto !important;
}

/* Asegurar que los elementos no se muevan durante la animación */
.horizontal-scroll-section .card {
    will-change: transform;
    backface-visibility: hidden;
}

/* Mejorar el rendimiento en dispositivos móviles */
@media (max-width: 768px) {
    .horizontal-scroll-section .card {
        width: 96vw; /* Casi 100% del ancho visible, con un pequeño margen lateral */
        height: 100vh; /* Ocupar 100% del alto visible */
        padding: 12px 8px; /* Casi sin espacio interno */
        margin: 0; /* Sin margin en móviles, usamos gap del contenedor */
        border-radius: 20px;
    }
    /* Asegurar que el item del loop también ocupa casi el 100% */
    .horizontal-scroll-section .e-loop-item {
        width: 96vw !important;
        max-width: none !important;
        flex-shrink: 0 !important;
    }
    /* Casi sin espacio entre cards en móviles */
    .horizontal-scroll-section .elementor-loop-container,
    .horizontal-scroll-section .animation-track .elementor-loop-container {
        gap: 4px !important;
    }
}

/* Sobrescribir estilos de Elementor que interfieren */
.horizontal-scroll-section .elementor-loop-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 160px !important;
}

.horizontal-scroll-section .e-loop-item {
    flex-shrink: 0 !important;
    width: 60vw !important; /* Ajustado al nuevo tamaño de card */
    max-width: none !important;
}

/* Asegurar que los videos de Elementor funcionen correctamente */
.horizontal-scroll-section .autoplay-video .elementor-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Estilos para el contenido dentro de las cards */
.horizontal-scroll-section .card * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


		</style>