/* Jordi Valera Perruqueria
   Identitat de la web original: Alex Brush daurada per als títols, Lato per al text,
   seccions blanques i negres i la foto sepia de la pinta a la portada. */

@font-face { font-family: "Alex Brush"; src: url("../fonts/alex-brush-400.76f37c8653e4.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-300.268d01e94fa0.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-400.b7d6b48d8d12.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700.017598645bcc.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-900.cf5ec3859b05.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Philosopher"; src: url("../fonts/philosopher-400.fa045547a260.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Philosopher"; src: url("../fonts/philosopher-700.674b9a364c8d.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --or: #c19c62;
  --or-fosc: #a5824a;
  --negre: #000;
  --gris-fosc: #2a2a2a;
  --gris-text: #5a5a5a;
  --gris-clar: #f4f4f4;
  --blanc: #fff;

  --font-lletra: "Alex Brush", cursive;
  --font-text: "Lato", system-ui, sans-serif;
  --font-titol: "Philosopher", Georgia, serif;

  --espai-seccio: clamp(4rem, 8vw, 6.5rem);

  --bs-body-font-family: var(--font-text);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.75;
  --bs-body-color: var(--gris-text);
  --bs-body-bg: var(--blanc);
  --bs-link-color-rgb: 193, 156, 98;
  --bs-link-hover-color-rgb: 165, 130, 74;
}

html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { font-family: var(--font-text); font-weight: 400; color: var(--gris-text); background: var(--blanc); }
strong { font-weight: 700; color: var(--gris-fosc); }
img { max-width: 100%; height: auto; }
a { text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

.salta { position: absolute; left: 1rem; top: 1rem; z-index: 1100; background: var(--negre); color: var(--blanc); padding: .5rem 1rem; }

/* Botons daurats, com a l'original */
.btn-or, .btn-or-linia {
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: .6rem;
  --bs-btn-border-radius: 2rem;
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: .95rem;
}
.btn-or {
  --bs-btn-bg: var(--or); --bs-btn-border-color: var(--or); --bs-btn-color: var(--blanc);
  --bs-btn-hover-bg: var(--or-fosc); --bs-btn-hover-border-color: var(--or-fosc); --bs-btn-hover-color: var(--blanc);
  --bs-btn-active-bg: var(--or-fosc); --bs-btn-active-color: var(--blanc);
}
.btn-or-linia {
  --bs-btn-bg: transparent; --bs-btn-border-color: var(--or); --bs-btn-color: var(--or);
  --bs-btn-hover-bg: var(--or); --bs-btn-hover-border-color: var(--or); --bs-btn-hover-color: var(--blanc);
}

/* Capçalera */
.capcalera { position: sticky; top: 0; z-index: 1030; background: var(--blanc); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.capcalera .navbar { padding-block: .4rem; }
.capcalera .container-fluid { padding-inline: clamp(1rem, 2.5vw, 2.25rem); }
.capcalera .navbar-brand img { width: 150px; height: auto; display: block; }
.capcalera .nav-link {
  position: relative;
  color: var(--negre);
  font-family: var(--font-titol);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding-inline: .85rem !important;
}
.capcalera .nav-link:hover, .capcalera .nav-link:focus-visible { color: var(--or); }
.capcalera .nav-telefon { color: var(--or); }
@media (min-width: 1200px) {
  .capcalera .nav-link::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: -.55rem;
    height: 3px; background: var(--or); transform: scaleX(0); transition: transform .2s;
  }
  .capcalera .nav-link:hover::after { transform: scaleX(1); }
}

/* Portada: foto sepia a pantalla completa */
.portada {
  position: relative;
  min-height: calc(100svh - 70px);
  display: flex; align-items: center; justify-content: center;
  padding: 4rem 1rem 6rem;
  text-align: center;
  color: var(--blanc);
  background: url("../img/capcalera.e4a82a49e51c.webp") center / cover no-repeat var(--gris-fosc);
}
.portada::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); }
.portada-contingut { position: relative; }
.portada-titol { margin: 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, .8); }
.portada-benvinguts {
  display: block;
  font-family: var(--font-lletra);
  font-weight: 400;
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: .9;
}
.portada-sub, .portada-ofici {
  display: block;
  font-family: var(--font-text);
  font-weight: 700;
  text-transform: uppercase;
}
.portada-sub { font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: .4em; margin-top: .25em; padding-left: .4em; }
.portada-ofici { font-size: clamp(1.1rem, 2.3vw, 2.1rem); letter-spacing: .35em; margin-top: 1.6em; padding-left: .35em; }
.portada-logo { display: block; width: min(446px, 75vw); margin: 1.5rem auto 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.portada-public {
  position: relative; display: inline-block; margin: 2rem 0 0;
  font-weight: 700; font-size: .95rem; text-transform: uppercase;
  text-shadow: 1px 1px 1px var(--negre);
}
.portada-public::after { content: ""; position: absolute; left: 50%; bottom: -.9rem; width: 70px; height: 4px; background: var(--or); transform: translateX(-50%); }
.portada-reserva { margin: 3rem 0 0; }
.portada-reserva .btn { text-shadow: none; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .6); }
.btn-reserva-nav { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: .85rem; white-space: nowrap; }
@media (max-width: 1199.98px) { .btn-reserva-nav { margin: .5rem 0 1rem .85rem; } }
.portada-baixa {
  position: absolute; left: 50%; bottom: 1.5rem; width: 22px; height: 22px; margin-left: -11px;
  border-right: 2px solid var(--blanc); border-bottom: 2px solid var(--blanc);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .portada-reserva { margin: 3rem 0 0; }
.portada-reserva .btn { text-shadow: none; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .6); }
.btn-reserva-nav { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: .85rem; white-space: nowrap; }
@media (max-width: 1199.98px) { .btn-reserva-nav { margin: .5rem 0 1rem .85rem; } }
.portada-baixa { animation: bota 2.5s ease-in-out infinite; }
}
@keyframes bota { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 8px; } }

