@font-face{font-family:'Proxima Nova Black';src:url('/wp-content/font/proximanova_black.otf') format('opentype'),url('/wp-content/font/proximanova_black.ttf') format('truetype');font-weight:900;font-style:normal}@font-face{font-family:'Proxima Nova Black Italic';src:url(/wp-content/font/proximanova_blackit.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Proxima Nova Bold';
    src: url('https://magnet360.de/font/proximanova_bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Proxima Nova Extra Bold';
    src: url('https://magnet360.de/wp-content/font/proximanova_extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Proxima Nova Light';
    src: url('/wp-content/font/proximanova_light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Proxima Nova Regular';
    src: url('/wp-content/font/proximanova_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Proxima Nova Bold Italic';
    src: url('/wp-content/font/proximanova_boldit.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
  }
  
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

@media only screen and (max-width: 980px) {
  body {
    position: relative !important;
	max-width: 100% !important;
  }
}
  /* Ejemplo de uso */
  body {
    font-family: 'Proxima Nova Regular', sans-serif;
  }
  
  h1 {
    font-family: 'Proxima Nova Black';
  }
  
  h2 {
    font-family: 'Proxima Nova Extra Bold';
    font-weight:900;
    font-size:50px;
    line-height:58px;
    text-transform:uppercase;
  }
  h3 {
        font-family: 'Proxima Nova Extra Bold';
        font-size: 18px;
      font-weight: 800;
      line-height: 26px;
      letter-spacing: 1px;	
      text-align: center;
      text-transform:uppercase;
  }
  h4 {
        font-family: 'Proxima Nova Extra Bold';
        font-size: 28px;
      font-weight: 800;
      line-height: 36px;
      letter-spacing: 1px;	
      text-align: center;
  }
  .highlight-red {
    font-family: 'Proxima Nova Extra Bold';
    font-weight: 800;
    /*line-height: 26px;*/
    letter-spacing: 1px;	
    text-align: center;
    text-transform: uppercase;
    color: #fff!important; /* Color del texto */
    display: inline-block; /* Ajusta el tamaño del fondo al texto */
    position: relative; /* Necesario para el pseudo-elemento */
    z-index: 1; /* Asegura que el texto esté por encima del fondo */
    background-color: #BE1E2D; /* Color del fondo rojo */
    border-radius:3px;
    padding-left: 3px;
    padding-right: 3px;
  }
  
  
  .highlight-red-tit {
    font-family: 'Proxima Nova Extra Bold';
    font-weight: 800;
    /*line-height: 26px;*/
    letter-spacing: 1px;	
    text-align: center;
    text-transform: uppercase;
    color: #fff!important; /* Color del texto */
    display: inline-block; /* Ajusta el tamaño del fondo al texto */
    position: relative; /* Necesario para el pseudo-elemento */
    z-index: 1; /* Asegura que el texto esté por encima del fondo */
    background-color: #BE1E2D; /* Color del fondo rojo */
    border-radius:3px;
    padding-left: 3px;
    padding-right: 3px;
  }
  
  
  p {
    font-family: 'Proxima Nova Regular';
    font-size:18px;
    font-weight:400;
  
  }
  
  .white {
      color: #fff!important;
  }
  .blue {
    color: #213154;
  }
  .red {
    color: #BE1E2D;
  }


/* BTNS */
  
  .btn {
      font-family: 'Proxima Nova Extra Bold';
      font-size: 18px;
      font-weight: 900;
      color:#fff;
      line-height: 25px;
      letter-spacing: 1px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      background: #FFFFFF;
      background: linear-gradient(223deg, #213154 0%, #E92B40 68.34%);
      border:none;
      padding: 17px 20px 17px 20px!important;
      border-radius:10px;
      text-transform:uppercase;
      max-width:100%;
	  width: 530px;
      margin: 0 auto !important;
      display: flex; 
      font-family: 'Proxima Nova Extra Bold';
      font-size: 18px;
      font-weight: 900; 
}
  
.btn:hover {
      background: linear-gradient(45deg, #213154 0%, #E92B40 65.49%);
	    padding: 17px 20px 17px 20px!important;
      max-width:100%;
  }
  
  .btn .img-btn {
      margin-left: 20px;
      transition: transform 0.3s ease; /* Transición suave */
	  margin-top:5px;
  }
  
  .btn:hover .img-btn {
      transform: translateX(-10px); /* Mueve la imagen 5px hacia la izquierda */
  }
  .btn-red {
    color:#BE1E2D;
    line-height: 25px;
    letter-spacing: 1px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    background: linear-gradient(89deg, #FFF 49.45%, #E3E3E3 99.96%);
    border:none;
    padding: 17px 20px 17px 20px!important;
    border-radius:10px;
    text-transform:uppercase;
    max-width:100%;
	  width: 530px;
      margin: 0 auto !important;
      display: flex; 
      font-family: 'Proxima Nova Extra Bold';
      font-size: 18px;
      font-weight: 900;
}
.btn-red:hover {
    background: linear-gradient(89deg, #E3E3E3 18.41%, #FFF 99.96%);    padding: 17px 20px 17px 20px!important;
    max-width:100%;
	width: 530px;
    margin: 0 auto !important;

}

.btn-red .img-btn {
    margin-left: 20px;
    transition: transform 0.3s ease; /* Transición suave */
	margin-top:5px;
}

.btn-red:hover .img-btn {
    transform: translateX(-10px); /* Mueve la imagen 5px hacia la izquierda */
}

/* Solo móviles y tablets (pantallas de hasta 768px) */
@media (max-width: 768px) {
  .btn {
    font-size: 14px;
	width:100%!important;
	max-width:100%!important;
    padding:14px 15px 14px 15px!important;
  }

  .btn-red {
    font-size: 14px;
    padding:14px 15px 14px 15px!important;

  }
}

/* Centrado vertical solo para textos a la izquierda */
.vertical-center-reverse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Solo centramos el contenido de la primera columna (texto a la izquierda) */
.vertical-center-reverse > .et_pb_column:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Reversión para móviles: evitar que las columnas apiladas se deformen */
@media (max-width: 980px) {
  .vertical-center-reverse {
    display: block !important;
  }

  .vertical-center-reverse > .et_pb_column:first-child {
    display: block !important;
  }
}

/* Centrado vertical para columnas dentro de una fila específica */
.vertical-center-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Asegurarse de que las columnas se comporten como columnas */
.vertical-center-row > .et_pb_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*BOX ANIMATION*/

.animated-border-wrapper2 {
    --theme-color-1: #213154;
    --theme-color-2: #E92B40;
    --border-angle: 0deg;
    position: relative;
    --border-thickness: 3px;
    border-radius: 50%;
    border: var(--border-thickness) solid transparent;
    background: linear-gradient(white, white) padding-box, conic-gradient(from var(--border-angle), var(--theme-color-1), var(--theme-color-2), var(--theme-color-1)) border-box;
    animation: border-angle-rotate 4s infinite 
linear;
    box-shadow: 0 0 5px 0 rgba(0, 123, 255, 0.4), 0 0 5px 0 rgba(220, 53, 69, 0.4);
}
 .pulse-effect {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  background: rgb(190, 30, 45);
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
  padding: 5px;
/*  margin-left: 40%;*/
}

.pulse-effect::before,
.pulse-effect::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: rgba(190, 30, 45, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(2.2); /* Comienza grande */
  opacity: 0;
  z-index: -1;
  animation: pulse-inward-animation 2.5s ease-out infinite;
}

.pulse-effect::before {
  animation-delay: 0s;
}

.pulse-effect::after {
  animation-delay: 1.25s;
}

@keyframes pulse-inward-animation {
  0% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
  30% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}
@property --border-angle {
    syntax: "";
    initial-value: 0deg;
    inherits: false;
}
@keyframes border-angle-rotate {
    from {
        --border-angle: 0deg;
    }
    to {
        --border-angle: 360deg;
    }
}

.animated-border-wrapper {
    --theme-color-1: #213154;
    --theme-color-2: #E92B40;
    --border-angle: 0deg;
    
    position: relative;
    width: 100%; 
    --border-thickness: 3px; 
    border-radius: 35px; 
    border: var(--border-thickness) solid transparent; 
    
    background: 
        linear-gradient(white, white) padding-box, 
        conic-gradient(from var(--border-angle), var(--theme-color-1), var(--theme-color-2), var(--theme-color-1)) border-box;

    animation: border-angle-rotate 4s infinite linear;
    
    box-shadow: 0 0 5px 0 rgba(0, 123, 255, 0.4), 0 0 5px 0 rgba(220, 53, 69, 0.4);

}

.animated-border-box {
    background-color: #111; 
    border-radius: 30px;
    padding: 2px; 
}

.content-card {
    background: rgba(0, 0, 0, 0.4); 
    color: #fff;
    padding: 20px; 
    border-radius: 35px; 
    min-height: 200px;
    box-sizing: border-box;
    height: 311px;
/*    width:370px;*/
}

.content-card h3 {
    margin-top: 10px;
    color: #fff!important;;

}
.content-card p {
    color:#fff;

}

/* ACCORDION START */

.pa-accordion .et_pb_toggle_title {
  min-height: 35px;
  display: flex;
  align-items: center;
}


.pa-accordion .et_pb_toggle_title {
  text-align: left;
 /* padding-left: 24px;  o lo que uses para tu diseño 
  padding-right: 24px;*/
}


.pa-accordion .et_pb_toggle_title .custom-icon {
  margin-left: auto;
  align-self: center;
}



.et_pb_toggle_close .et_pb_toggle_title:before {
	display:none;
}


.et_pb_toggle_open .et_pb_toggle_title:before {
		display:none;
} 

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
    /*  display: block!important;
      content: "\e04f" !important;*/
  }
  .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
      color: transparent !important;
  }
  .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:hover:before {
      color: transparent !important;
  }
  .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
    /*   display: block!important;
      content: "\e04f" !important;*/
  }
  .et_pb_toggle_open {
/* shadow_magnet */
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 0px 30px 0px rgba(0, 0, 0, 0.30);!important;
background: linear-gradient(223deg, #213154 0%, #E92B40 68.34%)!important;
}
@media (max-width: 980px) {
.et_pb_accordion .et_pb_toggle
 {
    margin-bottom: 20px;
    position: relative;
}
}

/*  ACCORDION START*/

.et_pb_toggle_content {
    padding-top: 20px !important;
}

@media (min-width: 981px) {
    .et_pb_gutters3 .et_pb_column_1_4 .et_pb_module, .et_pb_gutters3.et_pb_row .et_pb_column_1_4 {
        margin-bottom: 20px!important;
    }
    .testimonial-content {
      min-height: 1600px;
}
    .et_pb_toggle {
        margin-bottom: 20px!important;
    }
}
.et_pb_accordion_0.et_pb_accordion .et_pb_toggle_content, .et_pb_accordion_1.et_pb_accordion .et_pb_toggle_content, .et_pb_accordion_2.et_pb_accordion .et_pb_toggle_content {
  color: #ffffff!important;
}
.et_pb_toggle.et_pb_toggle_close {
  position: relative;
  border-radius: 10px;
  padding: 1rem;
  background-color: #f5f5f5; /* fondo del contenido */
  z-index: 0;
  overflow: hidden;
}

.et_pb_toggle.et_pb_toggle_close::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* grosor del borde */
  border-radius: 10px;
  background: linear-gradient(to left, #213154 0%, #E92B40 65%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}

/*  ACCORDION END*/
 /* ACCORDION END*/

 /*  ICONS TABS  START*/

/* Asegura que el título del toggle tenga espacio a la derecha */
.et_pb_toggle_title {
  position: relative;
  padding-right: 45px !important;
  line-height: 26px;
}

/* Contenedor del ícono */
.et_pb_toggle_title .custom-icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.3s ease-in-out;
}

/* Estado cerrado (flecha hacia abajo) */
.et_pb_toggle.et_pb_toggle_close .custom-icon {
  background-image: url('https://magnet360.de/wp-content/uploads/2025/12/arrow_red.svg');
	width:34px;
}

/* Estado abierto (flecha hacia arriba) */
.et_pb_toggle.et_pb_toggle_open .custom-icon {
  background-image: url('https://magnet360.de/wp-content/uploads/2025/12/arrow_downward_alt-1.svg');
	width:34px;
}
/*  ICONS TABS  END*/

/* IMG ANIMATION START */

.mobile-mockup-wrapper {
  position: relative;
  width: 100%;
  max-width: 251px;
  margin: 0 auto;
}

.mockup-image {
  width: 100%;
  height: auto;
  display: block;
}

.mockup-video {
	position: absolute;
    top: 12%;
    left: 18px;
    width: 85%;
    height: 80%;
    object-fit: cover;
    border-radius: 25px;
    pointer-events: none;
	border: 1px solid #8899A8;
}
/* IMG ANITAMTION END */

/* MAGNET SECTION START */

  .magnet360-section {
    padding-top: 50px;
    background: transparent;
    max-width: 100%;
    padding-bottom: 50px;
  }

@media only screen and (max-width: 767px) {
  .magnet360-section {
    padding: 0px !important;
	max-width:100%;
}	  
  .magnet360-inner  {
    gap: 0px;
  }
}


  .magnet360-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
  }

  .magnet360-col {
    flex: 1;
  }

  .magnet360-col-left,
  .magnet360-col-right {
    max-width: 380px;
  }

  .magnet-item h3 {
    font-family: "Proxima Nova Extra Bold", system-ui, sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #213154;
    margin-bottom: 10px;
    text-align:left;
  }

  .magnet-item p {
    font-size: 18px;
    line-height: 1.6;
    color: #213154;
    margin-bottom: 28px;
    text-align:left;

  }

  .magnet360-center {
    flex: 0 0 440px;
    display: flex;
    justify-content: center;
  }

  .magnet-wheel-wrapper {
    position: relative;
    width: 440px;
    height: 439px;
  }

  .magnet-wheel-svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .wheel-icon {
    position: absolute;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
  }

  .wheel-icon-top-left {
    top: 22%;
    left: 36%;
  }

  .wheel-icon-middle-left {
    top: 50%;
    left: 18%;
  }

  .wheel-icon-bottom-left {
    top: 78%;
    left: 33%;
  }

  .wheel-icon-top-right {
    top: 22%;
    left: 64%;
  }

  .wheel-icon-middle-right {
    top: 50%;
    left: 83%;
  }

  .wheel-icon-bottom-right {
    top: 78%;
    left: 67%;
  }

  @media (max-width: 980px) {
    .magnet360-inner {
      flex-direction: column;
      align-items: center;
    }

    .magnet360-center {
      order: -1;
    }

    .magnet360-col-left,
    .magnet360-col-right {
      max-width: 100%;
    }
  }
  .magnet-center-text {
  position: absolute!important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-family: "Proxima Nova Extra Bold", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.4;
  max-width: 140px;
  z-index: 999!important;
}
.magnet-item.active h3,
.magnet-item.active p {
  color: #E92B40 !important;
}



/* ============================
   MAGNET SECTION - FINAL FIX
   ============================ */

/* --- Texto activo en rojo --- */
.magnet-item.active h3,
.magnet-item.active p,
.magnet-item.active p strong {
    color: #BE1E2D !important;
}

/* Transiciones suaves */
.magnet-item h3,
.magnet-item p {
    transition: color 0.25s ease;
}

/* ======================================================
   1) EFECTO / RUEDA (SVG + PULSO) → SIEMPRE EN EL FONDO
   ====================================================== */
.magnet-pulse-wrapper,
.magnet-wheel-wrapper,
.magnet360-center {
    position: relative;
    z-index: 1 !important;  /* fondo */
}

/* El SVG solo visual, no intercepta clics */
.magnet-wheel-svg {
    position: relative;
    z-index: 1;
    pointer-events: none !important;
}

/* ===========================================
   2) ICONOS SOBRE LA RUEDA (clickeables)
   =========================================== */
.wheel-icon {
    position: absolute;
    z-index: 5 !important;   /* sobre el efecto */
    pointer-events: auto;
}

/* ===========================================
   3) TEXTO CENTRAL DENTRO DEL CIRCULO AZUL
      → ESTE ES EL QUE FALTABA
   =========================================== */
.magnet-center-text {
    position: relative;
    z-index: 20 !important;  /* lo ponemos por encima del efecto y de los iconos */
    pointer-events: none;    /* para no interferir */
}

/* ===========================================
   4) COLUMNAS LATERALES → CIMA DE TODO
   =========================================== */
.magnet360-col {
    position: relative;
    z-index: 10 !important; /* sobre el efecto pero debajo del título central */
}

/* Efecto de color rojo al activar un ítem */
.magnet-item.active h3,
.magnet-item.active p {
  color: #BE1E2D !important;
}
/* IMG MAGNET EFFECT */

.magnet-pulse-wrapper {
  position: relative;
  display: inline-block;
  max-width: 500px;
  margin: 0 auto;
  z-index: -12;
}

.magnet-pulse-wrapper::before,
.magnet-pulse-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 1600px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  z-index: -13;
  background: radial-gradient(
    circle,
    #dddddd 0%,
    #dddddd 25%,
    #e4e4e4 25%,
    #e4e4e4 50%,
    #ededed 50%,
    #ededed 75%,
    #f7f7f7 75%,
    #f7f7f7 100%
  );
  opacity: 0;
  animation: magnet-ring-pulse 3.5s infinite ease-out;
}

.magnet-pulse-wrapper::after {
  animation-delay: 1.75s;
}

/* .magnet-pulse-wrapper img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 700px;
  height:auto!important;
  border-radius: 50%;
}*/

/* Animación */
@keyframes magnet-ring-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}
/* IMG MAGNET EFFECT */

/* MAGNET SECTION END */


/* SLIDER 2 START */
.custom-swiper {
position: relative;
max-width: 100%;
min-height: 500px; /* Añade esta línea si el contenedor principal es demasiado corto */
margin: auto;
padding: 100px 0;
overflow: visible !important;
}

.swiper-wrapper {
display: flex;
}

.swiper-slide {
width: 100% !important;
}

.slide-wrapper {
display: flex;
align-items: center; 
flex-wrap: wrap;
position: relative;
}

.slide-image {
margin-right: -80px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center; 
max-height: 100%;
width: 282px; 
height: 428px; 
margin-left: 60px;
}

/* REGLAS PARA IMÁGENES ESTÁTICAS (Slides 2-7) */
.slide-image img {
width: 100%; 
height: 100%; 
object-fit: cover; 
border-radius: 16px;
}


/* REGLAS PARA EL MÓDULO DE VIDEO (Slide 1) */
.slide-image .et_pb_module.ba_video_popup,
.slide-image .et_pb_module_inner,
.slide-image .dtq-module.dtq-video-popup {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

/* MINIATURA DE FONDO INYECTADA PARA EL VIDEO */
.slide-image .dtq-video-popup-wrap {
    background-image: url('https://magnet360.de/wp-content/uploads/2025/12/video-1.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;    
    width: 100%;
    height: 100%;
    overflow: hidden; 
    border-radius: 16px; 
    position: relative; 
    display: flex; 
    justify-content: center;
    align-items: center;
}
/* MINIATURA para SOCIALWERK */
.slide-socialwerk .slide-image .dtq-video-popup-wrap {
    background-image: url('https://magnet360.de/wp-content/uploads/2025/12//video-2.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;    
    width: 100%;
    height: 100%;
    overflow: hidden; 
    border-radius: 16px; 
    position: relative; 
    display: flex; 
    justify-content: center;
    align-items: center;
}
/* MINIATURA para SCHEER */
.slide-scheer .slide-image .dtq-video-popup-wrap {
    background-image: url('https://magnet360.de/wp-content/uploads/2025/12/video-3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* MINIATURA para BOHNY */
.slide-bohny .slide-image .dtq-video-popup-wrap {
    background-image: url('https://magnet360.de/wp-content/uploads/2025/12/video-4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* MINIATURA para PROTIS */
.slide-protis .slide-image .dtq-video-popup-wrap {
    background-image: url('https://magnet360.de/wp-content/uploads/2025/12/video-5.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* AJUSTES PARA CORREGIR LA DEFORMIDAD Y CENTRADO DEL BOTÓN DE PLAY */
.slide-image .pulse-box-button {
    width: 70px !important; /* Forzamos un tamaño de contenedor para el botón */
    height: 70px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Asegura la forma redonda si el botón lo requiere */
}

/* Limpieza de overlays del módulo de video */
.slide-image .dtq-video-popup-wrap:before,
.slide-image .dtq-video-popup-wrap:after {
    content: none !important;
    display: none !important;
}
/* FIN REGLAS PARA MÓDULO DE VIDEO */


.slide-content {
background-color: #E5E7EB;
border-radius: 20px;
/*margin:50px;*/
padding: 30px 30px 30px 160px;
flex: 1;
position: relative;
z-index: 1;
font-size: 18px;
color: #213154;
transform: translateX(-50px);
text-align: left!important;
text-justify: left!important;

}
.slide-content .slide-text p {
  display: inline-block;
  text-align: left;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  font-size: 18px;
  color: #213154;
  margin-left:0px;
}

.slide-content .slide-text a {
  font-size: 18px;
  color: #213154;
  text-decoration: underline;
  padding-left: 5px;
}
.slide-content .slide-text h3 {
  color: #213154!important;
}

.slide-icons {
display: flex;
gap: 20px;
margin: 15px 0;
flex-wrap: wrap;
}

.icon-box {
background: #fff;
border-radius: 10px;
padding: 12px;
font-size: 18px;
flex: 1 1 30%;
min-width: 160px;
color: #213154;

}

.icon-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
color: #213154;

}

.icon-img {
width: 34px;
height: 34px;
height: auto;
flex-shrink: 0;
}

blockquote {
font-style: italic;
color: #213154;
margin: 20px 0;
border-left: 0px solid #c4001a;
padding-left: 0px;
font-size: 18px;
}

.read-more {
color: #c4001a!important;
font-weight: bold;
text-decoration: none;
font-size: 18px;

}

/* Flechas */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 10;
}

.swiper-button-prev img,
.swiper-button-next img {
width: 100%;
height: auto;
display: block;
}

.swiper-button-prev {
left: -180px;
}

.swiper-button-next {
right: -180px;
}

/* Dots */
.swiper-pagination {
text-align: center;
margin-top: 30px;
position: relative;
z-index: 10;
}

.swiper-pagination-bullet {
background: #D9D9D9!important;
opacity: 0.4;
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin: 0 4px;
}

.swiper-pagination-bullet-active {
opacity: 1;
background:#c4001a!important;
}
/* Ocultar flechas por defecto de Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
display: none !important;
}

/* Forzar que solo el slide activo sea visible */
.swiper-slide {
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease-in-out;
}

.swiper-slide-active {
opacity: 1;
pointer-events: auto;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: -50px !important;
  }


.pulse-effect-white {
    position: relative;
    display: inline-block;
    width: 70px;
    height: auto;
    max-height:70px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    z-index: 99;
    padding: 5px;
}

.mfp-container { 
	  height:auto!important;
}
.dtq-video-open .mfp-iframe-holder .mfp-close {
    top: 50px !important;
	z-index:9;
}
/* Centrado total del popup */
.mfp-wrap,
.mfp-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  margin-top:0px!important;
  padding-top:0px!important;
}

/* Contenedor del contenido */
.mfp-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 90vw !important;
  padding: 0 0px !important; /* algo de margen en mobile */
  box-sizing: border-box !important;
}

/* iFrame con ratio vertical 9:16 */
.mfp-content iframe[src*="youtube.com/embed"] {
  aspect-ratio: 9 / 16 !important;
  width: 100% !important;
  max-width: 400px !important;
  height: auto !important;
  border: none !important;
  display: block !important;
  margin: 0 auto !important;
  background: #000 !important;
}

@media (min-width: 1025px) {
  .mfp-wrap,
  .mfp-container {
    padding-left: 40% !important;
	padding-top:0!important;
  }
}

/* SLIDER 2 END */

/* LOGOS EFFECT */
.logo-carousel .slick-list {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}



/* IMG TEXT VERTICAL ALIGN START*/

/* Centrado vertical solo para textos a la izquierda */
.vertical-center-reverse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Solo centramos el contenido de la primera columna (texto a la izquierda) */
.vertical-center-reverse > .et_pb_column:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Reversión para móviles: evitar que las columnas apiladas se deformen */
@media (max-width: 980px) {
  .vertical-center-reverse {
    display: block !important;
  }

  .vertical-center-reverse > .et_pb_column:first-child {
    display: block !important;
  }
}

/* Centrado vertical para columnas dentro de una fila específica */
.vertical-center-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Asegurarse de que las columnas se comporten como columnas */
.vertical-center-row > .et_pb_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* IMG TEXT VERTICAL ALIGN END*/

/* CONTACT SECTION START*/

.contact-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: nowrap;
  padding: 30px 0;
}

.contact-card {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 15px 10px;
  border-radius: 16px;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: auto;
  max-width: 100%;
  text-align: left;
  flex-shrink: 0;
}

.contact-card .name {
  color: #1a2a5f;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}
.contact-card h3 {
  text-align: left;
  margin: 0; /* opcional: elimina espacios extra si los hubiera */
  padding-bottom:0px!important;	
}

/* MOBILE + TABLETS */
@media (max-width: 1024px) {

    .contact-container {
        display: grid;
        gap: 20px;
    }

    .contact-card {
        width: 300px !important;
        max-width: 100% !important;
        min-width: 100% !important;
		padding:20px;
    }

}


/* CONTACT SECTION END*/

/* MAGNET ICONS START */

.icons-magnet-25  {
    bottom: 0px!important;
}

/* MAGNET ICONS END */


/* MOBILE START*/

@media (max-width: 768px) {
    h2 {
        font-size: 35px;
        line-height: 38px;
    }
}
#main-header {
    background-color: rgba(0, 0, 0, 0) !important; /* Fondo transparente */
    position: absolute !important;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
}
#page-container {
    padding-top: 0px !important;
}
.et_pb_section_0_tb_header.et_pb_section {
    background-color: rgba(0, 0, 0, 0) !important;
    position: absolute !important;
    width: 100%;
    z-index: 9999;
}

@media (max-width: 980px) {
    .et_pb_section .et_pb_section_1_tb_header .et_section_regular {
   		background-color: rgba(0, 0, 0, 0) !important;
        position: fixed !important;  /* Fija el menú en su posición */
        top: 0;
        left: 0;
        width: 100%;
    }

    .et_pb_section .et_pb_section_1_tb_header .et_section_regular {
        background-color: rgba(0, 0, 0, 0) !important;

    }

    .et_pb_section .et_pb_section_1_tb_header .et_section_regular {
        background-color: rgba(0, 0, 0, 0) !important;
        box-shadow: none !important; /* Elimina sombras */
    }
}

@media only screen and (max-width: 767px) {

h2 {
    font-family: 'Proxima Nova Extra Bold';
    font-weight:900;
    font-size:27px;
    line-height:38px;
    text-transform:uppercase;
    text-align: left!important;
  }
p {
/*    text-align: left!important;*/
  } 
  
h4 {
    text-align: left!important;
  } 
    
.highlight-red-tit {
text-align: left!important;
/*  line-height:22px;
    padding: 8px 5px 5px 8px;*/
  }
.magnet-pulse-wrapper img {
/*  height: 500px!important;*/
}
}
@media (max-width: 768px) {
    .wp-image-29148,
    .wp-image-29149,
    .wp-image-29150 {
        margin-right: 10px; /* separa hacia la derecha en mobile */
    }
}

/* MOBILE END*/


/* MIXED CODE */
/* =========================
   CONTACT FORM 7 – BUTTON (FINAL)
   ========================= */

.wpcf7-submit.btn {
  font-family: 'Proxima Nova Extra Bold', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 25px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  text-decoration: none !important;

  background: linear-gradient(223deg, #213154 0%, #E92B40 68.34%) !important;
  border: none !important;
  border-radius: 14px !important;

  padding: 20px 70px 20px 40px !important;
  width: 100% !important;

  display: block !important;
  position: relative !important;
  cursor: pointer !important;
  margin-top: 20px;

  text-align: center !important; /* ← ESTA ERA LA CLAVE */

  transition: background 0.3s ease !important;
}

/* Hover fondo */
.wpcf7-submit.btn:hover {
  background: linear-gradient(45deg, #213154 0%, #E92B40 65.49%) !important;
}

/* Ícono */
.wpcf7-submit.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  width: 30px;
  height: 20px;

  background-image: url("https://magnet360.de/wp-content/uploads/2025/12/Gruppe-1980.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transition: transform 0.3s ease;
}

/* Hover ícono */
.wpcf7-submit.btn:hover::after {
  transform: translateY(-50%) translateX(-10px);
}

/* =========================
   BOTÓN FORM – MAGNET360
   ========================= */

.btn.form {
  font-family: 'Proxima Nova Extra Bold', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: #fff;
  background: linear-gradient(223deg, #213154 0%, #E92B40 68.34%);
  border: none;
  border-radius: 14px;

  width: 230px;              /* ✅ ancho fijo */
  padding: 18px 24px;
  margin-top: 20px;

  display: inline-flex;      /* texto + ícono en línea */
  align-items: center;
  justify-content: flex-start; /* ✅ alineado a la izquierda */

  cursor: pointer;
  transition: background 0.3s ease;
}

/* Hover fondo */
.btn.form:hover {
  background: linear-gradient(45deg, #213154 0%, #E92B40 65%);
}

/* Ícono */
.btn.form .img-btn {
  margin-left: 75px;             
  margin-top: 0;
  transition: transform 0.3s ease;
  display: block;
}

/* Hover ícono */
.btn.form:hover .img-btn {
  transform: translateX(-10px);
}


/* POPUP START */
.pum-content .popmake-content h3 {
    color:#213154!important;
}
.pum-content .popmake-content p {
    color:#213154!important;
}

.popmake-content a {
    color: #213154 !important;
    text-decoration: underline !important;
}
.pum-content a {
    color: #213154 !important;
    text-decoration: underline !important;
}
@media only screen and (max-width: 767px) {

.magnet360-inner {
    gap: 0px!important;

}
	
.pum-theme-29923 .pum-content, .pum-theme-lightbox .pum-content {
	padding: 20px!important;
}
}
/* POPUP END */


/* BOXES EFFECT BORDER START  */

.btn-quaternary h3 {
  color:#fff;
}  
.btn-quaternary {
  --border-angle: 0deg;
  --bg: #213154;
  --theme: #E92B40;
  color:#fff;
  z-index: 0;
  border-radius: 0.625rem;
  padding: 0.75rem 1.4rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
  animation: border-angle-rotate 2s infinite linear;
  border: 2px solid transparent;
  position: relative;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(
        from var(--border-angle),
        var(--bg) 50%,
        var(--theme),
        var(--bg)
      )
      border-box;
  box-shadow: 0 -4px 15px 0 rgba(186, 214, 95, 0.2),
    0 2px 15px 0 rgba(186, 214, 95, 0.2);
}

@keyframes border-angle-rotate {
  from {
    --border-angle: 0deg;
  }

  to {
    --border-angle: 360deg;
  }
}

@property --border-angle {
  syntax: "";

  initial-value: 0deg;

  inherits: false;
}

@keyframes border-angle-rotate {
  from {
    --border-angle: 0deg;
  }

  to {
    --border-angle: 360deg;
  }
}



#gradient25 {
background: linear-gradient(
  180deg,
  #213154 0%,
  #2b2f60 30%,
  #7a2c4a 60%,
  #E92B40 100%
);
}

/* Oculta cualquier overflow horizontal */
html, body {
  overflow-x: hidden !important;
  max-width:100%!important;
}
body {
    overflow-x: hidden !important;
}

#page-container,
.et-l--body {
    overflow-x: hidden !important;
}

/* Asegura que Swiper nunca se pase del viewport */
.swiper {
  max-width: 100% !important;
/*  overflow: hidden !important;*/
}

/* Los slides no deben crecer más de su contenedor */
.swiper-slide {
  box-sizing: border-box;
  max-width: 100% !important;
}


/*.et_pb_section.et_pb_section_12.et_section_regular {
    padding: 60px 0 !important;
	margin-bottom: -60px;
}*/

@media (max-width: 768px) {
	.et_pb_section.et_pb_section_13.et_section_regular {
    padding: 60px 0 !important;
	margin-bottom: -60px;
}
	.faq .fix h3 {
	line-height: 20px!important;
}
 .pum-container, .pum-theme-lightbox .pum-container {
    padding: 5px!important;
}
	.pum-content + .pum-close, .pum-theme-lightbox .pum-content + .pum-close {
    right: 15px;
    top: 20px;
}
}

@media (max-width: 768px) {
  .et_pb_module.et_pb_text_3_tb_footer h3 {
    line-height: 36px;
  }
}
@media (max-width: 768px) {
  .faq h3 {
    line-height: 0px;
  }
}


.dsm_contact_form_7_0 {
    background-color: transparent!important;

}

/*BTN FORM BTN UPLOAD*/

.dsm_contact_form_7_0 {
    background-color: transparent!important;
}

/* Wrapper */
.upload-wrapper{
  position: relative;
  display: block;
  width: 100%;
  margin-top: -7px;
  margin-bottom: -7px;
}

/* Placeholder simulado */
.upload-wrapper::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    top: 70%;
    transform: translateY(-50%);
    color: #999;
    font-family: 'Proxima Nova Regular', sans-serif;
    font-size: 14px;
    pointer-events: none;
    z-index: 9!important;
}

/* Ícono */
.upload-wrapper::after{
  content: "";
  position: absolute;
  top: 67%;
  right: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('https://magnet360.de/wp-content/uploads/2025/08/upload.svg');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Campo file */
.wpcf7 input[type="file"].cf7-file-btn{
  width: 100%;
  border: 1px solid #ddd;
  /*background: #fff;*/
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding: 22px;
  font-size: 0; /* oculta texto nativo */
  color: transparent;
  line-height: normal;
  /*margin-top:-15px;*/
}

/* Ocultar botón nativo */
.wpcf7 input[type="file"].cf7-file-btn::file-selector-button,
.wpcf7 input[type="file"].cf7-file-btn::-webkit-file-upload-button{
  display: none;
}

/* Estilo botón nativo (compatibilidad) */
.wpcf7 input[type="file"]::file-selector-button {
    font-family: 'Proxima Nova Regular', sans-serif;
    border: 1px #999 solid!important;
    background-color: transparent!important;
    color: #666;
    font-size:14px;
}
.wpcf7 input[type="file"]::-webkit-file-upload-button {
    font-family: 'Proxima Nova Regular', sans-serif;
    border: 1px #999 solid!important;
    background-color: transparent!important;
    color:#999;
    font-size:14px;
}


/*BTN FORM BTN UPLOAD*/



.centered {
  text-align: center!important;
}

/* Cambia la imagen del botón en hover */
.pulse-effect-white img {
  transition: all 0.3s ease-in-out;
}

.pulse-effect-white:hover img {
  content: url("https://magnet360.de/wp-content/uploads/2025/08/Group-1000004226@3x-b.svg");
  width:80px;
	
}


/*.dtq-popup-yt-wrap,
.et_pb_section,
.et_pb_row,
.et_pb_column {
  max-width: 100vw !important;
  width:100%!important;
  overflow-x: hidden !important;
}*/



.pum-content .et_pb_row {
  margin-left: auto !important;
  margin-right: auto !important;
}

.testimonial-card-v3 {
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  margin: auto;
  text-align: center;
  position: relative;
  max-height:890px;
  color:#213154;
}
.testimonial-card-v3 h3 {
  color:#213154;
}
.testimonial-card-v3 .red {
  text-decoration: underline;
  font-weight: 600;
}
.testimonial-card-v3 .blue {
  font-size: 16px;
}

.testimonial-image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}

.testimonial-image {
  display: block;
  width: 258px;
  height: auto;
  margin: 0 auto;
  border-radius: 20px 20px 0 0;
  position: relative;
  z-index: 1;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  z-index: 2;
}

.testimonial-content {
  position: relative;
  top: -250px; 
  margin: 0 auto;
  background: #f6f6f6;
  padding: 280px 20px 40px; 
  border-radius: 20px;
  max-width: 100%;
  z-index: 0;
}
.box-small-testimonial {
  background-color: #E5E7EB;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 18px;
}

.dsm_contact_form_7_0.dsm_contact_form_7 .wpcf7-form-control.wpcf7-text, .dsm_contact_form_7_0.dsm_contact_form_7 .wpcf7-form-control.wpcf7-tel, .dsm_contact_form_7_0.dsm_contact_form_7 .wpcf7-form-control.wpcf7-url, .dsm_contact_form_7_0.dsm_contact_form_7 .wpcf7-form-control.wpcf7-quiz, .dsm_contact_form_7_0.dsm_contact_form_7 .wpcf7-form-control.wpcf7-number, .dsm_contact_form_7_0.dsm_contact_form_7 .wpcf7-form-control.wpcf7-textarea, .dsm_contact_form_7_0.dsm_contact_form_7 .wpcf7-form-control.wpcf7-select, .dsm_contact_form_7_0.dsm_contact_form_7 .wpcf7-form-control.wpcf7-date
 {
    border-radius: 10px!important;
}
.et_pb_toggle_title {
  position: relative;
  padding-right: 40px; /* espacio para el ícono */
}

.custom-icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Ícono cerrado */
.et_pb_toggle.et_pb_toggle_close .custom-icon {
  background-image: url("https://magnet360.de/wp-content/uploads/2025/12/arrow_red.svg");
}

/* Ícono abierto */
.et_pb_toggle.et_pb_toggle_open .custom-icon {
  background-image: url("https://magnet360.de/wp-content/uploads/2025/12/arrow_downward_alt-1.svg");
}


/* VIDEO POPUP */
/*
.ba_video_popup_0 .dtq-video-popup-figure {
    height: 100%!important;
}

.ba_video_popup_0 .dtq-video-popup a:after {
    border-radius: 30px!important;
}

/* VIDEO POPUP */



.pulse-effect-gray {
  position: relative;
}

.pulse-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;   /* Ajusta al tamaño de tu bloque */
  height: 200px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0; /* Detrás del contenido */
}

.circle-white-static {
  position: relative;
  z-index: 1; /* Encima del efecto */
}

.pulsecircle {
  transform-origin: center;
  opacity: 0;
  position: absolute;
  animation: attractAnimation 2.5s ease-in-out infinite;
}

.first-circle { animation-delay: 0s; }
.second-circle { animation-delay: 0.8s; }
.third-circle { animation-delay: 1.6s; }

@keyframes attractAnimation {
  0% {
    transform: scale(2.5);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

/* Clase base para aplicar en el módulo */
.border-gradient25 {
  position: relative;
  border-radius: 30px;
  overflow: hidden; /* Recorta el pseudo-elemento y el contenido */
}

/* Pseudo-elemento para crear el borde degradado */
.border-gradient25::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px; /* Grosor del borde */
  border-radius: 30px;
  background: linear-gradient(223deg, #213154 0%, #E92B40 68.34%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2; /* Se ubica sobre el fondo */
  animation: border-angle-rotate 2s infinite linear;
}
@keyframes border-angle-rotate {
  from {
    --border-angle: 0deg;
  }

  to {
    --border-angle: 360deg;
  }
}

@property --border-angle {
  syntax: "";

  initial-value: 0deg;

  inherits: false;
}

@keyframes border-angle-rotate {
  from {
    --border-angle: 0deg;
  }

  to {
    --border-angle: 360deg;
  }
}

.pulse-effect.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.bk-gradient-row  {
	background: linear-gradient(223deg, #213154 0%, #E92B40 68.34%);
}


.dsm_contact_form_7_0  {
	border-radius:10px!important;
}
.dsm_contact_form_7_0 .wpcf7-form-control.wpcf7-file {
    background-color: #FFFFFF;
    padding:12px;
    border-radius: 10px;
}

.magnet-icon {
    animation: magnetIconAnimation 3s infinite ease-in-out;
	top:80px!important;
}

.magnet.left {
    animation: magnetAnimationLeft 3s infinite ease-in-out;
}

.magnet.right {
    animation: magnetAnimationRight 3s infinite ease-in-out;
}
.magnet.top {
    animation: magnetAnimationTop 3s infinite ease-in-out;
}

.magnet.bottom {
    animation: magnetAnimationBottom 3s infinite ease-in-out;
}
.magnet.bottom-left {
    animation: magnetAnimationBottomSide 3s infinite ease-in-out;
}
.magnet.bottom-right {
    animation: magnetAnimationBottomSide 3s infinite ease-in-out;
}

.magnet.top-left {
    animation: magnetAnimationTopSide 3s infinite ease-in-out;
}
.magnet.top-right {
    animation: magnetAnimationTopSide 3s infinite ease-in-out;
}
.magnet.top {
    animation: magnetAnimationTop 3s infinite ease-in-out;
}



/* Contenedor del botón con efecto de borde */
.border-effect {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  border-radius: 30px!important;
  overflow: visible;
}
.border-effect::after {
    border-radius: 30px!important;

  }
/* Efecto del borde animado */
.border-effect::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border: 3px solid transparent;
  border-image-source: linear-gradient(90deg, #213154, #E92B40, #213154);
  border-image-slice: 1;
  box-sizing: border-box;
  border-radius: 30px!important;
  z-index: 0;
  animation: color-shift 3s linear forwards;
  pointer-events: none;
}

/* Asegurar que la imagen no tenga border-radius y se vea correctamente */
.pulse-effect-white {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-effect-white img {
  position: relative;
  z-index: 2;
  display: block;
}




/* LIST */

  ul {
      list-style: none; /* Quitar viñetas predeterminadas */
      padding: 0;
      margin: 0;
  }
  
  .li-red-bk {
      position: relative; /* Para posicionar el ícono */
      padding-bottom:30px; /* Espaciado inferior entre elementos */
      font-size: 18px; /* Tamaño de la fuente */
      line-height: 18px; /* Altura de línea */
      list-style: none; /* Asegurarse de que el marcador esté desactivado */
      padding-left:20px;
      font-family: 'Proxima Nova Bold';	
  }
  
  .li-red-bk::marker {
      display: none; /* Ocultar el marcador del navegador */
  }
  
  .li-red-bk::before {
      content: ""; /* Añadir el ícono como fondo */
      position: absolute;
      top: 0;
      left: -32px; /* Ajusta según el espacio deseado del ícono */
      width: 35px; /* Tamaño del ícono */
      height: 20px;
      background-image: url("https://magnet360.de/wp-content/uploads/2025/12/Group-1000004196-1.svg");
      background-size: cover; /* Ajusta el tamaño del fondo */
      background-repeat: no-repeat;
  }
  

.entry-content ul {
    font-size: 18px;
}

  
  @media only screen and (min-width: 1921px) 
      .et_pb_row_1 {
      max-width: 1680px!important;
      min-width: 85%;
  }
  
  @media only screen and (min-width: 3400px) 
      .et_pb_row_1 
      {
      max-width: 2420px!important;
      min-width: 2420px!important;
  } 




  
  /* Contenedor del paso */
  .step-row {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaciado entre la imagen y el texto */
    margin: 10px 0; /* Opcional: separación superior/inferior */
  }
  
  /* Estilo de la imagen */
  .step-image {
    display: block;
  }
  
  /* Estilo del texto */
  .step-text {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: #fff; /* Cambia el color si es necesario */
  }
  
  .step-text strong {
    color: #fff; /* Cambia el color del texto destacado */
  }
  
  


 .pulse-effect-white {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
  padding: 5px;
}

.pulse-effect-white::before,
.pulse-effect-white::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.25); /* Pulso blanco más sutil */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(2.2); /* Comienza grande */
  opacity: 0;
  z-index: -1;
  animation: pulse-white-inward 2.5s ease-out infinite;
}

.pulse-effect-white::before {
  animation-delay: 0s;
}

.pulse-effect-white::after {
  animation-delay: 1.25s;
}

@keyframes pulse-white-inward {
  0% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
  30% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}

  
.dtq-video-popup-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
/*padding-top:200px;*/
}
.border-gradient25 .dtq-video-popup-wrap {
padding-top:200px;
}

.pulsebutton {
display: flex;
justify-content: center;
align-items: center;
}

.pulse-box-button {
position: static;
width: 100px;
height: 100px;
}

.pulse-svg-button {
width: 100px;
height: 100px;
}

.circle-button {
animation: pulse-animation 2s infinite;
transform-origin: center;
}

.first-circle-button-secondary {
animation-delay: 0s;
}

.second-circle-button-secondary {
animation-delay: 0.5s;
}

.third-circle-button-secondary {
animation-delay: 1s;
}

.bgcirclebutton {
z-index: 1;
}


.dtq-video-popup-trigger {
    width: 100px;
    height: 100px;
}


.striped-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pulse-effect-gray {
  position: relative;
  width: 320px;
  height: 320px;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pulse-effect-gray::before,
.pulse-effect-gray::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  background: #EFEFEF;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  z-index: -1;
  animation: pulse-effect-animation 2.5s infinite;
}

.pulse-effect-gray::before {
  animation-delay: 0s;
}

.pulse-effect-gray::after {
  animation-delay: 1.25s;
}

.circle-white-static {
  position: relative;
  width: 300px;
  height: 300px;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.circle {
  position: relative;
  width: 180px;
  height: 180px;
  background: linear-gradient(180deg, #465B7B 0%, #213154 100%);
  color: white;
  text-align: center;
  line-height: 1.5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  z-index: 10;
}

.circle h3 {
  margin: 0;
  padding: 0;
  color:#fff;
}

.icon {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  animation: movement 2.3s linear infinite;

}

.linkedin { background-image: url('https://magnet360.de/wp-content/uploads/2025/02/Group-1000004218@3x.svg'); top: 10%; left: 50%; transform: translate(-50%, -50%); }
.instagram { background-image: url('https://magnet360.de/wp-content/uploads/2025/02/Group-1000004217@3x.svg'); top: 50%; right: 10%; transform: translate(50%, -50%); }
.facebook { background-image: url('https://magnet360.de/wp-content/uploads/2025/02/Social-media-logos@3x.svg'); bottom: 20%; right: 20%; transform: translate(50%, 50%); }
.tiktok { background-image: url('https://magnet360.de/wp-content/uploads/2025/02/Social-media-logos@3x.svg'); bottom: 10%; left: 50%; transform: translate(-50%, 50%); }
.google { background-image: url('https://magnet360.de/wp-content/uploads/2025/02/Vector@3x.svg'); bottom: 20%; left: 20%; transform: translate(-50%, 50%); }
.location { background-image: url('https://magnet360.de/wp-content/uploads/2025/02/Vector@3x.svg'); top: 50%; left: 10%; transform: translate(-50%, -50%); }
.review { background-image: url('https://magnet360.de/wp-content/uploads/2025/02/reviews@3x.svg'); top: 25%; left: 20%; transform: translate(-50%, -50%); }
.shop { background-image: url('https://magnet360.de/wp-content/uploads/2025/02/Group-1000004209@3x.svg'); top: 25%; right: 20%; transform: translate(50%, -50%); }

.magnet {
  position: absolute;
  width: 50px;
  height: 50px;
  background-image: url('https://magnet360.de/wp-content/uploads/2025/02/Magnet@3x.svg');background-size:contain;background-repeat:no-repeat}.magnet.top{top:5%;left:50%;transform:translate(-50%,0)}.magnet.bottom{bottom:5%;left:50%;transform:translate(-50%,0)}.magnet.left{left:5%;top:50%;transform:translate(0,-50%)}.magnet.right{right:5%;top:50%;transform:translate(0,-50%)}.magnet.top-left{top:15%;left:15%}.magnet.top-right{top:15%;right:15%}.magnet.bottom-left{bottom:15%;left:15%}.magnet.bottom-right{bottom:15%;right:15%}#box25{color:#FFFFFF!important;border-radius:20px;background:rgba(0,0,0,0.4);padding:30px}@media only screen and (max-width:767px){.border-gradient25 .dtq-video-popup-wrap{padding-top:350px}}