/* ==========================================================
   BASE.CSS
   ROOMS 2026
========================================================== */

/* ---------- VARIABLES ---------- */

:root {

    --color-primary: #028330;
    --color-primary-dark: #016826;

    --color-text: #222222;
    --color-text-light: #666666;

    --color-background: #ffffff;
    --color-background-alt: #f7f8f8;

    --color-border: #e5e5e5;

    --container: 1200px;

    --radius: 12px;

    --transition: .25s ease;

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

}


/* ---------- RESET ---------- */

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


/* ---------- HTML ---------- */

html{

    scroll-behavior:smooth;
    font-size:16px;

}


/* ---------- BODY ---------- */

body{

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color:var(--color-text);

    background:var(--color-background);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}


/* ---------- IMATGES ---------- */

img{

    display:block;
    width:100%;
    height:auto;

}


/* ---------- ENLLAÇOS ---------- */

a{

    color:inherit;
    text-decoration:none;
    transition:var(--transition);

}


/* ---------- LLISTES ---------- */

ul,
ol{

    list-style:none;

}


/* ---------- TIPOGRAFIA ---------- */

h1,
h2,
h3,
h4{

    font-weight:700;
    line-height:1.15;
    color:var(--color-text);

}

h1{

    font-size:clamp(3rem,7vw,5rem);

}

h2{

    font-size:clamp(2rem,4vw,3rem);

}

h3{

    font-size:1.4rem;

}

p{

    margin-bottom:1.2rem;
    color:var(--color-text-light);

}

strong{

    color:var(--color-text);

}


/* ---------- CONTENIDOR ---------- */

.container{

    width:min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline:auto;

}


/* ---------- SECCIONS ---------- */

section{

    padding:6rem 0;

}


/* ---------- BOTONS ---------- */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.5rem;

    padding:1rem 2rem;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

}

.btn:hover{

    background:var(--color-primary-dark);

    transform:translateY(-2px);

}


/* ---------- TARGETES ---------- */

.card{

    background:#fff;

    border:1px solid var(--color-border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


/* ---------- UTILITATS ---------- */

.text-center{

    text-align:center;

}

.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}

.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}


/* ---------- RESPONSIVE ---------- */

@media (max-width:768px){

    section{

        padding:4rem 0;

    }

}