/* ============================================================
   Links — Dra. Mariana Martins
   Bento Mosaic (Design 03 from the design package), baked
   to the user's saved tweak defaults.

   Foundations come from colors_and_type.css (the canonical
   design-system tokens). The few V3-specific knobs the user
   landed on after iterating live scoped to .v3 below.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--dm-bg);
  color: var(--dm-text);
  font-family: var(--dm-font-sans);
  font-size: var(--dm-body);
  line-height: var(--dm-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* V3 tweak vars — saved defaults the user converged on in the
   design iteration (chats 4–6). Scoped to .v3 so they can't
   leak into other surfaces that consume the same tokens. */
.v3 {
  --x-accent:        var(--dm-rose);
  --x-accent-deep:   var(--dm-rose-deep);
  --x-accent-soft:   var(--dm-rose-soft);
  --x-radius:        var(--dm-radius-md);   /* 14px — "default" tweak */
  --x-density:       1.2;
  --x-h-scale:       1;
  --x-sub-spacing:   -2px;
  --x-mono-color:    var(--dm-rose-deep);
  --x-mono-opacity:  0.2;
}

.dm-shell {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--dm-bg);
  position: relative;
}

/* ---------- Photo (used in the pill at the top) ---------- */
.dm-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dm-nude-soft);
  overflow: hidden;
  position: relative;
}
.dm-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.dm-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(circle at 70% 90%, rgba(70,61,56,0.18), transparent 60%);
  pointer-events: none;
}

/* ============================================================
   V3 — Bento Mosaic
   ============================================================ */
.v3 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 20px 20px;
  gap: calc(16px * var(--x-density));
}

.v3__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 6px;
  background: var(--dm-surface-raised);
  border: 1px solid var(--dm-border);
  border-radius: 999px;
  align-self: flex-start;
  box-shadow: var(--dm-shadow-xs);
}
.v3__topPhoto {
  width: 36px;
  height: 36px;
  border-radius: 999px;
}
.v3__topPhoto .dm-photo {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.v3__topText {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.v3__topName {
  font-family: var(--dm-font-display);
  font-size: 15px;
  letter-spacing: -0.01em;
}
.v3__topMeta {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--dm-text-soft);
  margin-top: 2px;
}

.v3__title {
  font-family: var(--dm-font-display);
  font-size: calc(28px * var(--x-h-scale));
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 2px 0 -4px;
  font-weight: 400;
}
.v3__title em {
  font-style: italic;
  color: var(--x-accent-deep);
}

.v3__sub {
  color: var(--dm-text-muted);
  font-size: 13.5px;
  line-height: 1.4;
  margin-top: var(--x-sub-spacing);
  margin-bottom: var(--x-sub-spacing);
}

/* ---------- Grid ---------- */
.v3__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(128px, auto);
  gap: calc(10px * var(--x-density));
}

.v3__cell {
  border-radius: calc(var(--x-radius) + 6px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow: var(--dm-shadow-sm);
  overflow: hidden;
  transition: transform var(--dm-dur-base) var(--dm-ease),
              box-shadow var(--dm-dur-base) var(--dm-ease);
  cursor: pointer;
}
.v3__cell:hover  { box-shadow: var(--dm-shadow-md); }
.v3__cell:active { transform: translateY(1px); }
.v3__cell.is-wide { grid-column: span 2; }

.v3__cellTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v3__cellIcon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.7);
  color: var(--dm-graphite);
  flex: 0 0 auto;
}
.v3__cellLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--dm-text-soft);
  font-weight: 500;
}
.v3__cellTitle {
  font-family: var(--dm-font-display);
  font-size: calc(22px * var(--x-h-scale));
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: inherit;
  font-weight: 400;
  margin: 0;
}
.v3__cellSub {
  font-size: 12px;
  color: var(--dm-text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

/* ---------- WhatsApp card ---------- */
.v3__cell--wa {
  background: var(--dm-whatsapp);
  color: var(--dm-bg-soft);
  justify-content: center;
  padding: 22px 24px;
  isolation: isolate;
}
.v3__cell--wa .v3__cellTitle {
  color: var(--dm-bg-soft);
  font-size: calc(28px * var(--x-h-scale));
  text-align: left;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.v3__waContent {
  position: relative;
  z-index: 1;
  max-width: 60%;
}
.v3__waBgIcon {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  color: rgba(251,246,242,0.92);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 100%);
  filter: blur(0.4px);
  opacity: 0.22;
}
.v3__waBgIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Instagram card ---------- */
.v3__cell--ig {
  background: var(--dm-nude-soft);
  color: var(--dm-graphite);
  isolation: isolate;
}
.v3__cell--ig .v3__cellIcon { background: var(--dm-bg-soft); color: var(--x-accent); }
.v3__cell--ig .v3__cellSub {
  color: var(--dm-graphite);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.v3__igBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.v3__igBg img {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: blur(5px) saturate(0.92);
  opacity: 0.55;
}
.v3__igBg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(211,176,167,0.20) 0%, rgba(247,239,234,0.78) 100%),
    radial-gradient(120% 80% at 50% 38%, rgba(247,239,234,0) 35%, rgba(211,176,167,0.30) 100%);
}
.v3__cell--ig > *:not(.v3__igBg) { position: relative; z-index: 1; }

/* ---------- Como chegar (map) card ---------- */
.v3__cell--map {
  background: var(--dm-bg-deep);
  color: var(--dm-graphite);
  isolation: isolate;
}
.v3__cell--map .v3__cellIcon { background: var(--dm-bg-soft); color: var(--x-accent); }
.v3__cell--map .v3__cellSub {
  color: var(--dm-graphite);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.v3__mapBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.v3__mapBg img {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  object-position: 49.5% 46.5%;
  filter: blur(4px) saturate(0.9);
  opacity: 0.7;
}
.v3__mapBg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247,239,234,0.20) 0%, rgba(247,239,234,0.78) 100%),
    radial-gradient(120% 80% at 50% 38%, rgba(247,239,234,0) 35%, rgba(247,239,234,0.45) 100%);
}
.v3__cell--map > *:not(.v3__mapBg) { position: relative; z-index: 1; }

