:root {
  color-scheme: light;
  --paper: #f3f1e9;
  --paper-bright: #fbfaf6;
  --ink: #20241d;
  --muted: #71736a;
  --line: #d9d8cf;
  --lime: #d8fa66;
  --tomato: #f06445;
  --forest: #263b31;
  --display: "Space Grotesk", "Trebuchet MS", sans-serif;
  --body: "DM Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--lime); color: var(--ink); }

.site-header { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; width: min(100%, 1600px); height: 82px; padding: 0 6.2%; color: white; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 18px; }
.brand-light { font-weight: 400; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.7vw, 42px); font-size: 13px; font-weight: 500; }
.main-nav a:not(.nav-cta) { opacity: .88; transition: opacity .2s; }
.main-nav a:not(.nav-cta):hover { opacity: 1; }
.nav-cta { display: inline-flex; align-items: center; gap: 13px; padding: 12px 15px; border: 1px solid rgb(255 255 255 / 50%); border-radius: 2px; }
.nav-cta span { color: var(--lime); font-size: 17px; }
.menu-toggle { display: none; }

.hero { position: relative; display: flex; min-height: min(790px, 100svh); min-height: max(680px, min(790px, 100svh)); align-items: center; overflow: hidden; background: #29382e; color: white; }
.hero-photo { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgb(15 20 17 / 78%) 0%, rgb(15 20 17 / 56%) 48%, rgb(15 20 17 / 18%) 100%), linear-gradient(0deg, rgb(14 18 15 / 50%), transparent 34%), url("../fotos/Colagem%20de%20Karaok%C3%AA%20em%20Festa%20no%20P%C3%A1tio.png"); background-position: center, center, center 44%; background-size: cover; transform: scale(1.015); animation: photo-arrive 1.1s ease-out both; }
.hero-content { position: relative; width: min(100%, 1600px); margin: 0 auto; padding: 132px 12% 98px; animation: content-arrive .75s .12s both; }
.eyebrow { margin: 0; color: var(--forest); font-size: 11px; font-weight: 700; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; }
.eyebrow > span:not(.live-dot) { margin-left: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: var(--lime); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgb(216 250 102 / 15%); }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: 0; }
.hero h1 { max-width: 1000px; margin-bottom: 24px; font-size: clamp(56px, 6.6vw, 96px); font-weight: 600; line-height: .98; }
.hero h1 span { color: var(--lime); }
.hero-bottom { display: flex; align-items: center; gap: 44px; max-width: 740px; }
.hero-bottom p { max-width: 320px; margin-bottom: 0; color: rgb(255 255 255 / 83%); font-size: 15px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 23px; padding: 0 20px; border: 0; border-radius: 2px; cursor: pointer; font-size: 13px; font-weight: 700; transition: background .2s, color .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 18px; }
.button-lime { background: var(--lime); color: var(--ink); }
.button-lime:hover { background: #e5ff8b; }
.hero-price { position: absolute; right: 12%; bottom: 96px; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 10px; padding-left: 18px; border-left: 1px solid rgb(255 255 255 / 55%); }
.hero-price > span:first-child { grid-column: 1 / -1; color: rgb(255 255 255 / 75%); font-size: 11px; }
.hero-price strong { font-family: var(--display); font-size: 27px; }
.hero-price .price-footnote { color: rgb(255 255 255 / 70%); font-size: 10px; }
.hero-index { position: absolute; bottom: 98px; left: 6.2%; display: flex; align-items: center; gap: 12px; color: white; font-size: 10px; letter-spacing: .08em; }
.hero-index > span:first-child { color: var(--lime); font-family: var(--display); font-size: 15px; }
.index-line { width: 34px; height: 1px; background: rgb(255 255 255 / 50%); }
.scroll-cue { position: absolute; right: 6.2%; bottom: 0; display: flex; height: 58px; align-items: center; gap: 12px; color: white; font-size: 11px; }
.scroll-cue span { color: var(--lime); font-size: 20px; }
.occasion-strip { display: flex; min-height: 61px; align-items: center; justify-content: center; gap: clamp(13px, 2.5vw, 40px); overflow: hidden; padding: 10px 24px; background: var(--lime); color: var(--ink); font-family: var(--display); font-size: 12px; font-weight: 600; white-space: nowrap; }
.occasion-strip i { color: var(--tomato); font-size: 15px; font-style: normal; }

.section-wrap { width: min(100% - 12.4%, 1250px); margin-inline: auto; }
.kit-section { display: grid; grid-template-columns: .84fr 1fr; column-gap: 9%; row-gap: 28px; padding-block: 130px 138px; }
.section-heading { align-self: end; padding-bottom: 10px; }
.section-heading .eyebrow, .service-heading .eyebrow, .gallery-heading .eyebrow, .details-title .eyebrow, .contact-copy .eyebrow { margin-bottom: 24px; }
.section-heading h2, .service-heading h2, .gallery-heading h2, .details-title h2, .contact-copy h2 { margin-bottom: 17px; font-size: clamp(40px, 5vw, 66px); font-weight: 500; line-height: 1.04; }
.section-heading h2 em, .service-heading h2 em, .price-inner h2 em, .contact-copy h2 em { color: var(--tomato); font-style: normal; }
.section-intro { max-width: 345px; margin-bottom: 0; color: var(--muted); font-size: 14px; }
.kit-visual { position: relative; align-self: stretch; min-height: 350px; overflow: hidden; background: #d7bda6; }
.kit-visual img { width: 100%; height: 100%; min-height: 350px; max-height: 460px; object-fit: cover; object-position: center 44%; }
.photo-note { position: absolute; right: 16px; bottom: 15px; padding: 9px 13px; background: var(--paper-bright); font-size: 11px; }
.photo-note b { margin-left: 15px; color: var(--tomato); font-size: 18px; }
.kit-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 8%; }
.kit-item { display: grid; grid-template-columns: 31px 1fr 30px; align-items: center; gap: 14px; min-height: 117px; border-top: 1px solid var(--line); }
.kit-number { align-self: start; padding-top: 27px; color: var(--tomato); font-family: var(--display); font-size: 12px; }
.kit-item h3 { margin-bottom: 4px; font-size: 18px; font-weight: 600; }
.kit-item p { max-width: 370px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.kit-symbol { color: var(--forest); font-family: var(--display); font-size: 23px; text-align: right; }

.service-band { background: var(--forest); color: white; }
.service-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 11%; padding-block: 118px 122px; }
.service-heading .eyebrow { color: var(--lime); }
.service-heading h2 { margin-bottom: 0; }
.service-heading h2 em { color: var(--lime); }
.steps-list { padding-top: 12px; }
.step { display: grid; grid-template-columns: 38px 1fr 25px; align-items: start; gap: 18px; min-height: 111px; padding-block: 20px; border-top: 1px solid rgb(255 255 255 / 24%); }
.step-number { color: var(--lime); font-family: var(--display); font-size: 12px; }
.step h3 { margin-bottom: 5px; font-size: 17px; font-weight: 600; }
.step p { max-width: 365px; margin-bottom: 0; color: rgb(255 255 255 / 68%); font-size: 12px; }
.step-arrow { color: var(--lime); font-size: 19px; text-align: right; }

.gallery-section { padding-block: 125px 137px; }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.gallery-heading h2 { margin-bottom: 0; }
.gallery-heading > p { max-width: 295px; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.photo-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; align-items: stretch; }
.gallery-photo { position: relative; min-width: 0; height: 345px; margin: 0; overflow: hidden; background: #d3c7b8; }
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.gallery-photo:hover img { transform: scale(1.035); }
.gallery-photo-tall img { object-position: 42% center; }
.gallery-photo-wide img { object-position: center; }
.gallery-photo-detail img { object-position: center 48%; }
.gallery-photo figcaption { position: absolute; right: 10px; bottom: 10px; left: 10px; padding: 9px 11px; background: rgb(20 25 20 / 83%); color: white; font-size: 11px; }

.price-section { background: var(--tomato); color: var(--ink); }
.price-inner { display: grid; grid-template-columns: 1fr .62fr; align-items: center; gap: 12%; padding-block: 100px 104px; }
.price-inner .eyebrow { margin-bottom: 21px; }
.price-inner h2 { margin-bottom: 19px; font-size: clamp(46px, 6vw, 78px); font-weight: 500; line-height: 1; }
.price-inner h2 em { color: var(--paper-bright); }
.price-description { max-width: 440px; margin-bottom: 0; font-size: 14px; }
.price-cta { padding-top: 24px; }
.price-cta > p { max-width: 320px; margin-bottom: 24px; font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.4; }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--forest); }
.price-small { display: block; margin-top: 12px; font-size: 10px; }