/* Seccions */
.seccio { padding-block: var(--espai-seccio); }
.seccio-gris { background: var(--gris-clar); }
.seccio-negra { background: var(--negre); color: #cfcfcf; }
.seccio-negra strong { color: var(--blanc); }

/* Títol: lletra daurada + subtítol en majúscules espaiades */
.titol { text-align: center; margin: 0; }
.titol-lletra {
  display: block;
  font-family: var(--font-lletra);
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 1;
  color: var(--or);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .35);
}
.titol-sub {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-text);
  font-weight: 900;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--negre);
}
.seccio-negra .titol-sub { color: var(--blanc); }

.decor { display: flex; justify-content: center; gap: .35rem; margin: 1.5rem 0 2.25rem; color: #c7c7c7; }
.seccio-negra .decor { color: var(--blanc); }
.decor span {
  width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("../img/asterisc.144ab6eec8a8.svg") center / contain no-repeat;
  mask: url("../img/asterisc.144ab6eec8a8.svg") center / contain no-repeat;
}

.decor ~ .row { margin-top: 0; }

.intro { max-width: 52rem; margin-inline: auto; text-align: center; }

/* Essència */
.local { display: block; width: 100%; margin-top: 2.5rem; }
.mans { margin-top: var(--espai-seccio); }
.mans .titol-lletra { font-size: clamp(3rem, 6vw, 5rem); }
.mans p { max-width: 34rem; margin-inline: auto; }
.mans .btn { margin-top: 1rem; }
.fotos-mans { display: flex; gap: 1.25rem; justify-content: center; }
.fotos-mans img { width: calc(50% - .625rem); max-width: 260px; aspect-ratio: 1 / 2; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 12px 30px -12px rgba(0, 0, 0, .45); }

/* Equip */
.destacat { margin-bottom: 4rem; }
.destacat-text { background: var(--gris-fosc); padding: 3rem 2rem; text-align: center; font-size: .95rem; }
.destacat-text .titol-lletra { font-size: clamp(3.5rem, 6vw, 4.75rem); line-height: .95; }
.destacat-text p { text-align: center; }
/* Text enriquit de l'admin: les llistes no es veuen bé centrades */
.destacat-descripcio ul, .destacat-descripcio ol, .persona-descripcio ul, .persona-descripcio ol { display: inline-block; text-align: left; margin-bottom: 1rem; }
.destacat-descripcio a, .persona-descripcio a { color: var(--or); }
.persona-botons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.persona .persona-botons { margin-top: 1.25rem; }
.persona-botons:empty { display: none; }
.destacat-cafe { font-family: var(--font-titol); font-size: 1.35rem; color: var(--blanc); margin: 1.5rem 0 .75rem; }
.destacat-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.persona { text-align: center; }
.persona img { width: 100%; max-width: 320px; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 1.5rem; }
.persona h3 { font-family: var(--font-text); font-weight: 900; font-size: 1.5rem; letter-spacing: .3em; text-transform: uppercase; color: var(--blanc); padding-left: .3em; margin-bottom: .25rem; }
.persona-carrec { font-size: .95rem; margin-bottom: .5rem; }
.persona-descripcio p { color: var(--or); margin-bottom: 0; }

/* Dies especials */
.especial img { width: 100%; aspect-ratio: 500 / 367; object-fit: cover; }
.especial-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1rem 0 .4rem; }
.especial h3 { font-family: var(--font-text); font-weight: 900; font-size: 1rem; color: var(--negre); margin: 0; }
.especial-durada { flex: none; font-size: .85rem; font-weight: 700; color: var(--or); }
.especial p { font-size: .98rem; }

