/* --------------------------------------------------------------- sistema

   Tret del Figma de la marca, amb els valors que hi ha escrits a dins, no a
   ull. Els colors hi van fins i tot amb nom propi:

     marron     #3D1B03   el text i el fons dels botons
     anaranjado #F54A04   la marca: el logotip i els titulars de les tarifes
     crema      #FCF5EE   el fons de tot
     blanco     #FFFFFF   el text a sobre del marró

   Les mides també són les seves: la reixa és de 12 columnes de 80 amb
   canals de 48 (1488 de contingut, 32 de marge), les targetes tenen 32 de
   radi, els botons 80 —o sigui, pastilla—, i la capçalera fa 74 d'alt.

   Tipografia. El Figma fa servir PP Editorial Old per als titulars i Basis
   Grotesque Arabic Pro per a la resta. Totes dues són de pagament i aquí no
   les podem incrustar, així que hi van les dues lliures més properes:
   Instrument Serif i Hanken Grotesk. Es canvien en una línia el dia que la
   Raquel tingui les llicències; tota la resta del sistema ja és exacta.
*/

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  color-scheme: light;

  --crema: #fcf5ee;
  --marron: #3d1b03;
  --anaranjado: #f54a04;
  --blanco: #ffffff;

  /* El fons és un blanc trencat, i les targetes el crema de la marca. Al
     Figma és al revés —les targetes van en crema a sobre d'una foto—, però
     sense foto el crema pla tirava massa a beix. Si es vol tornar enrere,
     són aquestes dues línies i prou. */
  --bg: #fffcf9;
  --surface: var(--crema);
  --surface-2: #f6ece0;
  --ink: var(--marron);
  --ink-2: #6b4526;
  --muted: #9c7a5f;
  --rule: #e7d8c8;
  --rule-soft: #f2e8dd;
  --accent: var(--anaranjado);
  /* El taronja sobre crema es queda a 3,2:1. Per a text petit i enllaços hi
     ha aquest maó, que arriba a 5,4:1 sense sortir de la família. */
  --accent-deep: #ac3211;
  --on-accent: var(--marron);
  --btn: var(--marron);
  --on-btn: var(--blanco);
  --ok: #2f6b4f;
  --warn: #9a5b12;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pill: 80px;
  --card: 32px;
  --tap: 48px;
  --gutter: 1.5rem;
}

/* Aquí no hi ha mode fosc, i és a posta.

   El Figma de la marca és clar i prou: crema, taronja i una serif editorial.
   Una identitat així no té versió fosca, i qui obrís l'app amb el mòbil en
   fosc no reconeixeria l'estudi. La declaracio color-scheme: light de sota és el que
   fa que els menús desplegables, els seleccionats i les barres de desplaçament
   també surtin clars en un telèfon configurat en fosc; sense ell, el sistema
   els pinta foscos pel seu compte i desentonen. */

* { box-sizing: border-box; }

/* Qualsevol display que posem després guanya a la regla [hidden] del
   navegador, i l'element es queda visible tot i estar marcat com a amagat. */
[hidden] { display: none !important; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-deep); text-underline-offset: 2px; }

/* Els titulars van en la serif, com al Figma: 60/60 al gran, sense retallar
   l'interlineat perquè les majúscules accentuades hi caben justes. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 11vw, 3.75rem); letter-spacing: 0.005em; }
h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
h3 { font-size: 1.375rem; }
p { margin: 0; }

.wrap { --pad: var(--gutter); max-width: 640px; margin: 0 auto; padding: 0 var(--gutter) 6rem; }
.wrap.wide { max-width: 1100px; }
.section { padding-top: 2rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack.tight { gap: 0.5rem; }
.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.tabular { font-variant-numeric: tabular-nums; }

/* El subtítol sota d'un titular: «Encuentra tu match perfecto», 16/20. */
.kicker { color: var(--ink-2); font-size: 1rem; line-height: 1.25; }

/* --------------------------------------------------------------- capçalera */

header.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule-soft);
}
header.top .bar {
  max-width: 640px; margin: 0 auto; padding: 0.9rem var(--gutter);
  display: flex; align-items: center; gap: 1rem; min-height: 74px;
}
header.top .bar.wide { max-width: 1100px; }

