/* ════════════════════════════════════════════════
   TRIAS — Variables del Projecte
   Sobreescriu les de estils.css (framework base)
   ════════════════════════════════════════════════ */
:root {
  /* Colors projecte */
  --color-primary:    #111111;
  --color-secondary:  #1b1b1b;
  --color-accent:     #c8a96e;
  --color-bg:         #ffffff;
  --color-text:       #1b1b1b;
  --color-marro-clar: #AA8055;;

  /* Tipografia */
  --font-titols: 'Inter', sans-serif;
  --font-cos:    'Inter', sans-serif;
}

/* ── Reset tipografia ── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-titols); }
body, p, li, td          { font-family: var(--font-cos); }

/* FONTS */
@font-face {
	font-family: AltesseStd-Regular;
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/AltesseStd-Regular24pt.woff2) format("woff2")
}

@font-face {
	font-family: Tiller;
	font-weight: 500;
	font-style: normal;
	src: url(../fonts/Tiller-Medium.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 100;
	font-style: normal;
	src: url(../fonts/PossibleThin.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 100;
	font-style: italic;
	src: url(../fonts/PossibleThinItalic.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 300;
	font-style: normal;
	src: url(../fonts/PossibleLight.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 300;
	font-style: italic;
	src: url(../fonts/PossibleLightItalic.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/Possible.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 500;
	font-style: normal;
	src: url(../fonts/PossibleMedium.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 500;
	font-style: italic;
	src: url(../fonts/PossibleMediumItalic.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 700;
	font-style: normal;
	src: url(../fonts/PossibleBold.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 700;
	font-style: italic;
	src: url(../fonts/PossibleBoldItalic.woff2) format("woff2")
}

@font-face {
	font-family: Possible;
	font-weight: 400;
	font-style: italic;
	src: url(../fonts/PossibleItalic.woff2) format("woff2")
}

#cookies_botons button {
    background-color:  var(--color-marro-clar) !important;
    border: 1px solid var(--color-marro-clar) !important ;
}


/* ════════════════════════════════════════════════
   COMPONENTS ESPECÍFICS TRIAS
   ════════════════════════════════════════════════ */

/* ── Page Hero ────────────────────────────────── */
.page-hero {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.page-hero .page-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0;
}

.page-hero .page-text {
  color: var(--color-muted);
  margin-top: 0.75rem;
  max-width: 640px;
}

/* ── Generic Content ──────────────────────────── */
.generic-body {
  max-width: 760px;
  line-height: 1.75;
  font-size: 1.05rem;
}

.generic-gallery {
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.generic-downloads {
  margin-top: 2rem;
}

.generic-downloads-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.downloads-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.downloads-list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.downloads-list a:hover {
  background: var(--color-soft);
}

.form-control { 
    background-color: transparent;
}

.topbar-item {
    font-family: 'Possible' !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}


/*-- HEADER --------------*/

/* Sobreescriu el background blanc base d'estils.css per evitar flash en variants de color */
/* header.site-header {
    background: transparent !important;
    border-bottom-color: transparent !important;
    transition: none;
} */

/* Variant roja: estableix fons immediatament, sense transició */
header.site-header.header-rojo,
header.site-header.header-rojo .logo_butons {
    background: #610C00 !important;
    border-bottom: none !important;
}

/* Variant marró */
header.site-header.header-marron,
header.site-header.header-marron .logo_butons {
    background: #F7F3E6 !important;
}

header.site-header .logo_butons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 0;
}


header.site-header .logo_butons div {
    flex: 1;
}

nav.navbar-expand-xl {
   border-top: 1px solid var(--color-marro-clar);
}

.site-header.header-rojo nav.navbar-expand-xl {
    border-top-color: rgba(232, 213, 176, 0.2);
    border-bottom: 1px solid rgba(232, 213, 176, 0.2);
}

nav.navbar-expand-xl .navbar-nav {
    gap: 20px;
}

.navbar-nav .nav-link {
  padding: 8px 16px !important;
}

/* Tots els elements del menú (a i span pare) amb la mateixa mida i pes */
.main-menu .nav-link,
.main-menu .nav-link--parent {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Header scrolled: punts de menú més compactes */
header.site-header.scrolled .main-menu .nav-link,
header.site-header.scrolled .main-menu .nav-link--parent {
  font-family: 'Possible', sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

.main-menu .nav-item:hover > a {
    color: #db001c;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: #db001c !important;
}


header.site-header .logo_butons div.caixa2_menu-top .navbar-brand img {
    max-width: 180px;
    transition: max-width 0.3s ease;
}

header.site-header.scrolled .logo_butons div.caixa2_menu-top .navbar-brand img {
    max-width: 130px;
}

header.site-header .logo_butons div.caixa3_menu-top div.header-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-right: 60px;
}

header.site-header .logo_butons div.caixa3_menu-top div.header-actions select {
    border: none;
    font-size: 15px;
    text-transform: uppercase;
    color: black;
    font-weight: 100;
}


header.site-header .logo_butons div.caixa3_menu-top div.header-actions a.btn-botiga-menu, header.site-header nav.navbar .navbar-actions-mobile a.btn-botiga-menu {
    background-color: var(--color-marro-clar);
    font-size: 14px;
    color: #FFF;
    padding: 8px 18px;
    text-transform: uppercase;
    border: 1px solid transparent;
    font-family: 'Possible';
    font-weight: 300;
    letter-spacing: 1.1px;
}

header.site-header .logo_butons div.caixa3_menu-top div.header-actions a.btn-botiga-menu:hover,
header.site-header nav.navbar .navbar-actions-mobile a.btn-botiga-menu:hover {
    background-color: transparent;
    border: 1px solid var(--color-marro-clar);
    color: var(--color-marro-clar);
}

header.site-header .logo_butons div.caixa3_menu-top div.header-actions a#carro_petit,
header.site-header nav.navbar .navbar-actions-mobile a#carro_petit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: transparent;
  border: none;
  text-decoration: none;
  color: inherit;
  position: relative;
}

header.site-header .logo_butons div.caixa3_menu-top div.header-actions a#carro_petit img,
header.site-header nav.navbar .navbar-actions-mobile a#carro_petit img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

header.site-header .logo_butons div.caixa3_menu-top div.header-actions a#carro_petit:hover img,
header.site-header nav.navbar .navbar-actions-mobile a#carro_petit:hover img {
  opacity: 0.65;
}

div#mainNav.collapse.navbar-collapse ul li a,
div#mainNav.collapse.navbar-collapse ul li span {
    font-family: Possible;
    font-size: 16px;
    font-weight: 400;
}

/* -- FI HEADER ----------*/



/* ── Fills Grid (pàgines filles) ──────────────── */
.fills-section {
  background: var(--color-soft);
}

.fills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .fills-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .fills-grid { grid-template-columns: repeat(4, 1fr); }
}

.fill-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fill-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.fill-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-soft);
}

.fill-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fill-card:hover .fill-card-img img {
  transform: scale(1.04);
}

.fill-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.fill-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.fill-card-text {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0;
}

.fill-card-cta {
  margin-top: auto;
  align-self: flex-start;
}

/** ESTILS DE LES DIFERENTS SECCIONS ---------------------------- **
********************************************************************/

.noBoles {
    display: none;
}

.addBolesContact {
    display: block;
}

/* SECCIO BLOC SPLIT IMATGE */

.split-imatge-section {
        width: 100%;
    }

    .split-imatge-section .split-imatge-wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    /* El track intern (afegit pel carrusel) ha de ser transparent al layout
       desktop: replica el flex row del wrapper perquè els blocs segueixin
       repartint-se 50%/50% com sempre. A ≤480px Swiper en pren el control. */
    .split-imatge-section .split-imatge-wrapper .split-imatge-track {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc {
        position: relative;
        width: 50%;
        height: 75vh;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        align-items: end;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split {
        width: 100%;
        height: 80vh; 
        background-size: cover;
        background-repeat: no-repeat;
        background: left;
        background-size: cover;
        display: flex;
        align-items: center;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content .split-imatge-subtitol {
        margin-bottom: 40px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc {
        position: relative;
        width: 50%;
    }
       
    


    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content {
        padding: 0 0 0 120px ;
        max-width: 34%;
    }


    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content .split-imatge-titol {
        font-size: 62px;
        color: white;
        font-family: 'Tiller';
        text-transform: uppercase;
        font-weight: 500;
        max-width: 320px;
        line-height: 1;
    }


    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content {
        position: relative;
        z-index: 1;
        padding: 0 0 80px 60px ;
    }



    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-titol {
        font-size: 44px;
        color: white;
        font-family: 'Tiller';
        text-transform: uppercase;
        font-weight: 600;
        max-width: 320px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-subtitol {
        font-size: 22px;
        color: white;
        font-family: Possible;
        margin-bottom: 24px;
        font-weight: 300;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac {
        padding: 10px 14px;
        background-color: white;
        color: black;
        text-transform: uppercase;
        margin-top: 10px;
        font-size: 14px;
        font-family: Possible;
        transition: 0.3s ease;
        border: 1px solid transparent;
        line-height: 1;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac.btn-marro {
        background-color: white;
        color: #AA8055;
        border: 1px solid #AA8055;
        line-height: 1;
    }


    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac:hover {
        background-color: transparent;
        color: white;
        border: 1px solid white;
    }






/** FI SECCIO BLOC SPLIT IMATGE */ 

/** BLOC HISTORIA HOME */

.bloc_historia_home {
    position: relative;
    z-index: 1;
    width: 100%;
    background-color: #f5ede0;
    padding: 40px 0;
}

.contents_hst_home {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 60px;
}

.contents_hst_home div {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.contents_hst_home div.hst_h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contents_hst_home div.hst_h3 h2 {
    font-size: 28px;
    max-width: 78%;
    text-align: center;
    font-family: 'Tiller';
    font-weight: 600;
    margin-bottom: 30px;
}

.contents_hst_home div.hst_h3 a {
    background-color: var(--color-marro-clar);
    color: white;
    padding: 12px 32px;
    font-size: 14px;
    font-family: 'Possible';
    line-height: 1;
}

.contents_hst_home div.hst_h3 a:hover {
    background-color: transparent;
    border: 1px solid var(--color-marro-clar);
    color: var(--color-marro-clar);
}


/** FI BLOC HISTORIA HOME */


/* BLOC CONTACTANS HOME  */

.section-contact-home .contents-contact-home {
        background-color: #db001c;
        display: flex;
        flex-direction: row;
        padding: 0px 40px 100px 80px;
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home,
    .section-contact-home .contents-contact-home .dreta-cont-home {
        flex: 1;
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home {
        color: white;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    

    .section-contact-home .contents-contact-home .esquerra-cont-home div {
        margin-bottom: 40px;
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home div h2 {
        font-size: 62px;
        font-family: 'Tiller', sans-serif;
        font-weight: 500;
        text-align: center;
        margin-bottom: -10px;
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home div p {
        font-size: 42px;
        text-align: center;
        font-family: 'Tiller', sans-serif;
        font-weight: 500;
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home p.horaris {
        text-align: center;
        font-family: 'Possible';
    }

    .sep_white {
        width: 2px;
        height: auto;
        background-color: white;
        margin: 0 50px;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home {
        color: white;
        padding: 30px;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home h2.titol-form-drt {
        font-size: 32px;
        color: white;
        font-family: 'Tiller';
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 div.col-sm-6 input.form-control {
        background-color: transparent;
        border-bottom: 1px solid white;
        border-right: 0;
        border-left: 0;
        border-top: 0;
        border-radius: 0;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 div.col-sm-6 input.form-control::placeholder {
        color: white;
        font-family: Possible;
        font-weight: 300;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.col-12 textarea.form-control {
        background-color: transparent;
        border-bottom: 1px solid white;
        border-right: 0;
        border-left: 0;
        border-top: 0;
        border-radius: 0;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.col-12 textarea.form-control::placeholder {
        color: white;
        font-family: Possible;
        font-weight: 300;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals{
        display: flex;
        flex-wrap: wrap;
        column-gap: 40px;
        padding-top: 18px;
        row-gap: 12px;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.mt-4 button {
        background-color: white;
        border-radius: 0;
        border: 1px solid white;
        color: red;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 500;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.mt-4 button:hover {
        background-color: transparent;
        color: white;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 div label {
        display: none;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 .col-sm-6 {
        margin-bottom: 16px;
    } 

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals div.punt_legal label.form-check-label {
        font-family: 'Possible';
        font-size: 14px;
    }
    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte input.form-check-input { border-color: white; background-color: transparent; }
    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte input.form-check-input:checked { background-color: transparent; border-color: white; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-width='1.5' d='m6 10 3 3 5-6'/%3e%3c/svg%3e"); }

    /* FI BLOC CONTACTANS HOME */

/* SECCIO BONES PER TRADICIO */

 #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img {
        background-size: contain;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 70px 0;

        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img h2 {
        font-size: 86px;
        color: #AA8055;
        font-family: 'AltesseStd-Regular';
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img p {
        font-size: 22px;
        text-transform: uppercase;
        color: #AA8055;
        font-family: Tiller;
        font-weight: 400;
    }


    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt {
        width: 100%;
        padding: 80px 0 0 0;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt p {
        font-size: 18px;
        font-family: Possible;
        width: 40%;
        text-align: center;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt p:first-child {
        margin-bottom: 40px;
    }


    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt a {
        font-size: 16px;
        font-family: Possible;
        text-transform: uppercase;
        text-align: center;
        background-color: #AA8055;
        color: #fff;
        padding: 12px 20px;
        border: 1px solid #fff;
        margin-bottom: 50px;
        line-height: 1;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt a:hover {
        color: #AA8055;
        border: 1px solid #AA8055;
        background-color: white;
    }


    #bpt-seccio .caja-intermedia {
        display: flex;
        justify-content: center;
        margin-top: -267px;
        z-index: 1;
    }

    #bpt-seccio .caja-intermedia img{
        width: 46%;
    }


    /** BLOC 2 */
    #bpt-seccio .segon_bloc_bpt {
        width: 100%;
        position: relative;
        height: auto;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 {
        display: flex;
        align-items: center;
        padding: 60px 80px;
        flex-direction: column;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 {
        width: 80%;
        justify-content: center;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding-top: 40px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 h2 {
        font-family: Tiller;
        font-weight: 600;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 p {
        font-family: Possible;
        
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 {
        width: 80%;
        margin-top: 80px;
        position: relative;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_swiper {
        overflow: hidden;
        width: 100%;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a {
        display: block;
        padding: 10px;
        text-decoration: none;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a:hover {
        background-color: #F7F3E6;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a div.caixa_image_categ {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        height: 220px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a p:last-child {
        font-size: 14px;
        text-align: center;
    }
            

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a div img {
        width: 90%;
        height: 100%;
        object-fit: contain;
    }

    /* Hover canvi d'imatge a les categories (com a la botiga) */
    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a div.caixa_image_categ.te-hover {
        position: relative;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a div.caixa_image_categ.te-hover .img-categ-hover {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a div.caixa_image_categ.te-hover .img-categ-principal {
        transition: opacity 0.35s ease;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a:hover div.caixa_image_categ.te-hover .img-categ-hover {
        opacity: 1;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a:hover div.caixa_image_categ.te-hover .img-categ-principal {
        opacity: 0;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a p {
        text-align: center;
        margin-top: 20px;
        font-size: 30px;
        font-family: Possible;
        color: inherit;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a p.veure_prods_btn {
        visibility: hidden;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a:hover p.veure_prods_btn {
        visibility: visible;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev,
    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
        z-index: 10;
        color: #AA8055;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev {
        left: -60px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next {
        right: -60px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev,
    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next {
        border: 1px solid #AA8055;
        border-radius: 30px;
        width: 40px;
        height: 40px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev::after,
    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next::after {
        font-size: 12px;
    }






    /** Imagenes bloque 2 */

    #bpt-seccio .segon_bloc_bpt .img_bpt2 {
        position: absolute;
    }

    #bpt-seccio .segon_bloc_bpt #img2-bpt-b2 {
        width: 30%;
        left: -6%;
        top: -16%;
    }

    #bpt-seccio .segon_bloc_bpt #img3-bpt-b2 {
        width: 20%;
        right: 7%;
        top: -14%;
        z-index: 1;
    }

    #bpt-seccio .segon_bloc_bpt #img4-bpt-b2 {
        width: 23%;
        left: 81%;
        top: -26%;
        z-index: 0;
    }

        






    /**BLOC 1 */
    #bpt-seccio {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }

    #bpt-seccio .primer_bloc_bpt {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: #F7F3E6;
        padding: 60px 0 0 0;
    }

    #bpt-seccio .primer_bloc_bpt p {
        width: 32%;
        text-align: center;
        color: #AA8055;
        font-size: 18px;
        font-family: Possible;
    }

    #bpt-seccio .primer_bloc_bpt #linea_b1 {
        margin-top: 150px;
        width: 90%;
        height: 2px;
        background: linear-gradient(to right,
            #AA8055 0%,
            #AA8055 25%,
            transparent 25%,
            transparent 75%,
            #AA8055 75%,
            #AA8055 100%
        );
        margin-bottom: 29px;
        position: relative;
        z-index: 0;
    }

    #bpt-seccio .primer_bloc_bpt div.caixa-imatges {
        width: 100%;
        position: relative;
        justify-content: center;
        display: flex;
        height: 660px;
        z-index: 1;
    }

    #bpt-seccio .primer_bloc_bpt div .img_bpt1 {
        position: absolute;
    }

    /* "DES DE 1908" */
    #bpt-seccio .primer_bloc_bpt div #img1-bpt-b1 {
        width: 14%;
        top: 18%;
    }

    /* Bloc de text que substitueix el SVG "Bones per Tradició" */
    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 {
        width: 90%;
        max-width: 1000px;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .titol-bpt-b1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0;
        color: #DB001C;
        font-family: 'Tiller', serif;
        font-size: clamp(46px, 7.5vw, 108px);
        line-height: 0.98;
        font-weight: 600;
        text-transform: uppercase;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .titol-bpt-b1-fila {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, 2vw, 32px);
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .segell-bpt-b1 {
        width: clamp(52px, 8vw, 110px);
        height: auto;
        flex: 0 0 auto;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .subtitol-bpt-b1 {
        margin: 0;
        width: 100%;
        text-align: center;
        color: #AA8055;
        font-family: 'Tiller', serif;
        font-size: clamp(20px, 2.6vw, 36px);
        line-height: 1.1;
        white-space: nowrap;
    }

    #bpt-seccio .primer_bloc_bpt div #img3-bpt-b1 {
        width: 90%;
    }


/* FIN SECCIO BONES PER TRADICIÓ */

/* SECCIO BLOG HOME  */


    .blogs_home_section {

        padding-top: 0;
    }

    .blogs_home_section .container { 
        max-width: 100%;
         background-color: #f2e1cc;
    }

    .blogs_home_section .container.container-custom .products-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3%;
        padding: 20px 100px 60px 100px;
    }

    .section-space .separador_boles {
        width: 100%;
        margin: -60px 0 0 0;
        position: relative;
        z-index: 2;
    }

    .section-space .separador_boles img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Z-index escalonat: cada secció puja per sobre de l'anterior */
    .section-contact-home {
        position: relative;
        z-index: 2;
    }

    .blogs_home_section {
        position: relative;
        z-index: 3;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home {
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home h2 {
        font-family: Tiller, Demi;
        font-weight: 600;
        font-size: 42px;
        text-transform: uppercase;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home p {
        font-family: Possible; 
        color: black;
        font-size: 20px;
        margin-bottom: 40px ;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home a {
        background-color: #AA8055;
        padding: 12px 20px;
        font-size: 13px;
        border: 1px solid #AA8055;
        color: white;
        margin-bottom: 40px;
        line-height: 1;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home a:hover {
        background-color: transparent;
        color: #AA8055;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean div.product-image-wrap{
       aspect-ratio: 1/1;
       margin-bottom: 0;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean div.product-image-wrap a img{
        transition: transform 0.3s ease;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean div.product-image-wrap a:hover img {
        transform: scale(1.02);
    }


    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body {
        background-color: #f2e1cc;
        padding: 28px 4px;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 27px;
        margin-bottom: 20px;
        font-family: 'Possible';
        font-weight: 400;
        text-align: center;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body p {
        font-size: 16px;
        margin-bottom: 20px;
        color: black;
        text-align: center;
        font-family: 'Possible';
        font-weight: 400;
    }
    
    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body a {
        text-align: center;
        font-size: 16px;
        transition: transform 0.3s ease;
        font-family: 'Possible';
        text-decoration: underline;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body a:hover { 
        color: #AA8055;
        transform: scale(1.01);
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean {
        background: transparent;
        border: none;
        border-radius: 0;
    }

  /* FI SECCIO BLOG HOME */


  /* BLOC COMPROMIS */

   #compromis-home {
        background-color: #F7F3E6;
        width: 100%;
        padding: 40px 60px;
    }

    /* ===== MARC DECORATIU ===== */
    #compromis-home .marc_compromis {
        position: relative;
        width: 100%;
        padding: 70px 40px 60px;
        /* Variables: amplada del logo i mig hueco de les línies superiors.
           Mantenen la relació centrada del logo respecte als trams del marc. */
        --marc-logo-w: 200px;
        --marc-hueco-half: calc(var(--marc-logo-w) / 2 + 20px); /* 20px de respir a cada banda */
    }

    /* Esquines SVG — mateix SVG canònic (cantonada TL), rotem per la resta */
    #compromis-home .marc-esquina {
        position: absolute;
        width: 70px;
        height: 70px;
        pointer-events: none;
        display: block;
        line-height: 0;
    }
    #compromis-home .marc-esquina svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    /* Logo central superior — centrat exacte i amb ratio mantingut */
    #compromis-home .marc-logo {
        position: absolute;
        top: -35px;
        left: 50%;
        transform: translateX(-50%);
        width: var(--marc-logo-w);
        height: auto;          /* manté aspect ratio */
        display: block;
        object-fit: contain;
        z-index: 3;
        pointer-events: none;
    }

    #compromis-home .marc-esquina--tl { top: 0; left: 0; transform: scaleY(-1); }
    #compromis-home .marc-esquina--tr { top: 0; right: 0; transform: scale(-1, -1); }
    #compromis-home .marc-esquina--bl { bottom: 0; left: 0; }
    #compromis-home .marc-esquina--br { bottom: 0; right: 0; transform: scaleX(-1); }

    /* Línies dobles (usem border doble per simular les dues línies paral·leles) */
    #compromis-home .marc-linia {
        position: absolute;
        pointer-events: none;
        border-color: #AA8055;
        border-style: solid;
    }

    /* Variables locals — separació entre línia exterior i interior, i offset des de l'esquina */
    /* gap entre línies = 4px ; offset línia exterior = 14px des de la vora */
    /* Top: dos trams (esquerra i dreta) deixant hueco central pel logo */
    #compromis-home .marc-linia--top-left {
        top: 14px;
        left: 70px;
        width: calc(50% - 70px - var(--marc-hueco-half));
        height: 6px;
        border-width: 2px 0;
    }
    #compromis-home .marc-linia--top-right {
        top: 14px;
        right: 70px;
        width: calc(50% - 70px - var(--marc-hueco-half));
        height: 6px;
        border-width: 2px 0;
    }

    /* Bottom: línia completa */
    #compromis-home .marc-linia--bottom {
        bottom: 14px;
        left: 70px;
        right: 70px;
        height: 6px;
        border-width: 2px 0;
    }

    /* Laterals */
    #compromis-home .marc-linia--left {
        top: 70px;
        bottom: 70px;
        left: 14px;
        width: 6px;
        border-width: 0 2px;
    }
    #compromis-home .marc-linia--right {
        top: 70px;
        bottom: 70px;
        right: 14px;
        width: 6px;
        border-width: 0 2px;
    }

    @media (max-width: 768px) {
        #compromis-home { padding: 20px 20px; }
        #compromis-home .marc_compromis {
            padding: 50px 20px 40px;
            --marc-logo-w: 120px;
            --marc-hueco-half: calc(var(--marc-logo-w) / 2 + 12px);
        }
        #compromis-home .marc-esquina { width: 50px; height: 50px; }
        #compromis-home .marc-linia--top-left,
        #compromis-home .marc-linia--top-right { width: calc(50% - 50px - var(--marc-hueco-half)); left: auto; right: auto; }
        #compromis-home .marc-linia--top-left { left: 50px; }
        #compromis-home .marc-linia--top-right { right: 50px; }
        #compromis-home .marc-linia--bottom { left: 50px; right: 50px; }
        #compromis-home .marc-linia--left,
        #compromis-home .marc-linia--right { top: 50px; bottom: 50px; }
        #compromis-home .marc-logo { top: -22px; }
        #compromis-home .textos-inicials-compromis { padding-top: 90px; }
    }
    /* ===== /MARC DECORATIU ===== */

    #compromis-home .textos-inicials-compromis {
        text-align: center;
        display: flex;
        flex-direction: column;
        padding-top: 140px; /* respir suficient sota el logo superior */
        align-items: center;
    }

    #compromis-home .textos-inicials-compromis h2 {
        text-transform: uppercase;
        color: #AA8055;
        font-family: 'Tiller';
        font-weight: 600;
        font-size: 53px;
        margin-bottom: 20px;
    }

    #compromis-home .textos-inicials-compromis p {
        max-width: 40%;
        font-size: 28px;
        color: #AA8055;
        font-family: 'Tiller';
        font-weight: 500;
        margin-bottom: 60px;
        line-height: 1.2;
    }
        
    #compromis-home .compromis-items {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        padding: 80px 0;
    }

    /* ===== GALETES DECORATIVES FLOTANTS ===== */
    #compromis-home .galeta-flotant {
        position: absolute;
        pointer-events: none;
        user-select: none;
        opacity: 0.85;
        height: auto;
        z-index: 0;            /* darrere del text/imatges principals */
    }

    /* 1) Galeta rectangular — flotant dalt a la dreta, prop del primer bloc */
    #compromis-home .galeta-flotant--rectangular {
        top: -50px;
        right: 19%;
        width: 420px;
    }

    /* 2) Galeta tubo — entre el primer i el segon bloc, centrada-esquerra */
    #compromis-home .galeta-flotant--tubo {
        top: 47%;
        left: 75%;
        width: 296px;
        /* transform: rotate(-8deg); */
    }

    /* 3) Galeta bàsica (rosca/donut) — dins del 3r bloc, esquerra */
    #compromis-home .galeta-flotant--basica {
        bottom: 56%;
        left: 36%;
        width: 297px;
    }

    /* 4) Galeta amb ametlla — dins de l'últim bloc, dreta */
    #compromis-home .galeta-flotant--almendra {
        bottom: 24%;
        right: 59%;
        width: 220px;
    }

    @media (max-width: 991px) {
        #compromis-home .galeta-flotant--rectangular { width: 150px; right: 4%; top: 20px; }
        #compromis-home .galeta-flotant--tubo        { width: 140px; left: 8%;  top: 45%; }
        #compromis-home .galeta-flotant--basica      { width: 100px; left: 6%;  bottom: 22%; }
        #compromis-home .galeta-flotant--almendra    { width: 120px; right: 6%; bottom: 6%; }
    }

    
    /* ===== /GALETES DECORATIVES ===== */

    #compromis-home .compromis-items .imatge_text_comp {
        display: flex;
        flex-direction: row;
        width: 70%;
    }

    #compromis-home .compromis-items .imatge_text_comp .left_fill_comp {
        flex: 1;
        justify-content: start;
        display: flex;
    }

    #compromis-home .compromis-items .imatge_text_comp .left_fill_comp img {
        height: auto;
        max-width: 90%;
        z-index: 2;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp{
        display: flex;
        flex-direction: column;
        justify-content: end;
        flex: 1;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp h2 {
        font-size: 68px;
        color: #AA8055;
        font-family: 'AltesseStd-Regular';
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp p {
        width: 70%;
        font-size: 18px;
        font-family: Possible;
    }

    /* INTERCANVIAT */

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat {
        flex-direction: row-reverse;
        margin-top: 260px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp {
        justify-content: start;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp h2 {
        font-size: 32px;
        font-family: 'Tiller';
        font-weight: 500;
        width: 70%;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp p {
        font-size: 18px;
    }

    /* TEXTOS PEU */

    #compromis-home div.compromis-items .textos_peu_compromis {
        width: 70%;
        display: flex;
        flex-direction: row;
        margin-top: 40px;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .bloc_buid_comrpomis {
        flex: 1;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis {
        flex: 1;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .primer_text_preu {
        font-size: 28px;
        font-family: 'Tiller';
        font-weight: 500;
        color: #AA8055;
        margin-bottom: 20px;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .segon_text_peu {
        font-size: 28px;
        font-family: 'Tiller';
        font-weight: 500;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .nom_firma{
        display: flex;
        justify-content: space-between;
        width: 80%;
        align-items: center;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .nom_firma p {
        font-size: 18px;
        font-family: Possible;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .nom_firma img {
        width: 90px;
        height: auto;
    }


  /* FI BLOC COMPROMIS */

  /* SECCIO CRONICA */

   .cronica {
        background-color: #F7F3E6;
        padding: 80px 0 100px;
        position: relative;
        overflow: hidden;                              /* tanca el slider que es desborda per la dreta */
    }

    /* Container del header + línia: centrat amb padding lateral */
    .cronica__container {
        margin: 0 auto;
        padding: 0 0 0 5%;
    }

    .cronica__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .cronica__title {
        font-family: 'Tiller', serif;
        color: #AA8055;
        font-size: 53px;
        margin: 0;
        text-transform: uppercase;
        font-weight: 600;
    }

    .cronica__nav {
        display: flex;
        gap: 12px;
        padding-right: 100px;
    }

    .cronica__arrow {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #AA8055;
        background: transparent;
        color: #AA8055;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.25s ease, color 0.25s ease;
    }

    .cronica__arrow:hover {
        background-color: #AA8055;
        color: #F7F3E6;
    }

    .cronica__arrow.swiper-button-disabled {
        opacity: 0.3;
        pointer-events: none;
        cursor: not-allowed;
    }

    .cronica__line {
        height: 1px;
        background-color: #AA8055;
        opacity: 0.45;
        margin-bottom: 50px;
    }

    /* --- Slider wrap: aplica el mateix padding-left que el container
       perquè l'any 1908 quedi alineat amb "CRÓNICA". Sense padding-right
       perquè els slides surtin per la dreta. --- */
    .cronica__slider-wrap {
        margin: 0 auto;
        padding-left: 5%;
        padding-right: 0;
    }

    .cronica__swiper {
        overflow: visible;                             /* deixa veure el slide que entra per la dreta */
    }

    .cronica__slide {
        height: auto;
        opacity: 0.3;
        transition: opacity 0.6s ease;
    }

    .cronica__slide.swiper-slide-active {
        opacity: 1;
    }

    .cronica__year {
        font-family: 'Tiller', serif;
        font-size: 80px;
        color: #AA8055;
        line-height: 1;
        margin: 0 0 36px;
        font-weight: 400;
    }

    .cronica__body {
        display: flex;
        gap: 32px;
        align-items: flex-start;
    }

    .cronica__img-wrap {
        flex: 0 0 240px;
       
    }

    .cronica__img-wrap img {
        width: 100%;
        height: auto;
        display: block;
    }

    .cronica__text {
        flex: 1;
        min-width: 0;
        padding-top: 80px;
        padding-right: 8%;
    }

    .cronica__subtitle {
        font-family: 'Tiller', serif;
        font-size: clamp(18px, 1.5vw, 22px);
        color: #AA8055;
        margin: 0 0 18px;
        font-weight: 500;
        line-height: 1.25;
    }

    .cronica__desc {
        font-size: 13px;
        line-height: 1.65;
        color: #1a1a1a;
    }

    @media (max-width: 991px) {
        .cronica__body { gap: 24px; }
        .cronica__img-wrap { flex-basis: 160px; max-width: 160px; }
        .cronica__text { padding-top: 40px; }
    }

    @media (max-width: 768px) {
        .cronica { padding: 60px 0 70px; }
        .cronica__body { flex-direction: column; gap: 20px; }
        .cronica__img-wrap { flex-basis: auto; max-width: 60%; }
        .cronica__text { padding-top: 0; }
        .cronica__slide { opacity: 1; }                /* a mòbil només es veu 1, no cal atenuar */
    }
  /* FI SECCIO CRONICA */

  /* BLOC IMAGE + TEXT */

   .bit-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 60px;
        padding: 80px 80px;
        background-color: #F7F3E6;
    }

    .bit-imatge {
        flex: 0 0 34%;
        flex: 0 0 34%;
    }

    .bit-imatge img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    .bit-contingut {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-top: 20px;
    }

    .bit-titol {
        font-family: 'Tiller', sans-serif;
        font-size: 84px;
        font-weight: 600;
        text-transform: uppercase;
        color: #AA8055;
        line-height: 1.05;
        margin-bottom: 40px;
        width: 82%;
        padding-left: 4px;
    }

    .bit-textos {
        column-count: 2;
        column-gap: 40px;
        font-family: 'Possible', sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;
        color: #AA8055;
    }

    .bit-textos p {
        margin-bottom: 1em;
        break-inside: avoid;
    }

    @media (max-width: 991px) {
        .bit-wrapper {
            flex-direction: column;
            padding: 40px 30px;
            gap: 30px;
        }
        .bit-imatge { flex: 0 0 auto; width: 100%; }
        .bit-titol  { font-size: 42px; }
        .bit-textos { column-count: 1; }
    }

    @media (max-width: 575px) {
        .bit-wrapper { padding: 30px 20px; }
        .bit-titol   { font-size: 32px; }
    }
  /* FI BLOC IMAGE + TEXT */

/*******************************************************************
** FI ESTILS DE LES DIFERENTS SECCIONS -------------------------- **/




/* ── Paginació ────────────────────────────────── */
.pagination-clean {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.pagination-clean a {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pagination-clean a:hover,
.pagination-clean a.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* =========================================================================
   HEADER · Icones planes (buscar, heart, user, cesta)
   -------------------------------------------------------------------------
   Substitueix les icones FontAwesome del header per SVG plans (sense cercle
   de fons) amb el mateix tractament visual de la referència de disseny:
   - Sense fons rodó ni border (variant .icon-btn--flat)
   - SVG ~22px, color marró TRIAS via filter
   - Hover suau (opacity)
   Fitxers SVG: files/public/img/{buscar,heart,user,cesta}.svg
   ========================================================================= */

#site-header .header-actions .icon-btn.icon-btn--flat,
.header-actions .icon-btn.icon-btn--flat,
.navbar-actions-mobile .icon-btn.icon-btn--flat {
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.header-actions .icon-btn.icon-btn--flat:hover,
.header-actions .icon-btn.icon-btn--flat:focus,
.navbar-actions-mobile .icon-btn.icon-btn--flat:hover,
.navbar-actions-mobile .icon-btn.icon-btn--flat:focus {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.header-actions .header-svg,
.navbar-actions-mobile .header-svg {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  transition: opacity .2s ease;
  /* Color marró TRIAS aplicat al SVG negre/foscor original via filter */
  /* Si els SVG ja tenen el color desitjat, pots eliminar la línia 'filter'. */
  /* filter: brightness(0) saturate(100%) invert(45%) sepia(20%) saturate(900%) hue-rotate(355deg) brightness(95%) contrast(90%); */
}

.header-actions .icon-btn.icon-btn--flat:hover .header-svg,
.navbar-actions-mobile .icon-btn.icon-btn--flat:hover .header-svg {
  opacity: 0.65;
}

/* El selector d'idioma del drawer només apareix a ≤911px */
#mainNav .menu-mobile-lang {
  display: none;
}

/* Selector d'idioma — versió plana, sense caixa visible */
.header-actions .caixa_idiomes_capcalera,
.navbar-actions-mobile .caixa_idiomes_capcalera {
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  padding-right: 18px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23333' stroke-width='1.4' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.header-actions .caixa_idiomes_capcalera:focus,
.navbar-actions-mobile .caixa_idiomes_capcalera:focus {
  outline: none;
  box-shadow: none;
}

/* Badge del comptador del carro adaptat al fons clar */
.header-actions #carro_petit .badge {
  font-size: 10px;
  padding: 3px 5px;
}
/* =========================================================================
   /HEADER · Icones planes
   ========================================================================= */


/* =========================================================================
   NEWSLETTER · Banda vermella amb input + botó
   -------------------------------------------------------------------------
   Bloc full-width amb fons vermell TRIAS. Dues columnes:
   · Esquerra : títol gran + descripció
   · Dreta    : input email amb fletxa, text legal i botó blanc subscriure's
   Markup associat: files/public/seccions/newsletter.php
   ========================================================================= */

.newsletter-trias {
  background-color: #db001c;          /* vermell TRIAS */
  color: #ffffff;
  padding: 70px 0;
  width: 100%;
}

/* Igualar amplada i paddings laterals amb la secció .blogs_home_section.
   El blog usa: .container { max-width: 100%; } + grid intern padding 20px 100px.
   Repliquem el mateix patró perquè el contingut comenci a la mateixa X que els blogs. */
.newsletter-trias .container,
.newsletter-trias .container-custom {
  max-width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  position: relative;
}

/* --- Columna esquerra --- */
.newsletter-trias__title {
    font-family: 'Tiller', serif;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 22px;
    letter-spacing: 0.5px;
    max-width: 60%;
}

.newsletter-trias__desc {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.55;
    margin-bottom: 0;
    max-width: 580px;
    opacity: 0.95;
    font-family: 'Possible';
    font-weight: 300;
}

/* --- Columna dreta · formulari --- */
/* Columna dreta — alineem el form al límit dret del contenidor */
.newsletter-trias__right {
    display: flex;
    justify-content: flex-end;
}

.newsletter-trias__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 90%;
    margin-left: auto;   /* dins de la columna, empeny a la dreta */
}

@media (max-width: 991px) {
    .newsletter-trias__form { width: 100%; }
    .newsletter-trias__right { justify-content: flex-start; }
}

.newsletter-trias__input-wrap {
  position: relative;
  width: 100%;
  background: #ffffff;
  border-radius: 0px;
}

.newsletter-trias__input {
  width: 100%;
  height: 56px;
  border: none;
  background: transparent;
  padding: 0 56px 0 22px;             /* dreta deixa lloc a la fletxa */
  font-size: 15px;
  color: #333;
  border-radius: 2px;
  outline: none;
}

.newsletter-trias__input::placeholder {
  color: #8a8a8a;
  font-style: italic;
  opacity: 1;
}

.newsletter-trias__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* Botó-fletxa dins de l'input */
.newsletter-trias__arrow {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #db001c;
  cursor: pointer;
  padding: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.newsletter-trias__arrow:hover {
  opacity: 0.7;
  transform: translateY(-50%) translateX(2px);
}

/* Text legal sota l'input */
.newsletter-trias__legal {
    font-size: 13px;
    color: #ffffff;
    opacity: 0.85;
    line-height: 1.4;
    margin: 4px 0 6px;
    font-family: 'Possible';
}

/* Botó SUBSCRIU-TE */
.newsletter-trias__btn {
    align-self: flex-start;
    background: #ffffff;
    color: #db001c;
    border: none;
    padding: 12px 32px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: 'Possible';
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    border-radius: 0;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.newsletter-trias__btn:hover {
  background: transparent;
  border: 1px solid white;
  color: white;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .newsletter-trias { padding: 50px 0; }
  .newsletter-trias .container,
  .newsletter-trias .container-custom { padding-left: 40px; padding-right: 40px; }
  .newsletter-trias__title { font-size: 32px; }
  .newsletter-trias__desc { font-size: 15px; }
}

@media (max-width: 575px) {
  .newsletter-trias { padding: 40px 0; }
  .newsletter-trias .container,
  .newsletter-trias .container-custom { padding-left: 20px; padding-right: 20px; }
  .newsletter-trias__title { font-size: 26px; margin-bottom: 14px; }
  .newsletter-trias__input { height: 50px; font-size: 14px; }
  .newsletter-trias__arrow { width: 32px; height: 32px; right: 10px; }
  .newsletter-trias__btn { width: 100%; text-align: center; }
}
/* =========================================================================
   /NEWSLETTER
   ========================================================================= */


/* =========================================================================
   FOOTER · Versió TRIAS — fons vermell amb logo gran a l'esquerra
   -------------------------------------------------------------------------
   Estructura:
   · TOP    : .footer-trias__brand (logo gran) + .footer-trias__cols (4 col menús)
   · línia divisora horitzontal blanca
   · BOTTOM : .footer-trias__legal (copyright + polítiques) + .footer-trias__social
   Markup associat: files/public/seccions/footer.php
   ========================================================================= */

.footer-trias {
  background-color: #db001c;
  color: #ffffff;
  padding: 60px 0 24px;
  font-family: Possible, sans-serif;
}

.footer-trias .container,
.footer-trias .container-custom {
  max-width: 100%;
  padding-left: 100px;
  padding-right: 100px;
}

/* ---------- TOP : logo + columnes ---------- */

.site-footer {
    border-top: none; 
}

.footer-trias__top {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding: 80px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.footer-trias__brand {
  flex: 0 0 50%;
}

.footer-trias__logo {
  max-width: 100%;
  height: auto;
  display: block;
}

.footer-trias__cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 6px;
}

.footer-trias__col {
  display: flex;
  flex-direction: column;
}

.footer-trias__col-title {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0 0 14px 0;
    font-family: 'Possible';
}

.footer-trias__col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-trias__col-links a {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    transition: opacity .2s ease;
    font-family: 'Possible';
    font-weight: 300;
}

.footer-trias__col-links a:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* ---------- BOTTOM : legal + xarxes ---------- */
.footer-trias__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 22px;
  flex-wrap: wrap;
}

.footer-trias__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #ffffff;
}

.footer-trias__legal a {
  color: #ffffff;
  text-decoration: none;
}

.footer-trias__legal a:hover {
  opacity: 0.75;
  text-decoration: none;
}

.footer-trias__sep {
  opacity: 0.6;
  font-weight: 300;
}

/* Xarxes socials + by Neorg */
.footer-trias__social {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #ffffff;
}

.footer-trias__social-label {
  margin-right: 4px;
}

.footer-trias__social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-trias__social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  color: #ffffff;
  transition: opacity .2s ease;
}

.footer-trias__social-list a:hover {
  opacity: 0.75;
}

.footer-trias__social-list i {
    font-size: 20px;
}

.footer-trias__social-list svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}

.footer-trias__social-list img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* força els icons a blanc */
}

.footer-trias__credits {
  color: #ffffff;
  margin-left: 10px;
  text-decoration: none;
  font-size: 13px;
}

.footer-trias__credits:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .footer-trias .container,
  .footer-trias .container-custom { padding-left: 50px; padding-right: 50px; }
  .footer-trias__top { gap: 50px; }
  .footer-trias__brand { flex: 0 0 240px; }
  .footer-trias__logo { max-width: 200px; }
}

@media (max-width: 991px) {
  .footer-trias__top { flex-direction: column; gap: 40px; }
  .footer-trias__brand { flex: 0 0 auto; }
  .footer-trias__cols { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 575px) {
  .footer-trias { padding: 40px 0 20px; }
  .footer-trias .container,
  .footer-trias .container-custom { padding-left: 20px; padding-right: 20px; }
  .footer-trias__cols { grid-template-columns: 1fr; }
  .footer-trias__bottom { flex-direction: column; align-items: flex-start; }
  .footer-trias__legal { font-size: 12px; gap: 8px; }
  .footer-trias__social { flex-wrap: wrap; }
}
/* =========================================================================
   /FOOTER · Versió TRIAS
   ========================================================================= */

/* =========================================================================
   HEADER · Variant marró (classe header-marron, controlada des d'index.html)
   ========================================================================= */
.site-header.header-marron {
  background-color: #F7F3E6;
  border-bottom: 1px solid rgba(170, 128, 85, 0.25);
}

.site-header.header-marron .logo_butons {
  background-color: #F7F3E6;
}

.site-header.header-marron .header-svg {
  filter: brightness(0) saturate(100%) invert(54%) sepia(20%) saturate(630%) hue-rotate(354deg) brightness(92%) contrast(85%);
}

.site-header.header-marron .icon-btn {
  color: #AA8055;
}

.site-header.header-marron .caixa_idiomes_capcalera {
  color: #AA8055;
  background-color: transparent;
  border-color: #AA8055;
}

.site-header.header-marron .btn-botiga-menu {
  background-color: #AA8055;
  color: #F7F3E6;
  border-color: #AA8055;
}

.site-header.header-marron .btn-botiga-menu:hover {
  background-color: #8e6843;
  color: #F7F3E6;
}

.site-header.header-marron .navbar {
  background-color: #F7F3E6;
}

.site-header.header-marron .main-menu .nav-link {
  color: #AA8055;
}

.site-header.header-marron .main-menu .nav-link:hover,
.site-header.header-marron .main-menu .nav-link.active {
  color: #8e6843;
}

/* =========================================================================
   HEADER · Variant vermella (classe header-rojo, controlada des de museu.php)
   ========================================================================= */
.site-header.header-rojo {
  background-color: #610C00;
  border-bottom: none;
  transition: background-color 0s, border-color 0s;
}

.site-header.header-rojo .logo_butons {
  background-color: #610C00;
  transition: background-color 0s;
}

.site-header.header-rojo .header-svg {
  filter: brightness(0) invert(1);
}

.site-header.header-rojo .icon-btn {
  color: #ffffff;
}

.site-header.header-rojo .caixa_idiomes_capcalera {
  color: #ffffff !important;
  background-color: transparent;
  border-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23ffffff' stroke-width='1.4' d='M1 1l4 4 4-4'/></svg>");
}

.site-header.header-rojo .caixa_idiomes_capcalera option {
  background-color: #610C00;
  color: #ffffff;
}

.site-header.header-rojo .btn-botiga-menu {
  background-color: #AA8055;
  color: #F7F3E6;
  border-color: #AA8055;
}

.site-header.header-rojo .btn-botiga-menu:hover {
  background-color: #8e6843;
  color: #F7F3E6;
}

.site-header.header-rojo .navbar {
  background-color: #610C00;
}

.site-header.header-rojo .main-menu .nav-link {
  color: #ffffff;
}

.site-header.header-rojo .main-menu .nav-link:hover,
.site-header.header-rojo .main-menu .nav-link.active {
  color: #CC1B1B;
}

/* =========================================================================
   HEADER · Variant blogs (classe header-blogs, controlada des de blogs.php)
   ========================================================================= */
.site-header.header-blogs {
  background-color: #f2e1cc;
  border-bottom: 1px solid rgba(170, 128, 85, 0.25);
}

.site-header.header-blogs .logo_butons {
  background-color: #f2e1cc;
}

.site-header.header-blogs .header-svg {
  filter: brightness(0) saturate(100%) invert(54%) sepia(20%) saturate(630%) hue-rotate(354deg) brightness(92%) contrast(85%);
}

.site-header.header-blogs .icon-btn {
  color: #AA8055;
}

.site-header.header-blogs .caixa_idiomes_capcalera {
  color: #AA8055;
  background-color: transparent;
  border-color: #AA8055;
}

.site-header.header-blogs .btn-botiga-menu {
  background-color: #AA8055;
  color: #f2e1cc;
  border-color: #AA8055;
}

.site-header.header-blogs .btn-botiga-menu:hover {
  background-color: #8e6843;
  color: #f2e1cc;
}

.site-header.header-blogs .navbar {
  background-color: #f2e1cc;
}

.site-header.header-blogs .main-menu .nav-link {
  color: #AA8055;
}

.site-header.header-blogs .main-menu .nav-link:hover,
.site-header.header-blogs .main-menu .nav-link.active {
  color: #CC1B1B;
}

/* PLANTILLES  **/

    /** HISTORIA ****/
        #historia {
            background-color: #F7F3E6;
            width: 100%;
            padding: 80px 0 0;
        }

        #historia .titols_historia {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;    
            color: #DB001C;
            position: relative;
        }

        #historia .titols_historia #img_h_1 {
            position: absolute;
            transform: rotate(180deg);
            width: 80%;
            left: 10%;
            top: 30%;
        }

        #historia .titols_historia #img_h_2 {
            width: 260px;
        }

        #historia .titols_historia p {
            font-size: 32px;
            text-transform: uppercase;
            font-family: 'Tiller';
            font-weight: 600;
            margin-bottom: 20px;
        }

        #historia .titols_historia h2 {
            font-size: 148px;
            text-transform: uppercase;
            font-family: 'Tiller';
            font-weight: 600;
            margin-bottom: 40px;
        }

        #historia .titols_historia #text_desde {
            color: #AA8055;
            font-family: 'AltesseStd-Regular';
            text-transform: none;
            font-size: 48px;
            font-weight: 200;
        }

        #historia .section-space .separador_boles {
            background-color: #F7F3E6;
        }
    /** HISTORIA ****/

    /** MUSEU **/

/* Hero principal */
div.caixa_vermella_museo {
    position: relative;
    background-color: #610C00;
    height: auto;
    background-size: 45%;
    background-position: bottom left;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
}
/* Capa de color vermell fosc sobre la imatge de fons - molt opaca per atenuar la imatge */
div.caixa_vermella_museo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(97, 12, 0, 0.85);
    z-index: 0;
}

/* Columna esquerra: títol dalt + subtítol baix */
div.caixa_vermella_museo .textos_esq_mus {
    position: relative;
    z-index: 1;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 100px 40px 120px 80px;
}

/* Títol petit "MUSEU TRIAS" - dalt a l'esquerra */
div.caixa_vermella_museo .textos_esq_mus h2:first-child {
    font-family: 'Tiller', sans-serif;
    font-size: 68px;
    font-weight: 600;
    text-transform: uppercase;
    color: #CC1B1B;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0 0 0 6%;
}

/* Subtítol gran "UN VIATGE PER LA NOSTRA HISTÒRIA" - baix esquerra */
.museu-subtitol-gran {
    font-family: 'Tiller', sans-serif;
    font-size: 75px;
    font-weight: 600;
    text-transform: uppercase;
    color: #F2E1CC;
    line-height: 1.05;
    margin: 0;
    width: 75%;
    margin-left: 6%;
}

/* Columna dreta: imatge dalt + text baix */
div.caixa_vermella_museo .textos_dreta_mus {
    position: relative;
    z-index: 1;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 100px 80px 120px 20px;
    gap: 32px;
}

/* Imatge postal - dalt dreta, mida petita */
div.caixa_vermella_museo .caixa_img_mus {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 60%;
    max-width: 400px;
    margin-bottom: 0px;
}

div.caixa_vermella_museo .caixa_img_mus img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text descripció en dues columnes - baix dreta */
div.caixa_vermella_museo .textos_dreta_mus p {
    color: #F2E1CC;
    font-size: 16px;
    line-height: 1.6;
    column-count: 2;
    column-gap: 28px;
    margin: 0;
    padding-right: 24px;
    width: 86%;
}


#museu .contenedor_museo {
    background-color: #C9A077;
    height: auto;
    padding: 120px 40px 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== MARC DECORATIU MUSEU (envolca totes les seccions heretades) ===== */
#museu .marc_museu {
    position: relative;
    width: 100%;
    
    margin: 0 auto;
    padding: 100px 60px 80px;
    box-sizing: border-box;

    /* Variables: amplada logo + mig hueco línies superiors */
    --marc-logo-w: 300px;
    --marc-hueco-half: calc(var(--marc-logo-w) / 2 + 24px);
}

/* Esquines SVG */
#museu .marc-esquina {
    position: absolute;
    width: 70px;
    height: 70px;
    pointer-events: none;
    display: block;
    line-height: 0;
    z-index: 2;
}
#museu .marc-esquina svg {
    width: 100%;
    height: 100%;
    display: block;
}
#museu .marc-esquina--tl { top: 0; left: 0; transform: scaleY(-1); }
#museu .marc-esquina--tr { top: 0; right: 0; transform: scale(-1, -1); }
#museu .marc-esquina--bl { bottom: 0; left: 0; }
#museu .marc-esquina--br { bottom: 0; right: 0; transform: scaleX(-1); }

/* Logo Museu centrat superior (sobre el hueco) */
#museu .marc-logo {
    position: absolute;
    top: -175px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--marc-logo-w);
    height: auto;
    display: block;
    object-fit: contain;
    z-index: 3;
    pointer-events: none;
}

/* Línies dobles (border doble per a les paral·leles) */
#museu .marc-linia {
    position: absolute;
    pointer-events: none;
    border-color: #6b1f1f;
    border-style: solid;
}
#museu .marc-linia--top-left {
    top: 14px;
    left: 70px;
    width: calc(50% - 70px - var(--marc-hueco-half));
    height: 6px;
    border-width: 2px 0;
}
#museu .marc-linia--top-right {
    top: 14px;
    right: 70px;
    width: calc(50% - 70px - var(--marc-hueco-half));
    height: 6px;
    border-width: 2px 0;
}
#museu .marc-linia--bottom {
    bottom: 14px;
    left: 70px;
    right: 70px;
    height: 6px;
    border-width: 2px 0;
}
#museu .marc-linia--left {
    top: 70px;
    bottom: 70px;
    left: 14px;
    width: 6px;
    border-width: 0 2px;
}
#museu .marc-linia--right {
    top: 70px;
    bottom: 70px;
    right: 14px;
    width: 6px;
    border-width: 0 2px;
}

/* Contenidor intern del marc — agrupa totes les seccions heretades */
#museu .marc_museu_inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    #museu .contenedor_museo { padding: 90px 20px 60px; }
    #museu .marc_museu {
        padding: 80px 25px 60px;
        --marc-logo-w: 140px;
        --marc-hueco-half: calc(var(--marc-logo-w) / 2 + 14px);
    }
    #museu .marc-esquina { width: 50px; height: 50px; }
    #museu .marc-linia--top-left,
    #museu .marc-linia--top-right {
        width: calc(50% - 50px - var(--marc-hueco-half));
    }
    #museu .marc-linia--top-left  { left: 50px; }
    #museu .marc-linia--top-right { right: 50px; }
    #museu .marc-linia--bottom    { left: 50px; right: 50px; }
    #museu .marc-linia--left,
    #museu .marc-linia--right     { top: 50px; bottom: 50px; }
    #museu .marc-logo             { top: -38px; }
}
@media (max-width: 480px) {
    /* Marc més pegat a la pantalla per aprofitar l'espai en mòbils petits.
       Padding lateral mínim perquè les esquines SVG quedin a tocar de les vores. */
    #museu .contenedor_museo { padding: 70px 2px 50px; }
    #museu .marc_museu {
        padding: 70px 12px 50px;
        --marc-logo-w: 120px;
        --marc-hueco-half: calc(var(--marc-logo-w) / 2 + 10px);
    }
    #museu .marc-esquina { width: 40px; height: 40px; }
    #museu .marc-linia--top-left,
    #museu .marc-linia--top-right {
        width: calc(50% - 40px - var(--marc-hueco-half));
    }
    #museu .marc-linia--top-left  { left: 40px; }
    #museu .marc-linia--top-right { right: 40px; }
    #museu .marc-linia--bottom    { left: 40px; right: 40px; }
    #museu .marc-linia--left,
    #museu .marc-linia--right     { top: 40px; bottom: 40px; }
    #museu .marc-linia--left      { left: 8px; }
    #museu .marc-linia--right     { right: 8px; }
    #museu .marc-logo             { top: -32px; }
}
/* ===== /MARC DECORATIU MUSEU ===== */


/* ===== SECCIÓ IMG SOBRE TEXT (fill amb contador == 0) ===== */
#museu #img_sobre_text,
#museu .img_sobre_text {
    padding: 80px 20px 60px;
    text-align: center;
    font-family: 'Georgia', serif;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 100px auto;

}

/* Imatge polaroid apilada */
#museu #img_sobre_text .image_inicial,
#museu .img_sobre_text .image_inicial {
    position: relative;
    display: inline-block;
}
#museu #img_sobre_text .image_inicial img,
#museu .img_sobre_text .image_inicial img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* Títol amb línies laterals */
#museu #img_sobre_text .titol_ratllat,
#museu .img_sobre_text .titol_ratllat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 25px;
}
#museu #img_sobre_text .caja_rallada,
#museu .img_sobre_text .caja_rallada {
    flex: 1;
    height: 2px;
    background-color: #6b1f1f;
}

#museu #img_sobre_text .titol_ist,
#museu .img_sobre_text .titol_ist {
    flex: 0 0 auto;
    max-width: 340px;
    font-size: 44px;
    font-weight: 600;
    color: #6b1f1f;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.5px;
    font-family: 'Tiller';
}

/* Descripció */
#museu #img_sobre_text .subtitol_sobre_text,
#museu .img_sobre_text .subtitol_sobre_text {
    max-width: 480px;
    margin: 0 auto;
    font-size: 18px;
    color: #2b2b2b;
    line-height: 1.55;
    font-family: 'Possible';
}

/* Responsive img_sobre_text */
@media (max-width: 768px) {
    #museu #img_sobre_text .image_inicial img,
    #museu .img_sobre_text .image_inicial img { width: 100%; max-width: 360px; }
    #museu #img_sobre_text .titol_ist,
    #museu .img_sobre_text .titol_ist         { font-size: 1.5rem; max-width: 220px; }
    #museu #img_sobre_text .titol_ratllat,
    #museu .img_sobre_text .titol_ratllat     { gap: 15px; }
}
/* ===== /SECCIÓ IMG SOBRE TEXT ===== */


/* ===== MUSEU STACK STICKY (capes separades: imatges + textos) ===== */
/* El contenidor reserva (count + 1) viewports d'alçada perquè el sticky tingui
   recorregut per anar canviant l'ítem actiu. */
.museu-stack {
    position: relative;
    /* 90vh per viewport (en lloc de 100vh) → el recorregut és un 10% més curt,
       per tant els ítems canvien un 10% abans en relació al scroll. */
    height: calc((var(--stack-count, 1) + 1) * 90vh);
}

.museu-stack__sticky {
    position: sticky;
    /* es "para" separat del header però deixant veure tot el contingut */
    top: 11vh;
    height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Escenari: contenidor RELATIU que conté les dues capes absolutes.
   Ocupa tot l'ample interior del marc (fins a les barres laterals). */
.museu-stack__stage {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* Cada capa ocupa tot l'escenari; els seus fills s'apilen a sobre. */
.museu-stack__layer {
    position: absolute;
    inset: 0;
}

/* Alçada FIXA de la caixa d'imatge: així totes les imatges ocupen el mateix
   espai (independentment de la seva mida real) i el text mai salta de lloc.
   --stack-img-h controla aquesta alçada comuna. */
.museu-stack {
    --stack-img-h: 38vh;
    --stack-top: 8%;    /* posició vertical del bloc (imatge + text) dins l'escenari */
    --stack-text-gap: 56px;  /* separació entre la imatge i el text */
}

/* --- CAPA IMATGES (efecte polaroid apilat) --- */
/* Totes les imatges tenen el MATEIX marc polaroid (vora blanca + ombra) i la
   mateixa mida. Les no actives queden darrere, rotades i desplaçades (montó);
   l'activa es posa recta i al davant. En canviar d'ítem sembla que agafes la
   foto de dalt del montó. */
.museu-stack__layer--img {
    display: block;
}
.museu-stack__img {
    position: absolute;
    top: var(--stack-top);          /* posició vertical del bloc */
    left: 50%;
    width: 100%;
    max-width: 540px;
    height: var(--stack-img-h);     /* MATEIXA alçada per a totes */

    /* Les imatges ja són PNG amb el marc polaroid i ombra incorporats:
       no cal afegir fons, padding ni box-shadow. Només rotar i apilar.
       Rotació pròpia FIXA per imatge (nth-child); NO s'anima el transform. */
    transform: translateX(-50%) rotate(-4deg);
    transform-origin: 50% 50%;
    opacity: 0;
    z-index: 1;
    /* sense transició: les imatges apareixen directament, sense fade */
}
.museu-stack__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;            /* respecta el marc/transparència del PNG */
}

/* Rotacions diferents perquè el montó es vegi natural. Cada imatge manté SEMPRE
   el seu angle (activa o no) → no rota mai, només apareix/desapareix.
   Angles concrets per a les 6 imatges (alternant sentit i magnitud). */
.museu-stack__img:nth-child(1) { transform: translateX(-50%) rotate(-5deg); }
.museu-stack__img:nth-child(2) { transform: translateX(-50%) rotate(4deg); }
.museu-stack__img:nth-child(3) { transform: translateX(-50%) rotate(-2.5deg); }
.museu-stack__img:nth-child(4) { transform: translateX(-50%) rotate(5.5deg); }
.museu-stack__img:nth-child(5) { transform: translateX(-50%) rotate(-3.5deg); }
.museu-stack__img:nth-child(6) { transform: translateX(-50%) rotate(2.5deg); }
/* Respatller per si n'hi ha més de 6: repeteix patró cada 6. */
.museu-stack__img:nth-child(6n+7) { transform: translateX(-50%) rotate(-4.5deg); }
.museu-stack__img:nth-child(6n+8) { transform: translateX(-50%) rotate(3.5deg); }

/* Les que ja han passat queden visibles a sota formant el montó. */
.museu-stack__img.is-stacked {
    opacity: 1;
    z-index: 2;
}

/* La imatge activa: al davant del montó (manté la seva rotació pròpia). */
.museu-stack__img.is-active {
    opacity: 1;
    z-index: 3;
}

/* --- CAPA TEXTOS --- */
/* Text ancorat just sota la caixa d'imatge (posició fixa). Com totes les imatges
   tenen la mateixa alçada, el text sempre apareix al mateix lloc → sense salts. */
.museu-stack__layer--text {
    display: block;
    pointer-events: none;
}
.museu-stack__text {
    position: absolute;
    /* top imatge + alçada caixa imatge + marge → punt d'inici estable del text */
    top: calc(var(--stack-top) + var(--stack-img-h) + var(--stack-text-gap));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1100px;         /* punt intermedi: ni tan estret ni fins a les barres */
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: opacity;
}
.museu-stack__text.is-active {
    opacity: 1;
}

/* Reusa l'estil del títol rallat i descripció (mateix que #img_sobre_text). */
.museu-stack__text .titol_ratllat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0 auto 25px;
}
.museu-stack__text .caja_rallada {
    flex: 1;
    height: 2px;
    background-color: #6b1f1f;
}
.museu-stack__text .titol_ist {
    flex: 0 0 auto;
    max-width: 520px;          /* més ample → màxim un salt de línia */
    font-size: 44px;
    font-weight: 600;
    color: #6b1f1f;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.5px;
    font-family: 'Tiller';
}
.museu-stack__text .subtitol_sobre_text {
    max-width: 480px;
    margin: 0 auto;
    font-size: 18px;
    color: #2b2b2b;
    line-height: 1.55;
    font-family: 'Possible';
}

/* Desktop (>768px): imatges més grans */
@media (min-width: 769px) {
    .museu-stack      { --stack-img-h: 52vh; }
    .museu-stack__img { max-width: 720px; }
}

/* Responsive */
@media (max-width: 991px) {
    .museu-stack      { --stack-img-h: 36vh; }
    .museu-stack__img { max-width: 440px; }
}
@media (max-width: 768px) {
    .museu-stack      { --stack-img-h: 38vh; --stack-top: 4%; }
    .museu-stack__img { max-width: 360px; }
    /* limita l'ample del bloc de text perquè les línies no s'allarguin tant */
    .museu-stack__text { max-width: 420px; }
    .museu-stack__text .titol_ist     { font-size: 1.5rem; max-width: 220px; }
    .museu-stack__text .titol_ratllat { gap: 15px; }
    .museu-stack__text .subtitol_sobre_text { font-size: 16px; }
}
@media (max-width: 480px) {
    .museu-stack      { --stack-img-h: 30vh; --stack-top: 6%; --stack-text-gap: 24px; }
    /* sticky més baix perquè el contingut quedi compacte i no deixi buit a sota */
    .museu-stack__sticky { top: 9vh; height: 68vh; }
    .museu-stack__img { max-width: 280px; }
    .museu-stack__text { max-width: 300px; }
    /* títol més petit i línies laterals més visibles (més llargues, menys gap) */
    .museu-stack__text .titol_ist     { font-size: 1.25rem; max-width: 180px; }
    .museu-stack__text .titol_ratllat { gap: 12px; }
    .museu-stack__text .subtitol_sobre_text { font-size: 14px; }
}
/* ===== /MUSEU STACK STICKY ===== */


/* ===== SECCIÓ EXPOSICIÓ LLAUNES (fill amb contador == 1) ===== */
#museu #exposicio_llaunes {
    width: 90%;
    margin: 80px auto 0;       /* espai superior per separar-lo del slider */
    padding: 60px 20px 40px;
    font-family: 'Georgia', serif;
}

/* Fila superior: títol + descripció */
#museu #exposicio_llaunes .exp_top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-start;
    margin-bottom: 30px;
}
#museu #exposicio_llaunes .exp_titol {
    margin: 0;
    font-size: 44px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b1f1f;
    line-height: 1.05;
    letter-spacing: 0.5px;
    font-family: 'Tiller';
    max-width: 40%;
    width: 22%;
}
#museu #exposicio_llaunes .exp_descripcio {
    font-size: 16px;
    color: #2b2b2b;
    line-height: 1.55;
    font-family: 'Possible';
    width: 32%;
}
#museu #exposicio_llaunes .exp_descripcio p { margin: 0; }

