/* ------------------------------
   VARIABLES DE DISSENY
------------------------------ */
 
:root {
  --gray-900: #2a2f36;
  --gray-700: #5a616b;
  --gray-300: #d9dde2;
   --blau-clar:#BDDCFB;
   --grey: #f5f5f7;

  --white: #ffffff;
  --accent-granate: #7a0f2e;
  --color-primary:#1f4f7b;
  --color-primary-light:#90BBE2;
    --grey: #f5f5f7;
  --shadow:  0px 5px 15px rgb(217,221,226, 0.8);
  --shadow-cont: 0px 5px 15px var(--grey)/* rgb(90,97,107)*/;
  --shadow-button:rgb(68,68,68,0.8), rgb(68,68,68, 0.5);
   --transition: 0.25s ease;
   --cont-border:0.5px solid #5a616b;
}

/* css */
/*******/

/* estructura */
/**************/
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  gap: 0.87%;
}

body {
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #000000;
  font-size: 62.5%;
  transition: margin-top 0.3s ease;
}
main {
  width: 100%;
}

footer, header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  gap: 0.87%;
}

.footer{
  background-color: var(--color-primary);
  color:var(--white);
}
footer h5{
  color: var(--gray-300);
}
.footer a{
  color:var(--color-primary-light);
  margin-right:20px;
}
footer ul li{
    list-style:none;
    color:var(--white);
}
 

.footer a:hover{
  color:var(--white);
}
.footer a:active{
  color:#FCB3BE;
}


.footer-drets{
  width: 100%;
  margin:0;
  padding:0;
  background-color: var(--accent-granate);
}
.footer-drets p{
  color: var(--white);
  text-align: center;
  margin:auto;
}


div{
  width: 100%;
}

section {
  width: 100%;
  padding: 0;
  margin:0;
}

.subtitol{
  color: var(--white);
  background-color:var(--accent-granate);
  font-weight: 500;
  padding:5px 15px;
}
.form-row-privat{
  display: flex;
  flex-flow: row wrap;

}
.div{
  width: 100%;
  display:flex;
  flex-flow: row wrap;
  padding:10px 15px;
    margin-top:15px;
  background-color: var(--grey);
  border: 1px solid #90BBE2;
}
.form-docs{
  width: 100%;
  margin:15px 0;
  padding:5px 10px;
}

.boto-retorn{
  width: 100%;
  color:var(--white);
  margin:30px 0;
  background-color: var(--color-primary);
  padding:15px;
  text-align: center;
}

.boto-retorn:hover{
  color:var(--white);
background-color: var(--gray-700);
}
img, video, figure  {
  width: 100%;
  height: auto;
  display: block;
  margin:auto;
}
.img-blog{
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
/*border:1px solid var(--white);*/
border-radius: 5px;

}
figcaption .contact-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;          /* anul·la el display:flex del menú */
    text-align: left;        /* assegura alineació a l'esquerra */
}

figcaption .contact-icons li {
    display: inline-block;   /* icones en línia */
    margin-right: 10px;      /* separació entre icones */
}
.contact-icons i{
font-size: 1.1rem;
}
.contact-icons a {
    color: inherit;          /* manté el color del teu disseny */
    text-decoration: none;
    font-size: 1.4em;        /* mida icona */
}

.presentacio .contenidor-1200, .qui-som .contenidor-1200{
  margin:auto;
    display: flex;
    flex-flow: column wrap;
  align-items: flex-end;  
 
}
.contenidor-1200{
  width:96%;
  max-width: 1200px;
  margin:auto;
  padding:2%;
      display: flex;
    flex-flow: row wrap;
 /* align-items:flex-start;*/
  align-items: flex-start;
  gap:0.87%;

}


.mida100{
  width: 100%;
  height:auto;
  margin:auto;
  padding:2%;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap:0.87%;

}
.mida090, .mida085, .mida080, .mida075,.mida070, .mida066, .mida060,.mida055, .mida050, 
.mida045, .mida040,.mida033, .mida025, .mida020, .mida012, .mida008{
  height:auto;
  padding:5%;
  margin:0 auto;
  gap:0.87%;
 flex: 0 0 auto;
     display: flex;
  flex-flow: row wrap;
  align-items: flex-start; 
  text-align: left;
}


