@charset "UTF-8";

/* -------------------------------------------------------------- */
/* --------------------------- INDEX ---------------------------- 

01 FORMAT
02 HEADERS
03 MAIN
04 CONTENT
	5.1 Titles
	5.2 Texts
	5.3 Quotes
	5.4 Lists
	5.5 Images
	5.6 Links
	5.7 Icons
	5.8 Tables
	5.9 Forms
05 BLOCKS
06 FOOTERS
07 ANIMATIONS


 ############################################################################ */
/* ------------------------------ 01 FORMAT --------------------------------- */
/* ########################################################################## */

  @font-face {font-family:font; font-style:normal; font-weight:normal; src:url(fonts/alexandria-regular.woff2); font-display:swap;}
	@font-face {font-family:font; font-style:normal; font-weight:bold; src:url(fonts/alexandria-bold.woff2); font-display:swap;}

:root {

/* Colors */

  --light-1:#f2f2f2;
  --light-2:#6ee4ff;
  --light-3:#ff605f;
  --dark-3:#292f47;
  --dark-2:#292f47;
  --dark-1:black;
  
	--hover:#d4a289; /* #c8c096 */
	--hover-back:#fff3f3;;
	--input-default:#ffeded;
	--input-ok:#e9f5e6;

/* Sizes */
	
  --size-s1:.8rem;
  --size-m1:1rem;
  --size-m2:2rem;
  --size-m3:4rem;
  --size-m4:6rem;
  --size-l1:20rem;
  --size-l2:30rem;
  --size-l3:40rem;
  --size-l4:60rem;
  --size-l5:80rem;

  --size-flex1:2%;
  --size-flex2:5%;
  --size-flex3:10%;
  --size-flex4:15%;
  --size-flex5:20%;

/* Borders */

  --border:2px;
	--radius:.5rem;
	
	/* Transitions */

	--fast:.2s;
	--slow:1s;
}

@view-transition {navigation: auto;}									/* Transició entre pàgines web */

* {margin:0; padding:0; border:0; outline:0; box-sizing:border-box; line-height:0;}

html, body {
  font:18px font, sans-serif;
  color:var(--dark-2); background: white;
  scroll-behavior:smooth;
}

body.page {background: var(--light-1);}

a, button {cursor:pointer; text-decoration:none; color:inherit;}
[hidden] {display:none;}

/* ########################################################################## */
/* ------------------------------- 02 HEADERS -------------------------------- */
/* ########################################################################## */

header {height:100vh;}
header::before	{
	content:'';
	position:absolute; top:0; bottom:0; left:0; right:0;
	background:no-repeat 50% top/cover url('media/fons-degradat.jpg');
	/* filter: opacity(20%); */
}


/* -------------------- Top v1 ---------------------- */

#top {
	display:flex; justify-content: space-between;
	padding:.5rem var(--size-flex3);
	font-size:var(--size-s1);
	background:linear-gradient(80deg, var(--light-3) 0%, var(--light-2) 0%, white 100%);}

#top > nav {display:flex;} /* Elimina espais en blanc entre fills */

/* -------------------- Menu ---------------------- */

#menu {
	display:flex; justify-content:space-between; align-items:center;
	padding:.5rem var(--size-flex1);
	position:sticky;
	top:0; left:0; right:0; z-index:10000;
	border-top:2px solid var(--dark-2);
	transition:background var(--fast);
}

#menu .home svg {
  width:var(--size-m3); height:var(--size-m3);
  transition: fill var(--fast); fill:var(--dark-1);
  padding:.6rem;
  border-right:2px solid var(--light-2);
  background: var(--dark-3);
}
#menu .home svg:hover , .home svg:focus  {fill:var(--hover);}

#menu > a, #menu #icon-menu {font-size:0;}
#icon-menu svg {font-size:.9rem;}

#menu nav a {
	padding:1em;
}

#menu nav a.active {
  font-weight:bold;
  color:var(--hover);
  background:var(--hover-back);
}


/* -------------------- Menu Desktop ---------------------- */

nav.desktop {display:flex;}
nav.desktop a {font-size:var(--size-s1); line-height:1em;}

