﻿
:root {
    --border-nosotros: solid 2px #ccc;
}

.main-nosotros {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-content: center;
    width: 100%;
    padding:0 30px;
    text-align:justify;
}

    .main-nosotros > * {
        width: var(--page-width);
        font-size: 1.4rem;
        font-family: regular;
        line-height: 1.8rem;
        letter-spacing: .005rem;
    }

    .main-nosotros .nosotros-logo {
        text-align: center;
        margin-bottom: 50px;
    }

        .main-nosotros .nosotros-logo img {
            margin: auto;
        }


    .main-nosotros .nosotros-desc {
        margin-bottom: 100px;
    }

    .main-nosotros .nosotros-options {
        border-top: var(--border-nosotros);
        cursor:pointer;
    }

        .main-nosotros .nosotros-options > * {
            border-bottom: var(--border-nosotros);
            padding: 20px 30px 0 30px;
        }

        .main-nosotros .nosotros-options .option-description {
            height: 0;
            margin-bottom: 0;
            transition: height .3s ease, margin-bottom .3s ease;
            overflow: hidden;
        }

        .main-nosotros .nosotros-options .active .option-description {
            height: 90px;
            margin-bottom: 40px;
        }

        .main-nosotros .nosotros-options .option-title {
            font-size: 1.7rem;
            font-family: bold;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
            z-index: 1;
        }

            .main-nosotros .nosotros-options .option-title::after {
                content: '';
                position: absolute;
                bottom: -4px;
                left: 50%;
                width: 100%;
                height: 4px;
                background: var(--green-light);
                transform-origin: center;
                transform: translateX(-50%) scaleX(0) skewX(20deg);
                transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
                z-index: -1;
            }

            .main-nosotros .nosotros-options >*:hover .option-title::after,
            .main-nosotros .nosotros-options .active .option-title::after {
                transform: translateX(-50%) scaleX(1) skewX(0deg);
            }
