/*
 * El Portal dels Pirineus — Mobile responsive layer (2026)
 * Inspired by the original 2012 aesthetic.
 * Desktop layout untouched; mobile (<768px) gets a faithful, polished mobile experience.
 *
 * Original palette:
 *   #E3AA29 (warm Pyrenean yellow — primary)
 *   #d78b0f (dark orange — hover/focus)
 *   #ebebe5 (warm cream — page background)
 *   #d50748 (raspberry — subtle accent)
 *   #333    (text)
 */

:root {
  --epp-yellow: #E3AA29;
  --epp-yellow-dark: #d78b0f;
  --epp-cream: #ebebe5;
  --epp-cream-soft: #f5f4ee;
  --epp-text: #333;
  --epp-text-soft: #666;
  --epp-text-muted: #999;
  --epp-border: #d8d6c8;
  --epp-accent: #d50748;
  --epp-shadow: 0 2px 6px rgba(80,70,40,.12);
  --epp-shadow-lg: 0 6px 18px rgba(80,70,40,.18);
  --epp-radius: 4px;
  --epp-radius-lg: 8px;
}

/* ===== Sempre — micro-millores no invasives ===== */
img, picture, video, iframe, embed { max-width: 100%; height: auto; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Prevent legacy body#portada { height: 550px; padding-bottom: 45px } */
html, body, body#portada {
  height: auto !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow-x: clip;  /* clip in lloc d'hidden — no genera context d'scroll */
}
/* Last-of-type peu sense margin/padding inferior */
#copy { padding-bottom: 18px !important; }

/* Hamburger button (només es mostra en mòbil) */
.nav-toggle {
  display: none;
  background: transparent; border: 0; padding: 8px;
  width: 44px; height: 44px; cursor: pointer;
  color: #fff;
  align-items: center; justify-content: center;
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  z-index: 110;
  border-radius: var(--epp-radius);
}
.nav-toggle:hover { background: rgba(255,255,255,.18); }
.nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-toggle svg { width: 26px; height: 26px; fill: currentColor; }

.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(40,30,15,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 99;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

/* Footer modern (apareix en totes les mides via JS opcional) */
.modern-footer {
  background: var(--epp-yellow-dark); color: #fff8e8;
  padding: 24px 16px; text-align: center;
  font-size: .9rem; margin-top: 32px;
}
.modern-footer a { color: #fff; }
.modern-footer .footer-bottom { padding-top: 12px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.18); }

/* Focus general */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--epp-yellow-dark);
  outline-offset: 2px;
}

/* Skip link — visually hidden (sr-only standard) but tabbable, prominent on focus */
/* Override aggressively legacy #skip { position:absolute; top:-9000px; left:-9000px } */
#skip {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
}
#skip, #skip li, #skip a, #skip li a {
  position: static !important;
  width: auto !important;
  height: auto !important;
}
#skip li {
  display: block !important;
  background: transparent !important;
  margin: 0 !important; padding: 0 !important;
}
#skip a, #skip li a {
  /* sr-only pattern that's properly tabbable */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: #1f4329 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0;
  line-height: 0;
}
#skip a:focus, #skip a:focus-visible,
#skip li a:focus, #skip li a:focus-visible {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  background: #1f4329 !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  outline: 3px solid #ffd9a8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.45) !important;
  z-index: 10000 !important;
}

/* ===== Header: language link contrast (always) ===== */
/* Legacy header bg = #E3AA29 (groc); cal text fosc per contrast WCAG AA */
#header #idiomes > li > a[name="language"],
#registre #idiomes > li > a[name="language"] {
  color: #1f4329 !important;       /* contrast 12:1 sobre groc */
  background: rgba(255,255,255,.65) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
#header #idiomes ul.dropdown li a, #registre #idiomes ul.dropdown li a {
  color: #1f4329 !important;
}

/* ===== Search button "Buscar" — contrast (always) ===== */
#btBuscar, input#btBuscar, #cercador form #btBuscar {
  background: #1f4329 !important;       /* verd Pirineu fosc */
  background-color: #1f4329 !important;
  background-image: none !important;
  color: #fff !important;                /* contrast 11.4:1 */
  border: 0 !important;
  font-weight: 700;
  text-shadow: none !important;
}
#btBuscar:hover, input#btBuscar:hover, #cercador form #btBuscar:hover {
  background: var(--epp-yellow-dark) !important;
  background-color: var(--epp-yellow-dark) !important;
  color: #fff !important;
}