@media (min-width:800px){
	nav.desktop a:not(#icon-menu){display:initial;}
	#icon-menu {display:none;}
}

nav.desktop #icon-menu svg {
	height:1em;
	fill:var(--dark-2);
	transition:fill var(--fast);
}

nav.desktop #icon-menu svg:hover, nav.desktop #icon-menu svg:focus {fill:var(--light-2);}


/* -------------------- Menu Mobile ---------------------- */

@media (max-width:800px){
	#icon-menu {display:block;}
	nav.desktop a:not(#icon-menu){display:none;}
}

nav.mobile {display:none}
nav.mobile:target {display:flex;}

nav.mobile {
	position:fixed; top:0; bottom:0; left:0; right:0; z-index:10;
	flex-flow:column wrap; justify-content:center;
	background-color:rgba(255, 255, 255, 0.9);
}

nav.mobile a {
	margin:.25em var(--size-flex2); padding:2em;
	font-size:var(--size-m1);
	text-align:center;
	border-bottom:1px solid var(--dark-2);
}

nav.mobile a:last-child {border-bottom:none; text-transform:uppercase;}
nav.mobile a:hover, nav.mobile a:focus {color:var(--light-2B);}


/* -------------------- Intro ---------------------- */

#intro {
  display:flex; flex-direction:column; 
	width:100vw;
	position:relative;
	margin-top:var(--size-m2)
}

@supports (animation-timeline: scroll()){
	#intro::before{
		animation: parallax linear forwards;
		animation-timeline:scroll();
}}

#intro h1 {
  font-size:0;
  text-align:left;
  border:none
}


#intro h1 .logo,
#intro h1 img {
	width:200px;
	margin-left:var(--size-flex3);
	filter: drop-shadow(0 0 10px var(--dark-2));
}

#intro p {
  width: fit-content;
  margin:.5rem var(--size-flex3); padding:.5rem;
  color:white; font-weight:bold;
}

#intro p.blue {background: var(--dark-3);}
#intro p.red {background: var(--light-3);}

@media (min-width:800px){
  #intro h1 .logo, #intro h1 img {width:400px; margin:.5rem var(--size-flex5);}
  #intro p {margin-left:var(--size-flex5);}
}



/* ########################################################################## */
/* ------------------------------- 03 MAIN ---------------------------------- */
/* ########################################################################## */

main {padding:5vw 0 10vw;}                  /* Padding-top evita col·lapse de marges superiors entre pare i fills */
#portada main {padding-bottom:0;}           /* A eliminar */

main > * {
  max-width:var(--size-l4);
  margin:0 auto; padding:0 var(--size-m2);  /* Margin per centrar. Padding per a vista mòbil */
}

main > .block {
  max-width:var(--size-l5);
  padding:var(--size-m3) var(--size-flex3);
}

#content + .block {padding:0 var(--size-m2) var(--size-m3);}

/* ########################################################################## */
/* ------------------------------- 04 CONTENT ------------------------------- */
/* ########################################################################## */


hr {
  margin-bottom:1rem; padding-top:1.5rem;   /* Evita col·lapse de marges amb img flotada */
  border-bottom:2px solid var(--dark-2);
  clear:both;
}

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (max-width:801px){
.hidden-dktp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
}

/* -------------------- Titles ---------------------- */

h1, h2, h3, h4, h5, h6 {
  	overflow:hidden; /* Evita desbordament quan envolten un element flotant. Auto faria aparèixer barra de desplaçament en alguns casos. */
  margin:1rem 0;
	line-height:2rem;
	hyphens:auto; overflow-wrap: break-word; /* hyphens permet guions i ow evita desbordaments si falla hyphens */
}

h1 {
  overflow: auto; /* Evita desbordament quan envolten un element flotant */
  font-size:2rem;
  margin:0 0 2rem; padding:0 0 .5rem;
  border-bottom: 2px solid;
  font-weight:bold; text-align:center;
  text-transform: uppercase;
}

