/* Main Stylesheet for Alejandre Design Project */

:root {
  color-scheme: light;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #fdfbf7;
  color: #334155;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.01em;
}

/* Hero Overlay */
.hero-overlay {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.45) 100%);
}

/* Grayscale Hover Effect */
.grayscale-hover {
  filter: grayscale(100%);
  transition: all 300ms ease;
}

.grayscale-hover:hover {
  filter: grayscale(0%);
  transform: scale(1.02);
}

/* Image Hover Scale */
img.hover-scale {
  transition: transform 500ms ease, filter 500ms ease;
}

img.hover-scale:hover {
  transform: scale(1.02);
}

/* Smooth Transitions */
a {
  transition: all 300ms ease;
}

/* Typography Enhancements */
.text-sage-600 {
  color: #8b9b7a;
}

.italic-serif {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

/* Custom Color Classes */
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-amber-600 { background-color: #d97706; }

.text-amber-200 { color: #fef08a; }
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-amber-600 { color: #d97706; }

.hover\:text-amber-600:hover { color: #d97706; }
.hover\:bg-amber-500:hover { background-color: #f59e0b; }
.hover\:border-amber-300:hover { border-color: #fcd34d; }
.hover\:text-amber-200:hover { color: #fef08a; }

/* Utility Classes */
.mx-auto { margin-left: auto; margin-right: auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-4 { margin-bottom: 1rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.grid { display: grid; }
.flex { display: flex; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Responsive Design */
@media (max-width: 640px) {
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:text-xs { font-size: 0.75rem; }
  .sm\:text-xl { font-size: 1.25rem; }
  .sm\:text-5xl { font-size: 3rem; }
  .sm\:text-6xl { font-size: 3.75rem; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:gap-6 { gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .lg\:text-6xl { font-size: 3.75rem; }
  .lg\:text-7xl { font-size: 4.5rem; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:gap-8 { gap: 2rem; }
}

/* Modal Animaciones images galería tnc*/
#image-modal { transition: opacity .18s ease; }
.modal-backdrop { opacity: 0; transition: opacity .22s ease; }
.modal-backdrop.open { opacity: 1; }
.modal-content { transform: translateY(8px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.modal-content.open { transform: translateY(0) scale(1); opacity: 1; }

/*  Start Whatsapp
============================= */

.apiWhatsapp {
  position: fixed;
  right: 15px;
  bottom: 35px;
  width: 175px;
  z-index: 1000;
}

.apiWhatsapp img{
  width: 100% !important;
  height: auto;
}

/*  End Whatsapp
============================= */