@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  --site-text: #000;
  --site-accent: #0093c9;
  --site-body-copy-size: 1.1rem;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  color: var(--site-text);
}

/* Una única tipografía en todas las páginas y controles del sitio. */
body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .h1,
body .h2,
body .h3,
body .h4,
body .h5,
body .h6,
body .banner,
body button,
body input,
body select,
body textarea,
body table {
  font-family: 'Nunito', sans-serif !important;
}

/* El texto de lectura se justifica en todo el sitio. La navegación y los
   controles conservan su alineación propia para no perjudicar su uso. */
body p,
body li:not(.nav-item),
body blockquote,
body figcaption,
body .card-text,
body .lead,
body .accordion-body,
body .modal-body,
body .legal {
  text-align: justify !important;
  text-justify: inter-word;
}

/* Tamaño uniforme para el contenido explicativo. Se excluyen los elementos
   que funcionan como títulos, navegación o mensajes auxiliares de interfaz. */
body p:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6),
body li:not(.nav-item),
body blockquote,
body figcaption,
body .card-text,
body .accordion-body,
body .modal-body,
body .form-text {
  font-size: var(--site-body-copy-size) !important;
}

body .cookie-banner p {
  font-size: 0.95rem !important;
}

/* El blau identifica títols i accions; el contingut de lectura és negre. */
p:not(.text-white):not(.text-white-50),
li:not(.nav-item),
label,
.card-text,
.lead:not(.text-white),
.accordion-body,
.modal-body,
.form-text,
.legal {
  color: var(--site-text) !important;
}

input,
select,
textarea,
table,
td,
th {
  color: var(--site-text);
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

body div,
body section,
body article,
body form {
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.table-responsive,
[class*="table-responsive"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.navbar-toggler {
  margin: 0 auto 1rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgb(0 147 201 / 25%);
}

@media (max-width: 991.98px) {
  .navbar {
    min-height: auto !important;
  }

  .navbar > .container {
    width: 100%;
  }

  .navbar-collapse {
    width: 100%;
    padding: 0 1rem 1rem !important;
  }

  .navbar-nav {
    padding: 0.5rem;
    background: rgb(255 255 255 / 94%);
    border-radius: 0.75rem;
    text-align: center;
  }

  .navbar-nav .nav-link {
    padding: 0.7rem 0.5rem;
  }
}

@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    --bs-gutter-x: 1.5rem;
  }

  .row {
    --bs-gutter-x: 1.25rem;
  }

  .banner {
    padding: 3rem 0 !important;
  }

  .banner .display-3,
  h1.display-3 {
    margin-top: 0 !important;
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.15;
  }

  .banner .lead {
    font-size: clamp(1.15rem, 6vw, 1.6rem) !important;
  }

  h1,
  .h1 {
    overflow-wrap: anywhere;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  h2,
  .h2,
  .display-6 {
    overflow-wrap: anywhere;
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  h3,
  .h3 {
    overflow-wrap: anywhere;
    font-size: clamp(1.25rem, 6vw, 1.65rem);
  }

  .video-section,
  .cards-section {
    padding: 2.5rem 0 !important;
  }

  .custom-card,
  .card-body {
    padding: 1.25rem !important;
  }

  .custom-card-title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  .custom-card:hover,
  .card:hover {
    transform: none !important;
  }

  .containergallery {
    width: 100% !important;
    gap: 0.75rem;
    padding: 0 0.75rem;
  }

  .photo-item_g {
    flex: 1 1 calc(50% - 0.75rem) !important;
    min-width: 0;
  }

  iframe[src*="youtube"],
  iframe[src*="youtu.be"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  table:not(.calendar) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  footer {
    background-position: center;
  }

  footer .row > [class*="col-"] {
    margin-top: 1.5rem !important;
  }

  footer .legal {
    text-align: justify !important;
  }

  footer img {
    max-width: 100%;
    object-fit: contain;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand img {
    width: auto !important;
    max-width: min(82vw, 320px);
    max-height: 100px !important;
  }

  .btn,
  .custom-btn,
  button,
  input[type="submit"] {
    max-width: 100%;
    white-space: normal;
  }

  .backgroundimage {
    padding: 2rem 0 !important;
  }
}