.mida090{
    width: 89.76%;
}
.mida080{
    width: 79.78%;
}
.mida075{
    width: 74.8%;
}
.mida066{
    width: 66.35%;
}
.mida060{
    width: 60.32%;
}
.mida055{
    width: 54.50%;
}
.mida050{
    width: 49.55%;

}

.mida045{
  width: 44.59%;
}

.mida040{
  width: 39.64%;
}
.mida033{
    width: 32.75%;
}
.mida025{
    width: 24.33%;
}
.mida020{
    width: 19.3%;
}
.mida012{
    width: 11.72%;
}
.mida008{
width: 7.52%;
}

/* textos */
h1, h2, h3, h4, h5, h6{
    margin-right: auto;
    width: 100%;
}
h1 {
  color:var(--white);
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
  line-height: clamp(2.6rem, 5vw, 4.6rem);
}

h2{
  color:var(--gray-900);
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  line-height: clamp(2rem, 3.4vw, 3.2rem);
}
h3{
  color:var(--color-primary);
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: clamp(1.9rem, 3.2vw, 2.9rem);
}
h4{
  color:var(--gray-700);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: clamp(1.7rem, 2.6vw, 2.4rem);
  

}

h5{
  color:var(--color-primary);
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: clamp(1.5rem, 2.4vw, 2.2rem);
  margin-bottom:0;
}
h6{
  color:var(--accent-granate);
  font-size: clamp(0.95rem, 1.4vw, 1.3rem);
  line-height: clamp(1.3rem, 1.8vw, 1.8rem);
margin:0;
}
.h6-bloc{
  color:var(--color-primary);
}
p, .error-message, .text-privat, .editor {
  font-size: clamp(0.95rem, 0.9vw, 1.05rem);
  line-height: clamp(1.4rem, 1.4vw, 1.7rem);
}
.font-resum{
  font-size: clamp(0.85rem, 0.8vw, 0.95rem);
line-height: clamp(1.25rem, 1.2vw, 1.55rem);
}

.negreta{
  color:var(--color-primary);
  font-weight: bold;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: clamp(1.8rem, 3vw, 2.6rem);
}

.btn-div a {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: clamp(1.4rem, 2vw, 2rem);
  color:var(--white);
font-weight: 300;
text-decoration: none;
box-shadow: var(--shadow-button);
background-color: var(--gray-900);
transition: background 0.3s ease;
padding:1% 2%;

}
.btn-div a:hover{
    color: var(--white);
  background-color: var(--color-primary);
  transition: background 0.3s ease;
  font-weight: 300;
}
.btn-div a:active{
  color: var(--white);
  background-color: var(--accent-granate);
  transition: background 0.3s ease;
  font-weight: 300;
}


.etiqueta{
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  line-height: clamp(1.2rem, 2vw, 1.8rem);
}
.etiqueta-main {
  font-size: clamp(0.85rem, 1.3vw, 1.1rem);
  line-height: clamp(1.2rem, 1.8vw, 1.6rem);
}
figcaption p, .resum {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  line-height: clamp(1.2rem, 1.6vw, 1.6rem);

}
time {
  width: 100%;
  font-size: 0.9rem;
  color: var(--gray-900);
  font-style: italic;
  font-weight: 500;
  display: block; /* si vols que ocupi línia sencera */
margin-bottom:10px;
text-align: left;
}

.enllac-blog{
  display:flex;
  text-decoration: none;
}

label {
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  line-height: clamp(1.2rem, 2vw, 1.8rem);
}

input,
select, textarea{
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  line-height: clamp(1.2rem, 2vw, 1.8rem);
 /* aproximadament 5 línies */
}
.editar-post{
  min-height: calc(1.2em * 25); 
}

#contactForm button[type="submit"] {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: clamp(1.4rem, 2vw, 2rem);
}

ul li {
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  line-height: clamp(1.3rem, 1.6vw, 1.7rem);
  color: var(--gray-900);
  margin-bottom: 0.4rem;
}

main a{
  color:var(--color-primary);
  font-weight: bold;
    font-size: clamp(0.9rem, 1vw, 1.05rem);
  line-height: clamp(1.3rem, 1.6vw, 1.7rem);
}
main a:hover{
  color:var(--accent-granate);
  font-weight: bold;
}
main a:active{
  color:var(--gray-700);
  font-weight: bold;
}