/* Línia separador horitzontal */
#museu #exposicio_llaunes .exp_separador {
    width: 100%;
    height: 2px;
    background-color: #6b1f1f;
    margin-bottom: 40px;
}

/* Imatge ample */
#museu #exposicio_llaunes .exp_imatge img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive exposicio_llaunes */
@media (max-width: 768px) {
    #museu #exposicio_llaunes .exp_top {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    #museu #exposicio_llaunes .exp_titol { font-size: 2rem; }
}
/* ===== /SECCIÓ EXPOSICIÓ LLAUNES ===== */

/* PAGINA GALLETAS  */

    #contingut-subart {
        background-color: #F7F3E6;
    }



     #nuestrasGalletas .caja-intermedia {
        display: flex;
        justify-content: center;
        margin-top: -267px;
        z-index: 1;
    }

     #nuestrasGalletas .caja-intermedia img {
        width: 44%;
    }
    #nuestrasGalletas .listado-galletas {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 40px 80px 120px 80px;
    }

    #nuestrasGalletas .listado-galletas img#flor_flotante {
        position: absolute;
        width: 525px;
        height: auto;
        right: 2%;
        top: -208px;
    }

    #nuestrasGalletas .listado-galletas .textos-listado h2 {
        font-family: 'Tiller';
        font-size: 42px;
        font-weight: 600;
        text-transform: uppercase;
    }

    #nuestrasGalletas .listado-galletas .textos-listado p {
        font-family: 'Possible';
        font-size: 16px;
    }

    #nuestrasGalletas .galetes-grid,
    #contingut-subart .galetes-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 40px 0;
        margin-top: 60px;
    }

    #nuestrasGalletas .galeta-card,
    #contingut-subart .galeta-card {
        flex: 0 0 25%;
        max-width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 20px;
        box-sizing: border-box;
    }

    #nuestrasGalletas .galeta-card__img-wrap, #contingut-subart .galeta-card__img-wrap {
        position: relative;
        width: 100%;
        height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1000px;
    }

    #nuestrasGalletas .galeta-card__producte,
    #contingut-subart .galeta-card__producte {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform .5s ease, opacity .4s ease;
        backface-visibility: hidden;
    }

    /* Nota de cata: oculta, apareix amb gir al hover */
    #nuestrasGalletas .galeta-card__nota,
    #contingut-subart .galeta-card__nota {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px;
        box-sizing: border-box;
        background-color: #F7F3E6;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transform: translate(-50%, -50%) rotateY(180deg);
        transition: transform .5s ease, opacity .4s ease;
        backface-visibility: hidden;
        pointer-events: none;
    }

    #nuestrasGalletas .galeta-card__nota-inner,
    #contingut-subart .galeta-card__nota-inner {
        max-width: 80%;
    }

    #nuestrasGalletas .galeta-card__nota-titol,
    #contingut-subart .galeta-card__nota-titol {
        font-family: 'Tiller';
        font-size: 22px;
        font-weight: 400;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: #1a1a1a;
        margin: 0 0 10px;
    }

    #nuestrasGalletas .galeta-card__nota-text,
    #contingut-subart .galeta-card__nota-text {
        font-family: 'Possible';
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        color: #AA8055;
        margin: 0;
    }

    #nuestrasGalletas .galeta-card__nota-text p,
    #contingut-subart .galeta-card__nota-text p {
        margin: 0;
    }

    /* Hover: la galeta gira i s'amaga, apareix la nota de cata (només a la pàgina de galetes) */
    #nuestrasGalletas .galeta-card:hover .galeta-card__producte {
        transform: rotateY(180deg);
        opacity: 0;
    }

    #nuestrasGalletas .galeta-card:hover .galeta-card__nota {
        opacity: 1;
        transform: translate(-50%, -50%) rotateY(0deg);
    }

    #nuestrasGalletas .galeta-card__titol, 
    #contingut-subart .galeta-card__titol {
        font-family: 'Possible';
        font-size: 30px;
        font-weight: 400;
        margin: 0 0 12px;
        color: #1a1a1a;
    }

    #nuestrasGalletas .galeta-card__subtitol, 
    #contingut-subart .galeta-card__subtitol {
        font-family: 'Possible';
        font-size: 17px;
        line-height: 1.5;
        margin: 0 0 20px;
        color: #555;
    }

    #nuestrasGalletas .galeta-card__btn, 
    #contingut-subart .galeta-card__btn {
        font-family: 'Possible';
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        color: #AA8055;
        border: 1px solid #AA8055;
        padding: 6px 12px;
        transition: background-color .2s ease, color .2s ease;
    }

    #nuestrasGalletas .galeta-card__btn:hover,
    #contingut-subart .galeta-card__btn:hover {
        background-color: #AA8055;
        color: #fff;
    }

    /* Secció galetes dins la fitxa de producte */
    #contingut-subart {
        padding: 60px 80px 100px;
        background-color: #F7F3E6;
    }

    #contingut-subart > h2 {
        font-family: 'Tiller';
        font-size: 36px;
        font-weight: 400;
        text-align: center;
        color: #AA8055;
        margin: 0;
    }

    /* Variant compacta (sense botó, imatge i títol més petits) */
    #contingut-subart .galeta-card--compacta {
        text-decoration: none;
        cursor: pointer;
    }

    #contingut-subart .galeta-card--compacta .galeta-card__img-wrap {
        height: 180px;
        margin-bottom: 18px;
    }

    #contingut-subart .galeta-card--compacta .galeta-card__titol {
        color: #1a1a1a;
        margin: 0 0 6px;
    }

    #contingut-subart .galeta-card--compacta .galeta-card__subtitol {
        font-size: 14px;
        margin: 0;
    }

    #contingut-subart .galeta-card--compacta:hover .galeta-card__titol {
        color: #AA8055;
    }

    @media (max-width: 991px) {
        #nuestrasGalletas .galeta-card,
        #contingut-subart .galeta-card {
            flex: 0 0 50%;
            max-width: 50%;
        }
        #contingut-subart {
            padding: 40px 24px 60px;
        }
        #contingut-subart > h2 {
            font-size: 30px;
        }
    }

    @media (max-width: 575px) {
        #nuestrasGalletas .galeta-card,
        #contingut-subart .galeta-card {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
/* FIN PAGINA GALLETAS */

/* PAGINA DISTRIBUIDORS */
 #distribuidors {
        background-color: #F7F3E6;
    }

    #distribuidors .content-distribuidors {
        max-width: 720px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 80px 24px 60px;
    }

    #distribuidors .content-distribuidors h2 {
        font-family: 'Tiller';
        font-size: 34px;
        font-weight: 600;
        text-transform: uppercase;
        color: #AA8055;
        margin-bottom: 70px;
        padding-top: 30px;
    }

    #distribuidors .content-distribuidors h1 {
        font-family: 'Tiller';
        font-size: 140px;
        font-weight: 600;
        line-height: 0.95;
        text-transform: uppercase;
        color: #db001c;
        margin-bottom: 60px;
    }

    #distribuidors .content-distribuidors p {
        font-family: 'Possible', sans-serif;
        font-size: 19px;
        color: #AA8055;
        line-height: 1.7;
        max-width: 600px;
        margin-bottom: 80px;
        font-weight: 400;
    }

    /* Form card */
    #distribuidors .distribuidors-form-wrap {
        display: flex;
        justify-content: center;
        padding: 0 24px 0;
        position: relative;
        z-index: 2;
        margin-bottom: -120px;
    }

    #distribuidors .distribuidors-red-bg {
        background-color: #db001c;
        height: 160px;
        margin-top: -40px;
    }

    #distribuidors .distribuidors-form-card {
        background-color: #f2e1cc;
        border-radius: 0 0 24px 24px;
        padding: 0 56px 48px;
        width: 100%;
        max-width: 48%;
        position: relative;
    }

    #distribuidors .distribuidors-form-card .addBolesContact {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 1919px;
        height: auto;
        display: block;
    }


    #distribuidors .distribuidors-form-titol {
        font-family: 'Tiller', serif;
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 0.08em;
        color: #6b1a1a;
        margin-bottom: 32px;
        text-transform: uppercase;
    }

    /* Inputs */
    #distribuidors .form-control {
        background: transparent;
        border: none;
        border-bottom: 1px solid #b8a898;
        border-radius: 0;
        padding: 8px 0;
        font-family: 'Possible', sans-serif;
        font-size: 15px;
        color: #3a2a1a;
        box-shadow: none;
    }

    #distribuidors .form-control:focus {
        border-bottom-color: #6b1a1a;
        box-shadow: none;
        background: transparent;
    }

    #distribuidors .form-control::placeholder {
        color: #8a7060;
        font-size: 14px;
    }

    #distribuidors .form-label { display: none; }

    /* Legals */
    #distribuidors .contact-legals {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    #distribuidors .punt_legal {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Possible', sans-serif;
        font-size: 13px;
        color: #6b4c2a;
    }

    /* Botó */
    #distribuidors .btn-dark-clean {
        margin-top: 28px;
        background-color: #db001c;
        color: #fff;
        border: none;
        border-radius: 0px;
        font-family: 'Possible', sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.1em;
        padding: 12px 36px;
        text-transform: uppercase;
    }

    #distribuidors .btn-dark-clean:hover {
        background-color: #9e100a;
    }
