/* ---------- Reset bàsic ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ---------- Variables ---------- */
:root {
    --primary: #000000;
    --bg: #ffffff;
    --text: #333;
    --font-sans: 'Helvetica Neue', Arial, sans-serif;
        /* Fonts */
    --font-title: 'EB Garamond', serif;   /* títols */
    --font-body:  'Roboto', sans-serif;   /* cos del text */
}

/* ---------- Estils globals ---------- */
body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

/* Títols principals (h1, h2, h3…) */
h1, h2, h3, h4, h5, h6{
    font-family: var(--font-title);
    margin-top:0;
}

/* Si vols que només els títols dins dels blocs d’informació siguin EB Garamond */
.info-block .text h2{
    font-family: var(--font-title);
}

/* ---------- Hero (capçalera) ---------- */
.hero {
     min-height: 40vh;
    background:#d3d4cf ;
    color: #000000;
    text-align: center;
    padding: 5rem 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;          /* centra tots els fills horitzontalment */
    gap: 0.5rem;                  /* espai entre títol, imatge i paràgraf */
    margin-bottom: 1rem;
}
/* Paràgraf del hero */
.hero p{
    font-size: 1.5rem;          /* augmenta la mida del text */
    line-height: 2.5rem;
}

/* Imatge del hero */
.hero-img {
    width: 100%;                 /* ocupa tot l’amplada disponible */
    max-width: 800px;            /* <-- amplada màxima que vols (ajusta’l) */
    height: auto;                /* conserva la proporció original */
    border-radius: .5rem;        /* opcional: cantonades arrodonides */
   /* box-shadow: 0 4px 12px rgba(0,0,0,.15); /* opcional: lleugera ombra */
}

/* ---------- Bloc d'informació ---------- */
.info-block {
    display: flex;
    flex-direction: column;           /* Mòbil: una columna (imatge > text) */
    align-items: stretch;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1rem;
}

/* Imatge */
.info-block .image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: .5rem;
}

/* Text */
.info-block .text {
    background-color: #f1f1f0;   /* <-- canvia aquest valor pel color que vulguis */
    padding: 3.5 rem 1.5rem;             /* espai interior perquè el text no tocui les vores */
    border-radius: .5rem;        /* opcional: cantonades arrodonides */
}
.info-block .text h2 {
    margin-bottom: .5rem;
    color: var(--primary);
    padding-top: 2rem;
}
.info-block .text p {
    margin-top: .5rem;
    padding-bottom: 2rem;
}

/* ---------- Alternar ordre en pantalles grans ----------
   .reverse -> imatge a la dreta, text a l'esquerra */
@media (min-width: 768px) {
    .info-block {
        flex-direction: row;          /* Horitzontal */
        align-items: flex-start;
    }
    .info-block.reverse {
        flex-direction: row-reverse;  /* Inverteix l'ordre */
    }

    .info-block .image,
    .info-block .text {
        flex: 1 1 50%;                /* Cada un ocupa aproximadament la meitat */
    }

    .info-block .text {
        padding: 3.5rem 2rem;
    }
    .hero {

    padding: 5rem 2rem;
    }
}
/* ---------- Peu de pàgina ---------- */
.footer {
    background:#ffffff ;
    color: #000000;
    text-align: center;
    padding: 1.5rem;
    margin-top: 4rem;
}

/* ---------- Ajustos per a pantalles molt petites ---------- */
@media (max-width: 480px) {
    .hero { padding: 2.5rem 2rem; }
    .info-block .text { padding: 2rem 2rem; }
}

/* -------------------------------------------------
   1. Contenidor genèric (ja pot existir)
   ------------------------------------------------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;   /* logo a l'esquerra, botó a la dreta */
}

/* -------------------------------------------------
   2. Nova capçalera superior
   ------------------------------------------------- */
.top-header {
    background: #ffffff;               /* fons blanc (pots canviar) */
    border-bottom: 1px solid #e0e0e0;  /* línia subtil separadora */
    padding: 0.5rem 0;                /* espai vertical */
        /* --- CLAU PER FER‑LA FIXA --- */
    position: sticky;            /* s’enganxa quan arriba al top */
    top: 0;                            /* distancia des del top de la finestra */
    z-index: 1000;                     /* per estar per sobre de la resta */
}

/* Logo */
.top-header .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.top-header .logo img {
    height: 32px;                      /* ajusta la mida segons el teu logotip */
    width: auto;
}
.top-header .logo span {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    margin-left: 1rem;
}

/* Botó d’enllaç */
.top-header .header-btn {
    background: #000000;
    color: #fff;
    padding: 0.45rem 1rem;
    border-radius: .9rem;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background .25s ease;
    margin-right: 1rem;
    margin-top: 1rem;
}
.top-header .header-btn:hover {
    background: #004fcc;   /* una tonalitat més fosca del color primari */
    
}

/* -------------------------------------------------
   3. Responsivitat per a mòbils
   ------------------------------------------------- */
@media (max-width: 600px) {
    .top-header .container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .top-header .header-btn {
        align-self: flex-start;   /* botó a l’esquerra també en mòbil */
    }
    .top-header .container{
        flex-direction:row;          /* ← ara són una fila */
        flex-wrap:wrap;              /* si no hi caben, passen a la següent línia */
        justify-content:space-between;/* logo a l'esquerra, botó a la dreta */
        align-items:center;          /* alineació vertical centrada */
        gap:.5rem;                   /* espai mínim entre ells */
    }
    .info-block .text {
        padding: 3.5rem 2rem;
    }
    .hero { padding: 2.5rem 1rem; }
    .info-block .text { padding: 1rem 1rem; }


}