.brand { display: inline-flex; color: var(--accent); }

/* El logotip és el fitxer del Figma, posat de màscara: així un sol SVG serveix
   en taronja a la capçalera i en crema a sobre del taronja. */
.wordmark {
  display: block; width: 109px; aspect-ratio: 109 / 33.2028;
  background: currentColor;
  -webkit-mask: url(/logo.svg) no-repeat center / contain;
  mask: url(/logo.svg) no-repeat center / contain;
}

.lockup { display: inline-flex; color: currentColor; }
.lockup .wordmark { width: clamp(11rem, 46vw, 15rem); }

.badge {
  display: grid; place-items: center; background: var(--accent); color: var(--crema);
  border-radius: var(--card); padding: 3rem 1.5rem;
}

.account { display: block; width: 31px; height: 31px; color: var(--ink); }
.account svg { display: block; width: 100%; height: 100%; }

/* La navegació: 16 Medium en majúscules i sense espaiat extra. L'aire el
   posen els buits de 80, no les lletres separades. */
nav.tabs { display: flex; gap: 2rem; margin-left: auto; align-items: center; }
nav.tabs a {
  text-decoration: none; color: var(--ink);
  font-size: 1rem; font-weight: 500; line-height: 1; text-transform: uppercase;
  padding: 0.5rem 0; border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
nav.tabs a[aria-current="page"] { border-bottom-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { nav.tabs a:hover { color: var(--accent-deep); } }

@media (max-width: 859px) {
  nav.tabs:not(.strip) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    margin: 0; gap: 0; justify-content: space-around;
    background: var(--bg); border-top: 1px solid var(--rule);
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  }
  nav.tabs:not(.strip) a {
    flex: 1; text-align: center; font-size: 0.6875rem; padding: 0.5rem 0.2rem;
    border-bottom: none; border-radius: var(--pill); line-height: 1.3;
  }
  nav.tabs:not(.strip) a[aria-current="page"] { background: var(--surface-2); }
}

/* Set seccions no caben al peu: al panell la navegació es desplaça sota la
   capçalera, amb una difuminació que ho insinua. */
nav.tabs.strip {
  max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) 0.75rem; gap: 1.75rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}
nav.tabs.strip::-webkit-scrollbar { display: none; }
nav.tabs.strip a { white-space: nowrap; font-size: 0.8125rem; }

.langswitch { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }
@media (min-width: 860px) { .langswitch { margin-left: 0; } }
.langswitch button, .langswitch span {
  font: inherit; font-size: 1rem; font-weight: 500; text-transform: uppercase;
  padding: 0.25rem 0; background: none; border: none; color: var(--muted); cursor: pointer;
}
.langswitch span[aria-current="true"] { color: var(--ink); }

.viewswitch { display: inline-flex; gap: 0.5rem; }
.viewswitch a {
  padding: 0.55rem 1.25rem; border-radius: var(--pill); text-decoration: none;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--rule);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.viewswitch a[aria-current="true"] {
  background: var(--marron); color: var(--blanco); border-color: transparent;
}

/* --------------------------------------------------------------- cinta

   La banda taronja del Figma, amb la frase repetida. Es mou a poc a poc i es
   para en sec si al sistema hi ha les animacions desactivades. */

.marquee {
  background: var(--accent); color: var(--on-accent);
  margin: 0 calc(var(--gutter) * -1); padding: 0.85rem 0;
  overflow: hidden; display: flex; gap: 0;
  font-size: 0.9375rem; white-space: nowrap; user-select: none;
}
.marquee span {
  display: inline-block; padding-right: 0.75rem;
  animation: slide 38s linear infinite;
}
@keyframes slide { to { transform: translateX(-100%); } }

/* --------------------------------------------------------------- hero

   Com al Figma: la foto a tota amplada, el titular a sobre i les targetes
   trepitjant-ne la part de baix. El text hi va en blanc, i perquè s'hi
   pugui llegir sempre —una foto la canvia la Raquel quan vol, i la següent
   pot ser molt més clara— hi ha un degradat fosc a sota. Sense ell això
   depèn de la sort. */

