.elementor-3 .elementor-element.elementor-element-45ffacb6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3 .elementor-element.elementor-element-41d7fc4{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-3 .elementor-element.elementor-element-2c2b04c2{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:20px;--margin-right:0px;}.elementor-3 .elementor-element.elementor-element-6a41c356{transition:all 400ms;}.elementor-3 .elementor-element.elementor-element-4c7c83ad{--display:flex;}.elementor-3 .elementor-element.elementor-element-758bce0{--display:flex;}.elementor-3 .elementor-element.elementor-element-2119eaa1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3 .elementor-element.elementor-element-2119eaa1:not(.elementor-motion-effects-element-type-background), .elementor-3 .elementor-element.elementor-element-2119eaa1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF4F;}.elementor-3 .elementor-element.elementor-element-6d82f229{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-3 .elementor-element.elementor-element-4f021077{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:20px;--margin-right:0px;}.elementor-3 .elementor-element.elementor-element-6c1a3c1a{transition:all 400ms;}.elementor-3 .elementor-element.elementor-element-5f76bbc8{--display:flex;}.elementor-3 .elementor-element.elementor-element-1c8fe5f7 > .elementor-widget-container{margin:50px 50px 50px 50px;}.elementor-3 .elementor-element.elementor-element-1c8fe5f7{transition:all 400ms;}@media(max-width:767px){.elementor-3 .elementor-element.elementor-element-6d82f229{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3 .elementor-element.elementor-element-4f021077{--width:20%;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}}@media(min-width:768px){.elementor-3 .elementor-element.elementor-element-2c2b04c2{--width:20%;}.elementor-3 .elementor-element.elementor-element-4c7c83ad{--width:33%;}.elementor-3 .elementor-element.elementor-element-758bce0{--width:33%;}.elementor-3 .elementor-element.elementor-element-4f021077{--width:20%;}}/* Start custom CSS *//* ==========================================================
   THE BACKPACKSTER - GLOBAL LIGHT / DARK THEME
   Controlado con html.dark-mode
   ========================================================== */
/* ==========================================================
   VARIABLES
   ========================================================== */
:root{
  --bg: #F3F4F8;
  --nav-bg: #FFFFFF4F;
  --nav-text: #0B0B0A;
  --burger: #7E1CFD;
  --text-light: #F3F4F8;
  --text-dark: #0B0B0A;
  --brand-purple: #7E1CFD;
  --brand-mint: #00F9B9;
  --brand-gold: #FEC961;
}
html.dark-mode{
  --bg: #0B0B0A;
  --nav-bg: #0B0B0A7D;
  --nav-text: #F3F4F8;
  --burger: #F3F4F8;
}
/* ==========================================================
   FONDO GLOBAL
   ========================================================== */
html,
body,
#page,
.site,
.site-main,
.elementor{
  background: var(--bg) !important;
  transition: background-color .6s ease;
}
/* En modo oscuro, el fondo global pasa a transparente para que
   se vea el canvas de átomos (position:fixed, z-index:-1)
   inyectado en el footer del sitio. */
html.dark-mode,
html.dark-mode body,
html.dark-mode #page,
html.dark-mode .site,
html.dark-mode .site-main,
html.dark-mode .elementor{
  background: transparent !important;
}
/* ==========================================================
   NAV DESKTOP
   ========================================================== */
#nav{
  background: var(--nav-bg) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background-color .6s ease;
}
#nav a,
#nav .elementor-item,
#nav .menu-item a,
#nav .elementor-icon-list-text,
#nav .elementor-button-text,
#nav .elementor-nav-menu a{
  color: var(--nav-text) !important;
  transition: color .6s ease;
}
/* ==========================================================
   NAV MOBILE
   ========================================================== */
#navmobile{
  background: var(--nav-bg) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background-color .6s ease;
}
#navmobile a,
#navmobile .elementor-item,
#navmobile .menu-item a,
#navmobile .elementor-icon-list-text,
#navmobile .elementor-button-text,
#navmobile .elementor-nav-menu a{
  color: var(--nav-text) !important;
  transition: color .6s ease;
}
/* ==========================================================
   BURGER BUTTON
   ========================================================== */
#burger-btn,
#burger-btn svg,
#burger-btn i,
#burger-btn .elementor-icon{
  color: var(--burger) !important;
  fill: var(--burger) !important;
  transition: color .6s ease, fill .6s ease;
}
/* ==========================================================
   LOGOS
   Desktop: .logo-light / .logo-dark
   Mobile: .logo-mobile-light / .logo-mobile-dark
   ========================================================== */
