/* =====================================================
   DIRECTORIO DE RETIROS
   DESIGN SYSTEM v1
===================================================== */

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

:root{

    /* Colores */

    --color-primary:#2E5E4E;
    --color-secondary:#D6B36A;

    --color-bg:#F8F7F4;
    --color-surface:#FFFFFF;

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

    --color-border:#E5E5E5;

    /* Tipografía */

    --font-heading:"Cormorant Garamond", serif;
    --font-body:"Inter", sans-serif;

    /* Tamaños */

    --container:1200px;

    --radius:16px;

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

    /* Espaciados */

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:6rem;

}

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

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--color-bg);

    color:var(--color-text);

    font-family:var(--font-body);

    font-size:16px;

    line-height:1.7;

}

/* ---------- CONTENEDOR ---------- */

.container{

    width:min(92%, var(--container));

    margin:auto;

}

/* ---------- TIPOGRAFÍA ---------- */

h1,h2,h3,h4{

    font-family:var(--font-heading);

    line-height:1.15;

    font-weight:600;

}

h1{

    font-size:3.5rem;

}

h2{

    font-size:2.2rem;

}

p{

    margin-bottom:1rem;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    width:100%;

    display:block;

    height:auto;

}

/* ---------- BOTÓN ---------- */

.button-primary{

    display:inline-block;

    padding:16px 34px;

    background:var(--color-primary);

    color:#fff;

    border-radius:999px;

    font-weight:600;

    transition:.25s;

}

.button-primary:hover{

    background:#24483c;

}

/* ---------- TAG ---------- */

.retreat-tag{

    display:inline-block;

    padding:8px 16px;

    background:#EEF5F1;

    color:var(--color-primary);

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

    margin-right:8px;

    margin-bottom:8px;

}