/*
Theme Name: Més Que So
Theme URI: https://mesqueso.tech
Author: Eva Hilla Studio
Author URI: https://mesqueso.tech
Description: Tema a mida per a Més Que So — Tot per a l'esdeveniment. Producció tècnica, lloguer d'equips audiovisuals i assessorament d'esdeveniments. Optimitzat per a velocitat (sense jQuery al frontend, sense fonts externes, imatges amb càrrega diferida) i compatible amb l'editor de blocs i Elementor.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: mesqueso
Tags: block-styles, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --ink:#0a0a0f;
  --ink-soft:#131319;
  --paper:#0a0a0f;
  --paper-dim:#15151c;
  --brand:#9f1f83;
  --amber:#ff8a3d;
  --muted:#8b889a;
  --line:rgba(255,255,255,0.12);
  --line-dark:rgba(255,255,255,0.14);
  --radius:22px;
  --maxw:1180px;
  --body-text:#f5f3ee;
  --lead-text:#c9c7d1;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--ink); overflow-x:hidden; max-width:100%;}
#wpadminbar{max-width:100vw;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--body-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:inherit;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.08;
  margin:0 0 .5em;
}
p{margin:0 0 1em; line-height:1.65;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; height:auto;}
ul{list-style:none; margin:0; padding:0;}
.eyebrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand);
}
.hero .eyebrow{color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.5);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:600px){ .wrap{padding:0 20px;} }
.screen-reader-text{position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px;}

/* ---------- equalizer signature ---------- */
.eq{display:flex; align-items:flex-end; gap:4px; height:28px;}
.eq span{width:3px; background:currentColor; border-radius:2px; animation:eqbeat 1.1s ease-in-out infinite;}
.eq span:nth-child(1){height:40%; animation-delay:0s;}
.eq span:nth-child(2){height:100%; animation-delay:.12s;}
.eq span:nth-child(3){height:65%; animation-delay:.24s;}
.eq span:nth-child(4){height:85%; animation-delay:.36s;}
.eq span:nth-child(5){height:50%; animation-delay:.48s;}
@keyframes eqbeat{0%,100%{transform:scaleY(.4);} 50%{transform:scaleY(1);}}
@media (prefers-reduced-motion: reduce){ .eq span{animation:none; height:70% !important;} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:14px; white-space:nowrap; border:none; cursor:pointer;}
.btn-light{background:#fff; color:var(--ink);}
.btn-brand{background:var(--brand); color:#fff;}
.btn-dark{background:var(--paper-dim); color:#fff; border:1px solid var(--line);}
.btn .arrow{width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; font-size:13px;}
.btn-brand .arrow, .btn-dark .arrow{background:rgba(255,255,255,.18);}

/* ---------- announcement bar ---------- */
.announce{display:block; background:var(--brand); color:#fff; text-align:center; font-family:ui-monospace,monospace; font-size:13px; padding:10px 16px; text-decoration:underline; transition:background .2s ease;}
.announce:hover{background:#851a6f;}

/* ---------- header ---------- */
.site-header{background:var(--ink); color:#fff; padding:18px 0; z-index:50; border-bottom:1px solid var(--line);}
.site-header .wrap{display:flex; align-items:center; justify-content:flex-start; gap:56px;}
.site-logo{flex-shrink:0;}
.site-logo img{height:38px; width:auto; max-width:none;}
.main-nav{display:flex; align-items:center; gap:22px; flex:1;}
.main-nav .btn{margin-left:auto;}
.main-nav ul{display:flex; align-items:center; gap:20px; font-size:13.5px; color:#cfcdd6;}
.main-nav ul li{position:relative;}
.main-nav ul a{position:relative; display:inline-block; white-space:nowrap; padding:6px 0; color:inherit; transition:color .2s ease;}
.main-nav ul a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--brand); transition:right .25s ease;}
.main-nav ul a:hover, .main-nav ul .current-menu-item a{color:#fff;}
.main-nav ul a:hover::after, .main-nav ul .current-menu-item a::after{right:0;}
.nav-caret{font-size:10px; margin-left:2px; opacity:.7; transition:transform .2s ease;}
.menu-item-has-children:hover .nav-caret{transform:rotate(180deg);}

/* dropdown (desktop) */
.main-nav .sub-menu{position:absolute; top:100%; left:0; margin-top:14px; background:var(--paper-dim); border:1px solid var(--line-dark); border-radius:12px; padding:10px; min-width:210px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:60; box-shadow:0 16px 32px rgba(0,0,0,.35);}
.main-nav li.menu-item-has-children:hover > .sub-menu,
.main-nav li.menu-item-has-children:focus-within > .sub-menu,
.main-nav li.menu-item-has-children.is-open > .sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
.main-nav .sub-menu a{white-space:nowrap; padding:10px 12px; border-radius:8px; width:100%;}
.main-nav .sub-menu a::after{display:none;}
.main-nav .sub-menu a:hover{background:rgba(255,255,255,.07); color:#fff;}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}
@media (max-width:960px){
  /* The open overlay covers the header row, so the toggle would otherwise sit
     underneath it. When open, float it as its own close button, fixed to the
     corner, always above the overlay regardless of scroll position. */
  .main-nav.is-open .menu-toggle{position:fixed; top:16px; right:20px; z-index:999; width:44px; height:44px; background:var(--paper-dim); border:1px solid var(--line-dark); border-radius:50%; font-size:20px; display:flex; align-items:center; justify-content:center;}
}
@media (max-width:960px){
  .main-nav ul{position:fixed; inset:64px 0 0 0; background:var(--ink); flex-direction:column; align-items:flex-start; overflow-y:auto; padding:32px; gap:20px; font-size:18px; transform:translateY(-110%); transition:transform .25s ease; z-index:40;}
  .main-nav.is-open ul{transform:translateY(0);}
  .menu-toggle{display:block;}

  /* on mobile the dropdown is just a nested, always-visible list — no hover needed */
  .main-nav .sub-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:none; border:none; margin:8px 0 0 16px; padding:0; gap:14px;}
  .main-nav li.menu-item-has-children > a{pointer-events:none;} /* parent "Serveis" isn't a real page, avoid a dead tap target */
  .main-nav .sub-menu a{padding:0; font-size:16px; color:#cfcdd6;}
}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:#fff; position:relative; padding:100px 0 84px; overflow:hidden; isolation:isolate;}
.hero-photo{position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; filter:saturate(1.05);}
.hero::before{content:""; position:absolute; inset:0; background:
    linear-gradient(180deg, rgba(5,5,8,.15) 0%, rgba(5,5,8,.4) 55%, rgba(5,5,8,.75) 100%),
    radial-gradient(60% 50% at 15% 0%, rgba(159,31,131,.25), transparent 60%),
    radial-gradient(50% 45% at 100% 20%, rgba(255,138,61,.16), transparent 60%);
  pointer-events:none; z-index:0;}
/* no background photo uploaded yet: keep the darker fallback treatment so the
   decorative parallax layers (beams/skyline) stay legible against plain paper */
.hero:not(:has(.hero-photo))::before{background:
    linear-gradient(180deg, rgba(5,5,8,.5) 0%, rgba(5,5,8,.72) 55%, rgba(5,5,8,.92) 100%),
    radial-gradient(60% 50% at 15% 0%, rgba(159,31,131,.35), transparent 60%),
    radial-gradient(50% 45% at 100% 20%, rgba(255,138,61,.22), transparent 60%);}

/* parallax layers: light beams (stage) -> crowd silhouette -> mixing desk (foreground) */
.parallax-layer{position:absolute; left:0; right:0; pointer-events:none; will-change:transform;}

.layer-beams{top:-20%; height:140%; z-index:1;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,.06) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(112deg, rgba(159,31,131,.16) 0 3px, transparent 3px 150px),
    repeating-linear-gradient(68deg, rgba(255,138,61,.08) 0 2px, transparent 2px 170px);
  mix-blend-mode:screen;
}

/* moved from inside the hero to a standalone divider between the carousel and
   section 01 (see .section-divider-jagged below) */

/* ---------- interactive mixing console (own section, above the footer) ---------- */
.mixer-section{background:#050507; border-top:1px solid var(--line); padding:8px 0 0; position:relative; overflow:hidden;}
.mixer-section::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 0%, rgba(159,31,131,.14), transparent 65%); pointer-events:none;}
.mixer-status{position:relative; height:34px; margin-top:22px;}
.mixer-hint,.mixer-message,.mixer-logo{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0;}
.mixer-hint{text-align:center; font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); opacity:1; transition:opacity .6s ease;}
.mixer-message{text-align:center; font-weight:600; font-size:14px; color:var(--brand); opacity:0; transform:translateY(4px); transition:opacity .6s ease, transform .6s ease;}
.mixer-message.is-visible{opacity:1; transform:translateY(0);}
.mixer-logo{opacity:0; transform:translateY(4px) scale(.94); transition:opacity .7s ease, transform .7s ease;}
.mixer-logo.is-visible{opacity:1; transform:translateY(0) scale(1);}
.mixer-logo img{height:30px; width:auto; filter:drop-shadow(0 0 12px rgba(159,31,131,.7));}
.mixer-cta{max-width:420px; margin:0 auto; text-align:center; max-height:0; opacity:0; overflow:hidden; transition:max-height .7s ease, opacity .5s ease .1s, margin-top .7s ease;}
.mixer-cta.is-visible{max-height:220px; opacity:1; margin-top:20px;}
.mixer-cta p{font-size:13px; color:#cfcdd6; margin-bottom:16px; line-height:1.55;}
.mixer-cta .btn{font-size:13px; padding:12px 20px;}

.lead-magnet-booking{margin-top:18px; padding-top:18px; border-top:1px dashed rgba(255,255,255,.18);}
.lead-magnet-booking p{font-size:13px; color:#cfcdd6; margin-bottom:10px;}

.booking-banner{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; background:var(--paper-dim); border:1px solid var(--line-dark); border-radius:var(--radius); padding:32px 40px;}
.booking-banner h3{font-size:22px; margin-bottom:8px;}
.booking-banner p{color:var(--lead-text); max-width:480px; margin:0;}
.booking-banner .eyebrow{margin-bottom:6px;}
.btn-group{display:flex; gap:14px; flex-wrap:wrap;}
@media (max-width:700px){ .booking-banner{flex-direction:column; align-items:flex-start; padding:28px;} }
.mixer-panel-wide{position:relative; width:100%; max-width:760px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:nowrap; padding:22px 6vw 40px; perspective:1100px;}
.mixer-strip{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; transform:rotateX(20deg); transform-origin:bottom center; transition:transform .2s ease;}
.mixer-track{position:relative; width:7px; height:160px; border-radius:4px; background:linear-gradient(180deg,#1d1d24,#050507); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.mixer-fill{position:absolute; left:0; right:0; bottom:0; border-radius:4px; background:linear-gradient(180deg,var(--amber),var(--brand)); opacity:.6; pointer-events:none; transition:background .3s ease;}
.mixer-handle{position:absolute; left:50%; bottom:0%; width:30px; height:16px; border-radius:5px; background:linear-gradient(180deg,#f5f3ee,#c7c5cf); box-shadow:0 3px 7px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.8); transform:translate(-50%,50%); cursor:grab; touch-action:none;}
.mixer-handle:active{cursor:grabbing;}
.mixer-handle::before{content:""; position:absolute; left:6px; right:6px; top:5px; height:1px; background:rgba(0,0,0,.25); box-shadow:0 3px 0 rgba(0,0,0,.2), 0 6px 0 rgba(0,0,0,.2);}
.mixer-led{width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 7px var(--brand); opacity:.85; transition:transform .2s ease, box-shadow .2s ease;}
.mixer-section.is-maxed{animation:mixer-flash .9s ease;}
.mixer-section.is-maxed .mixer-led{animation:mixer-led-pulse .6s ease infinite; box-shadow:0 0 16px 5px var(--brand);}
.mixer-section.is-maxed .mixer-handle{transition:bottom .9s ease;}
.mixer-section.is-maxed .mixer-fill{background:linear-gradient(180deg,#ffd27a,var(--brand)); transition:height .9s ease, background .4s ease;}
.mixer-section.is-maxed .mixer-hint{opacity:0;}
@keyframes mixer-flash{ 0%{background-color:#050507;} 25%{background-color:#2a0e22;} 100%{background-color:#050507;} }
@keyframes mixer-led-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.8);} }
@media (max-width:860px){ .mixer-panel-wide{padding:20px 6vw 34px; gap:10px;} .mixer-track{height:110px;} .mixer-handle{width:26px;} }

.hero .wrap{position:relative; z-index:5;}
@media (max-width:640px){ .layer-crowd{height:150px;} }
@media (prefers-reduced-motion: reduce){ .parallax-layer{transform:none !important;} }

.hero h1{font-size:clamp(34px,6vw,64px); max-width:760px; margin-bottom:20px;}
.hero h1 em{font-style:normal; color:var(--brand);}
.hero p.lead{font-size:18px; color:#c9c7d1; max-width:520px; margin-bottom:32px;}
.hero-cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:40px;}
.avatars{display:flex; align-items:center; gap:12px; font-size:14px; color:#c9c7d1;}
.avatars .dots{display:flex;}
.avatars .dots span{width:32px; height:32px; border-radius:50%; border:2px solid var(--ink); background:linear-gradient(140deg,var(--brand),var(--amber)); margin-left:-10px;}
.avatars .dots span.has-photo{background:none; overflow:hidden;}
.avatars .dots span.has-photo img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.avatars .dots span:first-child{margin-left:0;}
.avatars strong{color:#fff;}
.service-tags{display:flex; gap:28px; flex-wrap:wrap; font-size:14px; color:#dedce4;}
.service-tags li{display:flex; align-items:center;}
.service-tags a{display:flex; align-items:center; gap:8px; color:inherit; transition:color .2s ease;}
.service-tags a:hover{color:#fff;}
.service-tags .dot{color:var(--amber); font-size:15px;}

/* ---------- trust strip / logo marquee ---------- */
.trust{background:var(--ink-soft); color:#fff; padding:30px 0; border-bottom:1px solid var(--line); overflow:hidden; position:relative;}
.trust::before, .trust::after{content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;}
.trust::before{left:0; background:linear-gradient(90deg, var(--ink-soft), transparent);}
.trust::after{right:0; background:linear-gradient(270deg, var(--ink-soft), transparent);}
.trust-track{display:flex; width:max-content; animation:trust-scroll 28s linear infinite;}
.trust:hover .trust-track{animation-play-state:paused;}
.trust-set{display:flex; align-items:center; gap:56px; padding-right:56px; flex-shrink:0;}
.trust .label{font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
.trust .brand{font-weight:700; font-size:16px; color:#e6e4ea; opacity:.6; white-space:nowrap;}
/* Els logos ja són blancs sobre transparènt: aplicar-hi brightness()
   els sobreexposa i els menja el detall intern. Només opacitat. */
.trust-logo{display:flex; align-items:center; justify-content:center; opacity:.62; flex-shrink:0; transition:opacity .25s ease;}
.trust-logo:hover{opacity:1;}
/* El lienzo dels logos ja esta normalitzat (320x100 amb el logo centrat i
   escalat per area visual), de manera que aqui nomes cal fixar l'amplada:
   forcar l'alcada tornaria a desequilibrar-los. */
/* Tots els logos tenen la mateixa alcada real (68px) i l'amplada justa
   del seu contingut, de manera que el gap del contenidor dona un espaiat
   uniforme. Fixar amplada aqui tornaria a descompensar-los. */
.trust-logo img{height:30px; width:auto; display:block;}
@media (max-width:560px){ .trust-logo img{height:24px;} }
@keyframes trust-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .trust-track{animation:none;} .trust-set[aria-hidden="true"]{display:none;} }

/* ---------- generic section shell ---------- */
.block{padding:88px 0; background:var(--paper);}
.block.alt{background:var(--paper-dim);}
.block-title{font-size:clamp(28px,4vw,42px); margin-bottom:16px;}
.block-lead{font-size:17px; color:var(--lead-text); max-width:460px; margin-bottom:26px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.map-embed{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3.2; border:1px solid var(--line-dark);}
.grid-2-stretch{align-items:stretch;}
.grid-2-stretch .panel{aspect-ratio:auto; min-height:280px;}
@media (max-width:860px){ .grid-2{grid-template-columns:1fr; gap:36px;} }

.panel{background:var(--paper-dim); color:#fff; border-radius:var(--radius); padding:52px; aspect-ratio:4/3.1; position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;}
.panel::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(100deg, rgba(159,31,131,.18) 0 2px, transparent 2px 46px), radial-gradient(70% 60% at 80% 10%, rgba(255,138,61,.25), transparent 60%);}
.panel .panel-eq{position:relative; display:flex; gap:6px; align-items:flex-end; height:56px; margin-bottom:16px;}
.panel-eq span{width:6px; background:linear-gradient(180deg,var(--amber),var(--brand)); border-radius:3px; animation:eqbeat 1.3s ease-in-out infinite; transform-origin:bottom;}
.panel .tagline{position:relative; font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#cfcdd6;}
.panel-photo{background-size:cover; background-position:center;}
.panel-photo::before{background:linear-gradient(180deg, rgba(10,9,13,0) 40%, rgba(10,9,13,.88) 100%);}
.panel-photo .tagline{color:#fff;}

.badge{display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff; font-size:13px; font-weight:600; padding:10px 18px; border-radius:999px; position:relative; margin-top:16px; align-self:flex-start; border:none; cursor:pointer; font-family:inherit;}

ul.feature-list{display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; margin-bottom:30px;}
ul.feature-list li{display:flex; align-items:center; gap:10px; font-size:15px;}
ul.feature-list .dot{color:var(--amber);}
.feature-list a{display:flex; align-items:center; gap:10px; color:inherit; transition:color .2s ease;}
.feature-list a:hover{color:var(--brand);}

.advise{display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:center;}
@media (max-width:860px){ .advise{grid-template-columns:1fr;} }
.advise .card{background:var(--paper-dim); color:#fff; border-radius:var(--radius); padding:48px; position:relative; overflow:hidden;}
.advise .card::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 90% 100%, rgba(159,31,131,.35), transparent 60%);}
.advise .card h3{position:relative; font-size:clamp(24px,3vw,32px); margin-bottom:24px;}
.advise .icon{width:50px; height:50px; border-radius:12px; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--brand);}

/* ---------- contact block (used on home + template-contacte) ---------- */
#contacte.block{background:linear-gradient(155deg, var(--brand) 0%, var(--amber) 100%);}
.contact-card{background:var(--paper-dim); color:#fff; border-radius:var(--radius); padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; position:relative; overflow:hidden;}
.contact-card::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 0% 100%, rgba(255,138,61,.22), transparent 60%);}
.contact-card > *{position:relative;}
@media (max-width:860px){ .contact-card{grid-template-columns:1fr; padding:36px;} }
.cform{display:flex; flex-direction:column; gap:14px;}
.cform label{font-size:13px; color:#c9c7d1;}
.cform input, .cform textarea, .cform select{width:100%; padding:15px 18px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:#fff; font-family:inherit; font-size:14px;}
.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"]{border-radius:999px;}
.cform textarea{min-height:120px; resize:vertical;}
.cform ::placeholder{color:#8b889a;}
.cform button{margin-top:4px;}
.cform .hp{position:absolute; left:-9999px;}
.form-notice{padding:14px 18px; border-radius:14px; font-size:14px; margin-bottom:18px;}
.form-notice.ok{background:rgba(90,200,120,.15); color:#8fe3ab; border:1px solid rgba(90,200,120,.3);}
.form-notice.err{background:rgba(230,60,60,.15); color:#ff9d9d; border:1px solid rgba(230,60,60,.3);}

/* ---------- gallery ---------- */
.gallery-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.gallery-filter button{padding:9px 18px; border-radius:999px; border:1px solid var(--line-dark); background:transparent; font-size:13px; font-weight:600; cursor:pointer;}
.gallery-filter button.is-active{background:var(--ink); color:#fff; border-color:var(--ink);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:860px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .gallery-grid{grid-template-columns:1fr;} }
.gallery-item{position:relative; border-radius:16px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/3; background:var(--paper-dim);}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item .cap{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(0deg, rgba(10,10,15,.85), transparent); color:#fff; font-size:13px; opacity:0; transition:opacity .25s ease;}
.gallery-item:hover .cap{opacity:1;}
.lightbox{position:fixed; inset:0; background:rgba(10,10,15,.92); display:none; align-items:center; justify-content:center; z-index:200; padding:32px;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:min(90vw,1000px); max-height:85vh; border-radius:12px;}
.lightbox .close{position:absolute; top:24px; right:28px; color:#fff; font-size:32px; background:none; border:none; cursor:pointer;}
.lightbox .nav-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:none; color:#fff; width:48px; height:48px; border-radius:50%; font-size:20px; cursor:pointer;}
.lightbox .prev{left:24px;} .lightbox .next{right:24px;}

/* ---------- blog ---------- */
.post-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px;}
@media (max-width:760px){ .post-grid{grid-template-columns:1fr;} }
.post-card{border-radius:18px; overflow:hidden; background:var(--paper-dim); border:1px solid var(--line-dark);}
.post-card .thumb{aspect-ratio:16/10; overflow:hidden; background:var(--paper-dim);}
.post-card .thumb img{width:100%; height:100%; object-fit:cover;}
.post-card .body{padding:24px;}
.post-card .meta{font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:8px;}
.post-card h3{font-size:20px; margin-bottom:8px;}
.post-card p{color:#c9c7d1; font-size:14px;}
.pagination{display:flex; gap:10px; justify-content:center; margin-top:48px;}
.pagination a, .pagination span{padding:10px 16px; border-radius:10px; border:1px solid var(--line-dark); font-size:14px;}
.single-post-content{max-width:760px; margin:0 auto;}
.single-post-content h1{font-size:clamp(28px,4vw,44px);}
.single-post-content img{border-radius:16px; margin:24px 0;}

/* ---------- footer ---------- */
.site-footer{padding:44px 0 22px; color:#f5f3ee; background:var(--ink);}
.foot-top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:32px; margin-bottom:24px; align-items:start;}
@media (max-width:900px){ .foot-top{grid-template-columns:1fr 1fr 1fr; gap:26px;} .foot-brand{grid-column:1 / -1; margin-bottom:4px;} }
@media (max-width:560px){ .foot-top{grid-template-columns:1fr 1fr; gap:22px;} }
.foot-brand p{color:#9a97a6; font-size:14px; max-width:320px; margin-top:14px;}
.site-footer h5{font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#a7a4b0; margin-bottom:14px;}
.site-footer ul{display:flex; flex-direction:column; gap:9px; font-size:14px; color:#cfcdd6;}
.foot-bottom{border-top:1px solid var(--line-dark); padding-top:22px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; font-size:13px; color:#8b889a;}
.foot-legal{display:flex; gap:18px; flex-wrap:wrap;}
.foot-legal a{color:#8b889a; transition:color .2s ease;}
.foot-legal a:hover{color:#fff;}
.foot-credit{text-align:center; margin-top:22px; font-size:12px; color:#6f6c78;}
.foot-credit a{color:#a9a6b2; transition:color .2s ease;}
.foot-credit a:hover{color:#fff;}

/* ---------- social icons ---------- */
.social-icons{display:flex; align-items:center; gap:12px; margin-top:14px;}
.social-icons a{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-dark); color:#f5f3ee; transition:background .2s ease, color .2s ease, transform .2s ease;}
.social-icons a:hover{background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-2px);}
.site-header .social-icons a{border-color:var(--line); color:#fff;}
.site-header .social-icons a:hover{background:var(--brand); border-color:var(--brand);}
.site-header .social-icons{margin-left:4px; gap:8px;}
.site-header .social-icons a{width:32px; height:32px;}
.site-header .btn{padding:11px 18px; font-size:13.5px;}
@media (max-width:960px){ .site-header .social-icons{display:none;} }

/* ---------- floating WhatsApp button ---------- */
.whatsapp-float{position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .2s ease;}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:26px; height:26px;}

/* ---------- image carousel ---------- */
.carousel-section{padding:88px 0 96px; background:var(--paper);}
/* Malla d'altaveu — textura pròpia d'aquesta secció perquè es distingeixi
   clarament de la secció de tipus d'esdeveniment que té just a sobre. */
.testimonial-section{
  background-color:var(--paper-dim);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.09) 1.3px, transparent 1.8px),
    linear-gradient(180deg, rgba(10,10,15,.55) 0%, transparent 22%, transparent 78%, rgba(10,10,15,.55) 100%);
  background-size:13px 13px, 100% 100%;
  background-position:0 0, 0 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.carousel-section:not(.testimonial-section){position:relative; overflow:hidden;}
.carousel-section:not(.testimonial-section)::before{content:""; position:absolute; inset:0; background:
    repeating-linear-gradient(115deg, rgba(159,31,131,.3) 0 2px, transparent 2px 44px),
    radial-gradient(60% 65% at 8% 0%, rgba(159,31,131,.5), transparent 68%),
    radial-gradient(50% 60% at 100% 100%, rgba(255,138,61,.38), transparent 68%);
  pointer-events:none;}
.carousel-section:not(.testimonial-section) > *{position:relative;}
.carousel-heading{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; flex-wrap:wrap;}
.carousel-controls{display:flex; gap:10px;}
.carousel-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line-dark); background:var(--paper-dim); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease;}
.carousel-btn:hover{background:var(--brand); color:#fff; border-color:var(--brand);}
.carousel-track{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 32px 12px; scrollbar-width:none; -ms-overflow-style:none;}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-slide{flex:0 0 auto; width:78vw; max-width:420px; aspect-ratio:4/3; border-radius:20px; overflow:hidden; scroll-snap-align:center; background:var(--paper-dim);}
.carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.carousel-slide > a{display:block; width:100%; height:100%;}
@media (min-width:900px){ .carousel-slide{width:360px;} }
.carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:22px;}
.carousel-dot{width:8px; height:8px; border-radius:50%; border:none; background:var(--line-dark); cursor:pointer; padding:0; transition:background .2s ease, transform .2s ease;}
.carousel-dot.is-active{background:var(--brand); transform:scale(1.3);}

/* ---------- end-of-page CTA banner ---------- */
.page-cta{background:var(--paper-dim); border-radius:var(--radius); padding:64px 40px; text-align:center; position:relative; overflow:hidden;}
.page-cta::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 90% at 50% 0%, rgba(159,31,131,.35), transparent 65%);}
.page-cta > *{position:relative;}
.page-cta-eq{display:flex; justify-content:center; gap:6px; align-items:flex-end; height:44px; margin-bottom:20px;}
.page-cta-eq span{width:6px; background:linear-gradient(180deg,var(--amber),var(--brand)); border-radius:3px; animation:eqbeat 1.3s ease-in-out infinite; transform-origin:bottom;}
.page-cta-eq span:nth-child(2n){animation-delay:.15s;}
.page-cta-eq span:nth-child(3n){animation-delay:.3s;}
.page-cta h2{font-size:clamp(26px,4vw,38px); margin-bottom:14px;}
.page-cta p{color:#c9c7d1; max-width:520px; margin:0 auto 26px;}

/* ---------- numbered process steps (service pages) ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px;}
.step{padding:32px 26px; border-radius:18px; background:var(--paper-dim); border:1px solid var(--line-dark);}
.step .num{font-family:ui-monospace,monospace; font-size:13px; color:var(--brand); margin-bottom:14px;}
.step h4{font-size:18px; margin-bottom:8px;}
.step p{color:#c9c7d1; font-size:14px; margin:0;}

/* ---------- audience / use-case badges ---------- */
.use-cases{display:flex; flex-wrap:wrap; gap:12px;}
.use-cases span{padding:10px 18px; border-radius:999px; border:1px solid var(--line-dark); font-size:14px; color:#dedce4;}

/* ---------- connected process timeline ---------- */
.timeline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:8px;}
.timeline::before{content:""; position:absolute; top:19px; left:6%; right:6%; height:2px; background:var(--line-dark); z-index:0;}
.timeline-item{position:relative; z-index:1; padding:0 18px; text-align:center;}
.timeline-item .num{width:40px; height:40px; border-radius:50%; background:var(--paper-dim); border:2px solid var(--brand); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:ui-monospace,monospace; font-size:14px; color:#fff;}
.timeline-item h4{font-size:16px; margin-bottom:8px;}
.timeline-item p{font-size:13px; color:#c9c7d1; margin:0;}
@media (max-width:760px){
	.timeline{grid-template-columns:1fr; gap:28px;}
	.timeline::before{left:19px; right:auto; top:0; bottom:0; width:2px; height:auto;}
	.timeline-item{text-align:left; padding-left:56px;}
	.timeline-item .num{position:absolute; left:0; top:0; margin:0;}
}

/* ---------- page photo (Customizer-driven, with graceful fallback) ---------- */
.page-photo{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3.4;}
.page-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- testimonials / Google reviews carousel ---------- */
.testimonial-section .carousel-heading{align-items:center;}
.testimonial-section .carousel-controls{gap:16px; align-items:center;}
.google-badge{display:flex; align-items:center; gap:10px; font-size:14px; color:#c9c7d1; white-space:nowrap;}
.google-badge .stars{color:var(--amber); letter-spacing:2px;}
.google-badge strong{color:#fff; font-size:16px;}
.testimonial-track{padding:0 32px 12px; justify-content:center; justify-content:safe center;}
.testimonial-card{flex:0 0 auto; width:min(78vw,420px); scroll-snap-align:center; background:var(--ink); border:1px solid var(--line-dark); border-radius:18px; padding:28px; display:flex; flex-direction:column;}
.testimonial-top{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.avatar-initials{flex-shrink:0; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:ui-monospace,monospace; font-weight:600; font-size:14px; color:#fff; background:linear-gradient(140deg,var(--brand),var(--amber));}
.testimonial-card .stars{color:var(--amber); letter-spacing:2px; font-size:13px; margin-bottom:2px;}
.testimonial-card p{font-size:15px; color:#dedce4; margin:0; font-style:italic;}
.testimonial-card .author{font-size:13px; color:#9a97a6; font-weight:600;}
.testimonial-card .author em{font-style:normal; color:var(--brand); margin-left:4px;}
@media (max-width:600px){ .testimonial-section .carousel-heading{align-items:flex-start; flex-direction:column;} }

/* ---------- cookie consent banner ---------- */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--ink); border-top:1px solid var(--line); padding:20px; transform:translateY(110%); transition:transform .4s ease;}
.cookie-banner.is-visible{transform:translateY(0);}
.cookie-banner-inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cookie-banner p{margin:0; font-size:14px; color:#c9c7d1; max-width:640px;}
.cookie-banner p a{color:#fff; text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:12px; flex-shrink:0;}
.cookie-banner .btn{padding:10px 20px; font-size:13px;}
@media (max-width:700px){ .cookie-banner-inner{flex-direction:column; align-items:flex-start;} }

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.faq-item{border:1px solid var(--line-dark); border-radius:16px; overflow:hidden; background:var(--paper-dim);}
.faq-question{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:none; border:none; color:#fff; font-size:16px; font-weight:600; text-align:left; cursor:pointer;}
.faq-icon{flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; font-size:16px; transition:transform .25s ease;}
.faq-item.is-open .faq-icon{transform:rotate(45deg); background:var(--brand); border-color:var(--brand);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-answer p{margin:0; padding:0 24px 20px; color:#c9c7d1; font-size:15px; line-height:1.6;}

/* ---------- stats row (Sobre nosaltres) ---------- */
.stats-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; text-align:center;}
.stat{padding:32px 20px; border-radius:18px; background:var(--paper-dim); border:1px solid var(--line-dark);}
.stat strong{display:block; font-size:clamp(32px,5vw,44px); color:var(--brand); margin-bottom:8px;}
.stat span{font-size:14px; color:#c9c7d1;}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{padding:18px 0; border-bottom:1px solid var(--line-dark);}
.breadcrumbs ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; font-size:13px; color:#8b889a;}
.breadcrumbs li{display:flex; align-items:center; gap:8px;}
.breadcrumbs li:not(:last-child)::after{content:"/"; margin-left:8px; color:var(--line-dark);}
.breadcrumbs a{color:#8b889a; transition:color .2s ease;}
.breadcrumbs a:hover{color:#fff;}
.breadcrumbs span[aria-current]{color:#dedce4;}

/* ---------- rental category grid (Lloguer d'equips main page) ---------- */
.category-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;}
.category-card{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 24px; border-radius:16px; background:var(--paper-dim); border:1px solid var(--line-dark); color:#fff; transition:border-color .2s ease, transform .2s ease;}
.category-card:hover{border-color:var(--brand); transform:translateY(-2px);}
.category-card span{font-size:15px; font-weight:600;}
.category-card .arrow{color:var(--brand); font-size:18px;}

/* ---------- rental icon fallback panel ---------- */
.rental-icon-panel{aspect-ratio:4/3.4; border-radius:var(--radius); background:var(--paper-dim); border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; color:var(--brand);}
.rental-icon-panel svg{width:96px; height:96px;}

/* ---------- rental pack cards ---------- */
.pack-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;}
.pack-card{background:var(--ink); border:1px solid var(--line-dark); border-radius:18px; padding:28px; display:flex; flex-direction:column;}
.pack-card h3{font-size:19px; margin-bottom:8px;}
.pack-ideal{font-size:13px; color:var(--amber); margin-bottom:18px;}
.pack-label{font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8b889a; margin:0 0 8px;}
.pack-list{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:6px;}
.pack-list li{font-size:14px; color:#dedce4; padding-left:16px; position:relative;}
.pack-list li::before{content:"—"; position:absolute; left:0; color:var(--brand);}
.pack-cta{margin-top:auto; align-self:flex-start;}

/* ---------- multi-step quote wizard (cotitzador) ---------- */
.quoter-steps.timeline{margin-top:0; margin-bottom:26px;}
.quoter-steps .num{width:32px; height:32px; font-size:12px; background:transparent; border-color:var(--line-dark); color:#8b889a; transition:background .2s ease, border-color .2s ease, color .2s ease;}
.quoter-steps .timeline-item h4{font-size:12px; color:#8b889a; transition:color .2s ease;}
.quoter-steps .timeline-item.is-active .num,
.quoter-steps .timeline-item.is-done .num{background:var(--brand); border-color:var(--brand); color:#fff;}
.quoter-steps .timeline-item.is-active h4,
.quoter-steps .timeline-item.is-done h4{color:#fff;}
.quoter-panel{display:none;}
.quoter-panel.is-active{display:block;}
.quoter-label{font-size:14px; color:#c9c7d1; margin:0 0 14px;}
.quoter-options{display:flex; flex-wrap:wrap; gap:10px;}
.quoter-option{padding:12px 18px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:#fff; font-size:14px; cursor:pointer; transition:border-color .2s ease, background .2s ease;}
.quoter-option:hover{border-color:var(--brand);}
.quoter-option.is-selected{background:var(--brand); border-color:var(--brand);}
.quoter-range{width:100%; accent-color:var(--brand); margin:8px 0 10px;}
.quoter-range-labels{display:flex; justify-content:space-between; font-size:13px; color:#8b889a;}
.quoter-range-value{color:#fff; font-weight:600;}
.quoter-nav{display:flex; justify-content:space-between; align-items:center; margin-top:22px; gap:12px;}

/* ---------- lead magnet (email capture) ---------- */
.lead-magnet{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:stretch;}
@media (max-width:860px){ .lead-magnet{grid-template-columns:1fr;} }
.lead-magnet-form{background:var(--ink); border:1px solid var(--line-dark); border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; justify-content:center;}
.lead-magnet-form .cform{gap:12px;}
.lead-magnet-fineprint{font-size:12px; color:#8b889a; margin:6px 0 0;}

/* ---------- lead magnet popup (home only, triggered on scroll into Producció) ---------- */
.leadpopup{position:fixed; inset:0; z-index:90; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility 0s linear .5s;}
.leadpopup.is-open{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .5s ease, visibility 0s linear 0s;}
.leadpopup-backdrop{position:absolute; inset:0; background:rgba(5,5,8,.75); backdrop-filter:blur(2px); opacity:0; transition:opacity .5s ease;}
.leadpopup.is-open .leadpopup-backdrop{opacity:1;}
.leadpopup-card{position:absolute; top:50%; left:50%; transform:translate(-50%,-44%) scale(.96); width:min(92vw,440px); background:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px; opacity:0; transition:opacity .5s ease .05s, transform .5s cubic-bezier(.2,.8,.2,1) .05s;}
.leadpopup.is-open .leadpopup-card{opacity:1; transform:translate(-50%,-50%) scale(1);}
.leadpopup-close{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-dark); background:none; color:#fff; font-size:18px; cursor:pointer;}
.leadpopup h3{font-size:21px; margin-bottom:10px;}
.leadpopup-body p, .leadpopup-success p{color:#c9c7d1; font-size:14px; margin-bottom:18px;}
.leadpopup-body .cform{gap:10px;}
.leadpopup-dismiss{display:block; margin:14px auto 0; background:none; border:none; color:#8b889a; font-size:13px; cursor:pointer; text-decoration:underline;}

/* ---------- 404 / search ---------- */
.state-block{text-align:center; padding:120px 0;}
.state-block .code{font-size:clamp(60px,12vw,140px); font-weight:700; color:var(--brand); line-height:1;}

/* ---------- WP core alignment helpers ---------- */
.alignwide{max-width:1400px; margin-left:auto; margin-right:auto;}
.alignfull{width:100%; max-width:none;}

/* ---------- casella de consentiment RGPD ---------- */
.consent-check{display:flex; align-items:flex-start; gap:10px; margin:14px 0 4px; font-size:12.5px; line-height:1.5; color:#b9b6c4; cursor:pointer;}
.consent-check input[type=checkbox]{flex:0 0 auto; width:17px; height:17px; margin-top:1px; accent-color:var(--brand); cursor:pointer;}
.consent-check a{color:var(--brand); text-decoration:underline; text-underline-offset:2px;}
.consent-check a:hover{color:#fff;}

/* ---------- context de consulta al cotitzador ---------- */
.quoter-context{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; padding:12px 16px; border-radius:12px; background:rgba(159,31,131,.14); border:1px solid rgba(159,31,131,.35);}
.quoter-context-label{font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#cfcdd6;}
.quoter-context strong{color:#fff; font-size:14px;}

/* ---------- graella de tipus d'esdeveniment (portada) ---------- */
.event-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px;}
@media (max-width:900px){ .event-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .event-grid{grid-template-columns:1fr;} }
.event-card{display:flex; flex-direction:column; gap:14px; padding:24px 22px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line-dark); color:#fff; transition:transform .25s ease, border-color .25s ease, background .25s ease;}
.event-card:hover{transform:translateY(-4px); border-color:var(--brand); background:var(--paper-dim);}
.event-card strong{font-size:16px; line-height:1.35;}
.event-card-eq{display:flex; align-items:flex-end; gap:4px; height:30px;}
.event-card-eq span{width:5px; border-radius:3px; background:linear-gradient(180deg,var(--amber),var(--brand)); transition:height .3s ease;}
.event-card:hover .event-card-eq span:nth-child(1){height:80%!important;}
.event-card:hover .event-card-eq span:nth-child(2){height:45%!important;}
.event-card:hover .event-card-eq span:nth-child(3){height:100%!important;}
.event-card:hover .event-card-eq span:nth-child(4){height:55%!important;}
.event-card-go{margin-top:auto; font-family:ui-monospace,monospace; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); transition:color .2s ease;}
.event-card:hover .event-card-go{color:var(--amber);}

/* targetes de categoria amb foto */
.category-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;}
.category-card.has-photo{position:relative; align-items:flex-end; min-height:190px; padding:20px; background-size:cover; background-position:center; overflow:hidden; border-color:var(--line-dark);}
.category-card.has-photo::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,15,.25) 0%, rgba(10,10,15,.55) 45%, rgba(10,10,15,.92) 100%); transition:background .3s ease;}
.category-card.has-photo:hover::before{background:linear-gradient(180deg, rgba(159,31,131,.30) 0%, rgba(10,10,15,.60) 45%, rgba(10,10,15,.95) 100%);}
.category-card.has-photo .category-card-title{position:relative; z-index:1; font-size:15px; line-height:1.35; text-shadow:0 1px 10px rgba(0,0,0,.6);}
.category-card.has-photo .arrow{position:relative; z-index:1; flex:0 0 auto;}
.category-card.has-photo:hover{transform:translateY(-4px); border-color:var(--brand);}
@media (max-width:520px){ .category-card.has-photo{min-height:150px;} }

/* ---------- tercer nivell del menú (Serveis > Lloguer > categories) ---------- */
.main-nav .sub-menu li{position:relative;}
.main-nav .sub-menu .sub-menu{position:absolute; top:0; left:100%; margin:0 0 0 8px; min-width:250px; opacity:0; visibility:hidden; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease;}
.main-nav .sub-menu li:hover > .sub-menu,
.main-nav .sub-menu li:focus-within > .sub-menu{opacity:1; visibility:visible; transform:translateX(0);}
/* fletxa indicadora al pare del tercer nivell */
.main-nav .sub-menu .menu-item-has-children > a::after{content:'›'; position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.6; display:block; width:auto; height:auto; background:none;}
.main-nav .sub-menu .menu-item-has-children > a{padding-right:26px;}
@media (max-width:960px){
  .main-nav .sub-menu .sub-menu{position:static; opacity:1; visibility:visible; transform:none; margin:8px 0 4px 14px; min-width:0; border-left:1px solid var(--line-dark); padding-left:12px;}
  .main-nav .sub-menu .sub-menu a{font-size:14px; color:#b9b6c4;}
  .main-nav .sub-menu .menu-item-has-children > a::after{content:'';}
}

/* ---------- portada amb foto a les pàgines de tipus d'esdeveniment ---------- */
.hero-has-cover{position:relative; overflow:hidden;}
.hero-has-cover .hero-photo{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0;}
.hero-has-cover::before{content:''; position:absolute; inset:0; z-index:1; background:
    linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.78) 55%, rgba(10,10,15,.94) 100%),
    radial-gradient(60% 50% at 12% 0%, rgba(159,31,131,.30), transparent 62%),
    radial-gradient(50% 45% at 100% 15%, rgba(255,138,61,.18), transparent 62%);
  pointer-events:none;}
.hero-has-cover > .wrap{position:relative; z-index:2;}

/* ---------- textura de marca a les seccions alternes ---------- */
#tipus-esdeveniment{position:relative; overflow:hidden;}
/* Reixa d'altaveu metàl·lica. La base és un gris més clar que la resta de
   seccions perquè la banda contrasti, i cada perforació combina un forat fosc
   amb una llum a la vora superior i una ombra a la inferior — és aquest doble
   contorn el que fa que sembli metall i no una simple trama de punts. */
#tipus-esdeveniment{background-color:#1c1c23;}
#tipus-esdeveniment::before{content:''; position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.13) 0 2.2px, transparent 3px),
    radial-gradient(circle at 50% 62%, rgba(0,0,0,.92) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.13) 0 2.2px, transparent 3px),
    radial-gradient(circle at 50% 62%, rgba(0,0,0,.92) 0 3px, transparent 4px);
  background-size:12px 12px, 12px 12px, 12px 12px, 12px 12px;
  background-position:0 0, 0 0, 6px 6px, 6px 6px;}
/* Segona capa: llum de marca i vinyeta, per damunt de la reixa. */
#tipus-esdeveniment::after{content:''; position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(75% 70% at 6% 0%, rgba(159,31,131,.30), transparent 64%),
    radial-gradient(60% 60% at 100% 100%, rgba(255,138,61,.16), transparent 64%),
    linear-gradient(180deg, rgba(10,10,15,.75) 0%, transparent 16%, transparent 84%, rgba(10,10,15,.75) 100%);}
#tipus-esdeveniment > .wrap{position:relative; z-index:2;}
#tipus-esdeveniment > .wrap{position:relative; z-index:1;}

/* ---------- barres d'equalitzador: mateix comportament a tota la web ---------- */
.panel-eq span:nth-child(2n){animation-delay:.15s;}
.panel-eq span:nth-child(3n){animation-delay:.3s;}
.panel-eq span:nth-child(5n){animation-delay:.45s;}
.page-cta-eq span:nth-child(3n){animation-delay:.3s;}
.page-cta-eq span:nth-child(5n){animation-delay:.45s;}
@media (prefers-reduced-motion: reduce){
  .panel-eq span, .page-cta-eq span, .event-card-eq span{animation:none;}
}

/* copyright dins la columna de marca, alineat amb el text */

/* ---------- blocs d'informació del footer (adreça i horari) ---------- */
.site-footer ul li{margin-bottom:7px;}

/* ---------- footer compacte ---------- */
.foot-contact li{font-size:13.5px; line-height:1.5;}
.foot-hours-icon{display:inline-flex; vertical-align:-3px; margin-right:5px; color:var(--brand);}
.site-footer .social-icons{margin-top:16px;}
.foot-copy{font-size:12.5px; color:#6f6c78;}

/* barra d'informació: adreça i horari en una sola línia */
.foot-meta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 20px; padding:14px 0; border-top:1px solid var(--line-dark); font-size:12.5px; color:#8b889a;}
.foot-meta address{font-style:normal;}
.foot-meta .foot-hours{display:inline-flex; align-items:center;}
.foot-hours-icon{display:inline-flex; margin-right:6px; color:var(--brand);}
.foot-bottom{padding-top:14px; gap:10px 18px;}

/* ================= panell d'accessibilitat + mode clar ================= */
.a11y-fab{position:fixed; left:20px; bottom:20px; z-index:95; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-dark); background:var(--paper-dim); color:#f5f3ee; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35); transition:background .2s ease, border-color .2s ease, transform .2s ease;}
.a11y-fab:hover{background:var(--brand); border-color:var(--brand); transform:translateY(-2px);}
.a11y-fab:focus-visible{outline:3px solid var(--amber); outline-offset:3px;}

.a11y-panel{position:fixed; left:20px; bottom:78px; z-index:96; width:268px; padding:18px; border-radius:16px; background:var(--paper-dim); border:1px solid var(--line-dark); box-shadow:0 18px 40px rgba(0,0,0,.45); color:#f5f3ee;}
.a11y-panel[hidden]{display:none;}
.a11y-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.a11y-panel-head strong{font-size:14px;}
.a11y-close{background:none; border:none; color:#9a97a6; font-size:15px; cursor:pointer; padding:4px; line-height:1;}
.a11y-close:hover{color:#fff;}

.a11y-group{margin-bottom:14px;}
.a11y-label{display:block; font-family:ui-monospace,monospace; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:#8b889a; margin-bottom:7px;}
.a11y-seg{display:flex; gap:6px;}
.a11y-seg button{flex:1; padding:8px 6px; border-radius:9px; border:1px solid var(--line-dark); background:transparent; color:#cfcdd6; font-size:13px; font-family:inherit; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;}
.a11y-seg button:hover{border-color:var(--brand); color:#fff;}
.a11y-seg button[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:#fff;}

.a11y-toggles{display:flex; flex-direction:column; gap:9px;}
.a11y-switch{display:flex; align-items:center; gap:9px; font-size:13px; color:#cfcdd6; cursor:pointer;}
.a11y-switch input{width:16px; height:16px; accent-color:var(--brand); cursor:pointer; flex:0 0 auto;}

.a11y-reset{width:100%; padding:8px; border-radius:9px; border:1px solid var(--line-dark); background:transparent; color:#8b889a; font-size:12.5px; font-family:inherit; cursor:pointer;}
.a11y-reset:hover{color:#fff; border-color:var(--brand);}

@media (max-width:560px){
  .a11y-fab{left:14px; bottom:14px; width:42px; height:42px;}
  .a11y-panel{left:14px; right:14px; width:auto; bottom:66px;}
}

/* ---- preferències aplicades ---- */
html[data-a11y-font="115"]{font-size:115%;}
html[data-a11y-font="130"]{font-size:130%;}

html[data-a11y-links="1"] a:not(.btn):not(.site-logo):not(.a11y-fab){text-decoration:underline !important; text-underline-offset:2px;}

html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}

html[data-a11y-spacing="1"] p,
html[data-a11y-spacing="1"] li,
html[data-a11y-spacing="1"] .block-lead,
html[data-a11y-spacing="1"] .lead{line-height:1.9 !important; letter-spacing:.02em;}
html[data-a11y-spacing="1"] p{margin-bottom:1.2em;}

/* Contrast alt: reforça text i vores, i apaga les textures decoratives
   que redueixen la llegibilitat del fons. */
html[data-a11y-contrast="1"]{--muted:#e6e4ec; --line:rgba(255,255,255,.4); --line-dark:rgba(255,255,255,.45);}
html[data-a11y-contrast="1"] body{background:#000; color:#fff;}
html[data-a11y-contrast="1"] .block, 
html[data-a11y-contrast="1"] .block.alt,
html[data-a11y-contrast="1"] .carousel-section,
html[data-a11y-contrast="1"] .testimonial-section,
html[data-a11y-contrast="1"] .site-footer,
html[data-a11y-contrast="1"] .site-header{background:#000 !important;}
html[data-a11y-contrast="1"] #tipus-esdeveniment::before,
html[data-a11y-contrast="1"] #tipus-esdeveniment::after,
html[data-a11y-contrast="1"] .hero::before,
html[data-a11y-contrast="1"] .hero-photo,
html[data-a11y-contrast="1"] .parallax-layer{display:none !important;}
html[data-a11y-contrast="1"] .block-lead,
html[data-a11y-contrast="1"] .lead,
html[data-a11y-contrast="1"] .muted,
html[data-a11y-contrast="1"] p{color:#fff !important;}
html[data-a11y-contrast="1"] .eyebrow{color:#ff9de8 !important;}
html[data-a11y-contrast="1"] a{color:#ffd9a0;}
html[data-a11y-contrast="1"] .btn-brand{background:#c92aa6; color:#fff;}

/* ---- mode clar ---- */
html[data-theme="light"]{
  --ink:#ffffff;
  --paper:#ffffff;
  --paper-dim:#f4f2f7;
  --muted:#55525e;
  --line:rgba(20,18,26,.14);
  --line-dark:rgba(20,18,26,.16);
}
html[data-theme="light"] body{background:#fff; color:#16151a;}
html[data-theme="light"] .site-header{background:#fff; border-bottom-color:rgba(20,18,26,.12);}
html[data-theme="light"] .main-nav ul{color:#3d3a47;}
html[data-theme="light"] .main-nav ul a:hover,
html[data-theme="light"] .main-nav ul .current-menu-item a{color:#0c0b10;}
html[data-theme="light"] .main-nav .sub-menu{background:#fff; box-shadow:0 16px 32px rgba(20,18,26,.14);}
html[data-theme="light"] .main-nav .sub-menu a:hover{background:rgba(20,18,26,.06); color:#0c0b10;}
html[data-theme="light"] .btn-light{background:var(--brand); color:#fff;}
html[data-theme="light"] .btn-dark{background:#f0eef4; color:#16151a; border-color:rgba(20,18,26,.16);}
html[data-theme="light"] .block-title,
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4{color:#0c0b10;}
html[data-theme="light"] .block-lead,
html[data-theme="light"] .lead{color:#4a4753;}
html[data-theme="light"] .panel,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .event-card,
html[data-theme="light"] .faq-item{background:#f4f2f7; color:#16151a; border-color:rgba(20,18,26,.12);}
html[data-theme="light"] .testimonial-card p,
html[data-theme="light"] .faq-answer p{color:#3d3a47;}
html[data-theme="light"] .site-footer{background:#14121a;}
html[data-theme="light"] .a11y-panel,
html[data-theme="light"] .a11y-fab{background:#fff; color:#16151a; border-color:rgba(20,18,26,.16);}
html[data-theme="light"] .a11y-seg button{color:#4a4753;}
html[data-theme="light"] .a11y-switch{color:#3d3a47;}
/* la portada i els panells amb foto mantenen el tractament fosc a propòsit:
   són imatges amb text a sobre i necessiten el degradat per ser llegibles */
html[data-theme="light"] .hero{background:#0a0a0f;}