:root { --orange: #ec721e; }

.header { position: fixed; transition: background .25s, box-shadow .25s; }
.header.scrolled { background: rgba(23, 21, 21, .96); box-shadow: 0 3px 15px #0002; border-bottom-color: transparent; }
.hero-bg { background: linear-gradient(90deg, rgba(5, 7, 11, .94) 0%, rgba(5, 7, 11, .75) 47%, rgba(5, 7, 11, .34) 100%), url('fotos/05.png') center 45% / cover no-repeat; }

.reason-icon { width: 42px; height: 42px; margin: 31px 0 0; border: 1px solid #e5b48d; border-radius: 50%; display: grid; place-items: center; color: var(--orange); }
.reason-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reason-grid h3 { margin-top: 18px; }

.client-list span { height: 92px; }
.client-list span { background: #fff; margin: 7px; border-radius: 2px; border: 0; }
.client-list img { display: block; width: calc(100% - 30px); max-width: 138px; max-height: 52px; object-fit: contain; filter: none; opacity: 1; transition: transform .2s ease; }
.client-list span:hover img { transform: scale(1.05); }

.floating-wa { width: auto; height: auto; border-radius: 28px; display: flex; gap: 8px; padding: 11px 15px 11px 11px; align-items: center; font: 700 12px var(--sans); letter-spacing: .03em; }
.floating-wa svg { width: 26px; height: 26px; fill: currentColor; }
.floating-wa:hover { transform: translateY(-2px); background: #1ca954; }

.hero-bg { background-image: linear-gradient(90deg, rgba(5, 7, 11, .94) 0%, rgba(5, 7, 11, .75) 47%, rgba(5, 7, 11, .34) 100%), url('fotos/51Foto principal topoTEATRO EMPRESA.jpg'); background-position: center 44%; }

.instagram { background: #f7f5f2; padding: 95px 0; }
.instagram-inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.instagram h2 { margin: 0; font: 600 clamp(32px, 4vw, 51px)/1.15 var(--serif); }
.instagram h2 em { color: var(--orange); font-style: italic; }
.instagram-link { min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; color: var(--ink); border-bottom: 2px solid var(--orange); padding: 12px 3px; text-decoration: none; font-size: 13px; font-weight: 700; }
.instagram-link svg, .footer-social svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.instagram-link b { color: var(--orange); font-size: 17px; }
.footer-social a { display: flex; gap: 8px; align-items: center; }
.creation { margin-left: 5px; }
.footer-bottom .creation a { color: var(--orange); }
.footer-bottom .back-top { margin-left: auto; }

@media (max-width: 800px) {
  .hero-bg { background-position: 62% 45%; }
  .client-list span { height: 68px; }
  .client-list span { margin: 4px; }
  .client-list img { max-width: 98px; max-height: 35px; }
  .instagram { padding: 65px 0; }
  .instagram-inner { display: block; }
  .instagram-link { margin-top: 28px; }
  .footer-bottom .back-top { margin-left: 0; }
}