/*
Theme Name: ChipWeb x JoseMoraConsultores - Hello Elementor Child
Theme URI: https://chipweb.es
Template: hello-elementor
Author: Lolo Marchal
Author URI: https://lolomarchal.com
Description: ChipWeb x JoseMoraConsultores – Hello Elementor Child es un tema hijo de Hello Elementor, un tema de WordPress ligero y minimalista creado específicamente para funcionar a la perfección con el plugin constructor de sitios Elementor. Este tema hijo ha sido creado por Lolo Marchal de ChipWeb.es y está pensado para usuarios que buscan una web flexible, fácil de usar y altamente personalizable. Optimizado para el rendimiento, proporciona una base sólida sobre la que los usuarios pueden construir sus propios diseños únicos utilizando el constructor visual de arrastrar y soltar de Elementor. Su sencillez y flexibilidad lo convierten en una gran elección tanto para principiantes como para creadores web con experiencia.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1793032063
Updated: 2026-10-26 17:27:43

*/

/**** Efectos liquid-glass para contenedores de Elementor ****/

.sticky-header {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

.lolo-liquid-glass {
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
}

.lolo-liquid-glass-hoverfx {
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    transition:
        -webkit-backdrop-filter .4s ease,
        backdrop-filter .4s ease,
        background-color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.lolo-liquid-glass-hoverfx:hover,
.lolo-liquid-glass-hoverfx:active {
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
}


/**** Main Menu ****/

#lolo-menu-nuevo .e-n-menu-title-text {
    white-space: nowrap;
}

#lolo-menu-nuevo .e-n-menu-title-text::after {
    content: "NUEVO";
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 100px;
    background: #309E47;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    vertical-align: middle;
}

#lolo-menu-inicio .e-n-menu-title-text {
    white-space: nowrap;
}

#lolo-menu-inicio .e-n-menu-title-text::after {
    content: "INICIO";
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 100px;
    background: #2E4C9B; /* azul de marca, para distinguirlo del verde de NUEVO */
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    vertical-align: middle;
}

/**** Icon boxes ****/

.lolo-icon-box-1 {
	-webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
}

.lolo-icon-box-1 span.elementor-icon {
	background-color: #DEEFE4;
    padding: 10px;
    border-radius: 12px;
}

.lolo-icon-box-2 span.elementor-icon {
	background-color: #FFFFFF;
    padding: 10px;
    border-radius: 12px;
}

lolo-icon-box-3 {
	-webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
}

.lolo-icon-box-3 span.elementor-icon {
	background-color: #1d70b814;
    padding: 10px;
    border-radius: 12px;
}


.lolo-traviria-cita {
  background-color: #1D70B7; /* respaldo si el degradado no carga */
  background-image: linear-gradient(to bottom left, #0B2F4D 0%, #1D70B7 60%, #53BAAA 100%);
}


/**** Degradado en movimiento ****/


@property --lolo-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 85%;
}

@property --lolo-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%;
}