.hero {
  position: relative; isolation: isolate;
  /* A sangre de debò: no n'hi ha prou de desfer el coixí de .wrap, perquè la
     columna va centrada i a l'escriptori la foto es quedaria dins dels 640.
     Això l'estira fins a les dues vores sigui quina sigui l'amplada. */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  min-height: clamp(11rem, 27vh, 15rem);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* En vertical la foto es retalla pel centre i es queda en un tors. Pujant
     una mica l'enquadrament hi entren les cares. */
  object-position: center 38%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(36, 16, 1, 0.62), rgba(36, 16, 1, 0.12) 55%, transparent);
}
.hero-text {
  /* Centrat de debò. El contingut en puja 2,5rem i en tapa la franja de
     baix, així que el coixí inferior la compensa: sense això el titular
     queda descolgat, que es nota sobretot quan va sol i sense la línia
     de sota, com a «Hola, Marta». */
  padding: 2.25rem var(--gutter) calc(2.25rem + 2.5rem);
  text-align: center; color: var(--blanco);
  display: flex; flex-direction: column; gap: 0.5rem; max-width: 34rem;
}
.hero-text h1 { color: inherit; }
.hero-text p { font-size: 1rem; line-height: 1.25; }

/* La de tarifes. Allà la gent compara i decideix, i la foto hi té lloc; a la
   resta mana el contingut. */
.hero.tall { min-height: clamp(18rem, 46vh, 26rem); }

/* Si encara no hi ha cap foto, la capçalera es queda com un bloc de color de
   la marca en comptes d'un forat. */
.hero.plain { background: var(--accent); }
.hero.plain::after { display: none; }
.hero.plain .hero-text { color: var(--crema); }

/* Les targetes pugen a trepitjar la foto, com al disseny. */
/* Trepitjar la foto només funciona si el que la trepitja porta superfície
   pròpia: un control transparent a cavall de la vora de la imatge no es
   llegeix. A tarifes la superfície la posen les targetes; a la resta, aquest
   full, que puja per sota del titular i s'hi endú tot el contingut.

   El coixí lateral és exactament el mateix que el de la columna, perquè les
   peces que es claven a les vores —la tira de dies, la cinta— hi segueixin
   quadrant sense cap excepció. */
.lift { margin-top: -2.5rem; position: relative; z-index: 1; }

.sheet-up {
  margin-top: -2.5rem; position: relative; z-index: 1;
  background: var(--surface); border-radius: var(--card);
  /* Més estret que la columna: el full ja va encaixat dins seu, i amb dos
     coixins de 1,5rem el contingut es quedava sense amplada i les files de
     botons es partien. */
  --pad: 1.15rem;
  padding: 1.75rem var(--pad) 1.5rem;
  box-shadow: 0 1px 2px rgba(61, 27, 3, 0.04), 0 18px 40px -28px rgba(61, 27, 3, 0.35);
}

/* --------------------------------------------------------------- dies */

.daystrip {
  display: flex; gap: 0.25rem; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  margin: 0 calc(var(--pad) * -1); padding: 0.25rem var(--pad) 0.5rem;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.daystrip::-webkit-scrollbar { display: none; }

.day {
  scroll-snap-align: start; scroll-margin-left: var(--pad);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  min-width: 3.25rem; padding: 0.4rem 0.2rem 0.5rem;
  text-decoration: none; color: var(--muted); border-radius: 16px;
}
.day .dow { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; }
.day .num {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--pill); font-size: 1.0625rem;
  font-variant-numeric: tabular-nums; color: var(--ink);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.day[aria-current="true"] { color: var(--accent-deep); }
.day[aria-current="true"] .num { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .day:hover .num { background: var(--surface-2); }
  .day[aria-current="true"]:hover .num { background: var(--accent); }
}

/* --------------------------------------------------------------- mes */

.monthnav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.monthnav .name { font-family: var(--serif); font-size: 1.75rem; }
.monthnav .name::first-letter { text-transform: uppercase; }
.monthnav a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--pill); text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--rule);
}
@media (hover: hover) and (pointer: fine) { .monthnav a:hover { background: var(--surface-2); } }

.monthgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.monthgrid .head {
  text-align: center; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase;
  color: var(--muted); padding-bottom: 0.4rem;
}
.monthgrid .cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.1rem 0.6rem; border-radius: 14px; min-height: 3.4rem;
  text-decoration: none; color: var(--ink); background: none; border: none;
  font: inherit; text-transform: none;
  transition: background-color 160ms var(--ease-out);
}
.monthgrid .cell .n { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.monthgrid .cell .tick { height: 0.4rem; display: flex; gap: 0.2rem; align-items: center; }
.monthgrid .cell .tick i { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--rule); display: block; }
.monthgrid .cell.mine .tick i { background: var(--accent); }
.monthgrid .cell.mine .n { font-weight: 600; }
.monthgrid .cell.today .n { color: var(--accent-deep); font-weight: 600; }
.monthgrid .cell.outside { opacity: 0.3; }
.monthgrid .cell.past { opacity: 0.4; }
.monthgrid .cell.empty { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .monthgrid a.cell:hover { background: var(--surface-2); } }

.monthlegend { display: flex; gap: 1.25rem; font-size: 0.8125rem; color: var(--muted); flex-wrap: wrap; }
.monthlegend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.monthlegend i { width: 0.4rem; height: 0.4rem; border-radius: 50%; display: block; background: var(--rule); }
.monthlegend i.mine { background: var(--accent); }
.monthlegend .dim { opacity: 0.55; }

/* --------------------------------------------------------------- horari */

.sched { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }

.slot-row {
  display: flex; width: 100%; align-items: center; gap: 1rem; text-align: left;
  padding: 1rem 0.25rem; min-height: var(--tap);
  background: none; border: none; border-bottom: 1px solid var(--rule-soft);
  font: inherit; color: inherit; border-radius: 0;
  transition: background-color 160ms var(--ease-out);
}
/* La fila és un botó, i els botons porten la seva pròpia caixa i espaiat. La
   drecera font: inherit no desfà cap de les dues, que no en formen part. */
.slot-row, .monthgrid .cell { text-transform: none; letter-spacing: normal; }
button.slot-row { cursor: pointer; }
a.slot-row { text-decoration: none; }
button.slot-row:disabled { cursor: default; }

.slot-row .time {
  font-size: 1.375rem; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; min-width: 3.6rem;
}
.slot-row .who { font-size: 1rem; font-weight: 500; }
.slot-row .meta { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 0.15rem; }
.slot-row .cta {
  margin-left: auto; white-space: nowrap; font-size: 0.875rem;
  color: var(--on-btn); background: var(--btn);
  padding: 0.6rem 1.25rem; border-radius: var(--pill); border: 1px solid transparent;
  transition: opacity 160ms var(--ease-out);
}
.slot-row .cta.quiet { color: var(--muted); background: none; border-color: var(--rule); }
.slot-row .cta.mine { background: var(--accent); color: var(--on-accent); }
.slot-row.taken { color: var(--muted); }

@media (hover: hover) and (pointer: fine) {
  button.slot-row:not(:disabled):hover, a.slot-row:hover { background: var(--surface-2); }
  button.slot-row:not(:disabled):hover .cta { opacity: 0.88; }
}
button.slot-row:not(:disabled):active { background: var(--surface-2); }

