/*
====================================
Estilos para el Botón de WhatsApp con Brillo
====================================
*/

/* Definición de la animación de brillo */
@keyframes shine-animation {
  0% {
    /* Inicia la franja de brillo fuera del botón a la izquierda */
    transform: translateX(-100%) skewX(-30deg);
  }
  100% {
    /* Mueve la franja de brillo a través del botón hacia la derecha */
    transform: translateX(200%) skewX(-30deg);
  }
}

/* Estilos base del contenedor para el efecto */
.whatsapp-shine {
  /* Fondo Verde Esmeralda (o similar al branding de WhatsApp) */
  background-color: #00e676; /* Verde Esmeralda Vibrante */
  color: #fff; /* Texto blanco para contraste */
  /* Necesario para posicionar el brillo de forma absoluta */
  position: relative;
  /* Asegura que el brillo no se vea fuera del elemento */
  overflow: hidden;
  /* Estilo adicional para hacer que la tarjeta destaque */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 230, 118, 0.4);
}

/* Estilos para el ícono y el texto dentro del contenedor */
.whatsapp-shine i {
  color: #fff; /* Asegura que el ícono sea blanco */
}

.whatsapp-shine .detail-content span {
  color: rgba(255, 255, 255, 0.8); /* Subtítulo más suave */
}

/* Estilo del link (botón) dentro del detalle */
.whatsapp-shine .whatsapp-button {
  color: #fff;
  text-decoration: none;
  font-size: 1.1em;
}

/* El elemento que crea la franja de brillo animada */
.whatsapp-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Ancho de la franja de brillo */
  height: 100%;
  /* Degradado para simular el efecto de brillo diagonal */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%, /* Opacidad del brillo (0.4) */
    rgba(255, 255, 255, 0) 100%
  );

  /* Aplicar la animación */
  animation: shine-animation 4s infinite linear; /* 3 segundos, loop infinito, velocidad constante */
}

/*
====================================
Estilos para hacer la tarjeta completamente clicable
====================================
*/

/* Hacemos el contenedor de la tarjeta relativo para el posicionamiento absoluto del enlace */
.detail-item {
    position: relative;
    /* Asegúrate de que el z-index de la tarjeta sea menor que el de la capa del enlace */
    z-index: 1;
    /* El resto de tus estilos de padding y márgenes... */
}

/* Extendemos la capa del enlace a todo el contenedor */
.whatsapp-shine .whatsapp-button {
    /* Mantenemos el estilo del botón original */
    position: relative;
    z-index: 2; /* Asegura que el texto y el botón estén por encima del brillo, si es necesario */
}

.whatsapp-shine .whatsapp-button::after {
    content: "";
    position: absolute;
    /* Los valores negativos empujan esta capa invisible más allá de los límites del enlace */
    top: -200%; /* Ajusta si hay padding muy grande, -200% suele ser suficiente */
    right: -200%;
    bottom: -200%;
    left: -200%;
    /* Asegura que la capa flotante esté por encima de todos los elementos de la tarjeta */
    z-index: 3;
    /* Puntero que indica que es clicable */
    cursor: pointer;
}

/* Opcional: Estilo al pasar el ratón para indicar que toda la tarjeta es el enlace */
.whatsapp-shine:hover {
    cursor: pointer;
    /* Puedes añadir un ligero efecto de sombra o escala aquí */
    box-shadow: 0 6px 20px rgba(0, 230, 118, 0.6);
    transform: translateY(-2px);
    transition: all 0.3s ease-in-out;
}

/* ---------------------------------
   Estilos Flexbox para la Tarjeta
--------------------------------- */
.service-item {
    /* 1. Habilitar Flexbox */
    display: flex;
    /* 2. Apilar elementos verticalmente */
    flex-direction: column;
    /* 3. Asegurar que el contenedor tenga una altura mínima/fija si es necesario,
          aunque flexbox suele funcionar sin esto si el contenido dicta la altura.
          Si todas tus tarjetas deben tener la misma altura:
          min-height: 350px;
    */
    height: 100%; /* Opcional, pero recomendado si la columna (.col-lg-3) tiene altura */
}

/* ---------------------------------
   Estilos para el Contenido y el Enlace
--------------------------------- */

.service-item p {
    /* 4. Usar flex-grow: 1 para que el párrafo ocupe todo el espacio disponible
          antes del elemento final (el enlace "read-more"). Esto empuja el enlace hacia abajo. */
    flex-grow: 1;
}

.service-item .read-more {
    /* 5. Asegurar que el enlace no tenga crecimiento y se mantenga en la parte inferior. */
    flex-shrink: 0;
    margin: auto auto; /* IMPORTANTE: Esto forzará el enlace al final del contenedor flex. */
    /* Aquí irían tus estilos de texto, color, etc., para el enlace */
}