/* Estilos específicos de nosotros.html trasladados desde el HTML */

/* =====================================================
           HERO 
        ====================================================== */

        .about-page-hero{
            position: relative;
            min-height: 520px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }


        .about-page-hero-bg{
            position: absolute;
            inset: 0;

            background-image:
                linear-gradient(
                    90deg,
                    rgba(10, 30, 29, 0.92),
                    rgba(10, 30, 29, 0.65),
                    rgba(10, 30, 29, 0.25)
                ),
                url("../img/ig2.jpg");

            background-size: cover;
            background-position: center;
        }


        .about-page-hero-content{
            position: relative;
            z-index: 2;
            padding: 110px 0 90px;
        }


        .about-page-hero-text{
            max-width: 720px;
            color: white;
        }


        .about-page-hero-text .eyebrow{
            color: rgba(255,255,255,0.85);
        }


        .about-page-hero-text h1{
            margin: 18px 0;
            font-family: "Playfair Display", serif;
            font-size: clamp(48px, 7vw, 86px);
            line-height: 0.98;
        }


        .about-page-hero-text h1 em{
            font-style: italic;
        }


        .about-page-hero-text p{
            max-width: 650px;
            font-size: 18px;
            line-height: 1.8;
            color: rgba(255,255,255,0.88);
        }


        /* =====================================================
           
        ====================================================== */

        .about-page{
            padding-top: 100px;
        }


        .about-page-grid{
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
            gap: 80px;
            align-items: center;
        }


        .about-page-image{
            position: relative;
            overflow: hidden;
            border-radius: 4px;
        }


        .about-page-image img{
            width: 100%;
            display: block;
            aspect-ratio: 4 / 5;
            object-fit: cover;
        }


        .about-page-content{
            max-width: 700px;
        }


        .about-page-content h2{
            margin: 15px 0 25px;
        }


        .about-page-content p{
            line-height: 1.85;
        }


        /* =====================================================
           VISION / MISION
        ====================================================== */

        .mission-grid{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            margin-top: 45px;
            padding-top: 35px;
            border-top: 1px solid rgba(0,0,0,0.12);
        }


        .mission-grid h3{
            margin-bottom: 12px;
            color: #1a2c25;
        }


        .mission-grid p{
            margin: 0;
            color: #4d5a54;
            font-size: 15px;
            line-height: 1.75;
        }


        /* =====================================================
           NUESTRO ESTÁNDAR
        ====================================================== */

        .about-standards-page{
            margin-top: 110px;
            padding: 80px 0;
            background: #eef3f1;
        }


        .about-standards-grid{
            display: grid;
            grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
            gap: 80px;
            align-items: start;
        }


        .about-standards-grid h2{
            margin-top: 15px;
        }


        .about-highlights{
            margin: 0;
            padding: 0;
            list-style: none;
        }


        .about-highlights li{
            display: flex;
            gap: 18px;
            align-items: flex-start;
            padding: 22px 0;
            border-bottom: 1px solid rgba(0,0,0,0.10);
            line-height: 1.7;
        }


        .about-highlights li:first-child{
            padding-top: 0;
        }


        .highlight-icon{
            flex: 0 0 auto;
            font-size: 18px;
        }


        /* =====================================================
           WHATSAPP
        ====================================================== */

        .whatsapp-float{
            position: fixed;
            right: 25px;
            bottom: 25px;
            z-index: 1000;
        }


        /* =====================================================
           RESPONSIVE
        ====================================================== */

        @media (max-width: 900px) {

            .about-page-grid{
                grid-template-columns: 1fr;
                gap: 50px;
            }


            .about-page-image{
                max-width: 650px;
                margin: 0 auto;
            }


            .about-standards-grid{
                grid-template-columns: 1fr;
                gap: 45px;
            }

        }


        @media (max-width: 600px) {

            .about-page-hero{
                min-height: 470px;
            }


            .about-page-hero-content{
                padding: 90px 0 70px;
            }


            


            .mission-grid{
                grid-template-columns: 1fr;
                gap: 30px;
            }


            .about-standards-page{
                margin-top: 70px;
                padding: 60px 0;
            }

        }