/* Protótipos de modelos 2 a 5 (T-042) — Base compartilhada + 16 personalidades */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-v7-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gloock";
  src: url("/assets/fonts/gloock-v8-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #4558d8;
  --primary-hover: #3647b8;
  --primary-soft: rgba(69, 88, 216, 0.1);
  --ink: #1c2242;
  --muted: #52587a;
  --paper: #f5f6fb;
  --surface: #ffffff;
  --soft: #e9ecf7;
  --line: #d1d7ec;
  --accent: #4558d8;
  --radius: 14px;
}

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Faixa fixa de demonstração */
.m-demo-bar {
  background: #1c2242;
  color: #fcfdfb;
  padding: 9px 5%;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.m-demo-bar strong {
  font-weight: 700;
}

.m-demo-back {
  color: #fcfdfb;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* Container base */
.m-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 5% 64px;
}

.m-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.m-title {
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

.m-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.m-reg {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}

.m-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.m-sec-title {
  margin: 0 0 12px;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
}

/* Botões */
.m-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.m-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--primary);
}

.m-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fcfdfb;
}

.m-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.m-btn-wa {
  background: #1f7a5c;
  border-color: #1f7a5c;
  color: #fcfdfb;
  opacity: 0.72;
  cursor: not-allowed;
}

/* Preços */
.m-price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-price-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--soft);
  font-size: 14.5px;
}

.m-price-val {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Galeria */
.m-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.m-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* Bairros e Atende em */
.m-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.m-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}

/* Mapa inline estático */
.m-map-box {
  margin-top: 12px;
  padding: 14px;
  border-radius: 10px;
  border: 1px dashed var(--primary);
  background: var(--primary-soft);
  font-size: 13.5px;
}

.m-map-box[hidden] {
  display: none;
}

/* Pedir horário (sem select) */
.m-schedule-group {
  margin-top: 10px;
}

.m-schedule-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.m-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-choice-btn {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.m-choice-btn.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fcfdfb;
}

.m-schedule-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
}

/* Rodapé obrigatório */
.m-footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

.m-claim-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==================== COMPOSIÇÕES DE LAYOUT ==================== */

/* Layout A: Capa grande com nome sobreposto */
.m-hero-cover {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 22px;
  border: 1px solid var(--line);
}

.m-hero-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.12) 0%, rgba(18, 24, 38, 0.84) 100%);
}

.m-hero-cover-body {
  position: relative;
  z-index: 2;
  padding: 28px;
  color: #fcfdfb;
  max-width: 680px;
}

.m-hero-cover-body .m-title {
  color: #fcfdfb;
  font-size: clamp(28px, 4vw, 44px);
}

.m-hero-cover-body .m-sub {
  color: rgba(252, 253, 251, 0.9);
}

.m-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.m-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Layout B: Link-na-bio compacto */
.m-bio-wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 28px 5% 64px;
}

.m-bio-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.m-bio-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary);
}

/* Layout C: Duas colunas com barra lateral fixa */
.m-sidebar-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.m-sidebar-sticky {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.m-sidebar-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* Layout D: Grade de preços 2x2 */
.m-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.m-menu-tile {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.m-menu-tile strong {
  font-size: 18px;
  color: var(--primary);
}

/* ==================== PALETA UNIFICADA (T-050) ==================== */
body.m-beleza-1,
body.m-beleza-2,
body.m-beleza-3,
body.m-beleza-4,
body.m-beleza-5,
body.m-saude-1,
body.m-saude-2,
body.m-saude-3,
body.m-saude-4,
body.m-saude-5,
body.m-servicos-1,
body.m-servicos-2,
body.m-servicos-3,
body.m-servicos-4,
body.m-servicos-5,
body.m-comercio-1,
body.m-comercio-2,
body.m-comercio-3,
body.m-comercio-4,
body.m-comercio-5 {
  --paper: #f5f6fb;
  --soft: #e9ecf7;
  --line: #d1d7ec;
  --primary: #4558d8;
  --accent: #4558d8;
}

@media (max-width: 860px) {
  .m-two-col,
  .m-sidebar-layout,
  .m-menu-grid {
    grid-template-columns: 1fr;
  }

  .m-sidebar-sticky {
    position: static;
  }

  .m-gallery {
    grid-template-columns: 1fr;
  }
}

/* ==================== T-043: ANIMAÇÕES E CARROSSEL ==================== */

.m-approved-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #1f7a5c;
  border: 1px solid #9fd3bc;
  font-size: 11.5px;
  font-weight: 700;
}

/* Entrada em sequência (IntersectionObserver) */
.js-anim .m-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--d, 0ms);
}

.js-anim .m-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Beleza 2: Ken Burns na foto de capa + pílula editorial */
body.m-beleza-2 .m-hero-cover img {
  animation: mKenBurns 14s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  transform-origin: center center;
}

@keyframes mKenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

.m-editorial-note {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(252, 253, 251, 0.18);
  border: 1px solid rgba(252, 253, 251, 0.35);
  color: #fcfdfb;
  font-size: 12.5px;
  backdrop-filter: blur(4px);
}

/* Beleza 3: Galeria em leque que se abre */
.m-fan-gallery img {
  transition: transform 560ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.js-anim .m-fan-gallery:not(.is-open) img:nth-child(1) {
  transform: translateX(24px) rotate(-6deg) scale(0.94);
}
.js-anim .m-fan-gallery:not(.is-open) img:nth-child(2) {
  transform: translateY(10px) scale(0.96);
}
.js-anim .m-fan-gallery:not(.is-open) img:nth-child(3) {
  transform: translateX(-24px) rotate(6deg) scale(0.94);
}

.m-fan-gallery img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 28px rgba(44, 29, 36, 0.14);
}

