/* Samarga Fran Modas: one page, phone first. The identity's colours: burgundy #611228 and nude #dfc7bb (the logo on
   Instagram and on the stores' Google profiles). */

/* Jost 300-700, Latin subset (Portuguese included), SIL Open Font License: fonts.google.com/specimen/Jost */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("jost-v20-latin.woff2") format("woff2");
}

/* The logo's "· Desde 1992 ·": Quicksand (SIL Open Font License), only its 9 characters, renamed as the licence asks
   (scripts/logo.py). "block": the tagline waits for its font (2 KB, preloaded) rather than flashing another one. */
@font-face {
  font-family: "Samarga Desde";
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url("samarga-desde.b1709e802a.woff2") format("woff2");
}

:root {
  --brand: #611228;
  --brand-deep: #4a0d1e;
  --nude: #dfc7bb;
  --ink: #2e0b16;
  --ink-soft: #74515a;
  --page: #faf4f1;
  --card: #ffffff;
  --line: #ecdcd4;
  --tile: #fcf8f6;
  --green: #117a3e;
  --green-deep: #0c602f;
  --open: #0f6b36;
  --open-bg: #e1f3e7;
  --closed: #74515a;
  --closed-bg: #f3e8e3;
  --holiday: #7c4a00;
  --holiday-bg: #fdecc8;
  --focus: #611228;
  --icon: #611228;
  --shadow: 0 1px 2px rgb(97 18 40 / 0.05), 0 16px 36px -22px rgb(97 18 40 / 0.4);
  color-scheme: light;
}

/* Dark: the system's choice (without JavaScript too), and the visitor's from the button (src/theme.js). The two blocks
   must stay identical: build.mjs stops if they differ. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f8ecef;
    --ink-soft: #d9bcc4;
    --page: #170a0f;
    --card: #231018;
    --line: #452630;
    --tile: #2b1520;
    --open: #86e0a6;
    --open-bg: #123a22;
    --closed: #e3c9d0;
    --closed-bg: #3a2029;
    --holiday: #ffd27d;
    --holiday-bg: #3d2a08;
    --focus: #f1c9d5;
    --icon: #eab8c6;
    --shadow: 0 18px 40px -24px rgb(0 0 0 / 0.75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --ink: #f8ecef;
    --ink-soft: #d9bcc4;
    --page: #170a0f;
    --card: #231018;
    --line: #452630;
    --tile: #2b1520;
    --open: #86e0a6;
    --open-bg: #123a22;
    --closed: #e3c9d0;
    --closed-bg: #3a2029;
    --holiday: #ffd27d;
    --holiday-bg: #3d2a08;
    --focus: #f1c9d5;
    --icon: #eab8c6;
    --shadow: 0 18px 40px -24px rgb(0 0 0 / 0.75);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--page);
}

body {
  margin: 0;
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; }
.num { white-space: nowrap; }

/* Gentle feedback on everything that can be pressed */
.zap, .quadro-zap, .acao-icone, .compartilhar > *, .tema {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .zap:active, .quadro-zap:active, .acao:active .acao-icone, .compartilhar > :active, .tema:active { transform: scale(0.96); }
}

/* ---------- Hero: only the logo, as on Instagram, on the identity's burgundy ---------- */