/* ===== titCategories h2 strong color (always) ===== */
#titCategories h2 strong {
  color: #1f4329 !important;
  font-weight: 700;
}

/* ===== FOOTER ===== ALWAYS (no media query) === */
/* Legacy: #footer { background: #E3AA29 (groc); width: 100% }
   #contentFooter ul { float: left; width: 25% }
   #contentFooter li a { color: #fff }  — 2.6:1 contrast (FAIL)
   Sobreescric a tota mida amb verd Pirineu fosc per contrast WCAG AAA. */
#footer, div#footer {
  width: 100% !important;
  background: #1f4329 !important;
  background-image: none !important;
  padding: 32px 16px 16px !important;
  margin: 32px 0 0 !important;
  box-sizing: border-box;
  color: #fff;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
/* Tot el peu (links + copyright) sense espai entre ells, com a bloc únic */
#footer + #copy { margin-top: 0 !important; }
#contentFooter {
  width: auto !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}
#contentFooter ul {
  float: none !important;
  width: auto !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
#contentFooter ul li {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  list-style: none !important;
  float: none !important;
}
#contentFooter ul li h4 {
  background: none !important;
  background-image: none !important;
  padding: 0 0 8px !important;
  margin: 0 0 8px !important;
  color: #ffd9a8 !important;  /* warm cream — contrast 12:1 on dark green */
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  border-bottom: 2px solid var(--epp-yellow);
  letter-spacing: .5px;
}
#contentFooter ul li {
  margin-bottom: 6px !important;
}
#contentFooter ul li a {
  color: #fff !important;  /* contrast 14:1 on dark green */
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.4);
  font-size: .95rem;
  padding: 14px 12px !important;
  display: inline-block !important;
  min-height: 48px !important;  /* WCAG 2.5.5 touch target */
  min-width: 48px !important;
  line-height: 1.4;
  box-sizing: border-box;
}
#contentFooter ul li a:hover, #contentFooter ul li a:focus {
  color: var(--epp-yellow) !important;
  text-decoration-color: var(--epp-yellow);
}
#contentFooter .banner img, #bannerFlotant img {
  border: 2px solid #fff !important;
  margin: 8px 0;
}

/* Copyright — enganxat al footer (sense gap entre #footer i #copy) */
#copy, div#copy {
  background: #143020 !important;     /* opac, més fosc que #footer */
  background-color: #143020 !important;
  background-image: none !important;
  color: #ffffff !important;          /* contrast 14.5:1 */
  font-size: .88rem !important;
  text-align: center !important;
  padding: 18px 16px !important;
  margin: 0 !important;               /* sense gap superior */
  width: 100% !important;
  max-width: none !important;
  line-height: 1.7;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.25) !important;
  box-sizing: border-box;
  display: block !important;
}
#copy a, div#copy a {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.6);
  padding: 12px 10px !important;
  display: inline-block !important;
  min-height: 48px !important;
  min-width: 48px !important;
  font-weight: 500;
  line-height: 1.4;
  box-sizing: border-box;
}
#copy a:hover, #copy a:focus {
  color: var(--epp-yellow) !important;
  text-decoration-color: var(--epp-yellow);
}

/* ============================ */
/* ===== MÒBIL/TAULETA (≤1023px) ===== */
/* ============================ */
/* El layout legacy és fix a 960px. Tot el que sigui menor necessita el reset
   responsive per no trencar-se. Cobrim mòbils i tauletes (incloent foldables /
   tauletes en portrait, que típicament són 768px-1024px). */
