/* color naranja icono = F6B128 */

section.relative.h-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 4rem;
}

section.relative.h-screen .absolute.inset-0 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

section.relative.h-screen .relative.z-10 h1 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: inherit;
  margin-bottom: 1rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 1s ease-out;
}

section.relative.h-screen .relative.z-10 p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  animation: fadeInUp 1s ease-out 0.2s both;
}

section.relative.h-screen .relative.z-10 h1,
section.relative.h-screen .relative.z-10 p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

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

section.relative.h-screen .relative.z-10 .flex > a {
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  margin: 0.5rem;
  min-width: 180px;
}

section.relative.h-screen .relative.z-10 .flex > a:first-child {
  /* background-color: var(--primary); */
  background-color: #f6e428;
  color: #5f3b00;
}

section.relative.h-screen .relative.z-10 .flex > a:first-child:hover {
  background-color: #f6b128;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(57, 125, 234, 0.3);
}

section.relative.h-screen .relative.z-10 .flex > a:last-child {
  background-color: #f6e428;
  color: #5f3b00;
}

section.relative.h-screen .relative.z-10 .flex > a:last-child:hover {
  background-color: #d97706;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(234, 166, 57, 0.3);
}

/* Quick Info & Services Cards - Hover y sombras */
.bg-white.p-8.rounded-xl.shadow-lg {
  background-color: var(--bg-white);
  border-radius: 1rem;
  box-shadow: 0 4px 20px var(--shadow);
  transition: all 0.3s ease;
  padding: 2rem;
  border: 1px solid rgba(229, 231, 235, 0.5);
}

.bg-white.p-8.rounded-xl.shadow-lg:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(57, 125, 234, 0.2);
}

.bg-white.p-8.rounded-xl.shadow-lg .w-16.h-16 {
  width: 4rem;
  height: 4rem;

  background-color: #d78521;
  /* background-color: rgba(57, 125, 234, 0.1); */
  /* background-color: rgba(57, 125, 234, 0.1); */
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  transition: background-color 0.3s ease;
}

.bg-white.p-8.rounded-xl.shadow-lg .w-16.h-16:hover {
  background-color: #987805;
}

.bg-white.p-8.rounded-xl.shadow-lg h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-dark);
  transition: color 0.3s ease;
}

.bg-white.p-8.rounded-xl.shadow-lg h3:hover {
  color: #5f3b00;
}

/* Services Grid Cards - Con hover y borde sutil */
.grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6 > div {
  background-color: var(--bg-white);
  border-radius: 1rem;
  box-shadow: 0 4px 16px var(--shadow);
  transition: all 0.3s ease;
  padding: 1.5rem;
  border: 1px solid rgba(229, 231, 235, 0.5);
  text-align: center;
}

.grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6 > div:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: rgba(57, 125, 234, 0.3);
}

.grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6 > div i {
  font-size: 2.5rem;
  color: #f6b128;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6 > div:hover i {
  color: var(--secondary);
}

.grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6 > div h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
  transition: color 0.3s ease;
}

.grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6 > div:hover h4 {
  color: #5f3b00;
}

/* Stats Section - Gradiente vibrante */
.py-20.bg-gradient-to-r.from-primary.to-blue-600 {
  background-color: #5f3b00;
  color: white;
  padding: 4rem 1rem;
}

/* ??f9e888  */

.py-20.bg-gradient-to-r.from-primary.to-blue-600 .counter {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  animation: countUp 1s ease-out;
}

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

/* Gallery Section - Hover con zoom y overlay */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.03);
}

.gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(57, 125, 234, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item .overlay i {
  color: white;
  font-size: 2rem;
  transition: transform 0.3s ease;
}

.gallery-item:hover .overlay i {
  transform: scale(1.2);
}

/* CTA Section - Botón destacado */
.py-20.bg-primary {
  background-color: var(--primary);
  padding: 4rem 1rem;
  text-align: center;
}

.py-20.bg-primary h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: white;
}

.py-20.bg-primary p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.py-20.bg-primary .bg-white {
  background-color: white !important;
  color: var(--primary) !important;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.py-20.bg-primary .bg-white:hover {
  background-color: #f3f4f6 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-options p {
  color: #452a22;
}

@media (max-width: 639px) {
  section.relative.h-screen .relative.z-10 h1 {
    font-size: 1.875rem; /* text-3xl */
    line-height: 1.2;
  }

  section.relative.h-screen .relative.z-10 p {
    font-size: 1rem; /* text-base */
    line-height: 1.5;
  }
}