/* FIN PAGINA DISTRIBUIDORS */

/* CONTACTE */

#contacte {
        background-color: #F7F3E6;
    }

    #contacte .content-contacte {
        max-width: 720px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 80px 24px 60px;
    }

    #contacte .content-contacte h2 {
        font-family: 'Tiller';
        font-size: 34px;
        font-weight: 600;
        text-transform: uppercase;
        color: #AA8055;
        margin-bottom: 70px;
        padding-top: 30px;
    }

    #contacte .content-contacte h1 {
        font-family: 'Tiller';
        font-size: 140px;
        font-weight: 600;
        line-height: 0.95;
        text-transform: uppercase;
        color: #db001c;
        margin-bottom: 60px;
    }

    #contacte .content-contacte p {
        font-family: 'Possible', sans-serif;
        font-size: 19px;
        color: #AA8055;
        line-height: 1.7;
        max-width: 600px;
        margin-bottom: 50px;
        font-weight: 400;
    }

    /* Form card */
    #contacte .contacte-form-wrap {
        display: flex;
        justify-content: center;
        padding: 0 24px 80px;
    }

    #contacte .contacte-form-card {
        background-color: #f2e1cc;
        border-radius: 0 0 24px 24px;
        padding: 0 56px 48px;
        width: 100%;
        max-width: 48%;
        position: relative;
    }

    #contacte .contacte-form-card .addBolesContact {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 1919px;
        height: auto;
        display: block;
    }

    #contacte .contacte-form-titol {
        font-family: 'Tiller', serif;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 0.08em;
        color: #6b1a1a;
        margin-bottom: 32px;
        text-transform: uppercase;
    }

    /* Inputs */
    #contacte .form-control {
        background: transparent;
        border: none;
        border-bottom: 1px solid #b8a898;
        border-radius: 0;
        padding: 8px 0;
        font-family: 'Possible', sans-serif;
        font-size: 15px;
        color: #3a2a1a;
        box-shadow: none;
    }

    #contacte .form-control:focus {
        border-bottom-color: #6b1a1a;
        box-shadow: none;
        background: transparent;
    }

    #contacte .form-control::placeholder {
        color: #6b1a1a;
        font-size: 14px;
    }

    #contacte .form-label { display: none; }

    /* Legals */
    #contacte .contact-legals {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    #contacte .punt_legal {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Possible', sans-serif;
        font-size: 13px;
        color: #6b1a1a;
    }

    /* Checkboxes legals — mateixa estructura que el formulari de la home,
       amb els colors de la pàgina de contacte (#6b1a1a) */
    #contacte .contact-legals input.form-check-input {
        width: 16px;
        height: 16px;
        margin-top: 0;
        flex-shrink: 0;
        border-color: #6b1a1a;
        background-color: transparent;
    }
    #contacte .contact-legals input.form-check-input:checked {
        background-color: #6b1a1a;
        border-color: #6b1a1a;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-width='1.5' d='m6 10 3 3 5-6'/%3e%3c/svg%3e");
    }
    #contacte .contact-legals input.form-check-input:focus {
        border-color: #6b1a1a;
        box-shadow: none;
    }

    /* Botó */
    #contacte .btn-dark-clean {
        margin-top: 28px;
        background-color: #db001c;
        color: #fff;
        border: none;
        border-radius: 0px;
        font-family: 'Possible', sans-serif;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.1em;
        padding: 12px 36px;
        text-transform: uppercase;
    }

    #contacte .btn-dark-clean:hover {
        background-color: #9e100a;
    }

    /* Mapa + dades */
    #contacte .mapa_mes_dades {
        display: flex;
        width: 100%;
        min-height: 400px;
    }

    #contacte .mapaContacte {
        width: 75%;
        min-height: 400px;
    }

    #contacte .mapaContacte iframe {
        width: 100%;
        height: 100%;
        display: block;
    }

    #contacte .dadesContacte {
        width: 25%;
        flex-shrink: 0;
        background-color: white;
        padding: 48px 40px 48px 80px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    #contacte .dada-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    #contacte .dada-label {
        font-family: 'Possible', sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #8e6843;
    }

    #contacte .dada-value {
        font-family: 'Possible', sans-serif;
        font-size: 15px;
        color: #1a1a1a;
        line-height: 1.6;
    }

    #contacte .dada-value a {
        color: #1a1a1a;
        text-decoration: none;
    }

    #contacte .dada-value a:hover {
        color: #8e6843;
    }

    @media (max-width: 768px) {
        #contacte .mapa_mes_dades { flex-direction: column; }
        #contacte .dadesContacte { width: 100%; padding: 32px 24px; }
        #contacte .mapaContacte { min-height: 280px; }
    }

    /* FIN CONTACTE */


