@charset "utf-8";
/* CSS Document */

/*==================================================
        TRANSPARENCY PAGE
        LIMONES PERUANOS
==================================================*/

:root{

    --green:#167C43;
    --green-dark:#0E6032;
    --yellow:#E8C547;
    --gray:#666;
    --light:#f8f9fa;
    --shadow:0 15px 40px rgba(0,0,0,.08);

}

/*==================================================
GENERAL
==================================================*/

body{

    font-family:'Poppins',sans-serif;
    background:#fff;
    color:#333;

}

.container{

    width:min(1180px,90%);
    margin:auto;

}

section{

    padding:90px 0;

}

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

.page-hero{

    position:relative;

    height:55vh;

    min-height:420px;

    overflow:hidden;

}

.page-hero img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.page-hero .overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.55);

}

.hero-content{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    color:#fff;

    width:90%;

}

.hero-content h1{

    font-size:58px;
    font-weight:800;

    margin-bottom:15px;

}

.hero-content p{

    font-size:22px;

    opacity:.95;

}	

/*==================================================
INTRO
==================================================*/

.transparency-intro .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.intro-image img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.intro-text span{

    color:var(--green);

    letter-spacing:3px;

    font-weight:700;

}

.intro-text h2{

    margin:15px 0 25px;

    font-size:42px;

    color:#222;

}

.intro-text p{

    color:var(--gray);

    line-height:1.9;

    font-size:17px;

}


/*==================================================
PRINCIPLES
==================================================*/

.principles{

    background:#f8faf9;

}

.principles h2{

    text-align:center;

    margin-bottom:60px;

    font-size:42px;

}

.principles-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.principle-card{

    background:#fff;

    padding:45px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.principle-card:hover{

    transform:translateY(-10px);

}

.principle-card i{

    font-size:60px;

    color:var(--green);

    margin-bottom:20px;

}

.principle-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.principle-card p{

    color:#666;

    line-height:1.8;

}

/*==================================================
REPORT
==================================================*/

.report-section{

    background:#fff;

}

.report-card{

    max-width:850px;

    margin:auto;

    background:#fff;

    border-radius:25px;

    box-shadow:var(--shadow);

    padding:60px;

    text-align:center;

    border-top:8px solid var(--green);

}

.report-card>i{

    font-size:70px;

    color:var(--green);

}

.report-card h2{

    margin:20px 0;

    font-size:38px;

}

.report-card p{

    color:#666;

    line-height:1.9;

}


.contact-box{

    margin-top:40px;

    background:var(--light);

    border-radius:15px;

    padding:35px;

}

.contact-box h3{

    color:var(--green);

    font-size:28px;

    margin-bottom:15px;

}

.contact-box p{

    font-weight:600;

}

/*==================================================
QUOTE
==================================================*/

.quote{

    background:linear-gradient(135deg,#167C43,#0E6032);

    color:#fff;

    text-align:center;

}

.quote h2{

    font-size:46px;

    margin-bottom:20px;

}

.quote p{

    font-size:20px;

    max-width:850px;

    margin:auto;

    line-height:1.8;

}


.principle-card,
.report-card,
.intro-image img{

    transition:.35s;

}

.intro-image img:hover{

    transform:scale(1.03);

}

.report-card:hover{

    transform:translateY(-5px);

}

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

@media(max-width:991px){

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:18px;

}

.transparency-intro .container{

    grid-template-columns:1fr;

}

.principles-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.principles-grid{

    grid-template-columns:1fr;

}

.hero-content h1{

    font-size:34px;

}

.hero-content p{

    font-size:16px;

}

.intro-text h2{

    font-size:32px;

}

.report-card{

    padding:35px;

}

.quote h2{

    font-size:34px;

}

.contact-box h3{

    font-size:22px;

}

}