/* Beleza 4: Brilho suave (shimmer) nos preços + halo no avatar */
body.m-beleza-4 .m-bio-avatar {
  animation: mAvatarHalo 4.2s ease-in-out infinite;
}

@keyframes mAvatarHalo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(69, 88, 216, 0.28); }
  50% { box-shadow: 0 0 0 10px rgba(69, 88, 216, 0); }
}

.m-shimmer-list .m-price-item {
  position: relative;
  overflow: hidden;
}

.m-shimmer-list .m-price-item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: translateX(-160%);
  animation: mShimmerPass 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.m-shimmer-list .m-price-item:nth-child(2)::after { animation-delay: 0.4s; }
.m-shimmer-list .m-price-item:nth-child(3)::after { animation-delay: 0.8s; }
.m-shimmer-list .m-price-item:nth-child(4)::after { animation-delay: 1.2s; }

@keyframes mShimmerPass {
  0%, 20% { transform: translateX(-160%); }
  55%, 100% { transform: translateX(260%); }
}

/* Beleza 5: Destaques em fade cruzado */
.m-crossfade-banner {
  position: relative;
  min-height: 46px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.m-crossfade-item {
  position: absolute;
  left: 14px;
  right: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
}

.m-crossfade-item.is-active {
  position: relative;
  left: 0;
  right: 0;
  opacity: 1;
  transform: translateY(0);
}

/* Saúde 3: Ritmo de respiração suave */
.m-breath-card {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  animation: mCalmBreath 5.6s ease-in-out infinite;
}

.m-breath-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

@keyframes mCalmBreath {
  0%, 100% { transform: scale(1); background: var(--soft); }
  50% { transform: scale(1.015); background: #dfe4f6; }
}

/* Saúde 4: Fade lento sereno + linha de presença */
.m-calm-line {
  width: 100%;
  max-width: 180px;
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.m-calm-line::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primary);
  transform-origin: left center;
  animation: mCalmLine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes mCalmLine {
  0% { transform: scaleX(0.25); opacity: 0.5; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Serviços 2: Ícones de ferramentas com balanço no hover */
.m-tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-tool-icon {
  width: 22px;
  height: 22px;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.m-menu-tile:hover .m-tool-icon,
.m-menu-tile:focus-within .m-tool-icon {
  animation: mToolSwing 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes mToolSwing {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-14deg) scale(1.1); }
  65% { transform: rotate(10deg) scale(1.06); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Serviços 3: Chips de bairros entrando um a um */
.js-anim .m-cascade-pills .m-pill {
  opacity: 0;
  transform: translateX(-12px) scale(0.92);
  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.js-anim .m-cascade-pills.is-in .m-pill {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.js-anim .m-cascade-pills.is-in .m-pill:nth-child(2) { transition-delay: 130ms; }
.js-anim .m-cascade-pills.is-in .m-pill:nth-child(3) { transition-delay: 260ms; }

/* Serviços 4: Linha do tempo do atendimento que se desenha */
.m-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  padding-top: 8px;
}

.m-timeline-step {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  position: relative;
}

.m-timeline-step span {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

.m-timeline-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin-bottom: 12px;
  overflow: hidden;
}

.m-timeline-fill {
  height: 100%;
  width: 100%;
  background: var(--primary);
  transform-origin: left center;
  animation: mTimelineDraw 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes mTimelineDraw {
  0%, 10% { transform: scaleX(0.15); }
  45%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(0.15); }
}

/* Serviços 5: Barra "Pedir horário" que desliza do rodapé */
.m-sticky-bottom-bar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 120%);
  width: min(500px, 92vw);
  background: #1c2242;
  color: #fcfdfb;
  border-radius: 999px;
  padding: 8px 10px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 14px 32px rgba(28, 34, 66, 0.28);
  z-index: 20;
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  font-weight: 600;
}

.m-sticky-bottom-bar.is-visible {
  transform: translate(-50%, 0);
}

.m-sticky-bottom-bar a {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--primary);
  color: #fcfdfb;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Comércio (2 a 5): Carrossel girando no meio da vitrine */
.m-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--soft);
  touch-action: pan-y;
}

.m-carousel-track {
  display: flex;
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.m-carousel-slide {
  min-width: 100%;
  position: relative;
}

.m-carousel-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.m-carousel-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(28, 34, 66, 0.78);
  color: #fcfdfb;
  font-size: 12px;
  font-weight: 600;
}

.m-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.m-carousel-nav {
  display: flex;
  gap: 6px;
}

.m-carousel-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.m-carousel-dots {
  display: flex;
  gap: 6px;
}

.m-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: var(--line);
  padding: 0;
  cursor: pointer;
  transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1), background 260ms ease;
}

.m-carousel-dot.is-active {
  width: 22px;
  background: var(--primary);
}

/* Comércio 2: Etiqueta de ateliê oscilante */
.m-swing-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  transform-origin: left center;
  animation: mTagSwing 4.2s ease-in-out infinite;
}

@keyframes mTagSwing {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2.5deg) translateY(-1px); }
}

/* Comércio 3: Selo "Aberto agora / Fechado" pulsando + pin animado no mapa */
.m-open-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #1f7a5c;
  border: 1px solid #9fd3bc;
  font-size: 12px;
  font-weight: 700;
}

.m-open-status.is-closed {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.m-open-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: mPulseDot 2s ease-in-out infinite;
}