.sched > * { animation: rise 280ms var(--ease-out) backwards; }
.sched > :nth-child(1) { animation-delay: 0ms; }
.sched > :nth-child(2) { animation-delay: 30ms; }
.sched > :nth-child(3) { animation-delay: 60ms; }
.sched > :nth-child(4) { animation-delay: 90ms; }
.sched > :nth-child(5) { animation-delay: 120ms; }
.sched > :nth-child(n + 6) { animation-delay: 150ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Una reserva del compte: la fila de sempre i, a sota, les dues accions.
   Abans tota la fila era el botó de cancel·lar; ara n'hi ha dues i cap no
   ha de poder tocar-se per error en lloc de l'altra. */
.booking { border-bottom: 1px solid var(--rule-soft); }
.booking .slot-row { border-bottom: none; padding-bottom: 0.35rem; }
.booking-actions {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0 0.25rem 1rem;
}
/* Amb amplada, les accions s'arrengleren amb el text i no amb l'hora. Al
   mòbil no hi caben totes dues en una línia si se'ls treu aquest espai. */
@media (min-width: 480px) {
  .booking-actions { padding-left: calc(3.6rem + 1.25rem); }
}
.booking-actions form { margin-left: auto; }
.booking-actions button.link { color: var(--muted); font-size: 0.875rem; }

/* --------------------------------------------------------------- news */

.newslist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.newslist li { padding: 1rem 0.25rem; border-bottom: 1px solid var(--rule-soft); }
.newslist .when {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--muted);
}
.newslist .pill { padding: 0.1rem 0.55rem; font-size: 0.75rem; }
.newslist p { margin: 0.35rem 0 0; line-height: 1.45; }
.newslist li.is-new p { font-weight: 500; }
.news .push { padding: 0.25rem 0 0.5rem; }
.news .empty { padding: 1.5rem 0; }

/* La xifra dels avisos per llegir, al costat de «El meu compte». */
.navbadge {
  display: inline-grid; place-items: center; vertical-align: 0.1em;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; margin-left: 0.35rem;
  border-radius: var(--pill); background: var(--accent); color: var(--on-accent);
  font-size: 0.6875rem; font-weight: 600; line-height: 1;
}

/* --------------------------------------------------------------- bons */

.bono { border-top: 1px solid var(--rule); padding: 1.1rem 0.25rem; display: flex; gap: 1.25rem; align-items: center; }
.bono .count {
  font-size: 2.8125rem; line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; min-width: 2.8rem; color: var(--ink);
}
.bono .count.inf { font-size: 2rem; }
.bono .name { font-weight: 500; }
.bono .when { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 0.2rem; }
.bono.spent { color: var(--muted); }
.bono.spent .count { color: var(--muted); }

/* --------------------------------------------------------------- tarifes

   La targeta del Figma, mida per mida: 336 d'ample i 32 de radi, el nom en
   serif taronja de 22, el preu en 45 amb l'euro de 20 al davant i una mica
   amunt, el text a 15, la validesa a 13, el botó de 48 a tota l'amplada i,
   al peu, el rodonet amb la marca de verificat.
*/

.tariffs { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tariffs { grid-template-columns: repeat(2, 1fr); } }