/* ===== OVERRIDE FORMULARI CONTACTE DINS MUSEU ===== */

#museu .section-contact-home {
    background-color: transparent;
    width: 100%;
    padding: 40px 0 40px;
}
#museu .section-contact-home .separador_boles { display: none; }
#museu .section-contact-home .sep_white        { display: none; }

#museu .section-contact-home .contents-contact-home {
    background-color: transparent;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 60px;
    padding: 40px 20px 20px;
    align-items: flex-start;
}

#museu .section-contact-home .contents-contact-home .esquerra-cont-home {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #6b1f1f;
    margin-bottom: 10px;
}
#museu .section-contact-home .contents-contact-home .esquerra-cont-home div { margin-bottom: 18px; }
#museu .section-contact-home .contents-contact-home .esquerra-cont-home div h2 {
    font-family: 'Tiller', sans-serif;
    font-size: 64px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #6b1f1f;
    line-height: 1.05;
    margin: 0 0 6px;
}
#museu .section-contact-home .contents-contact-home .esquerra-cont-home div p {
    font-family: 'Tiller', sans-serif;
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #6b1f1f;
    margin: 0;
}
#museu .section-contact-home .contents-contact-home .esquerra-cont-home p.horaris {
    font-family: 'Possible', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #6b1f1f;
    margin: 0;
}

#museu .section-contact-home .contents-contact-home .dreta-cont-home {
    flex: 1;
    min-width: 0;
    color: #6b1f1f;
    padding: 0;
}
#museu .section-contact-home .contents-contact-home .dreta-cont-home h2.titol-form-drt {
    font-family: 'Tiller', sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b1f1f;
    margin: 0 0 8px;
    padding-bottom: 14px;
    border-bottom: 2px solid #6b1f1f;
}

#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 div.col-sm-6 input.form-control,
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.col-12 textarea.form-control {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #6b1f1f;
    border-radius: 0;
    color: #6b1f1f;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 div.col-sm-6 input.form-control::placeholder,
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.col-12 textarea.form-control::placeholder {
    color: #6b1f1f;
    font-family: 'Possible', sans-serif;
    opacity: 0.85;
}
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 div label { display: none; }
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 .col-sm-6 { margin-bottom: 8px; }

#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 12px;
    padding-top: 18px;
}
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals label,
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals a { color: #6b1f1f; font-size: 13px; }
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte input.form-check-input { border-color: white; }
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte input.form-check-input:checked { background-color: #6b1f1f; border-color: white; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-width='3' d='m6 10 3 3 5-6'/%3e%3c/svg%3e"); }

#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.mt-4 button {
    background-color: #6b1f1f;
    border: 1px solid #6b1f1f;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px 36px;
}
#museu .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.mt-4 button:hover {
    background-color: transparent;
    color: #6b1f1f;
}

@media (max-width: 768px) {
    #museu .section-contact-home .contents-contact-home { flex-direction: column; gap: 30px; padding: 20px 15px; }
    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div h2 { font-size: 40px; letter-spacing: 3px; }
    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div p  { font-size: 22px; letter-spacing: 2px; }
}

/* ===== WRAP MAPA ===== */

/* Wrap: flex column — capçalera dalt (full-width), fila form+mapa a sota */
#museu .museu-contacte-wrap {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Telèfon del bloc VISITA'NS: forçar granate només a museu
   (el span ve amb color:#ffffff inline des de la BD) */
#museu .museu-contacte-wrap .esquerra-cont-home .horaris .enlace-telefono span {
    color: #6b1f1f !important;
}

/* La secció de contacte ocupa tota l'amplada però només mostra la capçalera;
   el .dreta-cont-home (formulari) s'amaga aquí i es mostra dins la fila */
#museu .museu-contacte-wrap .section-contact-home {
    width: 100%;
}
#museu .museu-contacte-wrap .section-contact-home .contents-contact-home .dreta-cont-home {
    display: none;
}

/* Fila: formulari + mapa en flex-row */
#museu .museu-contacte-wrap .museu-fila {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
#museu .museu-contacte-wrap .museu-col-form,
#museu .museu-contacte-wrap .museu-localitzacio {
    flex: 1;
    min-width: 0;
}

/* Títol CONTACTA'NS dins la fila */
#museu .museu-contacte-wrap .museu-col-form h2.titol-form-drt {
    font-family: 'Tiller', sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b1f1f;
    margin: 0 0 8px;
    padding-bottom: 14px;
    border-bottom: 2px solid #6b1f1f;
}

/* Inputs i textarea — línia inferior granat, fons transparent */
#museu .museu-contacte-wrap .museu-col-form input.form-control,
#museu .museu-contacte-wrap .museu-col-form textarea.form-control {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #6b1f1f;
    border-radius: 0;
    color: #6b1f1f;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}
#museu .museu-contacte-wrap .museu-col-form input.form-control::placeholder,
#museu .museu-contacte-wrap .museu-col-form textarea.form-control::placeholder {
    color: #6b1f1f;
    font-family: 'Possible', sans-serif;
    opacity: 0.85;
}
#museu .museu-contacte-wrap .museu-col-form input.form-control:focus,
#museu .museu-contacte-wrap .museu-col-form textarea.form-control:focus {
    box-shadow: none;
    background-color: transparent;
    border-bottom-color: #6b1f1f;
}

/* Amaga labels (ja hi ha placeholder) */
#museu .museu-contacte-wrap .museu-col-form .row.g-3 div label { display: none; }
#museu .museu-contacte-wrap .museu-col-form .row.g-3 .col-sm-6 { margin-bottom: 8px; }

/* Legals */
#museu .museu-contacte-wrap .museu-col-form .contact-legals {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 12px;
    padding-top: 18px;
}
#museu .museu-contacte-wrap .museu-col-form .contact-legals label,
#museu .museu-contacte-wrap .museu-col-form .contact-legals a { color: #6b1f1f; font-size: 13px; }
#museu .museu-contacte-wrap .museu-col-form input.form-check-input { border-color: white; }
#museu .museu-contacte-wrap .museu-col-form input.form-check-input:checked { background-color: #6b1f1f; border-color: white; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-width='3' d='m6 10 3 3 5-6'/%3e%3c/svg%3e"); }

/* Botó ENVIAR — granat, text blanc, rectangular */
#museu .museu-contacte-wrap .museu-col-form .mt-4 button {
    background-color: #6b1f1f;
    border: 1px solid #6b1f1f;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 7px 22px !important;
}
#museu .museu-contacte-wrap .museu-col-form .mt-4 button:hover {
    background-color: transparent;
    color: #6b1f1f;
}

/* Títol LOCALITZACIÓ */
#museu .museu-localitzacio .titol-localitzacio {
    font-family: 'Tiller', sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b1f1f;
    margin: 0 0 8px;
    padding-bottom: 14px;
    border-bottom: 2px solid #6b1f1f;
}
#museu .museu-mapa {
    margin-top: 25px;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
#museu .museu-mapa iframe { width: 100%; height: 100%; display: block; }

@media (max-width: 768px) {
    #museu .museu-contacte-wrap { width: 100%; }
    #museu .museu-contacte-wrap .museu-fila { flex-direction: column; gap: 30px; padding: 0 15px; }
    #museu .museu-mapa { aspect-ratio: 4 / 3; }
}
/* ===== /OVERRIDE FORMULARI CONTACTE DINS MUSEU ===== */


/* Responsive tablet */
@media (max-width: 991px) {
    div.caixa_vermella_museo {
        flex-direction: column;
        height: auto;
        min-height: 70vh;
    }
    div.caixa_vermella_museo .textos_esq_mus,
    div.caixa_vermella_museo .textos_dreta_mus {
        flex: none;
        padding: 40px 30px;
    }
    .museu-subtitol-gran { font-size: 48px; }
    div.caixa_vermella_museo .caixa_img_mus { width: 60%; align-self: center; }
    div.caixa_vermella_museo .textos_dreta_mus p { column-count: 1; }
}

/* Responsive mòbil */
@media (max-width: 575px) {
    .museu-subtitol-gran { font-size: 36px; }
    div.caixa_vermella_museo .textos_esq_mus { padding: 32px 20px; }
    div.caixa_vermella_museo .textos_dreta_mus { padding: 20px 20px 32px; }
    div.caixa_vermella_museo .caixa_img_mus { width: 80%; }
}



    /** FI MUSEU **/

    /* BLOGS  */

     #blogs .blogs-hero {
        background-color: #f2e1cc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 80px 40px;
        min-height: 280px;
    }

    #blogs .blogs-subtitol {
        font-family: 'Tiller', sans-serif;
        font-size: 32px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #AA8055;
        margin: 0 0 16px;
    }

    #blogs .blogs-titol {
        font-family: 'Tiller', sans-serif;
        font-size: 160px;
        font-weight: 600;
        text-transform: uppercase;
        color: #CC1B1B;
        line-height: 1;
        margin: 0;
    }

    /* Grid i cards — mateixos estils que blogs_home_section */
    #blogs .blogs-grid-wrap {
        padding-top: 0;
        padding-bottom: 80px;
        max-width: 100%;
        background-color: #f2e1cc;
    }

    #blogs .blogs-grid-wrap .products-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3%;
        padding: 20px 100px;
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-image-wrap {
        aspect-ratio: 1/1;
        margin-bottom: 0;
        overflow: hidden;
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-image-wrap a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-image-wrap a:hover img {
        transform: scale(1.02);
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body {
        background-color: #f2e1cc;
        padding: 28px 4px;
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 27px;
        margin-bottom: 20px;
        font-family: 'Possible';
        font-weight: 400;
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body p {
        font-size: 16px;
        margin-bottom: 20px;
        color: black;
        font-family: 'Possible';
        font-weight: 400;
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body a {
        text-align: center;
        font-size: 16px;
        transition: transform 0.3s ease;
        font-family: 'Possible';
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body a:hover {
        color: #AA8055;
        transform: scale(1.01);
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean {
        background: transparent;
        border: none;
        border-radius: 0;
    }

    @media (max-width: 991px) {
        #blogs .blogs-grid-wrap .products-grid-3 { grid-template-columns: repeat(2, 1fr); padding: 20px 40px; }
    }

    @media (max-width: 768px) {
        #blogs .blogs-hero     { padding: 60px 20px; min-height: 200px; }
        #blogs .blogs-titol    { font-size: 60px; }
        #blogs .blogs-subtitol { font-size: 20px; }
        #blogs .blogs-grid-wrap .products-grid-3 { grid-template-columns: 1fr; padding: 20px; }
    }

    /* FI BLOGS */

    /* BOTIGA */
    #botiga {
    padding: 40px 60px;
}

#frm_limits  {
    padding: 20px 0 100px 0;
}

#botiga .botiga-layout {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
}

/* ── Sidebar ── */
#botiga .botiga-sidebar {
    width: 20%;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}

#botiga .botiga-titol {
    font-family: 'Tiller', sans-serif;
    font-weight: 600;
    font-size: 42px;
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0 0 28px;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Nav filtres */
#botiga .botiga-filtres-nav {
    display: flex;
    flex-direction: column;
}

/* Grup */
#botiga .filtre-grup {
    border-bottom: 1px solid #e8ddd2;
}

/* Botó label */
#botiga .filtre-grup-label {
    width: 100%;
    background: none;
    border: none;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Tiller', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #AA8055;
    cursor: pointer;
    text-align: left;
    gap: 8px;
}

#botiga div.filtre-grup.open .filtre-grup-label { 
    color: black;
}

#botiga div.filtre-grup.open .filtre-arrow { 
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
}


#botiga .filtre-grup-label:focus { outline: none; }

/* Fletxa */
#botiga .filtre-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #AA8055;
    border-bottom: 1.5px solid #AA8055;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: -3px;
}

#botiga .filtre-grup.open .filtre-arrow {
    transform: rotate(-135deg);
    margin-top: 3px;
}

/* Llista */
#botiga .filtre-llista {
    list-style: none;
    margin: 0;
    padding: 2px 0 12px;
    display: none;
    flex-direction: column;
}

#botiga .filtre-grup.open .filtre-llista {
    display: flex;
}

#botiga .filtre-llista li {
    padding: 3px 0;
}

#botiga .filtre-llista li a {
    font-family: 'Possible', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.5;
    display: block;
}

#botiga .filtre-llista li a:hover,
#botiga .filtre-llista li.actiu a {
    color: #AA8055;
}

/* Checkbox de filtre per categoria */
#botiga .filtre-llista li .filtre-check {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-family: 'Possible', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.5;
}

#botiga .filtre-llista li .filtre-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    border: 1px solid #c9bfaf;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#botiga .filtre-llista li .filtre-check input[type="checkbox"]:checked {
    background: #AA8055;
    border-color: #AA8055;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-width='2.5' d='m6 10 3 3 5-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}

#botiga .filtre-llista li .filtre-check:hover span,
#botiga .filtre-llista li.actiu .filtre-check span {
    color: #AA8055;
}

/* Borrar filtres */
#botiga .filtre-borrar {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Possible', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #aaa;
    cursor: pointer;
    padding: 20px 0 0;
}

#botiga .filtre-borrar:hover { color: #AA8055; }
#botiga .filtre-borrar svg { stroke: currentColor; flex-shrink: 0; }

/* ── Àrea productes ── */
#botiga .botiga-productes {
    flex: 1;
    min-width: 0;
}

/* Topbar */
#botiga .botiga-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 24px;
}

#botiga .botiga-order-select {
    font-family: 'Possible', sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid #d4c4b0;
    border-radius: 4px;
    padding: 7px 32px 7px 12px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23AA8055'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

#botiga .botiga-order-select:focus { outline: none; }

/* Grid productes — 4 columnes, override Bootstrap row */
#botiga #list_productes {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    flex-wrap: unset !important;
}

#botiga #list_productes > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}

/* Card */
#botiga .product-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Imatge */
#botiga .product-image-wrap {
    background-color: #F7F3E6;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
    box-shadow: inset 0 0 0 0px #8e6843;
    transition: box-shadow 0.25s ease;
}

#botiga .product-image-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#botiga .product-image-wrap img,
.related-section .product-image-wrap img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#botiga .product-image-wrap:hover img:not(.product-img-hover),
.related-section .product-image-wrap:hover img:not(.product-img-hover) {
    transform: scale(1.015);
}

/* Ocultar la primera imatge en hover NOMÉS si existeix la segona */
#botiga .product-image-wrap:hover a:has(.product-img-hover) img:not(.product-img-hover),
.related-section .product-image-wrap:hover a:has(.product-img-hover) img:not(.product-img-hover) {
    opacity: 0;
}

#botiga .product-image-wrap img.product-img-hover,
.related-section .product-image-wrap img.product-img-hover {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#botiga .product-image-wrap:hover img.product-img-hover,
.related-section .product-image-wrap:hover img.product-img-hover {
    opacity: 1;
    transform: scale(1.015);
}

#botiga .product-item:hover .product-image-wrap {
    box-shadow: inset 0 0 0 2px #8e6843;
}

/* Accions sobre imatge */
#botiga .product-actions {
    display: none;
}

/* Body */
#botiga .product-card-body {
    padding: 12px 0 0;
    background: transparent;
}

#botiga .product-category {
    font-family: 'Possible', sans-serif;
    font-size: 14px;
    color: #9A9A9A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

#botiga .product-title {
    font-family: 'Possible', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.3;
}

#botiga .product-price {
    font-family: 'Possible', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
}