h2 {font-size:1.8rem; font-weight:bold;}
h3 {font-size:1.5rem; font-weight:normal;}
h4 {font-size:1.5rem; text-transform:uppercase; text-decoration:underline;}
h5 {font-size:1.2rem; font-weight:bold;}
h6 {font-size:1.2rem; text-indent:1em;}

#content h2 {margin-top:2.2rem;}
#content h3 {margin-top:1.5rem;}
#content h4 {margin-top:1.5rem;}
#content h5 {margin-top:1.2rem;}
#content h6 {margin-top:1.2rem;}

/* -------------------- Texts ---------------------- */

p, pre {
  margin:1em 0;
	line-height:1.5em;
	hyphens: auto; overflow-wrap: break-word;
}

p:last-child {margin-bottom:0;}

strong {font-variation-settings:'wght' 800; color:var(--dark-1);}
em {font-style:italic;}
abbr {text-decoration:underline dashed;}
mark {padding:0 .2em; background:var(--light-1); color:var(--dark-2);}
kbd {padding:.2em; text-transform:uppercase; border:1px solid;}
sub, sup {font-size:.8em; line-height:0;}
sup {vertical-align:super;}
sub {vertical-align:sub;}


/* -------------------- Destacats ------------------- */

.notice p {padding:1em 1.5em; overflow:hidden;} /* overflow evita col·lapses amb elements flotants */

