/* One surface carries the colour and shoreline through the whole page. */
:root {
  --almare-paper: #f8fbf7;
  --almare-night: #1c2632;
  --almare-night-end: #21363c;
}

body {
  padding-top: 0;
  padding-bottom: 0 !important;
  background: #eef3ef;
}

main#conteudo {
  --dusk-start: calc(100% - 1580px);
  --dusk-end: calc(100% - 1215px);
  width: 100%;
  max-width: 440px;
  min-width: 0;
  margin-inline: auto;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(ellipse 105% 9% at 105% 14%, #a7ceca70 0%, #b9dad534 45%, transparent 75%),
    radial-gradient(ellipse 105% 8% at -8% 25%, #ffeedb80 0%, #ffeedb28 48%, transparent 75%),
    radial-gradient(ellipse 110% 10% at 108% 39%, #b5d8cf78 0%, #cde5da2b 48%, transparent 75%),
    radial-gradient(ellipse 110% 8% at -12% 51%, #fff0dd85 0%, #fff0dd25 48%, transparent 76%),
    radial-gradient(ellipse 115% 9% at 105% 64%, #adcfc964 0%, #d4e5da22 48%, transparent 76%),
    radial-gradient(ellipse 110% 6% at -10% 73%, #ffeedb7a 0%, transparent 76%),
    linear-gradient(to bottom,
      var(--almare-paper) 0px,
      var(--almare-paper) var(--dusk-start),
      #e3ece6 calc(var(--dusk-start) + var(--dusk-step-1, 65px)),
      #b5c9c3 calc(var(--dusk-start) + var(--dusk-step-2, 140px)),
      #728e8d calc(var(--dusk-start) + var(--dusk-step-3, 225px)),
      var(--almare-night) var(--dusk-end),
      var(--almare-night-end) 100%);
}

main#conteudo::before,
main#conteudo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

main#conteudo::before {
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 7800' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%238abab7' stroke-width='.9'%3E%3Cpath opacity='.46' d='M490 420C210 650 530 890 280 1180S-180 1650 130 2000S560 2630 270 3020S-160 3560 110 3990S610 4510 280 5030S-130 5480 80 5930S540 6500 270 7040S0 7460 450 7900'/%3E%3Cpath opacity='.28' d='M510 435C230 665 550 905 300 1195S-160 1665 150 2015S580 2645 290 3035S-140 3575 130 4005S630 4525 300 5045S-110 5495 100 5945S560 6515 290 7055S20 7475 470 7915'/%3E%3Cpath opacity='.2' d='M530 450C250 680 570 920 320 1210S-140 1680 170 2030S600 2660 310 3050S-120 3590 150 4020S650 4540 320 5060S-90 5510 120 5960S580 6530 310 7070S40 7490 490 7930'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(transparent 3%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(transparent 3%, #000 12%, #000 88%, transparent 100%);
}

main#conteudo::after {
  opacity: .25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 7800' preserveAspectRatio='none'%3E%3Cpath fill='%238abab7' opacity='.17' d='M490 420C210 650 530 890 280 1180S-180 1650 130 2000S560 2630 270 3020S-160 3560 110 3990S610 4510 280 5030S-130 5480 80 5930S540 6500 270 7040L400 7100C680 6530 240 6240 200 5900S500 5430 400 5050S-100 4510 210 4020S570 3550 360 3040S-140 2550 220 2030S640 1650 370 1210S500 690 570 450Z'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(transparent 5%, #000 18%, #000 76%, transparent 96%);
  mask-image: linear-gradient(transparent 5%, #000 18%, #000 76%, transparent 96%);
}

/* Content remains in its original layout; sections no longer repaint a panel. */
main#conteudo > .hero,
main#conteudo > .welcome,
main#conteudo > .care-study,
main#conteudo > .new-section,
main#conteudo > .n-review.reviews-v2,
main#conteudo > .n-location.location-v2 {
  max-width: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

main#conteudo .n-treatment::before,
main#conteudo .n-appointment::before,
main#conteudo .currents,
main#conteudo .care-outro,
main#conteudo .shore,
main#conteudo .appointment-wave {
  display: none;
}

/* The photograph and its legibility veil both dissolve into the shared surface. */
main#conteudo .hero .portrait {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 86%);
}

main#conteudo .hero .veil {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 63%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 63%, transparent 96%);
}

/* Space for the shared dusk gradient after the final light-coloured call to action. */
main#conteudo > .n-review.reviews-v2 {
  padding-bottom: 340px;
}

main#conteudo > .appointment-v2 {
  padding-top: 65px;
}

/* Keep the same continuous surface with a shorter mobile transition between sections. */
@media (max-width: 599px) {
  main#conteudo { --dusk-step-1:22px;--dusk-step-2:48px;--dusk-step-3:76px; }
  main#conteudo > .n-review.reviews-v2 { padding-bottom:112px; }
  main#conteudo > .appointment-v2 { padding-top:48px; }
}

.n-footer {
  background: var(--almare-night-end);
  margin-top: -1px;
  border: 0;
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 600px) {
  main#conteudo { max-width: 720px; }
  main#conteudo::before { opacity: .48; }
}

@media (min-width: 1000px) {
  main#conteudo { max-width: 1180px; }
  main#conteudo > .appointment-v2 { padding-top: 80px; }
  main#conteudo .hero .portrait {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 81%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 81%);
  }
  main#conteudo .hero .veil {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 98%);
  }
}