/****** GENERAL ******/
:root {
    /* Mides */
    --h-header-logos:       5.5em;
    --h-header-logos-mov:     4em;
    --h-header-menu:        2.5em;
    --h-footer:               6em;
    --padding-pag:            1em;
    --section-margin:        1.5em;

    /* Colors */
    --blanc:   white;
    --negre:   black;
    --verd:    green;
    --col-100: rgb(186, 218, 85);
    --col-85:  rgb(196, 223, 110);
    --col-70:  rgb(206, 229, 136);
    --col-60:  rgb(213, 232, 153);
    --col-40:  rgb(227, 240, 187);
    --col-30:  rgb(234, 243, 204);
}
::selection {
    color: var(--blanc);
    background-color: var(--col-100);
}
@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-Variable.ttf');
}
* {
    box-sizing: border-box;
    font-family: Raleway, Arial, Ubuntu, sans-serif;
}
body {
    padding: 0;
    margin: 0px auto !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1000px;
    padding: 0 var(--padding-pag);
    background: var(--blanc);
    overflow-x: hidden;
}

a { text-decoration: none; }
ul {
    list-style: none;
    padding: 0px;
}
.vw100 {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

/****** HEADER ******/
header {
    width: 100%;   
    z-index: 1;
}
#menu {
    width: 100%;
    height: var(--h-header-menu);
}
header nav {
    height: 100%;
    padding: 0;
}
header nav ul {
    list-style: none;
    height: 100%;
    padding: 0;
    font-size: .9em;
    background: var(--col-30);
    margin: 0;
}
header nav ul li {
    width: 20%;
    height: 40px;
    text-align: center;
    background: var(--col-30);
}
header nav ul li a {
    text-decoration: none;
    color: var(--verd);
    display: block;
    padding: .7em;
}
.menu:hover   { background: var(--col-60) !important; }
.menu-activat { background: var(--col-85) !important; }
#header-logos {
    display: flex;
    justify-content: space-between;
    height: var(--h-header-logos);
}
#header-logo img,
#header-marca img,
.header-lang {
    height: 100%;
}
#header-marca {
    padding: .7em;
    text-align: center;
}
.header-langs {
    width: 30%;
    margin: 0;
    display: flex;
    justify-content: space-between;
}
.header-lang img {
    aspect-ratio: 1;
    height: calc(100% - 2.6em);
    margin: 1.3em 0;
    border-radius: 50%;
    border: 2px solid var(--negre);
}
#header-menu {
    display: none;
    width: 1.4em;
}
#header-globe {
    display: none;
    width: 1.6em;
}
.nav-toggle-label, .nav-toggle-globe-label {
    color: var(--verd);
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 3;
    display: none;
}
.nav-toggle, .nav-toggle-globe {
    pointer-events: none;
    display: none;
}
.icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
}
.menu-nav {
    list-style: none;
    position: static;
    display: flex;
}
.nav-toggle:checked ~ .header-seccions { left: 0; }
.nav-toggle-globe:checked ~ .header-langs { right: 0; }
.nav-overlay, .nav-globe-overlay{
    position: fixed;
    top: var(--h-header-logos-mov);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--h-header-logos-mov));
    background: rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    cursor: pointer;
    z-index: 1;
    display: none;
}
.nav-toggle:checked ~ .nav-overlay {
    opacity: 1;
    visibility: visible;
}
.nav-toggle-globe:checked ~ .nav-globe-overlay {
    opacity: 1;
    visibility: visible;
}
.imgseleccionat { opacity: 0.4; }
.img { transition: opacity 0.4s; }
.img:hover { opacity: 0.5; }

/****** GALERIA ******/
.galeria-container {
    overflow: hidden;
    aspect-ratio: 1.77;
    margin-top: 1em;
}
.galeria-imgs {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}
.galeria-imgs img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* amagades per defecte */
}

/****** CONTINGUT ******/
h1 {
    color: var(--col-100);
}
section {
    margin-bottom: var(--section-margin);
}
.contingut {
    font-size: 1.1em;
    margin-top: 2em;
}
.list-plus, list-disc {
    list-style: none;
    padding-left: 0;
    margin: 0;
    line-height: 1.5em;
}
.list-plus > li::before {
    content: "+";
    color: var(--col-100);
    margin-right: 10px;
    margin-top: 0px;
    font-size: 2.2em;
}
.list-plus > li {
    display: flex;
    align-items: flex-start;
    margin: .8em auto;
}
.list-disc > li {
    display: flex;
    align-items: flex-start;
}
.list-square {
    list-style: square outside;
    line-height: 1.5em;
    margin-left: 1em;
}
.list-square > li {
    margin: .8em auto;
}
.list-disc li::before {
    content: "−";
    font-weight: bold;
    margin-right: 10px;
    color: var(--col-100);
    margin-right: 10px;
    margin-top: 0px;
    font-size: 1.1em;
}
li::marker {
    color: var(--col-100);
}
ul ul { /* llistes recursives */
    margin: .4em 0 .4em .5em;
}
#ul-beneficis {
    max-width: 50%;
}
#img-beneficis {
    display: flex;
    justify-content: space-between;
    position: relative;
}
#img-beneficis img {
    width: calc(50% - .5em);
    aspect-ratio: 1.5;
    object-fit: cover;
}
#img-beneficis-float {
    position: absolute;
    top: calc(-100% - 1em);
    right: 0;
}
#curri-nom {
    text-align: center;
    color: var(--verd);
    font-size: 1.2em;
}
#img-curri {
    width: calc(50% - .5em);
    float: right;
    margin-left: 1.5em;
    margin-bottom: .5em;
}
#div-horaris {
    min-height: calc(100vh - var(--h-header-menu) - var(--h-header-logos) - var(--h-footer));
    padding: 2em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#horaris-btns { display: none; }
#horaris {
    width: 100%;
    text-align: center;
    color: var(--verd);
    table-layout: fixed;
}
#horaris td, th { height: 1.8em; }
#horaris tr:nth-child(even) { background: var(--col-60); }
#horaris tr:nth-child(odd)  { background: var(--col-30); }
#horaris th {
    background: var(--col-100);
    color: var(--blanc);
    font-weight: bold;
}
.preus {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3em auto;
    border-collapse: collapse;
}
.preus td {
    border-bottom: 1px solid var(--verd) !important;
    padding: .5em 0;
}
.preus-preu {
    text-align: right;
    color: #999;
    font-style: italic;
}
.contacte {
    display: flex;
    justify-content: space-around;
    margin: 2.5em auto;
}
.contacte a {
    color: var(--verd);
    text-decoration: underline;
    font-size: 1.3em;
}
iframe {
    border: 0;
    background-color: transparent;   
}
.box-vertical { /* per mostrar 100vh en total al contacte */
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--h-header-menu) - var(--h-header-logos));
}
.box-center { flex: 1 1 auto; }
.box-bottom { flex: 0 1 auto; }

/****** PEU ******/
footer {
	width: 100%;
	margin-top: auto !important;
	background-color: var(--col-85);
	height: var(--h-footer);
	border-top: 2px solid var(--negre);
}
footer a { color: var(--negre) }
footer > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--padding-pag);
}
footer > div > div {
    width: 33%;
}
footer .footer-left   { text-align: left; }
footer .footer-center { text-align: center; }
footer .footer-right  { text-align: right; }