@keyframes mPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.m-map-visual {
  margin-top: 10px;
  height: 110px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e9ecf7 0%, #dfe4f6 100%);
  border: 1px solid var(--line);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.m-map-pin {
  width: 28px;
  height: 28px;
  color: var(--primary);
  z-index: 2;
}

.m-map-box.is-pin-active .m-map-pin {
  animation: mPinDrop 560ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.m-map-ring {
  position: absolute;
  width: 28px;
  height: 10px;
  border-radius: 50%;
  background: rgba(69, 88, 216, 0.25);
  margin-top: 22px;
}

.m-map-box.is-pin-active .m-map-ring {
  animation: mPinRipple 1.6s ease-out infinite;
}

@keyframes mPinDrop {
  0% { opacity: 0; transform: translateY(-34px) scale(0.8); }
  70% { opacity: 1; transform: translateY(3px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mPinRipple {
  0% { transform: scale(0.5); opacity: 0.85; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Comércio 4: Tabela de horários com destaque no dia atual */
.m-hours-table {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--soft);
  font-size: 13.5px;
}

.m-hours-row.is-today {
  background: var(--primary-soft);
  border: 1px solid var(--primary);
  font-weight: 700;
  color: var(--primary);
}

/* Comércio 5: Equipe no espaço com conector animado */
.m-team-connector {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.m-team-line {
  flex: 1;
  height: 2px;
  background: var(--primary);
  transform-origin: left center;
  animation: mTimelineDraw 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ==================== T-045 & T-046: 5 LAYOUTS COMUNS + COMÉRCIO + AJUSTES FINOS ==================== */

/* Interação viva nas linhas de serviços e nas galerias */
.m-price-item {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
    background 280ms ease,
    box-shadow 280ms ease;
  border-left: 3px solid transparent;
}

.m-price-item:hover {
  transform: translateX(5px);
  background: var(--surface);
  border-left-color: var(--primary);
  box-shadow: 0 6px 16px rgba(28, 52, 55, 0.07);
}

.m-gallery img {
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 420ms ease;
}

.m-gallery img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(28, 52, 55, 0.12);
}

.m-reg {
  animation: mRegPulse 4.8s ease-in-out infinite;
}

@keyframes mRegPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(69, 88, 216, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(69, 88, 216, 0); }
}

body.m-beleza-5 .m-sidebar-photo,
body.m-saude-5 .m-sidebar-photo,
body.m-servicos-5 .m-sidebar-photo,
body.m-comercio-5 .m-sidebar-photo {
  animation: mFloatSoft 5.5s ease-in-out infinite;
}

@keyframes mFloatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Selo "Aberto agora" e Destaques de loja (Comércio 2 a 5) */
.m-open-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #1f7a5c;
  border: 1px solid #9fd3bc;
  font-size: 12px;
  font-weight: 700;
}

.m-store-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.m-store-highlight {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-store-highlight-kicker {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
}

.m-store-highlight-val {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.m-pin-drop {
  display: inline-block;
  margin-right: 6px;
  animation: mPinDrop 640ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 1. Layout 2 (beleza-2, saude-2, servicos-2): 1 única imagem flutuante + galeria com quadrados grandes */
.m-editorial-split {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 18px;
}

.m-floating-showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}

.m-floating-frame {
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--surface);
  box-shadow: 0 20px 42px rgba(28, 52, 55, 0.16);
  background: var(--surface);
  animation: mFloatHero 5.2s ease-in-out infinite;
}

@keyframes mFloatHero {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-0.6deg); }
}

.m-floating-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.m-frame-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(252, 253, 251, 0.94);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(28, 52, 55, 0.1);
}

.m-marquee-ribbon {
  overflow: hidden;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 9px 0;
}

.m-marquee-track {
  display: flex;
  width: max-content;
  gap: 28px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  animation: mFlankLeft 22s linear infinite;
}

.m-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.m-marquee-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* Galeria com quadrados grandes no Layout 2 */
.m-gallery.m-gallery-squares {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.m-gallery.m-gallery-squares img {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 260px;
  object-fit: cover;
  border-radius: 14px;
}

/* 2. Layout 4 (beleza-4, saude-4, servicos-4): Galeria nas duas laterais na página inteira + 1 imagem central (fachada/logo) */
.m-flank-shell {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 196px minmax(0, 560px) 196px;
  justify-content: center;
  gap: 26px;
  align-items: stretch;
}

.m-flank-center {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.m-facade-box {
  margin: 0 0 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft);
  position: relative;
}

.m-facade-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

.m-facade-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(252, 253, 251, 0.94);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}

.m-flank-col {
  position: relative;
  align-self: stretch;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  border-radius: 16px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.m-flank-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
}

.m-flank-col.is-up .m-flank-track {
  animation: mFlankUp 38s linear infinite;
}

.m-flank-col.is-down .m-flank-track {
  animation: mFlankDown 38s linear infinite;
}

.m-flank-col:hover .m-flank-track,
.m-flank-col:focus-within .m-flank-track {
  animation-play-state: paused;
}

.m-flank-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(28, 52, 55, 0.08);
  flex-shrink: 0;
}

.m-flank-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.m-flank-cap {
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

@keyframes mFlankUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes mFlankDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

@keyframes mFlankLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes mFlankRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* 3. Layout 5 (beleza-5, saude-5, servicos-5): Galeria com imagens que expandem ao passar o mouse, clicar ou focar */
.m-expand-gallery {
  display: flex;
  gap: 12px;
  height: 280px;
  align-items: stretch;
}

.m-expand-item {
  margin: 0;
  position: relative;
  flex: 1 1 0%;
  min-width: 68px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft);
  cursor: pointer;
  opacity: 0.82;
  transition: flex 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease,
    box-shadow 320ms ease,
    border-color 320ms ease;
}

.m-expand-item.is-active,
.m-expand-item:hover,
.m-expand-item:focus-visible {
  flex: 3.2 1 0%;
  opacity: 1;
  border-color: var(--primary);
  box-shadow: 0 14px 28px rgba(28, 52, 55, 0.14);
  outline: none;
}

.m-expand-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-expand-cap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(28, 34, 66, 0.82);
  color: #fcfdfb;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
}

.m-expand-item.is-active .m-expand-cap,
.m-expand-item:hover .m-expand-cap,
.m-expand-item:focus-visible .m-expand-cap {
  opacity: 1;
  transform: translateY(0);
}

/* 4. Carrossel 3D em Arco Aberto com fundo claro e sem textos cortados (Comércio 2 e 3) */
.m-arc3d-stage {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 16px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(28, 52, 55, 0.06);
}

.m-arc3d-viewport {
  perspective: 1200px;
  height: 304px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.m-arc3d-viewport:active {
  cursor: grabbing;
}

.m-arc3d-track {
  width: 264px;
  height: 268px;
  position: relative;
  transform-style: preserve-3d;
}

.m-arc3d-card {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 12px;
  background: var(--soft);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(28, 52, 55, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 520ms ease,
    background 420ms ease,
    color 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease;
}

.m-arc3d-stage.is-smooth .m-arc3d-card {
  transition: transform 920ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 720ms ease,
    background 520ms ease,
    color 520ms ease,
    border-color 520ms ease,
    box-shadow 520ms ease;
}

.m-arc3d-card.is-front {
  background: var(--primary, #4558d8);
  color: #fcfdfb;
  border-color: var(--primary, #4558d8);
  box-shadow: 0 18px 38px rgba(69, 88, 216, 0.28);
}

.m-arc3d-media {
  width: 100%;
  height: 134px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.04);
}

.m-arc3d-media img,
.m-arc3d-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-arc3d-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}

.m-arc3d-title {
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.22;
}

.m-arc3d-sub,
.m-arc3d-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.38;
  opacity: 0.92;
}

.m-arc3d-nav {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 25;
}

.m-arc3d-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.m-arc3d-btn:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fcfdfb;
  transform: scale(1.06);
}

.m-arc3d-btn:active {
  transform: scale(0.96);
}

/* 5. Comércio 4: Imagem principal com fotos trocando (crossfade) à esquerda + informações à direita */
.m-storefront-split {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 24px;
  align-items: center;
}

.m-crossfade-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 290px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft);
  box-shadow: 0 14px 32px rgba(28, 52, 55, 0.1);
}