figcaption{
  width: 100%;
  margin-top:15px;
  padding:8%;
  text-align: left;

}
.foto-presentacio{
  max-width: 250px;
  height:auto;
}
.peu-blog{
  margin-top:0;
  padding:2%;
}
.footer a{
  word-wrap: break-word;
}
address{
 margin: auto; 
 padding: 5% ;

}



/***********************************************/
/**********         phone         **************/
/***********************************************/

/* ============================
   RETÍCULA RESPONSIVE
============================ */

/* telèfon */
@media (max-width: 659px) {

   .mida085, .mida080, .mida075, .mida070,
  .mida066, .mida060, .mida055, .mida050,
  .mida045, .mida040, .mida033, .mida025,
  .mida020, .mida012, .mida008 {
      width: 96%;
      padding: 3%;
      margin-bottom: 0.87%;

  }
header .idioma, header .header-search, header .contact-icons{
  display:none;
}
}

@media (min-width: 0px) and (max-width: 378px) {

.blog-media img, .imatge-responsive img{
  max-height: 210px;
  width: auto;
}
.blog-media{
display:flex;
flex-direction: column;
}
.certificats{
  height:150px;
  width: auto;
}
.presentacio .etiqueta, .qui-som .etiqueta{
  margin-top:50%;
}
}

@media (min-width: 379px) and (max-width: 451px) {
.blog-media img, .imatge-responsive img{
  max-height: 210px;
  width: auto;
}
.blog-media{
display:flex;
flex-direction: row;
}
.presentacio .etiqueta, .qui-som .etiqueta{
  margin-top:50%;
}
}
@media (min-width: 452px) and (max-width: 659px) {
.blog-media img, .imatge-responsive img{
  max-height: 250px;
  width: auto;
}
.blog-media{
display:flex;
flex-direction: row;
}
.presentacio .etiqueta, .qui-som .etiqueta{
  margin-top:50%;
}
}
/* --- Responsive --- */
@media (max-width: 768px) {
.logo {
  width: 240px;
  margin-left: 0 0 auto 60px;
      position: absolute;
    top: 0;
    right: 0;
 }
header{
  min-height:80px;
}
header img.logo {
    height: clamp(40px, 8vw, 90px);
    width: auto;
}

    /* Amagar menú per defecte */
    .principal ul {
        display: none !important;
        flex-direction: column;
        width: 100%;
    }

    /* Mostrar quan té la classe .show */
    .principal ul.show {
        display: flex !important;
    }

    /* Botó hamburguesa visible */
    .menu-toggle {
        display: block !important;
    }

}
@media (min-width: 659px) and (max-width: 681px) {
.idioma, .header-search, .contact-icons{
  display:none;
}
.presentacio .etiqueta, .qui-som .etiqueta{
  margin-top:30%;
}
}
@media (min-width: 682px) and (max-width: 768px) {
.idioma, .contact-icons{
  display:none;
}
.presentacio .etiqueta, .qui-som .etiqueta{
  margin-top:35%;
}
}
/* això no se si funciona*/
@media (min-width: 769px) and (max-width: 971px) {
.contact-icons{
  display:none;
}
.presentacio .etiqueta, .qui-som .etiqueta{
  margin-top:20%;
}
}
/*tablets*/
@media (min-width: 660px) and (max-width: 1007px) {

  main,
  footer,
  div {
    align-items: center;
    justify-content: space-around;
  }
    .contenidor-1200{ 
    align-items: top;
}
   .mida085, .mida080, .mida075, .mida070 {
      width: 96%;
      padding: 3%;
      margin-bottom: 0.87%;
  }

  .mida066, .mida060, .mida055, .mida050,
  .mida045, .mida040, .mida033, .mida025,
  .mida020, .mida012, .mida008 {
      width: 45%;
      padding: 3%;
      margin-bottom: 0.87%;
  }
footer .mida033{
  width: 50%;
}
footer .mida033:nth-of-type(3) {
    width:100%; 
}
}

/* header navegacions*/

/* navegació principal*/
/*--------------------*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* navegació idiomes i icones - estils compartits*/

.contact-icons, .idioma ul{
   /* margin:auto;
    padding:5px;*/
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style: none;
}

.contact-icons li, .idioma li{
  width: 40px;
  height: 40px;
  padding:5px;
  margin:auto;
  vertical-align: middle;
}

.contact-icons li, .idioma li{
  width: 40px;
  height: 40px;
  padding:5px;
  margin:auto;
}

