:root {
  /* Tipografia */
  --font-body: 'Montserrat', sans-serif;

  --p-size: clamp(0.9rem, 0.9vw, 1.1rem);
  --p-line: 1.65;

  --figcaption-size: clamp(0.8rem, 0.75vw, 0.9rem);
  --figcaption-line: 1.65;

  --footer-text-size: clamp(0.85rem, 0.75vw, 1rem);
  --footer-text-line: 1.6;


  --h1-size: clamp(2.4rem, 4vw, 4.8rem);
  --h1-line: 1.15;
  --h2-size: clamp(2rem, 3.2vw, 3.6rem);
  --h2-line: 1.2;
  --h3-size: clamp(1.8rem, 2.6vw, 2.8rem);
  --h3-line: 1.25;
  --h4-size: clamp(1.6rem, 2.2vw, 2.2rem);
  --h4-line: 1.3;
  --h5-size: clamp(1.4rem, 1.8vw, 2rem);
  --h5-line: 1.35;
  --h6-size: clamp(1.2rem, 1.4vw, 1.6rem);
  --h6-line: 1.4;

  /* Colors */
  --color-primary: #0169a4;
  --color-primary-hover: #C96A1B;

  --color-secondary: #C96A1B;
  --color-secondary-hover: #365A72;

  --color-accent: #45662C;
  --color-accent-hover: #B85E18;

  --color-text: #3B3B3B;
  --color-text-soft: #495057;
  --color-text-muted: #868e96;
  --color-text-inverse: #ffffff;

  --bg: rgba(255, 255, 255, 0.9);
  --color-bg-soft: #f8f9fa;
  --color-bg-strong: #e9ecef;

  --color-border-a: #004A75;
  --color-border-b: #365A72;
  --color-border-c: #3B3B3B;

  --border-table: 1px solid #868e96;

  --color-error:#ce181e;

  /* Espais */
  --padding-xs: clamp(0.4rem, 0.6vw, 1rem);
  --padding-s: clamp(1.2rem, 2vw, 2.4rem);
  --padding-m: clamp(1.6rem, 3vw, 3.2rem);
  --padding-l: clamp(2.4rem, 4vw, 6rem);
  --padding-xl: clamp(3.2rem, 6vw, 8rem);

  --padding-main: var(--padding-l);
  --padding-section: var(--padding-xl);
  --padding-footer: clamp(1.6rem, 1.8vw, 2.8rem);

  --gap-xs: clamp(0.8rem, 1vw, 1.6rem);
  --gap-s: clamp(1.2rem, 1.6vw, 2.4rem);
  --gap-m: clamp(1.6rem, 2vw, 3.2rem);
  --gap-l: clamp(2rem, 3vw, 4rem);
  --gap-xl: clamp(2.4rem, 4vw, 6rem);

  --space-section: clamp(4rem, 8vw, 12rem);
  --space-block: clamp(2rem, 4vw, 6rem);
  --space-element: clamp(1rem, 2vw, 3rem);

  /* Amplades */
  --max-width-text-xs: 45ch;
  --max-width-text-s: 60ch;
  --max-width-text-m: 70ch;
  --max-width-text-l: 80ch;

  --max-width-container-s: 60rem;
  --max-width-container-m: 90rem;
  --max-width-container-l: 120rem;
  --max-width-container-xl: 140rem;

  /* Radius i ombres */
  --radius-xs: 0.3rem;
  --radius-s: 0.5rem;
  --radius-m: 0.8rem;
  --radius-l: 1.2rem;
  --radius-xl: 2rem;

  --shadow-soft: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-strong: 0 6px 20px rgba(0,0,0,0.16);

  /* Transicions */
  --ease-out: cubic-bezier(0.25, 0.8, 0.5, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast: 0.15s var(--ease-out);
  --transition-normal: 0.3s var(--ease-smooth);
}

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--p-size);
  line-height: var(--p-line);
  background-color: var(--color-text-inverse);
  color: var(--color-text);
  overflow-x: hidden;
}

/* CONTENIDORS */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--padding-s);
}
.bg{

  background-color: var(--color-bg-soft);

}

/* HEADER */
header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: var(--padding-xs);
  z-index: 1000;
  box-shadow: var(--shadow-soft);
  background: var(--bg);
 

}
.header{
  width: 100%;
  position:fixed;
  top:0;
  z-index: 1000;
  box-shadow: var(--shadow-soft);
  background: var(--bg);
}
.logo-wrapper {
  display: flex;
  align-items: center;
}

.logo {
  max-width: 80px;
   border-radius:none;
   border:none;
   box-shadow: none;
}
.tagline{
  margin:auto;
  font-weight: 500;
}