.details-section { display: grid; grid-template-columns: .8fr 1fr; gap: 12%; padding-block: 120px 130px; }
.details-title h2 { margin-bottom: 0; }
.faq-list { border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary { position: relative; padding: 20px 36px 20px 0; cursor: pointer; font-family: var(--display); font-size: 16px; font-weight: 600; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { position: absolute; top: 18px; right: 2px; color: var(--tomato); content: "+"; font-family: var(--body); font-size: 21px; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { max-width: 540px; margin: -3px 28px 19px 0; color: var(--muted); font-size: 13px; }

.contact-section { overflow: hidden; background: var(--ink); color: white; }
.contact-inner { position: relative; display: grid; grid-template-columns: .9fr 1fr; gap: 12%; padding-block: 111px 117px; }
.contact-copy .eyebrow { color: var(--lime); }
.contact-copy .eyebrow > span { color: rgb(255 255 255 / 58%); }
.contact-copy h2 { font-size: clamp(49px, 6vw, 78px); }
.contact-copy h2 em { color: var(--lime); }
.contact-copy > p:not(.eyebrow) { max-width: 350px; color: rgb(255 255 255 / 70%); font-size: 13px; }
.contact-stamp { position: absolute; bottom: 54px; left: 0; display: grid; width: 116px; height: 116px; align-content: center; padding-left: 17px; border: 1px solid rgb(216 250 102 / 70%); border-radius: 50%; color: var(--lime); font-family: var(--display); font-size: 11px; font-weight: 600; line-height: 1.25; transform: rotate(-10deg); }
.contact-stamp span { position: absolute; right: 14px; bottom: 17px; font-size: 18px; }
.quote-form { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.quote-form label { margin-top: 7px; color: rgb(255 255 255 / 86%); font-size: 12px; font-weight: 600; }
.quote-form label span { color: rgb(255 255 255 / 55%); font-weight: 400; }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; min-height: 47px; padding: 11px 12px; border: 1px solid rgb(255 255 255 / 29%); border-radius: 2px; outline: none; background: rgb(255 255 255 / 5%); color: white; font-size: 13px; }
.quote-form select { color-scheme: dark; }
.quote-form select option { background: var(--ink); color: white; }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: rgb(255 255 255 / 44%); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--lime); }
.quote-form textarea { min-height: 85px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-row > div { min-width: 0; }
.form-submit { align-self: flex-start; margin-top: 12px; }
.form-note { min-height: 19px; margin: -2px 0 0; color: rgb(255 255 255 / 59%); font-size: 10px; }

.site-footer { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 6.2%; background: #171a16; color: white; }
.site-footer .brand { font-size: 11px; }
.site-footer .brand-mark { width: 28px; height: 28px; font-size: 15px; }
.site-footer p, .back-to-top { margin-bottom: 0; color: rgb(255 255 255 / 62%); font-size: 11px; }
.site-footer p span { padding-left: 5px; color: var(--lime); font-size: 16px; }
.back-to-top { transition: color .2s; }
.back-to-top:hover { color: var(--lime); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes photo-arrive { from { opacity: .6; transform: scale(1.06); } to { opacity: 1; transform: scale(1.015); } }
@keyframes content-arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .site-header { height: 72px; padding-inline: 5%; }
  .main-nav { gap: 17px; font-size: 12px; }
  .nav-cta { gap: 7px; padding: 10px; }
  .hero-content { padding-inline: 8%; }
  .hero h1 { font-size: clamp(57px, 9vw, 83px); }
  .hero-price { right: 8%; }
  .hero-index { left: 5%; }
  .scroll-cue { right: 5%; }
  .section-wrap { width: min(100% - 10%, 1250px); }
  .kit-section { column-gap: 6%; }
  .service-inner, .price-inner, .details-section, .contact-inner { gap: 7%; }
  .gallery-photo { height: 290px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 68px; }
  .site-header { position: absolute; height: 66px; padding-inline: 20px; }
  .brand { font-size: 11px; }
  .brand-mark { width: 31px; height: 31px; }
  .menu-toggle { display: flex; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgb(255 255 255 / 48%); border-radius: 2px; background: transparent; }
  .menu-toggle span { width: 17px; height: 1px; background: white; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .main-nav { position: absolute; top: 58px; right: 16px; left: 16px; display: none; align-items: stretch; gap: 0; padding: 7px 16px 16px; background: var(--ink); font-size: 14px; }
  .main-nav.is-open { display: flex; flex-direction: column; }
  .main-nav > a:not(.nav-cta) { padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / 13%); }
  .main-nav .nav-cta { align-self: flex-start; margin-top: 12px; }
  .hero { min-height: 760px; min-height: max(690px, 96svh); align-items: flex-start; }
  .hero-photo { background-image: linear-gradient(90deg, rgb(15 20 17 / 72%), rgb(15 20 17 / 40%)), linear-gradient(0deg, rgb(14 18 15 / 68%), transparent 48%), url("../fotos/Colagem%20de%20Karaok%C3%AA%20em%20Festa%20no%20P%C3%A1tio.png"); background-position: center, center, 54% center; }
  .hero-content { padding: 144px 25px 135px; }
  .hero-eyebrow { margin-bottom: 24px; font-size: 10px; }
  .hero h1 { margin-bottom: 22px; font-size: clamp(53px, 13vw, 76px); }
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: 19px; }
  .hero-bottom p { max-width: 330px; font-size: 14px; }
  .button { min-height: 49px; gap: 13px; padding-inline: 15px; font-size: 12px; }
  .hero-price { right: auto; bottom: 64px; left: 25px; }
  .hero-index { display: none; }
  .scroll-cue { right: 20px; bottom: 11px; height: 43px; font-size: 10px; }
  .occasion-strip { min-height: 53px; justify-content: flex-start; gap: 18px; padding-inline: 20px; font-size: 11px; }
  .occasion-strip span:nth-of-type(n+4), .occasion-strip i:nth-of-type(n+3) { display: none; }
  .section-wrap { width: calc(100% - 40px); }
  .kit-section { grid-template-columns: 1fr; row-gap: 26px; padding-block: 80px 86px; }
  .section-heading .eyebrow, .service-heading .eyebrow, .gallery-heading .eyebrow, .details-title .eyebrow, .contact-copy .eyebrow { margin-bottom: 20px; }
  .section-heading h2, .service-heading h2, .gallery-heading h2, .details-title h2 { font-size: clamp(42px, 11vw, 59px); }
  .section-intro { max-width: 330px; }
  .kit-visual { min-height: 300px; }
  .kit-visual img { min-height: 300px; max-height: 390px; }
  .kit-list { grid-template-columns: 1fr; }
  .kit-item { min-height: 104px; }
  .kit-number { padding-top: 24px; }
  .service-inner { grid-template-columns: 1fr; gap: 41px; padding-block: 81px 84px; }
  .steps-list { padding-top: 0; }
  .step { min-height: 100px; }
  .gallery-section { padding-block: 82px 88px; }
  .gallery-heading { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 23px; }
  .gallery-heading > p { max-width: 310px; margin-bottom: 0; }
  .photo-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .gallery-photo { height: 210px; }
  .gallery-photo-tall { grid-column: 1 / -1; height: 260px; }
  .gallery-photo-detail { height: 210px; }
  .gallery-photo figcaption { right: 7px; bottom: 7px; left: 7px; padding: 7px 8px; font-size: 10px; }
  .price-inner { grid-template-columns: 1fr; gap: 25px; padding-block: 77px 79px; }
  .price-inner h2 { font-size: clamp(49px, 12vw, 69px); }
  .price-cta { padding-top: 0; }
  .price-cta > p { margin-bottom: 17px; font-size: 17px; }
  .details-section { grid-template-columns: 1fr; gap: 25px; padding-block: 80px 86px; }
  .faq-item summary { padding-block: 17px; font-size: 15px; }
  .faq-item summary::after { top: 15px; }
  .contact-inner { grid-template-columns: 1fr; gap: 29px; padding-block: 78px 83px; }
  .contact-copy h2 { font-size: clamp(52px, 13vw, 72px); }
  .contact-copy > p:not(.eyebrow) { max-width: 320px; }
  .contact-stamp { display: none; }
  .quote-form { gap: 8px; }
  .form-row { gap: 10px; }
  .form-row input { min-width: 0; padding-inline: 8px; font-size: 12px; }
  .form-submit { align-self: stretch; justify-content: space-between; margin-top: 13px; }
  .site-footer { min-height: 74px; flex-wrap: wrap; padding: 15px 20px; }
  .site-footer p { display: none; }
  .back-to-top { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}