/* CMP d'APAP Bosch i Morata: avís de cookies, preferències i marcador del mapa.
   Autocontingut: la carrega js/cookies.js (una sola línia per pàgina). Usa les variables --apap-* de style.css amb valors de reserva. */
.cmp, .cmp *, .cmp *::before, .cmp *::after { box-sizing: border-box; }
.cmp {
  --cmp-ink: var(--apap-ink, #191917);
  --cmp-text: #4f5449;
  --cmp-green: var(--apap-green, #8FBC17);
  --cmp-green-light: var(--apap-green-light, #E8F1CF);
  --cmp-green-soft: var(--apap-green-soft, #F5F9E8);
  --cmp-yellow: var(--apap-yellow, #FBB400);
  --cmp-red: var(--apap-red, #E2000D);
  --cmp-purple: var(--apap-purple, #A8579F);
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--cmp-ink);
}
.cmp p { margin: 0; }
.cmp-ico {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--cmp-green); background: var(--cmp-green-light); color: var(--cmp-ink);
}
.cmp-title { font: 700 16px/1.3 'Poppins', system-ui, sans-serif; color: var(--cmp-ink); }
.cmp-text { font-size: 14.5px; line-height: 1.5; color: var(--cmp-text); }
.cmp-text a, .cmp-dlg-m a { color: var(--cmp-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--cmp-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cmp-text a:hover, .cmp-dlg-m a:hover { background: var(--cmp-green-light); }
.cmp a:focus-visible, .cmp button:focus-visible, .cmp input:focus-visible + .cmp-sw-ui { outline: 3px solid var(--cmp-ink); outline-offset: 3px; }

/* botons: Rebutjar i Acceptar amb la mateixa mida, forma i ombra desplaçada */
.cmp-actions { flex: none; display: flex; flex-wrap: wrap; gap: 12px; }
.cmp-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; min-height: 44px; padding: .8em 1.3em;
  border: 2px solid var(--cmp-ink); border-radius: 999px; background: #fff; color: var(--cmp-ink);
  box-shadow: 3px 3px 0 var(--cmp-ink);
  font: 600 14px/1.15 'Poppins', system-ui, sans-serif; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.cmp-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cmp-ink); }
.cmp-btn--main { background: var(--cmp-green); }
.cmp-btn--ghost { box-shadow: none; }
.cmp-btn--ghost:hover { transform: none; background: var(--cmp-green-light); }

/* ---- banner: barra inferior, no modal ---- */
.cmp-banner {
  position: fixed; z-index: 1190; left: 12px; right: 12px; bottom: 12px; max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px; padding: 20px 22px 18px 20px; overflow: hidden;
  background: #fff; border: 1px solid var(--cmp-ink); border-radius: 16px;
  box-shadow: 6px 6px 0 rgba(143, 188, 23, .32), 0 22px 40px -22px rgba(25, 25, 23, .45);
  animation: cmp-in .28s ease-out both;
}
.cmp-banner::before, .cmp-dlg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--cmp-green) 0 25%, var(--cmp-yellow) 25% 50%, var(--cmp-red) 50% 75%, var(--cmp-purple) 75% 100%);
}
.cmp-banner .cmp-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
@keyframes cmp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* el botó «pujar» no queda tapat pel banner */
html.cmp-on #gotoTop { bottom: 150px !important; }

/* ---- diàleg de preferències ---- */
.cmp-ov { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgba(25, 25, 23, .45); animation: cmp-fade .18s ease-out both; }
.cmp-dlg {
  position: relative; width: min(580px, 100%); max-height: min(90vh, 760px); overflow: auto; padding: 26px 24px 20px;
  border: 1px solid var(--cmp-ink); border-radius: 16px; background: #fff; outline: 0;
  box-shadow: 8px 8px 0 rgba(143, 188, 23, .32), 0 34px 70px -22px rgba(25, 25, 23, .5);
}
.cmp-dlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cmp-dlg-h h2 { margin: 0; font: 700 21px/1.25 'Poppins', system-ui, sans-serif; color: var(--cmp-ink); }
.cmp-x { appearance: none; flex: none; width: 44px; height: 44px; margin: -8px -10px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--cmp-ink); font: 400 30px/1 'Lato', sans-serif; cursor: pointer; }
.cmp-x:hover { background: var(--cmp-green-light); }
.cmp-dlg-i { margin: 6px 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--cmp-text); }
.cmp-it { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--cmp-ink); border-radius: 14px; background: #fff; }
.cmp-it + .cmp-it { margin-top: 12px; }
.cmp-it-tx { flex: 1 1 auto; min-width: 0; }
.cmp-it h3 { margin: 0 0 3px; font: 600 15px/1.3 'Poppins', system-ui, sans-serif; color: var(--cmp-ink); }
.cmp-it p { font-size: 14px; line-height: 1.45; color: var(--cmp-text); }
.cmp-fixed { flex: none; padding: 5px 12px; border-radius: 999px; background: var(--cmp-green-light); border: 1px solid var(--cmp-green); color: var(--cmp-ink); font: 600 12px/1.3 'Poppins', sans-serif; white-space: nowrap; }
.cmp-sw { position: relative; flex: none; display: inline-block; width: 54px; height: 32px; cursor: pointer; }
.cmp-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cmp-sw-ui { position: absolute; inset: 0; border: 2px solid var(--cmp-ink); border-radius: 999px; background: #fff; transition: background-color .15s; }
.cmp-sw-ui::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--cmp-ink); transition: transform .15s; }
.cmp-sw input:checked + .cmp-sw-ui { background: var(--cmp-green); }
.cmp-sw input:checked + .cmp-sw-ui::after { transform: translateX(22px); }
.cmp-dlg-f { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.cmp-dlg-m { margin-top: 14px; font-size: 13.5px; text-align: right; }
@keyframes cmp-fade { from { opacity: 0; } to { opacity: 1; } }
html.cmp-lock { overflow: hidden; }

/* ---- marcador del contingut extern (mapa): mateixa alçada que l'iframe real ---- */
.cmp-embed {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 320px; padding: 26px 20px; text-align: center; border-radius: inherit;
  background: repeating-linear-gradient(135deg, var(--cmp-green-soft, #F5F9E8) 0 14px, #ecf3d6 14px 28px);
}
.cmp-embed .cmp-text { max-width: 46ch; }
.cmp-embed .cmp-actions { justify-content: center; }
.qs-frame .cmp-embed { height: 400px; }

/* ---- mòbil ---- */
@media (max-width: 767.98px) {
  .cmp-banner { left: 8px; right: 8px; bottom: 8px; flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 14px 14px; }
  .cmp-banner .cmp-ico { display: none; }
  .cmp-banner .cmp-actions { gap: 8px; flex-wrap: nowrap; }
  .cmp-banner .cmp-actions .cmp-btn { flex: 1 1 0; min-width: 0; padding-inline: 6px; font-size: 13px; }
  .cmp-text { font-size: 13.5px; }
  html.cmp-on #gotoTop { bottom: 250px !important; }
  .cmp-dlg { padding: 24px 16px 16px; }
  .cmp-it { flex-wrap: wrap; }
  .cmp-dlg-f .cmp-btn { flex: 1 1 100%; }
  .cmp-dlg-m { text-align: center; }
}
@media (max-width: 575.98px) {
  .qs-frame .cmp-embed { height: 300px; min-height: 0; padding: 16px 12px; gap: 8px; }
  .qs-frame .cmp-embed .cmp-ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-banner, .cmp-ov { animation: none; }
  .cmp-btn, .cmp-sw-ui, .cmp-sw-ui::after { transition: none; }
}

/* ---- retoc del pie (no és de cookies: es carrega a totes les pàgines amb cookies.js) ----
   A ≤ 575 px el correu de «Contacte» sobresortia de la seua columna (col-6) i l'ample del document passava de 390 a 406 px.
   «Contacte» ocupa tot l'ample i «Informació» es posa al costat de «Seccions»; la regla base evita el desbordament en qualsevol cas. */
.footer-contact a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  #footer .footer-widgets-wrap .row > div:has(> .footer-contact) { order: 3; width: 100%; }
  #footer .footer-widgets-wrap .row > div:nth-child(4) { order: 2; width: 50%; }
}