/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 21 2025 | 21:49:38 */
/* =================================================================== */
/* CSS PARA EL CARRUSEL DE TARJETAS (SOLO MÓVIL)
/* =================================================================== */

@media (max-width: 768px) {
  
  /* --- Contenedor Principal del Carrusel --- */
  .tarjetas-carrusel {
    display: flex;
    overflow-x: auto; /* Permite el scroll horizontal */
    scroll-snap-type: x mandatory; /* El scroll "se pega" a cada tarjeta */
    scroll-behavior: smooth; /* Animación suave al hacer click en los dots */
    
    /* Ocultamos la barra de scroll para un look limpio */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE */
  }
  
  .tarjetas-carrusel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, etc. */
  }

  /* --- Cada Tarjeta/Slide dentro del carrusel --- */
  /* El asterisco (*) selecciona a todos los hijos directos */
  .tarjetas-carrusel > * {
    width: 100%; /* Cada tarjeta ocupa el 100% del ancho */
    flex-shrink: 0; /* Evita que las tarjetas se encojan */
    scroll-snap-align: start; /* Se alinea al inicio al hacer snap */
  }

  /* --- Contenedor de los Puntos de Navegación (Dots) --- */
  .dots-carrusel {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacio entre los dots */
    margin-top: 20px;
  }

  /* --- Estilo de cada Dot individual --- */
  .dots-carrusel .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Para que sean círculos perfectos */
    background-color: #ccc; /* Color del dot inactivo */
    
    /* Estilos para que los <button> se vean como simples dots */
    border: none;
    padding: 0;
    cursor: pointer;
    
    /* Animación suave al cambiar de estado */
    transition: background-color 0.3s, transform 0.3s;
  }

  /* --- Estilo del Dot ACTIVO --- */
  .dots-carrusel .dot.active {
    background-color: #ff007f; /* Tu color rosa destacado */
    transform: scale(1.2); /* Lo hacemos un poco más grande para que destaque */
  }
}


/* =================================================================== */
/* CSS PARA EL HEADER FIJO ANIMADO
/* =================================================================== */

/* --- Estilo Base del Header --- */
.header-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff; /* O el color de fondo de tu header */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sombra sutil */

  /* Animación por transform (más eficiente que animar 'top') */
  transform: translateY(0);
  transition: transform 0.4s ease-in-out;
  will-change: transform; /* Pista para el navegador para optimizar la animación */
}

/* --- Estado Oculto del Header --- */
/* Esta clase se añade/quita con JavaScript */
.header-scroll.hide {
  /* Mueve el header hacia arriba el 100% de su propia altura */
  transform: translateY(-100%);
}

/* --- Solución para los elementos del tema que se quedaron visibles --- */
/* Recuerda ajustar el selector si es diferente en tu caso */
#masthead, .kit-default-message {
    display: none !important;
}