:root {
   --paper: #f7f5f3;
   --white: #fff;
   --ink: #514947;
   --muted: #817775;
   --taupe: #b7adab;
   --deep: #766967;
   --line: #d9d2cf;
   --soft: #ece7e4;
   --serif: "Playfair Display", Georgia, serif;
   --sans: "DM Sans", Arial, sans-serif;
   --max: 1160px
 }

 * {
   box-sizing: border-box
 }

 html {
   scroll-behavior: smooth;
   scroll-padding-top: 95px
 }

 body {
   margin: 0;
   background: var(--paper);
   color: var(--ink);
   font-family: var(--sans);
   font-size: 16px;
   line-height: 1.7
 }

 a {
   color: inherit;
   text-decoration: none
 }

 .pattern {
   height: 58px;
   background: var(--taupe) url("assets/pattern.svg") center/cover no-repeat
 }

 .site-header {
   max-width: var(--max);
   margin: auto;
   padding: 24px 28px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px
 }

 .brand {
   display: flex;
   flex-direction: column;
   line-height: 1.2
 }

 .brand-name {
   font-size: 25px;
   letter-spacing: .13em;
   font-weight: 400
 }

 .brand-subtitle {
   font-family: var(--serif);
   font-size: 14px;
   color: var(--muted);
   letter-spacing: .04em
 }

 .main-nav {
   display: flex;
   align-items: center;
   gap: 32px;
   font-size: 13px;
   color: var(--muted)
 }

 .main-nav a {
   transition: color .2s
 }

 .main-nav a:hover,
 .text-link:hover {
   color: var(--deep)
 }

 .nav-cta {
   border: 1px solid var(--deep);
   padding: 10px 17px;
   border-radius: 2px;
   color: var(--deep)
 }

 .menu-toggle {
   display: none;
   background: none;
   border: 0;
   padding: 8px
 }

 .menu-toggle span {
   display: block;
   width: 24px;
   height: 1px;
   background: var(--ink);
   margin: 6px
 }

 .section-wrap {
   max-width: var(--max);
   margin: 0 auto;
   padding-left: 28px;
   padding-right: 28px
 }

 .hero {
   min-height: 650px;
   display: grid;
   grid-template-columns: 1.02fr .98fr;
   align-items: center;
   gap: 7%;
   padding-top: 45px;
   padding-bottom: 90px
 }

 .eyebrow,
 .section-kicker {
   font-size: 10px;
   letter-spacing: .2em;
   color: var(--deep);
   font-weight: 600
 }

 .hero h1,
 .intro h2,
 .section-heading h2,
 .booking h2,
 .contact h2 {
   font-family: var(--serif);
   font-weight: 400;
   line-height: 1.15;
   letter-spacing: -.025em
 }

 .hero h1 {
   font-size: clamp(42px, 5vw, 68px);
   margin: 22px 0
 }

 h1 em,
 h2 em {
   font-weight: 400;
   color: var(--deep)
 }

 .hero-description {
   max-width: 490px;
   color: var(--muted);
   font-size: 16px
 }

 .hero-actions {
   display: flex;
   align-items: center;
   gap: 25px;
   margin-top: 32px;
   flex-wrap: wrap
 }

 .button {
   display: inline-flex;
   align-items: center;
   gap: 24px;
   padding: 15px 21px;
   font-size: 12px;
   letter-spacing: .04em;
   transition: transform .2s, background .2s
 }

 .button:hover {
   transform: translateY(-2px)
 }

 .button-dark {
   background: var(--deep);
   color: white
 }

 .button-dark:hover {
   background: #625653
 }

 .text-link {
   font-size: 12px;
   border-bottom: 1px solid var(--taupe);
   padding-bottom: 4px
 }

 .hero-note {
   margin-top: 50px;
   color: var(--muted);
   font-size: 11px;
   letter-spacing: .04em;
   display: flex;
   align-items: center;
   gap: 12px
 }

 .note-line {
   width: 34px;
   height: 1px;
   background: var(--taupe)
 }

 .hero-photo-wrap {
   position: relative;
   max-width: 440px;
   justify-self: end;
   width: 100%;
   padding: 0 18px 28px 0
 }

 .photo-frame {
   height: 510px;
   overflow: hidden;
   border-radius: 190px 190px 4px 4px;
   background: var(--soft)
 }

 .hero-photo {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 25%
 }

 .photo-frame:after {
   content: "";
   position: absolute;
   inset: 0 18px 28px 0;
   border: 1px solid rgba(118, 105, 103, .35);
   border-radius: 190px 190px 4px 4px;
   pointer-events: none
 }

 .photo-caption {
   position: absolute;
   right: 0;
   bottom: 0;
   background: var(--paper);
   padding: 13px 18px;
   display: flex;
   flex-direction: column;
   font-size: 9px;
   letter-spacing: .16em
 }

 .photo-caption span+span {
   color: var(--muted);
   font-size: 8px
 }

 .photo-stamp {
   position: absolute;
   left: -35px;
   bottom: 55px;
   background: var(--taupe);
   color: white;
   width: 94px;
   height: 94px;
   border-radius: 50%;
   display: grid;
   place-content: center;
   text-align: center;
   font-family: var(--serif);
   font-size: 15px;
   line-height: 1.25;
   transform: rotate(-10deg)
 }

 .intro {
   padding-top: 76px;
   padding-bottom: 90px;
   border-top: 1px solid var(--line)
 }

 .intro-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 9%;
   padding-top: 22px
 }

 .intro h2,
 .section-heading h2,
 .booking h2 {
   font-size: clamp(34px, 4vw, 48px);
   margin: 0
 }

 .intro-content>div {
   max-width: 520px;
   color: var(--muted);
   font-size: 14px
 }

 .intro-content p {
   margin: 0 0 12px
 }

 .portfolio {
   padding-top: 70px;
   padding-bottom: 95px;
   background: #eee9e6;
   max-width: none
 }

 .portfolio>.section-heading,
 .portfolio>.gallery,
 .portfolio>.gallery-note {
   max-width: var(--max);
   margin-left: auto;
   margin-right: auto
 }

 .section-heading {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 30px;
   margin-bottom: 35px
 }

 .section-heading h2 {
   margin-top: 12px
 }

 .section-heading>p {
   max-width: 300px;
   color: var(--muted);
   font-size: 13px;
   margin: 0 0 5px
 }

 .gallery {
   display: grid;
   grid-template-columns: 1.4fr .8fr;
   gap: 22px;
   align-items: stretch
 }

 .gallery figure {
   margin: 0;
   position: relative;
   overflow: hidden;
   background: var(--soft)
 }

 .gallery-main {
   height: 420px
 }

 .gallery-side {
   height: 420px
 }

 .gallery img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
 }

 .gallery-main img {
   object-position: center 42%
 }

 .gallery-side img {
   object-position: center 24%
 }

 .gallery figcaption {
   position: absolute;
   bottom: 0;
   left: 0;
   background: rgba(247, 245, 243, .92);
   padding: 10px 15px;
   font-size: 9px;
   letter-spacing: .15em
 }

 .gallery-note {
   text-align: right;
   color: var(--muted);
   font-size: 11px;
   margin-top: 15px !important
 }

 .gallery-note a,
 .contact-social a {
   color: var(--deep);
   border-bottom: 1px solid var(--taupe)
 }

 .services {
   padding-top: 90px;
   padding-bottom: 100px
 }

 .service-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px
 }

 .service-card {
   position: relative;
   min-height: 330px;
   padding: 30px 32px 25px;
   border: 1px solid var(--line);
   background: rgba(255, 255, 255, .62);
   display: flex;
   flex-direction: column;
   align-items: flex-start
 }

 .service-number {
   font-size: 10px;
   letter-spacing: .16em;
   color: var(--taupe)
 }

 .service-card h3 {
   font-family: var(--serif);
   font-weight: 500;
   font-size: 26px;
   margin: 9px 0 12px
 }

 .service-card p {
   font-size: 13px;
   color: var(--muted);
   max-width: 460px;
   margin: 0 0 22px
 }

 .price {
   font-family: var(--serif);
   font-size: 24px;
   color: var(--deep);
   margin-top: auto
 }

 .price-from {
   font-size: 21px
 }

 .service-link {
   font-size: 11px;
   color: var(--deep);
   border-bottom: 1px solid var(--taupe);
   padding-bottom: 4px;
   margin-top: 12px
 }

 .service-link span {
   padding-left: 10px
 }

 .service-card-featured {
   background: #eee9e6;
   border-color: #c8bfbc
 }

 .popular-label {
   font-size: 8px;
   letter-spacing: .16em;
   color: var(--deep);
   margin-top: 7px
 }

 .price-note {
   font-size: 11px;
   color: var(--muted);
   margin-top: 18px
 }

 .booking {
   padding-top: 82px;
   padding-bottom: 90px;
   border-top: 1px solid var(--line);
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 9%
 }

 .booking-copy h2 {
   margin: 18px 0
 }

 .booking-copy>p {
   max-width: 420px;
   color: var(--muted);
   font-size: 14px
 }

 .booking-details {
   border-top: 1px solid var(--line)
 }

 .detail-row {
   display: flex;
   gap: 22px;
   padding: 22px 0;
   border-bottom: 1px solid var(--line)
 }

 .detail-icon {
   font-family: var(--serif);
   font-size: 17px;
   color: var(--taupe)
 }

 .detail-row h3 {
   font-size: 14px;
   margin: 0 0 4px
 }

 .detail-row p {
   font-size: 12px;
   color: var(--muted);
   margin: 0
 }

 .contact {
   background: var(--deep);
   color: #fff;
   max-width: var(--max);
   display: grid;
   grid-template-columns: 1.25fr .75fr;
   min-height: 390px;
   padding-top: 0;
   padding-bottom: 0;
   overflow: hidden
 }

 .contact-inner {
   padding: 66px 20px 60px 55px
 }

 .contact .section-kicker {
   color: #d7ceca
 }

 .contact h2 {
   font-size: clamp(34px, 4vw, 49px);
   margin: 18px 0
 }

 .contact h2 em {
   color: #e0d7d3
 }

 .contact-inner>p {
   font-size: 13px;
   color: #e0d9d6
 }

 .button-light {
   background: #f7f5f3;
   color: var(--deep);
   margin-top: 16px
 }

 .contact-social {
   font-size: 11px;
   color: #e0d9d6;
   margin-top: 28px
 }

 .contact-social a {
   color: white;
   border-color: #b7adab
 }

 .contact-side {
   height: 100%;
   min-height: 390px;
   position: relative
 }

 .contact-side:before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, var(--deep), transparent 35%);
   z-index: 1
 }

 .contact-side img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 25%;
   filter: saturate(.82)
 }

 .site-footer {
   max-width: var(--max);
   margin: auto;
   padding: 30px 28px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 15px;
   flex-wrap: wrap;
   color: var(--muted);
   font-size: 10px
 }

 .footer-brand {
   font-size: 14px;
   letter-spacing: .12em;
   color: var(--ink);
   display: flex;
   flex-direction: column;
   line-height: 1.4
 }

 .footer-brand span {
   font-family: var(--serif);
   font-size: 11px;
   letter-spacing: 0;
   color: var(--muted)
 }

 .floating-whatsapp {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 10;
   background: var(--deep);
   color: #fff;
   padding: 12px 17px;
   border-radius: 40px;
   display: flex;
   align-items: center;
   gap: 9px;
   box-shadow: 0 8px 24px #51494722;
   font-size: 11px
 }

 .wa-icon {
   font-size: 17px
 }

 @media(max-width:760px) {
   .pattern {
     height: 38px
   }

   .site-header {
     padding: 19px 22px
   }

   .brand-name {
     font-size: 21px
   }

   .menu-toggle {
     display: block;
     z-index: 12
   }

   .main-nav {
     display: none;
     position: absolute;
     top: 105px;
     left: 0;
     right: 0;
     background: var(--paper);
     padding: 22px;
     z-index: 11;
     flex-direction: column;
     gap: 18px;
     border-bottom: 1px solid var(--line)
   }

   .main-nav.open {
     display: flex
   }

   .nav-cta {
     width: 100%;
     text-align: center
   }

   .section-wrap {
     padding-left: 22px;
     padding-right: 22px
   }

   .hero {
     grid-template-columns: 1fr;
     gap: 38px;
     padding-top: 35px;
     padding-bottom: 65px
   }

   .hero h1 {
     font-size: 47px
   }

   .hero-photo-wrap {
     justify-self: center;
     width: min(100%, 390px);
     padding-right: 12px
   }

   .photo-frame {
     height: 440px
   }

   .photo-frame:after {
     right: 12px
   }

   .photo-stamp {
     left: -12px;
     bottom: 50px;
     width: 78px;
     height: 78px;
     font-size: 13px
   }

   .hero-note {
     margin-top: 32px
   }

   .intro {
     padding-top: 55px;
     padding-bottom: 65px
   }

   .intro-content {
     grid-template-columns: 1fr;
     gap: 14px
   }

   .intro h2 {
     font-size: 38px
   }

   .portfolio {
     padding-top: 55px;
     padding-bottom: 65px
   }

   .section-heading {
     display: block
   }

   .section-heading>p {
     margin-top: 15px
   }

   .gallery {
     grid-template-columns: 1fr;
     gap: 14px
   }

   .gallery-main {
     height: 330px
   }

   .gallery-side {
     height: 340px;
     width: 78%;
     margin-left: auto !important
   }

   .gallery-note {
     text-align: left
   }

   .services {
     padding-top: 65px;
     padding-bottom: 70px
   }

   .service-grid {
     grid-template-columns: 1fr
   }

   .service-card {
     min-height: 0;
     padding: 25px
   }

   .service-card p {
     margin-bottom: 22px
   }

   .booking {
     grid-template-columns: 1fr;
     gap: 28px;
     padding-top: 60px;
     padding-bottom: 65px
   }

   .contact {
     grid-template-columns: 1fr;
     padding: 0
   }

   .contact-inner {
     padding: 52px 25px 45px
   }

   .contact-side {
     min-height: 250px;
     height: 250px
   }

   .contact-side:before {
     background: linear-gradient(180deg, var(--deep), transparent 45%)
   }

   .site-footer {
     padding: 26px 22px;
     display: grid;
     grid-template-columns: 1fr 1fr
   }

   .floating-whatsapp {
     right: 14px;
     bottom: 14px
   }
 }

 @media(prefers-reduced-motion:reduce) {
   html {
     scroll-behavior: auto
   }

   *,
   *:before,
   *:after {
     transition: none !important
   }
 }


 /* Formulário de solicitação de horário */
 .booking-form-section {
   padding-top: 78px;
   padding-bottom: 86px
 }

 .booking-form-heading {
   text-align: center;
   max-width: 680px;
   margin: 0 auto 32px
 }

 .booking-form-heading h2 {
   font-family: var(--serif);
   font-size: clamp(36px, 4vw, 48px);
   font-weight: 400;
   line-height: 1.15;
   margin: 13px 0
 }

 .booking-form-heading h2 em {
   color: var(--deep)
 }

 .booking-form-heading>p {
   font-size: 13px;
   color: var(--muted);
   margin: 0
 }

 .booking-form {
   max-width: 760px;
   margin: 0 auto;
   padding: 34px 36px 28px;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: rgba(255, 255, 255, .72)
 }

 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px 16px
 }

 .form-field {
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: 12px;
   color: var(--ink);
   font-weight: 500
 }

 .form-field-full {
   grid-column: 1/-1
 }

 .form-field input,
 .form-field select,
 .form-field textarea {
   width: 100%;
   min-height: 47px;
   border: 1px solid var(--line);
   border-radius: 9px;
   background: #fff;
   color: var(--ink);
   font: 400 13px var(--sans);
   padding: 12px 14px;
   outline: none;
   transition: border-color .2s, box-shadow .2s
 }

 .form-field textarea {
   min-height: 112px;
   resize: vertical
 }

 .form-field input:focus,
 .form-field select:focus,
 .form-field textarea:focus {
   border-color: var(--deep);
   box-shadow: 0 0 0 3px rgba(118, 105, 103, .09)
 }

 .form-field input::placeholder,
 .form-field textarea::placeholder {
   color: #aaa09d
 }

 .booking-submit {
   width: 100%;
   justify-content: center;
   border: 0;
   border-radius: 8px;
   margin-top: 20px;
   cursor: pointer;
   font: 500 13px var(--sans)
 }

 .booking-form-note {
   text-align: center;
   color: var(--deep);
   font-family: var(--serif);
   font-size: 13px;
   margin: 17px 0 0
 }

 .booking-form-privacy {
   text-align: center;
   color: var(--muted);
   font-size: 10px;
   margin: 8px 0 0
 }

 /* -----------------------------------------------------------
 CARROSSEL
 -----------------------------------------------------------
*/

 /* Galeria automática de trabalhos das clientes */
 .portfolio-carousel {
   position: relative;
   max-width: 760px;
   margin: 0 auto;
   background: #e9e4e1;
   border-radius: 5px;
   overflow: hidden
 }

 .portfolio-slides {
   position: relative;
   min-height: 520px
 }

 .portfolio-slide {
   position: absolute;
   inset: 0;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity .65s ease, visibility .65s ease
 }

 .portfolio-slide.is-active {
   position: relative;
   opacity: 1;
   visibility: visible
 }

 .portfolio-slide img {
   display: block;
   width: 100%;
   height: 520px;
   object-fit: contain
 }

 .portfolio-slide figcaption {
   position: absolute;
   left: 16px;
   bottom: 16px;
   padding: 9px 13px;
   background: rgba(247, 245, 243, .94);
   color: var(--deep);
   font-size: 9px;
   letter-spacing: .16em
 }

 .portfolio-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   border: 1px solid rgba(255, 255, 255, .8);
   border-radius: 50%;
   background: rgba(247, 245, 243, .88);
   color: var(--deep);
   font-size: 26px;
   line-height: 1;
   cursor: pointer;
   z-index: 2
 }

 .portfolio-prev {
   left: 14px
 }

 .portfolio-next {
   right: 14px
 }

 /* --------------------------------------------------------
 Galeria de portfólio
 -----------------------------------------------------------
*/
 .portfolio-slides {
   position: relative;
 }
 
 /* Indicadores sincronizados */
 .portfolio-dots {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 9px;
   margin-top: 20px;
 }

 .portfolio-dot {
   width: 8px;
   height: 8px;
   min-width: 8px;
   padding: 0;
   border: none;
   border-radius: 50%;
   background: var(--text-muted, #aaa);
   opacity: 0.45;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .portfolio-dot.is-active {
   width: 22px;
   border-radius: 10px;
   opacity: 1;
   background: var(--accent, #a58b80);
 }

 .portfolio-dot:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 4px;
 }

 /* -----------------------------------------------------------
*/

 @media(max-width:760px) {
   .booking-form-section {
     padding-top: 58px;
     padding-bottom: 65px
   }

   .booking-form {
     padding: 24px 19px 21px
   }

   .form-grid {
     grid-template-columns: 1fr;
     gap: 16px
   }

   .form-field-full {
     grid-column: auto
   }

   .booking-form-heading>p {
     max-width: 340px;
     margin: 0 auto
   }
 }

 @media(max-width:760px) {
   .portfolio-carousel {
     max-width: 100%
   }

   .portfolio-slides {
     min-height: 460px
   }

   .portfolio-slide img {
     height: 460px
   }

   .portfolio-arrow {
     width: 35px;
     height: 35px
   }
 }

 @media(prefers-reduced-motion:reduce) {
   .portfolio-slide {
     transition: none
   }
 }