/* navegació idiomes */
.idioma button{ 

border-radius: 999px;
  padding: 0.5rem 0.25rem ;
  margin: auto;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}
.idioma button:hover{
    color:var(--white);
    background-color: var(--color-primary);
    border-radius: 999px;
  padding: 0.5rem 0.25rem ;
}
.idioma button:active{
    color:var(--white);
    background-color: var(--gray-700);
    border-radius: 999px;
  padding: 0.5rem 0.25rem ;
}

footer .idioma li{
  width: 50px;
  height: 50px;
}
footer .idioma button{
  color:white;
}

footer .idioma button:hover{
  background-color: var(--gray-900);
}

/* enllaços header navegació*/

/* ICONES */ 
.contact-icons a{ 
    color:var(--gray-900); 
    background-color: var(--grey); 
    font-size: 15px; 
    padding:8px 10px;
     border-radius: 999px; 
    transition: all var(--transition); 
}

.contact-icons a:hover { 
    color: var(--white); 
    background-color: var(--color-primary); 
    transform: translateY(-2px); 
}
.contact-icons a:active{ 
    color: var(--white); 
    background-color: var(--gray-700); 
    transform: translateY(-2px); 
}


header{
position: sticky; 
top: 0; 
background: var(--white); 
backdrop-filter: blur(12px); 
z-index: 1000; 
border-bottom: 1px solid var(--gray-300); 
box-shadow: var(--shadow-cont);
}

/* navegació primer contenidor de header*/
.header-inner{ width: 100%; 
  margin:0 auto; 
    padding: 4px 12px; 
    display:flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; 
    position: relative; 
}

/* navegació principal */
/*---------------------*/
/* Contenedor del menú */
.principal{
    width: 100%;
    background-color: var(--color-primary);
    text-align: center;
    overflow: hidden;
}

/* Lista horizontal por defecto */
.principal ul {
    margin:0;
    padding:0;
    list-style: none;
    display: flex;
    justify-content:center;
    transition: max-height 0.35s ease;
 }

.principal ul li a {
display: block; 
padding: 10px 20px; 
color: var(--white); 
text-decoration: none; 
font-weight:400;
transition: background var(--transition), color var(--transition); }

.principal li a:hover { 
    background-color: var(--gray-900); 
}
.principal li a:active { 
  color:var(--white);
      background-color: var(--gray-700); 
}
#menu li a.active { 
    color:var(--white);
background: var(--accent-granate); 
 }

/* Botón hamburguesa oculto en escritorio */
.menu-toggle {
    display: none;
    background: var(--gray-900);
    color: white;
    border: none;
    padding: 14px 20px;
    font-size: 18px;
    cursor: pointer;
}

.logo{
    transition: transform 1s ease;
}
.logo:hover{
    transform: scale(1.03);
}
.logo img{
     max-width: 280px;
}
.logo{
  max-width: 300px;
}

/* cerca */
    
.header-search, footer .header-search, .blog-search{
    background: var(--white);
    border-radius: var(--radius);
    padding: 1px 0.5rem 1px 0.9rem;
    border: 1px solid var(--gray-300);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
}

.header-search input, footer input, .blog-search input{ 
    border: none;
    font-size: 1.5em;
    margin:auto; 
    padding: 6px 10px; 
    background: transparent; 
    color: var(--blue);
    outline: none;
    border-radius: 6px; 
    transition: border var(--transition); 
    box-shadow: var(--transition); 

} 
.blog-search{
  display: flex;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  
}
.blog-search input {
  width: 95%;
  color:var(--color-primary);
}
.blog-search ::placeholder{
  color:darkgrey;
}

.cerca-main button i{
margin:auto;
}
.cerca-main{
  padding:10px 20px;
  color: var(--white);
  background: var(--color-primary);
  border:none;
   transition: background 0.25s ease;
}
.cerca-main:hover{
  background: var(--accent-granate);
  transition: background 0.25s ease;
}
.cerca-main:active{
  background: var(--gray-900);
  transition: background 0.25s ease;
}
/*
footer:input{
  color:var(--gray-900);
}
footer input:focus{
  color:var(--gray-900);
}
*/
footer .contenidor-flex i{
  color:var(--white);
}
.footer-icons{
display:flex;
flex-direction:row;
}
footer .header-search i{
  color:var(--gray-900);
}

