:root {
    --vacafest-fosc: #f47c1a;
    --vacafest-crema: #f8e4b0;
    --vacafest-marro: #8d3f1f;
    --vacafest-clar: #f9be45;
    --capsa-border-fosc: #000000;
    --capsa-fons: #EAFF02;
    --capsa-clar: #FFFFFF;
    --taula-fort: #d5642e;
    --taula-clar: #FFFFFF;
    --taula-border: #8d3f1f;
    --text-fosc: #000000;
    --text-clar: #FFFFFF;
}

@font-face {
    font-family: Bronco;
    src: url('fonts/Bronco.ttf') format('truetype');
}

@font-face {
    font-family: Junegull;
    src: url('fonts/Junegull.otf') format('opentype');
}


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: var(--vacafest-clar);
    color: var(--text-fosc);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.boto-fix {
    position: absolute;
    top: 1rem;
    z-index: 1050;
    background: var(--vacafest-marro);
    color: #fff;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    text-decoration: none;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s, color 0.2s;
}

.boto-fix:hover {
    background: var(--text-fosc);
    color: var(--vacafest-crema);
}

/* Desktop: home i tiquet sempre a l'esquerra, contactar a la dreta */
.boto-fix-home {
    left: 1rem;
}

.boto-fix-esquerra {
    left: 1rem;
}

/* Desktop secundari: tiquet desplaçat per fer lloc al home */
.hero-secundari .boto-fix-esquerra {
    left: 4.5rem;
}

.boto-fix-dreta {
    right: 1rem;
}

.boto-top {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color 0.2s;
}

.boto-top:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.hero-vacafest {
    min-height: 500px;
    width: 100%;

    background-color: #f9be45;
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 175px, var(--vacafest-fosc) 175px, var(--vacafest-fosc) 30%, #f9be45 100%),
        repeating-conic-gradient(from 270deg at 50% 175px,
            var(--vacafest-crema) 0deg 12deg,
            var(--vacafest-fosc) 12deg 24deg);
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;

    position: relative;
    overflow: hidden;
}

/* Cap pàgines secundàries */
.hero-secundari .hero-content {
    padding-top: 0;
    text-align: left;
}

.cap-sec {
    display: grid;
    grid-template-columns: 190px 1fr;
    grid-template-rows: calc(131px - 0.4rem) auto;
    column-gap: 1.5rem;
    margin-bottom: 2rem;
}

.cap-sec .logo {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    max-width: 190px;
    width: 100%;
    display: block;
    margin: 0;
}

/* --- Comptador --- */
.comptador-wrap {
    padding: 1.5rem 1rem;
    text-align: center;
    background-color: var(--vacafest-marro);
    border-radius: 1rem;
}

.comptador-text {
    color: #fff;
    font-family: Bronco, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
}

.comptador {
    display: flex;
    justify-content: center;
    align-items: center;
}

.comptador-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
}

.comptador-num {
    font-family: junegull, sans-serif;
    font-size: clamp(3rem, 10vw, 3.5rem);
    color: #fff;
    line-height: 1;
}

.comptador-label {
    font-family: Bronco, sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 0.4rem;
}

.comptador-sep {
    width: 1px;
    height: 3.5rem;
    background-color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.cap-sec .festival-subtitle {
    grid-column: 2;
    grid-row: 1;
    position: static;
    align-self: end;
    text-align: left;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    padding-bottom: 0;
    color: var(--vacafest-marro);
    text-align: right;
}

.cap-sec .titol-pagina {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding-top: 0;
    margin: 0;
}

/* Hero pàgines secundàries (no index) */
.hero-secundari {
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 131px, var(--vacafest-fosc) 131px, var(--vacafest-fosc) 30%, var(--vacafest-clar) 100%),
        repeating-conic-gradient(from 270deg at calc(7.5vw + 2rem + 95px) 131px,
            var(--vacafest-crema) 0deg 12deg,
            var(--vacafest-fosc) 12deg 24deg);
    padding-top: 0.5rem;
}

.titol-pagina {
    font-family: Bronco;
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Efecte paper antic */
.hero-vacafest::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .2) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(0, 0, 0, .05) 0%, transparent 30%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    text-align: center;
    padding: 2rem;
    max-width: 1200px;
    width: 85%;
}

.cap {
    position: relative;
    display: inline-block;
    margin-bottom: 0.75rem;
}