.m-crossfade-slide {
  margin: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.m-crossfade-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

.m-crossfade-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-crossfade-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(252, 253, 251, 0.94);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(28, 52, 55, 0.12);
}

.m-crossfade-caption strong {
  display: block;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
}

.m-crossfade-caption span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.m-storefront-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-hours-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  margin-top: 6px;
}

.m-hours-table tr {
  background: var(--soft);
  border-radius: 8px;
}

.m-hours-table td {
  padding: 8px 12px;
  font-size: 13.5px;
}

.m-hours-table td:first-child {
  border-radius: 8px 0 0 8px;
  font-weight: 600;
}

.m-hours-table td:last-child {
  border-radius: 0 8px 8px 0;
  text-align: right;
  color: var(--muted);
}

.m-hours-table tr.is-today td {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
}

.m-hours-table tr.is-today td:first-child {
  border-left: 1px solid var(--primary);
}

.m-hours-table tr.is-today td:last-child {
  border-right: 1px solid var(--primary);
}

/* 6. Comércio 5: Prateleira viva deslizante com TODAS as imagens do mesmo tamanho + Diagrama de equipe */
.m-shelf-marquee {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 14px 0;
}

.m-shelf-track {
  display: flex;
  width: max-content;
  gap: 14px;
  padding-right: 14px;
  align-items: stretch;
  animation: mFlankLeft 26s linear infinite;
}

.m-shelf-marquee:hover .m-shelf-track,
.m-shelf-marquee:focus-within .m-shelf-track {
  animation-play-state: paused;
}

.m-shelf-card {
  width: 236px;
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.m-shelf-card img {
  width: 100%;
  height: 156px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  display: block;
}

.m-shelf-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-shelf-title,
.m-shelf-card strong {
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.22;
  color: var(--ink);
}

.m-shelf-meta,
.m-shelf-card span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}

