/* ============================================= */
/* PAE Component: Fases del Proceso              */
/* ============================================= */

:root {
    --pae-color-fp-col11: #C67036;
    --pae-color-fp-col12: #F7F1ED;
    --pae-color-fp-col13: #efd9cb;
    --pae-color-fp-col21: #0BBBEF;
    --pae-color-fp-col22: #DFF2F7;
    --pae-color-fp-col23: #c9ecf2;
    --pae-color-fp-col31: #1ca05a;
    --pae-color-fp-col32: #EBF7F2;
    --pae-color-fp-col33: #d1eddb;
}

.pae-process-steps {
    padding: var(--pae-spacing-xxl) 0;
    background-color: var(--pae-color-surface); /* Fondo blanco */
}

/* Barra de Título con forma de píldora */
.pae-process-steps__title-bar {
    display: inline-flex; /* Se ajusta al ancho del contenido */
    align-items: center;
    gap: var(--pae-spacing-md);
    border-radius: 50px; /* Bordes muy redondeados */
    padding: var(--pae-spacing-sm);
    padding-right: var(--pae-spacing-xl);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    margin-bottom: var(--pae-spacing-xxl);
}


.pae-process-steps__title-marker {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--pae-color-surface); /* Círculo blanco */
}

.pae-process-steps__title {
    font-size: var(--pae-font-size-h0);
    color: var(--pae-color-text-light);
    margin: 0;
}


/* Rejilla de Pasos */
.pae-process-steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--pae-spacing-xl);
    margin-bottom: var(--pae-spacing-xxl);
}

.pae-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pae-spacing-lg);
    text-align: center;
}

.pae-process-step--is-clickable {
    cursor: pointer;
    transition: transform 0.2s ease-out;
}

    .pae-process-step--is-clickable:hover {
        transform: scale(1.03);
    }

.pae-process-step__icon-placeholder {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1px solid var(--pae-color-border);
}

.pae-process-col11 {
    background-color: var(--pae-color-fp-col11);
}

.pae-process-col12 {
    background-color: var(--pae-color-fp-col12);
}

    .pae-process-col12:hover {
        background-color: var(--pae-color-fp-col13);
    }

.pae-process-col21 {
    background-color: var(--pae-color-fp-col21);
}

.pae-process-col22 {
    background-color: var(--pae-color-fp-col22);
}

    .pae-process-col22:hover {
        background-color: var(--pae-color-fp-col23);
    }

.pae-process-col31 {
    background-color: var(--pae-color-fp-col31);
}

.pae-process-col32 {
    background-color: var(--pae-color-fp-col32);
}

    .pae-process-col32:hover {
        background-color: var(--pae-color-fp-col33);
    }

.pae-process-step__label {
    font-size: var(--pae-font-size-p);
    font-weight: var(--pae-font-weight-bold);
    color: var(--pae-color-text-primary);
    line-height: 1.4;
    max-width: 200px; /* Evita que el texto se haga demasiado ancho */
}

/* ============================================= */
/* PAE Component: Icono con Texto Destacado      */
/* ============================================= */


.pae-feature-card__title {
    color: var(--pae-color-text-light);
    text-align:center;
}
.pae-icon-feature .pae-container {
    display: flex;
    align-items: center; /* Centra verticalmente el icono y el texto */
    gap: var(--pae-spacing-xl);
}

/* Columna del Icono */
.pae-icon-feature__icon-wrapper {
    /* Ocupa el 25% del espacio y no se estira ni encoge */
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
}

.pae-icon-feature__icon-background {
    width: 200px; /* Tamaño del círculo */
    height: 200px;
    border-radius: 50%;
    background-color: var(--pae-color-surface); /* Fondo gris claro */
    display: grid;
    place-items: center;
    padding: var(--pae-spacing-xl); /* Espacio interno para el icono */
}

.pae-icon-feature__icon {
    max-width: 100%;
    height: auto;
}

/* Columna de Texto */
.pae-icon-feature__text-wrapper {
    /* Ocupa el espacio restante */
    flex: 1;
}


.pae-icon-feature__text {
    font-size: var(--pae-font-size-h2);
    color: var(--pae-color-text-primary);
    text-align: justify;
}


/* ============================================= */
/* PAE Component: Vista Móvil (Responsivo)       */
/* ============================================= */

@media screen and (max-width: 48em) {

    .pae-process-steps {
        padding: var(--pae-spacing-sm) 0;
    }

    .pae-icon-feature .pae-container {
        flex-direction: column;
        s text-align: center;
        gap: 0rem;
    }

    .pae-icon-feature__icon-wrapper {
        flex-basis: auto;
        margin-bottom: var(--pae-spacing-lg);
    }

    .pae-icon-feature__icon-background {
        width: 150px;
        height: 150px;
    }

    .pae-icon-feature__text {
        text-align: justify;
    }
}