/* ---------- Avaliações card ---------- */
.v3__cell--rev {
  background: var(--dm-surface-raised);
  color: var(--dm-graphite);
  border: 1px solid var(--dm-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v3__revHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.v3__revTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.v3__revTitleRow .v3__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--x-accent);
  font-size: 0;
}
.v3__revTitleRow .v3__stars svg { width: 13px; height: 13px; }
.v3__revCount {
  font-size: 11.5px;
  color: var(--dm-text-muted);
  letter-spacing: 0.01em;
  margin-top: 6px;
}
.v3__cellIcon--arrow {
  background: var(--dm-nude-soft);
  color: var(--x-accent-deep);
}

.v3__revMock {
  background: var(--dm-bg);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-md);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3__revRow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v3__revAvatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #D3B0A7 0%, #B9847D 100%);
  color: var(--dm-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dm-font-display);
  font-size: 12px;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.v3__revMeta {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.1;
}
.v3__revName {
  font-size: 13px;
  font-weight: 500;
  color: var(--dm-graphite);
}
.v3__revSub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--dm-text-muted);
  margin-top: 3px;
}
.v3__revMiniStars {
  display: inline-flex;
  gap: 1px;
  color: var(--x-accent);
  font-size: 0;
}
.v3__revMiniStars svg { width: 10px; height: 10px; }
.v3__revG {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--dm-surface-raised);
  border: 1px solid var(--dm-border);
}
.v3__revQuote {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--dm-graphite-soft);
  margin: 0;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Slideshow (procedimentos) ---------- */
.v3__cell--slides {
  padding: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 7;
  background: var(--dm-nude-soft);
  border: 1px solid var(--dm-border);
  cursor: default;
}
.v3__cell--slides:hover { box-shadow: var(--dm-shadow-sm); }
.v3__slides { position: absolute; inset: 0; }
.v3__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: v3-slide-cycle 20s linear infinite;
}
.v3__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.v3__slide--a { animation-delay: 0s; }
.v3__slide--b { background: linear-gradient(135deg, #E6CFC6 0%, #D3B0A7 100%); animation-delay: -15s; }
.v3__slide--c { background: linear-gradient(135deg, #D3B0A7 0%, #B9847D 100%); animation-delay: -10s; }
.v3__slide--d { background: linear-gradient(135deg, #C9A89E 0%, #A8786F 100%); animation-delay: -5s; }
@keyframes v3-slide-cycle {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  23%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}

.v3__slidesDots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(70, 61, 56, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
}
.v3__slideDot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(247, 239, 234, 0.55);
  animation: v3-dot-cycle 20s linear infinite;
}
.v3__slideDot--a { animation-delay: 0s; }
.v3__slideDot--b { animation-delay: -15s; }
.v3__slideDot--c { animation-delay: -10s; }
.v3__slideDot--d { animation-delay: -5s; }
@keyframes v3-dot-cycle {
  0%   { background: rgba(247, 239, 234, 0.55); width: 6px; }
  2%   { background: rgba(247, 239, 234, 1); width: 18px; }
  23%  { background: rgba(247, 239, 234, 1); width: 18px; }
  27%  { background: rgba(247, 239, 234, 0.55); width: 6px; }
  100% { background: rgba(247, 239, 234, 0.55); width: 6px; }
}

/* ---------- Monogram wordmark ---------- */
.v3__wordmark {
  /* flex:1 1 0 lets the wrapper grow into spare vertical space so the
     monogram floats geometrically centered between the grid and the
     footer when the viewport is taller than the content. Vertical
     padding guarantees minimum breathing room when the viewport is
     short and the wrapper would otherwise collapse to the SVG height. */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
  opacity: var(--x-mono-opacity);
}
.v3__wordmark svg {
  display: block;
  color: var(--x-mono-color);
}

/* ---------- Footer ---------- */
.v3__foot {
  text-align: center;
  color: var(--dm-text-soft);
  font-size: 11.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v3__foot b {
  font-weight: 500;
  color: var(--dm-text-muted);
}
.v3__footContact {
  color: var(--dm-text-muted);
  margin-top: 6px;
}
.v3__footContact a {
  color: inherit;
  text-decoration: none;
}
.v3__footContact a:hover { color: var(--x-accent-deep); }