#nav .logo-light{ display:block !important; }
#nav .logo-dark{ display:none !important; }
html.dark-mode #nav .logo-light{ display:none !important; }
html.dark-mode #nav .logo-dark{ display:block !important; }
#navmobile .logo-mobile-light{ display:block !important; }
#navmobile .logo-mobile-dark{ display:none !important; }
html.dark-mode #navmobile .logo-mobile-light{ display:none !important; }
html.dark-mode #navmobile .logo-mobile-dark{ display:block !important; }
/* ==========================================================
   HOME
   Conserva su propia imagen en dark mode (no usa los átomos)
   ========================================================== */
#home{
  background-image: url('/wp-content/uploads/hero-claro.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
html.dark-mode #home{
  background-image: url('/wp-content/uploads/estadiogpt.png') !important;
}
@media (max-width:767px){
  #home{
    background-image: url('/wp-content/uploads/bg-claro-m.png') !important;
  }
  html.dark-mode #home{
    background-image: url('/wp-content/uploads/estadiogpt.png') !important;
  }
}
/* ==========================================================
   PLATFORM
   En dark mode queda transparente: se ven los átomos detrás
   ========================================================== */
#platform{
  background-image: url('/wp-content/uploads/bg-claro-hv.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
html.dark-mode #platform{
  background-image: none !important;
  background-color: transparent !important;
}
/* Título H2 */
#platform h2{
  color:#0B0B0A !important;
}
html.dark-mode #platform h2{
  color:#f2f3f8 !important;
}
/* ==========================================================
   WBV
   En dark mode queda transparente: se ven los átomos detrás
   ========================================================== */
html.dark-mode #wbv,
html.dark-mode #wbv .e-con,
html.dark-mode #wbv .elementor-container{
  background: transparent !important;
}
/* ==========================================================
   SECCIONES QUE CAMBIAN A TEXTO BLANCO
   ========================================================== */
html.dark-mode #about,
html.dark-mode #about *,
html.dark-mode #ecosystems,
html.dark-mode #ecosystems *,
html.dark-mode #articles,
html.dark-mode #articles *,
html.dark-mode #technology,
html.dark-mode #technology *{
  color: var(--text-light) !important;
}
/* ==========================================================
   TEAM
   Todo blanco excepto los cargos
   ========================================================== */
html.dark-mode #team,
html.dark-mode #team *,
html.dark-mode #team h1,
html.dark-mode #team h2,
html.dark-mode #team h3,
html.dark-mode #team h4,
html.dark-mode #team h5,
html.dark-mode #team h6,
html.dark-mode #team span,
html.dark-mode #team a,
html.dark-mode #team li{
  color: var(--text-light) !important;
}
/* Cargos morados */
html.dark-mode #team p,
html.dark-mode #team .tcard{
  color: var(--brand-purple) !important;
}
/* ==========================================================
   THE NETWORK EFFECT
   ========================================================== */
html.dark-mode #thenetworkeffect,
html.dark-mode #thenetworkeffect *{
  color: var(--text-light) !important;
}
/* Morados */
html.dark-mode #thenetworkeffect .purple,
html.dark-mode #thenetworkeffect .tcard,
html.dark-mode #thenetworkeffect [data-purple],
html.dark-mode #thenetworkeffect [style*='7E1CFD'],
html.dark-mode #thenetworkeffect [style*='7e1cfd']{
  color: var(--brand-purple) !important;
}
/* Verde */
html.dark-mode #thenetworkeffect .mint,
html.dark-mode #thenetworkeffect [style*='00F9B9'],
html.dark-mode #thenetworkeffect [style*='00f9b9']{
  color: var(--brand-mint) !important;
}
/* Dorado */
html.dark-mode #thenetworkeffect .gold,
html.dark-mode #thenetworkeffect [style*='FEC961'],
html.dark-mode #thenetworkeffect [style*='fec961']{
  color: var(--brand-gold) !important;
}
/* ==========================================================
   PARTNERS
   ========================================================== */
html.dark-mode #partners,
html.dark-mode #partners *{
  color: var(--text-light) !important;
}
html.dark-mode #partners p,
html.dark-mode #partners .tcard,
html.dark-mode #partners .purple{
  color: var(--brand-purple) !important;
}
/* ==========================================================
   CONTACT
   Mantiene exactamente los colores de Elementor
   ========================================================== */