#botiga .product-price small {
    font-size: 13px;
    color: #aaa;
    text-decoration: line-through;
    font-weight: 400;
    margin-right: 4px;
}

/* Botó afegir — ocult */
#botiga .product-card-body .btn-dark-clean {
    display: none;
}

/* Badge */
#botiga .product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #AA8055;
    color: #fff;
    font-family: 'Possible', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 2px;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   OFFCANVAS DE FILTRES (#filtersPanel) — botiga mòbil
   Els estils dels grups de filtres estan prefixats amb #botiga; com que
   l'offcanvas viu fora de #botiga, reaprofitem aquí els mateixos selectors
   sota #filtersPanel perquè el contingut es vegi idèntic dins el panel.
   ───────────────────────────────────────────────────────────────────────── */

/* El botó "Filtres" queda ocult per defecte (desktop); es mostra en mòbil
   al media query de sota. */
#botiga .mobile-filter-toggle { display: none; }

/* Posa la topbar amb el botó a l'esquerra i el desplegable d'ordre a la dreta */
#botiga .botiga-topbar { justify-content: space-between; }

/* El panel per sobre del header (que té z-index:100001 a ≤1024px) */
#filtersPanel.offcanvas { z-index: 100050; }

/* Títol de la capçalera de l'offcanvas — mateixa tipografia que els grups */
#filtersPanel .offcanvas-title {
    font-family: 'Tiller', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a1a;
}

/* Botó aplicar dins l'offcanvas — mateix marró que el botó BOTIGA del header */
#filtersPanel .botiga-aplicar-filtres {
    margin-top: 8px;
    background-color: var(--color-marro-clar);
    color: #FFF;
    border: 1px solid var(--color-marro-clar);
    font-family: 'Possible', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: 14px;
    padding: 12px 18px;
}
#filtersPanel .botiga-aplicar-filtres:hover {
    background-color: transparent;
    color: var(--color-marro-clar);
    border-color: var(--color-marro-clar);
}

/* — Grups de filtres dins l'offcanvas (mirall de #botiga ...) — */
#filtersPanel .filtre-grup { border-bottom: 1px solid #e8ddd2; }

#filtersPanel .filtre-grup-label {
    width: 100%;
    background: none;
    border: none;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Tiller', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #AA8055;
    cursor: pointer;
    text-align: left;
    gap: 8px;
}
#filtersPanel .filtre-grup-label:focus { outline: none; }
#filtersPanel div.filtre-grup.open .filtre-grup-label { color: black; }

#filtersPanel .filtre-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #AA8055;
    border-bottom: 1.5px solid #AA8055;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: -3px;
}
#filtersPanel div.filtre-grup.open .filtre-arrow {
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    transform: rotate(-135deg);
    margin-top: 3px;
}

#filtersPanel .filtre-llista {
    list-style: none;
    margin: 0;
    padding: 2px 0 12px;
    display: none;
    flex-direction: column;
}
#filtersPanel .filtre-grup.open .filtre-llista { display: flex; }
#filtersPanel .filtre-llista li { padding: 3px 0; }

#filtersPanel .filtre-llista li a {
    font-family: 'Possible', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.5;
    display: block;
}
#filtersPanel .filtre-llista li a:hover,
#filtersPanel .filtre-llista li.actiu a { color: #AA8055; }

#filtersPanel .filtre-llista li .filtre-check {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-family: 'Possible', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.5;
}
#filtersPanel .filtre-llista li .filtre-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    border: 1px solid #c9bfaf;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#filtersPanel .filtre-llista li .filtre-check input[type="checkbox"]:checked {
    background: #AA8055;
    border-color: #AA8055;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-width='2.5' d='m6 10 3 3 5-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}
#filtersPanel .filtre-llista li .filtre-check:hover span,
#filtersPanel .filtre-llista li.actiu .filtre-check span { color: #AA8055; }

#filtersPanel .filtre-borrar {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Possible', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #aaa;
    cursor: pointer;
    padding: 20px 0 0;
}
#filtersPanel .filtre-borrar:hover { color: #AA8055; }
#filtersPanel .filtre-borrar svg { stroke: currentColor; flex-shrink: 0; }

@media (max-width: 1200px) {
    #botiga #list_productes { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 991px) {
    #botiga { padding: 24px; }
    #botiga .botiga-layout { gap: 24px; }

    /* En mòbil amaguem el sidebar de filtres: els filtres passen a l'offcanvas.
       El títol BOTIGA el recol·loquem a la part de productes. */
    #botiga .botiga-sidebar { display: none; }
    #botiga .mobile-filter-toggle { display: inline-flex; }

    #botiga #list_productes { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    #botiga { padding: 16px; }
    #botiga .botiga-layout { flex-direction: column; }
    #botiga #list_productes { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
    /* FI BOTIGA */


/* ════════════════════════════════════════════════
   FITXA PRODUCTE
   ════════════════════════════════════════════════ */

/* Secció productes relacionats */
section.related-section {
    padding: 80px 0;
}
section.related-section .container-custom {
    max-width: 80%;
    padding: 0;
}
section.related-section .section-head {
    justify-content: center;
    margin-bottom: 40px;
}
section.related-section .section-title {
    text-align: center;
    letter-spacing: 0;
    text-transform: uppercase;
    font-family: 'Tiller';
    font-weight: 600;
}

/* Grid — 4 cols, override Bootstrap */
section.related-section .row {
    display: grid !important;
    /* Columnes d'ample FIX (= 1/4 del contenidor menys gaps) i grid centrat:
       així amb 1, 2 o 3 productes el conjunt queda centrat (com text-align:center)
       en lloc de deixar forat a la dreta. Amb 4 omple tota la fila com sempre.
       --rel-col = ample d'una card de 4 columnes. */
    --rel-gap: 24px;
    --rel-col: calc((100% - 3 * var(--rel-gap)) / 4);
    grid-template-columns: repeat(auto-fit, var(--rel-col)) !important;
    justify-content: center !important;
    gap: var(--rel-gap) !important;
}
section.related-section .row > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Card */
section.related-section .product-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
section.related-section .product-card:hover {
    transform: none;
    box-shadow: none;
}
section.related-section .product-image-wrap {
    background-color: #F7F3E6 !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 0px #8e6843;
    transition: box-shadow 0.25s ease;
}
section.related-section .product-image-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
section.related-section .product-image-wrap img {
    width: 85% !important;
    height: 85% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
section.related-section .product-item:hover .product-image-wrap {
    box-shadow: inset 0 0 0 2px #8e6843;
}
section.related-section .product-actions {
    display: none;
}
section.related-section .product-badge {
    display: none;
}

section.related-section .product-card-body {
    padding: 12px 0 0;
    background: transparent;
}
section.related-section .product-category {
    font-family: 'Possible', sans-serif;
    font-size: 14px;
    color: #9A9A9A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
section.related-section .product-title {
    font-family: 'Possible', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.3;
}
section.related-section .product-price {
    font-family: 'Possible', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
}
section.related-section .product-price small {
    font-size: 13px;
    color: #aaa;
    text-decoration: line-through;
    font-weight: 400;
    margin-right: 4px;
}
section.related-section .product-card-body .btn-dark-clean {
    display: none;
}

/* En mòbil petit (≤480px) mostrem només els 2 primers productes
   recomanats/relacionats, a 50%/50% omplint tot l'ample. */
@media (max-width: 480px) {
    section.related-section .row {
        grid-template-columns: 1fr 1fr !important;
        justify-content: stretch !important;
    }
    section.related-section .row > div:nth-child(n+3) {
        display: none !important;
    }
}

/* Toggle informació nutricional */
.meta-toggle-head {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 8px);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    font: inherit;
}
.meta-toggle-icon {
    flex-shrink: 0;
    transition: transform .25s ease;
}
.meta-toggle-head[aria-expanded="true"] .meta-toggle-icon {
    transform: rotate(180deg);
}
.meta-toggle-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}
.meta-toggle-head[aria-expanded="true"] + .meta-toggle-body {
    grid-template-rows: 1fr;
}
.meta-toggle-body > p {
    overflow: hidden;
    margin: 0;
    font-size: 12px;
    color: #646464;
}
.meta-toggle-head[aria-expanded="true"] + .meta-toggle-body > p {
    margin-top: var(--spacing-xs, 8px);
}

/* FI FITXA PRODUCTE */


/** PLANTILLES */


/* LEGALES */

.legal_prin {
  padding: var(--section-space) 0;
  min-height: 60vh;
}

.legal_conten {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.legal_conten h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #db001c;
  margin-bottom: 0.5rem;
}

.legal_conten h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.legal_conten h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

.legal_conten table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.9rem;
}

.legal_conten table th {
  background-color: #db001c;
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
}

.legal_conten table td {
  padding: 9px 14px;
  color: #444;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
}

.legal_conten table tbody tr:nth-child(even) td {
  background-color: #fafafa;
}

@media (max-width: 600px) {
  .legal_conten table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.legal_conten p,
.legal_conten li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #444;
  margin-bottom: 0.75rem;
}

.legal_conten ul,
.legal_conten ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal_conten li {
  margin-bottom: 0.35rem;
}

.legal_conten a {
  color: #444;
  text-decoration: underline;
}

.legal_conten a:hover {
  color: #db001c;
}

@media (max-width: 768px) {
  .legal_prin {
    padding: 40px 0;
  }

  .legal_conten {
    padding: 0 16px;
  }

  .legal_conten h1 {
    font-size: 1.5rem;
  }
}

/* FIN LEGALES */



/****
RESPONSIVE - MEDIA QUERYS
****/
/* HOME */



/* FIN HOME */







/****
FIN RESPONSIVE - MEDIA QUERYS
****/

/* ==========================================================================
   MENÚ SUPERIOR — Dropdown compacte (Galetes Trias, ID 166)
   Pare NO clicable + llista vertical de fills clicables. Hover en desktop.
   ========================================================================== */
.main-menu .nav-item.has-dropdown { position: relative; }

/* Pare no clicable */
.nav-link--parent {
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}

.nav-link--parent .dropdown-caret {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

/* Caixa desplegable */
.simple-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: #ffffff;
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: 0;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1050;
}

/* Bridge invisible per no perdre el hover entre pare i caixa */
.simple-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.has-dropdown:hover .simple-dropdown,
.has-dropdown:focus-within .simple-dropdown,
.has-dropdown.is-open .simple-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.has-dropdown:hover .dropdown-caret,
.has-dropdown.is-open .dropdown-caret {
  transform: rotate(180deg);
}

/* Enllaços dels fills */
.simple-dropdown li { margin: 0; }

.simple-dropdown a {
  display: block;
  padding: 0.3rem 1.1rem;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.simple-dropdown a:hover,
.simple-dropdown a.active {
  color: #db001c;
}

/* ---- Adaptació de colors segons la variant del header ----
   Mateixa tipografia, mides i cantonades; només canvien els colors,
   alineats amb cada variant de .site-header (marró / vermella / blogs). */

/* Variant marró (Història) */
.site-header.header-marron .simple-dropdown {
  background: #F7F3E6;
  border-color: rgba(170, 128, 85, 0.25);
}
.site-header.header-marron .simple-dropdown a { color: #AA8055; }
.site-header.header-marron .simple-dropdown a:hover,
.site-header.header-marron .simple-dropdown a.active { color: #8e6843; }

/* Variant vermella (Museu) — panell fosc, text clar */
.site-header.header-rojo .simple-dropdown {
  background: #610C00;
  border-color: rgba(232, 213, 176, 0.2);
}
.site-header.header-rojo .simple-dropdown a { color: #e8d5b0; }
.site-header.header-rojo .simple-dropdown a:hover,
.site-header.header-rojo .simple-dropdown a.active { color: #CC1B1B; }

/* Variant blogs (Blog) */
.site-header.header-blogs .simple-dropdown {
  background: #f2e1cc;
  border-color: rgba(170, 128, 85, 0.25);
}
.site-header.header-blogs .simple-dropdown a { color: #AA8055; }
.site-header.header-blogs .simple-dropdown a:hover,
.site-header.header-blogs .simple-dropdown a.active { color: #CC1B1B; }













/* ---- Responsive: dins el menú mòbil es comporta com a llista oberta ---- */
@media (max-width: 991px) {
  .main-menu .nav-item.has-dropdown { border-bottom: 1px solid var(--color-border); }

  .nav-link--parent {
    justify-content: space-between;
    width: 100%;
    padding: 1.15rem 0;
    font-size: 1.1rem;
  }

  .simple-dropdown {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, visibility 0.25s ease;
  }

  .has-dropdown.is-open .simple-dropdown {
    visibility: visible;
    max-height: 500px;
    padding: 0.25rem 0 0.75rem;
  }

  .simple-dropdown a { padding: 0.5rem 0.75rem; }
}


/* 2k / 4k ... RESPONSIVE */

@media screen and (min-width: 1921px) and (max-width: 2560px) {
    
    #bpt-seccio .primer_bloc_bpt div.caixa-imatges {
        height: 600px;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 {
        top: 26%;
    }

    #bpt-seccio .primer_bloc_bpt div #img3-bpt-b1 {
        width: 80%;
    }

    #bpt-seccio .caja-intermedia {
        margin-top: -310px;
    }

    #bpt-seccio .caja-intermedia img {
        width: 40%;
    }

    #bpt-seccio .segon_bloc_bpt #img3-bpt-b2 {
        width: 18%;
        right: 9%;
        top: -13%;
    }
 
    #bpt-seccio .segon_bloc_bpt #img4-bpt-b2 {
        width: 19%; 
    }

    #bpt-seccio .segon_bloc_bpt #img2-bpt-b2 {
        width: 26%;
        left: -5%;
        top: -21%;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 h2 {
        font-size: 38px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt p {
        font-size: 22px;
        width: 46%;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt a {
        font-size: 24px;
        border: 1px solid #AA8055;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img h2 {
        font-size: 110px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img p {
        font-size: 28px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img {
        padding: 100px 0;
    }

    /* Museu: logo ~300px i les línies rectes respecten el seu hueco
       (--marc-hueco-half es recalcula a partir de --marc-logo-w) */
    #museu .marc_museu {
        --marc-logo-w: 300px;
        --marc-hueco-half: calc(var(--marc-logo-w) / 2 + 24px);
    }

    #museu .marc-logo {
        width: var(--marc-logo-w);
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp h2 {
        font-size: 78px; 
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp p {
        width: 90%;
        font-size: 26px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp h2 {
        font-size: 46px; 
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp p {
        font-size: 26px;
    }

    #compromis-home .compromis-items .imatge_text_comp .left_fill_comp img {
        width: 90%;
    }

    #compromis-home .galeta-flotant--basica {
        bottom: 55%; 
    }

    #compromis-home .galeta-flotant--tubo {
        top: 50%;
        left: 77%;
        width: 380px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt a {
        font-size: 16px;
        padding: 16px 22px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content .split-imatge-titol {
        font-size: 120px; 
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-subtitol {
        font-size: 26px;
        margin-bottom: 34px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content {
        padding: 0 0 0 120px;
        max-width: 32%;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac {
        margin-top: 30px;
        font-size: 18px;       
        line-height: 1;
    }
    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac {
        padding: 10px 14px; 
    }

    .contents_hst_home div.hst_h3 h2 {
        font-size: 38px;
        max-width: 62%;
        font-weight: 600;
    }

    .contents_hst_home div.hst_h3 a {
        padding: 14px 32px;
        font-size: 20px;
    }

    section.section-contact-home div.separador_boles img {
        width: 200% ;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home h2.titol-form-drt {
        font-size: 38px; 
    }

    .form-control {
        font-size: 20px; 
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals div.punt_legal label.form-check-label {
        font-size: 18px;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 36px; 
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body p {
        font-size: 24px; 
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body a {
        font-size: 22px; 
    }

    .newsletter-trias__legal {
        font-size: 20px; 
    }

    .newsletter-trias__btn {
        padding: 12px 32px;
        font-size: 16px; 
    }

    .newsletter-trias__input {
        height: 70px;
    }

    .footer-trias__col-title {
        font-size: 26px; 
    }

    .footer-trias__col-links a {
        font-size: 20px; 
    }

    .footer-trias__legal {
        font-size: 18px; 
    }

    #historia .titols_historia #img_h_1 {
        top: -12%;
    }

    #historia .titols_historia #img_h_2 {
        width: 300px;
    }

    .bit-textos {
        font-size: 24px; 
    }

    .cronica__title {
        font-size: 68px; 
    }

    .cronica__year {
        font-size: 120px; 
    }

    .cronica__img-wrap {
        flex: 0 0 330px;
    }

    .cronica__subtitle {
        font-size: 38px; 
    }

    .cronica__desc {
        font-size: 20px; 
    }

    .video_historia__title {
        font-size: 56px; 
    }

    .video_historia__content {
        width: 36%; 
    }

    .video_historia__desc {
        font-size: 22px; 
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home h2 {
        font-size: 68px; 
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home a {
        font-size: 18px; 
    }

    .caixa_vermella_museo { 
        background-size: 36% 90% !important;
    }

    div.caixa_vermella_museo {
        min-height: 800px;
    }

    /* Museu — fotos del slider sticky més grans a pantalles 2K (1921–2560).
       Pugem la foto i alhora donem més alçada al sticky i pugem el bloc cap
       amunt (--stack-top menor + gap menor) perquè el títol i el paràgraf de
       sota MAI quedin tallats fora del sticky. */
    #museu .museu-stack {
        --stack-img-h: 58vh;
        --stack-top: 4%;
        --stack-text-gap: 40px;
    }

    #museu .museu-stack__sticky {
        top: 9vh;
        height: 90vh;
    }

    #museu .museu-stack__img {
        max-width: 860px;
    }














}

/* FIN 2K / 4K RESPONSIVE */

.caixa_vermella_museo { 
        background-size: 45% 90% !important;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — A partir d'aquí van totes les media queries
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1440px) {
    
    div#mainNav.collapse.navbar-collapse ul li a {
        font-size: 16px;
    }

    #bpt-seccio .caja-intermedia {
        margin-top: -200px;
    }

    #bpt-seccio .primer_bloc_bpt div.caixa-imatges {
        height: 560px;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 {
        top: 28%;
    }

    #bpt-seccio .primer_bloc_bpt p {
        width: 40%;
        font-size: 14px;
    }

    #bpt-seccio .segon_bloc_bpt #img4-bpt-b2 {
        width: 20%;
        top: -20%; 
    }

    #bpt-seccio .segon_bloc_bpt #img3-bpt-b2 {
        width: 18%;
        right: 8%;
        top: -12%; 
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a p {
        margin-top: 24px;
        font-size: 24px; 
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev {
        left: -100px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next {
        right: -80px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt p {
        font-size: 16px;
        width: 61%;
    }


    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img h2 {
        font-size: 70px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img p {
        font-size: 18px;
    }

    #compromis-home .textos-inicials-compromis p {
        max-width: 50%;
        font-size: 26px;
        margin-bottom: 40px;
    }

    #compromis-home .compromis-items .imatge_text_comp {
        width: 86%;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp h2 {
        font-size: 56px; 
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp p {
        width: 80%;
        font-size: 16px; 
    }

    #compromis-home .galeta-flotant--rectangular {
        top: -50px;
        right: 10%;
        width: 400px;
    }

    #compromis-home .galeta-flotant--basica {
        bottom: 59%;
        left: 36%;
        width: 280px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp h2 {
        font-size: 28px; 
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp p {
        font-size: 16px;
    }

    #compromis-home div.compromis-items .textos_peu_compromis {
        width: 90%;    
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .primer_text_preu {
        font-size: 24px; 
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .segon_text_peu {
        font-size: 25px; 
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .nom_firma img {
        width: 100px; 
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content {
        padding: 0 0 0 100px;
        max-width: 33%;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac {
        padding: 8px 14px; 
    }

    section.bloc_historia_home div.contents_hst_home div.hst_h2 img { 
        max-width: 280px;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home h2.titol-form-drt {
        font-size: 28px; 
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home div h2 {
        font-size: 50px; 
        margin-bottom: 0;
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home div p {
        font-size: 36px; 
    }

    .form-control {
        font-size: 14px; 
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.mt-4 button {
        font-size: 14px;
        padding: 8px 36px !important; 
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home h2 {
        font-size: 38px; 
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home p {
        font-size: 18px; 
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body {
        padding: 10px 4px 28px 4px;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 22px;
        margin-bottom: 10px; 
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body p {
        font-size: 14px;
        margin-bottom: 20px; 
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body a {
        font-size: 14px; 
    }

    .newsletter-trias__title {   
        font-size: 38px;
        max-width: 70%;
    }

    .newsletter-trias__btn,
    .newsletter-trias__input-wrap {
        border-radius: 0px; 
    }

    .footer-trias__logo {
        max-width: 50%; 
    }

    /* pag HISTORIA */

    #historia {
        padding: 60px 0 0px 0;
    }

    #historia .titols_historia h2 {
        font-size: 104px;
        margin-bottom: 10px;
    }

    #historia .titols_historia p {
        font-size: 30px; 
    }

    #historia .titols_historia #img_h_1 {
        width: 70%;
        left: 15%;
        top: 20%;
    }

    #historia .titols_historia #text_desde {
        font-size: 42px;
        margin-bottom: 0;
    }

    .bit-titol {
        font-size: 56px; 
    }

    .bit-textos {
        font-size: 12px; 
    }

    .cronica {
        padding: 40px 0 100px;
    }

    .cronica__title {
        font-size: 48px;
    }

    .cronica__year {
        font-size: 68px;
    }

    .cronica__img-wrap img {
        width: 100%;
    }

    .cronica__text {
        padding-right: 0%;
    }

    .video_historia__title {
        font-size: 32px; 
    }
    
    .video_historia__desc {
        font-size: 16px; 
    }

    /* FIN PAG HISTORIA */

    /* PAG GALETES */

    #nuestrasGalletas .listado-galletas img#flor_flotante {
        width: 460px;
        right: 6%;
        top: -160px;
    }

    #nuestrasGalletas .listado-galletas .textos-listado h2 {
        font-size: 34px; 
    }

    #nuestrasGalletas .galetes-grid, #contingut-subart .galetes-grid {
        margin-top: 20px;
    }

    #nuestrasGalletas .galeta-card__img-wrap, #contingut-subart .galeta-card__img-wrap {
        height: 300px; 
    }

    #nuestrasGalletas .galeta-card__titol, #contingut-subart .galeta-card__titol {
        font-size: 26px;
    }

    #nuestrasGalletas .galeta-card__subtitol, #contingut-subart .galeta-card__subtitol {
        font-size: 14px; 
    }

    #nuestrasGalletas .galeta-card__btn, #contingut-subart .galeta-card__btn {
        font-size: 12px; 
    }

   
    /* FIN PAG GALETES */

    /* PAG MUSEO */

    .museu-subtitol-gran {
        font-size: 56px; 
    }

    .museu-subtitol-gran {
        font-size: 56px; 
    }

    div.caixa_vermella_museo .textos_dreta_mus p {
        font-size: 13px; 
    }

    #museu #img_sobre_text .image_inicial,
    #museu .img_sobre_text .image_inicial {
        width: 60%;
    }

    #museu #img_sobre_text .subtitol_sobre_text,
    #museu .img_sobre_text .subtitol_sobre_text {
        max-width: 432px;
        font-size: 16px;
    }

    #museu #img_sobre_text,
    #museu .img_sobre_text {
        margin: 0 auto 20px auto;
    }

    #museu #exposicio_llaunes .exp_titol {
        font-size: 38px;
    }

    #museu #exposicio_llaunes .exp_descripcio {
        font-size: 16px;
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div h2 {
        font-size: 52px;
        line-height: 40px;
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div p {
        font-size: 30px;
        letter-spacing: 2px;
    }

    #museu .museu-contacte-wrap .museu-col-form .contact-legals label, #museu .museu-contacte-wrap .museu-col-form .contact-legals a {
        font-size: 11px;
    }

    /* FIN PAGINA MUSEO */

    /* PAG BLOG */

    #blogs .blogs-subtitol {
        font-size: 28px; 
    }

    #blogs .blogs-titol {
        font-size: 142px; 
    }

    /* FIN PAG BLOG */

    /* PAG DISTRIBUIDORS */

    #distribuidors .content-distribuidors h2 {
        font-size: 28px;
        padding-top: 0;
    }

    #distribuidors .content-distribuidors h1 {
        font-size: 100px;
        margin-bottom: 20px;
    }

    #distribuidors .content-distribuidors p {
        font-size: 16px;
        max-width: 500px;
    }

    /* FIN PAG DISTRIBUIDORS */

    /* PAG CONTACTE */

    #contacte .content-contacte h2 {
        font-size: 28px;
        margin-bottom: 25px;
        padding-top: 0;
    }

    #contacte .content-contacte h1 {
        font-size: 100px; 
        margin-bottom: 20px;
    }

    #contacte .content-contacte p {
        font-size: 16px; 
    }

    /* FIN PAG CONTACTE */

    /* PAG BOTIGA */

    #botiga .product-title {
        font-size: 20px;  
    }

    #botiga .product-category {
        font-size: 12px; 
    }

    #botiga .product-price {
        font-size: 20px; 
    }

    .product-page .product-card-box .btn-dark-clean {
        font-size: 16px;
        padding: 10px 12px;
        min-width: 235px;
    }

    #contingut-subart > h2 {
        font-size: 34px;
        font-weight: 500;
    }

    .section-title {
        font-size: 34px; 
    }

    /* FIN PAG BOTIGA */

    .museu-stack__text .titol_ist {
        font-size: 34px; 
    }

    .caixa_vermella_museo {
        background-size: 52% 85% !important;
    }





}

