/* ===========================
   Poppins - Font Family
   =========================== */

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Thin.woff2") format("woff2"),
        url("../fonts/Poppins-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-ThinItalic.woff2") format("woff2"),
        url("../fonts/Poppins-ThinItalic.woff") format("woff");
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-ExtraLight.woff2") format("woff2"),
        url("../fonts/Poppins-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-ExtraLightItalic.woff2") format("woff2"),
        url("../fonts/Poppins-ExtraLightItalic.woff") format("woff");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Light.woff2") format("woff2"),
        url("../fonts/Poppins-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-LightItalic.woff2") format("woff2"),
        url("../fonts/Poppins-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.woff2") format("woff2"),
        url("../fonts/Poppins-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Italic.woff2") format("woff2"),
        url("../fonts/Poppins-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Medium.woff2") format("woff2"),
        url("../fonts/Poppins-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-MediumItalic.woff2") format("woff2"),
        url("../fonts/Poppins-MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"),
        url("../fonts/Poppins-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-SemiBoldItalic.woff2") format("woff2"),
        url("../fonts/Poppins-SemiBoldItalic.woff") format("woff");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Bold.woff2") format("woff2"),
        url("../fonts/Poppins-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-BoldItalic.woff2") format("woff2"),
        url("../fonts/Poppins-BoldItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-ExtraBold.woff2") format("woff2"),
        url("../fonts/Poppins-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-ExtraBoldItalic.woff2") format("woff2"),
        url("../fonts/Poppins-ExtraBoldItalic.woff") format("woff");
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Black.woff2") format("woff2"),
        url("../fonts/Poppins-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-BlackItalic.woff2") format("woff2"),
        url("../fonts/Poppins-BlackItalic.woff") format("woff");
    font-weight: 900;
    font-style: italic;
}


body {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0px 0px rgba(255, 255, 255, 0);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent);
}

.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.8),
            transparent,
            rgba(255, 255, 255, 0.3));
}





/* 1. El contenedor principal de la tarjeta
.sectionCard {
    padding-block: min(20vh, 2rem);
    width: calc(min(76.5rem, 90%));
    margin-inline: auto;
    color: #111;

    .container {
        margin-top: 5em;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 2rem;

        .card {
            &:nth-child(1) .box .icon .iconBox {
                background: #d3b19a;
            }

            &:nth-child(2) .box .icon .iconBox {
                background: #70b3b1;
            }

            &:nth-child(3) .box .icon .iconBox {
                background: #d05fa2;
            }

            ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 0.625rem;

                li {
                    text-transform: uppercase;
                    background: var(--clr-tag);
                    color: #282828;
                    font-weight: 700;
                    font-size: 0.8rem;
                    padding: 0.375rem 0.625rem;
                    border-radius: 0.188rem;
                }

                .branding {
                    color: darken(#d3b19a, 40%);
                }

                .packaging {
                    color: darken(#70b3b1, 40%);
                }

                .marketing {
                    color: darken(#d05fa2, 40%);
                }
            }

            .content {
                padding: 0.938rem 0.625rem;

                h3 {
                    text-transform: capitalize;
                    font-size: clamp(1.5rem, 1.3909rem + 0.4364vw, 1.8rem);
                }

                p {
                    margin: 0.625rem 0 1.25rem;
                    color: #565656;
                }
            }
        }

        .card-inner {
            position: relative;
            width: inherit;
            height: 18.75rem;
            background: var(--clr);
            border-radius: 1.25rem;
            border-bottom-right-radius: 0;
            overflow: hidden;

            .box {
                width: 100%;
                height: 100%;
                background: #fff;
                border-radius: 1.25rem;
                overflow: hidden;

                .imgBox {
                    position: absolute;
                    inset: 0;
                    border: 1px solid red;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border: 1px solid red;
                    }
                }

                .icon {
                    position: absolute;
                    bottom: -0.375rem;
                    right: -0.375rem;
                    width: 6rem;
                    height: 6rem;
                    background: var(--clr);
                    border-top-left-radius: 50%;
                    border: 1px solid red;

                    &:hover .iconBox {
                        transform: scale(1.1);
                    }

                    &::before {
                        position: absolute;
                        content: "";
                        bottom: 0.3rem;
                        left: -1.25rem;
                        background: transparent;
                        width: 1.25rem;
                        height: 1.25rem;
                        border-bottom-right-radius: 1.25rem;
                        box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
                        border-right: 1px solid red;
                        border-bottom: 1px solid red;
                    }

                    &::after {
                        position: absolute;
                        content: "";
                        top: -1.24rem;
                        right: 0.3rem;
                        background: transparent;
                        width: 1.25rem;
                        height: 1.25rem;
                        border-bottom-right-radius: 1.25rem;
                        box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr);
                        border-right: 1px solid red;
                        border-bottom: 1px solid red;
                    }

                    .iconBox {
                        position: absolute;
                        inset: 0.625rem;
                        background: #282828;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        transition: 0.3s;

                        span {
                            color: #fff;
                            font-size: 1.5rem;
                        }
                    }
                }
            }
        }
    }
} */