#contact,
#contact *{
  color: inherit !important;
}
/* ==========================================================
   TRANSICIONES
   ========================================================== */
.e-con,
.elementor-section,
.elementor-container,
.elementor-widget{
  transition:
    background-color .6s ease,
    background-image .6s ease,
    border-color .6s ease,
    color .6s ease;
}
/* ==========================================================
   TEXTOS MORADOS FIJOS
   Estas secciones siempre conservan el morado #7E1CFD
   ========================================================== */
#whoweare p,
#teopn p,
#l1 p,
#l2 p,
#l3 p,
#asseenin p,
#cntct p{
  color:#7E1CFD !important;
}
html.dark-mode #whoweare p,
html.dark-mode #teopn p,
html.dark-mode #l1 p,
html.dark-mode #l2 p,
html.dark-mode #l3 p,
html.dark-mode #asseenin p,
html.dark-mode #tne p,
html.dark-mode #cntct p{
  color:#7E1CFD !important;
}
/* ==========================================================
   CONTACT - COLOR DE TEXTO POR MODO
   ========================================================== */
#cntct,
#cntct *{
  color:#0B0B0A !important;
}
html.dark-mode #contact,
html.dark-mode #contact *{
  color:#F3F4F8 !important;
}
/* Botón: siempre texto claro */
#contact .elementor-button,
#contact .elementor-button *,
html.dark-mode #contact .elementor-button,
html.dark-mode #contact .elementor-button *{
  color:#F3F4F8 !important;
}
/* ==========================================================
   ALWAYS PURPLE
   Modo claro: morado sólido de marca
   Modo oscuro: lavanda claro con text-shadow blanco (sin efecto neón)
   ========================================================== */