.header-search:hover, footer .header-search:hover{
  background: var(--gray-300);
  border-color: var(--white);
  box-shadow: 0 0 0 3px var(--grey)/*rgba(31, 79, 123, 0.15)*/;
}

.header-search input:focus, .footer input:focus{ 
  border-color: transparent; 
  box-shadow: none; 
  outline: none; 
}
footer .header-search{
  width: 90%;
}
.blog-search{
  width: 100%;
}

.header-search:focus-within, footer .header-search:focus-within{
  background: var(--grey);
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--grey)/* rgba(31, 79, 123, 0.25)*/;
}


.header-search button, footer .header-search button {
  border: none;
  background: transparent;
  color: var(--grey-dark);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}




/* presentacions*/

.presentacio, .qui-som{
  width: 100%;
  height:500px;
   display: flex;
  align-items: flex-end; 
}

.finques, .contacte, .legals, .blog-imatge, .professional{
  width: 100%;
  height:300px;
   display: flex;
  align-items: flex-end; 
}

.presentacio .contenidor-1200 {
  text-align: left;        /* Assegura que el text queda alineat a l'esquerra */
}
.presentacio{
background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/01.png') no-repeat center center scroll;
background-size: cover;
}
.qui-som{
background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/02.png') no-repeat center right scroll;
background-size: cover;
}


/*****************************************/
@media (max-width: 960px) {
.presentacio{
background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/12.png') no-repeat top center scroll;
background-size: cover;
}
.qui-som{
background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/13.png') no-repeat top right scroll;
background-size: cover;
}


}

.contacte{
background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/11.png') no-repeat center center scroll;
background-size: cover;
}
.finques{
background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/14.png') no-repeat center center scroll;
background-size: cover;
}
.legals{
background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/15.png') no-repeat center left scroll;
background-size: cover;
}
.professional{
background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/17.png') no-repeat center left scroll;
background-size: cover;
}
.blog-imatge{
  background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/16.png') no-repeat center left scroll;
background-size: cover;
}

.resultats-blog{
  background: linear-gradient(rgba(35,71,107,0.6), rgba(35,71,107,0.6)),
            url('../imatge/17.png') no-repeat center left scroll;
background-size: cover;
}



.etiqueta{
  width: auto;
  padding:0.5% 2%;
  color:var(--white);
  background-color: rgba(35,71,107,0.5);
  margin-right: auto;

}
.etiqueta-main{
  color:var(--color-primary);
  font-weight:bold;

}
.fons-gris{
  background-color: var(--grey);
  border:5px solid var(--white);

}
.fons-blanc{
  background-color: var(--white);

}




/* formulari cerca articles */
.form-articles, select{
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin:auto; 
  color: var(--gray-700);
  border:none;
}
.form-articles input{
  height: 50px;
    color: var(--gray-700);
  border:none;
}

select{
  height: 50px;
}


.btn-cerca-articles{
  height: 50px;
  padding:5px 15px;
  margin-top: auto;
  background-color: var(--white);
  border:none;
  font-weight: bold;
}

label{
    color: var(--white);
}


/*formulari de contacte i logins*/
#contactForm{
  box-shadow: var(--shadow);
}
.form-group{
  margin:15px auto;
}

.form-row{
  width: 100%;
  padding:1% 4%;

}

/*editors*/
.editor-toolbar{
  width: 100%;
  margin:10px 0;
}
.editor-toolbar button{
  width: 90px;
  padding:10px;
  font-size: 1.4em;
  color:var(--white);
background-color: var(--color-primary);
}
.editor-toolbar button:hover{
  background-color: var(--gray-900);
}
.editor-toolbar button:active{
  background-color: var(--accent-granate);
}
.editor {
    min-height: 300px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ccc;
      font-size: clamp(0.95rem, 0.9vw, 1.05rem);
  line-height: clamp(1.4rem, 1.4vw, 1.7rem);

}



.form-row-privat{
  width: 100%;
}
.form-row-privat input{
  width: 100%;
  padding:10px 15px;
  margin:15px 0;

}
.form-row input, select, textarea{
  color:var(--gray-700);
  width: 100%;
  padding:2%;

}
label{
    color:var(--gray-700);
  width: 100%;
  padding:2%;
  font-weight:500;

}

