/* CSS que debes agregar a tu hoja de estilos */

 .card-blur {
            /* Simula el estilo de 'blur' usando Tailwind's bg-opacity y backdrop-blur */
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
.logo-animado-contenedor {
     max-width: 300px; /* Puedes ajustar este ancho si quieres que el logo con texto sea un poco más grande */
     height: auto;
}
.logo-animado-contenedor svg {
    max-width: 100%;
    height: auto;
    display: block;
}
.cls-1 { fill: #fff; } 
.cls-2 { fill: #b22223; } /* Rojo para el texto */
.cls-3 { fill: #5795c6; } 
.cls-4 { fill: #fefcfc; } /* Blanco Roto (para gota-chica) */
.cls-5 { fill: #89caea; } 
.cls-6 { fill: #1e225f; } 
.cls-7 { fill: #1d91cc; }

.masonry {
  column-count: 3; /* Número de columnas */
  column-gap: 1.5rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

@media (max-width: 992px) {
  .masonry {
    column-count: 2;
  }
}

@media (max-width: 576px) {
  .masonry {
    column-count: 1;
  }
}

/* ===== Animaciones suaves para las tarjetas (masonry) ===== */
.masonry-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ===== Animación sutil para el logo ===== */
.logo-animado-contenedor {
  transition: transform 0.4s ease;
}

.logo-animado-contenedor:hover {
  transform: scale(1.05) rotate(-1deg);
}

/* Opcional: para suavizar los SVG dentro del logo */
.logo-animado-contenedor svg {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.logo-animado-contenedor:hover svg {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* ===== Ajustes del encabezado y menú en móvil ===== */

/* Asegura que el logo tenga prioridad visual */
.logo-animado-contenedor {
  position: relative;
  z-index: 10; /* El logo siempre arriba del menú */
}

/* Si tu navbar usa .navbar o .menu principal */
.navbar,
.navbar-collapse {
  z-index: 9; /* Menor que el logo para no taparlo */
}

/* Espaciado para que el menú no quede sobre el logo */
@media (max-width: 992px) {
  header, .navbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Ajuste del logo en móvil */
  .logo-animado-contenedor {
    max-width: 200px;
    margin: 0 auto;
  }

  /* Si el logo se ve muy pegado al menú, ajusta margen */
  .navbar-toggler {
    margin-right: 0.5rem;
  }

  /* Oculta el botón "Cotizar" en pantallas pequeñas */
  .btn-cotizar,
  .nav-item.cotizar {
    display: none !important;
  }

  /* Si usas un menú colapsable (tipo hamburguesa) */
  .navbar-collapse.show {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1rem;
  }
}


/* === Ajustes del menú para que no tape el logo SVG en móvil === */

@media (max-width: 992px) {

  /* Evita que el menú se superponga al logo */
  .navbar {
    position: relative !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    border-radius: 10px;
    margin-top: 0.5rem;
    z-index: 9;
  }

  /* Logo SVG visible y centrado */
  .logo-animado-contenedor {
    position: relative;
    z-index: 10;
    max-width: 220px !important;
    margin: 0 auto 1rem auto !important;
  }

  /* Oculta el botón Cotizar del menú superior */
  .navbar .btn,
  .navbar .btn-round,
  .navbar .btn-dark,
  .navbar .btn-primary {
    display: none !important;
  }

  /* Ajusta el padding del encabezado */
  header .page-header {
    padding-top: 1rem !important;
  }

  /* Asegura que el logo no se oculte detrás de la navbar */
  header {
    position: relative;
    z-index: 8;
  }

  /* Ajusta el comportamiento del menú colapsado (hamburguesa) */
  .navbar-collapse.show {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 0.5rem;
  }

  /* Si tu navbar está fija o sticky */
  .position-sticky,
  .position-absolute {
    position: relative !important;
  }
}

/* Opcional: mejora visual general */
.navbar-toggler {
  border: none;
  outline: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}