.m-team-diagram {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-team-node {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
}

.m-team-ok {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #1f7a5c;
  border: 1px solid #9fd3bc;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   T-047 / T-049 — Layout 2: leque de fotos em carrossel nas
   duas laterais, bem maior e mantendo a posição vertical
   ========================================================= */
.m-page-sidefan {
  max-width: 1400px;
}

.m-sidefan-shell {
  display: grid;
  grid-template-columns: 316px minmax(0, 680px) 316px;
  gap: 28px;
  align-items: start;
  justify-content: center;
}

.m-sidefan-center {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.m-sidefan-center .m-two-col {
  grid-template-columns: 1fr;
}

.m-sidefan-center .m-price-item {
  flex-wrap: wrap;
  gap: 6px 14px;
}

.m-sidefan-col {
  position: sticky;
  top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 4px;
  user-select: none;
}

.m-sidefan-deck {
  position: relative;
  width: 304px;
  height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.m-sidefan-card {
  position: absolute;
  width: 256px;
  height: 324px;
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  border: 4px solid #fff;
  background: var(--surface);
  box-shadow: 0 20px 42px -16px rgba(24, 20, 18, 0.3);
  cursor: pointer;
  padding: 0;
  transition:
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease,
    border-color 320ms ease,
    opacity 420ms ease;
}

.m-sidefan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Estado inicial recolhido antes de abrir o leque */
.js-anim .m-sidefan-deck:not(.is-open) .m-sidefan-card {
  transform: translate3d(0, 0, 0) rotate(0deg) scale(0.9) !important;
  opacity: 0.75;
}

/* Posições abertas em leque vertical na lateral esquerda */
.m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="0"] {
  transform: translate3d(-16px, -144px, 0) rotate(-10deg) scale(0.94);
  z-index: 1;
}

.m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="1"] {
  transform: translate3d(14px, 0, 0) rotate(3deg) scale(1.05);
  z-index: 3;
  border-color: var(--primary);
  box-shadow: 0 24px 48px -14px rgba(24, 20, 18, 0.38);
}

.m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="2"] {
  transform: translate3d(-14px, 144px, 0) rotate(11deg) scale(0.94);
  z-index: 2;
}

/* Posições abertas em leque vertical espelhado na lateral direita */
.m-sidefan-col.is-right .m-sidefan-card[data-fan-pos="0"] {
  transform: translate3d(16px, -144px, 0) rotate(10deg) scale(0.94);
  z-index: 1;
}

.m-sidefan-col.is-right .m-sidefan-card[data-fan-pos="1"] {
  transform: translate3d(-14px, 0, 0) rotate(-3deg) scale(1.05);
  z-index: 3;
  border-color: var(--primary);
  box-shadow: 0 24px 48px -14px rgba(24, 20, 18, 0.38);
}

.m-sidefan-col.is-right .m-sidefan-card[data-fan-pos="2"] {
  transform: translate3d(14px, 144px, 0) rotate(-11deg) scale(0.94);
  z-index: 2;
}

.m-sidefan-card:hover,
.m-sidefan-card:focus-visible {
  box-shadow: 0 26px 48px -12px rgba(24, 20, 18, 0.42);
  outline: none;
}

.m-sidefan-dots {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.m-sidefan-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: width 240ms ease, background-color 240ms ease;
}

.m-sidefan-dot.is-active {
  width: 18px;
  background: var(--primary);
}

@media (min-width: 961px) and (max-width: 1280px) {
  .m-sidefan-shell {
    grid-template-columns: 230px minmax(0, 1fr) 230px;
    gap: 18px;
  }

  .m-sidefan-deck {
    width: 222px;
    height: 480px;
  }

  .m-sidefan-card {
    width: 192px;
    height: 244px;
  }

  .m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="0"] {
    transform: translate3d(-12px, -110px, 0) rotate(-9deg) scale(0.94);
  }

  .m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="1"] {
    transform: translate3d(10px, 0, 0) rotate(3deg) scale(1.04);
  }

  .m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="2"] {
    transform: translate3d(-10px, 110px, 0) rotate(10deg) scale(0.94);
  }

  .m-sidefan-col.is-right .m-sidefan-card[data-fan-pos="0"] {
    transform: translate3d(12px, -110px, 0) rotate(9deg) scale(0.94);
  }

  .m-sidefan-col.is-right .m-sidefan-card[data-fan-pos="1"] {
    transform: translate3d(-10px, 0, 0) rotate(-3deg) scale(1.04);
  }

  .m-sidefan-col.is-right .m-sidefan-card[data-fan-pos="2"] {
    transform: translate3d(10px, 110px, 0) rotate(-10deg) scale(0.94);
  }
}

/* =========================================================
   T-048 — (0) Cartão de horários no Pedir horário
           (1) Layout 1 com mais fotos, mosaico e destaque
           (2) Ocultação automática de espaços editáveis vazios
   ========================================================= */

/* Cartão de horários expansível abaixo dos chips de Dia/Período */
.m-slots-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
}

.m-slots-card[hidden] {
  display: none !important;
}

.m-slots-card.is-open {
  animation: mSlotsOpen 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mSlotsOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.m-slots-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.m-slots-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.m-slots-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.m-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-slot-btn {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.m-slot-btn:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.m-slot-btn.is-selected,
.m-slot-btn[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fcfdfb;
}

.m-slot-btn:focus-visible,
.m-choice-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Layout 1 — Hero com mosaico de 3 fotos + destaques + galeria de 6 fotos */
.m-l1-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
  background: linear-gradient(145deg, var(--surface) 0%, var(--soft) 100%);
}

.m-l1-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.m-l1-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.m-l1-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 4px 12px -6px rgba(28, 52, 55, 0.12);
}

.m-l1-badge::before {
  content: "✦";
  color: var(--primary);
  font-size: 12px;
}

.m-l1-mosaic {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 10px;
  align-items: stretch;
}

.m-l1-cover-wrap {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 248px;
  box-shadow: 0 16px 32px -18px rgba(28, 52, 55, 0.28);
}

.m-l1-cover-wrap img {
  width: 100%;
  height: 100%;
  min-height: 248px;
  object-fit: cover;
  animation: mKenBurns 15s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.m-l1-cover-cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 6px 11px;
  border-radius: 9px;
  background: rgba(28, 34, 66, 0.82);
  color: #fcfdfb;
  font-size: 12.5px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.m-l1-side-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-l1-side-photo {
  margin: 0;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 118px;
}

.m-l1-side-photo img {
  width: 100%;
  height: 100%;
  min-height: 118px;
  object-fit: cover;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.m-l1-side-photo:hover img {
  transform: scale(1.04);
}

.m-l1-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.m-l1-photo-card {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft);
  display: flex;
  flex-direction: column;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, border-color 280ms ease;
}

.m-l1-photo-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 14px 28px -16px rgba(28, 52, 55, 0.25);
}

