/* PF Digital - Custom Styles for Home Page (Hibotchat Inspired) */

/* General Body Styles (if needed, or can be scoped to home page container) */
/* body {
    font-family: 'Roboto', sans-serif; /* Asegurarse que la fuente base sea consistente 
} */

/* Helper Classes */
.text-primary-pf {
    color: var(--mud-palette-primary); /* Usar el primario del tema MudBlazor */
}

.text-secondary-pf {
    color: var(--mud-palette-secondary); /* Usar el secundario del tema MudBlazor */
}

.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-padding-sm {
    padding-top: 40px;
    padding-bottom: 40px;
}

.img-fluid-responsive {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Bordes redondeados para imágenes */
}

.text-highlight {
    color: var(--mud-palette-secondary); /* Teal para destacar texto */
    font-weight: bold;
}

/* Estilos para la sección Héroe */
.hero-section-pf {
    background-color: var(--mud-palette-primary-lighten); /* Un fondo suave, podría ser el primario o un degradado */
    color: var(--mud-palette-primary-text); /* Texto oscuro sobre fondo claro */
    /* Si el fondo es oscuro (ej: primario), el texto debería ser AppbarText o similar */
    padding: 80px 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

    .hero-section-pf .hero-title {
        font-size: 2.8rem; /* Tamaño grande para el título */
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 20px;
        color: var(--mud-palette-primary); /* Color primario para el título */
    }

    .hero-section-pf .hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 30px;
        color: var(--mud-palette-text-secondary); /* Gris para el subtítulo */
    }

    .hero-section-pf .hero-image-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Sección de Logos de Clientes */
.client-logos-section-pf {
    padding: 40px 0;
    background-color: var(--mud-palette-background-grey); /* Un gris muy claro */
}

    .client-logos-section-pf .client-logo {
        max-height: 60px; /* Ajustar según los logos */
        margin: 15px;
        filter: grayscale(100%);
        opacity: 0.7;
        transition: all 0.3s ease-in-out;
    }

        .client-logos-section-pf .client-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
        }

/* Secciones de Características (alternando imagen-texto) */
.feature-section-pf {
    display: flex;
    align-items: center;
}

    .feature-section-pf .feature-content .feature-title {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        color: var(--mud-palette-primary);
    }

    .feature-section-pf .feature-content .feature-description {
        font-size: 1.1rem;
        color: var(--mud-palette-text-secondary);
        margin-bottom: 20px;
    }

    .feature-section-pf .feature-content .mud-list-item {
        color: var(--mud-palette-text-secondary);
    }

    .feature-section-pf .feature-content .mud-icon-root { /* Estilo para iconos en listas */
        color: var(--mud-palette-secondary); /* Teal */
    }


/* Cómo Funciona */
.how-it-works-section-pf .step-item .step-icon {
    font-size: 3rem;
    color: var(--mud-palette-primary);
    margin-bottom: 15px;
}

.how-it-works-section-pf .step-item .step-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Integraciones */
.integrations-section-pf .integration-logo {
    display: inline-flex; /* Alinear icono y texto */
    align-items: center;
    padding: 8px 12px; /* Ajustar padding */
    margin: 8px; /* Ajustar margen */
    border-radius: 6px; /* Consistente con el tema */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil opcional */
    transition: transform 0.2s ease-in-out;
}

    .integrations-section-pf .integration-logo:hover {
        transform: scale(1.05); /* Reducir un poco el scale para que no sea tan brusco */
    }

    .integrations-section-pf .integration-logo .mud-icon-root { /* Si el icono está dentro del span */
        margin-right: 8px;
    }

/* CTA Final */
.cta-final-section-pf {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast-text); /* Contraste para el primario */
    padding: 60px 0;
    text-align: center;
}

    .cta-final-section-pf .cta-title {
        font-size: 2.2rem;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .cta-final-section-pf .cta-description {
        font-size: 1.1rem;
        margin-bottom: 30px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

/* Botones con un estilo más prominente como en Hibot */
.mud-button-large.cta-button-pf {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    /* text-transform: uppercase; /* Opcional */
    letter-spacing: 0.5px;
}