/* BOTÓ MENÚ */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  justify-self: end;
}

/* MENÚ DESKTOP */
.nav-header {
  display: grid;
  justify-content: end;
}

.nav-list {
  display: flex;
  gap: var(--gap-m);
  list-style: none;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  padding: var(--padding-xs) 0;
  transition: var(--transition-fast);
}

.nav-link:hover{
  color: var(--color-primary);
}
/* Efecte visual per a l'element actiu */
.nav-link.is-active,
.sub-nav-link.is-active {
  color: var(--color-primary);
  position: relative;
  transition: color 0.3s ease;
}

.nav-link.is-active::after,
.sub-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  animation: underlineFade 0.4s ease forwards;
}

@keyframes underlineFade {
  from { width: 0; opacity: 0; }
  to { width: 100%; opacity: 1; }
}

/* SUBMENÚ */
.has-submenu {
  position: relative;
}

.sub-nav-principal {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  background: var(--color-bg-soft);
  padding: var(--padding-xs) 0;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-medium);
  list-style: none;
  display: grid;
  gap: var(--gap-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition-normal);
  min-width: 180px;
}

.has-submenu:hover .sub-nav-principal {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-nav-link {
  padding: var(--padding-xs) var(--padding-s);
  display: block;
  text-decoration: none;
  color: var(--color-text);
  transition: var(--transition-fast);
}

.sub-nav-link:hover {
  background: var(--color-bg-strong);
  color: var(--color-primary);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .menu-toggle {
    display: block;
  }

  .nav-header {
    position: absolute;
    top: 100%;
    right: 0;
    max-width: 400px;
    background: var(--bg);
    box-shadow: var(--shadow-medium);
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
  }

  .nav-header.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    display: grid;
    gap: var(--gap-s);
    padding: var(--padding-m);
  }

  .sub-nav-principal {
    position: static;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    transition: var(--transition-normal);
  }

  .has-submenu.open .sub-nav-principal {
    opacity: 1;
    visibility: visible;
    max-height: 500px;
  }

  .sub-nav-link {
    padding-left: var(--padding-l);
  }
}

/* HERO */
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(450px, 45vh, 650px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.50), rgba(0,0,0,0.20));
  backdrop-filter: blur(1px);
}

.hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  padding: var(--padding-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.hero-content {
  max-width: var(--max-width-text-m);
  display: grid;
  gap: var(--gap-s);
  animation: heroFadeUp var(--transition-normal) forwards;
  opacity: 0;
}

.hero-content h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  animation: heroFadeUp var(--transition-normal) forwards;
  animation-delay: 0.15s;
  opacity: 0;
}

.hero-index { background-image: url("../img/presentacions/001.png"); }
.hero-campers { background-image: url("../img/presentacions/003.png"); }
.hero-alquiler { background-image: url("../img/presentacions/005.png"); }
.hero-camperizacion { background-image: url("../img/presentacions/004.png"); }
.hero-reserva { background-image: url("../img/presentacions/009.png"); }
.hero-contacto { background-image: url("../img/presentacions/008.png"); }

