/*
 Theme Name: Hello Elementor Child
 Theme URI: https://example.com/
 Description: Tema hijo de Hello Elementor.
 Author: Tu Nombre
 Author URI: https://example.com/
 Template: hello-elementor
 Text Domain: hello-elementor-child
 Version: 1.0.0
*/

/* Aquí puedes añadir tus estilos personalizados */



.columna-izquierda {
  flex: 1;
}

.columna-derecha {
  flex: 1;
}

.imagen-lista {
  display: none;
}

.imagen-lista.active {
  display: block;
}

.item-lista.active {
  font-weight: bold;
}

.imagen-lista-mobile {
  display: none;
}
.contenedor-item-lista{
  display: flex;
  gap: 10px;
  align-items: center;
}

.contenedor-ayuda{
  display: flex;
  align-items: center;
  gap: 50px;
  justify-content: space-between;
  .columna-izquierda{
    display: flex;
    flex-direction: column;
    gap: 40px;
    .item-lista{
      font-size: 25px;
      font-weight: 400;
      line-height: 23px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 10px;
		@media(max-width: 400px){
			font-size: 18px !important;
		}
      .icono-lista{
        display: flex;
      }
      &.active{
        font-weight: 700;
        color: #FD425F;
        .icono-lista{
          svg{
            rect{
              fill-opacity: 1;
              fill: #FD425F;
            }
            path{
              fill: #ffffff;
            }
          }
        }
      }
    }
  }
	.izquierda{
		display: flex;
		flex-direction: column;
		gap: 80px;
		.boton-azul{
			border-radius: 24px;
            background: linear-gradient(180deg, #4A4DBB 0%, #4A4DBB 100%);
			padding: 10px 15px;
			width: fit-content;
			color: white;
			font-size: 22px;
			font-weight: 700;
			line-height: 23px;
			align-self: center;
			&:hover{
				background: linear-gradient(180deg, #4A4DBB 0%, #2C2FA2 100%);
			}
		}
	}
  .columna-derecha{
    .imagen-lista{
      position: relative;
      &::before{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: #4A4DBB;
        opacity: 0.1;
        z-index: -1;
        border-radius: 50px;
        transform: translate(-50%, -50%);
        width: calc(100% - 41.75px);
        height: calc(100% - 58.36px);
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      } 
    }
  }
}

@media (max-width: 768px) {
  .contenedor-ayuda {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .contenedor-ayuda .columna-izquierda {
    width: 100%;
  }

  .contenedor-ayuda .columna-derecha {
    display: none;
  }

  .contenedor-ayuda .item-lista {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .contenedor-ayuda .imagen-lista-mobile {
    width: 100%;
    margin-top: 12px;
  }

  .contenedor-ayuda .imagen-lista-mobile img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .contenedor-ayuda .item-lista.active .imagen-lista-mobile {
    display: block;
  }
  .imagen-lista-mobile{
    position: relative;
      &::before{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: #4A4DBB;
        opacity: 0.1;
        z-index: -1;
        border-radius: 50px;
        transform: translate(-50%, -50%);
        width: calc(100% - 41.75px);
        height: calc(100% - 58.36px);
      }
  }
}