.logo {
    max-width: 380px;
    width: 90%;
    display: block;
    margin: 0 auto;
}

.festival-subtitle {
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(1.5rem, 3.3vw, 2.2rem);
    font-weight: 700;
    font-family: Bronco;
}

.form-text a {
    color:var(--vacafest-marro);
}

/* --- Capses arrodonides --- */
.capsa {
    background-color: var(--vacafest-crema);
    border: 2px solid var(--vacafest-marro);
    border-radius: 1.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 5px 5px 0 var(--vacafest-marro);
}

/* Capsa compra tiquetse */
.capsa-compra {
    background-color: var(--capsa-fons);
    border: 2px solid var(--capsa-border-fosc);
    border-radius: 1.25rem;
    text-align: center;
    box-shadow: 4px 4px 0 var(--capsa-border-fosc);
    transition: transform 0.15s;
}

.capsa-compra:hover {
    transform: translateY(-3px);
}

/* capsa dels establiments */
.capsa-establiment h2 {
    font-family: Junegull, sans-serif;
    margin-bottom: 0;
    margin-top: 0.5em;
    font-size: 1.4rem;
}

.capsa-establiment {
    background-color: var(--capsa-clar);
    border: 2px solid var(--capsa-border-fosc);
    border-radius: 1.25rem;
    text-align: center;
    box-shadow: 4px 4px 0 var(--capsa-border-fosc);
    transition: transform 0.15s;
}

.capsa-establiment:hover {
    transform: translateY(-3px);
}

