.modelos { padding-top: clamp(110px, 16vh, 190px); }
.obras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.obra {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 701 / 540; border-radius: 22px; border: 1px solid var(--borda-2); background: #0D0D0F;
}
.obra.luz::before { inset: 0; }
.obra[hidden] { display: none; }
.obra-mockup { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 1.1s var(--ease); }
.obra:hover .obra-mockup { transform: scale(1.03); }
.obra-info {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 22px; border-radius: 15px;
  background: rgba(10, 10, 11, .78); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.obra-texto { margin-right: auto; font: 500 clamp(18px, 1.4vw, 22px)/1.1 var(--f-titulo); letter-spacing: .01em; }
.obra-seta {
  width: 46px; height: 46px; flex: none; border-radius: var(--raio-botao); display: grid; place-items: center;
  background: var(--azul); color: #fff; transition: transform .6s var(--ease), background-color .3s;
}
.obra-seta .ico { width: 18px; height: 18px; transition: transform .6s var(--ease); }
.obra:hover .obra-seta { background: #1F45E0; }
.obra:hover .obra-seta .ico { transform: rotate(45deg); }
.obra-breve {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 32px;
  background: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1.5px) 0 0 / 22px 22px, #0B0B0C;
}
.barras { display: flex; align-items: flex-end; gap: 7px; height: 26px; margin-bottom: 14px; }
.barras i { width: 14px; height: 14px; background: var(--azul); transform-origin: 50% 100%; }
.breve-titulo { font: 400 clamp(26px, 2.6vw, 40px)/1.1 var(--f-titulo); letter-spacing: .01em; }
.breve-titulo b { font-weight: 400; color: var(--azul-claro); }
.breve-sub { font: 400 17px/1.3 var(--f-titulo); letter-spacing: .02em; color: var(--suave); }
@keyframes barra { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(1.85); opacity: .35; } }
@media (prefers-reduced-motion: no-preference) {
  .barras i { animation: barra 1.4s var(--ease-io) infinite; }
  .barras i:nth-child(2) { animation-delay: .15s; }
  .barras i:nth-child(3) { animation-delay: .3s; }
}
@media (max-width: 860px) {
  .obras { grid-template-columns: 1fr; }
  .obra { aspect-ratio: 4 / 3.6; }
  .obra-info { padding: 10px 10px 10px 18px; }
  .obra-texto { font-size: 18px; }
  .obra-seta { width: 40px; height: 40px; }
  .obra-breve { aspect-ratio: auto; padding-block: 48px; }
}