/* ═══════════════════════════════════════════════════════════════════════
   MENÚ DESKTOP — a ≥1025px el menú és horitzontal com sempre.
   (Bootstrap navbar-expand-xl col·lapsaria fins a 1199px; ho forcem aquí.)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    /* Amagar el toggler i els elements mòbils */
    header.site-header nav.navbar .navbar-toggler,
    header.site-header nav.navbar .navbar-logo-mobile,
    header.site-header nav.navbar .navbar-actions-mobile,
    header.site-header nav.navbar .btn-close,
    header.site-header nav.navbar .menu-mobile-logo {
        display: none !important;
    }

    /* Menú horitzontal desplegat (com navbar-expand), sense residus de drawer */
    header.site-header nav.navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent;
        box-shadow: none;
        padding: 0;
        overflow: visible;
        transform: none !important;
        visibility: visible !important;
        z-index: auto;
    }

    header.site-header nav.navbar .navbar-nav {
        flex-direction: row;
    }


}

/* ═══════════════════════════════════════════════════════════════════════
   MENÚ MÒBIL/TABLET — drawer hamburguesa fins a 1024px (inclòs)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* El header ha de quedar SEMPRE per sobre del drawer (z-index: 100000) i del
       backdrop, perquè continuï visible mentre el menú està obert. */
    header.site-header {
        z-index: 100001;
    }

    /* Amb el menú obert fixem el header dalt de tot del viewport. Cal perquè
       html/body passen a overflow:hidden i això pot trencar el position:sticky
       (el header "saltaria" a la seva posició del flux, fora de vista si hi
       havia scroll). Amb fixed queda ancorat i sempre visible sobre el drawer. */
    html.menu-open header.site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* ── Amagar la fila de logo+accions de desktop ── */
    header.site-header .logo_butons {
        display: none;
    }

    /* ── La nav ara fa de fila única: toggler · logo · accions ── */
    header.site-header nav.navbar {
        border-top: none;
        padding: 12px 24px;
    }

    header.site-header nav.navbar .container.container-custom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        padding: 0;
    }

    /* Toggler a l'esquerra (mitja part esquerra) */
    header.site-header .navbar-expand-xl .navbar-toggler {
        display: flex !important;
        order: 1;
        flex: 1 1 0;
        justify-content: flex-start;
        margin-right: 0;
    }

    /* Logo centrat, ocupant l'espai del mig */
    header.site-header nav.navbar .navbar-logo-mobile {
        display: flex !important;
        order: 2;
        flex: 0 0 auto;
        justify-content: center;
    }

    header.site-header nav.navbar .navbar-logo-mobile img {
        max-width: 160px;
        height: auto;
    }

    /* Accions a la dreta (mitja part dreta) */
    header.site-header nav.navbar .navbar-actions-mobile {
        display: flex !important;
        order: 3;
        flex: 1 1 0;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
    }

    /* Menú — drawer lateral esquerre amb slide suau.
       El panel es mou al <body> via JS; l'animació la controla la classe .is-open.
       Comença SOTA el header (--menu-top-offset, calculat pel JS segons l'alçada
       real del header sigui amb scroll o sense) perquè el header no quedi tapat. */
    #mainNav.navbar-collapse,
    #mainNav.navbar-collapse.show,
    #mainNav.navbar-collapse.collapsing {
        display: flex !important;
        position: fixed !important;
        top: var(--menu-top-offset, 100px);
        left: 0;
        width: 38vw !important;
        height: calc(100vh - var(--menu-top-offset, 100px)) !important;
        background: #fff;
        z-index: 100000;
        overflow-y: auto;
        padding: 40px 40px 40px;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
    }

    #mainNav.navbar-collapse.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }

    /* Logo intern del drawer: amagat. El header sempre és visible a dalt amb el
       seu logo, així que aquest seria redundant. */
    #mainNav .menu-mobile-logo {
        display: none !important;
    }

    /* Enllaços del menú alineats a l'esquerra, sense centrar */
    #mainNav .main-menu {
        margin: 0 !important;
        width: 100%;
        align-items: flex-start;
    }

    /* Selector d'idioma del drawer: només visible a <911px (amagat aquí) */
    #mainNav .menu-mobile-lang {
        display: none;
    }

    /* Backdrop fosc només sobre la zona dreta (fora del panel), amb fade suau.
       Comença sota el header perquè aquest quedi sempre visible. */
    .menu-backdrop {
        position: fixed;
        top: var(--menu-top-offset, 100px);
        left: 38vw;
        right: 0;
        bottom: 0;
        background: rgba(20, 20, 20, 0.45);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    }

    .menu-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0s;
    }

    .blogs_home_section .container.container-custom .products-grid-3 {
        padding: 20px 48px 60px 48px;
    }

    .newsletter-trias .container, .newsletter-trias .container-custom {
        padding-left: 60px;
        padding-right: 60px; 
    }


    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc {
        height: 50vh;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-titol {
        font-size: 34px; 
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-subtitol {
        font-size: 16px; 
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac {
        font-size: 12px; 
    }

    #bpt-seccio .primer_bloc_bpt div.caixa-imatges {
        height: 500px;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 {
        top: 24%;
    }

    #bpt-seccio .primer_bloc_bpt p {
        width: 52%;
        margin-bottom: 0;
    }

    #bpt-seccio .caja-intermedia {
        margin-top: -142px;
    }

    #bpt-seccio .segon_bloc_bpt #img2-bpt-b2 {
        top: -10%;
    }

    #bpt-seccio .segon_bloc_bpt #img3-bpt-b2 {
        width: 22%;
        right: 10%;
        top: -7%;
    }

    #bpt-seccio .segon_bloc_bpt #img4-bpt-b2 {
        width: 24%;
        top: -15%;
        left: 76%;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt {
        padding: 20px 0 0 0 
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt p {
        font-size: 15px; 
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt a {
        font-size: 14px; 
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img h2 {
        font-size: 58px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img p {
        font-size: 16px;
    }

    #compromis-home .textos-inicials-compromis {
        padding-top: 110px;
    }

    #compromis-home .textos-inicials-compromis h2 {
        font-size: 36px; 
    }

    #compromis-home .textos-inicials-compromis p {
        max-width: 65%;
        font-size: 22px;
        margin-bottom: 20px;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp h2 {
        font-size: 52px;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp p {
        width: 100%;
        font-size: 14px;
    }

    #compromis-home .galeta-flotant--rectangular {
        top: -38px;
        right: 2%;
        width: 250px;
    }

    #compromis-home .galeta-flotant--basica {
        bottom: 65%;
        left: 36%;
        width: 220px;
    }

    #compromis-home .galeta-flotant--tubo {
        top: 47%;
        left: 79%;
    }

    #compromis-home .galeta-flotant--almendra {
        bottom: 18%;
        right: 59%;
        width: 163px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat {
        margin-top: 200px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp h2 {
        font-size: 24px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp p {
        font-size: 14px;
        width: 80%;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .primer_text_preu {
        font-size: 22px;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .segon_text_peu {
        font-size: 18px;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .nom_firma p {
        font-size: 16px; 
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .nom_firma img {
        width: 80px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content {
        padding: 0 0 0 100px;
        max-width: 42%;
    }

    .contents_hst_home div.hst_h3 h2 {
        font-size: 22px; 
    }

    section.bloc_historia_home div.contents_hst_home div.hst_h2 img {
        max-width: 200px;
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home div h2 {
        font-size: 42px; 
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home p.horaris {
        font-size: 12px;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home h2.titol-form-drt {
        font-size: 22px;
    }

    .section-contact-home .contents-contact-home .esquerra-cont-home div p {
        font-size: 24px;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals div.punt_legal label.form-check-label {
        font-size: 12px;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home p {
        font-size: 16px;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 18px;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body p {
        text-align: left;
        font-size: 12px; 
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body a {
        font-size: 13px;
    }

    .newsletter-trias__title {
        font-size: 30px; 
    }

    .newsletter-trias__desc {
        font-size: 16px; 
    }

    .newsletter-trias__legal {
        font-size: 12px; 
    }

    .footer-trias__logo {
        max-width: 100%;
    }

    .footer-trias__legal {
        font-size: 12px;
    }

    .footer-trias__col-links a {
        font-size: 12px; 
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals {
        row-gap: 4px;
    }

    #historia .titols_historia #img_h_1 {
        width: 80%;
        left: 10%;
        top: 32%;
    }

    .bit-wrapper {
        gap: 40px;
    }

    .bit-titol {
        font-size: 26px;
        width: 100%;
        margin-bottom: 20px;
    }

    .bit-textos {
        font-size: 11px;
    }

    .cronica__title {
        font-size: 38px;
    }

    .cronica__year {
        font-size: 48px;
    }

    .cronica__body {
        flex-direction: column;
        gap: 0px;
    }

    .cronica__text {
        flex: 1;
        min-width: 0;
        padding-top: 30px;
        padding-right: 8%;
    }

    .cronica__img-wrap img {
        width: 82%;
        max-height: 280px;
    }

    .video_historia__content { 
        bottom: 18%;
        width: 50%;
    }

    #historia {
        padding: 60px 0 0px 0;
    }

    #nuestrasGalletas .caja-intermedia {
        margin-top: -330px;  
    }

    #nuestrasGalletas .listado-galletas img#flor_flotante {
        width: 350px;
        right: 6%;
        top: -110px;
    }

    #nuestrasGalletas .listado-galletas .textos-listado h2 {
        font-size: 28px;
    }

    #nuestrasGalletas .listado-galletas .textos-listado p {
        font-size: 14px;
    }

    #nuestrasGalletas .galeta-card, #contingut-subart .galeta-card {
        flex: 0 0 33%;
        max-width: 33%; 
    }

    #nuestrasGalletas .galeta-card__titol, #contingut-subart .galeta-card__titol {
        font-size: 20px;
    }

    #nuestrasGalletas .galeta-card__subtitol, #contingut-subart .galeta-card__subtitol {
        font-size: 12px;
    }

    #nuestrasGalletas .galeta-card__img-wrap, #contingut-subart .galeta-card__img-wrap {
        height: 250px;
    }

    #nuestrasGalletas .galeta-card__btn, #contingut-subart .galeta-card__btn {
        font-size: 10px; 
    }

    header.site-header.header-rojo nav.navbar.navbar-expand-xl div.container.container-custom button.navbar-toggler.border-0.shadow-none span.navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    div.caixa_vermella_museo .textos_esq_mus h2:first-child {
        font-size: 48px; 
    }

    .museu-subtitol-gran {
        font-size: 38px;
    }

    div.caixa_vermella_museo .textos_dreta_mus p {
        font-size: 13px;
        padding-right: 10px;
        width: 109%;
    }

    div.caixa_vermella_museo .caixa_img_mus {
        width: 70%; 
    }

    #museu .contenedor_museo {
        padding: 50px 40px 80px; 
    }

    #museu .marc-logo {
        top: -94px;
        width: 230px;
    }

    #museu #img_sobre_text .image_inicial,
    #museu .img_sobre_text .image_inicial {
        width: 50%;
    }

    #museu #img_sobre_text .subtitol_sobre_text,
    #museu .img_sobre_text .subtitol_sobre_text {
        font-size: 14px;
    }

    #museu #exposicio_llaunes .exp_titol {
        font-size: 32px;
    }

    #museu #exposicio_llaunes .exp_descripcio {
        font-size: 14px;
        width: 40%;
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div h2 {
        font-size: 38px;
        line-height: 40px;
        letter-spacing: 0;
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div p {
        font-size: 24px; 
    }

    #museu .museu-contacte-wrap .museu-col-form h2.titol-form-drt {
        font-size: 22px; 
    }

    #museu .museu-localitzacio .titol-localitzacio {
        font-size: 22px; 
    }

    #museu .museu-contacte-wrap .museu-col-form .contact-legals {
        row-gap: 4px; 
    }

    #blogs .blogs-subtitol {
        font-size: 24px;
    }

    #blogs .blogs-titol {
        font-size: 120px;
    }

    #blogs .blogs-grid-wrap .products-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 24px;
        margin-bottom: 14px; 
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body p {
        font-size: 14px; 
    }

    .bannerImgTop {
        height: 36vh; 
    }

    #distribuidors .content-distribuidors h1 {
        font-size: 82px; 
    }

    #distribuidors .content-distribuidors h2 {
        margin-bottom: 30px; 
    }

    #distribuidors .distribuidors-form-card {
        max-width: 65%; 
    }

    #contacte .content-contacte h2 {
        font-size: 26px; 
    }

    #contacte .content-contacte h1 {
        font-size: 82px; 
    }

    #contacte .contacte-form-card {
        max-width: 65%; 
    }


    #contacte .mapa_mes_dades {
        min-height: 340px;
    }

    #contacte .mapaContacte {
        min-height: 0;
        height: 340px;
    }

    #contacte .dada-label {
        font-size: 14px; 
    }

    #contacte .dadesContacte {
        padding: 25px 20px 25px 40px;
        height: 340px;
        gap: 20px;
    }

    #contacte .dada-value {
        font-size: 14px;
        line-height: 1.2;
    }

    .product-page .product-sticky {
        padding: 80px 60px 80px 50px !important;
    }

    .product-page .product-title-lg {
        font-size: 38px !important;
    }

    .product-page .product-meta-list {
        width: 80% !important;
    }

    .product-page .product-card-box .btn-dark-clean {
        font-size: 14px !important;
        min-width: 204px !important;
    }

    #nuestrasGalletas .galeta-card, #contingut-subart .galeta-card {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #contingut-subart .galeta-card--compacta .galeta-card__img-wrap {
        height: 250px; 
    }

    #nuestrasGalletas .galetes-grid, #contingut-subart .galetes-grid {
        margin-top: 40px;
    }

    section.related-section .row {
        /* base de 3 columnes mantenint el centrat amb auto-fit */
        --rel-col: calc((100% - 2 * var(--rel-gap)) / 3);
    }


    section#distribuidors .bannerImgTop {
        height: 36vh; 
    }

    #botiga {
        padding: 40px 40px;
    }
    
    .museu-stack__text .titol_ist {
        font-size: 28px;
    }

    .museu-stack__text .subtitol_sobre_text {
        font-size: 16px; 
    }

    .caixa_vermella_museo {
        background-size: 55% 70% !important;
    }

    div.caixa_vermella_museo {
        max-height: 75vh;
    }

    .museu-subtitol-gran {
        font-size: 36px;
    }





}

@media (max-width: 911px) {
    /* ── Barra superior compacta ── */
    header.site-header nav.navbar {
        padding: 8px 14px;
    }

    /* Logo més petit */
    header.site-header nav.navbar .navbar-logo-mobile img {
        max-width: 96px;
    }

    /* Toggler més junt al logo */
    header.site-header .navbar-expand-xl .navbar-toggler {
        margin-right: 10px;
        padding: 4px;
    }

    /* Icones d'accions més petites i juntes */
    header.site-header nav.navbar .navbar-actions-mobile {
        gap: 4px;
    }

    header.site-header nav.navbar .navbar-actions-mobile .icon-btn,
    header.site-header nav.navbar .navbar-actions-mobile a#carro_petit {
        padding: 4px;
    }

    header.site-header nav.navbar .navbar-actions-mobile .header-svg,
    header.site-header nav.navbar .navbar-actions-mobile a#carro_petit img {
        width: 18px;
        height: 18px;
    }

    /* Selector d'idioma de la barra: amagat (l'idioma va dins el drawer) */
    header.site-header nav.navbar .navbar-actions-mobile select {
        display: none;
    }

    /* Botó BOTIGA compacte */
    header.site-header nav.navbar .navbar-actions-mobile a.btn-botiga-menu {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Menú — drawer a pantalla completa SOTA la barra superior.
       --menu-top-offset = bottom real del header (el calcula el JS). */
    #mainNav.navbar-collapse,
    #mainNav.navbar-collapse.show,
    #mainNav.navbar-collapse.collapsing {
        width: 100vw !important;
        top: var(--menu-top-offset, 100px) !important;
        height: calc(100vh - var(--menu-top-offset, 100px)) !important;
        padding: 8px 0 24px;
        align-items: stretch;
        box-shadow: none;
    }

    /* Sense backdrop: el panel ja ocupa tota la pantalla */
    .menu-backdrop {
        display: none !important;
    }

    /* Amagar el logo intern del drawer (la barra superior ja mostra el logo) */
    #mainNav .menu-mobile-logo {
        display: none !important;
    }

    /* Amagar la creu interna (es tanca amb el toggler de la barra) */
    #mainNav .btn-close {
        display: none !important;
    }

    /* Llista d'ítems a pantalla completa */
    #mainNav .main-menu {
        width: 100%;
        gap: 0;
    }

    #mainNav .main-menu > .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--color-border, #e9e3d6);
    }

    #mainNav .main-menu > .nav-item:first-child {
        border-top: 1px solid var(--color-border, #e9e3d6);
    }

    /* Cada ítem: text esquerra, ocupa tota l'amplada */
    #mainNav .main-menu > .nav-item > .nav-link,
    #mainNav .main-menu > .nav-item > .nav-link--parent {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 18px 24px !important;
        font-size: 17px;
        margin: 0;
    }

    /* Amagar el chevron ⌄ antic de Galetes Trias (deixem només la fletxa › dreta) */
    #mainNav .main-menu > .nav-item .dropdown-caret {
        display: none !important;
    }

    /* Amagar la icona "+" antiga del megamenu en mòbil */
    #mainNav .main-menu > .nav-item > .nav-link > span.d-inline-block {
        display: none !important;
    }

    /* Botó-fletxa › a la dreta — l'ÚNIC que obre/tanca l'acordió */
    #mainNav .submenu-toggle {
        margin-left: auto;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        background: none;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #mainNav .submenu-toggle::before {
        content: "\203A"; /* › */
        font-size: 24px;
        line-height: 1;
        color: #1a1a1a;
        transition: transform 0.25s ease;
    }

    /* En obrir, la fletxa apunta avall */
    #mainNav .main-menu > .nav-item.submenu-open > .nav-link .submenu-toggle::before,
    #mainNav .main-menu > .nav-item.submenu-open > .nav-link--parent .submenu-toggle::before {
        transform: rotate(90deg);
    }

    /* ── Subnivell com a acordió inline (s'obre a sota fent-se lloc) ── */
    #mainNav .main-menu > .nav-item .mega-menu,
    #mainNav .main-menu > .nav-item .simple-dropdown {
        position: static;
        width: 100%;
        height: auto;
        background: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
        max-height: 0;
        transform: none;
        transition: max-height 0.3s ease;
        display: block !important;
    }

    /* Per si quedés algun botó "Enrere" antic, no mostrar-lo */
    #mainNav .submenu-back {
        display: none !important;
    }

    /* Subnivell obert (classe afegida per JS) */
    #mainNav .main-menu > .nav-item.submenu-open > .mega-menu,
    #mainNav .main-menu > .nav-item.submenu-open > .simple-dropdown {
        max-height: 600px;
    }

    /* Enllaços dins el subnivell */
    #mainNav .mega-menu a,
    #mainNav .simple-dropdown a,
    #mainNav .simple-dropdown li > a {
        display: block;
        padding: 14px 24px 14px 40px;
        font-size: 15px;
        border-bottom: 1px solid var(--color-border, #e9e3d6);
    }

    #mainNav .simple-dropdown {
        list-style: none;
    }

    /* Amagar elements del megamenu que no encaixen en mòbil */
    #mainNav .mega-menu .mega-highlight,
    #mainNav .mega-menu .row { display: block; }
    #mainNav .mega-menu .container,
    #mainNav .mega-menu .col-lg-3 { padding: 0; }

    /* Selector d'idioma a baix */
    #mainNav .menu-mobile-lang {
        display: block;
        margin-top: 24px;
        padding: 0 24px;
    }

    #mainNav .menu-mobile-lang select {
        border: none;
        font-size: 16px;
        text-transform: uppercase;
        color: gray;
        background: transparent;
    }
}

/* ── Menú obert: neutralitzar el stacking context de la topbar perquè el
   drawer (z-index alt, penjat del body) la tapi del tot ── */
html.menu-open .topbar-marquee {
    position: relative;
    z-index: 0;
}

html.menu-open .topbar-track {
    will-change: auto;
}

/* Bloqueja l'scroll del fons mentre el menú està obert */
html.menu-open,
html.menu-open body {
    overflow: hidden;
}

/* =========================================================================
   OFFCANVAS DE FILTRES (#filtersPanel) · Fix de z-index en mòbil
   El header té z-index:100001 a ≤1024px (necessari pel drawer del menú).
   L'offcanvas de Bootstrap surt per defecte a z-index:1045, així que el
   header el taparia. El pugem per sobre del header perquè el panel i el
   seu backdrop quedin del tot visibles en obrir els filtres.
   ========================================================================= */
#filtersPanel.offcanvas {
    z-index: 100050;
}

/* El backdrop fosc de Bootstrap associat a l'offcanvas, també per sobre
   del header (però per sota del propi panel). */
.offcanvas-backdrop.show {
    z-index: 100049;
}

/* =========================================================================
   DRAWER MÒBIL · Variants de color (mirall del header desktop)
   Quan el JS obre el menú copia la classe de variant al <html>, i d'aquí
   apliquem els mateixos colors al panel lateral.
   ========================================================================= */

/* — Variant header-marron (pàgina Història) — */
html.header-marron #mainNav.navbar-collapse {
    background: #F7F3E6;
}
html.header-marron #mainNav .main-menu > .nav-item > .nav-link,
html.header-marron #mainNav .main-menu > .nav-item > .nav-link--parent {
    color: #AA8055;
}
html.header-marron #mainNav .main-menu > .nav-item > .nav-link:hover,
html.header-marron #mainNav .main-menu > .nav-item > .nav-link--parent:hover {
    color: #8e6843;
}
html.header-marron #mainNav .main-menu > .nav-item {
    border-bottom-color: rgba(170, 128, 85, 0.25);
}
html.header-marron #mainNav .main-menu > .nav-item:first-child {
    border-top-color: rgba(170, 128, 85, 0.25);
}
html.header-marron #mainNav .submenu-toggle::before {
    color: #AA8055;
}
html.header-marron #mainNav .mega-menu,
html.header-marron #mainNav .simple-dropdown {
    background: #ede8d8;
}
html.header-marron #mainNav .mega-menu a,
html.header-marron #mainNav .simple-dropdown a {
    color: #AA8055;
    border-bottom-color: rgba(170, 128, 85, 0.20);
}