/* --- Botó principal --- */
.btVaca {
    display: inline-block;
    padding: 0.5em 1.6em;
    background-color: #000;
    color: #fff;
    font-weight: 700;
    border-radius: 2rem;
    text-decoration: none;
    border: 2px solid #000;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btVaca:hover,
.btVaca:focus {
    background-color: #fff;
    color: #000;
}

.btVaca.btVaca-buit {
    background-color: transparent;
    color: #000;
}

.separador {
    background-color: #000;
    height: 4px;
    border: none;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.titol-tiquet {
    font-family: Bronco;
    margin-bottom: 0.2em;
    font-size: 2.75rem;
}

.text-tiquet {
    color: var(--text-fosc);
    margin-bottom: 0;
}

.preu-tiquet {
    margin-bottom: 0;
    font-size:1.6rem;
}

.olla {
    height: 100px;
}

.voluntaris {
    font-family: Bronco;
    margin-bottom: 0.2em;
    color: var(--text-fosc);
    font-weight: 500;
    font-size: 3.5rem;
}

/* CARTELL */
table.cartell {
    background-color: var(--vacafest-crema);
    color: var(--text-fosc);
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 1.5em;
    width: 100%;
    border: 1px solid var(--ast-border-color);
}

table.cartell thead {
    background-color: var(--taula-fort);
    font-family: Junegull;
}

table.cartell th,
table.cartell td {
    border: 1px solid var(--taula-border);
    padding: .7em 1em;
    border-width: 0 1px 1px 0;
    text-align: left;
}

table.cartell td.hora {
    font-weight: 700;
    font-size: 0.8em;
    vertical-align: top;
    color: var(--vacafest-marro);
    font-family: Junegull, sans-serif;
}

.cartell_grup {
    margin-top: -1rem;
}

.cartell_grup h2 {
    font-family: Junegull, sans-serif;
    margin-bottom: 0.5em;
    margin-top: 0;
    font-size: 1.4rem;
}

.cartell a.tiquet {
    display: inline-block;
    padding: 0.2em 1.2em;
    background: var(--vacafest-marro);
    color: #fff;
    border-radius: 1rem;
    text-decoration: none;
    font-size: 0.85em;
    transition: background-color 0.2s;
}

.cartell a.tiquet:hover {
    background-color: var(--text-fosc);
    color: var(--vacafest-crema);
}

.cartell_bottom {
    transform: rotate(180deg);
}

h3.titol-colaboracio {
    font-family: Junegull, Sans-serif;
    font-weight: 600;
}

.dinar {
    font-weight: 700;
    font-family: Bronco;
    font-size: 1.5rem;
}

.resalta {
    color: var(--vacafest-marro);
    font-weight: 500;
}

/* formulari i altres */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.marca {
    font-family: Bronco;
    font-size: 1.2em
}

fieldset.blanc {
    background-color: var(--capsa-clar);
    border: 2px solid var(--capsa-border-fosc);
    border-radius: 1.25rem;
    box-shadow: 4px 4px 0 var(--capsa-border-fosc);
    padding: 1rem 1.5rem;
}

.logo_samarreta {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    height: auto;
    pointer-events: none;
}

.samarreta-dialog {
    max-height: 160px;
    object-fit: contain;
    display: block;
}

.amaga-xl { 
    display:none;
}

/* PEU */
footer {
    background: var(--vacafest-marro);
    color: #fff;
    position: relative;
    margin-top: auto;
}

.textPeu {
    color: var(--text-clar);
}
.logosPeu {
    color: var(--text-clar);
    font-size: 1.5rem;
}
.enllasPeu {
    color: var(--vacafest-crema);
    text-decoration:none;
}
.enllasPeu:hover {
    text-decoration:underline;
}

.enllasInvers {
    color: var(--vacafest-marro);
}

/*  responsive: mobils */
@media (max-width: 576px) {
    /* Mòbil secundari: home i tiquet a la dreta */
    .hero-secundari .boto-fix-home {
        left: auto;
        right: 8rem;
    }
    .hero-secundari .boto-fix-esquerra {
        left: auto;
        right: 4.5rem;
    }
    /* Mòbil compra/confirmar (sense tiquet): home al costat de contactar */
    .hero-compra .boto-fix-home,
    .hero-confirmar .boto-fix-home {
        left: auto;
        right: 4.5rem;
    }
    /* Mòbil contactar (sense contactar): home i tiquet a la dreta */
    .hero-contactar .boto-fix-esquerra {
        left: auto;
        right: 1rem;
    }
    .hero-contactar .boto-fix-home {
        left: auto;
        right: 4.5rem;
    }
    .hero-content {
        width: 100%;
        padding: 1rem;
    }
    .cap {
        margin-bottom:0;
    }
    .logo {
        max-width: 300px;
    }
    .festival-subtitle {
        bottom:0.1rem;
    }

    .capsa {
        padding: 0.5rem 0.3rem;
    }    
    .capsa-compra.d-flex {
        flex-direction: column;
        text-align: center;
    }
    .titol-tiquet, .voluntaris {
        font-size: 2.2rem;
    }    
    .text-tiquet {
        font-size:0.9rem;
    }
    .olla {
        height: 50px;
    }     

    .cartell_grup {
        margin-top:0px;
    }    

    .comptador-item {
        padding: 0 0.5rem;
    }
    .comptador-num {
        font-size: clamp(1.8rem, 8vw, 3.5rem);
    }    

    .colaboracio {
        margin-left:0.5rem;
        margin-right:0.5rem;
    }
    h3.titol-colaboracio {
        font-size: 1.2rem;
    }

    .enllasPeu {
        text-decoration:underline;
    }

    .hero-secundari {
        background-image:
            linear-gradient(to bottom, rgba(255, 255, 255, 0) 100px, var(--vacafest-fosc) 100px, var(--vacafest-fosc) 30%, var(--vacafest-clar) 100%),
            repeating-conic-gradient(from 270deg at 25% 100px,
                var(--vacafest-crema) 0deg 12deg,
                var(--vacafest-fosc) 12deg 24deg);
        margin-top:0;
    }
    .cap-sec {
        grid-template-columns: 95px 1fr;
        margin-top: -2rem;
        margin-bottom: 0;
    }
    .cap-sec .logo {
        max-width: 110px;
        margin-top: 2rem;
        margin-left: 1rem;
    }
    .cap-sec .titol-pagina {
        grid-column: 1 / -1;
        margin-top:0.5rem;
    }

    .amaga-xl { display:block; }
    .mostra-xl { display:none; }
    .text-sm { font-size:0.9em; }
    .text-xs { font-size:0.8em; }

    #talla { width: 70% !important; }
    .img-talles { width:100px; }

    .sel_samarreta { 
        padding-bottom:0.5rem;
        border-bottom:1px solid var(--vacafest-marro);
    }

    fieldset.blanc {
        padding:0.5rem 0.2rem;
    }

    .confirma-div { margin:0.6rem !important;  }
    .confirma-text { padding:20px 5px 0 5px !important; }

}