@charset "UTF-8";
/* =========================
   1. CAPA BASE (Tipografía y Reset)
   Tailwind ya resetea box-sizing y margins, solo añadimos lo custom.
========================= */
@layer base {
  :root {
    --galitee-gradient: linear-gradient(135deg, #0B4251, #0B5A6A, #0B4251);
  }
  body {
    font-family: "Montserrat", sans-serif;
    background-color: #fff;
    color: #000;
  }
  /* Foco accesible y estético (Importante para accesibilidad) */
  button:focus-visible,
  a:focus-visible {
    outline: 2px solid #D39D3A;
    outline-offset: 4px;
    border-radius: 0.25rem;
  }
}
/* =========================
   2. CAPA DE COMPONENTES
   Estilos reutilizables específicos
========================= */
@layer components {
  .text-galitee-teal {
    color: #006064;
  }
  /* Ajustes de tipografía responsive específicos si Tailwind no basta */
  @media (max-width: 640px) {
    #manifesto h2 {
      font-size: 2.25rem;
    }
    #manifesto p {
      font-size: 1rem;
    }
  }
  /* Ajuste para el carrusel */
  #carousel-track {
    padding-bottom: 1rem;
  }
}
/* =========================
   3. CAPA DE UTILIDADES (Animaciones)
   Hemos unificado y limpiado las animaciones.
========================= */
@layer utilities {
  /* --- Ondas --- */
  @keyframes wave {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-25%);
    }
  }
  .animate-wave-slow {
    animation: wave 10s ease-in-out infinite;
  }
  /* --- Giros --- */
  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .animate-spin-slow {
    animation: spin-slow 25s linear infinite;
  }
  /* --- Fades (Unificados) --- */
  @keyframes fadeInX {
    from {
      opacity: 0;
      transform: translateX(var(--tw-translate-x));
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .animate-fade-in-left {
    --tw-translate-x: -30px;
    animation: fadeInX 1s ease forwards;
  }
  .animate-fade-in-right {
    --tw-translate-x: 30px;
    animation: fadeInX 1s ease forwards;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
  }
  .animate-fade-in {
    animation: fade-in 1s ease-out forwards; /* Tailwind ya tiene keyframes fade-in por defecto, pero lo mantenemos por si acaso */
  }
  /* --- Gradientes --- */
  @keyframes gradientShift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  .animate-gradient-bg {
    background: var(--galitee-gradient);
    background-size: 200% 200%;
    animation: gradientShift 25s ease infinite;
  }
  /* Mantenemos este para fondos claros si se usa */
  .animate-gradient-slow {
    animation: gradientShift 15s ease infinite;
  }
  /* --- Elementos Flotantes (Pegatinas) --- */
  /* Optimizamos para no repetir el bloque de animación 6 veces */
  @keyframes floating {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }
  [class*=animate-floating-] {
    animation-name: floating;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  .animate-floating-3 {
    animation-duration: 3s;
  }
  .animate-floating-4 {
    animation-duration: 4s;
  }
  .animate-floating-5 {
    animation-duration: 5s;
  }
  .animate-floating-6 {
    animation-duration: 6s;
  }
  .animate-floating-7 {
    animation-duration: 7s;
  }
  .animate-floating-8 {
    animation-duration: 8s;
  }
  /* --- Wiggle (Capacho) --- */
  @keyframes wiggle {
    0%, 100% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
  }
  .animate-wiggle {
    animation: wiggle 2s ease-in-out infinite;
  }
  /* Onda generativa footer */
  .my_wave {
    position: relative;
    z-index: 10;
  }
}

/*# sourceMappingURL=main.css.map */