/* — Variant header-rojo (pàgina Museu) — */
html.header-rojo #mainNav.navbar-collapse {
    background: #610C00;
}
html.header-rojo #mainNav .main-menu > .nav-item > .nav-link,
html.header-rojo #mainNav .main-menu > .nav-item > .nav-link--parent {
    color: #ffffff;
}
html.header-rojo #mainNav .main-menu > .nav-item > .nav-link:hover,
html.header-rojo #mainNav .main-menu > .nav-item > .nav-link--parent:hover {
    color: #CC1B1B;
}
html.header-rojo #mainNav .main-menu > .nav-item {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
html.header-rojo #mainNav .main-menu > .nav-item:first-child {
    border-top-color: rgba(255, 255, 255, 0.15);
}
html.header-rojo #mainNav .submenu-toggle::before {
    color: #ffffff;
}
html.header-rojo #mainNav .mega-menu,
html.header-rojo #mainNav .simple-dropdown {
    background: #4a0900;
}
html.header-rojo #mainNav .mega-menu a,
html.header-rojo #mainNav .simple-dropdown a {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
html.header-rojo #mainNav .menu-mobile-lang select {
    color: rgba(255, 255, 255, 0.7);
}

/* — Variant header-blogs (pàgina Blog) — */
html.header-blogs #mainNav.navbar-collapse {
    background: #f2e1cc;
}
html.header-blogs #mainNav .main-menu > .nav-item > .nav-link,
html.header-blogs #mainNav .main-menu > .nav-item > .nav-link--parent {
    color: #AA8055;
}
html.header-blogs #mainNav .main-menu > .nav-item > .nav-link:hover,
html.header-blogs #mainNav .main-menu > .nav-item > .nav-link--parent:hover {
    color: #CC1B1B;
}
html.header-blogs #mainNav .main-menu > .nav-item {
    border-bottom-color: rgba(170, 128, 85, 0.25);
}
html.header-blogs #mainNav .main-menu > .nav-item:first-child {
    border-top-color: rgba(170, 128, 85, 0.25);
}
html.header-blogs #mainNav .submenu-toggle::before {
    color: #AA8055;
}
html.header-blogs #mainNav .mega-menu,
html.header-blogs #mainNav .simple-dropdown {
    background: #e8cdb0;
}
html.header-blogs #mainNav .mega-menu a,
html.header-blogs #mainNav .simple-dropdown a {
    color: #AA8055;
    border-bottom-color: rgba(170, 128, 85, 0.20);
}

/* El botó-fletxa › de l'acordió només es mostra a <911px */
@media (min-width: 912px) {
    #mainNav .submenu-toggle {
        display: none !important;
    }
}

@media (max-width: 840px) {
    
    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-titol {
        font-size: 24px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-subtitol {
        font-size: 14px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content {
        padding: 0 0 40px 40px;
    }

    #bpt-seccio .primer_bloc_bpt div.caixa-imatges {
        height: 420px;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 {
        width: 94%;
        top: 34%;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .titol-bpt-b1 {
        font-size: clamp(40px, 7.5vw, 62px);
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .subtitol-bpt-b1 {
        font-size: clamp(20px, 3.6vw, 30px);
    }

    #bpt-seccio .primer_bloc_bpt p {
        width: 80%;
    }

    #bpt-seccio .primer_bloc_bpt #linea_b1 {
        margin-top: 90px;
    }

    #bpt-seccio .caja-intermedia {
        margin-top: -124px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 {
        margin-top: 45px; 
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt p {
        width: 90%;
    }

    #compromis-home .textos-inicials-compromis h2 {
        font-size: 32px;
    }

    #compromis-home .textos-inicials-compromis p {
        max-width: 58%; 
    }

    #compromis-home .compromis-items .imatge_text_comp {
        width: 70%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #compromis-home .compromis-items .imatge_text_comp .left_fill_comp img {
        max-width: 100%; 
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp {
        padding-top: 20px;
        width: 100%;
    }

    #compromis-home .galeta-flotant--rectangular {
        top: -104px;
        width: 232px;
    }

    #compromis-home .galeta-flotant--basica {
        bottom: 58%;
        left: 36%;
        width: 180px;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp p {
        font-size: 16px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat { 
        flex-direction: column-reverse;
        margin-top: 100px;
    }

    #compromis-home .galeta-flotant--tubo {
        top: 43%;
        left: 70%;
        width: 175px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp h2 { 
        margin-bottom: 20px;      
    }

    #compromis-home .galeta-flotant--almendra {
        bottom: 15%; 
    }

    #compromis-home .galeta-flotant--basica {
        bottom: 60%; 
    }

    .blogs_home_section .container.container-custom .products-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ── Newsletter Trias ───────────────────────────────────────────────
       A ≤840px les dues columnes ja s'apilen (Bootstrap trenca a <992px).
       Compactem paddings, ampliem el títol a tota l'amplada i fem l'input i
       el botó full-width perquè el bloc respiri bé en tablet/mòbil gran. */
    .newsletter-trias {
        padding: 48px 0;
    }

    .newsletter-trias .container,
    .newsletter-trias .container-custom {
        padding-left: 32px;
        padding-right: 32px;
    }

    .newsletter-trias .row {
        --bs-gutter-y: 28px;
    }

    .newsletter-trias__title {
        font-size: 30px;
        max-width: 100%;
        margin-bottom: 16px;
    }

    .newsletter-trias__desc {
        font-size: 15px;
        max-width: 100%;
    }

    .newsletter-trias__form {
        width: 100%;
        gap: 12px;
    }

    .newsletter-trias__input {
        height: 52px;
        font-size: 14px;
    }

    .newsletter-trias__legal {
        font-size: 12px;
    }

    .newsletter-trias__btn {
        width: 25%;
        text-align: center;
    }

    .footer-trias__top {
        align-items: center;
    }

    .footer-trias__cols {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 40px;
    }

    .footer-trias__brand {
        justify-content: center;
        display: flex;
    }

    .footer-trias__logo {
        width: 80%;
    }

    .cronica {
        padding: 40px 0 40px;
    }

    .video_historia__content {
        bottom: 20% !important; 
    }

    .video_historia__desc {
        font-size: 16px !important;
    }

    #nuestrasGalletas .caja-intermedia img {
        width: 50%;
    }

    #nuestrasGalletas .caja-intermedia {
        margin-top: -370px;
    }

    #nuestrasGalletas .listado-galletas img#flor_flotante {
        width: 295px;
        right: 2%;
        top: -80px;
    }

    #nuestrasGalletas .galeta-card__titol, #contingut-subart .galeta-card__titol {
        font-size: 22px;
    }

    #nuestrasGalletas .galeta-card__subtitol, #contingut-subart .galeta-card__subtitol {
        font-size: 14px;
    }

    div.caixa_vermella_museo .textos_esq_mus h2:first-child {
        font-size: 46px;
        margin-left: 30px;
    }

    /* MUSEU TRIAS es queda a l'esquerra; el subtítol gran passa a la dreta
       a la mateixa alçada (a 840px) */
    div.caixa_vermella_museo .textos_esq_mus {
        position: relative;
    }

    div.caixa_vermella_museo .textos_esq_mus .museu-subtitol-gran {
        position: absolute;
        top: 100px;
        right: 30px;
        left: auto;
        width: 50%;
        margin: 0;
        text-align: right;
    }

    #compromis-home div.compromis-items .textos_peu_compromis {
        width: 80%;
    } 

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis {
        flex: 88%;
    }

    #compromis-home .galeta-flotant--almendra {
        bottom: 0%;
        right: 2%;
    }

    section.bloc_historia_home div.contents_hst_home div.hst_h2 img {
        max-width: 180px;
    }

    .contents_hst_home div.hst_h3 h2 {
        font-size: 18px;
    }

    .contents_hst_home div.hst_h3 a {
        padding: 10px 24px;
        font-size: 12px;
    }

    /* Contact form: col-sm-6 passa a full-width (col-12 equivalent) ≤840px */
    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.row.g-3 div.col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Textarea missatge: la meitat d'alçada que a desktop (rows 6 → 3) */
    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.col-12 textarea.form-control {
        height: calc(3em * 1.5 + 1.75rem);
        resize: none;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 22px;
    }

    .blogs_home_section .container.container-custom .products-grid-3 article.card-clean .product-card-body p {
        text-align: center;
        font-size: 14px;
    }

    #historia .titols_historia #img_h_2 {
        width: 225px;
    }

    .bit-imatge {
        flex: 0 0 auto;
        width: 50% !important;
    }

    .bit-wrapper {
        flex-direction: row; 
        align-items: start;
    }

    .footer-trias__legal {
        font-size: 10px;
        gap: 6px;
    }

    .footer-trias__social {
        gap: 6px; 
    }

    .footer-trias__social-list a {
        width: 28px;
        height: 24px; 
    }

    div.caixa_vermella_museo .caixa_img_mus {
        align-self: left; 
    }

    div.caixa_vermella_museo .textos_esq_mus, div.caixa_vermella_museo .textos_dreta_mus {
        flex-direction: row;
    }

    div.caixa_vermella_museo .textos_esq_mus .museu-subtitol-gran {
        top: 42px; 
    }

    div.caixa_vermella_museo {
        min-height: 66vh;
    }

    div.caixa_vermella_museo {
        background-position: bottom right ;
    }

    #museu #img_sobre_text .titol_ist,
    #museu .img_sobre_text .titol_ist {
        max-width: 210px;
        font-size: 24px;
    }

    #museu #exposicio_llaunes .exp_titol {
        font-size: 24px;
    }

    #museu #exposicio_llaunes .exp_descripcio {
        font-size: 12px;
        width: 45%;
    }

    #museu .section-contact-home {
        padding: 0px 0 40px;
    }

    #museu .museu-contacte-wrap .museu-fila {
        flex-direction: column;
    }

    .museu-contacte-wrap .museu-localitzacio {
        width: 100%; 
    }

    #museu .museu-mapa {
        aspect-ratio: 16 / 7; 
    }

    form#frm_contacte.amagar_labels div.mt-4 { 
        text-align: center;
    }

    #blogs .blogs-titol {
        font-size: 90px;
    }

    #blogs .blogs-subtitol {
        font-size: 22px;
    }

    #distribuidors .content-distribuidors h1 {
        font-size: 80px;
    }

    #contacte .contacte-form-card {
        max-width: 75%;
    }

    #botiga {
        padding: 40px 30px;
    }

    section.related-section .product-title {
        font-size: 20px; 
    }

    section.related-section .product-category {
        font-size: 14px; 
    }












    





}

@media (max-width: 768px) {
    
    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc {
        height: 40vh;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content {
        width: 90%;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-titol {
        font-size: 20px;
    }


    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac {
        padding: 6px 10px;
        font-size: 11px;
    }

    #bpt-seccio .caja-intermedia img {
        width: 50%;
    }

    #bpt-seccio .segon_bloc_bpt #img4-bpt-b2 {
        top: -12%;
    }

    #bpt-seccio .segon_bloc_bpt #img3-bpt-b2 {
        top: -5%;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 {
        width: 90%; 
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 h2 {
        font-size: 22px; 
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2 .swiper-slide a p {
        font-size: 20px;
    }

    #compromis-home .textos-inicials-compromis {
        padding-top: 80px;
    }

    #compromis-home .textos-inicials-compromis h2 {
        font-size: 28px;
    }

    #compromis-home .textos-inicials-compromis p {
        font-size: 20px; 
    }

    #compromis-home .galeta-flotant--rectangular {
        top: -96px;
        width: 239px;
        right: 0%;
    }

    #compromis-home .compromis-items .imatge_text_comp .left_fill_comp img {
        max-width: 80%;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp h2 {
        font-size: 48px;
    }

    #compromis-home .galeta-flotant--basica {
        bottom: 58%;
        left: 23%;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp h2 {
        margin-bottom: 20px;
        width: 80%;
        font-size: 22px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content .split-imatge-titol {
        font-size: 58px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content {
        padding: 0px 0 0 60px;
        max-width: 58%;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-subtitol {
        font-size: 18px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac {
        padding: 6px 10px;
        font-size: 14px;
    }

    section.bloc_historia_home div.contents_hst_home div.hst_h2 img {
        max-width: 160px;
    }

    .contents_hst_home div.hst_h3 h2 {
        max-width: 90%; 
    }

    .section-contact-home .contents-contact-home .dreta-cont-home form#frm_contacte div.contact-legals div.punt_legal label.form-check-label {
        font-size: 11px;
    }

    .bit-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .bit-textos {
        font-size: 14px;
    }

    .video_historia {
        aspect-ratio: 6 / 5;
    } 

    div.caixa_vermella_museo .textos_esq_mus h2:first-child {
        font-size: 40px;
        margin-left: 24px;
    }

    .museu-subtitol-gran {
        font-size: 28px;
    }

    div.caixa_vermella_museo .textos_dreta_mus p {
        font-size: 11px; 
    }

    #museu .marc-logo {
        top: -83px;
        width: 180px;
    }

    #museu .section-contact-home .contents-contact-home {
        align-items: center;
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div h2 {
        font-size: 34px;
        line-height: 20px; 
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div p {
        font-size: 20px;
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home p.horaris {
        font-size: 12px; 
    }

    #museu .museu-contacte-wrap .museu-col-form h2.titol-form-drt {
        font-size: 20px;
    }

    #museu .museu-contacte-wrap .museu-col-form .mt-4 button {
        font-size: 12px;
        padding: 12px 28px !important;
    }

    #museu .museu-localitzacio .titol-localitzacio {
        font-size: 20px;
    }

    #museu .museu-mapa {
        aspect-ratio: 16 / 6;
    }

    #distribuidors .distribuidors-form-card {
        max-width: 75%;
    }

    section#distribuidors .bannerImgTop {
        height: 28vh;
    }

    #contacte .mapa_mes_dades {
        flex-direction: row;
    }

    #contacte .dadesContacte {
        width: 28%; 
    }

    section.related-section .product-price {
        font-size: 20px; 
    }

    .museu-stack__text {
        width: 80%; 
    }

    .museu-stack__text .titol_ist {
        font-size: 24px;
    }

    .museu-stack__text .subtitol_sobre_text {
        font-size: 14px;
        max-width: 350px;
    }

    
















}

@media (max-width: 480px) {

    /* 1 sol fill (sense carrusel): adaptem la imatge de fons perquè el subjecte
       quedi ben enquadrat a mòbil i el bloc respiri (alçada més continguda). */
    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split {
        height: 70vh;
        background-position: center center !important;
        background-size: cover !important;
    }

    /* ── HEADER MÒBIL (≤480px) ─────────────────────────────────────────────
       Distribució: [hamburguesa] · [logo] · [icones + BOTIGA] repartits a tota
       l'amplada amb respir. Padding lateral lleuger i sense embolicar files. */
    header.site-header nav.navbar {
        padding: 8px 12px;
    }

    header.site-header nav.navbar .container.container-custom {
        flex-wrap: nowrap;       /* tot en una sola fila, sense saltar de línia */
        gap: 6px;
    }

    /* Hamburguesa a l'esquerra — amplada justa, no robar espai a la resta */
    header.site-header .navbar-expand-xl .navbar-toggler {
        flex: 0 0 auto;
        margin-right: 0;
        padding: 4px;
    }

    /* Logo centrat però desplaçat lleugerament a l'esquerra per equilibrar
       el bloc d'accions (més ample) de la dreta. Manté el flex creixent perquè
       absorbeixi l'espai sobrant entre hamburguesa i accions. */
    header.site-header nav.navbar .navbar-logo-mobile {
        flex: 1 1 auto;
        justify-content: flex-start;
        margin-left: 2px;
    }

    header.site-header nav.navbar .navbar-logo-mobile img {
        max-width: 104px;
    }

    /* Bloc d'accions a la dreta: icones + BOTIGA, ben repartit i sense apilar */
    header.site-header nav.navbar .navbar-actions-mobile {
        flex: 0 0 auto;
        gap: 6px;
        flex-wrap: nowrap;
    }

    /* Icones una mica més grans que a 911px (18px → 21px) i toc més de respir */
    header.site-header nav.navbar .navbar-actions-mobile .icon-btn,
    header.site-header nav.navbar .navbar-actions-mobile a#carro_petit {
        padding: 4px 5px;
    }

    header.site-header nav.navbar .navbar-actions-mobile .header-svg, header.site-header nav.navbar .navbar-actions-mobile a#carro_petit img {
        width: 18px;
        height: 18px;
    }

    /* BOTIGA ONLINE: font una mica menor i sense saltar de línia, compacte */
    header.site-header nav.navbar .navbar-actions-mobile a.btn-botiga-menu {
        padding: 6px 10px;
        font-size: 11px;
        margin-left: 10px;
        letter-spacing: 0.6px;
        white-space: nowrap;
        line-height: 1.15;
    }

    .split-imatge-carrusel .split-imatge-wrapper.swiper {
        overflow: hidden;
        position: relative;
        padding-bottom: 0px;
    }

    .split-imatge-carrusel .split-imatge-wrapper .split-imatge-track.swiper-wrapper {
        align-items: stretch;
    }

    .split-imatge-carrusel .split-imatge-wrapper .split-imatge-bloc.swiper-slide {
        width: 100%;
        flex: 0 0 100%;
        height: 60vh;         
    }

    /* Paginació (bullets) centrada sota el carrusel */
    .split-imatge-carrusel .split-imatge-pagination {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 8px;
        z-index: 3;
    }

    .split-imatge-carrusel .split-imatge-pagination .swiper-pagination-bullet {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.5;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .split-imatge-carrusel .split-imatge-pagination .swiper-pagination-bullet-active {
        opacity: 1;
        transform: scale(1.15);
    }

    #bpt-seccio .primer_bloc_bpt p {
        width: 75%; 
    }

    #bpt-seccio .caja-intermedia {
        margin-top: -75px;
    }

    #bpt-seccio .segon_bloc_bpt #img2-bpt-b2 {
        top: -5%;
        left: -36px;
        width: 40%;
    }

    #bpt-seccio .segon_bloc_bpt #img3-bpt-b2 {
        top: -2%;
        width: 25%;
    }

    #bpt-seccio .segon_bloc_bpt #img4-bpt-b2 {
        top: -7%;
        left: 73%;
        width: 30%;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 {
        width: 100%;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev, #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next {
        width: 30px;
        height: 30px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev {
        left: -70px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next {
        right: -70px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev, #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next {
        top: 30%; 
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt p {
        width: 100%;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img h2 {
        font-size: 44px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img p {
        font-size: 13px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img {
        padding: 50px 0;
    }

    #compromis-home .textos-inicials-compromis h2 {
        font-size: 24px;
    }

    #compromis-home .textos-inicials-compromis p {
        max-width: 70%;
        font-size: 18px;
    }

    #compromis-home .compromis-items {
        padding: 30px 0 80px 0;
    }

    #compromis-home .compromis-items .imatge_text_comp .left_fill_comp img {
        max-width: 100%;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp h2 {
        font-size: 40px;
    }

    #compromis-home .compromis-items .imatge_text_comp .right_fill_comp p {
        font-size: 14px;
    }

    #compromis-home .galeta-flotant--rectangular {
        top: -16%;
        width: 150px;
        right: -3%;
    }

    #compromis-home .galeta-flotant--basica {
        bottom: 63%;
        left: 20%;
        width: 130px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp h2 {
        margin-bottom: 20px;
        width: 100%;
        font-size: 20px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat {
        margin-top: 60px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp p {
        font-size: 14px;
        width: 100%;
    }

    #compromis-home .galeta-flotant--tubo {
        top: 59%;
        left: 62%;
        width: 175px;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .primer_text_preu {
        font-size: 18px;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .peu_dret_compromis .segon_text_peu {
        font-size: 16px;
    }

    #compromis-home .galeta-flotant--almendra {
        bottom: 2%;
        right: 64%;
        width: 20%;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content {
        padding: 0px 0 0 60px;
        max-width: 100%;
    }

    .contents_hst_home {
        flex-direction: column;
        gap: 20px;
    }

    .bloc_historia_home {
        padding: 0px 0; 
    }

    section.bloc_historia_home div.contents_hst_home div.hst_h2 img {
        max-width: 180px;
        margin-bottom: 30px;
    }

    /* Separador del contacte (separador_vermell_top.svg). Mateix patró modular:
       a width:100% s'aixafa. L'usem com a fons repetit (repeat-x) amb alçada
       fixa perquè ompli tota l'amplada conservant la proporció dels motius. */
    section.section-contact-home div.separador_boles {
        overflow: hidden;
        line-height: 0;
        height: 22px;
        background-image: url('../img/separador_vermell_top.svg');
        background-repeat: repeat-x;
        background-position: left center;
        background-size: auto 100%;
    }

    section.section-contact-home div.separador_boles img {
        display: none;
    }

    /* Separador del blog (separador_marro.svg). El SVG és un mòdul de ~320px
       repetit 6 cops fins a 1919px. A width:100% s'aixafa; a width:auto no
       cobreix l'amplada. Solució: usar-lo com a FONS repetit (repeat-x) amb
       alçada fixa, així omple tota l'amplada sense aixafar ni deixar buit.
       Amaguem l'<img> original i pintem el fons al contenidor. */
    .blogs_home_section .separador_boles {
        overflow: hidden;
        line-height: 0;
        height: 30px;
        background-image: url('../img/separador_marro.svg');
        background-repeat: repeat-x;
        background-position: left center;
        background-size: auto 100%;
    }

    .blogs_home_section .separador_boles img {
        display: none;
    }

    .section-contact-home .contents-contact-home {
        flex-direction: column;
        padding: 20px 20px 60px 20px;
    }

    .section-contact-home .contents-contact-home .dreta-cont-home h2.titol-form-drt {
        font-size: 20px;
        text-align: center;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home h2 {
        font-size: 28px;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home p {
        font-size: 16px;
        width: 80%;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home a {
        font-size: 12px; 
    }

    .blogs_home_section .container.container-custom .products-grid-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .blogs_home_section .container.container-custom .products-grid-3 {
        padding: 0px 40px 110px 40px;
    }

    .newsletter-trias__btn {
        width: 40%; 
    }

    .footer-trias__logo {
        width: 60%;
    }

    .footer-trias__top {
        padding: 40px 0;
    }

    .footer-trias__cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-trias__col {
        text-align: center;
        margin-bottom: 30px;
    }

    
    .footer-trias__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
    }

    /* Legals: columna, alineats a l'esquerra, sense els separadors "|" */
    .footer-trias__legal {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .footer-trias__legal .footer-trias__sep {
        display: none;
    }

    
    .footer-trias__social {
        flex-direction: column;
        align-items: flex-end;
        flex-wrap: nowrap;
        align-self: stretch;
        justify-content: space-between;
        gap: 12px;
    }

    #compromis-home {
        padding: 50px 20px;
    }

    /* ── MARC DECORATIU COMPROMIS (≤480px) ────────────────────────────────
       Esquines més petites i línies més enganxades a la vora externa.
       · esquina: 50px → 38px
       · offset extern de les línies (distància a la vora): 14px → 7px
       · arrencada de les línies des de la cantonada: 50px → 38px (= mida esquina)
       El forat superior (--marc-hueco-half) s'hereta del bloc 768px. */
    #compromis-home .marc-esquina {
        width: 38px;
        height: 38px;
    }

    #compromis-home .marc-linia--top-left,
    #compromis-home .marc-linia--top-right {
        top: 7px;
        width: calc(50% - 38px - var(--marc-hueco-half));
    }
    #compromis-home .marc-linia--top-left  { left: 38px; }
    #compromis-home .marc-linia--top-right { right: 38px; }

    #compromis-home .marc-linia--bottom {
        bottom: 7px;
        left: 38px;
        right: 38px;
    }

    #compromis-home .marc-linia--left {
        left: 7px;
        top: 38px;
        bottom: 38px;
    }
    #compromis-home .marc-linia--right {
        right: 7px;
        top: 38px;
        bottom: 38px;
    }

    #bpt-seccio .primer_bloc_bpt div #img1-bpt-b1 {
        width: 22%;
    }

    #bpt-seccio .primer_bloc_bpt div.caixa-imatges {
        height: 320px;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 {
        top: 40%;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .titol-bpt-b1 {
        font-size: clamp(30px, 8.5vw, 42px);
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .subtitol-bpt-b1 {
        font-size: clamp(15px, 4vw, 22px);
    }

    #historia .titols_historia p {
        font-size: 24px;
    }

    #historia .titols_historia h2 {
        font-size: 74px;
    }

    #historia .titols_historia #img_h_2 {
        width: 180px;
    }

    #historia .titols_historia #img_h_1 {
        width: 94%;
        left: 3%;
        top: 32%;
    }
    
    .bit-imatge {
        width: 80% !important;
    }

    .bit-contingut {
        width: 90%;
    }

    .cronica__title {
        font-size: 26px;
    }

    .cronica__nav {
        padding-right: 50px;
    }

    .cronica__arrow {
        width: 28px;
        height: 28px; 
    }

    .video_historia__desc {
        font-size: 12px !important;
    }

    .blogs_home_section div.container.container-custom div.section-head .textos-blog-home p {
        font-size: 14px; 
    }

    #nuestrasGalletas .caja-intermedia {
        margin-top: -414px;
    }

    #nuestrasGalletas .listado-galletas img#flor_flotante {
        width: 156px;
        right: 1%;
        top: -76px;
    }

    #nuestrasGalletas .listado-galletas .textos-listado h2 {
        font-size: 22px;
        text-align: center;
    }

    #nuestrasGalletas .listado-galletas .textos-listado p {
        text-align: center; 
    }

    #nuestrasGalletas .listado-galletas {
        padding: 40px 20px 120px 20px;
    }

    #nuestrasGalletas .galeta-card__img-wrap, #contingut-subart .galeta-card__img-wrap {
        height: 200px;
    }

    #nuestrasGalletas .galeta-card__titol, #contingut-subart .galeta-card__titol {
        font-size: 18px;
    }

    #nuestrasGalletas .galeta-card__subtitol, #contingut-subart .galeta-card__subtitol {
        font-size: 13px;
    }

    div.caixa_vermella_museo .textos_esq_mus h2:first-child {
        font-size: 32px;
        margin-left: 12px;
        width: 100%;
        margin-bottom: 12px;
    }

    div.caixa_vermella_museo .textos_esq_mus, div.caixa_vermella_museo .textos_dreta_mus {
        flex-direction: column;
    }

    div.caixa_vermella_museo .caixa_img_mus {
        width: 75%;
    }

    div.caixa_vermella_museo .textos_esq_mus .museu-subtitol-gran {
        top: 33px;
        font-size: 24px;
    }

    div.caixa_vermella_museo .textos_dreta_mus p {
        font-size: 12px;
        width: 100%;
        margin-bottom: 10px;
    }

    #museu #exposicio_llaunes .exp_top {
        flex-direction: column; 
    }

    #museu #exposicio_llaunes .exp_titol {
        font-size: 22px;
        max-width: 100%;
        width: 100%;
    }

    #museu #exposicio_llaunes .exp_descripcio {
        font-size: 14px;
        width: 100%;
    }

    #museu #exposicio_llaunes {
        padding: 10px 20px 40px; 
    }

    #blogs .blogs-grid-wrap .products-grid-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1%;
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 26px; 
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body p {
        font-size: 16px;
    }

    #blogs .blogs-titol {
        font-size: 60px;
    }

    section#distribuidors .bannerImgTop {
        height: 16vh;
    }

    #distribuidors .content-distribuidors h2 {
        font-size: 20px; 
    }

    #distribuidors .content-distribuidors h1 {
        font-size: 48px;
    }

    #distribuidors .content-distribuidors p {
        font-size: 14px;
        max-width: 340px;
    }

    #distribuidors .distribuidors-form-card {
        max-width: 98%;
    }

    #contacte .content-contacte h2 {
        font-size: 22px;
    }

    #contacte .content-contacte h1 {
        font-size: 72px;
    }

    #contacte .content-contacte p {
        max-width: 340px; 
    }

    #contacte .contacte-form-wrap {
        padding: 0 0px 30px;
    }

    #contacte .contacte-form-card {
        max-width: 90%;
    }

    #contacte .mapa_mes_dades {
        flex-direction: column;
    }

    #contacte .mapaContacte {
        min-height: 0;
        height: 250px;
        width: 100%; 
    }

    #contacte .dadesContacte {
        width: 100%;
    }

    #contacte .dadesContacte {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        height: 240px;
    }

    #contacte .dada-item {
        width: 47%;
        text-align: center;
    }

    .product-page .product-layout {
        display: flex !important;
        flex-direction: column;
    }

    .product-page .product-sticky {
        padding: 45px 30px !important;
    }

    .product-page .product-title-lg {
        font-size: 30px !important;
    }

    #contingut-subart > h2 {
        font-size: 28px; 
    }

    section.product-page .product-layout {
        display: flex !important;
        flex-direction: column;
    }

    section.product-page .gallery-layout:has(.thumbs-col) {
        flex-direction: column;  
    }

    #museu .contenedor_museo {
        padding: 50px 20px 80px;
    }

















}

