/* Start custom CSS */@media (min-width:700px){
    .heading-with-line {
  display: flex;
  align-items: center; /* Alinea el texto y la línea verticalmente */
}

/*.heading-with-line::after {
  content: "";
  flex-shrink: 0; /* Evita que la línea se reduzca */
  width: 40px; /* Ajusta la longitud de la línea */
  height: 4px; /* Ajusta el grosor de la línea */
  background-color: #FF1F1F; /* Cambia el color aquí */
  margin-left: 0px; /* Espacio entre el texto y la línea */
  position: relative;
  top: 0; /* Si quieres moverla más abajo, ajusta este valor (por ejemplo, 2px) 
}*/
}

/* 🟣 Estilos iniciales */
.custom-card {
    overflow: visible !important; /* Permite que la flecha sobresalga */
    position: relative;
    background: #d3d3d3 !important; /* Fondo gris inicial */
    border-radius: 20px; /* Bordes iniciales */

    transition: all 0.4s ease-in-out;
    overflow: hidden;
}

/* Estilos del título */
.custom-card h2, 
.custom-title {
    color: #92073F !important; /* Color inicial */
    transition: color 0.4s ease-in-out;
}

/* Estilos del párrafo */
.custom-text {
    color: #333; /* Color inicial */
    transition: color 0.4s ease-in-out;
}

/* Estilos del icono superior */
.custom-icon-top {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

/* 🔹 Estilos del divisor de Elementor (corrigiendo para cambiar el color de la línea real) */
.custom-divider .elementor-divider-separator {
    background-color: #333 !important; /* Color inicial de la línea */
    transition: background-color 0.4s ease-in-out;
}

/* Estilos de la imagen */
.custom-image {
    width: 100%;
    border-radius: 20px; /* Bordes iniciales */
    transition: border-radius 0.4s ease-in-out;
    display: block; /* Asegura que se vea el cambio */
}

/* Flecha oculta al inicio */
.custom-arrow {
   position: absolute;
    bottom: 0px;
    left: 0px;
    background: black;
    color: white;
    padding: 10px;
    border-radius: 100%;
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
    transition: all 0.4s ease-in-out;
}

/* 🎯 Efecto Hover */
.custom-card:hover {
    background: #92073F !important; /* Cambio de fondo */
    border-radius: 20px 20px 20px 100px !important; /* AHORA cambia la esquina INFERIOR IZQUIERDA */
}

/* Cambio de colores */
.custom-card:hover h2,
.custom-card:hover .custom-title {
    color: white !important;
}

.custom-card:hover .custom-text p {
    color: white;
}

/* Desaparece el icono superior */
.custom-card:hover .custom-icon-top {
    opacity: 0;
}

/* 🔹 Cambio de color del divisor de Elementor */
.custom-card:hover .custom-divider .elementor-divider-separator {
    background-color: white !important; /* Se cambia SOLO la línea real */
}

/* 🔹 La imagen ahora sí se ve el cambio de la esquina INFERIOR IZQUIERDA */
.custom-card:hover .custom-image img {
    border-radius: 20px 20px 20px 100px !important;
}

/* Aparece la flecha con animación */
.custom-card:hover .custom-arrow {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}/* End custom CSS */