.caracteristicas {
    margin-top: 40px;
    margin-bottom: 100px;

    .grid-servicios {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        padding-bottom: 20px;

        .h3 {
            padding-bottom: 20px;
            /* color: var(--primario); */
        }

        .p {
            text-align: justify;
        }

        .ul {
            list-style-position: inside;
            text-align: left;
        }

        .sectores {
            text-align: center;
            padding-bottom: 60px;

            .icono-servicios {
                color: var(--primario);

            }

            .info-servicios {
                color: var(--primario);

                .info-servicios-titulo {
                    font-size: 18px;
                }
            }


        }


    }

    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding-top: 40px;

        .previews {
            border-radius: 5px;
            overflow: hidden;
            width: 100%;
            height: 100%;
            position: relative;

            .thumb {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                vertical-align: top;
                transition: 0.5s ease all;

                &.active {
                    opacity: 1;
                }
            }


        }

        .tabs {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;

            .tab {
                background: #fff;
                border-radius: 5px;
                display: grid;
                grid-template-columns: auto 1fr;
                cursor: pointer;
                overflow: hidden;

                &.active {
                    background: var(--primario);
                    color: #fff;

                    .icono {
                        color: #fff;
                    }
                }

                .icono {
                    display: flex;
                    align-items: center;
                    padding: 20px;
                    color: var(--primario);

                    svg {
                        width: 30px;
                        height: 30px;
                    }
                }

                .info {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    text-align: justify;
                    /* font-size: clamp(12px, 3vw, 16px); */

                    .info-titulo {
                        font-size: 16px;
                    }

                    .info-parrafo {
                        font-size: 16px;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        & {
            margin-top: 40px;
            margin-bottom: 40px;

            .grid {
                gap: 10px;

                .tabs {
                    gap: 5px;

                    .tab {
                        .icono {
                            display: none;
                            padding: 5px;

                            svg {
                                width: 20px;
                                height: 20px;
                            }
                        }

                        .info {
                            padding: 5px;
                            gap: 5px;

                            .info-titulo {
                                font-size: 11px;
                            }

                            .info-parrafo {
                                font-size: 10px;
                            }
                        }
                    }
                }
            }

            .grid-servicios {
                display: grid;
                grid-column: 1/-1;
                grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
                gap: 10px;
                padding-bottom: 10px;

                .h3 {
                    font-size: 11px;
                }

                .p {
                    font-size: 10px;
                }

                .ul {
                    font-size: 10px;
                }

                .sectores {
                    padding-bottom: 30px;

                    .icono-servicios {
                        svg {
                            width: 25px;
                            height: 25px;
                        }
                    }

                    .info-servicios {
                        .info-servicios-titulo {
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 700px) {
        & {
            .grid {
                grid-template-columns: 1fr;
                gap: 5px;

                .tabs {
                    grid-template-columns: 1fr 1fr;
                    gap: 5px;
                }

                .previews {
                    height: 400px;
                }
            }
        }
    }

}