@media (max-width: 440px) {
    
    .split-imatge-carrusel .split-imatge-wrapper .split-imatge-bloc.swiper-slide {
        height: 56vh;
    }

    #bpt-seccio .primer_bloc_bpt p {
        width: 85%;
    }

    #bpt-seccio .primer_bloc_bpt div #img3-bpt-b1 {
        width: 98%;
    }

    #bpt-seccio .primer_bloc_bpt div.caixa-imatges {
        height: 300px;
    }

    #bpt-seccio .primer_bloc_bpt {
        padding: 32px 0 0 0;
    }

    #bpt-seccio .primer_bloc_bpt div #img1-bpt-b1 {
        width: 26%;
        top: 8%;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 {
        top: 40%;
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .titol-bpt-b1 {
        font-size: clamp(28px, 8.5vw, 40px);
    }

    #bpt-seccio .primer_bloc_bpt div #text-bpt-b1 .subtitol-bpt-b1 {
        font-size: clamp(15px, 4vw, 22px);
    }

    #bpt-seccio .primer_bloc_bpt #linea_b1 {
        margin-top: 50px;
    }

    #bpt-seccio .caja-intermedia img {
        width: 58%;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 h2 {
        font-size: 20px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .textos_categb2 p {
        font-size: 14px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img h2 {
        font-size: 42px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img p {
        font-size: 11px;
    }

    #bpt-seccio .segon_bloc_bpt .text-inferior-bpt .bones-img {
        padding: 34px 0;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 {
        padding: 60px 40px; 
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_prev {
        left: -45px;
    }

    #bpt-seccio .segon_bloc_bpt .categories_b2 .carru_categb2_next {
        right: -45px;
    }

    #compromis-home .galeta-flotant--rectangular {
        top: -16%;
        width: 130px;
        right: -3%;
    }

    #compromis-home .textos-inicials-compromis p {
        max-width: 85%;
        font-size: 16px;
    }

    #compromis-home .compromis-items .imatge_text_comp {
        width: 80%; 
    }
    
    #compromis-home .galeta-flotant--basica {
        left: 45%; 
    }

    #compromis-home .galeta-flotant--tubo {
        display: none;
    }

    #compromis-home div.compromis-items .textos_peu_compromis .bloc_buid_comrpomis {
        display: none;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split {
        height: 50vh; 
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content .split-imatge-titol {
        font-size: 42px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-imatge-subtitol {
        font-size: 16px;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc .split-imatge-content .split-btn_enllac {
        padding: 6px 10px;
        font-size: 12px;
    }

    .contents_hst_home {
        padding: 44px;
    }

    .newsletter-trias__btn {
        padding: 12px 22px; 
    }

    #nuestrasGalletas .listado-galletas img#flor_flotante {
        width: 156px;
        right: 0%;
        top: -70px;
    }

    #nuestrasGalletas .galetes-grid, #contingut-subart .galetes-grid {
        margin-top: 0px;
    }

    div.caixa_vermella_museo .textos_esq_mus .museu-subtitol-gran {
        top: 80px;
        font-size: 22px;
        right: 5%;
        width: 94%;
    }

    div.caixa_vermella_museo .textos_esq_mus h2:first-child {
        margin-bottom: 30px;
    }

    div.caixa_vermella_museo .caixa_img_mus {
        width: 100%;
    }

    div.caixa_vermella_museo .textos_dreta_mus p {
        font-size: 14px;
        width: 100%;
        margin-bottom: 40px;
    }

    #museu #img_sobre_text .titol_ist,
    #museu .img_sobre_text .titol_ist {
        font-size: 20px;
    }

    #museu #exposicio_llaunes .exp_titol {
        font-size: 20px;
        text-align: center; 
    }

    #museu #img_sobre_text, #museu .img_sobre_text{
        margin: 0 auto 0px auto;
    }

    #museu #exposicio_llaunes .exp_descripcio {
        text-align: center;
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div h2 {
        font-size: 28px;
        line-height: 14px;
    }

    #museu .section-contact-home .contents-contact-home .esquerra-cont-home div p {
        font-size: 16px;
    }

    #contacte .content-contacte h1 {
        font-size: 68px;
    }

    #contacte .contacte-form-card {
        padding: 0px 30px 48px; 
    }

    #contacte .contacte-form-titol {
        text-align: center;
    }

    #nuestrasGalletas .galeta-card, #contingut-subart .galeta-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #nuestrasGalletas .galeta-card__titol, #contingut-subart .galeta-card__titol {
        font-size: 24px;
    }

    #contingut-subart .galeta-card--compacta .galeta-card__subtitol {
        font-size: 16px; 
    }

    #contingut-subart .galeta-card--compacta .galeta-card__img-wrap {
        height: 210px;
    }



    






}

@media (max-width: 376px) {
    header.site-header nav.navbar .navbar-actions-mobile .header-svg, header.site-header nav.navbar .navbar-actions-mobile a#carro_petit img {
        width: 16px;
        height: 16px;
    }

    header.site-header nav.navbar .navbar-logo-mobile img {
        max-width: 90px;
    }

    header.site-header nav.navbar .navbar-actions-mobile {
        gap: 0px; 
    }

    header.site-header nav.navbar .navbar-actions-mobile a.btn-botiga-menu {
        font-size: 10px; 
    }

    header.site-header nav.navbar .navbar-actions-mobile a.btn-botiga-menu {
        font-size: 10px; 
    }

    header.site-header nav.navbar .navbar-actions-mobile a.btn-botiga-menu {
        font-size: 10px; 
    }

    #compromis-home .galeta-flotant--rectangular {
        display: none;
    }

    #compromis-home .textos-inicials-compromis {
        padding-top: 60px;
    }

    #compromis-home .compromis-items .imatge_text_comp.fill_intercanviat .right_fill_comp h2 {
        font-size: 18px;
    }

    #compromis-home .galeta-flotant--almendra {
        display: none;
    }

    .split-imatge-section .split-imatge-wrapper .split-imatge-bloc.un-fill-split .split-imatge-content .split-imatge-titol {
        font-size: 38px;
    }

    /* ── FOOTER BOTTOM (≤376px) ───────────────────────────────────────────
       Mateix repartiment que a 480px: legals a l'esquerra (columna) i xarxes a
       la dreta. Els iconos en fila a dalt i "by Neorg" alineat a baix amb
       l'últim legal. Es respecten tipografies (no es toca font-family). */
    .footer-trias__bottom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;        /* ambdues columnes a la mateixa alçada */
        gap: 16px;
    }

    /* Legals: columna a l'esquerra. Reduïm lleu la mida perquè el copyright no
       trenqui de manera lletja i mantenim un interlineat net. */
    .footer-trias__legal {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 12px;
        font-size: 11px;
        line-height: 1.3;
    }

    .footer-trias__legal .footer-trias__sep {
        display: none;
    }

    /* Xarxes: columna a la dreta, estirada a l'alçada del bloc legal i repartint
       (space-between) perquè els iconos quedin a dalt i "by Neorg" a baix,
       alineat amb l'últim legal — simètric al patró de 480px. */
    .footer-trias__social {
        flex-direction: column;
        align-items: flex-end;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 16px;
    }

    /* Iconos en fila, agrupats i alineats a la dreta */
    .footer-trias__social-list {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
    }

    /* "by Neorg" alineat a la dreta, mateixa família que la resta del footer */
    .footer-trias__credits {
        align-self: flex-end;
    }

    .bit-imatge {
        width: 100% !important;
    }

    .bit-contingut {
        width: 100%; 
    }

    .cronica__img-wrap img {
        width: 100%; 
    }

    .cronica__text {
        padding-right: 0%; 
    }

    #nuestrasGalletas .caja-intermedia img {
        width: 60%;
    }

    #nuestrasGalletas .caja-intermedia {
        margin-top: -440px;
    }

    #nuestrasGalletas .galeta-card__img-wrap, #contingut-subart .galeta-card__img-wrap {
        height: 140px;
    }

    #nuestrasGalletas .galeta-card, #contingut-subart .galeta-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #nuestrasGalletas .galeta-card__titol, #contingut-subart .galeta-card__titol {
        font-size: 20px;
    }

    #nuestrasGalletas .galeta-card__img-wrap, #contingut-subart .galeta-card__img-wrap {
        height: 180px;
    }

    #nuestrasGalletas .listado-galletas img#flor_flotante {
        width: 130px;
        right: -2%;
        top: -70px;
    }

    #nuestrasGalletas .galeta-card__subtitol, #contingut-subart .galeta-card__subtitol {
        font-size: 14px;
    }

    #museu .marc-logo {
        top: -76px;
        width: 140px;
    }

    #museu #img_sobre_text, #museu .img_sobre_text{
        padding: 30px 20px 0px !important; 
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body h2 {
        font-size: 24px; 
    }

    #blogs .blogs-grid-wrap .products-grid-3 article.card-clean .product-card-body p {
        font-size: 14px;
    }

    .newsletter-trias__btn {
        width: 48%;
    }

    #distribuidors .content-distribuidors h1 {
        font-size: 42px;
    }
     
    #distribuidors .content-distribuidors h2 {
        font-size: 18px;
    }

    section#distribuidors .bannerImgTop {
        height: 13vh;
    }

    #distribuidors .distribuidors-form-titol {
        font-size: 20px;
    }

    #distribuidors .distribuidors-form-card {
        max-width: 100%;
        padding: 0 26px 48px;
    }

    #contacte .content-contacte h1 {
        font-size: 66px;
    }

    #contacte .content-contacte p {
        max-width: 260px;
        font-size: 14px;
    }


    #contacte .dada-item {
        width: 100%; 
    }

    #contacte .dadesContacte {
        padding: 25px 10px 25px 10px;
        height: auto;
    }







}

/* Títol "ELS NOSTRES PRODUCTES" de la home en verd */
#productes .section-title {
    color: #2e5d34;
}


/* ═══════════════════════════════════════════════════════════════
   SORTEIG — Landing pelada (PLANTILLES/sorteig.php · item 668)
   Objectiu: clavar la captura. Banda granate dalt + franja blanca
   baix. Títol gran Tiller crema (2 línies). Bodegó color sota títol.
   Filigranes tènues (1a TL, 2a TR, 3a BR). Card crema amb bolitas.
   ═══════════════════════════════════════════════════════════════ */

/* Amaguem topbar marró, header i footer del wrapper global */
body:has(#sorteig-landing) .topbar-marquee,
body:has(#sorteig-landing) .site-header,
body:has(#sorteig-landing) > footer { display: none !important; }

#sorteig-landing {
    --s-granate: #5e0e02;
    --s-vermell: #db001c;
    --s-crema:   #f2e1cc;
    --s-crema-titol: #ecdcc0;

    position: relative;
    height: 100vh;              /* tota la pantalla, SENSE scroll */
    min-height: 640px;          /* mínim raonable en pantalles molt baixes */
    background: #fff;
    overflow: hidden;
    font-family: 'Possible', sans-serif;
}

/* Banda superior granate — deixa una franja blanca a baix.
   Al disseny el tall queda a ~mitja alçada del bodegó de galetes. */
#sorteig-landing .sorteig-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60%;
    background-color: var(--s-granate);
    z-index: 0;
}

/* Logo TRIAS centrat a dalt — més gran i amb aire a dalt/baix */
#sorteig-landing .sorteig-logo {
    position: absolute;
    top: 34px; left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}
#sorteig-landing .sorteig-logo img { width: 172px; height: auto; display: block; }

/* Filigranes decoratives (dibuix a línia, molt tènues sobre granate) */
#sorteig-landing .sorteig-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    height: auto;
    opacity: 0.10;
}
#sorteig-landing .sorteig-deco--tl { top: 18px;   left: 40px;  width: 220px; opacity: 0.14; }
#sorteig-landing .sorteig-deco--tr { top: 60px;   right: 60px; width: 250px; opacity: 0.14; }
#sorteig-landing .sorteig-deco--br { bottom: 40px; right: 30px; width: 340px; opacity: 0.16; }

/* Graella de contingut */
#sorteig-landing .sorteig-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    column-gap: clamp(30px, 5vw, 90px);
    align-items: start;
    max-width: 1720px;
    height: 100%;
    margin: 0 auto;
    padding: clamp(120px, 15vh, 170px) clamp(28px, 3.5vw, 64px) clamp(30px, 5vh, 60px);
    box-sizing: border-box;
}

/* ── Columna esquerra ── */
#sorteig-landing .sorteig-left { padding-top: clamp(30px, 6vh, 70px); }

#sorteig-landing .sorteig-titol {
    font-family: 'Tiller', serif;
    color: var(--s-crema-titol);
    font-size: clamp(52px, 5.2vw, 96px);
    line-height: 1.02;
    letter-spacing: 0.5px;
    margin: 0 0 clamp(14px, 2.4vh, 26px);
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;       /* cada línia (separada per <br>) no es parteix */
}

/* Bodegó de galetes: gran i FLOTANT sobre el tall granate→blanc.
   El z-index alt i el marge negatiu inferior el fan sobresortir cap
   a la franja blanca, tal com al disseny. */
#sorteig-landing .sorteig-bodego {
    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    max-width: min(540px, 35vw);
    max-height: 34vh;
    object-fit: contain;
    object-position: left center;
    height: auto;
    margin: clamp(10px, 2vh, 24px) 0 clamp(20px, 4vh, 42px) -10px;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28));
}

/* Bloc SORTEGEM desplaçat una mica a la dreta, alineat amb el bodegó */
#sorteig-landing .sorteig-premis { margin-left: clamp(20px, 3vw, 56px); }

#sorteig-landing .sorteig-premis-titol {
    font-family: 'Tiller', serif;
    color: var(--s-vermell);
    font-weight: 600;
    font-size: clamp(28px, 2.6vw, 38px);
    letter-spacing: 0.5px;
    margin: 0 0 clamp(10px, 1.6vh, 18px);
    text-transform: uppercase;
}
#sorteig-landing .sorteig-premis-text {
    color: #2b2b2b;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.45;
}
#sorteig-landing .sorteig-premis-text p { margin: 0; }

/* ── Columna dreta: targeta crema — més centrada verticalment (com al disseny) ── */
#sorteig-landing .sorteig-right { padding-top: clamp(95px, 16vh, 200px); }

#sorteig-landing .sorteig-card {
    position: relative;
    background-color: var(--s-crema);
    border-radius: 0 0 26px 26px;
    padding: clamp(30px, 4vh, 46px) clamp(38px, 3.2vw, 62px) clamp(34px, 4.5vh, 52px);
    margin-top: 16px;
    max-width: 760px;
}

/* Bolitas (vora dentada) ancorada al caire superior del card */
#sorteig-landing .sorteig-card-boles {
    position: absolute;
    bottom: 100%;
    left: 0; right: 0;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -1px;
    pointer-events: none;
}

#sorteig-landing .sorteig-card-titol {
    font-family: 'Tiller', serif;
    color: var(--s-granate);
    font-weight: 600;
    font-size: clamp(18px, 1.45vw, 23px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 clamp(22px, 3.5vh, 36px);
    white-space: nowrap;        /* títol en 1 línia com a la captura */
}

#sorteig-landing .sorteig-row {
    display: flex;
    gap: 34px;
    margin-bottom: clamp(20px, 3.2vh, 32px);
}
#sorteig-landing .sorteig-row--3 .sorteig-field--ampla { flex: 1.6; }
#sorteig-landing .sorteig-row--3 .sorteig-field--curta { flex: 0.65; }
#sorteig-landing .sorteig-field { flex: 1; min-width: 0; }

#sorteig-landing .sorteig-field input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #c4b4a2;
    background: transparent;
    color: #3a2a1a;
    font-family: 'Possible', sans-serif;
    font-size: 14px;
    padding: 6px 2px 8px;
    outline: none;
    box-sizing: border-box;
}
#sorteig-landing .sorteig-field input::placeholder { color: var(--s-granate); opacity: 1; }
#sorteig-landing .sorteig-field input:focus { border-bottom-color: var(--s-vermell); }

/* Checkboxes legals + newsletter (en 1 fila si hi caben) */
#sorteig-landing .sorteig-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    margin: 8px 0 28px;
}
#sorteig-landing .sorteig-check {
    display: flex;
    align-items: center;
    gap: 9px;
}
#sorteig-landing .sorteig-check input[type="checkbox"] {
    accent-color: var(--s-vermell);
    width: 14px; height: 14px;
    flex: 0 0 auto;
}
#sorteig-landing .sorteig-check label,
#sorteig-landing .sorteig-check label a {
    color: var(--s-granate);
    font-family: 'Possible', sans-serif;
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
}
#sorteig-landing .sorteig-check label a { text-decoration: none; }

/* Botó ENVIAR */
#sorteig-landing .sorteig-btn {
    background-color: var(--s-vermell);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 42px;
    font-family: 'Possible', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .15s ease;
}
#sorteig-landing .sorteig-btn:hover { filter: brightness(0.9); }

/* ── Responsive ── */
@media (max-width: 1100px) {
    #sorteig-landing .sorteig-card-titol { white-space: normal; }
}
@media (max-width: 992px) {
    #sorteig-landing .sorteig-top { height: 50%; }
    #sorteig-landing .sorteig-grid { grid-template-columns: 1fr; padding-top: 130px; row-gap: 40px; }
    #sorteig-landing .sorteig-titol { max-width: none; }
    #sorteig-landing .sorteig-deco--tr { display: none; }
}
@media (max-width: 600px) {
    #sorteig-landing .sorteig-row { flex-direction: column; gap: 18px; }
    #sorteig-landing .sorteig-titol { font-size: clamp(44px, 13vw, 64px); }
    #sorteig-landing .sorteig-deco--tl,
    #sorteig-landing .sorteig-deco--br { width: 170px; }
    #sorteig-landing .sorteig-grid { padding-left: 24px; padding-right: 24px; }
}