/* Serveis */
.llista-titol { font-family: var(--font-titol); font-size: 1.6rem; color: var(--negre); padding-bottom: .5rem; border-bottom: 2px solid var(--or); }
.llista-serveis { list-style: none; padding: 0; margin: 0; }
.llista-serveis li { padding: .7rem 0; border-bottom: 1px solid #e2e2e2; font-weight: 700; color: var(--gris-fosc); }

/* Horari */
.estat { display: flex; justify-content: center; align-items: center; gap: .6rem; font-weight: 700; margin-bottom: 2.5rem; }
.estat-punt { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid currentColor; }
.estat-obert { color: var(--or); }
.estat-obert .estat-punt { background: var(--or); border-color: var(--or); }
.horari { text-align: center; margin: 0; row-gap: 2rem; }
.horari > div + div { border-left: 1px solid #444; }
.horari dt { font-weight: 300; font-size: 1rem; margin-bottom: .6rem; }
.horari dd { margin: 0; font-family: var(--font-titol); font-size: 1.6rem; line-height: 1.5; color: var(--blanc); }
.horari .horari-tancat { color: #8a8a8a; }
@media (max-width: 575.98px) { .horari > div + div { border-left: 0; } }
.horari-contacte { list-style: none; padding: 0; margin: 0 0 1rem; }
.horari-contacte span { display: block; color: var(--blanc); font-weight: 700; }
.horari-contacte li + li { margin-top: .5rem; }

/* Productes */
.productes { list-style: none; padding: 0; margin: 0; }
.productes span {
  display: flex; align-items: center; justify-content: center; min-height: 5.5rem; padding: 1rem;
  border: 2px solid #e6e6e6; text-align: center;
  font-family: var(--font-titol); font-size: 1.3rem; color: var(--or);
}

/* Opinions */
.nota-google { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: -1rem 0 3rem; text-align: center; }
.nota-google-xifra { font-family: var(--font-titol); font-size: 4rem; line-height: 1; color: var(--blanc); }
.nota-google .estrelles { font-size: 1.4rem; margin: .25rem 0; }
.nota-google a { color: var(--or); font-weight: 700; }
.opinio { margin-bottom: 0; text-align: center; }
.opinio figcaption { font-family: var(--font-titol); font-size: 1.35rem; color: var(--blanc); }
.estrelles { color: var(--or); letter-spacing: .2em; margin: .25rem 0 .75rem; }
.opinio blockquote { margin: 0; font-size: 1rem; }

/* Sabíeu que */
.retol-foto { display: block; width: 100%; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45); }

/* Localització */
.mapa { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(.35); }

/* Contacte i peu */
.contacte h3 { font-family: var(--font-titol); font-size: 1.5rem; color: var(--blanc); }
.contacte-llista { list-style: none; padding: 0; margin: 0; }
.contacte-llista li { padding: .25rem 0; }
.contacte-llista a { color: var(--or); font-weight: 700; text-decoration: none; }
.contacte-llista a:hover { text-decoration: underline; }
.contacte-logo { width: 220px; }
.peu { background: var(--negre); color: #8a8a8a; padding: 1.5rem 0 2rem; font-size: .9rem; border-top: 1px solid #222; }
.peu .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.peu a { color: #b0b0b0; }

/* Barra fixa per demanar cita al mòbil */
.barra-cita {
  position: fixed; inset: auto 0 0 0; z-index: 1030;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--negre);
}
@media (max-width: 991.98px) { .peu { padding-bottom: 6.5rem; } }

/* Pàgines legals */
.legal { padding-block: 3rem var(--espai-seccio); }
.legal h1 { font-family: var(--font-lletra); font-weight: 400; color: var(--or); font-size: clamp(3rem, 7vw, 5rem); margin-bottom: 2rem; }
.legal h2 { font-family: var(--font-titol); font-size: 1.5rem; color: var(--negre); margin-top: 2.5rem; }
.legal p, .legal li { max-width: 68ch; }
.pendent { background: #fff3bf; padding: 0 .25em; }

@media (max-width: 575.98px) {
  .titol-sub, .portada-sub, .portada-ofici { letter-spacing: .18em; }
  .portada-ofici { margin-top: .6em; }
}