.m-l1-photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.m-l1-photo-cap {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Espaços opcionais vazios desaparecem sem deixar buraco */
[data-editavel]:not(img, picture, video, iframe):empty,
.m-l1-photo-cap:empty,
.m-l1-cover-cap:empty,
.m-flank-cap:empty,
.m-expand-cap:empty,
.m-facade-tag:empty,
.m-l3-fan-cap:empty,
.m-l3-ambient-tag:empty,
.m-reg:empty {
  display: none !important;
}

/* =========================================================
   T-049 — Layout 3 com mais presença: leque de 5 fotos com
   legenda no topo e no fim + vitrine central com foto de
   ambiente/fachada e destaques vivos editáveis
   ========================================================= */
.m-page-l3 {
  max-width: 960px;
}

.m-l3-fan-stage {
  position: relative;
  padding: 22px 18px 18px;
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(160deg, var(--surface) 0%, var(--soft) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.m-l3-fan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 780px;
  gap: 10px;
}

.m-l3-fan-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.m-l3-fan-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--soft);
}

.m-l3-fan-hint {
  font-size: 12px;
  color: var(--muted);
}

.m-l3-fan-deck {
  position: relative;
  width: 100%;
  max-width: 820px;
  height: 300px;
  display: block;
  user-select: none;
  outline: none;
}

.m-l3-fan-card {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 224px;
  height: 268px;
  margin: 0;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  border: 4px solid #fff;
  background: var(--surface);
  box-shadow: 0 18px 38px -16px rgba(24, 20, 18, 0.28);
  cursor: pointer;
  transition:
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease,
    border-color 320ms ease,
    opacity 420ms ease;
}

.m-l3-fan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.m-l3-fan-cap {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(28, 34, 66, 0.84);
  color: #fcfdfb;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
}

/* Estado inicial recolhido antes de abrir o leque ao entrar na tela */
.js-anim .m-l3-fan-deck:not(.is-open) .m-l3-fan-card {
  transform: translate3d(-50%, 18px, 0) rotate(0deg) scale(0.88) !important;
  opacity: 0.72;
}

/* 5 posições abertas em arco horizontal no topo e no rodapé */
.m-l3-fan-card[data-l3-pos="-2"] {
  transform: translate3d(calc(-50% - 250px), 24px, 0) rotate(-13deg) scale(0.87);
  z-index: 1;
  opacity: 0.88;
}

.m-l3-fan-card[data-l3-pos="-1"] {
  transform: translate3d(calc(-50% - 132px), 8px, 0) rotate(-6.5deg) scale(0.95);
  z-index: 2;
  opacity: 0.96;
}

.m-l3-fan-card[data-l3-pos="0"] {
  transform: translate3d(-50%, -6px, 0) rotate(0deg) scale(1.05);
  z-index: 4;
  border-color: var(--primary);
  box-shadow: 0 24px 48px -14px rgba(24, 20, 18, 0.38);
  opacity: 1;
}

.m-l3-fan-card[data-l3-pos="0"] .m-l3-fan-cap {
  opacity: 1;
  transform: translateY(0);
}

.m-l3-fan-card[data-l3-pos="1"] {
  transform: translate3d(calc(-50% + 132px), 8px, 0) rotate(6.5deg) scale(0.95);
  z-index: 3;
  opacity: 0.96;
}

.m-l3-fan-card[data-l3-pos="2"] {
  transform: translate3d(calc(-50% + 250px), 24px, 0) rotate(13deg) scale(0.87);
  z-index: 1;
  opacity: 0.88;
}

.m-l3-fan-card:hover,
.m-l3-fan-card:focus-visible {
  box-shadow: 0 26px 50px -12px rgba(24, 20, 18, 0.44);
  outline: none;
}

/* Cartão central do Layout 3 com presença editorial + ambiente + destaques */
.m-l3-showcase {
  padding: 28px;
  background: linear-gradient(155deg, var(--surface) 0%, var(--soft) 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.m-l3-showcase-top {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.m-l3-showcase-top .m-sub {
  margin-left: auto;
  margin-right: auto;
}

.m-l3-ambient-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 16px;
  align-items: center;
}

.m-l3-ambient-box {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  height: 176px;
  max-height: 176px;
  box-shadow: 0 14px 28px -16px rgba(28, 34, 66, 0.22);
}

.m-l3-ambient-photo {
  width: 100%;
  height: 176px;
  max-height: 176px;
  object-fit: cover;
  display: block;
  animation: mKenBurns 16s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.m-l3-ambient-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(24, 20, 18, 0.28);
}

.m-l3-ambient-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  animation: mOpenPulse 2.2s ease-in-out infinite;
}

.m-l3-badges {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.m-l3-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.8px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.38;
  box-shadow: 0 6px 16px -10px rgba(24, 20, 18, 0.14);
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.m-l3-badge::before {
  content: "✦";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--primary);
  font-size: 12px;
  flex-shrink: 0;
}

.m-l3-badge:hover,
.m-l3-badge.is-Highlighted {
  transform: translateX(3px);
  border-color: var(--primary);
  box-shadow: 0 12px 24px -12px rgba(24, 20, 18, 0.22);
}

/* =========================================================
   T-050 — Comércio 2: Novo layout de vitrine assimétrica +
   3 selos ilustrados animados no topo
   ========================================================= */
.m-page-c2 {
  max-width: 1220px;
}

.m-c2-hero {
  padding: 26px;
  background: linear-gradient(155deg, var(--surface) 0%, var(--soft) 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.m-c2-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 18px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.m-c2-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

.m-c2-street-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 8px 18px -12px rgba(28, 34, 66, 0.16);
}

.m-c2-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.m-c2-feat {
  position: relative;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  box-shadow: 0 12px 26px -18px rgba(28, 34, 66, 0.22);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 260ms ease;
}

.m-c2-feat:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 18px 34px -16px rgba(69, 88, 216, 0.26);
}

.m-c2-feat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.m-c2-feat-illust {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.m-c2-feat-illust svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* Microanimações dos 3 ícones ilustrados */
.m-c2-stitch-line {
  stroke-dasharray: 4 3;
  animation: mStitchDash 2.6s linear infinite;
}

.m-c2-needle {
  transform-origin: center;
  animation: mPinBob 2.4s ease-in-out infinite;
}

.m-c2-mirror-glint {
  animation: mMirrorGlint 3.2s ease-in-out infinite;
}

.m-c2-sign-board {
  transform-origin: 12px 5px;
  animation: mSignSwing 3.4s ease-in-out infinite;
}

@keyframes mStitchDash {
  0% { stroke-dashoffset: 14; }
  100% { stroke-dashoffset: 0; }
}

@keyframes mPinBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-5deg); }
}

