/* Componentes reutilizables para simplificar el desarrollo */

/* Botones */
.btn-primary {
  @apply px-6 py-3 rounded-md text-sm font-bold transition-colors duration-300;
  background-color: var(--header-button-bg);
  color: var(--header-button-text);
  border: 1px solid white;
}

.btn-primary:hover {
  background-color: var(--header-link-hover);
  color: black;
}

.btn-secondary {
  @apply inline-block px-4 py-2 rounded-md font-bold text-sm hover:opacity-80 transition-colors duration-300;
  background-color: var(--services-button-bg);
  color: var(--services-button-text);
}

/* Cards de servicios */
.service-card {
  @apply flex flex-col items-center;
}

.service-image {
  @apply border-[6px] border-[#f2f2f2] rounded-[35%] overflow-hidden shadow-xl bg-white w-28 h-28 sm:w-36 sm:h-36 mb-6;
}

.service-image img {
  @apply w-full h-full object-cover rounded-[35%];
}

/* Formularios - DESHABILITADO para mantener diseño original */
/*
.form-input {
  @apply w-full p-4 rounded-md border placeholder-gray-500 focus:ring-2;
  border-color: var(--contact-input-border);
  background-color: var(--contact-input-bg);
  color: var(--contact-text);
}

.form-input:focus {
  ring-color: var(--contact-button-text);
}
*/

/* Navegación */
.nav-link {
  @apply text-sm font-medium transition-colors duration-300;
  color: var(--header-link-color);
}

.nav-link:hover {
  color: var(--header-link-hover);
  transform: translateY(-2px);
}

/* Layout containers */
.container-main {
  @apply w-full max-w-screen-xl mx-auto px-2 md:px-3;
  box-sizing: border-box;
}

.container-footer {
  @apply w-full max-w-screen-xl mx-auto px-6 md:px-8;
  box-sizing: border-box;
  margin-left: 75px;
  margin-right: 75px;
}

.section-padding {
  @apply py-16 sm:py-20;
}

/* Contact icons */
.contact-icon {
  @apply group flex flex-col items-center bg-white text-gray-700 p-5 m-3 rounded-full shadow-md hover:bg-gray-100 transition-colors duration-300 w-40;
}

.contact-icon-phone:hover .material-icons,
.contact-icon-phone:hover span {
  color: #ddb373;
}

.contact-icon-email:hover .material-icons,
.contact-icon-email:hover span {
  color: #16a34a;
}

.contact-icon-whatsapp:hover .material-icons,
.contact-icon-whatsapp:hover span {
  color: #16a34a;
}