/* =========================
   BASE GLOBAL
   Este archivo debe cargarse antes que navbar, footer y CSS de cada página.
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --deep-green:#2F5D50;
    --sage:#8FAF9F;
    --cream:#F6F3EE;
    --beige:#EAE6DF;
    --warm-gray:#9E9E9E;

    --bg:var(--cream);
    --surface:#ffffff;
    --text:var(--deep-green);
    --muted:rgba(47,93,80,.72);
    --border:rgba(47,93,80,.18);
    --black:#1F2A26;
    --white:#ffffff;

    --shadow:0 18px 45px rgba(47,93,80,.13);
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter', system-ui, sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

.container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}

.btn-primary,
.btn-secondary{
    background:#2F5D50;
    color:#F6F3EE;
    padding:16px 30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    border-radius:999px;
    font-weight:900;
    transition:.3s;
    border:none;
    cursor:pointer;
    box-shadow:
        0 10px 24px rgba(47,93,80,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.btn-primary:hover,
.btn-secondary:hover{
    background:#376d5d;
    color:#ffffff;
    transform:translateY(-2px);
}

.section-heading{
    max-width:760px;
    margin:0 auto 50px;
    text-align:center;
}

.section-heading h2{
    color:var(--deep-green);
    font-size:clamp(34px, 5vw, 58px);
    line-height:1;
    letter-spacing:-2px;
    margin-bottom:18px;
}

.section-heading p{
    color:var(--muted);
    font-size:18px;
    line-height:1.6;
}

.eyebrow{
    display:inline-flex;
    margin-bottom:18px;
    padding:8px 14px;
    border-radius:999px;
    background:#EAE6DF;
    color:#2F5D50;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
}

@media(max-width:520px){
    .container{
        width:min(100% - 28px, 1180px);
    }

    .section-heading h2{
        letter-spacing:-1.5px;
    }
}