:root {
  --color-primario: #1976D2; /* Mapped from theme.css --color-primary-700 */
  --color-secundario: #4CAF50; /* Mapped from theme.css --color-secondary-DEFAULT */
  --color-cta: #4CAF50; /* Mapped from theme.css --color-secondary-500 */
  --color-footer-bg: #1565C0; /* Mapped from theme.css --color-primary-800 */
  --fuente-titulos: 'Poppins', sans-serif; /* Mapped from theme.css --font-family-heading */
  --fuente-texto: 'Montserrat', sans-serif; /* Mapped from theme.css --font-family-sans */
  --header-nav-height: 3.2rem;
  --body-bg-color: #FFFFFF;
}

body {
  font-family: var(--fuente-texto);
  line-height: 1.7;
  color: #374151; /* Tailwind gray-700 */
  background-color: var(--body-bg-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulos);
  line-height: 1.3;
  font-weight: 700;
}

/* Colores de Títulos */
#hero h1, #hero h2 { color: #ffffff; } /* Para la sección Hero */
#contacto h2 { color: #ffffff; } /* Para el H2 principal de la sección Contacto (tipo hero) */
/* Para secciones con fondo claro (el del body), los títulos usarán el color primario */
#nosotros h2, 
#servicios h2, 
#aviso_privacidad h2, 
.prose h3 /* Para los h3 dentro del aviso de privacidad */
{ 
  color: var(--color-primario); 
}

/* Offset del header para la primera sección de CADA página */
main > section:first-of-type {
    padding-top: var(--header-nav-height); 
}

/* Ajustes específicos para #hero si son necesarios más allá del padding-top general */
#hero {
    padding-bottom: 2rem; /* O el padding inferior que necesite el diseño del hero */
    /* El padding-top ya lo recibe de 'main > section:first-of-type' */
}

/* Estilos varios */
.hover-lift { transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.button-base { transition: background-color 0.3s ease-out, color 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out; }
.button-base:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.social-icon-footer { transition: color 0.3s ease-out, transform 0.3s ease-out; }
.social-icon-footer:hover { transform: translateY(-2px); color: var(--color-cta); }
.icono-servicio {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-cta);
}
#awiwiPromoModalContent {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}