.hero {
  position: relative;
  background: radial-gradient(120% 95% at 50% 30%, #6c1530 0%, var(--brand) 55%, #550f23 100%);
  color: #fff;
  text-align: center;
  padding: 46px 20px 52px;
  padding-top: max(46px, env(safe-area-inset-top));
  /* a soft round foot, like the cup of the mark */
  border-radius: 0 0 50% 50% / 0 0 26px 26px;
}

.hero h1 { margin: 0; line-height: 0; }

.logo {
  display: block;
  width: min(64vw, 250px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.desde { font-family: "Samarga Desde", "Quicksand", sans-serif; font-kerning: none; }

.hero :focus-visible { outline-color: #fff; }

/* light or dark: the moon offers the dark theme, the sun the light one */
.tema {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  cursor: pointer;
}
.tema .icon { grid-area: 1 / 1; width: 20px; height: 20px; }
.tema .sol, .tema[aria-pressed="true"] .lua { display: none; }
.tema[aria-pressed="true"] .sol { display: block; }

/* The mark draws itself once, as the line drawing it is; then the name appears. Not with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero .marca path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: traca 1.3s cubic-bezier(0.45, 0.05, 0.25, 1) 0.1s forwards;
  }
  .hero .marca path + path { animation-delay: 0.4s; }
  .hero .nome { opacity: 0; animation: surge 0.7s ease 0.8s forwards; }
  html { scroll-behavior: smooth; }
}
@keyframes traca { to { stroke-dashoffset: 0; } }
@keyframes surge { to { opacity: 1; } }

/* ---------- The stores ---------- */

.lojas {
  max-width: 560px;
  margin: 0 auto;
  padding: 26px 16px 8px;
}

/* "Nossas lojas", with a fine rule after it (on both sides where it is centred) */
.lojas h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.lojas h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}

/* The board: every store at a glance, open or not, with its WhatsApp one tap away; the name leads to the store's
   card. Phones and tablets: from 980 px the three cards sit side by side. */
.quadro {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.quadro li { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 0 12px 0 16px; }
.quadro li + li { border-top: 1px solid var(--line); }
.quadro-loja {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 0;
  text-decoration: none;
}
.quadro-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.quadro-nome { font-size: 1.125rem; font-weight: 500; }
.quadro-status { margin-top: 3px; color: var(--ink-soft); font-size: 0.9375rem; }
.quadro-status:empty { display: none; }
.quadro-zap {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.quadro-zap .icon { width: 26px; height: 26px; }
.ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}
.ponto.aberta { background: var(--open); }
.ponto.fechada { background: var(--closed); opacity: 0.5; }
.ponto.feriado { background: var(--holiday); }

.lista {
  display: grid;
  gap: 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* One card per store. Phones: a column. From 980 px the cards share their rows (subgrid, below), so the name, the
   status, the WhatsApp button, the hours, the address… line up across the three. */
.loja {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
  scroll-margin-top: 12px;
}
.loja:target { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }

.loja h3 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 10px;
  border-radius: 999px;
  background: var(--closed-bg);
  color: var(--closed);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.aberta { background: var(--open-bg); color: var(--open); }
.chip.feriado { background: var(--holiday-bg); color: var(--holiday); }
/* open now: the dot breathes twice, then rests */
@media (prefers-reduced-motion: no-preference) {
  .chip.aberta::before { animation: respira 2.2s ease-in-out 0.6s 2; }
}
@keyframes respira { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent); } }

/* the chip above its sentence, always: side by side, the three cards keep the same rhythm */
.status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 12px 0 0; }

/* WhatsApp: the main way to reach a store */
.zap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  margin-top: 18px;
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  line-height: 1.15;
}
.zap .icon { width: 28px; height: 28px; }
.zap-texto { display: flex; flex-direction: column; align-items: flex-start; }
.zap strong { font-size: 1.125rem; font-weight: 500; white-space: nowrap; }
.zap small { font-size: 0.875rem; opacity: 0.92; font-variant-numeric: tabular-nums; }

/* Call, directions, Instagram: round buttons with their word underneath, like a phone's contact card */
.acoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 16px;
}
.acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}
.acao-icone {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--tile);
  color: var(--icon);
}
.acao-icone .icon { width: 22px; height: 22px; }

/* The details: hours, address, phone, e-mail. An icon each, air between them, no rules. */
.info {
  display: grid;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.info > div {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}
.info > div + div { padding-top: 16px; }
.info > .info-mail { padding-top: 8px; }        /* phone and e-mail belong together */
.info dt { padding-top: 2px; color: var(--icon); line-height: 0; }
.info dt .icon { width: 20px; height: 20px; }
.info dd { margin: 0; min-width: 0; font-size: 0.9375rem; line-height: 1.45; }
.info dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  text-decoration: none;
  overflow-wrap: break-word;
}
.endereco { display: block; }
.waze {
  gap: 8px;
  font-weight: 500;
}
.waze-icone { width: 22px; height: 22px; }
.info dd .waze { margin: -4px 0 -12px; }

