/* Tokens, base reset, buttons, eyebrow and footer live in
         assets/css/tokens.css (shared with /blog/*.html). Only
         page-specific rules for THIS landing page live below.
         Recoloring the whole site should never require touching this
         block — if you find yourself hardcoding a hex value here instead
         of adding/reusing a var(--token), stop and add the token instead. */

      .section-head {
        max-width: 720px;
      }
      .section-head h2 {
        font-size: clamp(32px, 4.8vw, 54px);
        margin-top: 14px;
        line-height: 1.08;
      }
      .section-head p.lead {
        margin-top: 20px;
        font-size: 18.5px;
        color: var(--ink-soft);
        line-height: 1.75;
        max-width: 640px;
      }
      .section-pad {
        padding: clamp(70px, 10vw, 140px) 0;
      }
      .divider-thin {
        height: 1px;
        background: var(--line);
        width: 100%;
      }

      /* ============ NAV (transparent-over-hero, opaque on scroll) ============ */
      /* This nav behavior only makes sense paired with the cinematic hero
         below (dark full-bleed background at the top of the page). If you
         drop the cinematic hero for a plainer/lighter hero, use the
         blog-post.css nav pattern instead (always-opaque, position:
         sticky) — don't ship this transparent variant over a light hero,
         the white logo/nav text will be invisible. */
      .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 18px clamp(20px, 5vw, 48px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition:
          background 0.45s ease,
          box-shadow 0.45s ease,
          padding 0.35s ease;
      }
      .site-nav.is-scrolled {
        background: rgba(245, 249, 252, 0.94);
        backdrop-filter: blur(10px);
        box-shadow: 0 1px 0 var(--line);
        padding-top: 12px;
        padding-bottom: 12px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .brand img {
        height: 46px;
        width: auto;
        filter: brightness(0) invert(1); /* logo forced white over the dark hero */
        transition: filter 0.4s ease;
      }
      .site-nav.is-scrolled .brand img {
        filter: none; /* back to full color once the opaque nav bg kicks in */
      }
      .brand-word {
        font-family: var(--serif);
        font-size: 18.5px;
        letter-spacing: 0.02em;
        color: var(--paper);
        transition: color 0.4s ease;
        white-space: nowrap;
      }
      .site-nav.is-scrolled .brand-word {
        color: var(--wine-deep);
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 22px;
      }
      .nav-links a {
        font-size: 13.5px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--paper);
        opacity: 0.85;
        transition:
          opacity 0.3s ease,
          color 0.4s ease;
        position: relative;
        padding: 4px 0;
        white-space: nowrap;
      }
      .nav-links a:hover {
        opacity: 1;
      }
      .site-nav.is-scrolled .nav-links a {
        color: var(--ink);
      }
      .nav-cta {
        display: flex;
        align-items: center;
        gap: 18px;
      }
      .nav-toggle {
        display: none;
      }
      @media (max-width: 1220px) {
        .brand-word {
          display: none;
        }
      }
      @media (max-width: 1100px) {
        .nav-links {
          position: fixed;
          inset: 0;
          height: 100dvh;
          background: var(--wine-deep);
          flex-direction: column;
          justify-content: center;
          gap: 26px;
          transform: translateY(-100%);
          transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
          z-index: 90;
        }
        .nav-links.open {
          transform: translateY(0);
        }
        .nav-links a {
          font-size: 21.5px;
          color: var(--paper);
          opacity: 1;
        }
        /* 48px, not smaller: iOS HIG wants >=44pt, Material wants >=48dp
           tap targets. This project shipped at 38px first and had to be
           bumped after the fact — start at 48 so you don't repeat that. */
        .nav-toggle {
          display: flex;
          flex-direction: column;
          gap: 5px;
          justify-content: center;
          align-items: center;
          width: 48px;
          height: 48px;
          background: none;
          border: none;
          cursor: pointer;
          z-index: 95;
          position: relative;
        }
        .nav-toggle span {
          width: 22px;
          height: 2px;
          background: var(--paper);
          transition: all 0.35s ease;
        }
        .site-nav.is-scrolled .nav-toggle span {
          background: var(--ink);
        }
        .nav-toggle.open span:nth-child(1) {
          transform: translateY(7px) rotate(45deg);
        }
        .nav-toggle.open span:nth-child(2) {
          opacity: 0;
        }
        .nav-toggle.open span:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg);
        }
        .nav-toggle.open span {
          background: var(--paper) !important;
        }
        .nav-cta .btn-primary {
          padding: 11px 20px;
          font-size: 14px;
        }
      }
      @media (max-width: 480px) {
        .brand-word {
          display: none;
        }
      }

      /* ============ CINEMATIC HERO / SCROLLYTELLING ============ */
      /* Full mechanics, GSAP/Lenis setup, and the pointer-events gotcha
         are documented in references/cinematic-hero.md. Read that before
         touching the JS below. Short version: this is a GSAP ScrollTrigger
         pin over 3 full-bleed frames; only ONE frame is interactive at a
         time and that must be driven from a single onUpdate callback, not
         scattered across per-frame tweens, or clicks on frame 2's button
         get eaten while frame 1 is still technically "closing". */
      .cine {
        position: relative;
        height: 340vh; /* pinned scroll runway — taller = slower/longer scrollytelling */
        background: var(--wine-deep);
      }
      @media (max-width: 720px) {
        .cine {
          height: auto; /* mobile gets the static fallback, see JS */
        }
      }
      .cine-stage {
        position: sticky;
        top: 0;
        height: 100dvh;
        width: 100%;
        overflow: hidden;
      }
      @media (max-width: 720px) {
        .cine-stage {
          position: relative;
          height: 92vh;
          min-height: 600px;
        }
      }
      .cine-media {
        position: absolute;
        inset: 0;
      }
      .cine-media > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transform: scale(1.18);
        will-change: transform, opacity;
      }
      .cine-media > img.is-base {
        opacity: 1;
      }
      .cine-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(7, 26, 46, 0.55) 0%,
          rgba(7, 26, 46, 0.28) 32%,
          rgba(7, 26, 46, 0.42) 68%,
          rgba(7, 26, 46, 0.86) 100%
        );
      }
      .cine-copy {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 clamp(20px, 6vw, 90px);
        max-width: 900px;
      }
      .cine-frame {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 clamp(20px, 6vw, 90px);
        max-width: 900px;
        opacity: 0;
        pointer-events: none; /* JS flips this per-frame — see syncActiveFrame() */
      }
      .cine-frame.is-active {
        opacity: 1;
        pointer-events: auto;
      }
      .cine-frame h2,
      .cine-frame h1 {
        color: var(--paper);
      }
      .cine-frame p {
        color: var(--blush);
      }
      .cine-kicker {
        color: var(--gold-soft);
      }
      .cine-h1 {
        font-size: clamp(41px, 7.1vw, 91px);
        line-height: 1.03;
        margin-top: 20px;
        max-width: 15ch;
      }
      .cine-h1 em {
        font-style: italic;
        color: var(--gold-soft);
      }
      .cine-sub {
        margin-top: 26px;
        font-size: 18.5px;
        line-height: 1.7;
        max-width: 52ch;
      }
      .cine-cta {
        margin-top: 38px;
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }
      .cine-progress {
        position: absolute;
        left: clamp(20px, 6vw, 90px);
        bottom: 34px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 14px;
        color: var(--blush);
        font-size: 12.5px;
        letter-spacing: 0.08em;
      }
      .cine-progress .track {
        width: 90px;
        height: 2px;
        background: var(--line-light);
      }
      .cine-progress .fill {
        height: 100%;
        width: 0%;
        background: var(--gold-soft);
        transition: width 0.1s linear;
      }
      .scroll-cue {
        position: absolute;
        right: clamp(20px, 6vw, 90px);
        bottom: 34px;
        z-index: 3;
        color: var(--blush);
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .scroll-cue .dash {
        width: 22px;
        height: 1px;
        background: var(--gold-soft);
      }
      @media (max-width: 720px) {
        .scroll-cue {
          display: none;
        }
      }

      /* ============ OFFERINGS GRID (generalized "tx-grid") ============ */
      /* Subtle-image cards: photo is a near-invisible watermark (opacity
         0 -> 0.18 on hover) rather than a headline visual — this reads as
         restrained/editorial. If the business wants photo-forward cards
         instead (more common for restaurants, real estate, portfolios),
         raise the max opacity to ~1 and drop the grayscale/blend tricks. */
      .offer-grid {
        margin-top: 56px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--line);
        border: 1px solid var(--line);
      }
      @media (max-width: 980px) {
        .offer-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 620px) {
        .offer-grid {
          grid-template-columns: 1fr;
        }
      }
      .offer-card {
        background: var(--paper);
        padding: 38px 32px;
        position: relative;
        overflow: hidden;
        min-height: 290px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .offer-card .offer-bg {
        position: absolute;
        inset: 0;
      }
      .offer-card .offer-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.17;
        transition:
          opacity 0.6s ease,
          transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        transform: scale(1.08);
      }
      .offer-card:hover .offer-bg img {
        opacity: 0.32;
        transform: scale(1);
      }
      .offer-card .offer-num {
        font-family: var(--serif);
        font-size: 14px;
        color: var(--gold);
        letter-spacing: 0.08em;
        position: relative;
        z-index: 1;
      }
      .offer-card h3 {
        font-size: 25px;
        margin-top: 14px;
        position: relative;
        z-index: 1;
      }
      .offer-card .offer-tag {
        font-size: 13px;
        letter-spacing: 0.04em;
        color: var(--wine);
        text-transform: uppercase;
        font-weight: 700;
        margin-top: 6px;
        position: relative;
        z-index: 1;
      }
      .offer-card p {
        margin-top: 14px;
        font-size: 15.5px;
        color: var(--ink-soft);
        line-height: 1.65;
        position: relative;
        z-index: 1;
      }
      .offer-card .offer-link {
        margin-top: 18px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.03em;
        color: var(--wine);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 1;
      }
      .offer-card .offer-link svg {
        width: 14px;
        height: 14px;
        transition: transform 0.3s ease;
      }
      .offer-card:hover .offer-link svg {
        transform: translateX(4px);
      }

      /* ============ CHAPTER (alternating image/text storytelling) ============ */
      .chapter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: clamp(30px, 6vw, 90px);
      }
      .chapter-row.reverse .chapter-media {
        order: 2;
      }
      @media (max-width: 900px) {
        .chapter-row {
          grid-template-columns: 1fr;
          gap: 36px;
        }
        .chapter-row.reverse .chapter-media {
          order: 0;
        }
      }
      .chapter-media {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
      }
      .chapter-media img {
        width: 100%;
        height: clamp(320px, 42vw, 560px);
        object-fit: cover;
      }
      .chapter-media .frame {
        position: absolute;
        inset: 14px;
        border: 1px solid rgba(245, 249, 252, 0.5);
        pointer-events: none;
      }
      .chapter-body h3 {
        font-size: clamp(26px, 3vw, 37px);
        line-height: 1.15;
        margin-top: 12px;
      }
      .chapter-body p {
        margin-top: 18px;
        color: var(--ink-soft);
        font-size: 17.5px;
        line-height: 1.75;
      }
      .chapter-body p + p {
        margin-top: 14px;
      }
      .sub-block {
        margin-top: 64px;
        padding-top: 52px;
        border-top: 1px solid var(--line);
      }
      .sub-block h4 {
        font-size: 21.5px;
        color: var(--wine);
      }
      .sub-block .tag {
        font-size: 12.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 700;
      }
      .sub-block p {
        margin-top: 12px;
        color: var(--ink-soft);
        font-size: 16.5px;
        line-height: 1.75;
        max-width: 74ch;
      }

      /* ============ SIGNATURE OFFERING (dark deep-dive section) ============ */
      /* Generalized from a real project's "featured treatment" spotlight —
         use this pattern for the ONE offering/product/service the business
         wants to sell hardest (a flagship service, a bestseller, a
         signature dish). Skip this section entirely for businesses with no
         single standout offering; don't force it. */
      .signature {
        background: var(--wine-deep);
        color: var(--paper);
        position: relative;
        overflow: hidden;
      }
      .signature::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          60% 60% at 80% 20%,
          rgba(247, 184, 28, 0.12),
          transparent 60%
        );
      }
      .signature .container {
        position: relative;
        z-index: 1;
      }
      .signature .section-head p.lead {
        color: var(--blush);
      }
      .signature h2 {
        color: var(--paper);
      }
      .steps {
        margin-top: 60px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--line-light);
        border: 1px solid var(--line-light);
      }
      @media (max-width: 820px) {
        .steps {
          grid-template-columns: 1fr;
        }
      }
      .step {
        background: var(--wine-deep);
        padding: 36px 30px;
      }
      .step .step-num {
        font-family: var(--serif);
        font-size: 16px;
        color: var(--gold-soft);
      }
      .step h4 {
        color: var(--paper);
        font-size: 20.5px;
        margin-top: 14px;
      }
      .step p {
        color: var(--blush);
        font-size: 15.5px;
        margin-top: 10px;
        line-height: 1.65;
      }

      /* ============ CREDENTIALS / PRESS GRID ("media-grid") ============ */
      .media-grid {
        margin-top: 56px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
      }
      @media (max-width: 820px) {
        .media-grid {
          grid-template-columns: 1fr;
        }
      }
      .media-card {
        border-top: 2px solid var(--wine);
        padding-top: 22px;
      }
      .media-card .tag {
        font-size: 12.5px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 700;
      }
      .media-card h4 {
        font-size: 22.5px;
        margin-top: 12px;
      }
      .media-card p {
        margin-top: 12px;
        font-size: 15.5px;
        color: var(--ink-soft);
        line-height: 1.7;
      }
      .media-card ul {
        margin: 14px 0 0;
        padding: 0;
      }
      .media-card li {
        list-style: none;
        font-size: 15px;
        color: var(--ink-soft);
        padding: 9px 0;
        border-top: 1px solid var(--line);
      }
      .media-card li:first-child {
        border-top: none;
      }

      /* ============ BLOG ============ */
      /* Full architecture (why tokens.css is shared, why the Python
         generator exists, the object-fit:cover height gotcha) is in
         references/blog-system.md. This is just the homepage section CSS —
         the standalone /blog/*.html pages use blog-post.css instead. */
      .blog-featured {
        margin-top: 56px;
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 0;
        border: 1px solid var(--line);
        background: var(--paper);
      }
      .blog-featured .blog-media {
        position: relative;
        overflow: hidden;
        min-height: 320px;
      }
      .blog-featured .blog-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .blog-featured:hover .blog-media img {
        transform: scale(1.045);
      }
      .blog-featured .blog-body {
        padding: 44px 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .blog-tag {
        font-size: 12.5px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 700;
      }
      .blog-featured h3 {
        font-size: clamp(24px, 2.6vw, 32px);
        margin-top: 14px;
        line-height: 1.18;
      }
      .blog-featured .blog-excerpt {
        margin-top: 14px;
        font-size: 16px;
        color: var(--ink-soft);
        line-height: 1.7;
      }
      .blog-more {
        margin-top: 22px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.03em;
        color: var(--wine);
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .blog-more svg {
        width: 14px;
        height: 14px;
        transition: transform 0.3s ease;
      }
      .blog-featured:hover .blog-more svg {
        transform: translateX(4px);
      }
      @media (max-width: 820px) {
        .blog-featured {
          grid-template-columns: 1fr;
        }
        .blog-featured .blog-media {
          min-height: 220px;
        }
        .blog-featured .blog-body {
          padding: 32px 26px;
        }
      }
      .blog-grid {
        margin-top: 1px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--line);
        border: 1px solid var(--line);
        border-top: none;
      }
      @media (max-width: 980px) {
        .blog-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 560px) {
        .blog-grid {
          grid-template-columns: 1fr;
        }
      }
      .blog-card {
        background: var(--paper);
        display: flex;
        flex-direction: column;
      }
      .blog-card .blog-media {
        position: relative;
        overflow: hidden;
        aspect-ratio: 4 / 3;
      }
      .blog-card .blog-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .blog-card:hover .blog-media img {
        transform: scale(1.06);
      }
      .blog-card .blog-body {
        padding: 24px 22px 28px;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .blog-card h4 {
        font-size: 19px;
        margin-top: 12px;
        line-height: 1.25;
      }
      .blog-card .blog-excerpt {
        margin-top: 10px;
        font-size: 14.5px;
        color: var(--ink-soft);
        line-height: 1.6;
        flex: 1;
      }
      .blog-card .blog-more {
        margin-top: 16px;
        font-size: 13px;
      }
      .blog-card:hover .blog-more svg {
        transform: translateX(4px);
      }
      .blog-cta {
        margin-top: 50px;
        display: flex;
        justify-content: center;
      }

      /* ============ FAQ ============ */
      .faq-list {
        margin-top: 50px;
        max-width: 820px;
      }
      .faq-item {
        border-top: 1px solid var(--line);
      }
      .faq-item:last-child {
        border-bottom: 1px solid var(--line);
      }
      .faq-q {
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 24px 2px;
        font-family: var(--serif);
        font-size: 19.5px;
        color: var(--ink);
      }
      .faq-q .plus {
        position: relative;
        width: 16px;
        height: 16px;
        flex: none;
      }
      .faq-q .plus::before,
      .faq-q .plus::after {
        content: "";
        position: absolute;
        background: var(--wine);
        transition: transform 0.35s ease;
      }
      .faq-q .plus::before {
        width: 100%;
        height: 1.5px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      .faq-q .plus::after {
        width: 1.5px;
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
      }
      .faq-item.open .plus::after {
        transform: translateX(-50%) scaleY(0);
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .faq-a-in {
        padding: 0 2px 26px;
        font-size: 16px;
        color: var(--ink-soft);
        line-height: 1.75;
        max-width: 72ch;
      }

      /* ============ CONTACT / CTA ============ */
      .contact {
        background: var(--wine);
        color: var(--paper);
        position: relative;
        overflow: hidden;
      }
      .contact::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          50% 60% at 10% 100%,
          rgba(247, 184, 28, 0.18),
          transparent 60%
        );
      }
      .contact .container {
        position: relative;
        z-index: 1;
      }
      .contact-wrap {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: clamp(30px, 6vw, 90px);
        align-items: end;
      }
      @media (max-width: 900px) {
        .contact-wrap {
          grid-template-columns: 1fr;
        }
      }
      .contact h2 {
        color: var(--paper);
        font-size: clamp(35px, 5vw, 58px);
        line-height: 1.08;
      }
      .contact .lead {
        margin-top: 20px;
        color: var(--blush);
        font-size: 18.5px;
        max-width: 52ch;
        line-height: 1.7;
      }
      .contact-cta {
        margin-top: 34px;
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }
      .contact-info {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .contact-info .row {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--line-light);
      }
      .contact-info .row:last-child {
        border-bottom: none;
      }
      .contact-info .row .ic {
        width: 20px;
        height: 20px;
        color: var(--gold-soft);
        flex: none;
        margin-top: 2px;
      }
      .contact-info b {
        display: block;
        font-size: 12.5px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--gold-soft);
        margin-bottom: 4px;
      }
      .contact-info span {
        font-size: 16.5px;
        color: var(--paper);
      }

      .reveal {
        opacity: 0;
        transform: translateY(36px);
      }

/* ============ ESPECÍFICO DO SITE DO YURI ============ */
#cineImg1 { object-position: 40% 60%; }

.offer-group { margin-top: 56px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.offer-group + .offer-grid { margin-top: 22px; }
.offer-group h3 { font-size: clamp(24px, 3vw, 32px); color: var(--wine); }
.offer-group span { font-size: 14.5px; color: var(--ink-soft); }
.offer-card { text-decoration: none; }
.offer-card.is-eletrica .offer-num { color: var(--gold); }
.offer-card.is-piscina .offer-num { color: var(--wine); font-weight: 700; }
.offer-num { font-family: var(--sans); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.chapter-media img { background: var(--paper-2); }

/* Galeria */
.filters { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; }
.filter { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 14.5px var(--sans); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.filter:hover { border-color: var(--wine); }
.filter[aria-pressed="true"] { background: var(--wine); color: var(--paper); border-color: var(--wine); }
.gallery { margin-top: 32px; columns: 3; column-gap: 14px; }
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 520px) { .gallery { column-gap: 10px; } }
.g-item { break-inside: avoid; margin: 0 0 14px; display: block; width: 100%; padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in; position: relative; overflow: hidden; border-radius: var(--radius); }
.g-item img { width: 100%; height: auto; display: block; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.g-item:hover img { transform: scale(1.04); }
.g-item[hidden] { display: none; }
.g-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; font-size: 13px; color: var(--paper); text-align: left; background: linear-gradient(180deg, transparent, rgba(7,26,46,.78)); opacity: 0; transition: opacity .3s; }
.g-item:hover figcaption, .g-item:focus-visible figcaption { opacity: 1; }
@media (hover: none) { .g-item figcaption { opacity: 1; } }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; width: auto; overflow: visible; }
.lightbox::backdrop { background: rgba(7,26,46,.92); }
.lightbox img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; margin: 0 auto; border-radius: var(--radius); }
.lightbox p { color: var(--blush); text-align: center; margin-top: 12px; font-size: 14.5px; }
.lb-close, .lb-nav { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-light); background: rgba(7,26,46,.6); color: var(--paper); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-nav:hover { border-color: var(--gold-soft); }

/* Região atendida */
.chips { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.chip { padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 15.5px; font-weight: 600; background: var(--paper); }
.region-note { margin-top: 26px; color: var(--ink-soft); font-size: 16.5px; max-width: 60ch; }

.contact-info a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-soft); min-height: 24px; }
.contact-info .row > div { min-width: 0; }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: none; align-items: center; justify-content: center; box-shadow: 0 10px 28px -8px rgba(7,26,46,.55); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 720px) { .wa-float { display: flex; } }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--cta); color: var(--wine-deep); padding: 10px 16px; border-radius: 6px; font-weight: 700; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
.on-paper :focus-visible, .section-pad:not(.contact):not(.signature) :focus-visible { outline-color: var(--wine); }

/* alvos de toque >= 44px */
.nav-links a, .foot-links a, .contact-info a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1100px) { .nav-links a { min-height: 48px; } }
.nav-links a, .foot-links a { min-width: 44px; justify-content: center; }
.foot-links a { padding: 0 6px; }
#cineImg3 { object-position: 70% 50%; }

/* menu mobile aberto: texto sempre claro, mesmo com a nav já "scrolled" */
@media (max-width: 1100px) {
  .site-nav.is-scrolled .nav-links a { color: var(--paper); }
  .nav-links.open { visibility: visible; }
}