.tariff {
  background: var(--surface); border-radius: var(--card);
  padding: 2rem 1.5rem 1.25rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.75rem; height: 100%;
  box-shadow: 0 1px 2px rgba(61, 27, 3, 0.04), 0 18px 40px -28px rgba(61, 27, 3, 0.35);
}
.tariff .name {
  font-family: var(--serif); font-size: 1.375rem; line-height: 1.15;
  text-transform: uppercase; color: var(--accent);
  /* La PP Editorial Old del Figma és més ampla que la substituta lliure.
     Aquest pèl d'espaiat recupera el color de la línia original. */
  letter-spacing: 0.02em;
}
.tariff .price {
  display: inline-flex; align-items: flex-start; gap: 0.04em;
  font-size: 2.8125rem; line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
/* L'euro va al davant i alçat, com al disseny: la seva base queda a l'alçada
   de la part alta de les xifres. */
.tariff .price .eur { font-size: 1.25rem; line-height: 1; margin-top: 0.14em; }
.tariff .terms { font-size: 0.9375rem; line-height: 1.33; color: var(--ink); max-width: 30ch; }
.tariff .validity { font-size: 0.8125rem; line-height: 1.5; color: var(--ink); }
.tariff form { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.tariff form button { width: 100%; }
.tariff .foot {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--ink); margin-top: auto; padding-top: 1.1rem;
}
.tariff .foot svg { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------- controls

   Els botons del Figma no criden: 16 en caixa normal, blanc sobre marró i
   cantonada de pastilla. Res de majúscules ni lletres separades. */

button, .btn {
  font: inherit; font-size: 1rem; cursor: pointer;
  padding: 0.85rem 1.75rem; border-radius: var(--pill); border: 1px solid transparent;
  background: var(--btn); color: var(--on-btn); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--tap);
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
button:active, .btn:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  button:hover, .btn:hover { opacity: 0.88; }
}
button.ghost, .btn.ghost { background: none; color: var(--ink); border-color: var(--rule); }
button.link, .btn.link {
  background: none; color: var(--accent-deep); border: none; padding: 0.3rem;
  min-height: 0; font-size: 0.9375rem;
}
button.small, .btn.small { padding: 0.55rem 1.1rem; font-size: 0.875rem; min-height: 0; }
button[disabled] { opacity: 0.4; cursor: not-allowed; }

label {
  display: block; font-size: 0.8125rem; color: var(--ink-2); margin-bottom: 0.4rem;
}
/* Dos camps de costat només si hi caben de debò. */
form .row > .grow { min-width: 11rem; }
input, select, textarea {
  font: inherit; font-size: 1rem; width: 100%; padding: 0.8rem 1rem;
  border-radius: 16px; border: 1px solid var(--rule);
  background: var(--blanco); color: var(--ink); min-height: var(--tap);
}
input::placeholder { color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, .slot-row:focus-visible, .day:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
form.inline { display: inline; }

/* Mode SMS demo. El codi arriba com una notificació del mòbil: és el que la
   clienta veuria de debò, i tocar-la omple el camp. */
.demo-entry { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem;
  border-top: 1px solid var(--rule-soft); }
button.sms {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem;
  width: 100%; text-align: left; padding: 0.9rem 1.1rem; border-radius: 20px;
  background: var(--blanco); color: var(--ink); border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgb(61 27 3 / 0.08);
  animation: sms-in 420ms var(--ease-out) both;
}
.sms-head { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--muted); }
.sms-head strong { color: var(--ink); font-weight: 600; }
.sms-body { font-size: 0.9375rem; line-height: 1.4; }
@keyframes sms-in { from { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { button.sms { animation: none; } }

input.code {
  font-size: 1.75rem; letter-spacing: 0.35em; text-align: center;
  font-variant-numeric: tabular-nums; padding-left: 0.35em;
}

/* Un avís és una targeta com qualsevol altra, amb el mateix radi que la
   resta. El to el marca un rodonet, no un filet de color al costat. */
.notice {
  background: var(--surface); color: var(--ink);
  padding: 1rem 1.15rem 1rem 2.3rem; border-radius: 16px;
  font-size: 0.9375rem; line-height: 1.4;
  position: relative;
}
/* El rodonet va posicionat i no és una peça d'un contenidor flexible: si ho
   fos, cada tros de la frase —l'enllaç per una banda, la resta per l'altra—
   seria una peça més i el text acabaria partit en columnes. */
.notice::before {
  content: ""; position: absolute; left: 1.15rem; top: 1.45rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent);
}
.notice.bad::before { background: var(--warn); }
.notice.good::before { background: var(--ok); }

.empty { padding: 3rem 0; text-align: center; color: var(--muted); }
/* Un estat buit informa, no encapçala: ha de pesar menys que el títol de la
   secció que té a sobre, o es llegeixen com dos titulars seguits. */
.empty strong {
  display: block; color: var(--ink); font-weight: 400; margin-bottom: 0.4rem;
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.15;
}

/* --------------------------------------------------------------- panell */

.card {
  background: var(--surface); border-radius: var(--card); padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(61, 27, 3, 0.04);
}
.card.flat { background: none; box-shadow: none; padding-left: 0; padding-right: 0; }
.slot { display: flex; gap: 1rem; align-items: center; }
.slot .when { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 3.6rem; }
.slot .who { font-size: 0.9375rem; color: var(--muted); }
.slot .left { font-size: 0.8125rem; color: var(--muted); }
.slot.full { opacity: 0.55; }

.pill {
  display: inline-block; font-size: 0.8125rem; padding: 0.3rem 0.75rem;
  border-radius: var(--pill); border: 1px solid var(--rule); color: var(--muted);
}
.pill.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.pill.ok { color: var(--ok); border-color: var(--ok); }
.pill.warn { color: var(--warn); border-color: var(--warn); }
/* L'únic punt de color de l'app: diu si la clienta té alguna cosa pendent,
   que és el que la Raquel mira a cada classe (RF-36). */
.dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }

a.plain { color: var(--ink); text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { a.plain:hover { text-decoration: underline; } }

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
/* Una taula de sis columnes al mòbil no hi cap, i val més que llisqui de
   costat que no pas partir-la en síl·labes. Però això s'ha de demanar: amb
   dues columnes, com l'historial de la clienta, forçar l'amplada només
   aconsegueix tallar el text i treure una barra de desplaçament que creua la
   cantonada de la targeta. */
.scroll.wide table { min-width: 34rem; }
/* L'historial de la clienta: la data i l'hora són una sola cosa i no es
   parteixen per la meitat. Qui s'ha d'avenir a ocupar dues línies és
   l'estat, que és text corrent. */
table.log td:first-child, table.log th:first-child { white-space: nowrap; }
table.log td, table.log th { padding-left: 0; padding-right: 0.5rem; }
.scroll td .row { flex-wrap: nowrap; white-space: nowrap; }
th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--rule-soft); }
th { font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroll { overflow-x: auto; }

/* Al mòbil el commutador i el botó d'instal·lar no caben en una línia, i
   quan salten tots dos es queden arrenglerats a l'esquerra, com si fos un
   descuit. Empenyent el botó cap a la dreta, el salt sembla volgut. */
.toolbar #install { margin-left: auto; }

#install { display: none; }

/* Sortir va al final del compte, discret: no és el que s'hi ve a fer. */
.signout { margin-top: 2.5rem; }

dialog.sheet {
  border: none; border-radius: var(--card) var(--card) 0 0;
  padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--surface); color: var(--ink); width: 100%; max-width: 34rem;
  margin: auto auto 0; box-shadow: 0 -8px 40px rgba(61, 27, 3, 0.22);
}
dialog.sheet::backdrop { background: rgba(36, 16, 1, 0.5); }
dialog.sheet ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
dialog.sheet li::marker { color: var(--accent); }
dialog.sheet button { width: 100%; margin-top: 0.75rem; }
@media (min-width: 560px) { dialog.sheet { border-radius: var(--card); margin: auto; } }