/* The week: the days in two lines ("Segunda" over "a sexta") so each time fits on one; today in full ink */
.horas { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horas th, .horas td { padding: 0 0 7px; vertical-align: top; text-align: left; font-weight: 400; color: var(--ink-soft); }
.horas tr:last-child th, .horas tr:last-child td { padding-bottom: 0; }
.horas th { padding-right: 20px; }
.horas td span { display: block; white-space: nowrap; }
.horas tr.hoje th, .horas tr.hoje td { color: var(--ink); font-weight: 500; }

/* Share this store: all its data, ready to send on WhatsApp; the round button opens the phone's own share menu */
.compartilhar {
  display: flex;
  gap: 8px;
  margin-top: auto;              /* at the bottom of the card */
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.info { margin-bottom: 18px; }
.compartilhar > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.share-zap { flex: 1 1 auto; padding: 0 16px; }
.share-mais { flex: none; width: 46px; padding: 0; }
.compartilhar .icon { width: 20px; height: 20px; color: var(--icon); }
.compartilhar .share-zap .icon { color: var(--green); }
:root[data-theme="dark"] .compartilhar .share-zap .icon { color: var(--open); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .compartilhar .share-zap .icon { color: var(--open); }
}

/* ---------- Footer ---------- */

.rodape {
  padding: 40px 16px 44px;
  padding-bottom: max(44px, env(safe-area-inset-bottom));
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.rodape .marca-svg { display: block; width: 30px; height: auto; margin: 0 auto 12px; color: var(--icon); }
.rodape p { margin: 0; }
/* the preview only: the line about the studio's visit counter. Its link is as tall as any control (44 px) without
   spreading the lines apart: the box reaches 22 px above and below its words, so lines 24 px apart (1.7) keep it off
   the middle of the lines around it, where axe looks. */
.rodape .previa { max-width: 36em; margin: 16px auto 0; line-height: 1.7; letter-spacing: 0.01em; text-wrap: pretty; }
.previa a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  text-decoration-color: var(--icon);
  text-underline-offset: 3px;
}
/* the focus ring around the words: around the 44 px box it would cross the lines above and below */
.previa a:focus-visible { outline: 0; }
.previa a span { line-height: 1.2; border-radius: 3px; }
.previa a:focus-visible span { outline: 3px solid var(--focus); outline-offset: 1px; }
/* the real domain only: the link to the privacy page, small and quiet, as tall as any control */
.rodape .rodape-links { margin-top: 2px; }
.rodape-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}

/* The studio's signature: "site por", the compass in one colour (its needle cut out of the disc in the page's own
   colour), "Bussola". Quiet until pointed at; then the needle swings, as it does on bussola.company. */
.assinatura {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 12px;
  border-radius: 22px;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0;
}
.assinatura-por { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; }
.assinatura-marca { width: 17px; height: 17px; flex: none; overflow: visible; }
.assinatura-nome { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.bm-disco { fill: currentColor; }
.bm-marcas { fill: none; stroke: var(--page); stroke-opacity: 0.55; stroke-width: 3; stroke-linecap: round; }
.bm-norte { fill: var(--page); }
.bm-sul { fill: var(--page); fill-opacity: 0.45; }
.bm-agulha { transform-box: view-box; transform-origin: 32px 32px; }
@media (prefers-reduced-motion: no-preference) {
  .assinatura:hover .bm-agulha, .assinatura:focus-visible .bm-agulha { animation: agulha 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes agulha { 25% { rotate: 22deg; } 50% { rotate: -12deg; } 75% { rotate: 5deg; } }

/* ---------- The privacy page (the real domain only) ---------- */

.hero-curta { padding: 16px 20px 26px; padding-top: max(16px, env(safe-area-inset-top)); }
.hero-volta { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; }
.hero-volta .marca-svg { width: 34px; height: auto; }
.texto { max-width: 640px; margin: 0 auto; padding: 34px 20px 8px; }
.texto h1 { margin: 0; font-size: 2rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; }
.texto-data { margin: 6px 0 22px; color: var(--ink-soft); font-size: 0.9375rem; }
.texto h2 { margin: 34px 0 8px; font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.texto p, .texto ul { margin: 0 0 12px; line-height: 1.6; }
.texto ul { padding-left: 1.25em; }
.texto li + li { margin-top: 6px; }
.texto li::marker { color: var(--icon); }
.texto code { padding: 1px 6px; border-radius: 5px; background: var(--tile); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; }
.texto p a { text-decoration-color: var(--icon); text-underline-offset: 3px; }
.contagem { margin-top: 34px; padding: 20px 20px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.contagem h2 { margin-top: 0; }
.contagem-estado { font-weight: 500; }
.contagem-estado:empty { display: none; }
.contagem-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 2px 0 14px;
  padding: 0 22px;
  border: 1px solid var(--brand);
  border-radius: 24px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.contagem-botao[aria-pressed="true"] { border-color: var(--line); background: transparent; color: var(--ink); }
.texto-volta { margin: 26px 0 0; }
.texto-volta a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration-color: var(--icon); text-underline-offset: 4px; }

/* ---------- Hover, only where there is a mouse ---------- */

@media (hover: hover) {
  .zap:hover, .quadro-zap:hover { background: var(--green-deep); }
  .acao:hover .acao-icone, .compartilhar > *:hover { border-color: var(--icon); }
  .tema:hover { background: rgb(255 255 255 / 0.16); }
  .info dd a:hover { text-decoration: underline; text-decoration-color: var(--icon); text-underline-offset: 4px; }
  .previa a:hover { text-decoration-color: currentColor; }
  .rodape-links a:hover, .texto a:hover { text-decoration-color: currentColor; }
  .assinatura:hover { color: var(--ink); }
  .contagem-botao:hover { background: var(--brand-deep); }
  .contagem-botao[aria-pressed="true"]:hover { border-color: var(--icon); background: transparent; }
  .hero-volta:hover { background: rgb(255 255 255 / 0.1); }
  .quadro-loja:hover .quadro-nome { text-decoration: underline; text-decoration-color: var(--icon); text-underline-offset: 4px; }
}

/* ---------- Very small phones: a shorter hero, so the board starts higher ---------- */

@media (max-width: 359px) {
  .hero { padding: 40px 16px 42px; }
  .logo { width: 196px; }
  .lojas { padding-top: 22px; }
  .loja { padding: 22px 16px 16px; }
  /* the desktop's tighter WhatsApp button, so "Escrever no WhatsApp" stays on one line inside the card */
  .zap { gap: 10px; padding: 8px 16px; }
  .zap strong { font-size: 1.0625rem; }
}

/* ---------- Wider screens ---------- */

@media (min-width: 600px) {
  .hero { padding: 56px 24px 64px; border-radius: 0 0 50% 50% / 0 0 36px 36px; }
  .logo { width: 300px; }
}

@media (min-width: 980px) {
  .lojas { max-width: 1160px; padding: 48px 24px 16px; }
  /* the title centred, between two fine rules */
  .lojas h2 { width: min(100%, 520px); margin-inline: auto; font-size: 1.625rem; }
  .lojas h2::before { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, var(--line), transparent); }
  .quadro { display: none; }
  .lista { grid-template-columns: repeat(3, 1fr); gap: 0 20px; margin-top: 28px; }
  .loja { padding: 26px 24px 20px; }
  .zap { gap: 10px; padding: 8px 16px; }
  .zap strong { font-size: 1.0625rem; }
}

/* Side by side, every card follows the same nine rows: 1 name, 2 status, 3 WhatsApp, 4 actions, 5-8 hours, address,
   phone, e-mail, 9 share. A row is as tall as its tallest card, so everything lines up. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 980px) {
    .lista { grid-template-rows: repeat(9, auto); }
    .lista > li { display: grid; grid-row: span 9; grid-template-rows: subgrid; }
    .loja { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; height: auto; }
    .loja > h3 { grid-row: 1; }
    .loja > .status { grid-row: 2; align-self: start; }
    .loja > .zap { grid-row: 3; align-self: start; }
    .loja > .acoes { grid-row: 4; }
    .loja > .info { grid-row: 5 / span 4; display: grid; grid-template-rows: subgrid; }
    .loja > .compartilhar { grid-row: 9; margin-top: 0; }
  }
}