@media (max-width: 768px) {

  .hero-reserva, .hero-index, .hero-campers, .hero-alquiler,
  .hero-contacto, .hero-camperizacion{
    margin-top:90px;
    background-size: contain;
    background-position: center top;
    aspect-ratio: 16 / 9;
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CONTACT ICONS */
.contact-icons {
  max-width: 300px;
  margin-left: auto;
  padding: var(--padding-xs);
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-m);
  list-style: none;
  background-color: rgba(255,255,255,0.12);
  border-radius: var(--radius-m);
  backdrop-filter: blur(4px);
}

.contact-icons i {
  color: var(--color-text-inverse);
}

/*****************************************/
/* FONTS                                 */
/*****************************************/
.h2{
  font-weight: 400;
}
.h2A{
  color:var(--color-primary);
}
.h4{
  margin:auto;
}

/******************************************/
/* SECCIONS                               */
/******************************************/
section{
  padding: var(--padding-m) 0;
}
.section{
  margin-top: 5%;
}
article, .diV{
  padding:var(--padding-s);
}

.div-layout {
  display: flex;
  flex-wrap: wrap;
  margin:auto;
  gap: var(--gap-m);
}

/******************************************/
/* LAYOUTS                                */
/******************************************/

/* --- BASE (mòbil) --- */
.una-col,
.dos-cols,
.tres-cols,
.quatre-cols {
  display: grid;
  gap: var(--gap-m);
  grid-template-columns: 1fr; /* sempre 1 columna en mòbil */
}

.sis-cols{
  display: grid;
  gap: var(--gap-m);
 grid-template-columns: repeat(3, 1fr);
}



/* --- TABLET (≥ 600px) --- */
@media (min-width: 600px) {
  .dos-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .tres-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .quatre-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .sis-cols{
  display: grid;
  gap: var(--gap-m);
 grid-template-columns: repeat(4, 1fr);
}
}

/* --- DESKTOP (≥ 900px) --- */
@media (min-width: 900px) {
  .tres-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .quatre-cols {
    grid-template-columns: repeat(4, 1fr);
  }
  .sis-cols{
    grid-template-columns: repeat(6, 1fr);
  }
}


/******************************************/
/* MULTIMÈDIA                             */
/******************************************/
figure {
  width: 100%;
  margin: 0;
  padding: var(--padding-s);
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  align-items: center;
}

img, video {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: var(--shadow-medium);
  border-radius: 15px;
  border:1px solid var(--color-border-a);
}


.marcas img{
  padding:10px;
  border:1px solid var(--color-text-muted);
  border-radius:none;
}

figcaption, figcaption a{
  font-size: var(--figcaption-size);
  line-height: var(--figcaption-line);
}



/******************************************/
/* TAULES                                 */
/******************************************/
.tabla-wrapper{
  display: flex;
  flex-flow:row wrap;
  gap: var(--gap-l);
  align-items: flex-start; /*Alineació vertical al top */
  justify-content: center;

  margin: var(--space-element) auto;
}

.tabla-comparativa {
  width: 100%;
  max-width: var(--max-width-container-m);
  border-collapse: collapse;
  background: var(--color-bg-soft);
  border-radius: var(--radius-s);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  table-layout: auto;
  vertical-align: top; /* Alineació vertical */
}


.tabla-comparativa th,
.tabla-comparativa td {
  padding: 0.6rem 0.8rem;
  font-size: clamp(0.8rem, 0.85vw, 0.95rem);
  line-height: 1.4;
  vertical-align: top; /* Important per a alineació */
}


.tabla-comparativa thead th {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--footer-text-size);
  padding: var(--padding-xs);
}

.tabla-comparativa tbody th {
  background: var(--color-bg-strong);
  color: var(--color-text);
  font-weight: 600;
}

.tabla-comparativa td {
  background: var(--color-text-inverse);
  border-bottom: 1px solid var(--color-border-c);
}

.tabla-comparativa tr:hover td,
.tabla-comparativa tr:hover th {
  color: var(--color-text-inverse);
  background: var(--color-secondary-hover);
  transition: var(--transition-fast);
}

/* Botons dins taula */
.btn-tabla {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xs);
  font-size: clamp(0.8rem, 0.9vw, 1rem);
  text-decoration: none;
  transition: var(--transition-fast);
}

.btn-tabla:hover,
.btn-tabla:focus {
  background: var(--color-primary-hover);
  transform: scale(1.03);
}

/******************************************/
/* TAULES RESPONSIVE                      */
/******************************************/
@media (max-width: 900px) {

  .tabla-wrapper {
    flex-direction: column;
    gap: var(--gap-m);
  }

  .tabla-comparativa thead {
    display: none;
  }

  .tabla-comparativa tr {
    display: block;
    margin-bottom: var(--gap-xs);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-soft);
  }

  .tabla-comparativa tbody th {
    display: block;
    width: 100%;
    background: var(--color-bg-strong);
  }

  .tabla-comparativa td {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
  }

  .tabla-comparativa td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-soft);
    font-size: 0.8rem;
    margin-right: 1rem;
  }
}

/******************************************/
/* FORMULARIS PRESSUPOST I CONTACTE        */
/******************************************/
.responsive-form, .booking-card {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.input-group label, .booking-card label, .responsive-form label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.input-group select,.form-group select, textarea,
.input-group input[type="date"], .form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="date"]   {
  color:var(--color-text);
  font-size:var(--p-size);
  line-height: var(--p-line);

  width: 100%;
  padding: var(--padding-xs);

  border: 1px solid var(--color-primary);
  border-radius: 8px;
   
  background-color: var(--white);
  transition: border 0.2s ease;
}
.form-group input{
  color:var(--color-text);
  font-size:var(--p-size);
  line-height: var(--p-line);

  width: 100%;
  padding: var(--padding-xs);


}
.input-group select:focus,
.input-group input[type="date"]:focus, .form-group input[type="text"]:focus, 
.form-group input[type="tel"]:focus, .form-group input[type="date"]:focus,
textarea:focus  {
border: 1px solid var(--color-primary-hover);
  outline: none;

}
.peuform{
  display:flex;
}
.peuform label{
  margin:auto;
}