.notice.note p {background: var(--light-2);}
.notice.exit p {color:#468f46; background:#468f4636; border:2px solid #468f46;}
.notice.alert p {color:#dd8f56; background:#dd8f5636; border:2px solid #dd8f56;}
.notice.error p {color:#dd5656; background:#dd565636; border:2px solid #dd5656;}


/* -------------------- Quotes ---------------------- */

blockquote p {
    padding: 1rem; margin-bottom:1em;
    background: #ffffff57;
    border-left: 4px solid var(--dark-2);
}

blockquote p:nth-child(2) {
	margin-top:-1em;
	text-align: right;
}

/* -------------------- Lists ---------------------- */

main ol,
main ul,
main dl {margin:2rem;}

main > ol,
main > ul,
main > dl {padding: 2em; background: rgba(255,255,255,.3);}

main ol li {margin-left:1em; line-height:1.2em; list-style:decimal;}
main ul li {margin-left:1em; line-height:1.2em; list-style:disclosure-closed;}

main ul:first-of-type li {margin-left:0; list-style:none;}

main ul li li				{list-style:circle;}
main ul li li li		{list-style:square;}
main ol li li				{list-style:upper-alpha;}
main ol li li li		{list-style:lower-alpha;}

dl dt {margin-bottom:0; line-height:1.2em;}
dl dt::before {content:'- ';}
dl dt::after {content:':'}

dl dd {margin-bottom:1em; line-height:1.2em; margin-left:1em;}

/* -------------------- Images ---------------------- */

figure.flow img {
    width:100%; height:20rem;
    margin:1rem auto .5rem;
    border-radius:var(--radius);
    object-fit:cover; object-position:top;
}

figure.flow figcaption {display:none;}
h1 + figure.flow img {height:20rem; object-fit:cover; margin-top:0;}

@media (min-width:800px){
  .flow .float-left {float:left; margin-right:1rem;}
  .flow .float-right {float:right; margin-left:1rem;}
  .flow .size-40 {width:40%;}
  .flow .size-50 {width:50%;}
  .flow .size-60 {width:60%;}
}

/* -------------------- Links ---------------------- */

button {
	display:block;
	margin:0 auto; padding:1em;
	font-size:1rem; line-height:1.5rem; font-weight:bold;
	border:2px solid var(--dark-2);
	background: var(--light-1);
	transition:color var(--fast), background var(--fast);
}

button a {color: var(--dark-2);}
button:hover, button:focus, button:active {color:var(--light-1); background:var(--dark-2);}

a {transition:color var(--fast), background var(--fast);}

a:hover, a:focus, a:active {color:var(--hover);}
a:hover svg, a:focus svg, a:active svg {fill:var(--hover);}

p a, label a {text-decoration:underline;}

a.button {
	display:block; overflow:auto; /* Evita desbordament quan envolten un element flotant */
	margin:2rem 0; padding:1em 2em;
	font-size:.8rem; line-height:1.5em;
	font-weight:bold; text-align:center; text-transform:uppercase;
	border:2px solid;
	border-radius: var(--radius);
	text-decoration:none;
	transition:all var(--fast);
}

a.button:last-child {margin-bottom:1rem;}

a.button:hover {color:var(--light-1); background:var(--dark-2);}
a.button:hover svg {fill:var(--dark-2);}

/* -------------------- Icons ---------------------- */

svg.icon {
	width:1rem; height:1rem;
	margin:0 .25em;
	font-size:1em;
	vertical-align:text-bottom;
	transition:fill var(--fast);
}

a:hover svg.icon, a:focus svg.icon {fill:var(--hover);}
.social a:hover svg, .social a:focus svg, .social a:active svg {fill:var(--hover);}

a[title~="Submit"] svg {width:.8rem;}

address a {text-decoration:none;}



/* -------------------- Tables ----------------------- */

table {
  display: block; overflow-x: auto;
	min-width:50%; max-width: 100%;
	text-align:center;
	border-collapse:separate;
	border-spacing:.5em;
	border:none;
}

th, td {
	padding:1em .5em;
	font-size:.8rem; line-height:1em;
}

th {font-weight:normal; text-transform:uppercase;}

@media (min-width:800px) {
	table {border-spacing:1em;}
	th, td {padding:1em; font-size:1rem;}
}

/* -------------------- Forms ----------------------- */

form {margin:0 var(--size-flex3); padding:4rem 0;}

form input, textarea, form button {
	display:block;
	width:100%; /* Elements input no ocupen el 100% encara que siguin display: block */
	padding:.5rem 1rem; margin:.5rem auto; border:1px solid var(--dark-2);
	font-family:font;
	font-size:1rem; line-height:1rem;
	color:var(--dark-2);
}

textarea {height:6em;}
input, textarea {transition:background-color var(--fast);}

input:focus, textarea:focus {border-style:dashed;; background-color:var(--light-3);}
input:not(:placeholder-shown):not(:focus),
textarea:not(:placeholder-shown):not(:focus) {background:var(--input-ok);}

[data-grav-field=checkbox]{
	margin:0 auto;
	padding:1em;
}

span.required {color:red;}

input#privacitat {display:inline; width:auto;}
input#privacitat + label {line-height:1em;}

button[type=submit]{
	padding:1em 2em;
	font-size: .8rem;
	text-transform:uppercase;
	border:2px solid var(--dark-2);
	border-radius: var(--radius);
}

/* -------------------- sections ----------------------- */

#content section.{}



/* ########################################################################## */
/* ------------------------------- 05 BLOCKS -------------------------------- */
/* ########################################################################## */


/* -------------------- Actions ----------------------- */

.actions {
	display:flex;
	margin:0;
	position:fixed; bottom:0; left:0; right:0;
	z-index:9999;
}

.actions a {
	width:100%;
	margin:0; padding:.5rem 1rem;
	font-size:0; line-height:1.5em; /* Només icones */
	font-weight:bold; text-align:center; text-transform:uppercase;
	display:block;
	color:var(--dark-2);
	background:var(--light-1);
	outline:2px solid var(--dark-2); border-radius:0;
	transition:all var(--fast);
}

.actions a svg.icon {
  width: 1.2rem; height: 1.2rem;
  margin-right:.5em;
  vertical-align: bottom;
	fill:var(--dark-2);
	transition:var(--fast);
}

.actions a:hover, .actions a:focus {color:var(--light-1); background:var(--dark-2);}
.actions a:hover svg, .actions a:focus svg {fill:var(--light-1);}

@media (min-width:800px){
	.actions{
		flex-direction:column; gap:.5rem;
		bottom:3rem; left:auto; right:2rem;
		}
	.actions a {
		width:auto;
		margin:0;
		border-radius: var(--radius);
		}
}


/* -------------------- Articles ----------------------- */

.articles {
	display:flex; flex-wrap:wrap; justify-content:center;
	padding-top:0;
}

.articles .card {
  display:block;
	margin:1rem;
	width:20rem;
  position:relative;
  overflow:hidden;
  content-visibility:auto;
}

.card figure {
	display:block;
	width:100%;	height:10rem;
  border-radius: var(--radius);
	overflow:hidden;
}

.card figure img {
	width:100%;
	transition: opacity var(--fast), transform var(--fast);
}

.card:hover figure img, .card:focus figure img {opacity:50%; transform: scale(1.2);}

.card time {
	display: block;
  position: absolute; top:0; right: 0;
  font-size: .8rem;
  line-height: 1em;
  padding: 1em;
  background: rgb(255,255,255,.5);
  border-radius: 0 0 0 1em;
}


/* -------------------- Boxes ------------------------ */

.block.boxes {
  max-width:100%;
  background-repeat:no-repeat; background-size:contain; background-position:bottom right;
}

.boxes h2 {margin:2rem 0; text-align:center;}

.boxes .wrap {
	display:flex; justify-content: center; flex-wrap:wrap; gap:2rem;
	margin:0;
}

.boxes article {
	padding:1em 2em;
	flex:1;
	position:relative;
	backdrop-filter: blur(7px);
  border-radius: var(--radius);
  color: var(--light-1);
  background: #00000061;
}

/* -------------------- Mixes ----------------------- */

.mixes {
	display:grid;
	grid-template-columns:1fr;
	place-items: center;
}

@media (min-width:800px){
    .mixes {grid-template-columns:1fr 1fr; grid-auto-rows:1fr;}
    .mixes article {grid-column:2;}
    .mixes figure {grid-column:1;}
}

.mixes article {position:relative;}
.mixes article p:last-child {text-align:right;}

.mixes figure {overflow:hidden; text-align:center;}
.mixes figure img {
    width:80%; height:auto;
    object-fit:cover; object-position:center;
}


/* -------------------- Omap ----------------------- */

#omap {
    width:100%; height:200px; max-width:initial;
    margin:0;
    border-top:2px solid var(--colorA);
    content-visibility:auto;
}

@media (min-width:800px){#omap{height:500px;}}

.leaflet-control-attribution {line-height:1rem;}


/* ########################################################################## */
/* ------------------------------- 06 FOOTERS -------------------------------- */
/* ########################################################################## */


footer {
	padding:4rem 10%;
	clear:both;
	font-size: .8rem;
	color: var(--light-2);
	background-color: var(--dark-2);
	border-top:2px solid var(--dark-2);
}

footer .info {
	padding:1rem;
	font-style:normal;
	text-align:center;
}

footer .info.webmap .wrap {
  display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem;
  max-width:var(--size-l4);
  margin:0 auto;
  text-align:left;
}

@media (min-width:800px){footer .info.webmap .wrap {grid-template-columns: repeat(2, 1fr);}}
@media (min-width:1200px){footer .info.webmap .wrap {grid-template-columns: repeat(4, 1fr);}}

footer .info.webmap ul li {
  line-height:1.5em;
  fill:var(--light-2);
  list-style:none;
}

footer p {margin:0; text-align:left;}
footer .info img {width:60vw;}

footer .info.logo svg {
  width:var(--size-l2); max-width: 100%; height:auto;
  margin:0 auto;
}

footer .info.logo p {text-align: center; transform: translateY(-50px);}

.info.legal, .segells {
	display:flex; flex-wrap:wrap;
	margin:1em 0 0 0;
}

.segells {justify-content:center;}
.segells svg {width:100px;}

.info.legal {justify-content:space-around;}
.info.legal p {margin:0;}

.info.legal ul {display:flex; justify-content:center; align-items:center;}
.info.legal ul li {line-height:1.5em; list-style:none;}
.info.legal ul li:not(:last-child)::after {content:'·'; margin:auto .25em;}


@media (min-width:800px){
	footer {padding-bottom:1rem;}
	footer .info img {width:25rem;}
}


/* ########################################################################## */
/* ------------------------------- 07 ANIMATIONS ---------------------------- */
/* ########################################################################## */


@keyframes parallax {
  from { background-position-y: 0px; }
  to { background-position-y: -400px; }
}