@media (max-width: 1023px) {

  /* ----- BASE ----- */
  body, body#portada {
    min-width: 0 !important; width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden;
    background: var(--epp-cream) !important;
    background-image: none !important;
    color: var(--epp-text);
    font-size: 15px;
    line-height: 1.5;
    padding: 0 !important;
  }
  /* Bloca el background imgFons.jpg que el legacy posa amb !important */
  body#portada { background: var(--epp-cream) !important; background-image: none !important; }

  /* Wrappers fluid */
  #wrapper, #contenidor, #content, #contenidorPortada,
  #wrapperContent, #colEsquerra, #colDreta {
    width: auto !important; min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 12px !important; padding-right: 12px !important;
    margin-left: 0 !important; margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box;
    background-image: none !important;
  }
  #wrapper { background: transparent !important; }

  /* ----- HEADER (groc Pirineu, sticky) ----- */
  #header {
    width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px 8px 56px !important;
    box-sizing: border-box;
    background: var(--epp-yellow) !important;
    background-image: none !important;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 4px rgba(80,60,0,.18);
    color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
  }
  /* Marca a l'esquerra: text sense imatge */
  #header::before {
    content: "El Portal dels Pirineus";
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    letter-spacing: .2px;
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
  }
  #header a { color: #fff; }
  #header a:hover { color: #fff; opacity: .85; }

  /* Hamburger visible */
  .nav-toggle { display: inline-flex; }

  /* ----- IDIOMES ----- */
  /* Legacy té #registre { height: 100px; width: 960px } — sobrescrivim agressivament */
  #registre {
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
    flex: 0 0 auto;
    text-align: right;
  }
  #idiomes {
    list-style: none !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important;
    display: inline-flex;
    float: none !important;
    height: auto !important;
  }
  #idiomes > li {
    background: none !important;
    padding: 0 !important; margin: 0 !important;
    width: auto !important; height: auto !important;
    position: relative;
  }
  #idiomes > li > a[name="language"] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,.22) !important;
    border-radius: 999px;
    font-size: .8rem;
    color: #fff !important;
    text-decoration: none;
  }
  #idiomes > li > a[name="language"]::after {
    content: "▾"; font-size: .65rem; opacity: .8;
  }
  #idiomes ul.dropdown {
    position: absolute; right: 0; top: 100%;
    background: #fff !important;
    list-style: none; padding: 4px; margin: 6px 0 0;
    border-radius: var(--epp-radius);
    box-shadow: var(--epp-shadow-lg);
    min-width: 130px;
    display: none; z-index: 105;
    border: 1px solid var(--epp-border);
  }
  #idiomes:hover ul.dropdown,
  #idiomes:focus-within ul.dropdown { display: block; }
  #idiomes ul.dropdown li {
    background: none !important;
    width: 100% !important; padding: 0 !important; margin: 0 !important;
  }
  #idiomes ul.dropdown li a {
    display: block; padding: 8px 12px;
    color: var(--epp-text) !important;
    font-size: .85rem; border-radius: 3px;
    text-decoration: none;
  }
  #idiomes ul.dropdown li a:hover {
    background: var(--epp-cream) !important;
    color: var(--epp-yellow-dark) !important;
  }
  #idiomes ul.dropdown li.current a {
    background: var(--epp-cream) !important;
    color: var(--epp-yellow-dark) !important;
    font-weight: 600;
  }

  /* ----- MENÚ PRINCIPAL (drawer) ----- */
  #nav_main {
    position: fixed; top: 0; left: -100%; bottom: 0;
    width: 82%; max-width: 320px;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 4px 0 18px rgba(0,0,0,.18);
    margin: 0 !important; padding: 0 !important;
    overflow-y: auto;
    transition: left .25s cubic-bezier(.4,0,.2,1);
    z-index: 100;
    height: auto !important;
    border-right: 1px solid var(--epp-border);
  }
  body.nav-open #nav_main { left: 0; }
  #nav_main::before {
    content: "Menú";
    display: block;
    background: var(--epp-yellow);
    color: #fff; font-weight: 700;
    padding: 16px 20px;
    font-family: 'Muli', sans-serif;
    font-size: 1.05rem;
    letter-spacing: .3px;
    box-shadow: 0 2px 4px rgba(80,60,0,.15);
  }
  #nav_main ul.menu, #nav_main ul.menu_horitzontal {
    list-style: none !important;
    padding: 8px 0 !important; margin: 0 !important;
    background: transparent !important;
    width: auto !important;
    display: flex; flex-direction: column;
  }
  #nav_main ul.menu li, #nav_main ul.menu_horitzontal li {
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    border-bottom: 1px solid var(--epp-cream);
    float: none !important;
  }
  #nav_main ul.menu li:last-child,
  #nav_main ul.menu_horitzontal li:last-child { border-bottom: 0; }
  #nav_main ul.menu li a, #nav_main ul.menu_horitzontal li a {
    display: block !important;
    padding: 13px 20px !important;
    color: var(--epp-text) !important;
    background: transparent !important;
    font-size: .98rem;
    font-family: 'Muli', sans-serif;
    text-decoration: none;
    height: auto !important;
    line-height: 1.3 !important;
    width: auto !important;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
  }
  #nav_main ul.menu li a:hover,
  #nav_main ul.menu_horitzontal li a:hover {
    background: var(--epp-cream-soft) !important;
    color: var(--epp-yellow-dark) !important;
    border-left-color: var(--epp-yellow);
  }
  #nav_main ul.menu li.current a,
  #nav_main ul.menu_horitzontal li.current a {
    background: var(--epp-cream) !important;
    color: var(--epp-yellow-dark) !important;
    font-weight: 600;
    border-left-color: var(--epp-yellow);
  }

  /* ----- PORTADA: HERO ----- */
  /* Amaguem el logotip.png del headbar (#titPortada h1) — duplicat de la marca del header */
  h1#titPortada, #titPortada {
    display: none !important;
  }
  /* PERÒ MOSTREM #cercador h2 com a HERO amb fons de bosc + Redescobreix el Pirineu */

  /* ----- CERCADOR PORTADA ----- */
  /* El #cercador es divideix en: HERO (h2 amb fons del bosc) + FORM (card blanc flotant) */
  #cercador, div#cercador {
    width: auto !important; height: auto !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 -12px 24px !important;  /* full-bleed: surt fora dels 12px del wrapper */
    position: relative !important;
    box-shadow: none !important;
    float: none !important;
    overflow: visible !important;
    clear: both;
    display: block !important;
  }

  /* HERO: el h2 esdevé el bloc visual amb fons del bosc + logo "Redescobreix el Pirineu" */
  #cercador > h2, div#cercador > h2, #cercador h2 {
    display: flex !important;
    visibility: visible !important;
    width: auto !important;
    height: 40vh !important;
    min-height: 220px !important;
    max-height: 360px !important;
    margin: 0 !important;
    padding: 16px !important;
    background-image: url('https://elportaldelspirineus.com/media/comu/imgFons.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #2d5f3f !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-indent: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: 0 !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    color: var(--epp-yellow-dark) !important;
    box-sizing: border-box;
    float: none !important;
  }
  /* Gradient sobre la imatge per llegibilitat */
  #cercador > h2::before, div#cercador > h2::before, #cercador h2::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%) !important;
    z-index: 0 !important;
    display: block !important;
  }
  /* Imatge "Redescobreix el Pirineu" centrada damunt */
  #cercador > h2 img, div#cercador > h2 img, #cercador h2 img {
    display: inline-block !important;
    max-width: 80% !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.55));
  }

  /* FORM: card blanc que "flota" sobre la vora inferior del hero */
  #cercador form, form#cerca, #contenidorPortada #cerca, #contenidorPortada form#cerca {
    width: auto !important;
    margin: -28px 12px 0 !important;  /* puja sobre el hero */
    padding: 14px 12px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--epp-border) !important;
    border-radius: var(--epp-radius-lg) !important;
    box-shadow: var(--epp-shadow-lg) !important;
    position: relative !important;
    z-index: 2 !important;
    float: none !important;
    display: block !important;
    overflow: visible !important;
  }
  #cercador fieldset, form#cerca fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }
  #cercador form span { float: none !important; }
  /* Form#cerca conté: input#text-cerca + div#fonsCatCerca (que té el btBuscar)
     Legacy: #cercador form #text-cerca { width:310px; height:37px } — sobrescrivim */
  #cercador form, form#cerca {
    width: auto !important;
    margin: 0 !important; padding: 0 !important;
    display: block;
  }
  /* text-cerca: buit en el legacy, posem placeholder via CSS i estil consistent */
  #cercador form #text-cerca, #text-cerca, input#text-cerca,
  #portada #cercador form #text-cerca {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--epp-border) !important;
    border-radius: var(--epp-radius) !important;
    font-size: 1rem !important;
    background: #fff !important;
    color: var(--epp-text) !important;
    box-sizing: border-box;
    font-family: inherit;
    margin: 0 0 8px !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -khtml-box-shadow: none !important;
    float: none !important;
    display: block !important;
    position: static !important;
  }
  #fonsCatCerca {
    width: auto !important; height: auto !important;
    background: var(--epp-cream-soft) !important;
    background-image: none !important;
    border-radius: var(--epp-radius);
    padding: 8px !important;
    margin: 0 !important;
    display: block;
    float: none !important;
  }
  #fonsCatCerca label { font-weight: 600; font-size: .85rem; color: var(--epp-text-soft); }
  #fonsCatCerca input[type="text"], #fonsCatCerca select {
    width: 100% !important;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--epp-border);
    border-radius: var(--epp-radius);
    font-size: 1rem;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: 6px;
  }
  #cercador form #btBuscar, input#btBuscar, #btBuscar {
    background: #1f4329 !important;       /* verd Pirineu fosc — contrast 11.4:1 amb blanc */
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px !important;
    border-radius: var(--epp-radius) !important;
    font-weight: 700; cursor: pointer;
    min-height: 46px; height: auto !important;
    width: 100% !important;
    font-size: 1rem;
    text-shadow: none !important;
    transition: background .15s;
    float: none !important;
    margin: 0 !important;
  }
  #cercador form #btBuscar:hover, #btBuscar:hover {
    background: var(--epp-yellow-dark) !important;
    box-shadow: none !important;
  }

  /* Instruccions (3 imatges 01-02-03): ocultes en mòbil */
  #instruccions, div#instruccions, #instruccions * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
  }

  /* ===== CATEGORIES — reset complet del legacy ===== */
  /* Legacy aplica:
     #categories ul { width: 960px; }
     #categories ul li { float: left; width: 125px; min-height: 155px; padding: 10px 11px 8px 9px; margin: 30px 18px 0 0; position: relative; }
     #categories img { position: absolute; top: 36px; border: 1px solid #fff; }
     #categories h3 a { position: absolute; width: 105px; padding: 0 0 140px 22px; display: block; }
     h3#titAllotjament a { background: url('img/titAllotjament.png') no-repeat 0 0 } (sprite que amaga el text)
     ... cal anular-ho tot a mòbil */

  #titCategories, div#titCategories, #categories > #titCategories {
    width: 100% !important;
    background: transparent !important;
    background-image: none !important;
    padding: 16px 0 12px !important;
    margin: 0 0 8px !important;
    text-align: center !important;
    height: auto !important;
    float: none !important;
    display: block !important;
    position: static !important;
    clear: both !important;
    box-sizing: border-box;
  }
  /* Força clear després del títol (per si els floats legacy de cercador o cards interfereixen) */
  #titCategories::after, div#titCategories::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
    height: 0 !important;
    visibility: hidden;
  }
  /* Legacy: #titCategories h2 { float: left; width: 911px; padding: 13px 0 13px 50px;
     background: url('icoTitCategoria.png') no-repeat; text-transform: uppercase; }
     Cal anular tot perquè quedi centrat en mòbil. */
  #titCategories h2, div#titCategories h2 {
    margin: 0 !important;
    color: var(--epp-primary, #2d5f3f) !important;
    color: #1f4329 !important;
    font-size: 1.1rem !important;
    font-family: 'Muli', sans-serif;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    text-indent: 0 !important;
    width: 100% !important;
    height: auto !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    padding: 8px 0 !important;
    float: none !important;
    border: 0 !important;
    border-top: 1px dotted #d8d6c8 !important;
    border-bottom: 1px dotted #d8d6c8 !important;
    display: block !important;
    position: static !important;
    box-sizing: border-box;
    font-weight: 600 !important;
  }
  #titCategories h2 br { display: inline; }
  #titCategories h2 strong {
    font-weight: 700;
    color: #1f4329 !important;  /* contrast 9.5:1 sobre cream */
    margin-left: 4px;
  }
  /* Força que les categories totes siguin un block ordenat */
  #categories { clear: both; }
  #categories, div#categories {
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    background-image: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    box-sizing: border-box;
  }
  /* Clear forçat just abans del UL */
  #categories ul, #categories > ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    background: transparent !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box;
  }
  #categories ul li, #categories > ul > li {
    list-style: none !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--epp-border) !important;
    border-radius: var(--epp-radius-lg) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    overflow: hidden !important;
    box-shadow: var(--epp-shadow);
    position: relative !important;
    display: block !important;
    text-shadow: none !important;
  }
  /* Imatge: legacy és absolute → torna a flux */
  #categories img, #categories ul li img {
    display: block !important;
    width: 100% !important;
    height: 100px !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    border: 0 !important;
    z-index: auto !important;
    float: none !important;
  }
  /* H3 wrapper */
  #categories h3, #categories ul li h3 {
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    position: static !important;
    float: none !important;
    display: block !important;
  }
  /* Anchor: legacy té sprite de fons que oculta el text amb width fixe — eliminem-ho */
  /* Contrast WCAG AA: blanc sobre fons verd Pirineu fosc (≥7:1) */
  #categories h3 a, #categories ul li h3 a,
  h3#titAllotjament a, h3#titAllotjament a:hover,
  h3#titRestaurants a, h3#titRestaurants a:hover,
  h3#titComers a, h3#titComers a:hover,
  h3#titOci a, h3#titOci a:hover,
  h3#titActivitats a, h3#titActivitats a:hover,
  h3#titAltres a, h3#titAltres a:hover {
    color: #fff !important;
    background: #1f4329 !important;
    background-image: none !important;
    background-color: #1f4329 !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 6px !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important; left: auto !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    z-index: auto !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    float: none !important;
    line-height: 1.3 !important;
    box-sizing: border-box;
    text-transform: uppercase;
    letter-spacing: .3px;
    min-height: 48px;  /* touch target a11y */
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Hover: taronja accent */
  #categories h3 a:hover, #categories ul li h3 a:hover,
  h3#titAllotjament a:hover, h3#titRestaurants a:hover,
  h3#titComers a:hover, h3#titOci a:hover,
  h3#titActivitats a:hover, h3#titAltres a:hover {
    background: var(--epp-yellow-dark) !important;
    background-color: var(--epp-yellow-dark) !important;
    color: #fff !important;
  }

  /* Banner backlink decoratiu (té inline style position:absolute) — fora */
  #redescobreixBacklink,
  div#redescobreixBacklink,
  [id="redescobreixBacklink"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* ----- AGENDA / ACTIVITATS CULTURALS ----- */
  #agenda {
    width: auto !important; height: auto !important;
    background: transparent !important;
    padding: 0 !important; margin: 16px 0 !important;
    display: block;
  }
  .divColsPortada {
    width: auto !important;
    float: none !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--epp-border);
    border-radius: var(--epp-radius-lg);
    padding: 12px !important;
    margin: 0 0 14px !important;
    height: auto !important;
    box-shadow: var(--epp-shadow);
  }
  .divTitSlider {
    background: transparent !important;
    background-image: none !important;
    padding: 0 0 8px !important;
    margin: 0 0 8px !important;
    border-bottom: 2px solid var(--epp-yellow);
    width: auto !important; height: auto !important;
  }
  .divTitSlider h2 {
    margin: 0;
    color: var(--epp-yellow-dark);
    font-size: 1.05rem;
    font-family: 'Muli', sans-serif;
  }
  ul#itemsList, ul#itemsListB {
    list-style: none !important;
    padding: 0 !important; margin: 0 !important;
    width: auto !important; height: auto !important;
    background: transparent !important;
  }
  .colAgenda {
    display: flex !important;
    gap: 10px;
    background: var(--epp-cream-soft) !important;
    background-image: none !important;
    border: 1px solid var(--epp-border);
    border-radius: var(--epp-radius);
    padding: 8px !important;
    margin: 0 0 8px !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    list-style: none !important;
  }
  .colAgenda img {
    width: 80px !important; height: 80px !important;
    flex: 0 0 80px;
    object-fit: cover; border-radius: 4px;
    display: block; margin: 0 !important;
  }
  .colAgenda .contentAgenda {
    flex: 1; min-width: 0;
  }
  .colAgenda h3 {
    margin: 0 0 4px;
    font-size: .92rem;
    line-height: 1.2;
    font-family: 'Muli', sans-serif;
  }
  .colAgenda h3 a {
    color: #1f4329 !important;
    text-decoration: none;
  }
  .colAgenda p {
    font-size: .8rem;
    color: var(--epp-text-soft);
    margin: 0; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ----- PÀGINES INTERNES: TÍTOL I FIL D'ARIADNA ----- */
  #titSeccio {
    width: auto !important; height: auto !important;
    padding: 14px 0 10px !important;
    margin: 0 0 14px !important;
    border-bottom: 2px solid var(--epp-yellow);
    background: transparent !important;
  }
  #titSeccio h1 {
    margin: 0 !important;
    background: none !important;
    background-image: none !important;
    text-indent: 0 !important;
    width: auto !important; height: auto !important;
    color: var(--epp-yellow-dark);
    font-size: 1.45rem !important;
    font-family: 'Muli', sans-serif;
    font-weight: 700;
  }
  #titSeccio h1 .hide {
    position: absolute; left: -9999px;
  }
  #filAriadna {
    list-style: none !important;
    padding: 6px 0 0 !important; margin: 0 !important;
    background: transparent !important;
    font-size: .8rem; color: var(--epp-text-muted);
    display: flex; flex-wrap: wrap; gap: 4px;
    width: auto !important; height: auto !important;
  }
  #filAriadna li {
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
    width: auto !important;
    list-style: none !important;
    float: none !important;
  }
  #filAriadna li::after {
    content: "›"; margin: 0 5px; color: var(--epp-text-muted);
  }
  #filAriadna li:last-child::after { content: ""; }
  #filAriadna li a {
    color: var(--epp-text-soft);
    text-decoration: none;
  }
  #filAriadna li a:hover { color: var(--epp-yellow-dark); }

  /* ----- LLISTAT D'ESTABLIMENTS ----- */
  ul.list, ul.list-fitxes, ul.thumblist, ul.menu_normal_b {
    list-style: none !important;
    padding: 0 !important; margin: 12px 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    background: transparent !important;
    width: auto !important; height: auto !important;
  }
  ul.list > li, ul.list-fitxes > li, ul.thumblist > li {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--epp-border);
    border-radius: var(--epp-radius-lg);
    padding: 10px !important;
    margin: 0 !important;
    list-style: none !important;
    float: none !important;
    width: auto !important; height: auto !important;
    box-shadow: var(--epp-shadow);
  }
  ul.list img, ul.list-fitxes img, ul.thumblist img {
    width: 100% !important; height: 180px !important;
    object-fit: cover; display: block;
    border-radius: 4px;
    margin: 0 0 8px !important;
  }
  ul.list h3, ul.list-fitxes h3, ul.thumblist h3 {
    margin: 0 0 4px !important;
    font-size: 1rem;
    color: #1f4329;
  }

  /* ----- CERCA AVANÇADA ----- */
  #btOpen, #btClose {
    display: inline-block;
    padding: 10px 14px;
    background: var(--epp-yellow-dark) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: var(--epp-radius);
    margin: 12px 0 !important;
    width: auto !important; height: auto !important;
    text-indent: 0 !important;
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    border: 0;
  }
  #btOpen .hide, #btClose .hide {
    position: absolute; left: -9999px;
  }
  #btOpen::before { content: "Cerca avançada ▾"; }
  #btClose::before { content: "Tanca cerca avançada ▴"; }

  #cercaAvansada {
    width: auto !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--epp-border);
    border-radius: var(--epp-radius-lg);
    padding: 12px !important;
    margin-top: 8px !important;
    box-shadow: var(--epp-shadow);
  }
  #cercaAvansada .listWrap {
    width: auto !important;
    padding: 0 !important; margin: 0 0 8px !important;
    list-style: none !important;
    background: transparent !important;
  }
  #cercaAvansada .listWrap li {
    width: auto !important;
    padding: 0 !important; margin: 0 0 6px !important;
    background: transparent !important;
    list-style: none !important; float: none !important;
  }

  /* ----- FITXA DE DETALL ----- */
  #topContentSeccions {
    width: auto !important; height: auto !important;
    background: transparent !important;
    background-image: none !important;
    padding: 0 0 12px !important;
    margin: 0 0 14px !important;
    border-bottom: 2px solid var(--epp-yellow);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  #topContentSeccions h2 {
    flex: 1 1 100%;
    margin: 0 !important;
    color: var(--epp-yellow-dark);
    font-size: 1.35rem !important;
    font-family: 'Muli', sans-serif;
    width: auto !important;
  }
  #fonsLoves, #loves {
    display: inline-flex; align-items: center;
    padding: 5px 10px;
    background: var(--epp-yellow) !important;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 700; font-size: .8rem;
    width: auto !important; height: auto !important;
    position: static !important;
    margin: 0 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.15);
  }
  #fonsLoves::before { content: "♥ "; margin-right: 3px; }

  ul.tabs {
    list-style: none !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    display: flex; flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 2px solid var(--epp-border);
    -webkit-overflow-scrolling: touch;
    width: auto !important; height: auto !important;
  }
  ul.tabs::-webkit-scrollbar { display: none; }
  ul.tabs li {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important; margin: 0 !important;
    list-style: none !important; float: none !important;
    width: auto !important; height: auto !important;
    flex-shrink: 0;
  }
  ul.tabs li a {
    display: inline-block !important;
    padding: 10px 14px !important;
    white-space: nowrap;
    color: var(--epp-text-soft) !important;
    background: transparent !important;
    background-image: none !important;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    height: auto !important;
    text-indent: 0 !important;
    text-decoration: none;
    font-weight: 500;
  }
  ul.tabs li.active a, ul.tabs li:hover a {
    color: var(--epp-yellow-dark) !important;
    border-bottom-color: var(--epp-yellow);
  }

  .tab_container, .tab_content, #primer {
    width: auto !important; height: auto !important;
    padding: 12px 0 0 !important;
    background: transparent !important;
  }
  #row1 {
    display: block !important;
    width: auto !important; height: auto !important;
    background: transparent !important;
    padding: 0 !important;
  }

  #descripcioEstabliment, .contingut {
    width: auto !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--epp-border);
    border-radius: var(--epp-radius);
    padding: 12px !important;
    margin: 0 0 12px !important;
    box-sizing: border-box;
    box-shadow: var(--epp-shadow);
  }
  .contingut h3, .contingut h3.dadesInteres {
    color: var(--epp-yellow-dark);
    border-bottom: 1px solid var(--epp-border);
    padding-bottom: 6px; margin-top: 0;
    font-size: 1rem;
    font-family: 'Muli', sans-serif;
  }
  .contingut ul {
    list-style: none !important;
    padding: 0 !important;
  }
  .contingut ul li {
    background: transparent !important;
    padding: 7px 0 7px 22px !important;
    margin: 0 !important;
    position: relative;
    border-bottom: 1px solid var(--epp-cream);
    width: auto !important;
    list-style: none !important;
  }
  .contingut ul li:last-child { border-bottom: 0; }
  .contingut ul li::before {
    content: "✓"; position: absolute; left: 0; top: 7px;
    color: var(--epp-yellow); font-weight: 700; font-size: .9rem;
  }

  /* ----- FORMULARIS GENERALS ----- */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="url"], textarea, select {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--epp-border);
    border-radius: var(--epp-radius);
    background: #fff;
    color: var(--epp-text);
    font-size: 1rem;
    font-family: inherit;
  }
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--epp-yellow);
    box-shadow: 0 0 0 3px rgba(227,170,41,.18);
  }
  button, input[type="submit"], input[type="button"] {
    min-height: 44px;
    cursor: pointer;
    font-family: inherit;
  }

  /* Footer ja definit globalment fora del media query.
     Aquí només posem que en mòbil les columnes apilen en una sola */
  #contentFooter {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 !important;
  }
  /* #copy ja definit fora — només ajust mòbil */
  #copy, div#copy { font-size: .82rem !important; padding: 14px 12px !important; }

  /* ----- DECORACIONS ABSOLUTES PROBLEMÀTIQUES ----- */
  [style*="position: absolute"][style*="right: 0"][style*="width: 250px"] {
    display: none !important;
  }

  /* Tabs / dropdowns que es trenquen */
  ul.dropdown { z-index: 105; }

  /* Twitter/Facebook social buttons mòbil — petits */
  #twitter-button, .fb-like {
    margin: 4px !important;
    transform: scale(.9);
    transform-origin: left top;
  }
}

/* Print */
@media print {
  #header, #nav_main, .modern-footer, #cercador { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}