.disclaimer{
  padding:var(--padding-xs);
  color:var(--color-text-inverse);
  background-color: var(--color-accent);
}
/*    BOTONS     
============================ */

.btn-calculate,
.btn-reset, .boto-whatsapp {
 border-radius: 8px;
    padding: 14px 20px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s ease;
      color:var(--color-text-inverse);
  background-color: var(--color-primary);

}

.btn-reset:hover, .btn-calculate:hover, .boto-whatsapp:hover {
  color:var(--color-text-inverse);
  background-color: var(--color-primary-hover);
}
.boto-whatsapp a{
  color:var(--color-text-inverse);
  text-decoration: none;
}

/*    MISSATGES
============================ */
.error-msg, .msg-error {
    background-color: var(--color-error);
    color: var(--color-text-inverse);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.95rem;
}
.alert{
     background-color: var(--color-accent);
    color: var(--color-text-inverse);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.95rem; 
}
/* 
   RESULTADO
============================ */
.result-card {
    padding: var(--padding-xs);
    background: var(--color-text-inverse);
    border-radius: 14px;
    box-shadow:var(--shadow-medium);
}


.msg-descuento {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--light-gray);
    color: var(--color-error);
    font-weight:bold;
    font-size: 1.2rem;
}


.desglose-list li {
    list-style: none;
    margin: 15px 0;
    padding: 0;
}

.total-price {
    font-size: 1.4rem;
    font-weight: 400;
    padding:var(--padding-xs);
    color: var(--color-text-inverse);
    margin-top: 10px;
    background-color: var(--color-primary);
    border-radius: 8px;
}





/******************************************/
/* CALENDARI                              */
/******************************************/
 .calendar-card{
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
 }
 .nav-btn{
  border-radius: 8px;
    padding: 14px 20px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s ease;
      color:var(--color-text-inverse);
  background-color: var(--color-primary);
 }

 .nav-btn:hover{
  color:var(--color-text-inverse);
  background-color: var(--color-primary-hover);
 }

.calendar-grid,
.calendar-days {
  width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-top: 15px;
}

.calendar-day {
    padding: var(--padding-xs);
    margin: 3px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s ease;
}

.calendar-day:hover {
  color:var(--color-text-inverse);
    background: var(--color-secondary-hover);
}

/* Colores por temporada */
.day-baja { background: var(--color-text-muted);color:var(--color-text-inverse); }
.day-media { background: var(--color-secondary); }
.day-alta { background: var(--color-primary); color:var(--color-text-inverse); }
.day-puente { background: var(--color-accent); color:var(--color-text-inverse);}


.calendar-legend {
  width: 100%;
    display: flex;
    justify-content: space-around;

}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.dot.baja { background: var(--color-text-muted); }
.dot.media { background: var(--color-secondary); }
.dot.alta { background:var(--color-primary); }
.dot.puente { background: var(--color-accent); }

/*****************************************/
/* SCROLL                                */
/*****************************************/
.prev, .next{
 border-radius: 8px;
    padding: 14px 20px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s ease;
      color:var(--color-text-inverse);
  background-color: var(--color-primary); 
}
/******************************************/
/* RESERVAR PER WHATSAPP                  */
/******************************************/
.booking-card{

  }
/******************************************/
/* FOOTER                                 */
/******************************************/
footer {
  background-color: var(--color-bg-strong);
  padding: var(--padding-footer);
  margin-top: 100px;
  font-size: var(--footer-text-size);
  line-height: var(--footer-text-line);
}

footer li {
  list-style: none;
}
footer a{
  text-decoration: none;
}
footer a:hover, footer a:focus{
  color:var(--color-text);
}
.footer{
  margin:auto;
  font-size: var(--footer-text-size);
  line-height: var(--footer-text-line);
}

/*************/
/*  cookies  */
/*************/
.avis-cookies {
  padding: var(--padding-xs);
  max-width: 1200px;
  margin: auto;
  background: var(--color-bg-soft);
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;

  display: none; /* només aquí */
}

.avis-cookies.activo {
  display: grid; /* només quan està actiu */
}


/*************/
/*  fons  */
/*************/
.fons-avis-cookies {
  display: none;
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fons-avis-cookies.activo {
  display: block;
}
/*************/
/*  botons  */
/*************/
.botons-cookies {
  display: grid;
  grid-template-columns: repeat(2, auto); /* dos botons en fila */
  gap: var(--gap-s);
  justify-content: center; /* centra la fila de botons */
  align-items: center;
}

.botons-cookies button{
  padding:var(--padding-xs);
  font-size: var(--figcaption-size);
  border:none;
  background-color: var(--color-border-a);
  color:var(--color-text-inverse);
}
.avis-cookies p{
  font-size: var(--figcaption-size);
}