/* Animaciones para el logo */
.caslu-logo {
  transition: all 0.3s ease;
  cursor: pointer;
}

.caslu-logo:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

/* Animación para las formas geométricas */
.logo-shapes .shape-1 {
  animation: float 3s ease-in-out infinite;
}

.logo-shapes .shape-2 {
  animation: float 3s ease-in-out infinite 0.5s;
}

.logo-shapes .shape-3 {
  animation: float 3s ease-in-out infinite 1s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Navigation styles */
.nav-item {
  transition: color 0.3s;
  position: relative;
}

.nav-item::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--casalu-accent);
  transition: width 0.3s ease;
}

.nav-item:hover::after {
  width: 100%;
}

.nav-item:hover {
  color: var(--casalu-accent) !important;
}

/* Animación para el texto */
.logo-text-main {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.logo-text-secondary {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.logo-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 1s ease-out 0.6s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* Efecto de brillo al hacer hover - Diferente para cada tipo de logo */
.caslu-logo:hover .logo-shapes rect {
  filter: brightness(1.2);
}

/* Para el logo del footer (fondo blanco) - Efecto diferente */
.footer-logo:hover .logo-shapes rect {
  filter: brightness(1.1) saturate(1.3);
}

/* Animación de la línea para el logo del footer */
.footer-logo .logo-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 1s ease-out 0.6s forwards;
  stroke: #5D7A9A; /* Azul claro */
}

/* Versión específica para footer */
.footer-logo:hover {
  transform: scale(1.02);
}

/* Animaciones para el hero */
.hero-shape {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.hero-overlay {
  background: linear-gradient(135deg, rgba(41, 68, 90, 0.9) 0%, rgba(41, 68, 90, 0.7) 100%);
}

.floating-card {
  animation: float 6s ease-in-out infinite;
}

.kenburns {
  animation: kenburns 20s ease-out infinite alternate;
}

@keyframes kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.pulse-glow {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Transiciones para elementos de proyecto */
.project-card {
  transition: all 0.3s ease;
}

.counter {
  transition: all 1s ease-out;
}

/* Estilos para el menú móvil */
.mobile-nav-hidden {
  display: none;
}

.mobile-nav-visible {
  display: block;
}

/* Estilos para carruseles horizontales en proyectos destacados - IMÁGENES MÁS GRANDES */
.carousel-horizontal {
  position: relative;
  height: 28rem; /* Aumentado de 16rem a 28rem (h-112) - 448px */
  overflow: hidden;
  border-radius: 0.5rem;
}

.carousel-track-horizontal {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
  width: 100%;
}

.carousel-slide-horizontal {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

/* Asegurar que las imágenes ocupen el espacio completo */
.carousel-slide-horizontal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder para imágenes más grandes */
.carousel-slide-horizontal .image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-weight: 500;
}

/* Botones de navegación */
.carousel-prev-horizontal,
.carousel-next-horizontal {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  color: #29445A;
  padding: 0.75rem; /* Aumentado el padding */
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 10;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-prev-horizontal {
  left: 1rem;
}

.carousel-next-horizontal {
  right: 1rem;
}

.carousel-prev-horizontal:hover,
.carousel-next-horizontal:hover {
  background-color: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Indicadores del carrusel */
.carousel-indicators {
  position: absolute;
  bottom: 1.5rem; /* Bajados un poco más */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.carousel-indicator {
  width: 0.75rem; /* Aumentado tamaño */
  height: 0.75rem; /* Aumentado tamaño */
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.carousel-indicator.active {
  background-color: white;
  transform: scale(1.3);
}

/* Estados de deshabilitado para botones */
.carousel-prev-horizontal:disabled,
.carousel-next-horizontal:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: translateY(-50%);
}

.carousel-prev-horizontal:disabled:hover,
.carousel-next-horizontal:disabled:hover {
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
}

/* Ajustar el overlay del botón "Ver detalles" para la nueva altura */
.project-card .absolute.inset-0.bg-gradient-to-t {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
}

/* Ajustar la posición de la etiqueta "Destacado" */
.project-card .absolute.top-4.left-4 {
  z-index: 20;
}

/* Responsive para carruseles horizontales con imágenes grandes */
@media (max-width: 1024px) {
  .carousel-horizontal {
    height: 24rem; /* 384px en tablet */
  }
}

@media (max-width: 768px) {
  .carousel-horizontal {
    height: 20rem; /* 320px en móvil */
  }
  
  .carousel-prev-horizontal,
  .carousel-next-horizontal {
    padding: 0.5rem;
  }
  
  .carousel-prev-horizontal svg,
  .carousel-next-horizontal svg {
    width: 1rem;
    height: 1rem;
  }
  
  .carousel-indicator {
    width: 0.5rem;
    height: 0.5rem;
  }
}

@media (max-width: 640px) {
  .carousel-horizontal {
    height: 18rem; /* 288px en móvil pequeño */
  }
}

/* Estilos para el modal de detalles del proyecto */
.fixed.inset-0.z-50 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
}

.hidden {
  display: none;
}

/* Carrusel dentro del modal */
.carousel-modal {
  position: relative;
  height: 16rem; /* h-64 */
  overflow: hidden;
  border-radius: 0.5rem;
}

@media (min-width: 1024px) {
  .carousel-modal {
    height: 20rem; /* h-80 */
  }
}

.carousel-track-modal {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.carousel-slide-modal {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.carousel-slide-modal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botones de navegación del modal */
.carousel-prev-modal,
.carousel-next-modal {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  color: #29445A;
  padding: 0.5rem;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 10;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-prev-modal {
  left: 0.5rem;
}

.carousel-next-modal {
  right: 0.5rem;
}

.carousel-prev-modal:hover,
.carousel-next-modal:hover {
  background-color: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Indicadores del modal */
.carousel-indicators-modal {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.carousel-indicator-modal {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.carousel-indicator-modal.active {
  background-color: white;
  transform: scale(1.2);
}

/* Animación de entrada del modal */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-enter {
  animation: modalEnter 0.3s ease-out;
}

/* Efecto de desenfoque para el fondo */
.backdrop-blur {
  backdrop-filter: blur(4px);
}

/* ANIMACIONES MEJORADAS PARA EL MODAL */
@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-50px) rotateX(10deg);
  }
  50% {
    transform: scale(1.02) translateY(10px) rotateX(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0);
  }
}

@keyframes modalSlideOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-50px) rotateX(10deg);
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

@keyframes contentStagger {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes imageZoomIn {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes buttonPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

/* Clases de animación */
.modal-enter-active {
  animation: modalSlideIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.modal-exit-active {
  animation: modalSlideOut 0.4s cubic-bezier(0.755, 0.05, 0.855, 0.06) forwards;
}

.backdrop-animate {
  animation: backdropFadeIn 0.5s ease-out forwards;
}

.stagger-animate > * {
  opacity: 0;
  animation: contentStagger 0.6s ease-out forwards;
}

.stagger-animate > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animate > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animate > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animate > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animate > *:nth-child(5) { animation-delay: 0.5s; }

.image-zoom {
  animation: imageZoomIn 0.8s ease-out forwards;
}

.slide-from-left {
  animation: slideInFromLeft 0.6s ease-out forwards;
}

.slide-from-right {
  animation: slideInFromRight 0.6s ease-out forwards;
}

.pulse-on-hover:hover {
  animation: buttonPulse 0.3s ease-in-out;
}

/* Efectos de hover mejorados */
.carousel-prev-modal:hover,
.carousel-next-modal:hover {
  background-color: white;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 6px 20px rgba(41, 68, 90, 0.3);
}

.carousel-indicator-modal:hover {
  transform: scale(1.3);
  background-color: rgba(255, 255, 255, 0.8);
}

/* Efecto de brillo en las imágenes al hover */
.carousel-slide-modal img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.carousel-slide-modal:hover img {
  transform: scale(1.02);
  filter: brightness(1.1) contrast(1.05);
}

/* Efecto de carga sutil para las imágenes */
.image-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

/* Mejoras en el botón de cerrar */
#closeModal {
  transition: all 0.3s ease;
  border-radius: 50%;
  padding: 0.25rem;
}

#closeModal:hover {
  background-color: rgba(41, 68, 90, 0.1);
  transform: rotate(90deg);
}

/* Efecto de profundidad para el modal */
.modal-depth {
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Animación para los logros */
.achievement-item {
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInFromLeft 0.5s ease-out forwards;
}

.achievement-item:nth-child(1) { animation-delay: 0.6s; }
.achievement-item:nth-child(2) { animation-delay: 0.7s; }
.achievement-item:nth-child(3) { animation-delay: 0.8s; }
.achievement-item:nth-child(4) { animation-delay: 0.9s; }

/* Efecto de borde animado */
.animated-border {
  position: relative;
  overflow: hidden;
}

.animated-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #29445A, transparent);
  animation: borderSlide 3s infinite;
}

@keyframes borderSlide {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Responsive para animaciones */
@media (max-width: 768px) {
  .modal-enter-active {
    animation: modalSlideIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
  
  .stagger-animate > * {
    animation-duration: 0.4s;
  }
}