.always-purple{
  color: var(--brand-purple) !important;
}
html.dark-mode .always-purple{
  color: #C4B5FD !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}
/* ==========================================================
   SHADOW BOX — Destello neón en modo oscuro (mismo color que los átomos)
   ========================================================== */
html.dark-mode .shadow-box{
  background: rgba(15, 8, 30, 0.35) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  box-shadow:
    0 0 20px rgba(167, 139, 250, 0.35),
    0 0 45px rgba(126, 28, 253, 0.25),
    inset 0 0 25px rgba(167, 139, 250, 0.06) !important;
  transition: box-shadow .6s ease, border-color .6s ease, background-color .6s ease;
  animation: neonPulse 3.5s ease-in-out infinite;
}
html.dark-mode .shadow-box:hover{
  box-shadow:
    0 0 30px rgba(167, 139, 250, 0.55),
    0 0 65px rgba(126, 28, 253, 0.4),
    inset 0 0 35px rgba(167, 139, 250, 0.1) !important;
}
/* ==========================================================
   SHADOW BOX FB — mismo destello neón, pero conserva fondo blanco
   (para contenedores con imágenes de fondo blanco)
   ========================================================== */
html.dark-mode .shadow-box-fb{
  background: #FFFFFF !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  box-shadow:
    0 0 20px rgba(167, 139, 250, 0.35),
    0 0 45px rgba(126, 28, 253, 0.25) !important;
  transition: box-shadow .6s ease, border-color .6s ease;
  animation: neonPulse 3.5s ease-in-out infinite;
}
html.dark-mode .shadow-box-fb:hover{
  box-shadow:
    0 0 30px rgba(167, 139, 250, 0.55),
    0 0 65px rgba(126, 28, 253, 0.4) !important;
}
@keyframes neonPulse{
  0%, 100%{
    box-shadow:
      0 0 20px rgba(167, 139, 250, 0.35),
      0 0 45px rgba(126, 28, 253, 0.22);
  }
  50%{
    box-shadow:
      0 0 28px rgba(167, 139, 250, 0.55),
      0 0 60px rgba(126, 28, 253, 0.35);
  }
}
/* ==========================================================
   SHADOW BOX / SHADOW BOX FB — Modo claro
   Fondo blanco + mismo borde/sombra morada que .shadow-box-fb en dark mode
   ========================================================== */
.shadow-box,
.shadow-box-fb{
  background: #FFFFFF !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  box-shadow:
    0 0 20px rgba(167, 139, 250, 0.35),
    0 0 45px rgba(126, 28, 253, 0.25) !important;
  transition: box-shadow .6s ease, border-color .6s ease, background-color .6s ease;
  animation: neonPulse 3.5s ease-in-out infinite;
}
.shadow-box:hover,
.shadow-box-fb:hover{
  box-shadow:
    0 0 30px rgba(167, 139, 250, 0.55),
    0 0 65px rgba(126, 28, 253, 0.4) !important;
}
/* ==========================================================
   SHADOW BOX M — Contenedor morado, SIEMPRE morado
   (mismo blur que .shadow-box, independiente del modo)
   ========================================================== */
.shadow-box-m{
  background: #7E1CFD !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  box-shadow:
    0 0 20px rgba(167, 139, 250, 0.35),
    0 0 45px rgba(126, 28, 253, 0.25),
    inset 0 0 25px rgba(167, 139, 250, 0.06) !important;
  transition: box-shadow .6s ease, border-color .6s ease, background-color .6s ease;
  animation: neonPulse 3.5s ease-in-out infinite;
}
.shadow-box-m:hover{
  box-shadow:
    0 0 30px rgba(167, 139, 250, 0.55),
    0 0 65px rgba(126, 28, 253, 0.4),
    inset 0 0 35px rgba(167, 139, 250, 0.1) !important;
}
/* ==========================================================
   BOTONES MORADOS — texto SIEMPRE #F3F4F8, sin excepción
   Debe ir al final del archivo para ganar empates de especificidad
   ========================================================== */
#nav .elementor-button, #nav .elementor-button *,
#navmobile .elementor-button, #navmobile .elementor-button *,
#about .elementor-button, #about .elementor-button *,
#ecosystems .elementor-button, #ecosystems .elementor-button *,
#articles .elementor-button, #articles .elementor-button *,
#technology .elementor-button, #technology .elementor-button *,
#team .elementor-button, #team .elementor-button *,
#thenetworkeffect .elementor-button, #thenetworkeffect .elementor-button *,
#partners .elementor-button, #partners .elementor-button *,
#whoweare .elementor-button, #whoweare .elementor-button *,
#contact .elementor-button, #contact .elementor-button *,
#cntct .elementor-button, #cntct .elementor-button *,
#l1 .elementor-button, #l1 .elementor-button *,
#l2 .elementor-button, #l2 .elementor-button *,
#l3 .elementor-button, #l3 .elementor-button *,
#teopn .elementor-button, #teopn .elementor-button *,
#asseenin .elementor-button, #asseenin .elementor-button *{
  color: #F3F4F8 !important;
}
html.dark-mode #about .elementor-button, html.dark-mode #about .elementor-button *,
html.dark-mode #ecosystems .elementor-button, html.dark-mode #ecosystems .elementor-button *,
html.dark-mode #articles .elementor-button, html.dark-mode #articles .elementor-button *,
html.dark-mode #technology .elementor-button, html.dark-mode #technology .elementor-button *,
html.dark-mode #team .elementor-button, html.dark-mode #team .elementor-button *,
html.dark-mode #thenetworkeffect .elementor-button, html.dark-mode #thenetworkeffect .elementor-button *,
html.dark-mode #partners .elementor-button, html.dark-mode #partners .elementor-button *{
  color: #F3F4F8 !important;
}
/* ==========================================================
   SHADOW BOX B
   Modo claro: conserva su imagen de fondo (la que ya tiene en Elementor, sin tocar)
   Modo oscuro: sin imagen, mismo look que .shadow-box (blur + neon)
   ========================================================== */
html.dark-mode .shadow-box-b{
  background-image: none !important;
  background: rgba(15, 8, 30, 0.35) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  box-shadow:
    0 0 20px rgba(167, 139, 250, 0.35),
    0 0 45px rgba(126, 28, 253, 0.25),
    inset 0 0 25px rgba(167, 139, 250, 0.06) !important;
  transition: box-shadow .6s ease, border-color .6s ease, background-color .6s ease, background-image .6s ease;
  animation: neonPulse 3.5s ease-in-out infinite;
}
html.dark-mode .shadow-box-b:hover{
  box-shadow:
    0 0 30px rgba(167, 139, 250, 0.55),
    0 0 65px rgba(126, 28, 253, 0.4),
    inset 0 0 35px rgba(167, 139, 250, 0.1) !important;
}/* End custom CSS */