html:has(.brisa-screen),
body:has(.brisa-screen),
#root:has(.brisa-screen) {
  background: #fbf2e4 !important;
}
#root:has(.brisa-screen) {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 !important;
}
.brisa-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}
.brisa-panel {
  --ink: #345a6d;
  --paper: #fbf2e4;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  box-sizing: border-box;
  width: min(100%, max(300px, 50vh), 500px);
  width: min(100%, max(300px, 50dvh), 500px);
  aspect-ratio: 1 / 2;
  background-color: var(--paper);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: var(--ink);
  text-align: center;
}
.brisa-home {
  background-image: url('menu/capa-aquarela.webp');
}
.brisa-menu {
  background-image: url('menu/menu-aquarela.webp');
}
.brisa-menu::before,
.brisa-menu::after,
.reveal-petals span {
  position: absolute;
  z-index: -1;
  width: clamp(11px, 4.4%, 20px);
  aspect-ratio: 55 / 48;
  background: url('menu/petalas.webp') 69% top / 279% auto no-repeat;
  opacity: .64;
  pointer-events: none;
  content: '';
}
.brisa-menu::before {
  top: 38%;
  right: 5.5%;
  transform: rotate(20deg);
}
.brisa-menu::after {
  top: 64.5%;
  right: 7%;
  width: clamp(9px, 3.4%, 15px);
  transform: rotate(-34deg);
}
.brisa-panel :is(.brisa-info, .brisa-start, .brisa-start-hint, .brisa-category, .brisa-favorites) {
  appearance: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.brisa-panel button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 18px;
}
.brisa-panel .brisa-info {
  position: absolute;
  z-index: 2;
  bottom: max(12px, env(safe-area-inset-bottom));
  right: max(8px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 3px;
}
.brisa-info span {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--paper);
  font: 29px/1 Georgia, serif;
}
.brisa-home-brand {
  position: absolute;
  top: 17.4%;
  left: 21%;
  width: 67%;
}
.brisa-home-brand img,
.brisa-menu-logo {
  display: block;
  height: auto;
}
.brisa-home-brand img {
  width: 100%;
}
.brisa-home-brand p {
  margin: 3px 0 0;
  color: #87553d;
  font: clamp(15px, 4.85cqw, 23px)/1.16 Georgia, serif;
}
.brisa-panel .brisa-start {
  position: absolute;
  top: 43%;
  left: 31%;
  width: 44%;
  height: 22%;
  padding: 0;
}
.brisa-home-action {
  position: absolute;
  top: 76.1%;
  inset-inline: 0;
}
.brisa-panel .brisa-start-hint {
  position: relative;
  isolation: isolate;
  width: min(65%, 320px);
  min-height: 44px;
  margin-top: max(9px, 2.2cqw);
  margin-inline-start: 3cqw;
  padding: 3px 10px;
  color: #63473a;
  font: clamp(15px, 4.2cqw, 20px)/1.1 Georgia, serif;
}
.brisa-start-hint::before,
.brisa-category::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  content: '';
}
.brisa-start-hint::before {
  aspect-ratio: 1158 / 250;
  background: url('menu/pinceladas.webp') center bottom / 132.6% auto no-repeat;
  opacity: .87;
}
.brisa-panel .brisa-start-hint[hidden] {
  display: none;
}
.brisa-home .brisa-home-install {
  width: min(80%, 310px);
  margin: 0 auto;
}
.brisa-home-install .v30-install {
  min-height: 44px;
  padding: 8px 18px;
  font-size: clamp(15px, 4cqw, 19px);
}
.brisa-home-install .sa-dismiss-install {
  display: block;
  min-height: 44px;
  margin: 0 auto;
  padding: 4px 7px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: clamp(14px, 3.9cqw, 17px)/1.15 Georgia, serif;
  text-decoration: underline;
}
.brisa-menu-logo {
  position: absolute;
  top: 11.5%;
  left: 19%;
  width: 62%;
}
.brisa-menu-actions {
  position: absolute;
  top: 28.9%;
  inset-inline: 0;
}
.brisa-menu nav {
  display: grid;
  grid-template-rows: repeat(5, minmax(44px, 1fr));
  gap: clamp(4px, 2.25cqw, 12px);
  justify-items: center;
}
.brisa-panel .brisa-category {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 69%;
  min-height: 44px;
  aspect-ratio: 5.5;
  padding: 4px 10px;
  font: clamp(17px, 5.25cqw, 25px)/1.13 Georgia, serif;
}
.brisa-category::before {
  height: 100%;
  background: url('menu/pinceladas.webp') center top / 137.4% 379% no-repeat;
  opacity: .87;
}
.brisa-panel .brisa-favorites {
  display: inline-flex;
  margin-top: clamp(10px, calc(35cqw - 98px), 30px);
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 4px 9px;
  font: clamp(17px, 5cqw, 24px)/1.15 Georgia, serif;
  white-space: nowrap;
}
.brisa-favorites img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

/* Ações da página de informações. */
.about .primary {
  background: #afc2a4;
  color: #294437;
}
.about .primary:focus-visible {
  outline: 2px solid #345d47;
  outline-offset: 3px;
}

/* As pétalas acompanham os ramos e ficam nas margens da carta. */
.reveal-petals {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.reveal-petals span {
  z-index: auto;
  opacity: .78;
}
.reveal-petals span:nth-child(1) {
  top: 9%;
  left: 51%;
  transform: rotate(-22deg);
}
.reveal-petals span:nth-child(2) {
  top: 12.5%;
  left: 42%;
  width: clamp(11px, 4.9%, 19px);
  transform: rotate(-52deg);
}
.reveal-petals span:nth-child(3) {
  top: 16%;
  left: 35%;
  width: clamp(9px, 3.4%, 14px);
  transform: rotate(21deg);
}
.reveal-petals span:nth-child(4) {
  bottom: 10.5%;
  left: 34%;
  width: clamp(12px, 5.4%, 21px);
  transform: rotate(29deg);
}
.reveal-petals span:nth-child(5) {
  bottom: 14%;
  left: 42%;
  width: clamp(10px, 3.8%, 15px);
  transform: rotate(52deg);
}

.confirma-exclusao {
  box-sizing: border-box;
  width: min(340px, calc(100% - 32px));
  padding: 24px 18px;
  border: 1px solid #d8c3af;
  border-radius: 22px;
  background: #fff8ed;
  color: #574134;
  box-shadow: 0 12px 32px #43352b35;
}
.confirma-exclusao::backdrop {
  background: #33292080;
}
.confirma-exclusao p {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}
.confirma-exclusao .convite-actions {
  margin-top: 18px;
}
.confirma-exclusao button[value="cancelar"] {
  background: #e4ecd9;
  border-color: #becaae;
  color: #344837;
}