/* ==========================================================================
   CERTAMEN INTERNACIONAL DE BANDES DE MÚSICA VILA DE LA SÉNIA
   Full d'estils únic de tota la web.

   Aquest fitxer agrupa:
   - Estils generals i portada
   - Pàgina "El Certamen"
   - Formularis
   - Preguntes freqüents
   - La Sénia i el territori

   Per mantenir la web, totes les pàgines HTML poden carregar només:
       <link rel="stylesheet" href="styles.css">
   ========================================================================== */


/* ==========================================================================
   ESTILS GENERALS I PORTADA
   ========================================================================== */

/* ESTILS GENERALS: capçalera, portada, botons, mòbil.
   Pots canviar colors i mides aquí. No cal compilar res: desa i actualitza el navegador. */

/* Certamen homepage styles. Edit colors in :root. */
:root  {
  
    --dark:#15171c;
  
    --red:#a52b2b;
  
    --yellow:#ffe500;
  
    --paper:#f7f7f5;
  
    --muted:#65666a
}

*  {
  
    box-sizing:border-box
}

html  {
  
    scroll-behavior:smooth;
  
    scroll-padding-top:80px
}

body  {
  
    margin:0;
  
    font-family:Inter,'Helvetica Neue',Arial,sans-serif;
  
    background:var(--paper);
  
    color:var(--dark)
}

a  {
  
    color:inherit;
  
    text-decoration:none
}

button  {
  
    font:inherit;
  
    cursor:pointer
}

.skip  {
  
    position:absolute;
  
    top:-100px;
  
    background:var(--yellow);
  
    padding:12px;
  
    z-index:10
}

.skip:focus  {
  
    top:0
}

.header  {
  
    position:sticky;
  
    top:0;
  
    z-index:5;
  
    display:flex;
  
    align-items:center;
  
    gap:26px;
  
    padding:12px clamp(20px,4vw,72px);
  
    background:var(--dark);
  
    color:white;
  
    min-height:80px
}

.brand,.footer-brand  {
  
    display:flex;
  
    align-items:center;
  
    gap:12px;
  
    flex-shrink:0
}

.brand strong,.footer-brand strong  {
  
    font-size:17px;
  
    letter-spacing:.13em
}

.brand small,.footer-brand small  {
  
    display:block;
  
    color:var(--yellow);
  
    font-size:10px;
  
    letter-spacing:.18em;
  
    margin-top:4px
}

.mark  {
  
    display:grid;
  
    place-items:center;
  
    color:var(--yellow);
  
    font-size:45px;
  
    line-height:1;
  
    width:46px;
  
    height:48px
}

.nav  {
  
    display:flex;
  
    align-items:center;
  
    gap:clamp(10px,1.4vw,24px);
  
    margin-left:auto
}

.nav a  {
  
    font-size:13px;
  
    white-space:nowrap
}

.nav a:hover,.nav a:focus-visible  {
  
    color:var(--yellow)
}

.langs  {
  
    display:flex;
  
    gap:4px
}

.langs button  {
  
    border:0;
  
    background:transparent;
  
    color:#a9adb4;
  
    padding:7px 5px;
  
    font-size:12px
}

.langs button[aria-pressed=true]  {
  
    color:var(--yellow);
  
    font-weight:800
}

.menu-toggle  {
  
    display:none;
  
    background:transparent;
  
    border:1px solid #777;
  
    color:white;
  
    padding:9px 12px
}