.lolo-jm-background {
    background:
        radial-gradient(55% 90% at var(--lolo-x) var(--lolo-y), #237A3E 0%, rgba(35, 122, 62, 0) 70%),
        linear-gradient(to bottom left, #2E4C9B 0%, #1B2B5E 100%);
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .lolo-jm-background {
        animation: lolo-drift 8s ease-in-out infinite alternate;
    }
}

@keyframes lolo-drift {
    from { --lolo-x: 85%; --lolo-y: 5%; }	
    to   { --lolo-x: 62%; --lolo-y: 55%; }
}


/**** Partículas hero Traviria *****/

.lolo-hero-particles { position: relative; overflow: hidden; }
.lolo-hero-particles > *:not(canvas) { position: relative; z-index: 1; }

@property --lolo-tx { syntax: '<percentage>'; inherits: false; initial-value: 85%; }
@property --lolo-ty { syntax: '<percentage>'; inherits: false; initial-value: 5%; }

.lolo-traviria-background {
    background:
        radial-gradient(55% 90% at var(--lolo-tx) var(--lolo-ty), #53BAAA 0%, rgba(83, 186, 170, 0) 70%),
        linear-gradient(to bottom left, #1D70B7 0%, #0B2F4D 100%);
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .lolo-traviria-background { animation: lolo-tdrift 16s ease-in-out infinite alternate; }
}

@keyframes lolo-tdrift {
    from { --lolo-tx: 85%; --lolo-ty: 5%; }
    to   { --lolo-tx: 62%; --lolo-ty: 55%; }
}

@property --lolo-hx  { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --lolo-hy  { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --lolo-hx2 { syntax: '<percentage>'; inherits: false; initial-value: 85%; }
@property --lolo-hy2 { syntax: '<percentage>'; inherits: false; initial-value: 15%; }
@property --lolo-hy3 { syntax: '<percentage>'; inherits: false; initial-value: 60%; }

.lolo-traviria-hero {
  background-color: #0A2740;
  background-image:
    radial-gradient(80% 70% at var(--lolo-hx) var(--lolo-hy), rgba(83,186,170,.65) 0%, rgba(83,186,170,.25) 40%, rgba(83,186,170,0) 75%),
    radial-gradient(50% 50% at var(--lolo-hx2) var(--lolo-hy2), rgba(29,112,183,.60) 0%, rgba(29,112,183,0) 70%),
    linear-gradient(180deg, #071C30 0%, #0A2740 50%, #0B2F4D 100%);
  animation: lolo-hero-drift 18s ease-in-out infinite;
}

@keyframes lolo-hero-drift {
  0%, 100% { --lolo-hx: 50%; --lolo-hy: 100%; --lolo-hx2: 90%; --lolo-hy2: 10%; }
  50%      { --lolo-hx: 60%; --lolo-hy: 88%;  --lolo-hx2: 70%; --lolo-hy2: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .lolo-traviria-hero { animation: none; }
}

/*************** BOTONES PÍLDORA ANCLA ****************/

/* Compensa la cabecera pegajosa al saltar al ancla */
#areas, #sector, #trayectoria, #equipo, #contacto { scroll-margin-top: 110px; }


.lolo-pildora-azul .elementor-button,
.lolo-pildora-verde .elementor-button {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 100px;
  padding: 8px 20px 8px 8px;
  color: #16213A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 8px 22px rgba(22,33,58,.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.lolo-pildora-azul .elementor-button-content-wrapper,
.lolo-pildora-verde .elementor-button-content-wrapper {
  align-items: center;
  gap: 10px;
}

/* Círculo del icono */
.lolo-pildora-azul .elementor-button-icon,
.lolo-pildora-verde .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 100px;
  color: #fff;
}
.lolo-pildora-azul .elementor-button-icon  { background: linear-gradient(135deg, #2E4C9B, #1B2B5E); }
.lolo-pildora-verde .elementor-button-icon { background: linear-gradient(135deg, #309E47, #237A3E); }

.lolo-pildora-azul .elementor-button-icon i,
.lolo-pildora-verde .elementor-button-icon i { font-size: 16px; }
.lolo-pildora-azul .elementor-button-icon svg,
.lolo-pildora-verde .elementor-button-icon svg { width: 16px; height: 16px; fill: #fff; }

/* Hover y teclado */
.lolo-pildora-azul .elementor-button:hover,
.lolo-pildora-verde .elementor-button:hover {
  background: rgba(255,255,255,.85);
  color: #16213A;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(22,33,58,.18);
}
.lolo-pildora-azul .elementor-button:focus-visible,
.lolo-pildora-verde .elementor-button:focus-visible {
  outline: 2px solid #2E4C9B;
  outline-offset: 3px;
}

/* Estado activo (lo pone el script al hacer scroll): va DESPUÉS del hover */
.lolo-pildora-azul.is-active .elementor-button,
.lolo-pildora-verde.is-active .elementor-button {
  background: rgba(255,255,255,.95);
  color: #2E4C9B;
  box-shadow: 0 0 0 2px #2E4C9B, 0 10px 26px rgba(46,76,155,.28);
}

	.lolo-anclas-fila {
		-webkit-backdrop-filter: blur(12px) saturate(180%);
    	backdrop-filter: blur(12px) saturate(180%);
	}
	

@media (max-width: 1024px) {

  /* Fila con scroll horizontal */

	.e-con.lolo-anclas-fila {
    --flex-wrap: nowrap;
    --overflow: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: safe center;
    gap: 8px;
    padding: 12px 16px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .e-con.lolo-anclas-fila::-webkit-scrollbar { display: none; }

  /* Las píldoras no se encogen ni se parten */
  .e-con .elementor-widget.lolo-pildora-azul,
  .e-con .elementor-widget.lolo-pildora-verde {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: start;
  }
  .lolo-pildora-azul .elementor-button,
  .lolo-pildora-verde .elementor-button {
    padding: 6px 16px 6px 6px;
    font-size: 13px;
    white-space: nowrap;
  }
  .lolo-pildora-azul .elementor-button-content-wrapper,
  .lolo-pildora-verde .elementor-button-content-wrapper { flex-wrap: nowrap; }

  /* Círculo del icono, versión compacta */
  .lolo-pildora-azul .elementor-button-icon,
  .lolo-pildora-verde .elementor-button-icon { width: 30px; height: 30px; }
  .lolo-pildora-azul .elementor-button-icon i,
  .lolo-pildora-verde .elementor-button-icon i { font-size: 14px; }
  .lolo-pildora-azul .elementor-button-icon svg,
  .lolo-pildora-verde .elementor-button-icon svg { width: 14px; height: 14px; }
}


/* Traviria: paleta azul + turquesa */
.lolo-anclas-traviria .lolo-pildora-azul .elementor-button-icon  { background: linear-gradient(135deg, #1D70B7, #0F4C7D); }
.lolo-anclas-traviria .lolo-pildora-verde .elementor-button-icon { background: linear-gradient(135deg, #53BAAA, #1F7A6D); }

.lolo-anclas-traviria .lolo-pildora-azul.is-active .elementor-button,
.lolo-anclas-traviria .lolo-pildora-verde.is-active .elementor-button {
  color: #0F4C7D;
  box-shadow: 0 0 0 2px #1D70B7, 0 10px 26px rgba(29,112,183,.28);
}

/* Compensa la cabecera pegajosa al saltar al ancla */
#que-es, #funcionalidades, #video, #beneficios, #faq, #demo { scroll-margin-top: 110px; }



/*************** CAJAS DE ICONO Y CONTACTO  ****************/



.lolo-contacto-fila .elementor-icon-box-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lolo-contacto-fila:focus-within .elementor-widget-container {
  outline: 2px solid #fff;
  outline-offset: 3px;
}