/* --- ESTILOS ESPECÍFICOS PARA DIRECCIÓN COLEGIADA (DC) --- */

.dc-section {
    width: 100%;
    margin-inline: auto;
    color: #111;
}

.dc-container {
    /* Ajustamos para que se centre */
    display: flex;
    justify-content: center;
}

.dc-card {
    width: 100%;
    max-width: 800px;
    /* Ancho máximo de la tarjeta */
}

.dc-card-inner {
    position: relative;
    width: inherit;
    /* Cambié height fijo por min-height para que el texto no se corte si es largo */
    min-height: 18.75rem;
    background: var(--dc-clr, #fff);
    border-radius: 2.5rem;
    /* Más redondo */
    border-bottom-right-radius: 0;
    /* La esquina cortada */
    /* Quitamos overflow:hidden global para que la sombra del botón se vea, 
       pero lo manejamos internamente */
}

.dc-box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 2.5rem;
    border-bottom-right-radius: 0;
    padding: 3rem;
    /* Padding interno del contenido */
    padding-bottom: 4rem;
    /* Espacio extra abajo para no chocar con el botón */
    position: relative;
    border: 1px solid red;
}

/* El botón de la esquina */
.dc-icon {
    position: absolute;
    bottom: -0.375rem;
    right: -0.375rem;
    width: 6rem;
    height: 6rem;
    background: var(--dc-clr, #fff);
    border-top-left-radius: 50%;
    z-index: 10;
    border-top: 1px solid red;
    border-left: 1px solid red;
}

.dc-icon:hover .dc-icon-inner {
    transform: scale(1.1);
}

/* Pseudo-elemento: Curva Izquierda del botón */
.dc-icon::before {
    position: absolute;
    content: "";
    bottom: 0.3rem;
    left: -1.25rem;
    background: transparent;
    width: 1.25rem;
    height: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    /* La sombra debe ser del color de la tarjeta (#fff) */
    box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
}

/* Pseudo-elemento: Curva Superior del botón */
.dc-icon::after {
    position: absolute;
    content: "";
    top: -1.25rem;
    right: 0.3rem;
    background: transparent;
    width: 1.25rem;
    height: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    /* La sombra debe ser del color de la tarjeta (#fff) */
    box-shadow: 0.313rem 0.313rem 0 0.313rem var(--dc-clr, #fff);
    border-right: 1px solid red;
    border-bottom: 1px solid red;
}

/* El círculo con la flecha/imagen dentro del botón */
.dc-icon-inner {
    position: absolute;
    inset: 0.625rem;
    /* Aquí puedes cambiar el color del círculo del botón */
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    overflow: hidden;
}



/* Ocultar barra de scroll del carrusel horizontal */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Estilizar barra de scroll interna del texto */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #A09F9F;
    border-radius: 10px;
}