.hero  {
  
    min-height:min(730px,85vh);
  
    position:relative;
  
    background:radial-gradient(ellipse at 70% 35%,#9a3432 0%,#432127 28%,#17191f 66%);
  
    color:white;
  
    overflow:hidden;
  
    display:flex;
  
    align-items:end
}

.hero-art  {
  
    position:absolute;
  
    inset:0;
  
    overflow:hidden;
  
    opacity:.85
}

.spotlight  {
  
    position:absolute;
  
    width:85%;
  
    height:160%;
  
    top:-70%;
  
    right:-15%;
  
    transform:rotate(-20deg);
  
    background:linear-gradient(90deg,transparent,#f9c26b26,transparent);
  
    filter:blur(18px)
}

.music-lines  {
  
    position:absolute;
  
    right:5%;
  
    top:8%;
  
    font-size:clamp(150px,28vw,440px);
  
    font-weight:800;
  
    color:#ffe50018;
  
    letter-spacing:-.25em;
  
    transform:rotate(-12deg);
  
    white-space:nowrap
}

.hero-inner  {
  
    position:relative;
  
    z-index:1;
  
    width:min(1300px,100%);
  
    margin:0 auto;
  
    padding:130px clamp(22px,6vw,90px) 100px
}

.eyebrow  {
  
    color:var(--yellow);
  
    font-size:12px;
  
    font-weight:800;
  
    letter-spacing:.18em;
  
    text-transform:uppercase
}

.eyebrow.red  {
  
    color:var(--red)
}

h1,h2,h3,p  {
  
    margin-top:0
}

h1  {
  
    font-size:clamp(56px,9vw,135px);
  
    letter-spacing:-.07em;
  
    line-height:.95;
  
    max-width:950px;
  
    margin:20px 0 25px
}

h2  {
  
    font-size:clamp(36px,5vw,70px);
  
    letter-spacing:-.055em;
  
    line-height:1.05
}

h3  {
  
    font-size:clamp(26px,2.5vw,39px);
  
    letter-spacing:-.04em
}

.lead  {
  
    font-size:clamp(16px,2vw,22px);
  
    max-width:600px;
  
    line-height:1.5;
  
    color:#e1dfe0
}

.actions  {
  
    display:flex;
  
    gap:12px;
  
    flex-wrap:wrap;
  
    margin-top:34px
}

.btn  {
  
    display:inline-block;
  
    padding:16px 23px;
  
    font-weight:750;
  
    font-size:14px;
  
    border-radius:2px;
  
    transition:transform .2s
}

.btn:hover  {
  
    transform:translateY(-3px)
}

.primary  {
  
    background:var(--yellow);
  
    color:var(--dark)
}

.secondary  {
  
    border:1px solid #ffffffb0;
  
    color:white
}

.hero-index  {
  
    position:absolute;
  
    bottom:28px;
  
    right:5%;
  
    font-size:12px;
  
    color:#c9c9c9
}

.section  {
  
    padding:clamp(65px,8vw,125px) clamp(22px,6vw,90px);
  
    max-width:1600px;
  
    margin:auto
}

.intro  {
  
    display:grid;
  
    grid-template-columns:1.2fr 1fr;
  
    gap:9%;
  
    align-items:center
}

.intro h2  {
  
    max-width:720px
}

.intro p:not(.eyebrow)  {
  
    font-size:clamp(18px,2vw,23px);
  
    line-height:1.6;
  
    color:#555;
  
    max-width:570px
}

.text-link  {
  
    font-weight:750;
  
    border-bottom:2px solid var(--red);
  
    padding-bottom:7px
}

.section-head  {
  
    display:flex;
  
    justify-content:space-between;
  
    align-items:end
}

.section-num  {
  
    color:#999;
  
    font-size:12px
}

.tile-grid  {
  
    display:grid;
  
    grid-template-columns:repeat(4,minmax(0,1fr));
  
    gap:12px;
  
    margin-top:26px
}

.tile  {
  
    min-height:360px;
  
    padding:24px;
  
    display:flex;
  
    flex-direction:column;
  
    justify-content:space-between;
  
    color:white;
  
    position:relative;
  
    overflow:hidden;
  
    transition:transform .2s
}

.tile:hover  {
  
    transform:translateY(-5px)
}

.tile::before  {
  
    content:'';
  
    position:absolute;
  
    inset:0;
  
    background:radial-gradient(circle at 70% 20%,#ffe50066,transparent 40%);
  
    opacity:.6
}

.tile>*  {
  
    position:relative
}

.tile-one  {
  
    background:linear-gradient(145deg,#a52b2b,#471c27)
}

.tile-two  {
  
    background:linear-gradient(145deg,#252e43,#10131d)
}

.tile-three  {
  
    background:linear-gradient(145deg,#8d4e24,#301b20)
}

.tile-four  {
  
    background:linear-gradient(145deg,#3c3d4e,#15171c)
}

.tile-symbol  {
  
    align-self:end;
  
    font-size:30px
}

.tile small  {
  
    opacity:.75
}

.tile h3  {
  
    margin:12px 0
}

.tile p  {
  
    margin:0;
  
    color:#e2e2e2
}

.participation  {
  
    max-width:none;
  
    background:#a52b2b;
  
    color:white;
  
    display:grid;
  
    grid-template-columns:1.2fr .8fr;
  
    gap:30px;
  
    align-items:center
}

.participation>div:first-child  {
  
    max-width:750px;
  
    margin-left:auto
}

.participation h2  {
  
    font-size:clamp(44px,6vw,90px)
}

.participation p:not(.eyebrow)  {
  
    max-width:490px;
  
    line-height:1.7
}

.participation-art  {
  
    display:grid;
  
    place-items:center;
  
    min-height:300px;
  
    overflow:hidden
}

.participation-art span  {
  
    font-size:clamp(200px,28vw,420px);
  
    line-height:1;
  
    color:#ffe50080;
  
    transform:rotate(-18deg)
}

.info-section  {
  
    min-height:350px
}

.info-section p:last-child  {
  
    max-width:700px;
  
    color:#555;
  
    line-height:1.6;
  
    font-size:18px
}

.alt {
    background:#eae9e6;
    max-width:none;

    /* Manté el fons a tot l'ample però alinea el text
       amb les seccions de màxim 1600px */
    padding-left: max(
        clamp(22px, 6vw, 90px),
        calc((100vw - 1600px) / 2 + 90px)
    );

    padding-right: max(
        clamp(22px, 6vw, 90px),
        calc((100vw - 1600px) / 2 + 90px)
    );
}

footer  {
  
    background:var(--dark);
  
    color:white;
  
    padding:55px clamp(22px,6vw,90px);
  
    display:flex;
  
    align-items:center;
  
    gap:30px;
  
    flex-wrap:wrap
}

footer p  {
  
    margin:0;
  
    color:#bbb;
  
    flex:1
}

footer>a  {
  
    color:var(--yellow)
}

@media(max-width:1100px)  {
  
    .header  {
  
    flex-wrap:wrap
}

.menu-toggle  {
  
    display:block;
  
    margin-left:auto
}

.nav  {
  
    display:none;
  
    order:4;
  
    width:100%;
  
    flex-direction:column;
  
    align-items:stretch;
  
    padding:12px 0
}

.nav.open  {
  
    display:flex
}

.nav a  {
  
    padding:12px;
  
    border-top:1px solid #ffffff22
}

.langs  {
  
    margin-left:0
}

.tile-grid  {
  
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.tile  {
  
    min-height:280px
}

}

@media(max-width:650px)  {
  
    .header  {
  
    gap:10px;
  
    min-height:68px;
  
    padding:10px 18px
}

.brand strong  {
  
    font-size:13px
}

.brand small  {
  
    font-size:8px
}

.mark  {
  
    font-size:36px;
  
    width:35px
}

.menu-toggle  {
  
    padding:8px
}

.langs  {
  
    width:100%;
  
    justify-content:flex-end;
  
    order:3
}

.nav  {
  
    order:4
}

.hero  {
  
    min-height:610px
}

.hero-inner  {
  
    padding:100px 22px 90px
}

.hero h1  {
  
    font-size:clamp(54px,14vw,80px)
}

.intro,.participation  {
  
    grid-template-columns:1fr
}

.tile-grid  {
  
    grid-template-columns:1fr
}

.tile  {
  
    min-height:230px
}

.participation-art  {
  
    min-height:140px
}

.participation-art span  {
  
    font-size:200px
}

.section  {
  
    padding:65px 22px
}

footer  {
  
    display:block
}

footer>*  {
  
    margin-bottom:20px
}

}

@media(prefers-reduced-motion:reduce)  {
  
    html  {
  
    scroll-behavior:auto
}

*,*:before,*:after  {
  
    transition:none!important
}

}

/* Actual contest photograph, with a dark overlay for readable text. */
.hero  {
  
    background: linear-gradient(90deg, rgba(10, 12, 18, .88) 0%, rgba(10, 12, 18, .62) 46%, rgba(10, 12, 18, .22) 100%), url("../assets/contest-band.jpg") center 44% / cover no-repeat;
}

.brand-logo  {
  
    display: block;
  
    width: 54px;
  
    height: 54px;
  
    object-fit: contain;
  
    flex-shrink: 0;
  
    filter: brightness(0) invert(1);
}

.footer-brand .brand-logo  {
   width: 58px;
   height: 58px;
}

.participation-art img  {
   width: min(320px, 70%);
   height: auto;
   filter: brightness(0) invert(1);
   opacity: .8;
}

@media (max-width: 650px)  {
  
    .brand-logo  {
   width: 40px;
   height: 40px;
}

    .hero  {
  
        min-height: 580px;
  
        background-image: linear-gradient(0deg, rgba(10, 12, 18, .94) 0%, rgba(10, 12, 18, .55) 60%, rgba(10, 12, 18, .25) 100%), url("../assets/contest-band.jpg");
  
        background-position: center, 51% center;
}

    .hero-inner  {
   padding-top: 170px;
}

}

/* Five-language selector: allow wrapping on narrow screens. */
.langs  {
   flex-wrap: wrap;
   justify-content: flex-end;
}

.langs button  {
   min-width: 30px;
   cursor: pointer;
}


/* Enllaç al formulari de contacte a les capçaleres existents. */
.nav-extra { color: inherit; font-weight: 600; white-space: nowrap; }


/* ==========================================================================
   PÀGINA "EL CERTAMEN"
   ========================================================================== */

/* ESTILS DE LA PÀGINA EL CERTAMEN: història, organització i logotips.
   Pots canviar colors i mides aquí. No cal compilar res: desa i actualitza el navegador. */

.about-hero {
  min-height:440px;
  display:flex;
  align-items:end;
  background:linear-gradient(90deg,rgba(10,12,18,.88),rgba(10,12,18,.18)),url("../assets/contest-band.jpg") center 43%/cover;
  color:white}
.about-hero__inner {
  width:min(1180px,100%);
  margin:auto;
  padding:90px 30px 65px}
.about-hero h1 {
  font-size:clamp(3rem,8vw,6rem);
  line-height:1;
  margin:12px 0}
.about-hero__inner>p:last-child {
  font-size:clamp(1.2rem,2.6vw,1.8rem);
  margin:0}
.about-section {
  max-width:1180px;
  margin:auto;
  padding:88px 30px}
.about-section h2 {
  font-size:clamp(2rem,4vw,3.3rem);
  line-height:1.13;
  margin:12px 0 28px}
.about-section p {
  line-height:1.75}
.about-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:60px}
.about-photo {
  margin:0}
.about-photo img {
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:62% center;
  border-radius:12px}
.about-photo figcaption {
  font-size:.82rem;
  color:#777;
  margin-top:10px}
.about-present {
  max-width:none;
  background:#17191f;
  color:#f7f7f7;
  padding:85px max(30px,calc((100vw - 1120px)/2))}
.about-present__text {
  max-width:810px}
.about-present .eyebrow {
  color:#ffcf43}
.about-highlight {
  font-size:1.4rem;
  font-weight:700;
  margin-top:34px}
.about-organizers__intro {
  max-width:800px}
.about-organizers h3 {
  font-size:1.25rem;
  margin:44px 0 18px}
.sponsor-row {
  display:flex;
  flex-wrap:wrap;
  gap:18px}
.sponsor {
  min-height:130px;
  min-width:190px;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px;
  border:1px solid #e7e7e7;
  border-radius:12px;
  background:#fff;
  text-align:center;
  font-weight:650}
.sponsor img {
  max-width:100%;
  max-height:100px;
  width:auto;
  height:auto;
  object-fit:contain}
.sponsor-row--organizer .sponsor {
  flex:0 1 270px}
.sponsor-row--organizer img {
  max-height:125px}
.sponsor--pending {
  color:#555;
  background:#f7f7f7}
.sponsor__mark {
  display:grid;
  place-items:center;
  border:2px solid #aaa;
  border-radius:50%;
  width:48px;
  height:48px;
  font-size:1.4rem;
  color:#888}
.sponsor-note {
  font-size:.9rem;
  color:#6d6d6d}
.about-end {
  background:#24262c;
  color:white;
  padding:60px max(30px,calc((100vw - 1120px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px}
.about-end h2 {
  font-size:clamp(1.8rem,3vw,2.6rem);
  margin:8px 0}
.about-end .eyebrow {
  color:#ffcf43}
.about-footer {
  padding:28px 30px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:.88rem}
.about-footer a {
  color:inherit}
@media(max-width:780px) {
  .about-hero {
  min-height:330px;
  background-position:59% center}
.about-hero__inner {
  padding:80px 22px 40px}
.about-section {
  padding:54px 22px}
.about-grid {
  grid-template-columns:1fr;
  gap:24px}
.about-photo img {
  aspect-ratio:16/10}
.about-present {
  padding:55px 22px}
.about-end {
  padding:48px 22px;
  display:block}
.about-end .btn {
  display:inline-block;
  margin-top:14px}
.sponsor {
  min-width:145px}
.about-footer {
  padding:25px 22px}
}


/* ==========================================================================
   FORMULARIS
   ========================================================================== */

/* Estils exclusius dels formularis. Els estils comuns són a styles.css. */
.form-page { min-height: 75vh; padding: 145px 24px 75px; background: #f6f6f5; }
.form-container { max-width: 740px; margin: 0 auto; }
.form-container h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin: 12px 0; }
.form-container h2 { margin-top: 24px; }
.certamen-form { display: grid; gap: 18px; margin-top: 32px; padding: clamp(18px,4vw,36px); background: white; border-radius: 16px; }
.form-field { display: grid; gap: 8px; font-weight: 600; }
.form-field input, .form-field textarea { width: 100%; box-sizing: border-box; border: 1px solid #a9a9a9; border-radius: 7px; padding: 12px; font: inherit; color: #15171c; background: white; }
.form-field input:focus, .form-field textarea:focus { outline: 3px solid #d7a531; outline-offset: 1px; }
.form-check { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; }
.form-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
.form-hint, .form-status { font-size: .9rem; }
.form-status:not(:empty) { padding: 14px; border-left: 4px solid #b42020; background: #fff0f0; }
.registration-notice { background: white; border-left: 5px solid #b42020; padding: 24px; margin-top: 28px; border-radius: 8px; }
.form-footer { padding: 30px 24px; text-align: center; background: #15171c; color: white; }
/* hidden ha de prevaldre fins i tot si altres regles assignen display. */
[hidden] { display: none !important; }
@media(max-width:650px) { .form-page { padding-top: 120px; } .certamen-form { padding: 20px; } }

/* Crida a l'acció visible quan el termini d'inscripcions és tancat. */
.registration-contact { margin-top: 28px; padding: 24px; background: #f6f6f5; border-radius: 12px; }
.registration-contact h3 { margin: 0 0 12px; font-size: clamp(1.25rem, 3vw, 1.65rem); }
.registration-contact p { margin: 0 0 20px; line-height: 1.6; }
.registration-contact-button { display: block; width: 100%; box-sizing: border-box; padding: 17px 22px; border-radius: 8px; background: #f3ce35; color: #15171c; text-align: center; font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.registration-contact-button:hover { background: #ffe16b; }
.registration-contact-button:focus-visible { outline: 3px solid #15171c; outline-offset: 3px; }


/* ==========================================================================
   PREGUNTES FREQÜENTS
   ========================================================================== */

/* PREGUNTES FREQÜENTS: estils propis de la pàgina FAQ. */
.faq-page {
    max-width:1100px;
    margin:0 auto;
    padding:150px 28px 80px
}

.faq-hero {
    max-width:780px;
    margin-bottom:64px
}

.faq-hero h1 {
    font-size:clamp(2.6rem,6vw,5.5rem);
    line-height:.98;
    margin:12px 0 24px
}

.faq-intro {
    font-size:1.2rem;
    line-height:1.7;
    color:var(--muted,#5f626b)
}

.faq-group {
    display:grid;
    grid-template-columns:minmax(190px,280px) 1fr;
    gap:48px;
    padding:42px 0;
    border-top:1px solid rgba(120,120,120,.25)
}

.faq-group>h2 {
    font-size:1.35rem;
    margin:4px 0
}

.faq-item {
    border-bottom:1px solid rgba(120,120,120,.25)
}

.faq-item summary {
    cursor:pointer;
    list-style:none;
    font-weight:700;
    font-size:1.08rem;
    padding:20px 44px 20px 0;
    position:relative
}

.faq-item summary::-webkit-details-marker {
    display:none
}

.faq-item summary::after {
    content:'+';
    position:absolute;
    right:8px;
    top:16px;
    font-size:1.55rem;
    font-weight:400
}

.faq-item[open] summary::after {
    content:'−'
}

.faq-answer {
    padding:0 44px 20px 0
}

.faq-answer p {
    margin:0;
    line-height:1.7;
    max-width:760px
}

.faq-cta {
    margin-top:56px;
    padding:48px;
    background:#15171c;
    color:#fff
}

.faq-cta h2 {
    font-size:clamp(1.7rem,4vw,2.8rem);
    margin:0 0 14px
}

.faq-cta p {
    max-width:680px;
    line-height:1.7;
    margin:0 0 26px
}

@media(max-width:760px) {
    .faq-page {
    padding:120px 20px 60px
}

.faq-group {
    grid-template-columns:1fr;
    gap:12px;
    padding:34px 0
}

.faq-cta {
    padding:32px 24px
}

}


/* ==========================================================================
   LA SÉNIA I EL TERRITORI
   ========================================================================== */

/* LA SÉNIA I EL TERRITORI: estils específics. */
.territory-page {
    max-width:1280px;
    margin:auto;
    padding:0 clamp(20px,5vw,72px) 80px
}

.territory-hero {
    padding:80px 0 48px;
    max-width:900px
}

.territory-hero h1 {
    font-size:clamp(42px,7vw,86px);
    line-height:.95;
    margin:8px 0 24px;
    letter-spacing:-.04em
}

.territory-lead {
    font-size:clamp(19px,2vw,25px);
    line-height:1.5;
    color:var(--muted);
    max-width:800px
}

.territory-section {
    padding:58px 0;
    border-top:1px solid #d8d8d4
}

.territory-section h2 {
    font-size:clamp(30px,4vw,50px);
    margin:0 0 18px
}

.territory-section>p {
    font-size:18px;
    line-height:1.65;
    max-width:850px
}

.venue {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:28px;
    align-items:stretch
}

.venue-card,.place-card,.plan-card {
    background:white;
    border:1px solid #deded9;
    border-radius:20px;
    padding:28px
}

.venue-card h3,.place-card h3,.plan-card h3 {
    font-size:25px;
    margin:0 0 12px
}

.venue-visual {
    min-height:330px;
    border-radius:20px;
    background:linear-gradient(135deg,#20232a,#5c6068);
    display:flex;
    align-items:flex-end;
    padding:32px;
    color:white
}

.venue-visual strong {
    font-size:clamp(30px,4vw,48px);
    line-height:1
}

.place-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:30px
}

.place-card p,.plan-card p {
    color:var(--muted);
    line-height:1.6
}

.place-card .number {
    display:block;
    font-size:14px;
    font-weight:800;
    color:var(--red);
    margin-bottom:24px
}

.plan-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:28px
}

.official-links {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:26px
}

.official-links a {
    border:1px solid var(--dark);
    padding:12px 16px;
    border-radius:999px;
    font-weight:700
}

.official-links a:hover {
    background:var(--dark);
    color:white
}

.territory-note {
    margin-top:28px;
    padding:22px 24px;
    border-left:5px solid var(--yellow);
    background:#fff
}

.eyebrow.red {
    color:var(--red);
    font-weight:800;
    letter-spacing:.12em;
    font-size:13px
}

@media(max-width:900px) {
    .venue,.place-grid {
    grid-template-columns:1fr
}

.plan-grid {
    grid-template-columns:1fr 1fr
}

.venue-visual {
    min-height:230px
}

}

@media(max-width:560px) {
    .plan-grid {
    grid-template-columns:1fr
}

.territory-hero {
    padding-top:48px
}

}

/* El missatge d'estat no ocupa espai abans d'enviar el formulari. */
.form-status:empty { display: none; }
.form-status:not(:empty) { display: block; }

@media(max-width:1100px) {
  .langs { margin-left: 0; }
}
@media(max-width:650px) {
  .langs { width: auto; order: 3; margin-left: auto; }
}

/* ==========================================================
   SELECTOR D'IDIOMA
   ========================================================== */

.langs {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  margin-left: 2px;
}

/* CA ▾ */
.langs summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  width: 58px;
  min-width: 58px;
  box-sizing: border-box;

  list-style: none;
  cursor: pointer;
}

/* Elimina el triangle automàtic de details */
.langs summary::marker {
  display: none;
  content: "";
}

.langs summary::-webkit-details-marker {
  display: none;
}

.lang-current {
  min-width: 20px;
  text-align: center;
}


/* ---------- MENÚ TANCAT ---------- */

.langs:not([open]) .lang-menu {
  display: none;
}


/* ---------- MENÚ OBERT ---------- */

.langs[open] .lang-menu {
  position: absolute;

  /* Apareix sota CA ▾ */
  top: calc(100% + 8px);
  right: 0;

  /* No ocupa espai dins de la capçalera */
  z-index: 1000;

  /* Idiomes en vertical */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  width: 155px;
  min-width: 155px;

  padding: 6px;
  margin: 0;

  border-radius: 9px;
  background: #24272e;
  box-shadow: 0 10px 28px #0006;
}


/* ---------- OPCIONS ---------- */

.langs[open] .lang-menu button {
  display: block;

  width: 100%;
  min-width: 0;

  padding: 9px 11px;

  border: 0;
  border-radius: 6px;

  background: transparent;
  color: #e8e8e8;

  text-align: left;
  white-space: nowrap;

  font-size: 13px;
  cursor: pointer;

  /* Important: evita que hereti comportaments flex
     dels botons d'idioma antics */
  flex: none;
}


/* Idioma seleccionat / hover */
.langs[open] .lang-menu button:hover,
.langs[open] .lang-menu button:focus-visible,
.langs[open] .lang-menu button[aria-pressed="true"] {
  background: #ffffff12;
  color: var(--yellow);
}

/* Targeta informativa de la convocatòria 2027, adaptable a mòbil. */
.edition-2027 { margin: 1.35rem 0; padding: 1rem 1.25rem; border: 1px solid rgba(180,180,180,.45); border-left: 4px solid #d6ad54; border-radius: 10px; background: rgba(90,90,90,.12); max-width: 740px; }
.edition-2027 p { margin: .3rem 0; }
.edition-2027-kicker { font-size: .8rem; font-weight: 800; letter-spacing: .11em; }
.edition-2027-date { font-size: clamp(1.05rem,2vw,1.3rem); font-weight: 700; }
.edition-2027-registration { font-weight: 600; }

/* Enllaços a les bases oficials de 2027 */
.edition-2027-download { display: inline-block; margin-top: .65rem; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.edition-2027-download:hover { color: #d6ad54; }
.faq-cta .faq-bases-link { margin: 1rem 0 .65rem; }
.faq-cta .faq-bases-link a { display: inline-flex; text-decoration: none; }


/* Xarxes socials: icones comunes a la capçalera i al peu. */
.social-links { display:flex; align-items:center; justify-content:center; gap:8px; }
.social-link { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:inherit; transition:background-color .2s,transform .2s; }
.social-link:hover { background:rgba(128,128,128,.22); transform:translateY(-2px); }
.social-link:focus-visible { outline:2px solid var(--yellow); outline-offset:3px; }
.social-header { margin-left:auto; flex-shrink:0; }
.social-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; margin:12px 0; }
.social-footer-label { font-size:.9rem; font-weight:600; }
@media (max-width:850px) {
  .header { flex-wrap:wrap; }
  .social-header { margin-left:auto; gap:2px; }
  .social-header .social-link { width:30px; height:30px; }
}

/* Ocultem el camp antispam fora de la pantalla. */
.camp-antispam {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mapa de la Casa de Cultura */
.venue-map{background:var(--dark);color:#fff;padding:24px;border-radius:12px;text-align:center;overflow:hidden;margin:24px 0 16px}
.venue-map-button,.venue-map-directions{display:inline-block;background:var(--red);color:#fff;border:2px solid var(--red);border-radius:6px;padding:13px 24px;font-weight:700;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.venue-map-button:hover,.venue-map-button:focus-visible,.venue-map-directions:hover,.venue-map-directions:focus-visible{background:var(--yellow);border-color:var(--yellow);color:var(--dark)}
.venue-map-iframe{display:block;width:100%;height:380px;border:0;border-radius:6px}

/* Fotografies i enllaços de natura i patrimoni */
.territory-place-photo{display:block;width:100%;height:210px;object-fit:cover;border-radius:8px;margin-bottom:20px}
.territory-photo-credit{font-size:12px;color:var(--muted);margin:14px 0 12px}
.territory-photo-credit a{text-decoration:underline;text-underline-offset:3px}
.territory-place-link{display:inline-block;background:var(--red);color:#fff;border:2px solid var(--red);padding:10px 15px;border-radius:6px;font-size:14px;font-weight:700;transition:background .2s,color .2s,border-color .2s}
.territory-place-link:hover,.territory-place-link:focus-visible{background:var(--yellow);border-color:var(--yellow);color:var(--dark)}

/* Mapa integrat a la columna esquerra de la seu del Certamen */
.venue-location.venue-visual{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:14px;padding:24px;min-width:0;min-height:330px;box-sizing:border-box}
.venue-location .venue-map{width:100%;min-height:245px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.venue-location .venue-map-iframe{display:block;width:100%;height:100%;min-height:245px;border:0;border-radius:12px}
.venue-location .venue-map-intro{color:#fff;margin:0;line-height:1.5}
.venue-location .venue-map-directions{display:inline-block}
.venue-location p:last-child{margin:0}

/* Capçalera mòbil: marca, menú i idiomes a la primera fila;
   xarxes socials a la segona, alineades a la dreta. */
@media (max-width: 650px) {
  .header { flex-wrap: wrap; column-gap: 8px; row-gap: 4px; }
  .header .brand { order: 1; }
  .header .menu-toggle { order: 2; margin-left: auto; }
  .header .langs { order: 3; width: 58px; flex: 0 0 58px; margin-left: 0; }
  .header .social-header {
    order: 4;
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    gap: 4px;
  }
  .header .nav { order: 5; }
  .header .langs[open] .lang-menu { right: 0; left: auto; }
}