@keyframes mMirrorGlint {
  0%, 100% { opacity: 0.25; transform: translateX(-3px); }
  50% { opacity: 0.95; transform: translateX(3px); }
}

@keyframes mSignSwing {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.m-c2-feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.m-c2-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  animation: mPulseDot 2s ease-in-out infinite;
}

.m-c2-feat-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.m-c2-feat-kicker {
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}

.m-c2-feat-val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.m-c2-feat-meter {
  height: 4px;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
  margin-top: auto;
}

.m-c2-feat-meter span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) 0%, #6f80f0 100%);
  transform-origin: left center;
  animation: mMeterPulse 4.4s ease-in-out infinite;
}

.m-c2-feat:nth-child(2) .m-c2-feat-meter span { animation-delay: 0.6s; }
.m-c2-feat:nth-child(3) .m-c2-feat-meter span { animation-delay: 1.2s; }

@keyframes mMeterPulse {
  0%, 100% { transform: scaleX(0.68); opacity: 0.82; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* Corpo assimétrico do Comércio 2: Ficha de Balcão à esquerda + Palco em Arco & Agendamento à direita */
.m-c2-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: 20px;
  align-items: start;
}

.m-c2-dock {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.m-c2-stage-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.m-c2-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .m-c2-hero-top,
  .m-c2-trio,
  .m-c2-body-grid {
    grid-template-columns: 1fr;
  }

  .m-c2-hero-meta {
    align-items: flex-start;
    text-align: left;
  }

  .m-c2-dock {
    position: static;
    order: 2;
  }

  .m-c2-stage-col {
    order: 1;
  }

  .m-flank-shell {
    grid-template-columns: minmax(0, 560px);
    gap: 18px;
  }

  .m-flank-col {
    min-height: 0;
    height: auto;
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }

  .m-flank-track {
    position: relative;
    flex-direction: row;
    width: max-content;
    padding-bottom: 0;
    padding-right: 12px;
  }

  .m-flank-col.is-up .m-flank-track {
    animation: mFlankLeft 24s linear infinite;
  }

  .m-flank-col.is-down .m-flank-track {
    animation: mFlankRight 24s linear infinite;
  }

  .m-flank-item {
    width: 148px;
  }

  .m-flank-item img {
    aspect-ratio: 4 / 3;
  }

  .m-sidefan-shell {
    grid-template-columns: minmax(0, 560px);
    gap: 18px;
  }

  .m-sidefan-col.is-left {
    position: relative;
    top: auto;
    order: -1;
    width: 100%;
    padding: 6px 0 2px;
  }

  .m-sidefan-col.is-right {
    display: none;
  }

  .m-sidefan-deck {
    width: 100%;
    max-width: 330px;
    height: 214px;
  }

  .m-sidefan-card {
    width: 152px;
    height: 192px;
  }

  .m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="0"] {
    transform: translate3d(-68px, 8px, 0) rotate(-9deg) scale(0.92);
  }

  .m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="1"] {
    transform: translate3d(0, -4px, 0) rotate(0deg) scale(1.02);
  }

  .m-sidefan-col.is-left .m-sidefan-card[data-fan-pos="2"] {
    transform: translate3d(68px, 8px, 0) rotate(9deg) scale(0.92);
  }
}

@media (max-width: 860px) {
  .m-editorial-split,
  .m-storefront-split,
  .m-store-highlights,
  .m-gallery.m-gallery-squares,
  .m-l1-hero,
  .m-l3-ambient-grid {
    grid-template-columns: 1fr;
  }

  .m-l1-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m-gallery.m-gallery-squares img {
    min-height: 240px;
  }

  .m-l3-fan-deck {
    height: 256px;
  }

  .m-l3-fan-card {
    width: 186px;
    height: 226px;
  }

  .m-l3-fan-card[data-l3-pos="-2"] {
    transform: translate3d(calc(-50% - 178px), 20px, 0) rotate(-12deg) scale(0.86);
  }

  .m-l3-fan-card[data-l3-pos="-1"] {
    transform: translate3d(calc(-50% - 94px), 6px, 0) rotate(-6deg) scale(0.94);
  }

  .m-l3-fan-card[data-l3-pos="1"] {
    transform: translate3d(calc(-50% + 94px), 6px, 0) rotate(6deg) scale(0.94);
  }

  .m-l3-fan-card[data-l3-pos="2"] {
    transform: translate3d(calc(-50% + 178px), 20px, 0) rotate(12deg) scale(0.86);
  }
}