.checkbox-group {
  width: 100%;

}
#mostra-contrasenya{
  margin:25px 0;
}
.label-privacitat {width: 100%;
  display: flex;
  align-items: center;
  gap: 10px; /* espai entre checkbox i text */
  font-weight: normal;
  color: var(--gray-900);
  cursor: pointer;
}

.label-privacitat input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.label-privacitat a {
  font-weight: 300;
  color: var(--gray-900);
  text-decoration: underline;
}

.label-privacitat a:hover {
    font-weight: 300;
  text-decoration: none;
}




#contactForm input[type="text"],
#contactForm input[type="tel"],
#contactForm input[type="email"],
#contactForm select,
#contactForm textarea {
      border: 1px solid var(--gray-300);
      color: var(--gray-900);
      background: var(--white);
      transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(31, 79, 123, 0.15);
      background: #ffffff;
    }


#contactForm .error-message {
      color: var(--accent-granate);
      font-weight: bold;
      margin-top: 0.9em;
      display: none;

}


#contactForm .error input,
#contactForm .error select,
#contactForm .error textarea {
      border-color: var(--accent-granate);
      background: #fff5f7;
    }

#contactForm .error .error-message {
      display: block;
}

#contactForm button[type="submit"] {
  margin-top:25px;
      background: var(--color-primary);
      color: var(--white);
      border: none;
      padding: 0.7rem 1.8rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      box-shadow: 0 8px 18px rgba(31, 79, 123, 0.25);
      transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    }


#contactForm button[type="submit"]:hover {
      background: var(--gray-700);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(31, 79, 123, 0.3);
    }

#contactForm button[type="submit"]:active {
  background:var(--accent-granate) ;
      transform: translateY(0);
      box-shadow: 0 5px 14px rgba(31, 79, 123, 0.2);
}








/* cookies */

.aviso-cookies{
    color:var(--white);
    display:none;
    font-size: 0.8em;
    background:var(--color-primary);
    padding:1% 2%;
    max-width:1200px;
    line-height: 1.4em;
    position:fixed;
    bottom: 15px;
      z-index:100;

}

.aviso-cookies h5{
    font-size: 1em;
}
.aviso-cookies.activo{
    display:block;
}


.aviso-cookies .titulo,.aviso-cookies .parrafo{
    margin-bottom:10px;
}

.aviso-cookies .boton{
   font-weight: 700;
    font-size: 0.9em;
    width: 80vw;
    max-width: 180px;
    background: var(--gray-900);
    padding:10px;
    border:none;
    color:#ffffff;
    cursor:pointer;
    transition: .3s ease all;
    margin: 3% auto;
}

.aviso-cookies .boton:hover, .aviso-cookies .boton:focus{
    background: grey;
      
}

.aviso-cookies .boton:active{
    background:var(--accent-granate);
    
}


.enlace a{
    color:var(--white);
    text-decoration: none;
}
.privada-a{
  margin-right:25px;
}

.fondo-aviso-cookies{
display:none;
background: rgb(255,255,255, 0.3);
position: fixed;
z-index:99;
width: 100vw;
height: 100vh;
top:0;
left:0;
}

.fondo-aviso-cookies.activo{
display: block;
}

/********** Paginació de la pàgina **************/

/* Contenidor */
.paginacion ul {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 40px auto;
}

/* Elements de la llista */
.paginacion li {
    list-style: none;
    margin: 0 5px;
    background: var(--gray-300);
    font-size: 1.4em;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Enllaços */
.paginacion li a {
    padding: 15px 25px;
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Hover */
.paginacion li a:hover {
    color: var(--white);
    background-color: var(--gray-700);
}

/* Active */
.paginacion li.active {
    padding: 15px 25px;
    color: var(--white);
    background-color: var(--accent-granate);
    font-weight: bold;
}

/* Estat deshabilitat */
.paginacion li.disabled {
    padding: 15px 25px;
    cursor: not-allowed;
    color: var(--color-primary);
    background: var(--white);
    border:5px solid var(--grey);
    font-weight: bold;
}

footer ul {
  width: 100%;
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

footer ul li {
  width: 100%;
  padding-left: 0;
  margin-left: 0;
}
@media (min-width: 700px) and (max-width: 1007px) {
.footer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start; /* Alinea tots els elements a l'esquerra */
}

footer .mida033{
  width: 50%;
max-width: 340px;
}


}