/* ============================================================
   Frames de dispositivo compartilhados
   - Celular (iPhone com notch, tilt 3D opcional)
   - Laptop (browser window com traffic-lights)
============================================================ */

/* ─── Celular ─── */
.celular-quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 18;
  transition: transform 700ms ease-out;
  will-change: transform;
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg) rotateZ(-1deg);
}
.celular-quadro::after {
  content: "";
  position: absolute;
  left: -1rem;
  right: -1rem;
  bottom: -1.5rem;
  height: 3rem;
  border-radius: 9999px;
  filter: blur(2rem);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99, 102, 241, 0.35) 0%, rgba(236, 72, 153, 0.18) 45%, transparent 75%);
}
.celular-quadro:hover {
  transform: perspective(1400px) rotateY(-3deg) rotateX(2deg) rotateZ(0deg) translateY(-4px);
}

/* Modificador: sem tilt 3D (usado em phones de showcase no fan layout) */
.projeto-celular .celular-quadro {
  transform: none;
}
.projeto-celular .celular-quadro::after {
  display: none;
}
.projeto-celular .celular-quadro:hover {
  transform: none;
}

.celular-corpo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2.2rem;
  padding: 8px;
  background: linear-gradient(155deg, #1c1f2a 0%, #0a0c14 55%, #1c1f2a 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 60px -20px rgba(10, 10, 11, 0.55),
    0 12px 24px -10px rgba(10, 10, 11, 0.35);
}
.celular-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 20px;
  background: #0a0a0b;
  border-radius: 0 0 16px 16px;
  z-index: 10;
}
.celular-specular {
  position: absolute;
  inset: 8px;
  border-radius: 1.7rem;
  pointer-events: none;
  z-index: 20;
  opacity: 0.6;
  mix-blend-mode: overlay;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.08) 100%);
}
.celular-tela {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.7rem;
  overflow: hidden;
  background: #ffffff;
}
.celular-tela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.celular-reflexo {
  position: absolute;
  left: -1rem;
  right: -1rem;
  bottom: -1.5rem;
  height: 3rem;
  border-radius: 9999px;
  filter: blur(2rem);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99, 102, 241, 0.35) 0%, rgba(236, 72, 153, 0.18) 45%, transparent 75%);
}

/* ─── Laptop / Browser ─── */
.laptop-quadro {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 20px 50px -15px rgba(28, 21, 60, 0.4);
  width: 100%;
}
.laptop-barra {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  background: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
}
.laptop-bolinha {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
}
.laptop-bolinha-1 { background: #ff5f56; }
.laptop-bolinha-2 { background: #ffbd2e; }
.laptop-bolinha-3 { background: #27c93f; }
.laptop-barra-url {
  flex: 1;
  margin: 0 0.75rem;
  height: 20px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
}
.laptop-tela {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #ffffff;
}
.laptop-tela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ─── Mockup do calendário do Buffet ─── */
.buffet-mockup {
  aspect-ratio: auto;
  height: 260px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  font-size: 8px;
}
.buffet-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e5e5e5;
}
.buffet-marca {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.buffet-marca-icone {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  display: grid;
  place-items: center;
  color: white;
  font-size: 8px;
}
.buffet-marca-nome {
  font-weight: 700;
  font-size: 9px;
  color: #0a0a0b;
}
.buffet-marca-agenda {
  font-size: 6px;
  color: #a3a3a3;
  margin-left: 0.25rem;
}
.buffet-direita {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.buffet-mes {
  font-size: 8px;
  font-weight: 600;
  color: #404040;
}
.buffet-acao {
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #ec4899 0%, #fb923c 100%);
  color: white;
  font-size: 7px;
  font-weight: 600;
}
.buffet-corpo {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.buffet-sidebar {
  width: 28%;
  border-right: 1px solid #e5e5e5;
  padding: 0.625rem;
  background: rgba(250, 250, 250, 0.5);
}
.buffet-rotulo {
  margin: 0 0 0.375rem;
  font-size: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #737373;
  font-weight: 600;
}
.buffet-rotulo-extra {
  margin-top: 0.75rem;
}
.buffet-stats {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.buffet-stat {
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  padding: 0.25rem 0.375rem;
}
.buffet-stat-rotulo {
  margin: 0;
  font-size: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #737373;
  font-weight: 600;
}
.buffet-stat-valor {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.buffet-proximos {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.buffet-proximos li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.buffet-data {
  font-family: var(--font-mono);
  font-size: 6px;
  color: #525252;
}
.buffet-proximos li span:last-child {
  font-size: 7px;
  color: #262626;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buffet-calendario {
  flex: 1;
  padding: 0.5rem 0.75rem;
  overflow: hidden;
}
.buffet-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.buffet-dias span {
  text-align: center;
  font-size: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a3a3a3;
  font-weight: 600;
}
.buffet-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.buffet-celula {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  border: 1px solid #f5f5f5;
  padding: 2px;
  display: flex;
  flex-direction: column;
  font-size: 6px;
}
.buffet-celula-dia {
  color: #525252;
  font-weight: 500;
  line-height: 1;
}
.buffet-celula-evento {
  margin-top: auto;
  display: block;
  border-radius: 2px;
  color: white;
  font-size: 5px;
  padding: 0 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.2;
}