/* Small additions on top of the provided Tailwind build */
html { scroll-behavior: smooth; }
section { scroll-margin-top: 96px; }

/* Improves tap targets on mobile */
.nav-link { padding: 0.25rem 0; }

/* Hero background animation */
@keyframes dramaticMove {
  0% {
    transform: scale(1.3) translate(0, 0) rotate(0deg);
  }
  25% {
    transform: scale(1.4) translate(-80px, -30px) rotate(-1deg);
  }
  50% {
    transform: scale(1.5) translate(-120px, -50px) rotate(0deg);
  }
  75% {
    transform: scale(1.4) translate(-60px, -20px) rotate(1deg);
  }
  100% {
    transform: scale(1.3) translate(0, 0) rotate(0deg);
  }
}

.animate-dramatic-move {
  animation: dramaticMove 25s ease-in-out infinite;
}

/* Status message for the contact form */
#form-status { display: none; }
#form-status.show { display: block; }



/* Modal base */
.modal-overlay[aria-hidden="true"] { display: none; }
.modal-overlay[aria-hidden="false"] { display: flex; }
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2px);
  z-index: 60;
  padding: 1rem;
  align-items: center;
  justify-content: center;
}
.modal-panel {
  width: min(920px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 232, 240, 1);
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.35);
}
.modal-close-btn {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}
body.modal-open { overflow: hidden; }

/* Admin pages */
.admin-shell { min-height: 100vh; background: #f8fafc; }
.admin-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
.admin-input { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.6rem 0.75rem; width: 100%; }
.admin-label { font-size: 0.875rem; color: #334155; }
.admin-btn { border-radius: 0.5rem; padding: 0.6rem 0.9rem; border: 1px solid #003366; background: #003366; color: #fff; }
.admin-btn.secondary { background: #fff; color: #003366; }
.admin-btn.danger { background: #b91c1c; border-color: #b91c1c; }


/* Utilities */
/* More homogeneous justification on different screen sizes */
.text-justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
#modalBody p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}



/* Tipografía justificada homogénea (principalmente en Sobre Nosotros) */


#nosotros .text-justify, #nosotros li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}


/* Nota: el modal se controla mediante aria-hidden en .modal-overlay.
   No sobrescribir display aquí, porque impediría que se muestre al abrirlo. */


/* Ajustes de header en móvil (menú hamburguesa y alto del header) */
@media (max-width: 767px) {
  /* Evita que el SVG se “estire” en algunos navegadores móviles */
  #mobileMenuBtn {
    line-height: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #mobileMenuBtn svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px;
    max-height: 20px;
  }

  /* Reduce ligeramente el espacio visual del header en pantallas pequeñas */
  header nav { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}


/* WhatsApp flotante */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.28);
  z-index: 70;
}
.whatsapp-float:hover { filter: brightness(0.95); }
.whatsapp-float:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.35);
  outline-offset: 4px;
}
.whatsapp-float svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
}

@media (max-width: 767px) {
  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }
}

/* Modal media sizing (keeps photos proportional on all screens) */
.modal-media{flex:0 0 260px;width:260px;max-width:100%;}
.modal-media .media-box{height:260px;}
@media (max-width: 767px){
  .modal-media{flex-basis:100%;width:100%;}
  .modal-media .media-box{height:220px;}
}
#modalBody img{max-width:100%;height:auto;}


/* --- WhatsApp Floating Button & Tooltip --- */
.whatsapp-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* El botón verde redondo */
.whatsapp-btn {
  background-color: #25D366;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
  color: white;
}
.whatsapp-btn:hover {
  transform: scale(1.1);
}

/* La burbuja de texto (Tooltip) */
.whatsapp-tooltip {
  background-color: white;
  color: #333;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  font-size: 0.9rem;
  line-height: 1.3;
  position: relative;
  /* Animación de entrada suave */
  animation: slideIn 0.5s ease-out;
}

/* El "piquito" de la burbuja que apunta al botón */
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent white;
}

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

/* En móviles muy pequeños, ocultamos el texto para no tapar contenido */
@media (max-width: 640px) {
  .whatsapp-tooltip {
    display: none; 
  }
}

/* Asegura que el modal esté por encima de todo */
#modalOverlay {
  z-index: 9999 !important;
}

/* Para que las imágenes de las tarjetas no se estiren */
.publicacion-card img {
  object-fit: cover;
}

/* Efecto suave al pasar el mouse */
article {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Limitar texto a 3 líneas (requiere soporte moderno o plugin line-clamp) */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Tailwind-like: separación vertical entre hijos directos */
.space-y-0  > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
.space-y-2  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }   /* 8px */
.space-y-3  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }  /* 12px */
.space-y-4  > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }     /* 16px */
.space-y-5  > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }  /* 20px */
.space-y-6  > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }   /* 24px */
.space-y-8  > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }     /* 32px */
.space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.5rem; }   /* 40px */
.space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem; }     /* 48px */
.space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem; }     /* 64px */
.space-y-20 > :not([hidden]) ~ :not([hidden]) { margin-top: 5rem; }     /* 80px */