/* Estilos personalizados para APPS CHILE */

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Variables de color basadas en el logo */
:root {
    --color-primary-green: #78C89C; /* Verde del logo */
    --color-dark-text: #2c2c2c; /* Negro/gris oscuro para texto principal */
    --color-light-bg: #f8f8f8;
    --color-gray-border: #e2e8f0; /* Equivalente a border-gray-200 */
}

/* Clases de utilidad para colores personalizados */
.bg-primary-green { background-color: var(--color-primary-green); }
.text-primary-green { color: var(--color-primary-green); }
.border-primary-green { border-color: var(--color-primary-green); }
.text-dark-text { color: var(--color-dark-text); }
.bg-light-bg { background-color: var(--color-light-bg); }

/* Estilo para el fondo de la sección Hero */
.hero-bg {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(248,248,248,1) 100%);
}

/* Animación de los íconos de servicios */
.service-icon-wrapper {
    background-color: var(--color-primary-green);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.service-card:hover .service-icon-wrapper {
    background-color: var(--color-dark-text); /* Cambia a negro al pasar el mouse */
    transform: translateY(-5px);
}

/* Animación de las tarjetas de servicios */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--color-gray-border);
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px -5px rgba(0,0,0,0.1), 0 5px 10px -5px rgba(0,0,0,0.04);
}

/* Estilo para el botón principal (Call to Action) */
.btn-primary {
    background-color: var(--color-primary-green);
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
    background-color: #5BAA7D; /* Un verde un poco más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Tamaño responsivo del logo en Hero */
.hero-logo {
    max-width: 280px;
    width: 100%;
    height: auto;
}
@media (min-width: 768px) {
    .hero-logo {
        max-width: 400px;
    }
}

.container {
    max-width: 1280px !important;
    margin-left: auto;
    margin-right: auto;
}