@media (min-width: 860px) { .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } }

/* --------------------------------------------------------------- peu

   Al Figma el peu és el moment de marca més gran de tot el web: el logotip
   ocupa tota l'amplada. Aquí fa el mateix, retallat al que hi cap. */

.sitefoot {
  /* El marge negatiu de baix es menja els 6rem que .wrap reserva per a la
     barra de navegació del mòbil: així el marró arriba fins al final i la
     barra hi queda a sobre, en comptes de deixar una franja crema. */
  margin: 4rem calc(var(--gutter) * -1) -6rem;
  padding-bottom: 6rem;
  background: var(--marron); color: var(--crema);
  border-radius: var(--card) var(--card) 0 0;
  overflow: hidden;
}
.sitefoot .marquee { margin: 0; border-radius: 0; }
.footin { padding: 2.5rem var(--gutter) 2rem; display: flex; flex-direction: column; gap: 2.5rem; }
.footin .lockup.big { color: var(--crema); width: 100%; }
.footin .lockup.big .wordmark { width: 100%; }
.footcols { display: flex; flex-direction: column; gap: 1.75rem; }
.footcols .hours { font-size: 0.9375rem; line-height: 1.5; max-width: 38ch; opacity: 0.85; }
.footcols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9375rem; }
.footcols .label { text-transform: uppercase; opacity: 0.6; margin-bottom: 0.3rem; }
.footcols a { color: var(--crema); text-decoration: none; border-bottom: 1px solid rgba(252, 245, 238, 0.35); }
@media (hover: hover) and (pointer: fine) { .footcols a:hover { border-bottom-color: var(--crema); } }
@media (min-width: 720px) {
  .footin { flex-direction: column-reverse; }
  .footcols { flex-direction: row; justify-content: space-between; gap: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee span { animation: none; }
}