@media (max-width: 680px) {
  .m-l1-mosaic,
  .m-l1-gallery-grid {
    grid-template-columns: 1fr;
  }

  .m-l1-side-stack {
    flex-direction: row;
  }

  .m-l3-showcase {
    padding: 20px 16px;
  }

  .m-l3-fan-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .m-l3-fan-deck {
    height: 224px;
  }

  .m-l3-fan-card {
    width: 154px;
    height: 194px;
  }

  .m-l3-fan-card[data-l3-pos="-2"] {
    transform: translate3d(calc(-50% - 96px), 18px, 0) rotate(-11deg) scale(0.84);
  }

  .m-l3-fan-card[data-l3-pos="-1"] {
    transform: translate3d(calc(-50% - 52px), 6px, 0) rotate(-5deg) scale(0.93);
  }

  .m-l3-fan-card[data-l3-pos="0"] {
    transform: translate3d(-50%, -4px, 0) rotate(0deg) scale(1.02);
  }

  .m-l3-fan-card[data-l3-pos="1"] {
    transform: translate3d(calc(-50% + 52px), 6px, 0) rotate(5deg) scale(0.93);
  }

  .m-l3-fan-card[data-l3-pos="2"] {
    transform: translate3d(calc(-50% + 96px), 18px, 0) rotate(11deg) scale(0.84);
  }

  .m-expand-gallery {
    flex-direction: column;
    height: auto;
  }

  .m-expand-item {
    flex: none;
    height: 112px;
    transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
  }

  .m-expand-item.is-active {
    flex: none;
    height: 236px;
  }

  .m-arc3d-viewport {
    height: 280px;
  }

  .m-arc3d-track {
    width: 224px;
    height: 254px;
  }

  .m-arc3d-media {
    height: 116px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-btn,
  .m-slot-btn,
  .m-price-item,
  .m-gallery img,
  .js-anim .m-reveal,
  .m-fan-gallery img,
  .m-crossfade-item,
  .m-crossfade-slide,
  .m-expand-item,
  .m-arc3d-card,
  .m-sidefan-card,
  .m-sidefan-dot,
  .m-l1-photo-card,
  .m-l1-side-photo img,
  .m-l3-fan-card,
  .m-l3-fan-cap,
  .m-l3-badge,
  .m-c2-feat {
    transition: none !important;
  }

  .js-anim .m-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .js-anim .m-fan-gallery:not(.is-open) img,
  .js-anim .m-sidefan-deck:not(.is-open) .m-sidefan-card,
  .js-anim .m-l3-fan-deck:not(.is-open) .m-l3-fan-card {
    opacity: 1 !important;
  }

  .m-floating-frame,
  .m-sidebar-photo,
  .m-reg,
  .m-marquee-track,
  .m-shelf-track,
  .m-open-dot,
  .m-pin-drop,
  .m-flank-col.is-up .m-flank-track,
  .m-flank-col.is-down .m-flank-track,
  .m-l1-cover-wrap img,
  .m-l3-ambient-photo,
  .m-l3-ambient-tag::before,
  .m-c2-stitch-line,
  .m-c2-needle,
  .m-c2-mirror-glint,
  .m-c2-sign-board,
  .m-c2-chip-dot,
  .m-c2-feat-meter span,
  .m-slots-card.is-open {
    animation: none !important;
  }

  .m-arc3d-viewport {
    height: auto;
    perspective: none;
  }

  .m-arc3d-track {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
  }

  .m-arc3d-card {
    position: relative;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Orquestrador: só o cartão da frente mostra legenda (evita texto cortado nas laterais do arco) */
.m-arc3d-card:not(.is-front) .m-arc3d-body { opacity: 0; transition: opacity .3s ease; }
.m-arc3d-card.is-front .m-arc3d-body { opacity: 1; transition: opacity .35s ease .15s; }

/* Integração T-051: regras de publicação e estados vazios, sem alterar o desenho. */
.m-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.m-muted{color:var(--muted)}.m-location-line{margin:0 0 10px;font-size:14.5px}.m-address-line{margin:14px 0 0;font-size:14.5px}
.m-map-box iframe{width:100%;height:300px;border:0;border-radius:10px;display:block}
.m-team-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}.m-team-list a{display:grid;gap:3px}.m-team-list span{color:var(--muted);font-size:13px}
.m-motion-control{position:fixed;right:10px;bottom:10px;z-index:100;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer}
.is-motion-paused *,.is-out-of-view *{animation-play-state:paused!important}.m-flank-col:hover *,.m-shelf-marquee:hover *,.m-flank-col:focus-within *,.m-shelf-marquee:focus-within *{animation-play-state:paused!important}
.m-l1-mosaic.is-single{grid-template-columns:1fr}.m-l1-mosaic.is-single .m-l1-cover-wrap{grid-row:auto}.m-l3-ambient-grid:not(:has(.m-l3-badges)){grid-template-columns:1fr}
.m-storefront-split:not(:has(.m-crossfade-stage)),.m-sidefan-shell:not(:has(.m-sidefan-col)),.m-flank-shell:not(:has(.m-flank-col)){grid-template-columns:minmax(0,1fr)}
.m-c2-feat-head{min-height:0}.m-c2-feat-copy:empty{display:none}.m-arc3d-card:not(:has(.m-arc3d-body)) .m-arc3d-media{height:100%}
.m-example-note{padding:8px 5%;text-align:center;color:var(--ink);font-size:13px}
.m-hours-table th{text-align:left;font-weight:400}.m-hours-table td{overflow-wrap:anywhere}.m-choice-btn,.m-slot-btn{touch-action:manipulation}
@media(prefers-reduced-motion:reduce){.m-motion-control{display:none}}

@media(prefers-reduced-motion:reduce){.m-arc3d-card .m-arc3d-body{opacity:1!important}}

html:not(.js-anim) .m-arc3d-viewport{height:auto;perspective:none}html:not(.js-anim) .m-arc3d-track{width:100%;height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px}html:not(.js-anim) .m-arc3d-card{position:relative;inset:auto;opacity:1!important;transform:none!important}html:not(.js-anim) .m-arc3d-card .m-arc3d-body{opacity:1!important}