:root {
   --brand: #FA6900;
   --brand-600: #FA6900;
   --text: #0f172a;
   --muted: #64748b;
   --line: #e5e7eb;
   --bg: #ffffff;
   --soft: #f8fafc;
   --dark: #0b1220;
   --shadow: 0 10px 30px rgba(2, 6, 23, .08);
   --radius: 14px;
 }

 * {
   font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 }

 body {
   color: var(--text);
   background: var(--bg);
 }

 /* helpers */
 .container-narrow {
   max-width: 1180px;
 }

 .text-muted-2 {
   color: var(--muted) !important;
 }

 .btn-brand {
   --bs-btn-bg: var(--brand);
   --bs-btn-border-color: var(--brand);
   --bs-btn-hover-bg: var(--brand-600);
   --bs-btn-hover-border-color: var(--brand-600);
   --bs-btn-color: #fff;
   --bs-btn-hover-color: #fff;
   font-weight: 700;
   border-radius: 12px;
   padding: .85rem 1.25rem;
 }

 .btn-outline-brand {
   --bs-btn-color: var(--brand);
   --bs-btn-border-color: var(--brand);
   --bs-btn-hover-bg: var(--brand);
   --bs-btn-hover-border-color: var(--brand);
   --bs-btn-hover-color: #fff;
   border-radius: 12px;
   font-weight: 700;
   padding: .85rem 1.25rem;
 }

 /* =========================
       NAVBAR (topo com linha laranja)
       ========================= */
 .pg-navbar {
   position: absolute;
   inset: 0 0 auto 0;
   z-index: 20;
   padding: 18px 0;
   border-top: 4px solid var(--brand);
   background: transparent;
 }

 .pg-navbar .navbar-brand {
   display: flex;
   align-items: center;
   max-width: 210px;
 }

 .pg-navbar .brand-logo {
   width: 100%;
   height: auto;
   max-height: 34px;
   object-fit: contain;
   display: block;
 }

 .pg-navbar .nav-link {
   color: rgba(255, 255, 255, .92) !important;
   font-weight: 600;
   font-size: 15px;
   padding: .25rem .55rem !important;
   border-radius: 10px;
 }

 .pg-navbar .nav-link:hover {
   background: rgba(255, 255, 255, .08);
   color: #fff !important;
 }

 .pg-navbar .dropdown-toggle::after {
   vertical-align: .1em;
   opacity: .9;
 }

 .pg-navbar .navbar-toggler {
   border: 2px solid rgba(255, 255, 255, .35);
   border-radius: 10px;
   padding: 8px 10px;
 }

 .pg-navbar .navbar-toggler:focus {
   box-shadow: none;
 }

 .pg-navbar .navbar-toggler-icon {
   filter: invert(1);
 }

 /* =========================
       HERO (imagem escurecida + proporção do print)
       ========================= */
 .hero--print {
   position: relative;
   min-height: 460px;
   padding: 150px 0 86px;
   color: #fff;
   background: url("../images/capa.jpg") center/cover no-repeat;
 }


 .hero--print::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .45);
   z-index: 0;
 }

 .hero--print .container {
   position: relative;
   z-index: 1;
   padding-top: 36px;
 }

 .hero-kicker {
   color: rgba(255, 255, 255, .90);
   font-weight: 500;
   font-size: 18px;
   margin: 0 0 6px;
 }

 .hero-title--orange {
   color: var(--brand);
   font-weight: 800;
   font-size: 40px;
   line-height: 1.05;
   margin: 0 0 22px;
 }

 .hero-search {
   display: flex;
   align-items: stretch;
   gap: 48px;
   max-width: 1180px;
 }

 .hero-input {
   flex: 1;
   height: 72px;
   border-radius: 3px;
   border: 1px solid #d8d8d8;
   padding: 0 24px;
   font-weight: 500;
   font-size: 16px;
   box-shadow: none;
 }

 .hero-btn {
   height: 72px;
   min-width: 160px;
   border-radius: 3px;
   background: var(--brand);
   border: 1px solid var(--brand);
   color: #fff;
   font-weight: 800;
   letter-spacing: .02em;
   font-size: 14px;
 }

 .hero-btn:hover {
   background: var(--brand-600);
   border-color: var(--brand-600);
 }

 /* =========================
       CATEGORIES
       ========================= */
 /* =========================
   CATEGORIES
========================= */
 .cats {
   background: #f2f2f2;
   padding: 78px 0 92px;
 }

 .cats-title {
   text-align: left;
   font-weight: 700;
   font-size: 34px;
   color: #3a3a3a;
   margin: 0 0 36px;
 }

 .cats-grid {
   display: flex;
   justify-content: flex-start;
   gap: 74px;
   flex-wrap: wrap;
 }

 .cats-item {
   text-decoration: none;
   text-align: center;
   min-width: 120px;
 }

 .cats-pic {
   width: 96px;
   height: 96px;
   border-radius: 999px;
   overflow: hidden;
   display: block;
   margin: 0 auto 14px;
   background: #ddd;
 }

 .cats-pic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
 }

 .cats-label {
   display: block;
   font-size: 18px;
   font-weight: 500;
   color: #4b5563;
 }

 /* =========================
   EVENTS
========================= */
 .events {
   padding-top: 72px;
   padding-bottom: 92px;
   background: #fff;
 }

 .events-head {
   max-width: 1180px;
   margin: 0 auto 18px;
 }

 .events-title {
   text-align: left;
   font-weight: 700;
   font-size: 36px;
   color: #3a3a3a;
   margin: 0 0 14px;
 }

 .events-filters {
   display: flex;
   justify-content: flex-start;
   gap: 12px;
   flex-wrap: wrap;
 }

 .events-chip {
   border: 1px solid #d8d8d8;
   background: #fff;
   color: #5a5a5a;
   border-radius: 999px;
   padding: 9px 14px;
   font-size: 13px;
   line-height: 1;
   font-weight: 500;
   cursor: pointer;
   transition: background .15s ease, border-color .15s ease, color .15s ease;
 }

 .events-chip:hover {
   background: #f6f6f6;
   border-color: #cfcfcf;
   color: #2f2f2f;
 }

 .events-chip.active {
   background: #fff;
   border-color: #bfbfbf;
   color: #2f2f2f;
   box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
 }

 .ev {
   border-radius: 6px;
   overflow: hidden;
   background: #fff;
 }

 .ev-media {
   position: relative;
   height: 170px;
   background: #ddd center/cover no-repeat;
   border-radius: 6px;
   overflow: hidden;
 }

 .ev-tag {
   position: absolute;
   left: 10px;
   bottom: 10px;
   background: var(--brand);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   padding: 4px 8px;
   border-radius: 2px;
 }

 .ev-fav {
   position: absolute;
   right: 10px;
   top: 10px;
   width: 34px;
   height: 34px;
   border-radius: 999px;
   background: #fff;
   border: 1px solid #e6e6e6;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #111;
   box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
   transition: transform .15s ease;
 }

 .ev-fav:hover {
   transform: translateY(-1px);
 }

 .ev-fav:active {
   transform: translateY(0px);
 }

 .ev-body {
   display: flex;
   gap: 18px;
   padding: 14px 6px 0;
 }

 .ev-date {
   width: 62px;
   text-align: center;
   padding-top: 2px;
 }

 .ev-month {
   color: var(--brand);
   font-weight: 800;
   letter-spacing: .04em;
   font-size: 13px;
 }

 .ev-day {
   font-weight: 800;
   font-size: 18px;
   color: #222;
   margin-top: 4px;
 }

 .ev-info {
   flex: 1;
   padding-right: 6px;
 }

 .ev-title {
   font-weight: 600;
   font-size: 16px;
   color: #2a2a2a;
   margin: 0 0 6px;
 }

 .ev-place {
   font-size: 13px;
   color: #5a5a5a;
   margin-bottom: 6px;
 }

 .ev-time {
   font-size: 12px;
   color: #7a7a7a;
   padding-bottom: 6px;
 }

 .events-cta {
   display: flex;
   justify-content: center;
   margin-top: 76px;
 }

 .events-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: min(760px, 92%);
   height: 64px;
   border: 2px solid var(--brand);
   color: var(--brand);
   font-weight: 600;
   font-size: 22px;
   border-radius: 6px;
   text-decoration: none;
 }

 .events-btn:hover {
   background: rgba(250, 105, 0, .06);
   color: var(--brand);
 }

 /* =========================
   MOBILE: CENTRALIZA CATEGORIES + EVENTS
   (sem alterar desktop)
========================= */
 @media (max-width: 991.98px) {
   .cats-title {
     text-align: center;
   }

   .cats-grid {
     justify-content: center;
     gap: 26px;
     /* mais confortável no mobile */
   }

   .events-title {
     text-align: center;
   }

   .events-filters {
     justify-content: center;
   }
 }


 /* =========================
       STEPS (CLIENTES + FOTÓGRAFOS)
       ========================= */
 .steps {
   background: #fff;
   padding: 96px 0 96px;
 }

 .steps-head {
   margin-bottom: 36px;
 }

 .steps-kicker {
   color: var(--brand);
   font-weight: 800;
   letter-spacing: .14em;
   font-size: 14px;
   margin-bottom: 12px;
 }

 .steps-title {
   font-size: 44px;
   font-weight: 800;
   color: #3a3a3a;
   margin: 0;
 }

 .steps-title span {
   color: var(--brand);
 }

 .steps-track {
   position: relative;
   max-width: 980px;
   margin: 28px auto 26px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 10px;
 }

 .steps-track::before {
   content: "";
   position: absolute;
   left: 34px;
   right: 34px;
   height: 2px;
   background: var(--brand);
   top: 50%;
   transform: translateY(-50%);
 }

 .steps-dot {
   width: 46px;
   height: 46px;
   border-radius: 999px;
   border: 2px solid var(--brand);
   color: var(--brand);
   background: #fff;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 1;
 }

 .steps-grid {
   max-width: 1080px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 56px;
   text-align: center;
 }

 .steps-h {
   font-size: 20px;
   font-weight: 700;
   color: #3a3a3a;
   margin: 0 0 10px;
 }

 .steps-p {
   font-size: 16px;
   color: #6b6b6b;
   line-height: 1.35;
   margin: 0 auto;
   max-width: 34ch;
 }

 .steps-cta {
   margin-top: 64px;
 }

 .steps-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: min(760px, 92%);
   height: 72px;
   margin: 0 auto;
   border: 2px solid var(--brand);
   color: var(--brand);
   font-size: 26px;
   font-weight: 500;
   border-radius: 6px;
   text-decoration: none;
 }

 .steps-btn:hover {
   background: rgba(250, 105, 0, .06);
 }

 /* =========================
       ORANGE BAND
       ========================= */
 .band2 {
   background: var(--brand);
   padding: 104px 0 108px;
   color: #fff;
 }

 .band2-title {
   font-size: 48px;
   font-weight: 300;
   letter-spacing: -.01em;
   line-height: 1.12;
   margin: 0 0 14px;
 }

 .band2-title span {
   font-weight: 800;
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 3px;
 }

 .band2-sub {
   font-size: 20px;
   font-style: italic;
   opacity: .95;
   margin-bottom: 44px;
 }

 .band2-pills {
   display: flex;
   justify-content: center;
   gap: 28px;
   flex-wrap: wrap;
 }

 .band2-pill {
   background: #fff;
   color: #1f1f1f;
   text-decoration: none;
   height: 62px;
   min-width: 268px;
   padding: 0 26px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   font-weight: 700;
   font-size: 20px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
 }

 .band2-pill i {
   color: var(--brand);
   font-size: 20px;
   line-height: 1;
   transform: translateY(1px);
 }

 /* =========================
       FOOTER
       ========================= */
 footer {
   background: #060a13;
   color: rgba(255, 255, 255, .78);
   padding: 44px 0;
 }

 footer a {
   color: rgba(255, 255, 255, .78);
   text-decoration: none;
 }

 footer a:hover {
   color: #fff;
 }

 .footer-title {
   color: #fff;
   font-weight: 900;
   margin-bottom: 12px;
   max-width: 180px;
 }

 .footer-title img {
   width: 100%;
   height: auto;
   max-height: 38px;
   object-fit: contain;
   display: block;
 }

 .small-note {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .6);
 }

 /* =========================
       RESPONSIVE (kept as-is, organized)
       ========================= */
 @media (max-width: 991.98px) {
   .pg-navbar {
     padding: 14px 0;
     position: absolute;
   }

   .pg-navbar .navbar-collapse {
     background: rgba(0, 0, 0, .70);
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 14px;
     padding: 10px;
     margin-top: 10px;
     backdrop-filter: blur(8px);
   }

   .hero--print {
     min-height: 540px;
     padding: 128px 0 64px;
   }

   .hero-title--orange {
     font-size: 34px;
   }

   .hero-search {
     flex-direction: column;
     gap: 14px;
   }

   .hero-btn {
     width: 100%;
     min-width: unset;
   }

   .cats {
     padding: 56px 0 66px;
   }

   .cats-title {
     font-size: 28px;
     margin-bottom: 28px;
   }

   .cats-grid {
     gap: 26px;
   }

   .cats-pic {
     width: 84px;
     height: 84px;
   }

   .cats-label {
     font-size: 16px;
   }

   .events {
     padding-top: 62px;
     padding-bottom: 76px;
   }

   .events-title {
     font-size: 30px;
     margin-bottom: 12px;
   }

   .events-head {
     max-width: 100%;
   }

   .events-filters {
     gap: 10px;
   }

   .events-cta {
     margin-top: 44px;
   }

   .steps {
     padding: 72px 0 78px;
   }

   .steps-title {
     font-size: 34px;
   }

   .steps-track {
     max-width: 560px;
     margin: 22px auto 20px;
   }

   .steps-track::before {
     left: 30px;
     right: 30px;
   }

   .steps-dot {
     width: 42px;
     height: 42px;
   }

   .steps-grid {
     grid-template-columns: 1fr;
     gap: 32px;
   }

   .steps-cta {
     margin-top: 48px;
   }

   .steps-btn {
     height: 66px;
     font-size: 22px;
   }

   .band2 {
     padding: 72px 0 76px;
   }

   .band2-title {
     font-size: 34px;
   }

   .band2-sub {
     font-size: 18px;
     margin-bottom: 32px;
   }

   .band2-pill {
     min-width: 240px;
     font-size: 18px;
   }

   .navbar-collapse {
     background: rgba(2, 6, 23, .88);
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 16px;
     padding: 12px;
     margin-top: 12px;
     backdrop-filter: blur(8px);
   }
 }

 @media (max-width: 575.98px) {
   .hero--print {
     min-height: 620px;
     padding: 140px 0 70px;
   }

   .hero-kicker {
     font-size: 17px;
     margin-bottom: 10px;
   }

   .hero-title--orange {
     font-size: 40px;
     margin-bottom: 22px;
   }

   .hero-input {
     height: 76px;
     font-size: 18px;
     padding: 22px 22px;
   }

   .hero-btn {
     height: 48px;
     font-size: 16px;
     letter-spacing: .04em;
   }


 }